/* ===================================================================
   FABINHO GUINCHOS
   STYLE.CSS
   Design System Base
   Versão: 1.0
=================================================================== */

/* ==========================================================
RESET RESPONSIVO
========================================================== */

*,
*::before,
*::after{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    width:100%;
    overflow-x:hidden;
    scroll-behavior:smooth;
    scroll-padding-top:90px;
    -webkit-text-size-adjust:100%;
}

body{
    width:100%;
    overflow-x:hidden;
    font-family:'Inter',sans-serif;
    background:#FFFFFF;
    color:#111827;
    line-height:1.6;
    overflow-x:hidden;
    text-rendering:optimizeLegibility;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

img,
svg,
video,
iframe,
canvas{
    display:block;
    max-width:100%;
    height:auto;
}

button,
input,
textarea,
select{
    max-width:100%;
}

.container{
    width:min(100% - 32px,var(--container));
    margin-inline:auto;
}

a{
    color:inherit;
    text-decoration:none;
}


ul,
ol{
    list-style:none;
}

table{
    border-collapse:collapse;
    border-spacing:0;
}

/* ===================================================================
   02. DESIGN TOKENS
=================================================================== */

:root{

    /* ==========================================================
       CORES
    ========================================================== */

    --color-primary:#F97316;
    --color-primary-dark:#EA580C;
    --color-primary-light:#FDBA74;

    --color-dark:#111827;
    --color-dark-2:#1F2937;

    --color-white:#FFFFFF;

    --color-gray-50:#F8FAFC;
    --color-gray-100:#F1F5F9;
    --color-gray-200:#E2E8F0;
    --color-gray-300:#CBD5E1;
    --color-gray-400:#94A3B8;
    --color-gray-500:#64748B;
    --color-gray-600:#475569;
    --color-gray-700:#334155;

    --color-success:#22C55E;
    --color-warning:#F59E0B;
    --color-danger:#EF4444;

    /* ==========================================================
       TIPOGRAFIA
    ========================================================== */

    --font-family:'Inter',sans-serif;

    --fs-xs:.75rem;
    --fs-sm:.875rem;
    --fs-base:1rem;
    --fs-lg:1.125rem;
    --fs-xl:1.25rem;
    --fs-2xl:1.5rem;
    --fs-3xl:2rem;
    --fs-4xl:2.75rem;
    --fs-5xl:3.5rem;

    --fw-400:400;
    --fw-500:500;
    --fw-600:600;
    --fw-700:700;
    --fw-800:800;

    /* ==========================================================
       ESPAÇAMENTOS
    ========================================================== */

    --space-1:.25rem;
    --space-2:.5rem;
    --space-3:.75rem;
    --space-4:1rem;
    --space-5:1.5rem;
    --space-6:2rem;
    --space-7:3rem;
    --space-8:4rem;
    --space-9:5rem;
    --space-10:7rem;

    /* ==========================================================
       LAYOUT
    ========================================================== */

    --container:1280px;
    --content-width:900px;
    --text-width:720px;

    --header-height: 110px;

    /* ==========================================================
       BORDAS
    ========================================================== */

    --border-width:1px;
    --border-color:var(--color-gray-200);

    --radius-xs:6px;
    --radius-sm:10px;
    --radius-md:14px;
    --radius-lg:18px;
    --radius-xl:24px;
    --radius-2xl:32px;
    --radius-pill:999px;

    /* ==========================================================
       SOMBRAS
    ========================================================== */

    --shadow-xs:
        0 1px 3px rgba(15,23,42,.04);

    --shadow-sm:
        0 4px 10px rgba(15,23,42,.06);

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

    --shadow-lg:
        0 24px 60px rgba(15,23,42,.12);

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

    /* ==========================================================
       BACKDROP
    ========================================================== */

    --blur-sm:6px;
    --blur-md:12px;
    --blur-lg:18px;

    /* ==========================================================
       TRANSIÇÕES
    ========================================================== */

    --ease:cubic-bezier(.4,0,.2,1);

    --transition-fast:.2s var(--ease);
    --transition:.35s var(--ease);
    --transition-slow:.6s var(--ease);

    /* ==========================================================
       Z-INDEX
    ========================================================== */

    --z-background:-1;

    --z-default:1;

    --z-overlay:50;

    --z-sticky:500;

    --z-header:1150;

    --z-menu:1100;

    --z-whatsapp:1200;

    --z-backtotop:1250;

    --z-modal:2000;

    --z-loader:9999;

}


/* ===================================================================
   04. CONTAINER
=================================================================== */

.container{

    width:min(100% - 48px,var(--container));

    margin-inline:auto;

}



/* ===================================================================
   05. SECTION
=================================================================== */

.section{

    padding:120px 0;

}

.section-header{

    max-width:720px;

    margin:0 auto 70px;

    text-align:center;

}

.section-tag{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    padding:10px 20px;

    margin-bottom:18px;
    margin-top: 18px;

    border-radius:999px;

    background:#FFF4ED;

    color:var(--color-primary);

    font-size:.85rem;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.08em;

}

.section-header h2{

    margin-bottom:20px;

}

.section-header p{

    font-size:1.1rem;

}



/* ===================================================================
   07. BOTÕES
=================================================================== */

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    min-height:58px;

    padding:0 30px;

    border-radius:18px;

    font-weight:700;

    transition:var(--transition);

    white-space:nowrap;

}

.btn-primary{

    background:var(--color-primary);

    color:#FFF;

    box-shadow:var(--shadow-md);

}

.btn-primary:hover{

    background:var(--color-primary-dark);

    transform:translateY(-3px);

}

.btn-outline{

    border:2px solid var(--color-primary);

    color:var(--color-primary);

    background:#FFF;

}

.btn-outline:hover{

    background:var(--color-primary);

    color:#FFF;

}



/* ===================================================================
   10. SCROLLBAR
=================================================================== */

::-webkit-scrollbar{

    width:12px;

}

::-webkit-scrollbar-track{

    background:#F3F4F6;

}

::-webkit-scrollbar-thumb{

    background:var(--color-primary);

    border-radius:999px;

    border:3px solid #F3F4F6;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--color-primary-dark);

}



/* ===================================================================
   11. SELEÇÃO
=================================================================== */

::selection{

    background:var(--color-primary);

    color:#FFF;

}



/* ===================================================================
   12. ANIMAÇÕES GLOBAIS
=================================================================== */

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes fadeIn{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}



/* ===================================================================
   13. ESTADOS GLOBAIS
=================================================================== */

html.menu-open,
body.menu-open{

    overflow:hidden;

    height:100%;

}

.hidden{

    display:none !important;

}

/* ===================================================================
   ACESSIBILIDADE
=================================================================== */

:focus-visible{

    outline:3px solid var(--color-primary);

    outline-offset:4px;

}

/* ===================================================================
   SVG
=================================================================== */

.icon{

    width:24px;

    height:24px;

    flex-shrink:0;

}

/* ===================================================================
   15. HEADER
=================================================================== */

.header{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:var(--z-header);

    height:var(--header-height);
    display:flex;
    align-items:center;

    background:transparent;

    transition:
        background var(--transition),
        box-shadow var(--transition),
        backdrop-filter var(--transition),
        height var(--transition);
}

.header.scrolled{

    height:72px;

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

    backdrop-filter:blur(14px);

    -webkit-backdrop-filter:blur(14px);

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

    border-bottom:1px solid rgba(226,232,240,.8);

}


/* ===================================================================
   HEADER CONTAINER
=================================================================== */

.header .container{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:48px;

    height:100%;

}


/* ===================================================================
   LOGO
=================================================================== */

.logo{

    display:flex;

    align-items:center;

    flex-shrink:0;

    transition:var(--transition);

}

.logo img{

    height: 90px;

    width:auto;

    transition:var(--transition);

}

.header.scrolled .logo img{

    height:46px;

}

.logo:hover{

    transform:scale(1.03);

}

.logo-text{

    display:inline-block;

    max-width:0;

    margin-left:0;

    overflow:hidden;

    white-space:nowrap;

    opacity:0;

    color:#FFFFFF;

    font-weight:700;

    font-size:1.05rem;

    letter-spacing:.01em;

    transform:translateX(-8px);

    transition:
        max-width .35s ease,
        margin-left .35s ease,
        opacity .25s ease,
        transform .35s ease,
        color var(--transition);

}

.logo:hover .logo-text,
.logo:focus-visible .logo-text,
.logo:active .logo-text{

    max-width:140px;

    margin-left:12px;

    opacity:1;

    transform:translateX(0);

}

.header.scrolled .logo-text{

    color:var(--color-dark);

}

/* Em dispositivos touch (sem hover), o texto fica sempre visível */
@media (hover:none){

    .logo-text{

        max-width:140px;

        margin-left:12px;

        opacity:1;

        transform:translateX(0);

    }

}

/* Em telas de toque/mobile, o texto já aparece direto, sem precisar de hover */
@media (hover:none), (max-width:768px){

    .logo-text{

        max-width:140px;

        margin-left:12px;

        opacity:1;

        transform:translateX(0);

    }

}


/* ===================================================================
   NAVBAR
=================================================================== */

.navbar{

    margin-left:auto;

}

.navbar ul{

    display:flex;

    align-items:center;

    gap:36px;

}

.navbar li{

    position:relative;

}

.navbar a{

    position:relative;

    display:inline-flex;

    align-items:center;

    height:40px;

    font-size:.96rem;

    font-weight:600;

    color:#FFFFFF;

    transition:var(--transition);

}


/* muda automaticamente quando o header recebe fundo branco */

.header.scrolled .navbar a{

    color:var(--color-dark);

}


/* ===================================================================
   UNDERLINE ANIMADA
=================================================================== */

.navbar a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-6px;

    width:0;

    height:2px;

    border-radius:999px;

    background:var(--color-primary);

    transition:var(--transition);

}

.navbar a:hover{

    color:var(--color-primary);

}

.navbar a:hover::after{

    width:100%;

}


/* ===================================================================
   HEADER ACTIONS
=================================================================== */

.header-actions{

    display:flex;

    align-items:center;

    gap:16px;

}


/* ===================================================================
   BOTÃO HEADER
=================================================================== */

.header-actions .btn{

    min-height:52px;

    padding-inline:28px;

}


/* ===================================================================
   MENU HAMBÚRGUER
=================================================================== */

.menu-toggle{

    display:none;

    position:relative;

    z-index:calc(var(--z-menu) + 1);

    width:52px;

    height:52px;

    border-radius:14px;

    background:#FFFFFF;

    box-shadow:var(--shadow-sm);

    transition:var(--transition);

}

.menu-toggle:hover{

    transform:translateY(-2px);

}

.menu-toggle span{

    position:absolute;

    left:50%;

    width:24px;

    height:2px;

    background:var(--color-dark);

    border-radius:999px;

    transition:var(--transition);

    transform:translateX(-50%);

}

.menu-toggle span:nth-child(1){

    top:17px;

}

.menu-toggle span:nth-child(2){

    top:25px;

}

.menu-toggle span:nth-child(3){

    top:33px;

}


/* ===================================================================
   MENU ABERTO
=================================================================== */

.menu-toggle.active span:nth-child(1){

    transform:
        translateX(-50%)
        rotate(45deg);

    top:25px;

}

.menu-toggle.active span:nth-child(2){

    opacity:0;

}

.menu-toggle.active span:nth-child(3){

    transform:
        translateX(-50%)
        rotate(-45deg);

    top:25px;

}


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

.mobile-menu{

    position:fixed;

    inset:0;

    z-index:var(--z-menu);

    display:flex;

    align-items:center;

    justify-content:center;

    flex-direction:column;

    gap:32px;

    background:rgba(17,24,39,.97);

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    transition:var(--transition);

}

.mobile-menu.active{

    opacity:1;

    visibility:visible;

    pointer-events:auto;

}

.mobile-menu ul{

    display:flex;

    flex-direction:column;

    gap:20px;

}

.mobile-menu a{

    color:#FFFFFF;

    font-size:1.3rem;

    font-weight:700;

    transition:var(--transition);

}

.mobile-menu a:hover{

    color:var(--color-primary);

}

.mobile-menu .btn{

    width:100%;

    max-width:240px;

    margin:36px auto 0;

    min-height:52px;

    padding:0 24px;

    border-radius:14px;

    font-size:.95rem;

    font-weight:600;

}


/* ===================================================================
   OVERLAY
=================================================================== */

.menu-overlay{

    position:fixed;

    inset:0;

    z-index:calc(var(--z-menu) - 1);

    background:rgba(0,0,0,.45);

    opacity:0;

    visibility:hidden;

    transition:var(--transition);

}

.menu-overlay.active{

    opacity:1;

    visibility:visible;

}


/* ===================================================================
   HEADER HOVER
=================================================================== */

.header:hover{

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

    backdrop-filter:blur(8px);

}


/* quando estiver rolado mantém o branco */

.header.scrolled:hover{

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

}


/* ===================================================================
   HEADER ANIMATION
=================================================================== */

@keyframes headerSlide{

    from{

        opacity:0;

        transform:translateY(-100%);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.header{

    animation:headerSlide .7s ease;

}

/* ===================================================================
   16. HERO
=================================================================== */

.hero{
    position:relative;
    display:flex;
    align-items:center;
    min-height:100vh;
    padding-top:calc(var(--header-height) + 40px);
    overflow:hidden;
    isolation:isolate;
    background-color:#111827;
}


/* ===================================================================
   OVERLAY
=================================================================== */

.hero-overlay{
    position:absolute;
    inset:0;
    z-index:0;

    background:
        linear-gradient(
            90deg,
            rgba(17,24,39,.55) 0%,
            rgba(17,24,39,.4) 45%,
            rgba(17,24,39,.28) 70%,
            rgba(17,24,39,.18) 100%
        );
}

.hero::after{

    content:"";

    position:absolute;

    inset:0;

    background:

        radial-gradient(
            circle at top right,
            rgba(249,115,22,.18),
            transparent 45%
        );

    z-index:1;

}


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

.hero .container{

    position:relative;
    z-index:5;

    width:min(100% - 48px,var(--container));

    margin-inline:auto;

    display:flex;
    justify-content:center;

    padding-bottom:clamp(60px,10vh,120px);

}

.hero-content{

    max-width:760px;

    color:#FFFFFF;

    display:flex;

    flex-direction:column;

    gap: 28px;
    
    text-align: center;
    align-items: center;

}

.hero-logo-mark{

    width:min(220px,55vw);

    height:auto;

    filter:drop-shadow(0 10px 30px rgba(0,0,0,.45));

}


/* ===================================================================
   BADGE
=================================================================== */

.hero-badge{

    display:inline-flex;

    align-items:center;

    gap:12px;

    width:max-content;

    padding:12px 22px;

    border-radius: 10px 10px 10px 10px;

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

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

    backdrop-filter:blur(10px);

    color:#FFFFFF;

    font-size:.9rem;

    font-weight:600;

}



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

.hero h1{

    color:#FFFFFF;

    max-width:760px;

    line-height:1.08;

    font-weight: 100;

    font-size: 3rem;

    letter-spacing:-.04em;

}

.hero p{

    max-width:650px;

    font-size:1.18rem;

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

}

.hero-title{

    color:#FFFFFF;

    max-width:760px;

    line-height:1.02;

    font-family:'Montserrat','Inter',sans-serif;

    font-weight:900;

    font-size:clamp(2.6rem,2rem + 3vw,4.2rem);

    letter-spacing:-.01em;

    text-transform:uppercase;

    text-shadow:0 4px 24px rgba(0,0,0,.55);

}

.hero-subtitle{

    max-width:650px;

    font-size:1.4rem;

    font-weight:600;

    color:#FFFFFF;

    text-shadow:0 2px 12px rgba(0,0,0,.6);

}

.hero-cta-text{

    max-width:650px;

    font-size:1.05rem;

    font-weight:500;

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

    text-shadow:0 2px 10px rgba(0,0,0,.6);

}


/* ===================================================================
   BUTTONS
=================================================================== */

.hero-buttons{

    display:flex;

    flex-wrap:wrap;

    gap:18px;

    margin-top:12px;

}

.hero-buttons .btn{

    min-width:220px;

    min-height:62px;

}

.hero-buttons .btn-whatsapp{

    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;

    min-width:220px;
    min-height:62px;

    background:#25D366;
    color:#FFF;

    border:none;

    transition:.3s ease;
}

.hero-buttons .btn-whatsapp:hover{

    background:#1EBE5D;

    transform:translateY(-2px);

    box-shadow:0 10px 25px rgba(37,211,102,.35);

}

.hero-buttons .btn-whatsapp i{

    font-size:1.35rem;

}

.hero-buttons .btn-outline{

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

    border:2px solid rgba(255,255,255,.22);

    color:#FFFFFF;

}

.hero-buttons .btn-outline:hover{

    border-color:#FFFFFF;

    background:#FFFFFF;

    color:var(--color-dark);

}

.hero-phone{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:32px;

    margin-top:20px;

    flex-wrap:wrap;

}

.hero-phone a{

    display:flex;

    align-items:center;

    gap:8px;

    color:#FFFFFF;

    text-decoration:none;

    font-size:1.05rem;

    font-weight:600;

    transition:.3s ease;

}

.hero-phone a:hover{

    color:var(--color-primary);

}

.hero-phone i{

    color:var(--color-primary);

    font-size:1rem;

}


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

.hero-badge{

    animation:fadeUp .6s ease .2s both;

}

.hero h1{

    animation:fadeUp .7s ease .35s both;

}

.hero p{

    animation:fadeUp .7s ease .5s both;

}

.hero-buttons{

    animation:fadeUp .7s ease .8s both;

}


/* ===================================================================
   KEYFRAMES
=================================================================== */

@keyframes scrollMouse{

    0%{

        opacity:0;

        transform:
            translate(-50%,0);

    }

    40%{

        opacity:1;

    }

    100%{

        opacity:0;

        transform:
            translate(-50%,18px);

    }

}

/* ===================================================================
   18. QUEM SOMOS
=================================================================== */

.about-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:80px;
    align-items:center;
}

.about-image{
    position:relative;
}

.about-image img{
    width:100%;
    border-radius:28px;
    box-shadow:var(--shadow-lg);
}

.about-content p{
    margin-bottom:24px;
}

.about-list{
    display:grid;
    gap:18px;
    margin:36px 0;
}

.about-list li{
    display:flex;
    align-items:flex-start;
    gap:16px;
}

.about-list li::before{
    content:"✓";
    width:28px;
    height:28px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:#FFF4ED;
    color:var(--color-primary);
    flex-shrink:0;
}

/* ===================================================================
   19. SERVIÇOS
=================================================================== */

.services{
    background:var(--color-gray-50);
}

.services-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
}

.service-card{
    background:#FFF;
    border-radius:24px;
    padding:36px;
    border:1px solid var(--color-gray-200);
    transition:var(--transition);
    box-shadow:var(--shadow-sm);
}

.service-card:hover{
    transform:translateY(-8px);
    box-shadow:var(--shadow-lg);
}

.service-icon{
    width:68px;
    height:68px;
    border-radius:18px;
    background:#FFF4ED;
    display:grid;
    place-items:center;
    margin-bottom:24px;
}

.service-card h3{
    margin-bottom:16px;
}

.service-card p{
    margin-bottom:20px;
}

/* ===================================================================
   22. PAGAMENTOS
=================================================================== */

.payments{
    background:var(--color-gray-50);
}

.payments-grid{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:22px;
}

.payment-card{
    background:#FFF;
    border-radius:20px;
    padding:28px;
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:130px;
    border:1px solid var(--color-gray-200);
    transition:var(--transition);
}

.payment-card:hover{
    transform:translateY(-6px);
    box-shadow:var(--shadow-md);
}

/* ===================================================================
   23. DEPOIMENTOS
=================================================================== */

.testimonials-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:28px;
}

.testimonial-card{
    position:relative;

    padding:32px;

    border-radius:24px;
    background:#fff;

    border:1px solid var(--color-gray-200);
    box-shadow:var(--shadow-sm);
}

.testimonial-card p{
    margin:16px 0 0;
    line-height:1.7;
}

.testimonial-stars{
    color:#F59E0B;
    margin-bottom:20px;
}
.testimonial-author{
    display:flex;
    align-items:center;
    gap:16px;
    padding-top:18px;

    border-top:1px solid var(--color-gray-200);
}

.testimonial-author img{
    width:54px;
    height:54px;

    border-radius:50%;
    object-fit:cover;

    flex-shrink:0;

    border:3px solid #fff;

    box-shadow:var(--shadow-sm);
}

.testimonial-author strong{
    display:block;
    color:var(--color-dark);
    font-size:1rem;
}

.testimonial-author span{
    display:block;
    color:var(--color-gray-500);
    font-size:.9rem;
}

/* ===================================================================
   24. FAQ
=================================================================== */

.faq{
    background:var(--color-gray-50);
}

.faq-item{
    background:#FFF;
    border-radius:20px;
    margin-bottom:20px;
    border:1px solid var(--color-gray-200);
    overflow:hidden;
}

/* ===================================================================
   25. CTA FINAL
=================================================================== */

.cta-final{
    background:var(--color-primary);
    color:#FFF;
}

.cta-card{
    max-width:900px;
    margin:auto;
    text-align:center;
}

.cta-final h2,
.cta-final p{
    color:#FFF;
}

.cta-actions{
    display:flex;
    justify-content:center;
    gap:20px;
    margin-top:40px;
}

.cta-phone{
    margin-top:30px;
}

.cta-phone strong{
    color:#FFF;
    font-size:2rem;
}

/* ===================================================================
   26. FOOTER
=================================================================== */

.footer{
    background:#111827;
    color:#CBD5E1;
    padding:90px 0 40px;
}

.footer-grid{
    display:grid;
    grid-template-columns:2fr 1fr 1fr 1fr;
    gap:50px;
}

.footer-logo{
    width:180px;
    margin-bottom:24px;
}

.footer h3{
    color:#FFF;
    margin-bottom:22px;
}

.footer ul{
    display:grid;
    gap:14px;
}

.footer a{
    transition:var(--transition);
}

.footer a:hover{
    color:var(--color-primary);
}

.footer-bottom{
    margin-top:70px;
    padding-top:30px;
    border-top:1px solid rgba(255,255,255,.08);
    text-align:center;
}


/* -----------------------------
   Animação suave em todos
   os elementos interativos
------------------------------*/

a,
button,
.btn,
.service-card,
.payment-card,
.testimonial-card,
.faq-item{

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        background .35s ease,
        border-color .35s ease,
        color .35s ease,
        opacity .35s ease;

}


/* -----------------------------
   Hover elegante
------------------------------*/

.service-card:hover,
.payment-card:hover,
.testimonial-card:hover{

    transform:
        translateY(-10px);

}


/* ===================================================================
   28. IMAGENS
=================================================================== */

img{

    transition:
        transform .6s ease,
        filter .6s ease;

}

.about-image-media{

    overflow:hidden;

    border-radius:28px;

    height:340px;

    max-height:340px;

    background:var(--color-gray-100);

}

.about-image-media img{

    width:100%;

    height:100%;

    max-height:340px;

    object-fit:cover;

}


/* ===================================================================
   29. BOTÕES
=================================================================== */

.btn{

    position:relative;

    overflow:hidden;

}

.btn::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        linear-gradient(

            120deg,

            transparent,

            rgba(255,255,255,.22),

            transparent

        );

    transform:

        translateX(-130%);

    transition:.8s;

}

.btn:hover::before{

    transform:

        translateX(130%);

}

.btn:active{

    transform:scale(.98);

}


/* ===================================================================
   30. SECTION TITLE
=================================================================== */

.section-header{

    position:relative;

}

.section-header::after{

    content:"";

    width:70px;

    height:4px;

    border-radius:999px;

    margin:24px auto 0;

    display:block;

    background:var(--color-primary);

}

@keyframes floating{

    0%{

        transform:

            translateY(0);

    }

    50%{

        transform:

            translateY(-8px);

    }

    100%{

        transform:

            translateY(0);

    }

}

/* ===================================================================
   36. WHATSAPP FLOAT
=================================================================== */

.whatsapp-float{

    position:fixed;

    right:30px;

    bottom:30px;

    width:70px;

    height:70px;

    border-radius:50%;

    background:#22C55E;

    display:grid;

    place-items:center;

    box-shadow:

        0 15px 40px rgba(34,197,94,.35);

    z-index:var(--z-whatsapp);

    transition:.35s;
}

.whatsapp-float img {
    width: 50px;
    height: 50px;
}


.whatsapp-float:hover{

    transform:

        scale(1.08);

}


/* ===================================================================
   37. BACK TO TOP
=================================================================== */

.back-to-top{

    position:fixed;

    right:34px;

    bottom:120px;

    width:56px;

    height:56px;

    border-radius: 90px;

    box-shadow:var(--shadow-md);

    display:grid;

    place-items:center;

    opacity:0;

    visibility:hidden;

    transition:.35s;

    z-index:var(--z-backtotop);

}

.back-to-top.show{

    opacity:1;

    visibility:visible;

}

.back-to-top:hover{

    transform: translateY(-6px);

    cursor: pointer;

}


/* ===================================================================
   38. LOADING
=================================================================== */

.loading{

    cursor:progress;

}

.loading *{

    pointer-events:none;

}

/* ===================================================================
   30. MELHORIAS DE DESIGN — HERO (imagem + badge flutuante)
=================================================================== */

.hero-container{

    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:64px;
    align-items:center;

}


/* ===================================================================
   31. MELHORIAS DE DESIGN — INDICADORES (barra flutuante)
=================================================================== */

.highlights{

    position:relative;
    margin-top:-64px;
    z-index:30;
    padding-bottom:0;

}

.highlights-grid{

    background:#FFFFFF;
    border-radius:28px;
    box-shadow:var(--shadow-xl);
    display:grid;
    grid-template-columns:repeat(4,1fr);

}

.highlight-card{

    display:flex;
    align-items:center;
    gap:16px;
    padding:32px 26px;
    border-radius:24px;
    transition:var(--transition);

}

.highlight-card:hover{

    background:var(--color-gray-50);

}

.highlight-card:not(:last-child){

    border-right:1px solid var(--color-gray-200);

}

.highlight-icon{

    width:52px;
    height:52px;
    flex-shrink:0;
    border-radius:14px;
    background:#FFF4ED;
    color:var(--color-primary);
    display:grid;
    place-items:center;

}

.highlight-icon .icon{

    width:24px;
    height:24px;

}

.highlight-card h3{

    font-size:1rem;
    margin-bottom:4px;

}

.highlight-card p{

    font-size:.85rem;
    color:var(--color-gray-500);
    line-height:1.5;

}


/* ===================================================================
   32. MELHORIAS DE DESIGN — COMO FUNCIONA (linha do tempo)
=================================================================== */

.process-timeline{

    position:relative;
    max-width:880px;
    margin:auto;

}

.process-timeline::before{

    content:"";
    position:absolute;
    left:35px;
    top:6px;
    bottom:6px;
    width:3px;
    background:var(--color-gray-200);

}

.process-step{

    position:relative;
    padding-left:100px;
    margin-bottom:48px;

}

.process-step:last-child{

    margin-bottom:0;

}

.step-number{

    position:absolute;
    left:0;
    top:0;
    width:70px;
    height:70px;
    border-radius:50%;
    background:var(--color-primary);
    color:#FFFFFF;
    display:grid;
    place-items:center;
    font-size:1.15rem;
    font-weight:800;
    box-shadow:var(--shadow-md);
    border:5px solid #FFFFFF;

}

.process-step h3{

    margin-bottom:8px;
    font-size:1.15rem;

}

.process-step p{

    color:var(--color-gray-500);

}

/* ===================================================================
   33. MELHORIAS DE DESIGN — ÁREA DE ATENDIMENTO
=================================================================== */

.coverage-grid{

    display:grid;
    grid-template-columns:1fr 1fr;
    gap:70px;
    align-items:center;

}

.coverage-list{

    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:16px;
    margin:32px 0;

}

.coverage-list li{

    display:flex;
    align-items:center;
    gap:12px;
    padding:16px 18px;
    background:#FFFFFF;
    border:1px solid var(--color-gray-200);
    border-radius:16px;
    font-weight:600;
    transition:var(--transition);

}

.coverage-list li:hover{

    border-color:var(--color-primary);
    box-shadow:var(--shadow-sm);
    transform:translateY(-2px);

}

.coverage-list li::before{

    content:"📍";

}


/* ===================================================================
   34. MELHORIAS DE DESIGN — PAGAMENTOS (badges sem dependência de imagem)
=================================================================== */

.payment-card{

    flex-direction:column;
    gap:14px;
    text-align:center;

}

.payment-card h3{

    font-size:.95rem;
    color:var(--color-gray-600);
    font-weight:600;

}

.payment-badge{

    font-weight:800;
    font-size:1.05rem;
    letter-spacing:.02em;
    padding:16px 20px;
    border-radius:14px;
    color:#FFFFFF;
    display:flex;
    align-items:center;
    justify-content:center;
    min-width:96px;
    min-height:52px;

}

.payment-pix{

    background:#32BCAD;

}

.payment-visa{

    background:#1A1F71;
    font-style:italic;

}

.payment-elo{

    background:#111827;
    color:#FFCB05;

}

.payment-amex{

    background:#2E77BC;

}

.payment-mastercard{

    background:transparent;
    position:relative;
    width:70px;
    height:44px;
    padding:0;
    min-height:44px;

}

.mc-circle{

    position:absolute;
    top:2px;
    width:40px;
    height:40px;
    border-radius:50%;

}

.mc-circle-1{

    left:6px;
    background:#EB001B;

}

.mc-circle-2{

    right:6px;
    background:#F79E1B;
    mix-blend-mode:multiply;

}


/* ===================================================================
   35. MELHORIAS DE DESIGN — DEPOIMENTOS (aspas decorativas)
=================================================================== */

.testimonial-card{

    position:relative;

}

.testimonial-card::before{

    content:"\201C";
    position:absolute;
    top:14px;
    right:28px;
    font-size:4rem;
    font-family:Georgia,serif;
    color:var(--color-gray-200);
    line-height:1;
    z-index:0;

}

.testimonial-card p{

    position:relative;
    z-index:1;

}


/* ===================================================================
   36. MELHORIAS DE DESIGN — FAQ (details/summary nativos)
=================================================================== */

.faq-item summary{

    list-style:none;
    cursor:pointer;
    padding:26px 28px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    font-weight:700;
    color:var(--color-dark);

}

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

    display:none;

}

.faq-item summary::after{

    content:"+";
    flex-shrink:0;
    width:32px;
    height:32px;
    border-radius:50%;
    background:#FFF4ED;
    color:var(--color-primary);
    display:grid;
    place-items:center;
    font-size:1.3rem;
    font-weight:700;
    transition:var(--transition);

}

.faq-item[open] summary::after{

    content:"–";

}

.faq-item p{

    padding:0 28px 26px;
    color:var(--color-gray-500);

}

.faq-list{

    display:flex;
    flex-direction:column;
    gap:16px;

}

.faq-item{

    background:#FFFFFF;
    border:1px solid var(--color-gray-200);
    border-radius:18px;
    overflow:hidden;

    transition:
        box-shadow var(--transition),
        border-color var(--transition);

}

.faq-item[open]{

    box-shadow:var(--shadow-md);
    border-color:transparent;

}


/* ===================================================================
   37. TIPOGRAFIA GLOBAL (usando os tokens --fs-*)
=================================================================== */

h1,h2,h3,h4,h5,h6{

    font-family:var(--font-family);
    color:var(--color-dark);
    font-weight:var(--fw-800);
    line-height:1.2;
    letter-spacing:-.02em;

}

h1{

    font-size:clamp(2.1rem,1.3rem + 3.2vw,var(--fs-5xl));

}

h2{

    font-size:clamp(1.7rem,1.3rem + 1.8vw,var(--fs-4xl));

}

h3{

    font-size:var(--fs-2xl);
    letter-spacing:-.01em;

}

h4{

    font-size:var(--fs-xl);

}

p{

    color:var(--color-gray-600);

}

strong{

    color:var(--color-dark);

}


/* ===================================================================
   38. REFINAMENTOS PROFISSIONAIS DIVERSOS
=================================================================== */

/* Botão primário com leve profundidade em gradiente */

.btn-primary{

    background:
        linear-gradient(180deg,var(--color-primary) 0%,var(--color-primary-dark) 100%);

    position:relative;

}

.btn-primary:hover{

    background:
        linear-gradient(180deg,var(--color-primary-dark) 0%,#C2410C 100%);

    box-shadow:0 16px 32px -8px rgba(234,88,12,.45);

}

.btn:active{

    transform:translateY(0) scale(.98);

}

.btn-outline:hover{

    box-shadow:0 12px 28px -10px rgba(249,115,22,.4);

}

/* Cards: transição de borda mais suave no hover */

.service-card,
.testimonial-card,
.payment-card{

    border-color:var(--color-gray-200);

}

.service-card:hover,
.testimonial-card:hover{

    border-color:transparent;

}

/* Ícones de serviço ganham leve escala e cor no hover do card */

.service-card:hover .service-icon{

    background:var(--color-primary);
    color:#FFFFFF;
    transform:scale(1.06);

}

.service-icon{

    transition:var(--transition);
    color:var(--color-primary);

}

/* Estrelas dos depoimentos com espaçamento mais limpo */

.testimonial-stars{

    letter-spacing:2px;
    font-size:.95rem;

}

/* CTA final com profundidade extra */

.cta-final{

    position:relative;
    overflow:hidden;
    background:
        linear-gradient(135deg,var(--color-primary) 0%,var(--color-primary-dark) 100%);

}

.cta-final::before{

    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at 15% 20%,rgba(255,255,255,.16),transparent 40%),
        radial-gradient(circle at 85% 85%,rgba(17,24,39,.18),transparent 45%);
    pointer-events:none;

}

.cta-final .container{

    position:relative;
    z-index:1;

}

.cta-final .btn-outline{

    border-color:#FFFFFF;
    color:#FFFFFF;
    background:transparent;

}

.cta-final .btn-outline:hover{

    background:#FFFFFF;
    color:var(--color-primary-dark);

}

.cta-final .btn-primary{

    background:#FFFFFF;
    color:var(--color-primary-dark);
    box-shadow:0 20px 40px -12px rgba(17,24,39,.35);

}

.cta-final .btn-primary:hover{

    background:var(--color-gray-100);
    box-shadow:0 24px 48px -12px rgba(17,24,39,.4);

}

.cta-phone small{

    display:block;
    color:rgba(255,255,255,.8);
    font-size:.85rem;
    margin-bottom:4px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.06em;

}

/* Footer: acabamento mais premium */

.footer{

    position:relative;

}

.footer::before{

    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:3px;
    background:
        linear-gradient(90deg,var(--color-primary),var(--color-primary-light));

}

.footer h3{

    color:#FFFFFF;
    font-size:1rem;
    margin-bottom:22px;
    letter-spacing:.02em;

}

.footer-column p{

    color:var(--color-gray-400);
    font-size:.92rem;
    line-height:1.7;
    margin-top:18px;
}

.footer ul{

    display:flex;
    flex-direction:column;
    gap:14px;

}

.footer a{

    transition:var(--transition-fast);

}

.footer a:hover{

    color:var(--color-primary-light);
    padding-left:4px;

}

.footer-bottom{

    margin-top:60px;
    padding-top:28px;
    border-top:1px solid rgba(255,255,255,.08);

}

.footer-bottom p{

    color:var(--color-gray-500);
    font-size:.85rem;

}

/* Seção "Quem Somos": lista com ícone circular mais elegante */

.about-list li{

    display:flex;
    align-items:center;
    gap:12px;

}

/* Ajuste fino: seção CTA garante contraste de texto do cta-phone */

.cta-phone strong{

    display:block;

}

.coverage-map{

    width:100%;

    height:500px;

    border-radius:24px;

    overflow:hidden;

    box-shadow:var(--shadow-lg);

}

#map{

    width:100%;

    height:100%;

}

.about-slider{
    position:relative;
    height:340px;
    max-height:340px;
}

.about-slider-track{
    display:flex;
    width:100%;
    height:100%;
    max-height:340px;
    transition:transform .6s cubic-bezier(.65,0,.35,1);
}

.about-slide{
    flex:0 0 100%;
    height:100%;
    max-height:340px;
    position:relative;
}

.about-slide img{
    width:100%;
    height:100%;
    max-height:340px;
    display:block;
    object-fit:cover;
}

.about-slider-arrow{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:42px;
    height:42px;
    border-radius:50%;
    border:none;
    background:rgba(255,255,255,.85);
    color:#1a1a1a;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    z-index:3;
    box-shadow:0 4px 14px rgba(0,0,0,.18);
    transition:background .25s ease, transform .25s ease;
}

.about-slider-arrow svg{
    width:20px;
    height:20px;
}

.about-slider-arrow:hover{
    background:#fff;
    transform:translateY(-50%) scale(1.06);
}

.about-slider-arrow.prev{ left:16px; }
.about-slider-arrow.next{ right:16px; }

.about-slider-dots{
    position:absolute;
    left:0;
    right:0;
    bottom:16px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    z-index:3;
}

.about-slider-dots button{
    width:9px;
    height:9px;
    border-radius:50%;
    border:none;
    padding:0;
    background:rgba(255,255,255,.55);
    cursor:pointer;
    transition:background .25s ease, transform .25s ease;
}

.about-slider-dots button.active{
    background:#fff;
    transform:scale(1.25);
}


/* ===================================================================
   RESPONSIVIDADE
   Reescrito para funcionar corretamente em qualquer tela mobile,
   do tablet (1250px) até celulares pequenos (320px).
   Breakpoints: 1250 / 1100 / 992 / 860 / 700 / 560 / 420 / 360
=================================================================== */

/* ===========================
   1250px — header vira hambúrguer
=========================== */

@media (max-width:1250px){

    .header .container{
        gap:20px;
    }

    .navbar{
        display:none;
    }

    .menu-toggle{
        display:flex;
    }

    .header-actions .btn{
        padding-inline:22px;
        min-height:48px;
        font-size:.9rem;
    }

    .logo img{
        height:48px;
    }

}

/* ===========================
   1100px — grades de cards em 2 colunas
=========================== */

@media (max-width:1100px){

    .services-grid,
    .testimonials-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .payments-grid{
        grid-template-columns:repeat(3,1fr);
    }

    .footer-grid{
        grid-template-columns:repeat(2,1fr);
        gap:40px 32px;
    }

}

/* ===========================
   992px — tablets: empilha as seções em coluna única
=========================== */

@media (max-width:992px){

    .section{
        padding:80px 0;
    }

    .section-header{
        margin-bottom:48px;
    }

    /* Hero */
    .hero{
        padding-top:calc(var(--header-height) + 24px);
    }

    /* Indicadores */
    .highlights{
        margin-top:-40px;
    }

    .highlights-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .highlight-card{
        border-right:none!important;
        padding:26px 20px;
    }

    .highlight-card:nth-child(1),
    .highlight-card:nth-child(2){
        border-bottom:1px solid var(--color-gray-200);
    }

    /* Quem Somos */
    .about-grid{
        grid-template-columns:1fr;
        gap:36px;
    }

    .about-image{
        order:1;
        width:100%;
    }

    .about-content{
        order:2;
        text-align:center;
    }

    .about-content h2,
    .about-content p{
        max-width:640px;
        margin-inline:auto;
    }

    .about-list{
        max-width:520px;
        margin:28px auto;
        text-align:left;
    }

    .about-content .btn{
        margin-inline:auto;
    }

    .about-image-media,
    .about-image-media img,
    .about-slider,
    .about-slider-track,
    .about-slide,
    .about-slide img{
        height:360px;
        max-height:360px;
    }

    .about-slider-arrow{
        width:44px;
        height:44px;
    }

    .about-slider-arrow.prev{
        left:20px;
    }

    .about-slider-arrow.next{
        right:20px;
    }

    /* Área de atendimento */
    .coverage-grid{
        grid-template-columns:1fr;
        gap:36px;
    }

    .coverage-content{
        order:1;
        text-align:center;
    }

    .coverage-content .section-header,
    .coverage-content > p{
        margin-inline:auto;
    }

    .coverage-list{
        margin-inline:auto;
    }

    .coverage-content #btnGuincho{
        margin-inline:auto;
    }

    .coverage-map{
        order:2;
        height:380px;
    }

}

/* ===========================
   860px — cards de serviço/depoimento
   passam para 1 coluna (2 colunas fica
   apertado antes disso em telas de celular)
=========================== */

@media (max-width:860px){

    .services-grid,
    .testimonials-grid{
        grid-template-columns:1fr;
    }

    .payments-grid{
        grid-template-columns:repeat(2,1fr);
    }

}

/* ===========================
   700px — ajustes gerais de celular
=========================== */

@media (max-width:700px){

    .container{
        width:min(100% - 32px,var(--container));
    }

    /* Header */
    .header{
        height:76px;
    }

    .header.scrolled{
        height:66px;
    }

    html{
        scroll-padding-top:76px;
    }

    .logo img{
        height:42px;
    }

    .header.scrolled .logo img{
        height:38px;
    }

    .header-actions .btn{
        display:none;
    }

    .menu-toggle{
        width:46px;
        height:46px;
        border-radius:12px;
    }

    .menu-toggle span:nth-child(1){
    top:14px;
    }

    .menu-toggle span:nth-child(2){
        top:22px;
    }

    .menu-toggle span:nth-child(3){
        top:30px;
    }
    .menu-toggle.active span:nth-child(1){
    top:22px;
    }

    .menu-toggle.active span:nth-child(3){
        top:22px;
    }

    /* Tipografia */
    h1{
        font-size:clamp(1.9rem,1.3rem + 4vw,2.6rem);
    }

    h2{
        font-size:clamp(1.6rem,1.2rem + 2.6vw,2rem);
    }

    .section-header p,
    .hero p{
        font-size:1rem;
    }

    /* Botões: largura total, empilhados, dedo maior */
    .btn{
        width:100%;
        min-height:54px;
        padding-inline:24px;
    }

    .hero-buttons{
        flex-direction:column;
        width:100%;
    }

    .hero-buttons .btn{
        min-width:100%;
    }

    /* Hero */
    .hero{
        min-height:auto;
        padding-top:calc(var(--header-height) + 16px);
        padding-bottom:56px;
    }

    .hero-content{
        gap:22px;
    }

    .hero-badge{
        font-size:.8rem;
        padding:10px 18px;
        text-align:center;
    }

    /* Indicadores */
    .highlights{
        margin-top:24px;
        padding-top:0;
    }

    .highlights-grid{
        grid-template-columns:1fr;
        border-radius:22px;
    }

    .highlight-card:nth-child(1),
    .highlight-card:nth-child(2){
        border-bottom:1px solid var(--color-gray-200);
    }

    .highlight-card:not(:last-child){
        border-bottom:1px solid var(--color-gray-200);
    }

 .about-image-media{
        border-radius:22px;
        overflow:hidden;
    }

    .about-slider,
    .about-slider-track,
    .about-slide,
    .about-slide img{
        height:240px;
        max-height:240px;
    }

    .about-slider-arrow{
        width:40px;
        height:40px;
    }

    .about-slider-arrow.prev{
        left:18px;
    }

    .about-slider-arrow.next{
        right:18px;
    }

    .about-slider-dots{
        bottom:12px;
    }

    /* Serviços */
    .service-card{
        padding:26px 22px;
    }

    .service-icon{
        width:56px;
        height:56px;
        margin-bottom:18px;
    }

    /* Como Funciona */
    .process-timeline::before{
        left:24px;
    }

    .process-step{
        padding-left:70px;
        margin-bottom:32px;
    }

    .step-number{
        width:48px;
        height:48px;
        font-size:.95rem;
        border-width:4px;
    }

    .process-step h3{
        font-size:1.05rem;
    }

    /* Área de atendimento */
    .coverage-list{
        grid-template-columns:repeat(2,1fr);
        gap:12px;
    }

    .coverage-map{
        height:300px;
        border-radius:18px;
    }

    /* Pagamentos */
    .payment-card{
        padding:20px;
        min-height:104px;
    }

    /* Depoimentos */
    .testimonial-card{
        padding:26px 22px;
    }

    /* FAQ */
    .faq-item summary{
        padding:20px 20px;
        font-size:.98rem;
        gap:12px;
    }

    .faq-item summary::after{
        width:28px;
        height:28px;
        font-size:1.1rem;
    }

    .faq-item p{
        padding:0 20px 20px;
    }

    /* CTA final */
    .cta-actions{
        flex-direction:column;
        gap:14px;
        margin-top:32px;
    }

    .cta-actions .btn{
        width:100%;
    }

    .cta-phone strong{
        font-size:1.6rem;
    }

    /* Footer */
    .footer{
        padding:64px 0 32px;
    }

    .footer-grid{
        grid-template-columns:1fr;
        gap:36px;
        text-align:left;
    }

    .footer-bottom{
        margin-top:44px;
    }

    /* Botões flutuantes */
    .whatsapp-float{
        width:58px;
        height:58px;
        right:16px;
        bottom:16px;
    }

    .back-to-top{
        right:16px;
        bottom:84px;
        width:54px;
        height:54px;
    }

}

/* ===========================
   560px — celulares médios
=========================== */

@media (max-width:560px){

    .section{
        padding:64px 0;
    }

    .hero-badge{
        font-size:.75rem;
        padding:9px 16px;
    }

    .about-image-media,
    .about-image-media img,
    .about-slider,
    .about-slider-track,
    .about-slide,
    .about-slide img{
        height:230px;
        max-height:230px;
    }

    .about-list li{
        align-items:flex-start;
        text-align:left;
    }

    .payments-grid{
        grid-template-columns:repeat(2,1fr);
        gap:14px;
    }

    .payment-card h3{
        font-size:.95rem;
    }

    .coverage-list{
        grid-template-columns:1fr;
    }

    .testimonial-card p{
        font-size:.95rem;
    }

}

/* ===========================
   420px — celulares pequenos
=========================== */

@media (max-width:420px){

    .header .container{
        gap:14px;
    }

    .logo img{
        height:38px;
    }

    .section-header{
        margin-bottom:38px;
    }

    .section-tag{
        font-size:.75rem;
        padding:8px 16px;
    }

    h1{
        font-size:clamp(1.65rem,1.1rem + 5vw,2.1rem);
    }

    h2{
        font-size:clamp(1.4rem,1.1rem + 3vw,1.7rem);
    }

    .payments-grid{
        grid-template-columns:1fr;
        gap:12px;
    }

    .payment-card{
        min-height:auto;
        padding:20px;
        flex-direction:row;
        justify-content:flex-start;
        align-items:center;
        gap:16px;
        text-align:left;
    }

    .payment-card h3{
        font-size:1rem;
        flex:1;
        min-width:0;
    }

    .highlight-card{
        padding:20px 16px;
        gap:12px;
    }

    .highlight-icon{
        width:44px;
        height:44px;
    }

    .about-image-media,
    .about-image-media img,
    .about-slider,
    .about-slider-track,
    .about-slide,
    .about-slide img{
        height:200px;
        max-height:200px;
    }

     .about-slider-arrow{
        width:36px;
        height:36px;

        background:rgba(255,255,255,.92);
    }

    .about-slider-arrow svg{
        width:16px;
        height:16px;
    }

    .about-slider-arrow.prev{
        left:14px;
    }

    .about-slider-arrow.next{
        right:14px;
    }

    .about-slider-dots{
        bottom:10px;
        gap:6px;
    }

    .service-card,
    .testimonial-card{
        padding:22px 18px;
    }

    .process-step{
        padding-left:60px;
    }

    .step-number{
        width:42px;
        height:42px;
        font-size:.85rem;
        border-width:3px;
    }

    .coverage-map{
        height:260px;
    }

    .cta-phone strong{
        font-size:1.4rem;
    }

    .whatsapp-float{
        width:52px;
        height:52px;
    }

    .back-to-top{
        width:48px;
        height:48px;
        bottom:76px;
    }

}

/* ===========================
   360px — telas mínimas (iPhone SE e similares)
=========================== */

@media (max-width:360px){

    .container{
        width:min(100% - 24px,var(--container));
    }

    .btn{
        padding-inline:18px;
        font-size:.92rem;
    }

    .hero-buttons{
        gap:12px;
    }

    .highlights-grid{
        border-radius:18px;
    }

    .faq-item summary{
        font-size:.9rem;
    }

       .about-slider-arrow{
        width:34px;
        height:34px;
    }

    .about-slider-arrow.prev{
        left:12px;
    }

    .about-slider-arrow.next{
        right:12px;
    }

}

/* ===========================
   Telas muito baixas em paisagem
   (celular deitado)
=========================== */

@media (max-height:480px) and (orientation:landscape){

    .hero{
        min-height:auto;
        padding-top:calc(var(--header-height) + 20px);
        padding-bottom:40px;
    }

    .mobile-menu{
        justify-content:center;
        padding-top:100px;
        overflow-y:auto;
        gap:20px;
    }

}

/* ===================================================================
   39. LINK ATIVO DO MENU (usado pelo scroll-spy e pela página atual)
=================================================================== */

.navbar a.active,
.mobile-menu a.active{

    color:var(--color-primary);

}

.navbar a.active::after{

    width:100%;

}

/* ===================================================================
   40. BANNER DE PÁGINA INTERNA (ex.: Contato)
=================================================================== */

.page-banner{

    position:relative;
    display:flex;
    align-items:flex-end;
    min-height:clamp(440px,64vh,680px);
    padding-top:calc(var(--header-height) + 40px);
    padding-bottom:64px;
    overflow:hidden;
    isolation:isolate;
    background:var(--color-dark);

}

.page-banner-media{

    position:absolute;
    inset:0;
    z-index:var(--z-background);

}

.page-banner-media img{

    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center 70%;

}

.page-banner-overlay{

    position:absolute;
    inset:0;
    z-index:0;
    background:
        linear-gradient(
            180deg,
            rgba(17,24,39,.35) 0%,
            rgba(17,24,39,.55) 55%,
            rgba(17,24,39,.92) 100%
        );

}

.page-banner-content{

    position:relative;
    z-index:2;
    color:#FFFFFF;
    display:flex;
    flex-direction:column;
    gap:16px;

}

.page-banner-content h1{

    color:#FFFFFF;

}

.page-banner-content p{

    max-width:560px;
    color:rgba(255,255,255,.85);

}

/* ===================================================================
   40b. BREADCRUMB (navegação estrutural - SEO + orientação do usuário)
=================================================================== */

.breadcrumb{

    position:relative;
    z-index:2;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px;
    margin:0 0 12px;
    padding:0;
    list-style:none;
    font-size:13px;
    font-weight:500;

}

.breadcrumb li{

    display:flex;
    align-items:center;
    gap:8px;

}

.breadcrumb li:not(:last-child)::after{

    content:"/";
    color:rgba(255,255,255,.45);

}

.breadcrumb a{

    color:rgba(255,255,255,.75);
    text-decoration:none;
    transition:color .2s ease;

}

.breadcrumb a:hover,
.breadcrumb a:focus-visible{

    color:var(--color-primary-light);
    text-decoration:underline;

}

.breadcrumb li[aria-current="page"]{

    color:#FFFFFF;

}

/* ===================================================================
   41. SEÇÃO DE CONTATO
=================================================================== */

.contact-grid{

    display:grid;
    grid-template-columns:1fr 1fr;
    gap:64px;
    align-items:start;

}

.contact-info p{

    margin:20px 0 32px;

}

.contact-details{

    display:grid;
    gap:22px;

}

.contact-details li{

    display:flex;
    align-items:flex-start;
    gap:16px;

}

.contact-detail-icon{

    display:grid;
    place-items:center;
    flex-shrink:0;
    width:48px;
    height:48px;
    border-radius:14px;
    background:#FFF4ED;
    color:var(--color-primary);

}

.contact-details strong{

    display:block;
    margin-bottom:4px;
    color:var(--color-dark);

}

.contact-details a,
.contact-details span{

    color:var(--color-gray-600);

}

.contact-details a:hover{

    color:var(--color-primary);

}

/* ===================================================================
   42. FORMULÁRIO DE CONTATO
=================================================================== */

.contact-form-card{

    background:#FFFFFF;
    border:1px solid var(--color-gray-200);
    border-radius:24px;
    padding:40px;
    box-shadow:var(--shadow-md);

}

.contact-form-card h3{

    margin-bottom:10px;

}

.contact-form-hint{

    color:var(--color-gray-500);
    font-size:.95rem;
    margin-bottom:28px;

}

.contact-form{

    display:flex;
    flex-direction:column;
    gap:20px;

}

.form-row{

    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;

}

.form-group{

    display:flex;
    flex-direction:column;
    gap:8px;

}

.form-group label{

    font-size:.9rem;
    font-weight:600;
    color:var(--color-dark);

}

.form-group input,
.form-group textarea{

    width:100%;
    padding:14px 16px;
    border:1px solid var(--color-gray-200);
    border-radius:12px;
    background:var(--color-gray-50);
    font-family:var(--font-family);
    font-size:.95rem;
    color:var(--color-dark);
    transition:var(--transition-fast);

}

.form-group textarea{

    resize:vertical;
    min-height:130px;

}

.form-group input:focus,
.form-group textarea:focus{

    outline:none;
    border-color:var(--color-primary);
    background:#FFFFFF;
    box-shadow:0 0 0 4px rgba(249,115,22,.12);

}

.form-group input.invalid,
.form-group textarea.invalid{

    border-color:var(--color-danger);
    background:#FEF2F2;

}

.form-group input.invalid:focus,
.form-group textarea.invalid:focus{

    box-shadow:0 0 0 4px rgba(239,68,68,.14);

}

.field-error{

    min-height:16px;
    font-size:.8rem;
    font-weight:600;
    color:var(--color-danger);

}

.form-submit{

    margin-top:4px;

}

.form-feedback{

    display:none;
    padding:14px 16px;
    border-radius:12px;
    font-size:.9rem;
    font-weight:600;
    text-align:center;

}

.form-feedback:not(:empty){

    display:block;

}

.form-feedback.is-error{

    color:var(--color-danger);
    background:#FEF2F2;
    border:1px solid rgba(239,68,68,.25);

}

.form-feedback.is-success{

    color:#15803D;
    background:#F0FDF4;
    border:1px solid rgba(34,197,94,.3);

}

.form-note{

    font-size:.82rem;
    color:var(--color-gray-500);
    text-align:center;

}

/* ===================================================================
   43. (removido — mapa não é mais exibido na página de contato)
=================================================================== */

/* ===========================
   Responsivo — Página de Contato
=========================== */

@media (max-width:992px){

    .contact-grid{
        grid-template-columns:1fr;
        gap:44px;
    }

    .page-banner{
        min-height:clamp(360px,50vh,520px);
    }

}

@media (max-width:700px){

    .page-banner{
        padding-top:calc(var(--header-height) + 24px);
        padding-bottom:44px;
        min-height:clamp(320px,44vh,420px);
    }

    .contact-form-card{
        padding:26px;
    }

    .form-row{
        grid-template-columns:1fr;
        gap:16px;
    }

    .contact-details li{
        gap:12px;
    }

    .contact-detail-icon{
        width:42px;
        height:42px;
    }

}

@media (max-width:420px){

    .contact-form-card{
        padding:20px;
        border-radius:18px;
    }

}

/* ===================================================================
   44. PÁGINA DE GALERIA
=================================================================== */

.gallery-grid{

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;

}

.gallery-item{

    position:relative;
    margin:0;
    border-radius:18px;
    overflow:hidden;
    aspect-ratio:4 / 3;
    box-shadow:var(--shadow-sm);
    isolation:isolate;
    transition:var(--transition);

}

.gallery-item:hover{

    box-shadow:var(--shadow-lg);
    transform:translateY(-4px);

}

.gallery-item img{

    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:transform .5s ease;

}

.gallery-item:hover img{

    transform:scale(1.06);

}

.gallery-item::after{

    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    background:linear-gradient(
        180deg,
        rgba(17,24,39,0) 55%,
        rgba(17,24,39,.82) 100%
    );

}

.gallery-item figcaption{

    position:absolute;
    left:0;
    right:0;
    bottom:0;
    z-index:2;
    padding:18px;
    color:#FFFFFF;
    font-size:.9rem;
    font-weight:600;
    line-height:1.35;

}

.gallery-cta{

    display:flex;
    flex-direction:column;
    align-items:center;
    gap:16px;
    text-align:center;
    margin-top:64px;
    padding-top:48px;
    border-top:1px solid var(--color-gray-200);

}

.gallery-cta p{

    font-size:1.1rem;
    font-weight:700;
    color:var(--color-dark);

}

/* ===========================
   Responsivo — Galeria
=========================== */

@media (max-width:860px){

    .gallery-grid{
        grid-template-columns:repeat(2,1fr);
        gap:18px;
    }

}

@media (max-width:560px){

    .gallery-grid{
        grid-template-columns:1fr;
        gap:16px;
    }

    .gallery-item figcaption{
        font-size:.95rem;
        padding:16px;
    }

    .gallery-cta{
        margin-top:44px;
        padding-top:32px;
    }

}

/* ===================================================================
   45.1 SEÇÃO HISTÓRIA (página quem-somos.html — reaproveita .about-grid)
=================================================================== */

#historia .about-image::before{

    content:"";
    position:absolute;
    top:-22px;
    left:-22px;
    width:100%;
    height:100%;
    border:3px solid var(--color-primary);
    border-radius:28px;
    z-index:-1;

}

@media (max-width:992px){

    #historia .about-image::before{
        display:none;
    }

}

/* ===================================================================
   45. AÇÕES DA ÁREA DE ATENDIMENTO (página atendimento.html)
=================================================================== */

.coverage-actions{

    display:flex;
    flex-wrap:wrap;
    gap:16px;

}

.coverage-actions .btn{

    flex:1 1 220px;

}

.coverage-status{

    min-height:20px;
    margin-top:14px;
    font-size:.88rem;
    font-weight:600;

}

.coverage-status.is-loading{

    color:var(--color-gray-500);

}

.coverage-status.is-success{

    color:#15803D;

}

.coverage-status.is-error{

    color:var(--color-danger);

}

@media (max-width:700px){

    .coverage-actions{
        flex-direction:column;
    }

    .coverage-actions .btn{
        width:100%;
    }

    .btn {
        max-height: 50px;
    }

}

/* ===================================================================
   46. MISSÃO / VISÃO / VALORES (página quem-somos.html)
=================================================================== */

.pillars{

    position:relative;
    background:var(--color-gray-50);
    overflow:hidden;

}

.pillars::before{

    content:"";
    position:absolute;
    top:-120px;
    right:-120px;
    width:340px;
    height:340px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(249,115,22,.08) 0%,rgba(249,115,22,0) 70%);
    pointer-events:none;

}

.pillars .section-header{

    max-width:640px;
    margin-inline:auto;

}

.pillars-grid{

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:28px;
    align-items:stretch;

}

.pillar-card{

    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    background:#FFFFFF;
    border:1px solid var(--color-gray-200);
    border-radius:24px;
    padding:44px 32px 36px;
    text-align:center;
    box-shadow:var(--shadow-sm);
    transition:var(--transition);
    overflow:hidden;

}

.pillar-card::before{

    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:4px;
    background:linear-gradient(90deg,var(--color-primary),var(--color-primary-dark));
    transform:scaleX(0);
    transform-origin:left;
    transition:transform .35s ease;

}

.pillar-card:hover{

    border-color:transparent;
    box-shadow:var(--shadow-lg);
    transform:translateY(-6px);

}

.pillar-card:hover::before{

    transform:scaleX(1);

}

.pillar-index{

    position:absolute;
    top:20px;
    right:24px;
    font-size:.78rem;
    font-weight:800;
    letter-spacing:.04em;
    color:var(--color-gray-200);

}

.pillar-icon{

    display:grid;
    place-items:center;
    width:68px;
    height:68px;
    margin-bottom:22px;
    border-radius:20px;
    background:linear-gradient(135deg,#FFF4ED,#FFE4D2);
    color:var(--color-primary);
    box-shadow:inset 0 0 0 1px rgba(249,115,22,.15);

}

.pillar-icon .icon{

    width:28px;
    height:28px;

}

.pillar-card h3{

    margin-bottom:12px;

}

.pillar-card p{

    color:var(--color-gray-600);
    font-size:.95rem;
    line-height:1.65;

}

/* ===================================================================
   47. MARCA CENTRALIZADA (página quem-somos.html)
=================================================================== */

.brand-mark{

    position:relative;
    padding:88px 0;
    text-align:center;
    isolation:isolate;

}

.brand-mark::before{

    content:"";
    position:absolute;
    top:50%;
    left:50%;
    width:260px;
    height:260px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(249,115,22,.10) 0%,rgba(249,115,22,0) 72%);
    transform:translate(-50%,-50%);
    z-index:-1;

}

.brand-mark img{

    width:100%;
    max-width:200px;
    margin-inline:auto;
    filter:drop-shadow(0 12px 24px rgba(17,24,39,.10));

}

.brand-mark p{

    margin-top:20px;
    font-weight:700;
    font-size:.95rem;
    letter-spacing:.04em;
    text-transform:uppercase;
    color:var(--color-gray-500);

}

/* ===========================
   Responsivo — Quem Somos
=========================== */

@media (max-width:1100px){

    .pillars-grid{
        gap:22px;
    }

    .pillar-card{
        padding:38px 26px 30px;
    }

}

@media (max-width:992px){

    .pillars{
        padding:80px 0;
    }

    .pillars::before{
        width:240px;
        height:240px;
        top:-80px;
        right:-80px;
    }

    .brand-mark{
        padding:64px 0;
    }

}

@media (max-width:860px){

    .pillars-grid{
        grid-template-columns:1fr;
        gap:20px;
        max-width:460px;
        margin-inline:auto;
    }

    .pillar-card{
        padding:36px 28px;
    }

}

@media (max-width:700px){

    .pillars{
        padding:64px 0;
    }

    .pillar-card{
        padding:30px 24px;
        border-radius:20px;
    }

    .pillar-icon{
        width:60px;
        height:60px;
        border-radius:16px;
    }

    .pillar-index{
        top:16px;
        right:18px;
    }

    .brand-mark{
        padding:44px 0;
    }

    .brand-mark::before{
        width:190px;
        height:190px;
    }

    .brand-mark img{
        max-width:150px;
    }

}

@media (max-width:420px){

    .pillars{
        padding:52px 0;
    }

    .pillar-card{
        padding:26px 20px;
    }

    .pillar-card p{
        font-size:.9rem;
    }

    .brand-mark{
        padding:36px 0;
    }

    .brand-mark img{
        max-width:130px;
    }

    .brand-mark p{
        font-size:.82rem;
    }

}


/* ===================================================================
   48. PÁGINA DE SERVIÇOS (servicos.html)
=================================================================== */

.service-detail-grid{

    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:24px;

}

.service-detail-card{

    display:flex;
    flex-direction:column;
    background:#FFFFFF;
    border:1px solid var(--color-gray-200);
    border-radius:22px;
    padding:32px;
    box-shadow:var(--shadow-sm);
    transition:var(--transition);

}

.service-detail-card:hover{

    box-shadow:var(--shadow-md);
    transform:translateY(-4px);
    border-color:transparent;

}

.service-detail-head{

    display:flex;
    align-items:center;
    gap:18px;
    margin-bottom:16px;

}

.service-detail-head .service-icon{

    flex-shrink:0;
    width:56px;
    height:56px;
    margin-bottom:0;

}

.service-detail-head h3{

    margin-bottom:0;

}

.service-detail-card p{

    color:var(--color-gray-600);
    line-height:1.7;
    margin-bottom:22px;

}

.service-detail-link{

    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-top:auto;
    font-size:.9rem;
    font-weight:700;
    color:var(--color-primary);
    transition:var(--transition-fast);

}

.service-detail-link svg{

    width:16px;
    height:16px;
    transition:transform .25s ease;

}

.service-detail-link:hover{

    color:var(--color-primary-dark);

}

.service-detail-link:hover svg{

    transform:translateX(4px);

}

.services-page .gallery-cta{

    margin-top:56px;

}

/* ===========================
   Responsivo — Página de Serviços
=========================== */

@media (max-width:992px){

    .service-detail-grid{
        gap:20px;
    }

    .service-detail-card{
        padding:28px;
    }

}

@media (max-width:700px){

    .service-detail-grid{
        grid-template-columns:1fr;
        gap:16px;
    }

    .service-detail-card{
        padding:24px 22px;
    }

    .service-detail-head{
        gap:14px;
        margin-bottom:12px;
    }

    .service-detail-head .service-icon{
        width:48px;
        height:48px;
    }

    .services-page .gallery-cta{
        margin-top:40px;
    }

}

@media (max-width:420px){

    .service-detail-card{
        padding:20px 18px;
        border-radius:18px;
    }

    .service-detail-head{
        flex-direction:column;
        align-items:flex-start;
        gap:12px;
    }

}

/* ===================================================================
   49. BUSCA NO FAQ (página faq.html)
=================================================================== */

.faq-search{

    position:relative;
    max-width:520px;
    margin:0 auto 40px;

}

.faq-search svg{

    position:absolute;
    top:50%;
    left:18px;
    width:20px;
    height:20px;
    transform:translateY(-50%);
    color:var(--color-gray-500);
    pointer-events:none;

}

.faq-search input{

    width:100%;
    padding:15px 18px 15px 50px;
    border:1px solid var(--color-gray-200);
    border-radius:14px;
    background:#FFFFFF;
    font-family:var(--font-family);
    font-size:.95rem;
    color:var(--color-dark);
    transition:var(--transition-fast);

}

.faq-search input:focus{

    outline:none;
    border-color:var(--color-primary);
    box-shadow:0 0 0 4px rgba(249,115,22,.12);

}

.faq-empty{

    text-align:center;
    padding:24px;
    color:var(--color-gray-500);

}

/* ===========================
   Responsivo — Busca do FAQ
=========================== */

@media (max-width:700px){

    .faq-search{
        margin-bottom:28px;
    }

    .faq-search input{
        padding:13px 16px 13px 46px;
        font-size:.9rem;
    }

}