/* =========================================================
   RAVI — RASTREAMENTO PARA CARROS

   Todas as classes desta página possuem o namespace:

   ravi-carros-

   Isso evita conflitos com os módulos já existentes.
========================================================= */


/* =========================================================
   BASE
========================================================= */

.ravi-carros-page {

    width: 100%;

    overflow: hidden;

    background: #ffffff;

    color: #263238;

    font-family:
        "Inter",
        Arial,
        sans-serif;

}


.ravi-carros-page *,
.ravi-carros-page *::before,
.ravi-carros-page *::after {

    box-sizing: border-box;

}


.ravi-carros-container {

    width: 100%;

    max-width: 1180px;

    margin: 0 auto;

    padding:
        0 25px;

}


/* =========================================================
   BOTÕES
========================================================= */

.ravi-carros-btn-primary {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    min-height: 48px;

    padding:
        13px 22px;

    border-radius: 50px;

    background:
        #ff6b35;

    color: #ffffff;

    text-decoration: none;

    font-size: 13px;

    font-weight: 800;

    transition:
        .3s ease;

    box-shadow:
        0 10px 25px rgba(255, 107, 53, .20);

}


.ravi-carros-btn-primary:hover {

    background:
        #f4511e;

    transform:
        translateY(-2px);

}


.ravi-carros-btn-primary span {

    font-size: 17px;

    transition:
        .3s ease;

}


.ravi-carros-btn-primary:hover span {

    transform:
        translateX(4px);

}


.ravi-carros-btn-secondary {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 48px;

    padding:
        12px 21px;

    border:
        1px solid #d9e0e6;

    border-radius: 50px;

    color:
        #263238;

    text-decoration: none;

    font-size: 12px;

    font-weight: 700;

    transition:
        .3s ease;

}


.ravi-carros-btn-secondary:hover {

    border-color:
        #ff6b35;

    color:
        #ff6b35;

}


/* =========================================================
   EYEBROW
========================================================= */

.ravi-carros-eyebrow {

    display: inline-block;

    margin-bottom:
        12px;

    color:
        #ff6b35;

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        1.6px;

}


/* =========================================================
   HERO
========================================================= */

.ravi-carros-hero {

    position: relative;

    min-height:
        650px;

    display:
        flex;

    align-items:
        center;

    padding:
        130px 0 80px;

    background:
        linear-gradient(120deg,
            #f7fafc 0%,
            #ffffff 55%,
            #eef5fa 100%);

}


.ravi-carros-hero::before {

    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    right: -160px;
    top: 60px;

    border-radius: 50%;

    background:
        rgba(255, 107, 53, .06);

}


.ravi-carros-hero-grid {

    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        1fr 1fr;

    align-items: center;

    gap:
        65px;

}


.ravi-carros-hero-content {

    max-width:
        580px;

}


.ravi-carros-hero-content h1 {

    margin:
        0 0 20px;

    color:
        #102a43;

    font-size:
        clamp(38px, 5vw, 60px);

    line-height:
        1.04;

    letter-spacing:
        -2.5px;

    font-weight:
        800;

}


.ravi-carros-hero-content h1 strong {

    color:
        #ff6b35;

}


.ravi-carros-hero-content p {

    max-width:
        540px;

    margin:
        0 0 28px;

    color:
        #64748b;

    font-size:
        16px;

    line-height:
        1.7;

}


.ravi-carros-hero-actions {

    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        12px;

}


.ravi-carros-trust {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        10px 20px;

    margin-top:
        25px;

}


.ravi-carros-trust span {

    color:
        #64748b;

    font-size:
        9px;

    font-weight:
        600;

}


/* =========================================================
   HERO IMAGE
========================================================= */

.ravi-carros-hero-visual {

    display:
        flex;

    justify-content:
        flex-end;

}


.ravi-carros-image-wrapper {

    position:
        relative;

    width:
        100%;

    max-width:
        550px;

    aspect-ratio:
        4 / 3;

    overflow:
        hidden;

    border-radius:
        28px;

}


.ravi-carros-image-wrapper::before {

    content: "";

    position:
        absolute;

    width:
        100%;

    height:
        100%;

    right:
        -18px;

    bottom:
        -18px;

    border-radius:
        28px;

    background:
        #ff6b35;

    opacity:
        .10;

}


.ravi-carros-image-wrapper img {

    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 28px;
    box-shadow: 0 25px 60px rgba(15, 23, 42, .16);

}


.ravi-carros-location-card {

    position:
        absolute;

    z-index:
        3;

    left:
        -25px;

    bottom:
        28px;

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    padding:
        13px 17px;

    border-radius:
        14px;

    background:
        #ffffff;

    box-shadow:
        0 14px 35px rgba(15, 23, 42, .16);

}


.ravi-carros-location-icon {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        32px;

    height:
        32px;

    border-radius:
        50%;

    background:
        #fff0eb;

    color:
        #ff6b35;

    font-size:
        16px;

}


.ravi-carros-location-card div {

    display:
        flex;

    flex-direction:
        column;

    gap:
        3px;

}


.ravi-carros-location-card strong {

    color:
        #263238;

    font-size:
        10px;

}


.ravi-carros-location-card small {

    color:
        #8996a3;

    font-size:
        8px;

}


/* =========================================================
   TÍTULOS DE SEÇÃO
========================================================= */

.ravi-carros-section-heading {

    max-width:
        720px;

    margin:
        0 auto 45px;

    text-align:
        center;

}


.ravi-carros-section-heading>span {

    display:
        inline-block;

    margin-bottom:
        10px;

    color:
        #ff6b35;

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        1.5px;

}


.ravi-carros-section-heading h2 {

    margin:
        0 0 12px;

    color:
        #102a43;

    font-size:
        clamp(28px, 4vw, 42px);

    line-height:
        1.12;

    letter-spacing:
        -1.3px;

}


.ravi-carros-section-heading h2 strong {

    color:
        #ff6b35;

}


.ravi-carros-section-heading p {

    max-width:
        600px;

    margin:
        0 auto;

    color:
        #718096;

    font-size:
        13px;

    line-height:
        1.7;

}


/* =========================================================
   BENEFÍCIOS
========================================================= */

.ravi-carros-benefits {

    padding: 40px 0;
    background: #ffffff;

}


.ravi-carros-benefits-grid {

    display:
        grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap:
        18px;

}


.ravi-carros-benefit-card {

    padding:
        27px 22px;

    border:
        1px solid #edf1f4;

    border-radius:
        17px;

    background:
        #ffffff;

    transition:
        .3s ease;

}


.ravi-carros-benefit-card:hover {

    transform:
        translateY(-5px);

    border-color:
        rgba(255, 107, 53, .25);

    box-shadow:
        0 15px 35px rgba(15, 23, 42, .08);

}


.ravi-carros-card-icon {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        42px;

    height:
        42px;

    margin-bottom:
        20px;

    border-radius:
        12px;

    background:
        #fff1ec;

    color:
        #ff6b35;

    font-size:
        17px;

    font-weight:
        800;

}


.ravi-carros-benefit-card h3 {

    margin:
        0 0 9px;

    color:
        #263238;

    font-size:
        14px;

}


.ravi-carros-benefit-card p {

    margin:
        0;

    color:
        #7a8793;

    font-size:
        10px;

    line-height:
        1.7;

}


/* =========================================================
   RECURSOS
========================================================= */

.ravi-carros-resources {

    padding: 50px 0;
    background: #f7fafc;

}


.ravi-carros-resources-grid {

    display:
        grid;

    grid-template-columns:
        .95fr 1.05fr;

    align-items:
        center;

    gap:
        70px;

}


.ravi-carros-resources-image img {

    display: block;
    width: 100%;
    object-fit: cover;
    border-radius: 25px;
    box-shadow: 0 20px 50px rgba(15, 23, 42, .12);

}


.ravi-carros-resources-content h2 {

    max-width:
        570px;

    margin:
        0 0 15px;

    color:
        #102a43;

    font-size:
        clamp(29px, 4vw, 43px);

    line-height:
        1.12;

    letter-spacing:
        -1.4px;

}


.ravi-carros-resources-content>p {

    max-width:
        540px;

    margin:
        0 0 25px;

    color:
        #718096;

    font-size:
        13px;

    line-height:
        1.7;

}


.ravi-carros-resource-list {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        13px;

    margin:
        0 0 27px;

    padding:
        0;

    list-style:
        none;

}


.ravi-carros-resource-list li {

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    color:
        #3d4c59;

    font-size:
        10px;

    font-weight:
        600;

}


.ravi-carros-resource-list li span {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        19px;

    height:
        19px;

    border-radius:
        50%;

    background:
        #fff0eb;

    color:
        #ff6b35;

    font-size:
        9px;

}


.ravi-carros-link-btn {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    color:
        #ff6b35;

    text-decoration:
        none;

    font-size:
        11px;

    font-weight:
        800;

}


.ravi-carros-link-btn span {

    transition:
        .3s ease;

}


.ravi-carros-link-btn:hover span {

    transform:
        translateX(4px);

}


/* =========================================================
   SITUAÇÕES DE USO
========================================================= */

.ravi-carros-use-cases {

    padding: 50px 0;

}


.ravi-carros-use-grid {

    display:
        grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap:
        20px;

}


.ravi-carros-use-card {

    overflow:
        hidden;

    border:
        1px solid #edf1f4;

    border-radius:
        20px;

    background:
        #ffffff;

    transition:
        .3s ease;

}


.ravi-carros-use-card:hover {

    transform:
        translateY(-5px);

    box-shadow:
        0 18px 40px rgba(15, 23, 42, .09);

}


.ravi-carros-use-image {

    height:
        220px;

    overflow:
        hidden;

}


.ravi-carros-use-image img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transition:
        transform .5s ease;

}


.ravi-carros-use-card:hover img {

    transform:
        scale(1.04);

}


.ravi-carros-use-content {

    padding:
        23px;

}


.ravi-carros-use-content span {

    color:
        #ff6b35;

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        1.2px;

}


.ravi-carros-use-content h3 {

    margin:
        9px 0;

    color:
        #263238;

    font-size:
        17px;

    line-height:
        1.3;

}


.ravi-carros-use-content p {

    margin:
        0;

    color:
        #7b8792;

    font-size:
        10px;

    line-height:
        1.7;

}


/* =========================================================
   COMO FUNCIONA
========================================================= */

.ravi-carros-how {

    padding:
        100px 0;

    background:
        #102a43;

}


.ravi-carros-how .ravi-carros-section-heading>span {

    color:
        #ff8b62;

}


.ravi-carros-how .ravi-carros-section-heading h2 {

    color:
        #ffffff;

}


.ravi-carros-how .ravi-carros-section-heading p {

    color:
        rgba(255, 255, 255, .60);

}


.ravi-carros-steps {

    display:
        grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap:
        25px;

}


.ravi-carros-step {

    position:
        relative;

    padding:
        28px;

    border:
        1px solid rgba(255, 255, 255, .09);

    border-radius:
        18px;

    background:
        rgba(255, 255, 255, .04);

}


.ravi-carros-step-number {

    margin-bottom:
        20px;

    color:
        #ff6b35;

    font-size:
        25px;

    font-weight:
        800;

}


.ravi-carros-step h3 {

    margin:
        0 0 9px;

    color:
        #ffffff;

    font-size:
        15px;

}


.ravi-carros-step p {

    margin:
        0;

    color:
        rgba(255, 255, 255, .58);

    font-size:
        10px;

    line-height:
        1.7;

}


/* =========================================================
   SEGURANÇA
========================================================= */

.ravi-carros-security {

    padding:
        100px 0;

    background:
        #f7fafc;

}


.ravi-carros-security-box {

    display: flex;
    flex-wrap: wrap;

    overflow:
        hidden;

    border-radius:
        25px;

    background:
        #ffffff;

    box-shadow:
        0 18px 45px rgba(15, 23, 42, .07);

}


.ravi-carros-security-content {
    flex: 1;
    padding: 55px;
    width: 30%;
    min-width: 300px;

}


.ravi-carros-security-content h2 {

    max-width:
        550px;

    margin:
        0 0 15px;

    color:
        #102a43;

    font-size:
        clamp(28px, 4vw, 40px);

    line-height:
        1.15;

}


.ravi-carros-security-content>p {

    max-width:
        530px;

    margin:
        0 0 30px;

    color:
        #718096;

    font-size:
        12px;

    line-height:
        1.75;

}


.ravi-carros-security-points {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        12px;

}


.ravi-carros-security-points div {

    display:
        flex;

    flex-direction:
        column;

    gap:
        5px;

    min-width:
        120px;

    padding:
        13px;

    border-radius:
        10px;

    background:
        #f7fafc;

}


.ravi-carros-security-points strong {

    color:
        #ff6b35;

    font-size:
        11px;

}


.ravi-carros-security-points span {

    color:
        #52616d;

    font-size:
        8px;

    line-height:
        1.4;

}


.ravi-carros-security-image {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    width: 50%;
    
    min-width: 350px;

  
}


.ravi-carros-security-image img {

    width:
        100%;  

    object-fit:
        cover;

}


/* =========================================================
   PLANOS
========================================================= */

.ravi-carros-plans {

    padding:
        100px 0;

}


.ravi-carros-plan-card {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        30px;

    padding:
        35px 40px;

    border-radius:
        20px;

    background:
        linear-gradient(120deg,
            #f5f8fa,
            #ffffff);

    border:
        1px solid #edf1f4;

}


.ravi-carros-plan-label {

    display:
        block;

    margin-bottom:
        8px;

    color:
        #ff6b35;

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        1.3px;

}


.ravi-carros-plan-card h3 {

    margin:
        0 0 8px;

    color:
        #102a43;

    font-size:
        22px;

}


.ravi-carros-plan-card p {

    margin:
        0;

    color:
        #7a8793;

    font-size:
        10px;

}


/* =========================================================
   FAQ
========================================================= */

.ravi-carros-faq {

    padding:
        100px 0;

    background:
        #f7fafc;

}


.ravi-carros-faq-list {

    max-width:
        850px;

    margin:
        0 auto;

}


.ravi-carros-faq-item {

    border-bottom:
        1px solid #dfe5ea;

}


.ravi-carros-faq-item summary {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    padding:
        20px 0;

    cursor:
        pointer;

    list-style:
        none;

    color:
        #263238;

    font-size:
        12px;

    font-weight:
        700;

}


.ravi-carros-faq-item summary::-webkit-details-marker {

    display:
        none;

}


.ravi-carros-faq-item summary span {

    color:
        #ff6b35;

    font-size:
        20px;

    font-weight:
        400;

}


.ravi-carros-faq-item p {

    max-width:
        750px;

    margin:
        0;

    padding:
        0 0 20px;

    color:
        #718096;

    font-size:
        10px;

    line-height:
        1.7;

}


.ravi-carros-faq-action {

    margin-top:
        30px;

    text-align:
        center;

}


.ravi-carros-faq-action a {

    color:
        #ff6b35;

    text-decoration:
        none;

    font-size:
        10px;

    font-weight:
        800;

}


.ravi-carros-faq-action span {

    margin-left:
        5px;

}


/* =========================================================
   CTA FINAL
========================================================= */

.ravi-carros-final-cta {

    padding:
        40px 0 80px;

    background:
        #f7fafc;

}


.ravi-carros-final-box {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        30px;

    padding:
        45px;

    border-radius:
        24px;

    background:
        linear-gradient(120deg,
            #102a43,
            #173f64);

    box-shadow:
        0 20px 45px rgba(15, 42, 67, .15);

}


.ravi-carros-final-box>div {

    max-width:
        650px;

}


.ravi-carros-final-box>div>span {

    display:
        block;

    margin-bottom:
        9px;

    color:
        #ff8b62;

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        1.5px;

}


.ravi-carros-final-box h2 {

    margin:
        0 0 10px;

    color:
        #ffffff;

    font-size:
        clamp(27px, 4vw, 38px);

    line-height:
        1.15;

}


.ravi-carros-final-box p {

    margin:
        0;

    color:
        rgba(255, 255, 255, .60);

    font-size:
        11px;

    line-height:
        1.65;

}


.ravi-carros-final-btn {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        9px;

    flex-shrink:
        0;

    padding:
        14px 22px;

    border-radius:
        50px;

    background:
        #ff6b35;

    color:
        #ffffff;

    text-decoration:
        none;

    font-size:
        10px;

    font-weight:
        800;

    transition:
        .3s ease;

}


.ravi-carros-final-btn:hover {

    background:
        #f4511e;

    transform:
        translateY(-2px);

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 950px) {

    .ravi-carros-hero {

        padding-top:
            115px;

    }


    .ravi-carros-hero-grid {

        grid-template-columns:
            1fr;

        gap:
            45px;

    }


    .ravi-carros-hero-content {

        max-width:
            700px;

        text-align:
            center;

        margin:
            0 auto;

    }


    .ravi-carros-hero-content p {

        margin-left:
            auto;

        margin-right:
            auto;

    }


    .ravi-carros-hero-actions {

        justify-content:
            center;

    }


    .ravi-carros-trust {

        justify-content:
            center;

    }


    .ravi-carros-hero-visual {

        justify-content:
            center;

    }


    .ravi-carros-benefits-grid {

        grid-template-columns:
            1fr 1fr;

    }


    .ravi-carros-resources-grid {

        grid-template-columns:
            1fr;

        gap:
            45px;

    }


    .ravi-carros-resources-image {

        max-width:
            650px;

        margin:
            0 auto;

    }


    .ravi-carros-resources-content {

        max-width:
            700px;

        margin:
            0 auto;

    }


    .ravi-carros-use-grid {

        grid-template-columns:
            1fr 1fr;

    }


    .ravi-carros-use-card:last-child {

        grid-column:
            span 2;

        max-width:
            50%;

        margin:
            0 auto;

    }


    .ravi-carros-security-box {

        grid-template-columns:
            1fr;

    }


    .ravi-carros-security-image {
       
        justify-content:end;
        min-width: 250px;
       

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 680px) {

    .ravi-carros-container {

        padding-left:
            18px;

        padding-right:
            18px;

    }


    .ravi-carros-hero {

        min-height:
            auto;

        padding:
            110px 0 65px;

    }


    .ravi-carros-hero-content h1 {

        font-size:
            38px;

        letter-spacing:
            -1.5px;

    }


    .ravi-carros-hero-content p {

        font-size:
            13px;

    }


    .ravi-carros-hero-actions {

        flex-direction:
            column;

        width:
            100%;

    }


    .ravi-carros-btn-primary,
    .ravi-carros-btn-secondary {

        width:
            100%;

    }


    .ravi-carros-trust {

        flex-direction:
            column;

        align-items:
            center;

    }


    .ravi-carros-image-wrapper img {

        border-radius: 20px;

    }


    .ravi-carros-location-card {

        left:
            10px;

        bottom:
            15px;

    }


    .ravi-carros-benefits,
    .ravi-carros-resources,
    .ravi-carros-use-cases,
    .ravi-carros-how,
    .ravi-carros-security,
    .ravi-carros-plans,
    .ravi-carros-faq {

        padding:
            30px 0;

    }


    .ravi-carros-benefits-grid {

        grid-template-columns:
            1fr;

    }


    .ravi-carros-section-heading {

        margin-bottom:
            32px;

    }


    .ravi-carros-section-heading h2 {

        font-size:
            30px;

    }


    .ravi-carros-resources-image img {

        height:
            290px;

        border-radius:
            20px;

    }


    .ravi-carros-resource-list {

        grid-template-columns:
            1fr;

    }


    .ravi-carros-use-grid {

        grid-template-columns:
            1fr;

    }


    .ravi-carros-use-card:last-child {

        grid-column:
            auto;

        max-width:
            none;

    }


    .ravi-carros-use-image {

        height:
            200px;

    }


    .ravi-carros-steps {

        grid-template-columns:
            1fr;

    }


    .ravi-carros-security-content {

        padding:
            30px 23px;

    }


    .ravi-carros-security-content h2 {

        font-size:
            29px;

    }


    .ravi-carros-security-image {

    }


    .ravi-carros-security-points {

        display:
            grid;

        grid-template-columns:
            1fr;

    }


    .ravi-carros-plan-card {

        flex-direction:
            column;

        align-items:
            flex-start;

        padding:
            28px 23px;

    }


    .ravi-carros-plan-card .ravi-carros-btn-primary {

        width:
            100%;

    }


    .ravi-carros-final-cta {

        padding:
            20px 0 60px;

    }


    .ravi-carros-final-box {

        flex-direction:
            column;

        align-items:
            flex-start;

        padding:
            30px 23px;

        border-radius:
            20px;

    }


    .ravi-carros-final-btn {

        width:
            100%;

    }

}


/* =========================================================
   MOBILE PEQUENO
========================================================= */

@media (max-width: 380px) {

    .ravi-carros-hero-content h1 {

        font-size:
            33px;

    }


    .ravi-carros-section-heading h2 {

        font-size:
            27px;

    }


    .ravi-carros-location-card {

        padding:
            10px 12px;

    }

}