/* =================================================================
   MACH CONSÓRCIOS — enhancements.css
   Melhorias de usabilidade, design, responsividade e modernidade.
   Carrega DEPOIS de styles.css. Camada própria @layer enhancements
   (vence os componentes base sem !important). Usa os mesmos tokens
   (Fibonacci, cores da marca) já definidos em styles.css.
   Fundamentado em: CSS-FIBONACCI-SYSTEM, CSS-PRATICAS-MODERNAS-
   TOKENS-LAYERS, CSS-MODULAR-DESIGN-SYSTEM, LANDING-PAGE-GUIA.
   ================================================================= */
@layer enhancements;

/* =================================================================
   1. TOKENS ESTENDIDOS — easing, timing, sombras, z-index, elevação
   ================================================================= */
@layer enhancements {
  :root{
    /* Easing curves modernas */
    --ease-out:cubic-bezier(.16,1,.3,1);
    --ease-in-out:cubic-bezier(.65,.05,.36,1);
    --ease-spring:cubic-bezier(.34,1.56,.64,1);
    --ease-smooth:cubic-bezier(.4,.15,.2,1);
    /* Durações */
    --t-fast:.15s; --t-base:.25s; --t-slow:.45s; --t-slower:.7s;
    /* Escala Fibonacci estendida */
    --fib-144:9rem; --fib-233:14.5rem;
    /* Espaçamento fluido de seção (clamp) */
    --pad-sec:clamp(3rem,7vw,6rem);
    --pad-sec-lg:clamp(4rem,9vw,9rem);
    /* Raios */
    --r-2:.5rem; --r-13:2rem; --r-full:999px;
    /* Sombras em camadas (elevação) */
    --sh-1:0 1px 2px rgba(0,0,0,.3);
    --sh-2:0 4px 12px -2px rgba(0,0,0,.4);
    --sh-3:0 12px 28px -8px rgba(0,0,0,.5);
    --sh-4:0 24px 60px -18px rgba(0,0,0,.65);
    --sh-glow:0 0 0 1px rgba(105,218,255,.25),0 12px 40px -12px rgba(105,218,255,.4);
    --sh-glow-strong:0 0 32px -4px rgba(105,218,255,.55);
    /* Bordas suaves reutilizáveis */
    --brd:1px solid var(--c-line);
    --brd-soft:1px solid color-mix(in srgb,var(--c-line) 60%,transparent);
    --brd-cyan:1px solid color-mix(in srgb,var(--c-cyan) 45%,var(--c-line));
    /* Superfícies com leve variação (glass) */
    --glass:color-mix(in srgb,var(--c-ink-2) 72%,transparent);
    --glass-strong:color-mix(in srgb,var(--c-ink-2) 88%,transparent);
    /* Z-index nomeado — evita guerra de camadas */
    --z-base:1; --z-raise:10; --z-sticky:40; --z-header:60;
    --z-float:70; --z-overlay:80; --z-modal:90; --z-toast:100;
    /* Larguras utilitárias de leitura */
    --w-prose:65ch; --w-narrow:52ch;
    /* Gradientes auxiliares */
    --grad-radial:radial-gradient(circle at 30% 20%,rgba(105,218,255,.18),transparent 60%);
    --grad-line:linear-gradient(90deg,transparent,var(--c-line),transparent);
    --grad-cyan-fade:linear-gradient(180deg,color-mix(in srgb,var(--c-petrol) 18%,transparent),transparent);
  }

  /* =================================================================
     2. RESET / BASE MODERNO — seleção, scrollbar, media, tipografia
     ================================================================= */
  ::selection{background:color-mix(in srgb,var(--c-cyan) 35%,transparent);color:var(--c-white)}
  ::-moz-selection{background:color-mix(in srgb,var(--c-cyan) 35%,transparent);color:var(--c-white)}

  /* Scrollbar estilizada (WebKit + Firefox) */
  html{scrollbar-color:var(--c-line) transparent;scrollbar-width:thin}
  ::-webkit-scrollbar{width:12px;height:12px}
  ::-webkit-scrollbar-track{background:var(--c-ink-2)}
  ::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--c-petrol),#1c3a48);border-radius:99px;border:3px solid var(--c-ink-2)}
  ::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,var(--c-cyan),var(--c-petrol))}

  /* Imagens e mídia mais seguras */
  img,picture,svg,video{max-inline-size:100%;block-size:auto}
  img{font-style:italic;color:var(--c-mut);background-repeat:no-repeat;background-size:cover}
  :where(a,button,summary){-webkit-tap-highlight-color:transparent}

  /* Melhor renderização de texto e quebras */
  h1,h2,h3,h4{text-wrap:balance}
  p,li{text-wrap:pretty}
  body{font-optical-sizing:auto;text-rendering:optimizeLegibility}

  /* Ancoragem de rolagem estável (evita "pulo" ao carregar imagens) */
  main,section{overflow-anchor:auto}

  /* =================================================================
     3. ACESSIBILIDADE — skip link, foco, movimento reduzido, contraste
     ================================================================= */
  .skip-link{position:fixed;inset-block-start:-100px;inset-inline-start:var(--fib-5);z-index:var(--z-toast);
    background:var(--grad);color:#04222e;font-weight:700;padding:var(--fib-3) var(--fib-8);
    border-radius:0 0 var(--r-3) var(--r-3);transition:inset-block-start var(--t-base) var(--ease-out);box-shadow:var(--sh-3)}
  .skip-link:focus{inset-block-start:0}

  :focus-visible{outline:2px solid var(--c-cyan);outline-offset:3px;border-radius:6px}
  a:focus-visible,button:focus-visible,.btn:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb,var(--c-cyan) 40%,transparent)}
  input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none}

  /* Alvos de toque com no mínimo 44px (WCAG 2.5.5) */
  .nav__menu a,.foot ul a,.card__link{min-block-size:2.75rem;display:inline-flex;align-items:center}

  @media (prefers-reduced-motion:reduce){
    *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
      transition-duration:.001ms!important;scroll-behavior:auto!important}
    .wa-float{animation:none!important}
    [data-rise]{opacity:1!important;transform:none!important}
  }
  @media (prefers-contrast:more){
    :root{--c-mut:#c9d6df;--c-line:#3a4f5e}
    .btn--ghost{border-color:var(--c-cyan)}
    p{color:var(--c-light)}
  }

  /* =================================================================
     4. TIPOGRAFIA FLUIDA REFINADA + RITMO VERTICAL
     ================================================================= */
  .hero h1{letter-spacing:-.02em;line-height:1.05}
  h2{letter-spacing:-.015em}
  .sec-head p,.hero__lead{max-inline-size:var(--w-prose)}
  .lead-lg{font-size:clamp(1.1rem,1rem + .7vw,1.4rem);line-height:1.6;color:var(--c-light)}
  .eyebrow{position:relative}
  .txt-grad{background-size:200% 100%;animation:gradShift 8s ease infinite}
  @keyframes gradShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

  /* Primeira linha de parágrafos de abertura com leve destaque */
  .intro-p::first-line{color:var(--c-light)}

  /* Links de texto dentro de conteúdo */
  .prose a{color:var(--c-cyan);text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--c-cyan) 40%,transparent);text-underline-offset:3px;transition:text-decoration-color var(--t-base)}
  .prose a:hover{text-decoration-color:var(--c-cyan)}
}

@layer enhancements {
  /* =================================================================
     5. HEADER — barra de progresso, esconder ao rolar, link ativo
     ================================================================= */
  .scroll-progress{position:fixed;inset-block-start:0;inset-inline:0;block-size:3px;z-index:calc(var(--z-header) + 1);
    background:var(--grad);transform-origin:0 50%;transform:scaleX(0);
    box-shadow:0 0 12px rgba(105,218,255,.6);will-change:transform;pointer-events:none}

  .site-head{transition:transform var(--t-slow) var(--ease-out),background var(--t-slow),border-color var(--t-slow),box-shadow var(--t-slow)}
  .site-head.scrolled{box-shadow:var(--sh-2)}
  .site-head.head-hidden{transform:translateY(-102%)}

  .nav__logo img{transition:transform var(--t-base) var(--ease-spring),filter var(--t-base)}
  .nav__logo:hover img{transform:scale(1.04)}
  .nav__logo:active img{transform:scale(.98)}

  .nav__menu a{transition:color var(--t-base) var(--ease-out)}
  .nav__menu a.active{color:var(--c-white)}
  .nav__menu a.active::after{inline-size:100%}

  /* Micro-badge de status no header (opcional) */
  .head-badge{display:inline-flex;align-items:center;gap:var(--fib-2);font-size:.72rem;font-weight:600;
    color:var(--c-cyan);padding:.25rem .6rem;border:1px solid var(--brd-cyan);border-radius:var(--r-full);
    background:color-mix(in srgb,var(--c-petrol) 14%,transparent)}
  .head-badge .dot{inline-size:7px;block-size:7px;border-radius:50%;background:#25d366;box-shadow:0 0 0 0 rgba(37,211,102,.6);animation:dotPulse 2s infinite}
  @keyframes dotPulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.55)}70%{box-shadow:0 0 0 8px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}

  /* =================================================================
     6. HERO — gradiente animado, formas flutuantes, brilho, cursor
     ================================================================= */
  .hero__bg{background-size:160% 160%;animation:heroPan 22s ease-in-out infinite alternate}
  @keyframes heroPan{0%{background-position:80% 0%,10% 100%,0 0}100%{background-position:60% 20%,30% 80%,0 0}}

  /* Blobs decorativos flutuantes atrás do conteúdo */
  .hero::before,.hero::after{content:"";position:absolute;z-index:-1;border-radius:50%;filter:blur(60px);opacity:.5;pointer-events:none}
  .hero::before{inline-size:min(46vw,520px);aspect-ratio:1;inset-block-start:-8%;inset-inline-end:-6%;
    background:radial-gradient(circle,rgba(38,126,155,.5),transparent 70%);animation:float1 14s ease-in-out infinite}
  .hero::after{inline-size:min(34vw,380px);aspect-ratio:1;inset-block-end:-10%;inset-inline-start:-8%;
    background:radial-gradient(circle,rgba(105,218,255,.28),transparent 70%);animation:float2 18s ease-in-out infinite}
  @keyframes float1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-24px,26px) scale(1.08)}}
  @keyframes float2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(28px,-20px) scale(1.12)}}

  .hero__col{animation:heroRise .9s var(--ease-out) both}
  .hero .simu{animation:heroRise 1.1s var(--ease-out) .15s both}
  @keyframes heroRise{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}

  .hero__lead{max-inline-size:54ch}
  .hero__badges{padding-block-start:var(--fib-3)}
  .hero__badge{padding:.4rem .75rem;border:var(--brd-soft);border-radius:var(--r-full);
    background:color-mix(in srgb,var(--c-ink-2) 60%,transparent);backdrop-filter:blur(4px);transition:border-color var(--t-base),transform var(--t-base)}
  .hero__badge:hover{border-color:var(--brd-cyan);transform:translateY(-2px)}

  /* Indicador de rolagem no rodapé do hero */
  .scroll-cue{position:absolute;inset-block-end:var(--fib-8);inset-inline-start:50%;translate:-50% 0;z-index:2;
    display:grid;place-items:center;gap:6px;color:var(--c-mut);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase}
  .scroll-cue .mouse{inline-size:24px;block-size:38px;border:2px solid var(--c-line);border-radius:14px;position:relative}
  .scroll-cue .mouse::before{content:"";position:absolute;inset-block-start:6px;inset-inline-start:50%;translate:-50% 0;
    inline-size:4px;block-size:8px;border-radius:2px;background:var(--c-cyan);animation:wheel 1.8s ease-in-out infinite}
  @keyframes wheel{0%{opacity:0;transform:translate(-50%,0)}30%{opacity:1}60%{opacity:1;transform:translate(-50%,10px)}100%{opacity:0;transform:translate(-50%,12px)}}
  @media(max-width:960px){.scroll-cue{display:none}}

  /* =================================================================
     7. BOTÕES — brilho, ripple, tamanhos, ícone, loading, grupos
     ================================================================= */
  .btn{position:relative;overflow:hidden;isolation:isolate;transition:transform var(--t-base) var(--ease-spring),box-shadow var(--t-base),background var(--t-base),color var(--t-base)}
  .btn::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.28),transparent 70%);
    translate:-120% 0;transition:translate var(--t-slow) var(--ease-out)}
  .btn:hover::before{translate:120% 0}
  .btn:active{transform:translateY(0) scale(.97)}
  .btn--grad:hover{box-shadow:0 16px 44px -12px rgba(105,218,255,.6),var(--sh-glow-strong)}

  /* Efeito ripple (JS adiciona .ripple) */
  .btn .ripple{position:absolute;border-radius:50%;transform:scale(0);background:rgba(255,255,255,.35);
    animation:ripple .6s var(--ease-out);pointer-events:none;z-index:-1}
  @keyframes ripple{to{transform:scale(3.5);opacity:0}}

  /* Tamanhos */
  .btn--sm{min-block-size:2.5rem;padding-inline:var(--fib-8);font-size:.88rem}
  .btn--lg{min-block-size:3.6rem;padding-inline:var(--fib-21);font-size:1.05rem}
  .btn--xl{min-block-size:4.1rem;padding-inline:var(--fib-34);font-size:1.12rem}

  /* Botão só ícone */
  .btn--icon{inline-size:var(--fib-34);block-size:var(--fib-34);padding:0;border-radius:var(--r-full)}
  .btn--icon svg{inline-size:22px;block-size:22px}

  /* Botão em estado de carregamento */
  .btn.is-loading{color:transparent!important;pointer-events:none}
  .btn.is-loading::after{content:"";position:absolute;inset:50% auto auto 50%;inline-size:20px;block-size:20px;
    margin:-10px 0 0 -10px;border:2px solid currentColor;border-block-start-color:transparent;border-radius:50%;
    color:#04222e;animation:spin .7s linear infinite}
  @keyframes spin{to{transform:rotate(360deg)}}

  /* Grupo de botões */
  .btn-group{display:inline-flex;flex-wrap:wrap;gap:var(--fib-3)}
  .btn-group--stack{flex-direction:column;align-items:stretch}

  /* Seta que desliza no hover */
  .btn .arrow{transition:transform var(--t-base) var(--ease-out)}
  .btn:hover .arrow{transform:translateX(4px)}
}

@layer enhancements {
  /* =================================================================
     8. CARDS — brilho de borda, sweep, tilt, badges, container query
     ================================================================= */
  .card{position:relative;isolation:isolate;overflow:hidden;
    transition:transform var(--t-slow) var(--ease-out),border-color var(--t-slow),box-shadow var(--t-slow),background var(--t-slow)}
  /* borda em gradiente que aparece no hover */
  .card::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;padding:1px;
    background:linear-gradient(140deg,color-mix(in srgb,var(--c-cyan) 55%,transparent),transparent 55%);
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity var(--t-slow)}
  .card:hover::before{opacity:1}
  /* clarão que segue o cursor (variáveis --mx/--my setadas por JS) */
  .card::after{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity var(--t-slow);
    background:radial-gradient(240px circle at var(--mx,50%) var(--my,0%),rgba(105,218,255,.14),transparent 60%)}
  .card:hover::after{opacity:1}
  .card:hover{transform:translateY(-6px);box-shadow:var(--sh-4)}

  .card__ico{position:relative;overflow:hidden;transition:transform var(--t-base) var(--ease-spring),background var(--t-base),color var(--t-base)}
  .card:hover .card__ico{transform:translateY(-2px) scale(1.06);background:var(--grad);color:#04222e}
  .card__ico::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.35),transparent 60%);opacity:0;transition:opacity var(--t-base)}
  .card:hover .card__ico::after{opacity:1}

  /* selo/etiqueta em card */
  .badge{display:inline-flex;align-items:center;gap:6px;font-size:.72rem;font-weight:700;letter-spacing:.06em;
    text-transform:uppercase;padding:.3rem .6rem;border-radius:var(--r-full);
    color:var(--c-cyan);background:color-mix(in srgb,var(--c-petrol) 20%,transparent);border:1px solid var(--brd-cyan)}
  .badge--solid{background:var(--grad);color:#04222e;border:0}
  .badge--muted{color:var(--c-mut);background:var(--c-ink);border:var(--brd)}

  /* Container queries: os cards de segmento se adaptam ao próprio espaço */
  #segmentos .wrap{container-type:inline-size;container-name:seggrid}
  @container seggrid (min-width:900px){
    .seg-card{padding-block:var(--fib-21)}
  }

  /* =================================================================
     9. FORMULÁRIO / SIMULADOR — UX de inputs, foco, validação
     ================================================================= */
  .field{position:relative}
  .field label{transition:color var(--t-base)}
  .field:focus-within label{color:var(--c-cyan)}
  .field input,.field select,.field textarea{transition:border-color var(--t-base),box-shadow var(--t-base),background var(--t-base)}
  .field input::placeholder,.field textarea::placeholder{color:color-mix(in srgb,var(--c-mut) 70%,transparent)}
  .field input:hover,.field select:hover,.field textarea:hover{border-color:color-mix(in srgb,var(--c-cyan) 30%,var(--c-line))}

  /* Seta customizada no select */
  .field select{appearance:none;-webkit-appearance:none;padding-inline-end:2.6rem;cursor:pointer;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2369daff' stroke-width='2'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right var(--fib-5) center}
  .field select option{background:var(--c-ink-2);color:var(--c-white)}

  /* Estados de validação (JS adiciona .valid/.invalid no .field) */
  .field.valid input,.field.valid select,.field.valid textarea{border-color:color-mix(in srgb,#25d366 60%,var(--c-line))}
  .field.invalid input,.field.invalid select,.field.invalid textarea{border-color:color-mix(in srgb,#ff5470 65%,var(--c-line));box-shadow:0 0 0 3px rgba(255,84,112,.12)}
  .field .field-err{display:none;margin-block-start:6px;font-size:.78rem;color:#ff98a8}
  .field.invalid .field-err{display:block;animation:shake .35s var(--ease-out)}
  @keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}

  /* Ícone de sucesso ao validar */
  .field.valid::after{content:"";position:absolute;inset-block-start:2.35rem;inset-inline-end:var(--fib-5);
    inline-size:18px;block-size:18px;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%2325d366' stroke-width='2.5'%3E%3Cpath d='M4 9l3 3 7-7'/%3E%3C/svg%3E");pointer-events:none}
  .field.valid:has(textarea)::after,.field.valid:has(select)::after{display:none}

  /* Simulador: brilho ao focar qualquer campo */
  .simu:focus-within{box-shadow:var(--sh-4),var(--sh-glow)}
  .simu__out{transition:background var(--t-base),border-color var(--t-base)}
  .simu:focus-within .simu__out{border-color:var(--brd-cyan)}
  .simu__out .val{transition:transform var(--t-base) var(--ease-spring)}
  .simu__out.bump .val{transform:scale(1.08)}

  /* Abas de segmento com deslize do indicador */
  .seg-tab{position:relative;overflow:hidden;transition:color var(--t-base),background var(--t-base),border-color var(--t-base),transform var(--t-fast)}
  .seg-tab:active{transform:scale(.96)}
  .seg-tab svg{transition:transform var(--t-base) var(--ease-spring)}
  .seg-tab[aria-pressed=true] svg{transform:scale(1.15)}

  /* Barra de progresso do formulário (JS atualiza --p) */
  .form-progress{block-size:4px;border-radius:99px;background:var(--c-ink);overflow:hidden;margin-block-end:var(--fib-8)}
  .form-progress > i{display:block;block-size:100%;inline-size:var(--p,0%);background:var(--grad);transition:inline-size var(--t-slow) var(--ease-out)}

  /* Mensagem do formulário com ícone */
  .form-msg{display:flex;align-items:flex-start;gap:var(--fib-3);transition:opacity var(--t-base)}
  .form-msg.ok::before,.form-msg.err::before{content:"";flex:none;inline-size:20px;block-size:20px;margin-block-start:1px;background:no-repeat center/contain}
  .form-msg.ok::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%2325d366' stroke-width='2.5'%3E%3Cpath d='M4 10l4 4 8-8'/%3E%3C/svg%3E")}
  .form-msg.err::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%23ff5470' stroke-width='2.5'%3E%3Cpath d='M10 5v6M10 14v.5' stroke-linecap='round'/%3E%3Ccircle cx='10' cy='10' r='8'/%3E%3C/svg%3E")}
}

@layer enhancements {
  /* =================================================================
     10. PASSOS / TIMELINE — conexão animada e responsiva
     ================================================================= */
  .step{transition:transform var(--t-base) var(--ease-out)}
  .step:hover{transform:translateY(-4px)}
  .step__n{transition:transform var(--t-base) var(--ease-spring)}
  .step:hover .step__n{transform:scale(1.08)}
  .step:not(:last-child)::after{background:linear-gradient(90deg,color-mix(in srgb,var(--c-cyan) 50%,transparent),transparent)}

  /* Em coluna (mobile) mostra um traço vertical entre passos */
  @media(max-width:719px){
    .steps{position:relative;padding-inline-start:var(--fib-13)}
    .steps::before{content:"";position:absolute;inset-block:0;inset-inline-start:calc(1.2rem);inline-size:2px;
      background:linear-gradient(180deg,var(--c-cyan),transparent)}
    .step{padding-top:0;padding-inline-start:var(--fib-8)}
    .step__n{position:static;display:inline-block;margin-block-end:var(--fib-2)}
  }

  /* =================================================================
     11. STATS — contador com destaque e linha divisória
     ================================================================= */
  .stats{position:relative}
  .stat{position:relative;padding:var(--fib-8) var(--fib-5);border-radius:var(--r-5);transition:background var(--t-base)}
  .stat:hover{background:color-mix(in srgb,var(--c-ink-2) 60%,transparent)}
  @media(min-width:600px){
    .stat:not(:last-child)::after{content:"";position:absolute;inset-block:20% ;inset-inline-end:0;inline-size:1px;background:var(--c-line)}
  }
  .stat .num{font-variant-numeric:tabular-nums;letter-spacing:-.02em}
  .stat .num.counting{color:var(--c-cyan)}

  /* =================================================================
     12. VANTAGENS (why) — realce e ícone animado
     ================================================================= */
  .why__item{position:relative;overflow:hidden;transition:transform var(--t-base) var(--ease-out),border-color var(--t-base),background var(--t-base)}
  .why__item:hover{transform:translateY(-3px);border-color:var(--brd-cyan);background:color-mix(in srgb,var(--c-petrol) 8%,var(--c-ink-2))}
  .why__item svg{transition:transform var(--t-base) var(--ease-spring)}
  .why__item:hover svg{transform:scale(1.15) rotate(-4deg)}
  .why__item::before{content:"";position:absolute;inset-block:0;inset-inline-start:0;inline-size:3px;
    background:var(--grad);transform:scaleY(0);transform-origin:0 100%;transition:transform var(--t-base) var(--ease-out)}
  .why__item:hover::before{transform:scaleY(1)}

  /* =================================================================
     13. DEPOIMENTOS — realce, aspas decorativas, snap no mobile
     ================================================================= */
  .quote{position:relative;overflow:hidden;transition:transform var(--t-base) var(--ease-out),border-color var(--t-base),box-shadow var(--t-base)}
  .quote:hover{transform:translateY(-5px);border-color:var(--brd-cyan);box-shadow:var(--sh-3)}
  .quote::before{content:"\201C";position:absolute;inset-block-start:-.4rem;inset-inline-end:var(--fib-8);
    font-size:6rem;line-height:1;color:color-mix(in srgb,var(--c-cyan) 18%,transparent);font-family:Georgia,serif;pointer-events:none}
  .quote__av{transition:transform var(--t-base) var(--ease-spring)}
  .quote:hover .quote__av{transform:scale(1.08) rotate(-3deg)}
  .quote__stars{filter:drop-shadow(0 0 6px rgba(105,218,255,.4))}

  /* Carrossel com scroll-snap no mobile */
  @media(max-width:719px){
    #depoimentos .grid.g-3{grid-auto-flow:column;grid-auto-columns:86%;grid-template-columns:none;
      overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--fib-5);
      margin-inline:calc(-1 * var(--fib-8));padding-inline:var(--fib-8);padding-block-end:var(--fib-5);
      scrollbar-width:none}
    #depoimentos .grid.g-3::-webkit-scrollbar{display:none}
    #depoimentos .quote{scroll-snap-align:center}
  }

  /* =================================================================
     14. FAQ — animação de abertura suave e hover
     ================================================================= */
  .faq__i{transition:border-color var(--t-base),background var(--t-base)}
  .faq__i:hover{border-color:var(--brd-cyan)}
  .faq__i[open]{background:color-mix(in srgb,var(--c-petrol) 8%,var(--c-ink-2));border-color:var(--brd-cyan)}
  .faq__q{transition:color var(--t-base)}
  .faq__q:hover{color:var(--c-cyan)}
  .faq__a{overflow:hidden}
  /* animação de altura usando grid-rows (moderno) — aplicada via [open] */
  .faq__i:not([open]) .faq__a{animation:none}
  .faq__i[open] .faq__a{animation:faqIn var(--t-slow) var(--ease-out)}
  @keyframes faqIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

  /* =================================================================
     15. CTA — brilho pulsante e borda gradiente
     ================================================================= */
  .cta{position:relative;isolation:isolate}
  .cta::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;padding:1px;
    background:linear-gradient(120deg,color-mix(in srgb,var(--c-cyan) 55%,transparent),transparent 50%,color-mix(in srgb,var(--c-petrol) 45%,transparent));
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
  .cta img{animation:floatY 4s ease-in-out infinite}
  @keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

  /* =================================================================
     16. CONTATO — cartões de info com hover, mapa/realce
     ================================================================= */
  .info-item{padding:var(--fib-5);border-radius:var(--r-5);transition:background var(--t-base),transform var(--t-base)}
  .info-item:hover{background:color-mix(in srgb,var(--c-ink-2) 70%,transparent);transform:translateX(4px)}
  .info-item .ii{transition:transform var(--t-base) var(--ease-spring),background var(--t-base),color var(--t-base)}
  .info-item:hover .ii{transform:scale(1.08);background:var(--grad);color:#04222e}
}

@layer enhancements {
  /* =================================================================
     17. FOOTER — colunas, social com brilho, refinamentos
     ================================================================= */
  .foot__soc a{position:relative;overflow:hidden;transition:color var(--t-base),border-color var(--t-base),transform var(--t-base),background var(--t-base)}
  .foot__soc a:hover{transform:translateY(-3px);background:color-mix(in srgb,var(--c-petrol) 18%,transparent)}
  .foot ul a{position:relative;transition:color var(--t-base),padding-inline-start var(--t-base)}
  .foot ul a::before{content:"";position:absolute;inset-inline-start:-12px;inset-block-start:50%;translate:0 -50%;
    inline-size:0;block-size:2px;background:var(--grad);border-radius:2px;transition:inline-size var(--t-base)}
  .foot ul a:hover{padding-inline-start:12px}
  .foot ul a:hover::before{inline-size:8px}
  .foot__logo{transition:transform var(--t-base) var(--ease-spring)}
  .foot__logo:hover{transform:scale(1.03)}

  /* =================================================================
     18. WHATSAPP FLOAT + BACK-TO-TOP — tooltip e entrada
     ================================================================= */
  .wa-float{transition:transform var(--t-base) var(--ease-spring),box-shadow var(--t-base);
    animation:pulse 2.6s infinite,waIn .6s var(--ease-spring) both}
  @keyframes waIn{from{opacity:0;transform:scale(0) rotate(-40deg)}to{opacity:1;transform:none}}
  .wa-float:hover{transform:scale(1.1)}
  .wa-float::after{content:"Fale conosco";position:absolute;inset-inline-end:calc(100% + 12px);inset-block-start:50%;
    translate:0 -50%;white-space:nowrap;background:var(--c-ink-3);color:var(--c-white);font-size:.82rem;font-weight:600;
    padding:.5rem .8rem;border-radius:var(--r-3);border:var(--brd);box-shadow:var(--sh-3);
    opacity:0;pointer-events:none;transition:opacity var(--t-base),translate var(--t-base)}
  .wa-float:hover::after{opacity:1;translate:-4px -50%}
  @media(max-width:520px){.wa-float::after{display:none}}

  .to-top{position:fixed;inset-block-end:calc(var(--fib-8) + 74px);inset-inline-end:var(--fib-8);z-index:var(--z-float);
    inline-size:46px;block-size:46px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
    background:var(--glass-strong);border:var(--brd);color:var(--c-white);backdrop-filter:blur(8px);
    opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity var(--t-base),transform var(--t-base),visibility var(--t-base),border-color var(--t-base)}
  .to-top.show{opacity:1;visibility:visible;transform:none}
  .to-top:hover{border-color:var(--brd-cyan);color:var(--c-cyan);transform:translateY(-3px)}
  .to-top svg{inline-size:22px;block-size:22px}

  /* =================================================================
     19. SCROLL REVEAL — variações e stagger
     ================================================================= */
  [data-rise]{transition:opacity var(--t-slower) var(--ease-out),transform var(--t-slower) var(--ease-out)}
  [data-anim="fade"]{opacity:0}[data-anim="fade"].in{opacity:1}
  [data-anim="left"]{opacity:0;transform:translateX(-32px)}[data-anim="left"].in{opacity:1;transform:none}
  [data-anim="right"]{opacity:0;transform:translateX(32px)}[data-anim="right"].in{opacity:1;transform:none}
  [data-anim="zoom"]{opacity:0;transform:scale(.92)}[data-anim="zoom"].in{opacity:1;transform:none}
  [data-anim="up"]{opacity:0;transform:translateY(34px)}[data-anim="up"].in{opacity:1;transform:none}
  /* stagger: filhos entram em sequência quando o pai recebe .in */
  [data-stagger] > *{opacity:0;transform:translateY(20px);transition:opacity var(--t-slow) var(--ease-out),transform var(--t-slow) var(--ease-out)}
  [data-stagger].in > *{opacity:1;transform:none}
  [data-stagger].in > *:nth-child(1){transition-delay:.05s}
  [data-stagger].in > *:nth-child(2){transition-delay:.12s}
  [data-stagger].in > *:nth-child(3){transition-delay:.19s}
  [data-stagger].in > *:nth-child(4){transition-delay:.26s}
  [data-stagger].in > *:nth-child(5){transition-delay:.33s}
  [data-stagger].in > *:nth-child(6){transition-delay:.40s}

  /* =================================================================
     20. EFEITOS MODERNOS — glass, gradiente, ruído, glow, divisores
     ================================================================= */
  .glass{background:var(--glass);backdrop-filter:blur(12px) saturate(1.2);border:var(--brd-soft)}
  .glow{box-shadow:var(--sh-glow)}
  .glow-strong{box-shadow:var(--sh-glow-strong)}
  .grad-border{position:relative;isolation:isolate}
  .grad-border::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;padding:1px;
    background:var(--grad);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;mask-composite:exclude}
  .divider-grad{block-size:1px;border:0;background:var(--grad-line)}
  .section-fade-top{position:relative}
  .section-fade-top::before{content:"";position:absolute;inset-block-start:0;inset-inline:0;block-size:120px;
    background:linear-gradient(180deg,var(--c-ink),transparent);pointer-events:none;z-index:1}

  /* Sobreposição de ruído sutil para dar textura premium */
  .noise::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.03;mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

  /* Chip/tag genérica */
  .chip{display:inline-flex;align-items:center;gap:6px;padding:.35rem .75rem;border-radius:var(--r-full);
    font-size:.8rem;font-weight:500;color:var(--c-light);background:var(--c-ink-3);border:var(--brd)}
  .chip svg{inline-size:14px;block-size:14px;color:var(--c-cyan)}
}

@layer enhancements {
  /* =================================================================
     21. UTILITÁRIOS — layout, flex, grid, espaçamento, texto
     ================================================================= */
  /* Display */
  .d-none{display:none} .d-block{display:block} .d-inline{display:inline}
  .d-flex{display:flex} .d-grid{display:grid} .d-inline-flex{display:inline-flex}
  /* Flex */
  .flex{display:flex} .flex-col{flex-direction:column} .flex-wrap{flex-wrap:wrap}
  .items-center{align-items:center} .items-start{align-items:flex-start} .items-end{align-items:flex-end}
  .justify-center{justify-content:center} .justify-between{justify-content:space-between}
  .justify-start{justify-content:flex-start} .justify-end{justify-content:flex-end}
  .flex-1{flex:1} .flex-none{flex:none} .flex-auto{flex:1 1 auto}
  .gap-1{gap:var(--fib-1)} .gap-2{gap:var(--fib-2)} .gap-3{gap:var(--fib-3)}
  .gap-5{gap:var(--fib-5)} .gap-8{gap:var(--fib-8)} .gap-13{gap:var(--fib-13)} .gap-21{gap:var(--fib-21)}
  /* Grid helpers */
  .grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--fib-13)}
  .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--fib-13)}
  .grid-auto{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--fib-13)}
  .place-center{display:grid;place-items:center}
  /* Espaçamento (margin/padding lógicos) */
  .mt-0{margin-block-start:0} .mt-2{margin-block-start:var(--fib-2)} .mt-3{margin-block-start:var(--fib-3)}
  .mt-5{margin-block-start:var(--fib-5)} .mt-21{margin-block-start:var(--fib-21)} .mt-34{margin-block-start:var(--fib-34)}
  .mb-0{margin-block-end:0} .mb-3{margin-block-end:var(--fib-3)} .mb-5{margin-block-end:var(--fib-5)}
  .mb-8{margin-block-end:var(--fib-8)} .mb-13{margin-block-end:var(--fib-13)} .mb-21{margin-block-end:var(--fib-21)}
  .mx-auto{margin-inline:auto}
  .p-5{padding:var(--fib-5)} .p-8{padding:var(--fib-8)} .p-13{padding:var(--fib-13)} .p-21{padding:var(--fib-21)}
  .py-8{padding-block:var(--fib-8)} .px-8{padding-inline:var(--fib-8)}
  /* Texto */
  .text-center{text-align:center} .text-start{text-align:start} .text-end{text-align:end}
  .text-sm{font-size:var(--fs-sm)} .text-lg{font-size:var(--fs-lead)}
  .fw-400{font-weight:400} .fw-500{font-weight:500} .fw-600{font-weight:600} .fw-700{font-weight:700}
  .uppercase{text-transform:uppercase;letter-spacing:.08em}
  .muted{color:var(--c-mut)} .light{color:var(--c-light)} .white{color:var(--c-white)} .cyan{color:var(--c-cyan)}
  .leading-tight{line-height:1.2} .leading-relaxed{line-height:1.75}
  .truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .clamp-3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  /* Largura / medida */
  .w-full{inline-size:100%} .w-prose{max-inline-size:var(--w-prose)} .w-narrow{max-inline-size:var(--w-narrow)}
  .maxw-sm{max-inline-size:480px} .maxw-md{max-inline-size:720px} .maxw-lg{max-inline-size:960px}
  /* Bordas e raios */
  .rounded{border-radius:var(--r-5)} .rounded-lg{border-radius:var(--r-8)} .rounded-full{border-radius:var(--r-full)}
  .bordered{border:var(--brd)} .border-cyan{border:var(--brd-cyan)}
  /* Superfícies */
  .surface{background:var(--c-ink-2);border:var(--brd);border-radius:var(--r-8)}
  .surface-2{background:var(--c-ink-3);border:var(--brd);border-radius:var(--r-8)}
  /* Aspect ratio */
  .ratio-16-9{aspect-ratio:16/9} .ratio-4-3{aspect-ratio:4/3} .ratio-1-1{aspect-ratio:1}
  /* Posição */
  .relative{position:relative} .sticky-top{position:sticky;inset-block-start:6rem}
  /* Cursor / seleção */
  .pointer{cursor:pointer} .no-select{user-select:none}
  /* Elevação */
  .elev-1{box-shadow:var(--sh-1)} .elev-2{box-shadow:var(--sh-2)} .elev-3{box-shadow:var(--sh-3)} .elev-4{box-shadow:var(--sh-4)}

  /* =================================================================
     22. SKELETON / LOADING — placeholders enquanto carrega
     ================================================================= */
  .skeleton{position:relative;overflow:hidden;background:var(--c-ink-3);border-radius:var(--r-3)}
  .skeleton::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
    background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--c-line) 60%,transparent),transparent);
    animation:shimmer 1.5s infinite}
  @keyframes shimmer{100%{transform:translateX(100%)}}
  .skeleton-text{block-size:.9rem;margin-block-end:.6rem} .skeleton-text:last-child{inline-size:70%}
  .skeleton-title{block-size:1.4rem;inline-size:60%;margin-block-end:var(--fib-5)}
  .skeleton-avatar{inline-size:var(--fib-21);block-size:var(--fib-21);border-radius:50%}

  /* Spinner reutilizável */
  .spinner{inline-size:24px;block-size:24px;border:3px solid var(--c-line);border-block-start-color:var(--c-cyan);
    border-radius:50%;animation:spin .7s linear infinite;display:inline-block}
  .spinner--sm{inline-size:16px;block-size:16px;border-width:2px}

  /* =================================================================
     23. TOAST / NOTIFICAÇÃO (pronto para JS)
     ================================================================= */
  .toast-wrap{position:fixed;inset-block-end:var(--fib-8);inset-inline-start:50%;translate:-50% 0;z-index:var(--z-toast);
    display:grid;gap:var(--fib-3);inline-size:min(92vw,420px)}
  .toast{display:flex;align-items:center;gap:var(--fib-5);padding:var(--fib-5) var(--fib-8);border-radius:var(--r-5);
    background:var(--glass-strong);border:var(--brd);box-shadow:var(--sh-4);backdrop-filter:blur(10px);
    animation:toastIn var(--t-slow) var(--ease-spring)}
  .toast--ok{border-color:color-mix(in srgb,#25d366 50%,var(--c-line))}
  .toast--err{border-color:color-mix(in srgb,#ff5470 50%,var(--c-line))}
  @keyframes toastIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
}

@layer enhancements {
  /* =================================================================
     24. RESPONSIVIDADE — refino progressivo por breakpoint
     Grid 4 -> 2 -> 1 · padding 80/40 · margem lateral 20px mobile
     ================================================================= */

  /* ---- >= 1280px: telas largas, mais respiro ---- */
  @media(min-width:1280px){
    :root{--wrap:1240px}
    .hero__grid{gap:var(--fib-55)}
    .sec{padding-block:var(--pad-sec-lg)}
  }

  /* ---- <= 1100px: encolhe menu e espaçamentos ---- */
  @media(max-width:1100px){
    .nav__menu{gap:var(--fib-5)}
    .nav__menu a{font-size:.9rem}
    .hero__grid{gap:var(--fib-21)}
  }

  /* ---- <= 1024px: hero em coluna, simulador abaixo ---- */
  @media(max-width:1024px){
    .hero__grid{grid-template-columns:1fr;gap:var(--fib-34)}
    .hero .simu{max-inline-size:560px;margin-inline:auto;inline-size:100%}
    .g-4{grid-template-columns:repeat(2,1fr)}
    .contact{grid-template-columns:1fr;gap:var(--fib-21)}
    .foot__grid{grid-template-columns:1fr 1fr}
  }

  /* ---- <= 900px: menu vira gaveta (já em styles.css), ajustes ---- */
  @media(max-width:900px){
    .nav__cta{gap:var(--fib-2)}
    .sec-head{margin-block-end:var(--fib-13)}
    .why{grid-template-columns:1fr}
    #seguros .grid.g-2{grid-template-columns:1fr}
    .cta{text-align:center}
    .cta .cta__actions{justify-content:center}
    #seguros .cta{text-align:center}
    #seguros .cta__actions{justify-content:center!important}
  }

  /* ---- <= 768px: tablet -> layout de 1 coluna dominante ---- */
  @media(max-width:768px){
    :root{--pad-sec:clamp(2.5rem,8vw,3.5rem)}
    .wrap{width:min(100% - 2.5rem,var(--wrap))}
    .sec{padding-block:var(--pad-sec)}
    .g-2,.g-3,.g-4{grid-template-columns:1fr}
    .grid-2,.grid-3{grid-template-columns:1fr}
    .hero h1{font-size:clamp(2rem,7vw,2.8rem)}
    .steps{grid-template-columns:1fr}
    .stats{grid-template-columns:repeat(2,1fr);gap:var(--fib-8)}
    .foot__bottom{flex-direction:column;text-align:center;gap:var(--fib-3)}
    /* botões e menu centralizados no mobile (checklist LP) */
    .hero__actions,.cta__actions{justify-content:center}
    .hero__col{text-align:center}
    .hero__col .eyebrow{justify-content:center}
    .hero__lead{margin-inline:auto}
    .hero__badges{justify-content:center}
    .sec-head:not(.center){text-align:center}
    .sec-head:not(.center) .eyebrow{justify-content:center}
  }

  /* ---- <= 640px: cartões e formulários compactam ---- */
  @media(max-width:640px){
    .simu{padding:var(--fib-13)}
    .card{padding:var(--fib-8)}
    #contato .grid.g-2{grid-template-columns:1fr;gap:0}
    .seg-tab{min-inline-size:calc(50% - var(--fib-2))}
    .btn{inline-size:100%;max-inline-size:340px}
    .hero__actions .btn,.cta__actions .btn{inline-size:100%;max-inline-size:340px}
    .btn-group{inline-size:100%}
  }

  /* ---- <= 560px: margem lateral 20px, tipografia menor ---- */
  @media(max-width:560px){
    .wrap{width:min(100% - 40px,var(--wrap))}
    :root{--fs-h2:clamp(1.5rem,6vw,2rem)}
    .stat .num{font-size:1.9rem}
    .quote::before{font-size:4.5rem}
    .to-top{inset-inline-end:var(--fib-5)}
    .wa-float{inset-inline-end:var(--fib-5);inset-block-end:var(--fib-5)}
    .to-top{inset-block-end:calc(var(--fib-5) + 70px)}
  }

  /* ---- <= 480px: mobile — simplifica animações pesadas ---- */
  @media(max-width:480px){
    .hero::before,.hero::after{opacity:.35;filter:blur(40px)}
    .simu{padding:var(--fib-8)}
    .field input,.field select,.field textarea{min-block-size:3rem}
    .seg-tabs{gap:var(--fib-1)}
    .seg-tab{font-size:.82rem;padding:var(--fib-2)}
    .nav__logo img{height:36px}
    .stats{gap:var(--fib-5)}
    .stat{padding:var(--fib-5) var(--fib-2)}
  }

  /* ---- <= 400px: tela bem estreita ---- */
  @media(max-width:400px){
    .stats{grid-template-columns:1fr}
    .stat:not(:last-child)::after{display:none}
    .hero h1{font-size:1.85rem}
    .card__ico{inline-size:var(--fib-21);block-size:var(--fib-21)}
    .card__ico svg{inline-size:22px;block-size:22px}
  }

  /* ---- <= 360px: mobile pequeno — último ajuste fino ---- */
  @media(max-width:360px){
    .wrap{width:min(100% - 28px,var(--wrap))}
    .nav__logo img{height:32px}
    .btn{font-size:.92rem;padding-inline:var(--fib-8)}
    .eyebrow{font-size:.74rem}
    h2{font-size:1.4rem}
  }

  /* ---- Telas baixas / paisagem no celular ---- */
  @media(max-height:560px) and (orientation:landscape){
    .hero{padding-block:6rem 3rem}
    .scroll-cue{display:none}
    .site-head .nav{min-height:4rem}
  }

  /* ---- Dispositivos de toque: alvos maiores, sem hover fantasma ---- */
  @media(hover:none){
    .card:hover{transform:none}
    .card:hover::before,.card:hover::after{opacity:0}
    .btn:active{transform:scale(.97)}
    .why__item:hover,.quote:hover,.info-item:hover{transform:none}
  }

  /* ---- Ponteiro fino (mouse): habilita microinterações completas ---- */
  @media(hover:hover) and (pointer:fine){
    .card{cursor:default}
  }
}

@layer enhancements {
  /* =================================================================
     25. IMPRESSÃO — economiza tinta, remove decoração, mostra links
     ================================================================= */
  @media print{
    *{background:#fff!important;color:#000!important;box-shadow:none!important;text-shadow:none!important}
    .site-head,.wa-float,.to-top,.scroll-progress,.scroll-cue,.hero__bg,.hero__pattern,
    .hero::before,.hero::after,.nav__burger,.simu,.cta__actions,.foot__soc{display:none!important}
    body{font-size:12pt;line-height:1.4}
    .wrap{width:100%!important;max-width:100%!important}
    .sec{padding-block:1rem!important}
    h1,h2,h3{color:#000!important;page-break-after:avoid}
    p,li{page-break-inside:avoid}
    a[href^="http"]::after{content:" (" attr(href) ")";font-size:.85em;color:#555!important}
    .card,.quote,.why__item,.faq__i{border:1px solid #ccc!important;page-break-inside:avoid}
    .txt-grad{-webkit-text-fill-color:#000!important;color:#000!important}
    .foot__disc{font-size:8pt}
  }

  /* =================================================================
     26. TEMA CLARO — respeita preferência do SO (marca tem versão clara)
     Aplica-se se o usuário/OS pedir claro E o site marcar [data-theme]
     ================================================================= */
  :root[data-theme="light"]{
    --c-ink:#f4f7f9;--c-ink-2:#ffffff;--c-ink-3:#eef3f6;--c-line:#d8e1e7;
    --c-light:#1a2530;--c-mut:#5a6b78;--c-white:#0e141a;
    --glass:color-mix(in srgb,#ffffff 72%,transparent);
    --glass-strong:color-mix(in srgb,#ffffff 90%,transparent);
    --sh-2:0 4px 12px -2px rgba(20,40,60,.12);
    --sh-3:0 12px 28px -8px rgba(20,40,60,.16);
    --sh-4:0 24px 60px -18px rgba(20,40,60,.2);
  }
  :root[data-theme="light"] body{background:var(--c-ink)}
  :root[data-theme="light"] .hero__bg{background:
    radial-gradient(1100px 600px at 82% -8%,rgba(38,126,155,.14),transparent 60%),
    radial-gradient(760px 520px at 10% 110%,rgba(105,218,255,.08),transparent 60%),var(--c-ink)}
  :root[data-theme="light"] .btn--grad{color:#04222e}
  :root[data-theme="light"] .hero__badge{background:color-mix(in srgb,#fff 70%,transparent)}

  /* Botão de alternância de tema (pronto para JS) */
  .theme-toggle{inline-size:44px;block-size:44px;border-radius:var(--r-3);display:grid;place-items:center;
    background:transparent;border:var(--brd);color:var(--c-mut);cursor:pointer;transition:color var(--t-base),border-color var(--t-base)}
  .theme-toggle:hover{color:var(--c-cyan);border-color:var(--brd-cyan)}
  .theme-toggle svg{inline-size:20px;block-size:20px}

  /* =================================================================
     27. BIBLIOTECA DE ANIMAÇÕES — keyframes reutilizáveis + classes
     ================================================================= */
  @keyframes fadeIn{from{opacity:0}to{opacity:1}}
  @keyframes fadeInUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
  @keyframes fadeInDown{from{opacity:0;transform:translateY(-24px)}to{opacity:1;transform:none}}
  @keyframes fadeInLeft{from{opacity:0;transform:translateX(-24px)}to{opacity:1;transform:none}}
  @keyframes fadeInRight{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
  @keyframes zoomIn{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}
  @keyframes bounceIn{0%{opacity:0;transform:scale(.8)}60%{opacity:1;transform:scale(1.04)}100%{transform:scale(1)}}
  @keyframes pop{0%{transform:scale(1)}50%{transform:scale(1.12)}100%{transform:scale(1)}}
  @keyframes wobble{0%,100%{transform:rotate(0)}25%{transform:rotate(-3deg)}75%{transform:rotate(3deg)}}
  @keyframes breathe{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.03);opacity:1}}
  @keyframes shine{0%{background-position:-200% 0}100%{background-position:200% 0}}
  @keyframes floatSlow{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
  @keyframes glowPulse{0%,100%{box-shadow:0 0 0 0 rgba(105,218,255,.2)}50%{box-shadow:0 0 24px 4px rgba(105,218,255,.35)}}

  .anim-fade{animation:fadeIn var(--t-slow) var(--ease-out) both}
  .anim-up{animation:fadeInUp var(--t-slow) var(--ease-out) both}
  .anim-down{animation:fadeInDown var(--t-slow) var(--ease-out) both}
  .anim-left{animation:fadeInLeft var(--t-slow) var(--ease-out) both}
  .anim-right{animation:fadeInRight var(--t-slow) var(--ease-out) both}
  .anim-zoom{animation:zoomIn var(--t-slow) var(--ease-out) both}
  .anim-bounce{animation:bounceIn var(--t-slower) var(--ease-spring) both}
  .anim-float{animation:floatSlow 4s ease-in-out infinite}
  .anim-breathe{animation:breathe 5s ease-in-out infinite}
  .anim-glow{animation:glowPulse 3s ease-in-out infinite}
  .delay-1{animation-delay:.1s} .delay-2{animation-delay:.2s} .delay-3{animation-delay:.3s}
  .delay-4{animation-delay:.4s} .delay-5{animation-delay:.5s}

  /* Texto com brilho passando (shine) */
  .text-shine{background:linear-gradient(90deg,var(--c-light) 0%,var(--c-cyan) 50%,var(--c-light) 100%);
    background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 4s linear infinite}
}

@layer enhancements {
  /* =================================================================
     28. COMPONENTES EXTRAS 1 — confiança, planos, comparativo
     ================================================================= */

  /* Faixa de selos de confiança (Banco Central, seguradoras...) */
  .trust{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--fib-13) var(--fib-21);
    padding:var(--fib-13);border-block:var(--brd)}
  .trust__item{display:flex;align-items:center;gap:var(--fib-3);color:var(--c-mut);font-size:.9rem;font-weight:500;
    filter:grayscale(1) opacity(.7);transition:filter var(--t-base)}
  .trust__item:hover{filter:none}
  .trust__item svg{inline-size:26px;block-size:26px;color:var(--c-cyan)}

  /* Cartões de plano / resultado de simulação (estilo pricing) */
  .plans{display:grid;gap:var(--fib-13);grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
  .plan{position:relative;background:var(--c-ink-2);border:var(--brd);border-radius:var(--r-8);padding:var(--fib-13);
    display:flex;flex-direction:column;gap:var(--fib-5);transition:transform var(--t-base) var(--ease-out),border-color var(--t-base),box-shadow var(--t-base)}
  .plan:hover{transform:translateY(-6px);border-color:var(--brd-cyan);box-shadow:var(--sh-4)}
  .plan--featured{border-color:var(--brd-cyan);box-shadow:var(--sh-glow)}
  .plan--featured::before{content:"Mais escolhido";position:absolute;inset-block-start:-1px;inset-inline-end:var(--fib-8);
    transform:translateY(-50%);background:var(--grad);color:#04222e;font-size:.72rem;font-weight:700;
    padding:.3rem .7rem;border-radius:var(--r-full)}
  .plan__name{font-size:.82rem;text-transform:uppercase;letter-spacing:.1em;color:var(--c-cyan);font-weight:700}
  .plan__price{font-size:2.2rem;font-weight:700;color:var(--c-white);line-height:1}
  .plan__price small{font-size:.9rem;color:var(--c-mut);font-weight:500}
  .plan__meta{font-size:.85rem;color:var(--c-mut)}
  .plan ul{display:grid;gap:var(--fib-3);margin-block:var(--fib-3)}
  .plan ul li{display:flex;align-items:flex-start;gap:var(--fib-3);font-size:.92rem;color:var(--c-light)}
  .plan ul li svg{inline-size:18px;block-size:18px;color:var(--c-cyan);flex:none;margin-block-start:2px}

  /* Comparativo consórcio x financiamento */
  .versus{display:grid;gap:var(--fib-13);grid-template-columns:1fr 1fr;align-items:stretch}
  @media(max-width:640px){.versus{grid-template-columns:1fr}}
  .versus__col{border-radius:var(--r-8);padding:var(--fib-13);border:var(--brd);background:var(--c-ink-2)}
  .versus__col--win{border-color:var(--brd-cyan);background:color-mix(in srgb,var(--c-petrol) 10%,var(--c-ink-2));box-shadow:var(--sh-glow)}
  .versus__col h3{display:flex;align-items:center;gap:var(--fib-3);margin-block-end:var(--fib-8)}
  .versus__col ul{display:grid;gap:var(--fib-5)}
  .versus__col li{display:flex;align-items:flex-start;gap:var(--fib-3);font-size:.94rem}
  .versus__col li svg{inline-size:20px;block-size:20px;flex:none;margin-block-start:1px}
  .versus__col--win li svg{color:#25d366}
  .versus__col--lose li svg{color:#ff7a8a}
  .versus__tag{display:inline-block;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
    padding:.25rem .6rem;border-radius:var(--r-full);margin-block-end:var(--fib-5)}
  .versus__col--win .versus__tag{background:color-mix(in srgb,#25d366 20%,transparent);color:#7ff0a8}
  .versus__col--lose .versus__tag{background:color-mix(in srgb,#ff5470 16%,transparent);color:#ffb0bc}

  /* Lista de recursos com check */
  .feature-list{display:grid;gap:var(--fib-5)}
  .feature-list li{display:flex;align-items:flex-start;gap:var(--fib-3);color:var(--c-light);font-size:.96rem}
  .feature-list li::before{content:"";flex:none;inline-size:22px;block-size:22px;border-radius:50%;
    background:color-mix(in srgb,var(--c-petrol) 25%,transparent) no-repeat center/14px
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%2369daff' stroke-width='2.5'%3E%3Cpath d='M3 7l3 3 5-6'/%3E%3C/svg%3E")}
}

@layer enhancements {
  /* =================================================================
     29. COMPONENTES EXTRAS 2 — tabs, accordion, tooltip, alertas
     ================================================================= */

  /* Tabs genéricas */
  .tabs{display:flex;gap:var(--fib-2);border-block-end:var(--brd);margin-block-end:var(--fib-13);overflow-x:auto;scrollbar-width:none}
  .tabs::-webkit-scrollbar{display:none}
  .tab{position:relative;padding:var(--fib-5) var(--fib-8);background:none;border:0;color:var(--c-mut);
    font-weight:600;cursor:pointer;white-space:nowrap;transition:color var(--t-base)}
  .tab::after{content:"";position:absolute;inset-block-end:-1px;inset-inline:var(--fib-5);block-size:2px;
    background:var(--grad);transform:scaleX(0);transform-origin:0 50%;transition:transform var(--t-base) var(--ease-out)}
  .tab[aria-selected=true]{color:var(--c-white)} .tab[aria-selected=true]::after{transform:scaleX(1)}
  .tab:hover{color:var(--c-light)}
  .tab-panel{animation:fadeInUp var(--t-slow) var(--ease-out)}
  .tab-panel[hidden]{display:none}

  /* Accordion genérico (fora do FAQ) */
  .acc{display:grid;gap:var(--fib-3)}
  .acc__i{border:var(--brd);border-radius:var(--r-5);overflow:hidden;background:var(--c-ink-2)}
  .acc__h{inline-size:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--fib-5);
    padding:var(--fib-8);font-weight:600;color:var(--c-white);background:none;border:0;cursor:pointer;text-align:start}
  .acc__h svg{transition:transform var(--t-base)}
  .acc__i.open .acc__h svg{transform:rotate(180deg)}
  .acc__c{max-block-size:0;overflow:hidden;transition:max-block-size var(--t-slow) var(--ease-out)}
  .acc__c > div{padding:0 var(--fib-8) var(--fib-8);color:var(--c-mut);font-size:.94rem}

  /* Tooltip por atributo data-tip */
  [data-tip]{position:relative}
  [data-tip]::after{content:attr(data-tip);position:absolute;inset-block-end:calc(100% + 8px);inset-inline-start:50%;
    translate:-50% 4px;white-space:nowrap;background:var(--c-ink-3);color:var(--c-white);font-size:.78rem;font-weight:500;
    padding:.4rem .65rem;border-radius:var(--r-3);border:var(--brd);box-shadow:var(--sh-3);
    opacity:0;pointer-events:none;transition:opacity var(--t-base),translate var(--t-base);z-index:var(--z-toast)}
  [data-tip]:hover::after,[data-tip]:focus-visible::after{opacity:1;translate:-50% 0}

  /* Alertas / avisos */
  .alert{display:flex;align-items:flex-start;gap:var(--fib-5);padding:var(--fib-8);border-radius:var(--r-5);
    border:var(--brd);background:var(--c-ink-2);font-size:.94rem}
  .alert svg{inline-size:22px;block-size:22px;flex:none;margin-block-start:1px}
  .alert--info{border-color:var(--brd-cyan)} .alert--info svg{color:var(--c-cyan)}
  .alert--ok{border-color:color-mix(in srgb,#25d366 45%,var(--c-line))} .alert--ok svg{color:#25d366}
  .alert--warn{border-color:color-mix(in srgb,#ffb020 45%,var(--c-line))} .alert--warn svg{color:#ffb020}
  .alert--err{border-color:color-mix(in srgb,#ff5470 45%,var(--c-line))} .alert--err svg{color:#ff5470}

  /* Avatares e grupo */
  .avatar{inline-size:var(--fib-21);block-size:var(--fib-21);border-radius:50%;object-fit:cover;border:2px solid var(--c-ink-2)}
  .avatar-group{display:flex}
  .avatar-group .avatar{margin-inline-start:-12px;box-shadow:0 0 0 2px var(--c-ink)}
  .avatar-group .avatar:first-child{margin-inline-start:0}
  .avatar--grad{background:var(--grad);display:grid;place-items:center;color:#04222e;font-weight:700}

  /* =================================================================
     30. COMPONENTES EXTRAS 3 — meter, timeline, steps-wizard, rating
     ================================================================= */

  /* Barra de progresso / meter */
  .meter{block-size:10px;border-radius:99px;background:var(--c-ink-3);overflow:hidden;border:var(--brd-soft)}
  .meter > i{display:block;block-size:100%;inline-size:var(--v,0%);background:var(--grad);border-radius:99px;
    transition:inline-size var(--t-slower) var(--ease-out);position:relative;overflow:hidden}
  .meter > i::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);
    animation:shine 2s linear infinite;background-size:200% 100%}
  .meter-label{display:flex;justify-content:space-between;font-size:.82rem;color:var(--c-mut);margin-block-end:6px}

  /* Timeline vertical */
  .timeline{position:relative;display:grid;gap:var(--fib-13);padding-inline-start:var(--fib-21)}
  .timeline::before{content:"";position:absolute;inset-block:6px;inset-inline-start:8px;inline-size:2px;
    background:linear-gradient(180deg,var(--c-cyan),transparent)}
  .timeline__i{position:relative}
  .timeline__i::before{content:"";position:absolute;inset-inline-start:calc(-1 * var(--fib-21) + 2px);inset-block-start:4px;
    inline-size:14px;block-size:14px;border-radius:50%;background:var(--grad);box-shadow:0 0 0 4px color-mix(in srgb,var(--c-petrol) 30%,transparent)}
  .timeline__i h4{margin-block-end:4px;color:var(--c-white)}
  .timeline__i time{font-size:.78rem;color:var(--c-cyan);font-weight:600}

  /* Wizard de etapas (números) */
  .wizard{display:flex;align-items:center;gap:var(--fib-3);flex-wrap:wrap}
  .wizard__step{display:flex;align-items:center;gap:var(--fib-3);color:var(--c-mut);font-size:.9rem}
  .wizard__n{inline-size:2rem;block-size:2rem;border-radius:50%;display:grid;place-items:center;
    background:var(--c-ink-3);border:var(--brd);font-weight:700;font-size:.9rem}
  .wizard__step.done .wizard__n,.wizard__step.active .wizard__n{background:var(--grad);color:#04222e;border:0}
  .wizard__step.active{color:var(--c-white)}
  .wizard__bar{inline-size:2rem;block-size:2px;background:var(--c-line)}

  /* Estrelas de avaliação (input) */
  .rating{display:inline-flex;flex-direction:row-reverse;gap:2px}
  .rating input{position:absolute;opacity:0;pointer-events:none}
  .rating label{font-size:1.4rem;color:var(--c-line);cursor:pointer;transition:color var(--t-fast)}
  .rating label::before{content:"\2605"}
  .rating input:checked ~ label,.rating label:hover,.rating label:hover ~ label{color:var(--c-cyan)}
}

@layer enhancements {
  /* =================================================================
     31. CONTROLES DE FORMULÁRIO MODERNOS
     ================================================================= */
  /* Checkbox custom */
  .check{display:inline-flex;align-items:flex-start;gap:var(--fib-3);cursor:pointer;font-size:.94rem;color:var(--c-light)}
  .check input{position:absolute;opacity:0}
  .check .box{inline-size:22px;block-size:22px;flex:none;border-radius:6px;border:2px solid var(--c-line);
    background:var(--c-ink);display:grid;place-items:center;transition:background var(--t-fast),border-color var(--t-fast)}
  .check .box svg{inline-size:14px;block-size:14px;color:#04222e;opacity:0;transform:scale(.6);transition:opacity var(--t-fast),transform var(--t-fast)}
  .check input:checked + .box{background:var(--grad);border-color:transparent}
  .check input:checked + .box svg{opacity:1;transform:none}
  .check input:focus-visible + .box{box-shadow:0 0 0 3px color-mix(in srgb,var(--c-cyan) 35%,transparent)}

  /* Radio custom */
  .radio{display:inline-flex;align-items:center;gap:var(--fib-3);cursor:pointer;font-size:.94rem;color:var(--c-light)}
  .radio input{position:absolute;opacity:0}
  .radio .dot{inline-size:22px;block-size:22px;flex:none;border-radius:50%;border:2px solid var(--c-line);
    background:var(--c-ink);display:grid;place-items:center;transition:border-color var(--t-fast)}
  .radio .dot::after{content:"";inline-size:10px;block-size:10px;border-radius:50%;background:var(--grad);transform:scale(0);transition:transform var(--t-fast) var(--ease-spring)}
  .radio input:checked + .dot{border-color:var(--c-cyan)} .radio input:checked + .dot::after{transform:scale(1)}

  /* Switch / toggle */
  .switch{display:inline-flex;align-items:center;gap:var(--fib-3);cursor:pointer}
  .switch input{position:absolute;opacity:0}
  .switch .track{inline-size:46px;block-size:26px;border-radius:99px;background:var(--c-ink-3);border:var(--brd);
    position:relative;transition:background var(--t-base)}
  .switch .track::after{content:"";position:absolute;inset-block-start:2px;inset-inline-start:2px;inline-size:20px;block-size:20px;
    border-radius:50%;background:var(--c-mut);transition:transform var(--t-base) var(--ease-spring),background var(--t-base)}
  .switch input:checked + .track{background:color-mix(in srgb,var(--c-petrol) 40%,var(--c-ink-3))}
  .switch input:checked + .track::after{transform:translateX(20px);background:var(--c-cyan)}

  /* Floating label */
  .float-field{position:relative}
  .float-field input,.float-field textarea{inline-size:100%;padding:1.3rem var(--fib-5) .5rem;background:var(--c-ink);
    border:1px solid var(--c-line);border-radius:var(--r-3);color:var(--c-white)}
  .float-field label{position:absolute;inset-block-start:1rem;inset-inline-start:var(--fib-5);color:var(--c-mut);
    pointer-events:none;transition:transform var(--t-fast) var(--ease-out),font-size var(--t-fast),color var(--t-fast);transform-origin:0 0}
  .float-field input:focus + label,.float-field input:not(:placeholder-shown) + label,
  .float-field textarea:focus + label,.float-field textarea:not(:placeholder-shown) + label{
    transform:translateY(-.7rem) scale(.78);color:var(--c-cyan)}

  /* Input group (com ícone/prefixo) */
  .input-group{display:flex;align-items:stretch;border:1px solid var(--c-line);border-radius:var(--r-3);overflow:hidden;background:var(--c-ink);transition:border-color var(--t-base),box-shadow var(--t-base)}
  .input-group:focus-within{border-color:var(--c-cyan);box-shadow:0 0 0 3px rgba(105,218,255,.15)}
  .input-group .addon{display:grid;place-items:center;padding-inline:var(--fib-5);color:var(--c-mut);background:var(--c-ink-3)}
  .input-group .addon svg{inline-size:20px;block-size:20px}
  .input-group input{border:0;background:transparent;padding:var(--fib-3) var(--fib-5);color:var(--c-white);flex:1;min-inline-size:0}
  .input-group input:focus{outline:none}

  /* Busca */
  .search{position:relative}
  .search input{inline-size:100%;padding:var(--fib-3) var(--fib-5) var(--fib-3) 2.8rem;background:var(--c-ink);
    border:1px solid var(--c-line);border-radius:var(--r-full);color:var(--c-white)}
  .search svg{position:absolute;inset-block-start:50%;inset-inline-start:var(--fib-5);translate:0 -50%;
    inline-size:18px;block-size:18px;color:var(--c-mut);pointer-events:none}

  /* =================================================================
     32. OVERLAYS — modal, drawer, cookie bar, CTA fixo mobile
     ================================================================= */
  .overlay{position:fixed;inset:0;z-index:var(--z-overlay);background:rgba(4,10,16,.6);backdrop-filter:blur(4px);
    opacity:0;visibility:hidden;transition:opacity var(--t-base),visibility var(--t-base)}
  .overlay.show{opacity:1;visibility:visible}

  .modal{position:fixed;inset:50% auto auto 50%;translate:-50% -46%;z-index:var(--z-modal);inline-size:min(94vw,540px);
    background:var(--c-ink-2);border:var(--brd);border-radius:var(--r-8);box-shadow:var(--sh-4);padding:var(--fib-21);
    opacity:0;visibility:hidden;transition:opacity var(--t-base),translate var(--t-base) var(--ease-spring),visibility var(--t-base)}
  .modal.show{opacity:1;visibility:visible;translate:-50% -50%}
  .modal__close{position:absolute;inset-block-start:var(--fib-8);inset-inline-end:var(--fib-8);inline-size:38px;block-size:38px;
    border-radius:50%;border:var(--brd);background:var(--c-ink);color:var(--c-mut);cursor:pointer;display:grid;place-items:center}
  .modal__close:hover{color:var(--c-cyan);border-color:var(--brd-cyan)}

  .drawer{position:fixed;inset-block:0;inset-inline-end:0;z-index:var(--z-modal);inline-size:min(88vw,380px);
    background:var(--c-ink-2);border-inline-start:var(--brd);box-shadow:var(--sh-4);padding:var(--fib-21);
    transform:translateX(100%);transition:transform var(--t-slow) var(--ease-out);overflow-y:auto}
  .drawer.show{transform:none}

  /* Barra de cookies */
  .cookie-bar{position:fixed;inset-block-end:var(--fib-5);inset-inline:var(--fib-5);z-index:var(--z-toast);
    display:flex;flex-wrap:wrap;align-items:center;gap:var(--fib-8);padding:var(--fib-8) var(--fib-13);
    background:var(--glass-strong);border:var(--brd);border-radius:var(--r-8);box-shadow:var(--sh-4);backdrop-filter:blur(10px);
    max-inline-size:640px;margin-inline:auto;transform:translateY(140%);transition:transform var(--t-slow) var(--ease-out)}
  .cookie-bar.show{transform:none}
  .cookie-bar p{font-size:.86rem;flex:1;min-inline-size:200px}

  /* CTA fixo no rodapé (mobile) */
  .sticky-cta{position:fixed;inset-block-end:0;inset-inline:0;z-index:var(--z-sticky);display:none;
    gap:var(--fib-3);padding:var(--fib-3) var(--fib-5);background:var(--glass-strong);border-block-start:var(--brd);
    backdrop-filter:blur(10px);box-shadow:0 -8px 30px -12px rgba(0,0,0,.6)}
  .sticky-cta .btn{flex:1;min-height:3rem}
  @media(max-width:640px){
    .sticky-cta{display:flex}
    .wa-float{inset-block-end:calc(var(--fib-5) + 60px)}
    .to-top{inset-block-end:calc(var(--fib-5) + 124px)}
    body{padding-block-end:64px}
  }
}

@layer enhancements {
  /* =================================================================
     33. MÍDIA — imagem com zoom, galeria, vídeo responsivo, moldura
     ================================================================= */
  .img-frame{border-radius:var(--r-8);overflow:hidden;border:var(--brd);position:relative;background:var(--c-ink-3)}
  .img-frame img{inline-size:100%;block-size:100%;object-fit:cover;transition:transform var(--t-slower) var(--ease-out)}
  .img-frame:hover img{transform:scale(1.06)}
  .img-frame--glow{box-shadow:var(--sh-glow)}
  .img-frame::after{content:"";position:absolute;inset:0;background:var(--grad-cyan-fade);opacity:0;transition:opacity var(--t-base);pointer-events:none}
  .img-frame:hover::after{opacity:1}

  .gallery{display:grid;gap:var(--fib-5);grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
  .gallery > *{aspect-ratio:1;border-radius:var(--r-5);overflow:hidden}

  .video-wrap{position:relative;aspect-ratio:16/9;border-radius:var(--r-8);overflow:hidden;border:var(--brd);background:#000}
  .video-wrap iframe,.video-wrap video{position:absolute;inset:0;inline-size:100%;block-size:100%;border:0}
  .video-play{position:absolute;inset:50% auto auto 50%;translate:-50% -50%;inline-size:72px;block-size:72px;border-radius:50%;
    background:var(--grad);display:grid;place-items:center;cursor:pointer;box-shadow:var(--sh-glow-strong);transition:transform var(--t-base) var(--ease-spring)}
  .video-play:hover{transform:translate(-50%,-50%) scale(1.08)}
  .video-play svg{inline-size:28px;block-size:28px;color:#04222e;margin-inline-start:3px}

  /* =================================================================
     34. DIVISORES DE SEÇÃO — ângulo e onda (SVG inline)
     ================================================================= */
  .div-angle{display:block;inline-size:100%;block-size:60px;line-height:0}
  .div-angle svg{inline-size:100%;block-size:100%;display:block}
  .div-angle path{fill:var(--c-ink-2)}
  .div-wave{display:block;inline-size:100%;block-size:80px;line-height:0}
  .div-wave svg{inline-size:100%;block-size:100%}
  .div-wave path{fill:var(--c-ink-2)}
  /* alternância de fundo entre seções (checklist LP) */
  .sec--alt{background:var(--c-ink-2)}
  .sec--alt + .sec--alt{background:var(--c-ink)}

  /* =================================================================
     35. TABELA ESTILIZADA (para conteúdo do site, ex.: cartas)
     ================================================================= */
  .table-wrap{overflow-x:auto;border:var(--brd);border-radius:var(--r-8);-webkit-overflow-scrolling:touch}
  .table{inline-size:100%;border-collapse:collapse;font-size:.92rem;min-inline-size:520px}
  .table thead th{text-align:start;padding:var(--fib-5) var(--fib-8);background:var(--c-ink-3);color:var(--c-cyan);
    font-weight:600;font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;position:sticky;inset-block-start:0}
  .table td{padding:var(--fib-5) var(--fib-8);border-block-start:var(--brd);color:var(--c-light)}
  .table tbody tr{transition:background var(--t-fast)}
  .table tbody tr:hover{background:color-mix(in srgb,var(--c-petrol) 8%,transparent)}
  .table tbody tr:nth-child(even){background:color-mix(in srgb,var(--c-ink-2) 40%,transparent)}
  .table .highlight{color:var(--c-cyan);font-weight:600}

  /* =================================================================
     36. BREADCRUMB + PAGINAÇÃO
     ================================================================= */
  .breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:var(--fib-2);font-size:.85rem;color:var(--c-mut)}
  .breadcrumb a{color:var(--c-mut);transition:color var(--t-fast)}
  .breadcrumb a:hover{color:var(--c-cyan)}
  .breadcrumb li{display:flex;align-items:center;gap:var(--fib-2)}
  .breadcrumb li:not(:last-child)::after{content:"/";color:var(--c-line)}
  .breadcrumb [aria-current]{color:var(--c-light)}

  .pagination{display:flex;gap:var(--fib-2);align-items:center;justify-content:center}
  .pagination a,.pagination span{min-inline-size:2.5rem;block-size:2.5rem;display:grid;place-items:center;
    border-radius:var(--r-3);border:var(--brd);color:var(--c-mut);font-weight:600;transition:.15s}
  .pagination a:hover{border-color:var(--brd-cyan);color:var(--c-cyan)}
  .pagination .current{background:var(--grad);color:#04222e;border:0}

  /* =================================================================
     37. ANEL DE PROGRESSO + CARTÕES DE ESTATÍSTICA
     ================================================================= */
  .ring{--p:0;inline-size:120px;block-size:120px;border-radius:50%;display:grid;place-items:center;
    background:conic-gradient(var(--c-cyan) calc(var(--p)*1%),var(--c-ink-3) 0)}
  .ring::before{content:"";position:absolute;inline-size:84px;block-size:84px;border-radius:50%;background:var(--c-ink-2)}
  .ring span{position:relative;font-weight:700;font-size:1.4rem;color:var(--c-white)}
  .ring-wrap{position:relative;display:inline-grid;place-items:center}

  .stat-card{background:var(--c-ink-2);border:var(--brd);border-radius:var(--r-8);padding:var(--fib-13);
    display:flex;flex-direction:column;gap:var(--fib-3);transition:transform var(--t-base),border-color var(--t-base)}
  .stat-card:hover{transform:translateY(-4px);border-color:var(--brd-cyan)}
  .stat-card__ico{inline-size:var(--fib-21);block-size:var(--fib-21);border-radius:var(--r-3);display:grid;place-items:center;
    background:color-mix(in srgb,var(--c-petrol) 20%,transparent);color:var(--c-cyan)}
  .stat-card__num{font-size:2rem;font-weight:700;color:var(--c-white);line-height:1}
  .stat-card__lbl{font-size:.86rem;color:var(--c-mut)}
  .stat-card__trend{font-size:.8rem;font-weight:600}
  .stat-card__trend.up{color:#25d366} .stat-card__trend.down{color:#ff5470}

  /* =================================================================
     38. ICON-BOX + NEWSLETTER + MARQUEE
     ================================================================= */
  .icon-box{display:flex;gap:var(--fib-5);align-items:flex-start}
  .icon-box__i{inline-size:var(--fib-34);block-size:var(--fib-34);flex:none;border-radius:var(--r-5);display:grid;place-items:center;
    background:var(--grad);color:#04222e;box-shadow:var(--sh-glow)}
  .icon-box__i svg{inline-size:26px;block-size:26px}
  .icon-box h3{margin-block-end:4px}
  .icon-box p{font-size:.92rem}

  .newsletter{display:flex;gap:var(--fib-3);flex-wrap:wrap}
  .newsletter input{flex:1;min-inline-size:200px;min-block-size:var(--fib-34);padding-inline:var(--fib-5);
    background:var(--c-ink);border:1px solid var(--c-line);border-radius:var(--r-full);color:var(--c-white)}
  .newsletter input:focus{outline:none;border-color:var(--c-cyan)}

  .marquee{overflow:hidden;white-space:nowrap;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
  .marquee__track{display:inline-flex;gap:var(--fib-21);animation:marquee 24s linear infinite}
  .marquee:hover .marquee__track{animation-play-state:paused}
  @keyframes marquee{to{transform:translateX(-50%)}}
}

@layer enhancements {
  /* =================================================================
     39. UTILITÁRIOS RESPONSIVOS — mostrar/ocultar, colunas, ordem
     ================================================================= */
  .hide{display:none!important}
  .show-flex{display:flex!important} .show-grid{display:grid!important} .show-block{display:block!important}
  @media(max-width:768px){
    .hide-mobile{display:none!important}
    .only-mobile{display:revert}
    .text-center-mobile{text-align:center!important}
    .full-mobile{inline-size:100%!important;max-inline-size:none!important}
    .order-first-mobile{order:-1}
    .stack-mobile{flex-direction:column!important}
    .center-mobile{justify-content:center!important;align-items:center!important}
  }
  @media(min-width:769px){.only-mobile{display:none!important}}
  @media(max-width:480px){.hide-xs{display:none!important}}
  @media(min-width:769px){.hide-desktop{display:none!important}}

  /* Colunas utilitárias */
  .cols-2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--fib-13)}
  .cols-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--fib-13)}
  .cols-4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--fib-13)}
  @media(max-width:1024px){.cols-4{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:768px){.cols-2,.cols-3,.cols-4{grid-template-columns:1fr}}
  .col-span-2{grid-column:span 2}
  @media(max-width:768px){.col-span-2{grid-column:auto}}

  /* Espaçamento vertical entre filhos (flow) */
  .flow > * + *{margin-block-start:var(--fib-8)}
  .flow-sm > * + *{margin-block-start:var(--fib-3)}
  .flow-lg > * + *{margin-block-start:var(--fib-13)}

  /* Posição/overflow/opacidade/z */
  .absolute{position:absolute} .fixed{position:fixed} .static{position:static}
  .inset-0{inset:0} .top-0{inset-block-start:0} .z-10{z-index:10} .z-40{z-index:40}
  .of-hidden{overflow:hidden} .of-auto{overflow:auto} .of-x-auto{overflow-x:auto}
  .op-0{opacity:0} .op-50{opacity:.5} .op-70{opacity:.7} .op-100{opacity:1}
  /* Transições/transform helpers */
  .transition{transition:all var(--t-base) var(--ease-out)}
  .hover-rise{transition:transform var(--t-base) var(--ease-out)}
  .hover-rise:hover{transform:translateY(-4px)}
  .hover-grow{transition:transform var(--t-base) var(--ease-spring)}
  .hover-grow:hover{transform:scale(1.04)}
  .hover-glow{transition:box-shadow var(--t-base)}
  .hover-glow:hover{box-shadow:var(--sh-glow)}

  /* Gap fluido responsivo */
  .gap-fluid{gap:clamp(var(--fib-5),3vw,var(--fib-21))}

  /* =================================================================
     40. PILLS / BADGES — variações de cor
     ================================================================= */
  .pill{display:inline-flex;align-items:center;gap:6px;padding:.3rem .75rem;border-radius:var(--r-full);font-size:.78rem;font-weight:600}
  .pill--cyan{color:var(--c-cyan);background:color-mix(in srgb,var(--c-cyan) 14%,transparent)}
  .pill--green{color:#7ff0a8;background:color-mix(in srgb,#25d366 16%,transparent)}
  .pill--amber{color:#ffcf7a;background:color-mix(in srgb,#ffb020 16%,transparent)}
  .pill--red{color:#ffb0bc;background:color-mix(in srgb,#ff5470 16%,transparent)}
  .pill--outline{background:transparent;border:1px solid currentColor}

  /* Blockquote de destaque */
  .blockquote{border-inline-start:3px solid var(--c-cyan);padding:var(--fib-5) var(--fib-13);
    background:color-mix(in srgb,var(--c-petrol) 8%,var(--c-ink-2));border-radius:0 var(--r-5) var(--r-5) 0;
    font-size:1.05rem;color:var(--c-light);font-style:italic}
  .blockquote cite{display:block;margin-block-start:var(--fib-3);font-size:.85rem;color:var(--c-mut);font-style:normal}

  /* Lista com ícone genérica */
  .icon-list{display:grid;gap:var(--fib-3)}
  .icon-list li{display:flex;align-items:flex-start;gap:var(--fib-3);color:var(--c-light);font-size:.95rem}
  .icon-list li svg{inline-size:20px;block-size:20px;color:var(--c-cyan);flex:none;margin-block-start:2px}
}

@layer enhancements {
  /* =================================================================
     41. POLIMENTO DO SITE REAL — ritmo, alternância, hero, cards
     ================================================================= */

  /* Alternância de fundo entre seções adjacentes (checklist LP) */
  #sobre{background:var(--c-ink)}
  #segmentos{background:var(--c-ink-2)}
  #como-funciona{background:var(--c-ink)}
  #seguros{background:var(--c-ink-2)}
  #depoimentos{background:var(--c-ink)}
  #faq{background:var(--c-ink-2)}
  #contato{background:var(--c-ink)}
  /* linha sutil de separação entre seções */
  section + section{position:relative}
  section.sec::before{content:"";position:absolute;inset-block-start:0;inset-inline:0;block-size:1px;
    background:var(--grad-line);opacity:.4;pointer-events:none}

  /* Cabeçalho de seção com respiro e limite de medida */
  .sec-head h2{max-inline-size:22ch}
  .sec-head.center h2{margin-inline:auto}

  /* Hero: leve gradiente por baixo do título e mais contraste na lead */
  .hero__lead{color:var(--c-light)}
  .hero h1 .txt-grad{text-shadow:0 0 40px rgba(105,218,255,.25)}

  /* Simulador: cabeçalho com ícone e saída com destaque melhor */
  .simu h3{display:flex;align-items:center;gap:var(--fib-3)}
  .simu__out{background:linear-gradient(180deg,color-mix(in srgb,var(--c-petrol) 10%,var(--c-ink)),var(--c-ink))}
  .simu__out .val{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
  .simu__out .val small{-webkit-text-fill-color:var(--c-mut)}

  /* Botão principal do simulador com brilho contínuo sutil */
  .simu .btn--grad{position:relative}
  .simu .btn--grad::after{content:"";position:absolute;inset:-2px;border-radius:inherit;z-index:-2;
    background:var(--grad);filter:blur(14px);opacity:.35;transition:opacity var(--t-base)}
  .simu .btn--grad:hover::after{opacity:.6}

  /* Cards de segmento: ícone maior e link mais visível */
  .seg-card .card__ico{background:linear-gradient(140deg,color-mix(in srgb,var(--c-petrol) 30%,var(--c-ink-3)),var(--c-ink-3))}
  .seg-card:hover{background:color-mix(in srgb,var(--c-petrol) 6%,var(--c-ink-2))}
  .card__link{font-weight:600}
  .card__link::after{content:"";position:absolute}

  /* Passos: número com fundo circular sutil */
  .step__n{filter:drop-shadow(0 4px 10px rgba(105,218,255,.25))}

  /* Vantagens (why): ícone dentro de caixa */
  .why__item > svg{padding:8px;box-sizing:content-box;border-radius:var(--r-3);
    background:color-mix(in srgb,var(--c-petrol) 18%,transparent);inline-size:22px;block-size:22px}

  /* FAQ: seta some/gira e resposta com leve indentação */
  .faq__a{padding-inline-start:var(--fib-13)}
  .faq__q{font-size:1.02rem}

  /* Contato: formulário com leve realce e labels mais legíveis */
  #contatoForm .field label{color:var(--c-light);font-weight:600}
  #contatoForm{box-shadow:var(--sh-3)}

  /* Footer: melhor separação e disclaimer mais legível */
  .site-foot{background:linear-gradient(180deg,var(--c-ink-2),var(--c-ink))}
  .foot__disc{padding-block-start:var(--fib-8);border-block-start:1px dashed var(--c-line);color:#7d94a3}
  .foot h4{position:relative;padding-block-end:var(--fib-3)}
  .foot h4::after{content:"";position:absolute;inset-block-end:0;inset-inline-start:0;inline-size:24px;block-size:2px;background:var(--grad);border-radius:2px}

  /* =================================================================
     42. MENU MOBILE — gaveta mais rica, overlay e itens animados
     ================================================================= */
  @media(max-width:900px){
    .nav__menu{box-shadow:var(--sh-4);border-radius:0 0 var(--r-8) var(--r-8);padding-block:var(--fib-8) var(--fib-13)}
    .nav__menu a{position:relative;padding-inline:var(--fib-3);border-radius:var(--r-3);transition:background var(--t-fast),color var(--t-fast),padding-inline-start var(--t-fast)}
    .nav__menu a:hover{background:color-mix(in srgb,var(--c-petrol) 12%,transparent);color:var(--c-white);padding-inline-start:var(--fib-8)}
    .nav__menu a::after{display:none}
    /* itens entram em sequência quando o menu abre */
    .nav__menu.open a{animation:fadeInDown .4s var(--ease-out) both}
    .nav__menu.open a:nth-child(1){animation-delay:.04s}
    .nav__menu.open a:nth-child(2){animation-delay:.08s}
    .nav__menu.open a:nth-child(3){animation-delay:.12s}
    .nav__menu.open a:nth-child(4){animation-delay:.16s}
    .nav__menu.open a:nth-child(5){animation-delay:.20s}
    .nav__menu.open a:nth-child(6){animation-delay:.24s}
    /* CTA "Simular" aparece dentro do menu no mobile */
    .nav__cta .btn--ghost{display:inline-flex}
  }

  /* Backdrop atrás do menu aberto */
  .nav-backdrop{position:fixed;inset:5rem 0 0 0;z-index:55;background:rgba(4,10,16,.5);backdrop-filter:blur(2px);
    opacity:0;visibility:hidden;transition:opacity var(--t-base),visibility var(--t-base)}
  .nav-backdrop.show{opacity:1;visibility:visible}
  @media(min-width:901px){.nav-backdrop{display:none}}
}

@layer enhancements {
  /* =================================================================
     43. PERFORMANCE — content-visibility para seções longas
     (renderiza só o que está perto da viewport)
     ================================================================= */
  #depoimentos,#faq,#seguros,#como-funciona{content-visibility:auto;contain-intrinsic-size:auto 640px}

  /* Otimização de composição para elementos animados */
  .card,.btn,.wa-float,.to-top,.hero::before,.hero::after,.txt-grad{will-change:auto}
  .is-animating{will-change:transform,opacity}

  /* =================================================================
     44. ANIMAÇÕES GUIADAS POR ROLAGEM (progressive enhancement)
     Só ativa em navegadores com animation-timeline; senão o
     IntersectionObserver do main.js cuida do reveal.
     ================================================================= */
  @supports (animation-timeline:view()){
    @media (prefers-reduced-motion:no-preference){
      .reveal-scroll{animation:revealUp linear both;animation-timeline:view();animation-range:entry 0% entry 60%}
      @keyframes revealUp{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
      /* barra de progresso de leitura via scroll timeline (fallback do JS continua válido) */
      .scroll-progress.auto{animation:growX linear;animation-timeline:scroll(root);transform:scaleX(0)}
      @keyframes growX{to{transform:scaleX(1)}}
      /* parallax leve no pattern do hero */
      .hero__pattern.parallax{animation:heroParallax linear;animation-timeline:scroll(root);animation-range:0 100vh}
      @keyframes heroParallax{to{transform:translateY(60px)}}
    }
  }

  /* =================================================================
     45. FUNDOS DECORATIVOS POR SEÇÃO — sutis, on-brand
     ================================================================= */
  #segmentos{position:relative;overflow:hidden}
  #segmentos::before{content:"";position:absolute;inset-block-start:-20%;inset-inline-end:-10%;inline-size:40vw;aspect-ratio:1;
    background:radial-gradient(circle,rgba(38,126,155,.14),transparent 65%);pointer-events:none;z-index:0}
  #segmentos .wrap{position:relative;z-index:1}
  #seguros{position:relative;overflow:hidden}
  #seguros::after{content:"";position:absolute;inset-block-end:-25%;inset-inline-start:-12%;inline-size:36vw;aspect-ratio:1;
    background:radial-gradient(circle,rgba(105,218,255,.1),transparent 65%);pointer-events:none;z-index:0}
  #seguros .wrap{position:relative;z-index:1}
  #faq{position:relative;overflow:hidden}
  #faq::before{content:"";position:absolute;inset:0;background:url("../img/pattern.webp") center/560px;opacity:.03;
    mix-blend-mode:screen;pointer-events:none}
  #faq .wrap{position:relative;z-index:1}
  #contato{position:relative;overflow:hidden}
  #contato::before{content:"";position:absolute;inset-block-start:-15%;inset-inline-start:50%;translate:-50% 0;
    inline-size:60vw;aspect-ratio:2/1;background:radial-gradient(ellipse,rgba(38,126,155,.12),transparent 60%);pointer-events:none}
  #contato .wrap{position:relative;z-index:1}

  /* =================================================================
     46. ESTADOS DE INTERAÇÃO — hover/active/focus consistentes
     ================================================================= */
  a:not(.btn):not(.nav__logo):not(.card__link):not(.foot__soc a){transition:color var(--t-fast)}
  .card__link{transition:gap var(--t-base),color var(--t-base)}
  .card:hover .card__link{gap:10px}

  /* Realce ao focar por teclado em blocos interativos */
  .card:focus-within{border-color:var(--brd-cyan);box-shadow:var(--sh-3)}
  .faq__i:focus-within{border-color:var(--brd-cyan)}
  .quote:focus-within{border-color:var(--brd-cyan)}

  /* Link "pulado" quando âncora recebe foco */
  :target{scroll-margin-block-start:6rem}
  section:target > .wrap > .sec-head h2{animation:pop .5s var(--ease-spring)}

  /* Cursor de progresso durante submit (JS adiciona .busy no body) */
  body.busy{cursor:progress}

  /* Placeholder animado nos inputs em foco */
  .field input:focus::placeholder,.field textarea:focus::placeholder{opacity:.5;transition:opacity var(--t-base)}

  /* Divisor com rótulo central ("ou") */
  .or-divider{display:flex;align-items:center;gap:var(--fib-5);color:var(--c-mut);font-size:.82rem;text-transform:uppercase;letter-spacing:.1em}
  .or-divider::before,.or-divider::after{content:"";flex:1;block-size:1px;background:var(--c-line)}
}

@layer enhancements {
  /* =================================================================
     47. UTILITÁRIOS DE COR / FUNDO / BORDA / SOMBRA / GRADIENTE
     ================================================================= */
  .bg-ink{background:var(--c-ink)} .bg-ink-2{background:var(--c-ink-2)} .bg-ink-3{background:var(--c-ink-3)}
  .bg-grad{background:var(--grad)} .bg-grad-soft{background:var(--grad-soft)}
  .bg-glass{background:var(--glass);backdrop-filter:blur(10px)}
  .bg-petrol{background:color-mix(in srgb,var(--c-petrol) 18%,var(--c-ink-2))}
  .text-grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
  .text-white{color:var(--c-white)} .text-light{color:var(--c-light)} .text-mut{color:var(--c-mut)} .text-cyan{color:var(--c-cyan)}
  .text-green{color:#25d366} .text-red{color:#ff5470} .text-amber{color:#ffb020}
  .border{border:var(--brd)} .border-soft{border:var(--brd-soft)} .border-cyan-c{border:var(--brd-cyan)}
  .border-t{border-block-start:var(--brd)} .border-b{border-block-end:var(--brd)}
  .no-border{border:0}
  .shadow-1{box-shadow:var(--sh-1)} .shadow-2{box-shadow:var(--sh-2)} .shadow-3{box-shadow:var(--sh-3)}
  .shadow-4{box-shadow:var(--sh-4)} .shadow-glow{box-shadow:var(--sh-glow)} .no-shadow{box-shadow:none}
  .radius-2{border-radius:var(--r-2)} .radius-3{border-radius:var(--r-3)} .radius-5{border-radius:var(--r-5)}
  .radius-8{border-radius:var(--r-8)} .radius-13{border-radius:var(--r-13)} .radius-full{border-radius:var(--r-full)}

  /* Escala completa de espaçamento (Fibonacci) — margin/padding lógicos */
  .m-0{margin:0}.m-1{margin:var(--fib-1)}.m-2{margin:var(--fib-2)}.m-3{margin:var(--fib-3)}
  .m-5{margin:var(--fib-5)}.m-8{margin:var(--fib-8)}.m-13{margin:var(--fib-13)}.m-21{margin:var(--fib-21)}
  .mt-8{margin-block-start:var(--fib-8)}.mt-13{margin-block-start:var(--fib-13)}
  .mbs-1{margin-block-start:var(--fib-1)}.mbs-2{margin-block-start:var(--fib-2)}.mbs-3{margin-block-start:var(--fib-3)}
  .mbs-5{margin-block-start:var(--fib-5)}.mbs-8{margin-block-start:var(--fib-8)}.mbs-13{margin-block-start:var(--fib-13)}
  .mbe-1{margin-block-end:var(--fib-1)}.mbe-2{margin-block-end:var(--fib-2)}.mbe-3{margin-block-end:var(--fib-3)}
  .mbe-5{margin-block-end:var(--fib-5)}.mbe-8{margin-block-end:var(--fib-8)}.mbe-13{margin-block-end:var(--fib-13)}
  .mi-auto{margin-inline:auto}
  .p-0{padding:0}.p-1{padding:var(--fib-1)}.p-2{padding:var(--fib-2)}.p-3{padding:var(--fib-3)}
  .p-13-u{padding:var(--fib-13)}.p-21-u{padding:var(--fib-21)}
  .pbs-8{padding-block-start:var(--fib-8)}.pbe-8{padding-block-end:var(--fib-8)}
  .pi-8{padding-inline:var(--fib-8)}.pi-13{padding-inline:var(--fib-13)}
  .pb-sec{padding-block:var(--pad-sec)}.pb-sec-lg{padding-block:var(--pad-sec-lg)}

  /* Espaço entre filhos (gap para não-grid) */
  .space-y-2 > * + *{margin-block-start:var(--fib-2)}
  .space-y-3 > * + *{margin-block-start:var(--fib-3)}
  .space-y-5 > * + *{margin-block-start:var(--fib-5)}
  .space-y-8 > * + *{margin-block-start:var(--fib-8)}
  .space-x-3 > * + *{margin-inline-start:var(--fib-3)}

  /* =================================================================
     48. CARTÕES EM VIDRO — variações premium
     ================================================================= */
  .glass-card{background:var(--glass);backdrop-filter:blur(14px) saturate(1.3);border:var(--brd-soft);
    border-radius:var(--r-8);padding:var(--fib-13);box-shadow:var(--sh-3);position:relative;overflow:hidden}
  .glass-card::before{content:"";position:absolute;inset-block-start:0;inset-inline:0;block-size:1px;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent)}
  .glass-card--cyan{border-color:var(--brd-cyan);box-shadow:var(--sh-glow)}
  .frosted{background:color-mix(in srgb,var(--c-ink-2) 55%,transparent);backdrop-filter:blur(20px);border:var(--brd-soft)}

  /* Cartão com brilho no topo */
  .top-glow{position:relative}
  .top-glow::before{content:"";position:absolute;inset-block-start:-1px;inset-inline:20%;block-size:2px;
    background:linear-gradient(90deg,transparent,var(--c-cyan),transparent);filter:blur(1px)}

  /* Gradiente de texto por classe (variações) */
  .grad-cyan{background:linear-gradient(45deg,#267e9b,#69daff);-webkit-background-clip:text;background-clip:text;color:transparent}
  .grad-warm{background:linear-gradient(45deg,#69daff,#9fe8ff);-webkit-background-clip:text;background-clip:text;color:transparent}
}

@layer enhancements {
  /* =================================================================
     49. FORMAS DECORATIVAS — blobs, grade de pontos, orbes
     ================================================================= */
  .blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.4;pointer-events:none;z-index:0}
  .blob--cyan{background:radial-gradient(circle,rgba(105,218,255,.4),transparent 70%)}
  .blob--petrol{background:radial-gradient(circle,rgba(38,126,155,.45),transparent 70%)}
  .blob--sm{inline-size:220px;block-size:220px} .blob--md{inline-size:360px;block-size:360px} .blob--lg{inline-size:520px;block-size:520px}
  .blob--float{animation:floatSlow 12s ease-in-out infinite}

  .dot-grid{position:absolute;inset:0;pointer-events:none;opacity:.25;z-index:0;
    background-image:radial-gradient(circle,color-mix(in srgb,var(--c-cyan) 30%,transparent) 1px,transparent 1px);
    background-size:26px 26px;-webkit-mask-image:radial-gradient(ellipse at center,#000,transparent 75%);mask-image:radial-gradient(ellipse at center,#000,transparent 75%)}

  .orb{position:absolute;border-radius:50%;background:var(--grad);filter:blur(2px);opacity:.5;pointer-events:none}
  .grid-lines{position:absolute;inset:0;pointer-events:none;opacity:.08;z-index:0;
    background-image:linear-gradient(var(--c-line) 1px,transparent 1px),linear-gradient(90deg,var(--c-line) 1px,transparent 1px);
    background-size:60px 60px;-webkit-mask-image:linear-gradient(180deg,#000,transparent);mask-image:linear-gradient(180deg,#000,transparent)}

  /* =================================================================
     50. UTILITÁRIOS DE HOVER / TRANSIÇÃO / DELAY
     ================================================================= */
  .hv-up:hover{transform:translateY(-6px)} .hv-up{transition:transform var(--t-base) var(--ease-out)}
  .hv-down:hover{transform:translateY(3px)} .hv-down{transition:transform var(--t-fast)}
  .hv-scale:hover{transform:scale(1.05)} .hv-scale{transition:transform var(--t-base) var(--ease-spring)}
  .hv-rotate:hover{transform:rotate(3deg)} .hv-rotate{transition:transform var(--t-base)}
  .hv-bright:hover{filter:brightness(1.15)} .hv-bright{transition:filter var(--t-base)}
  .hv-border:hover{border-color:var(--c-cyan)} .hv-border{transition:border-color var(--t-base)}
  .hv-shadow:hover{box-shadow:var(--sh-4)} .hv-shadow{transition:box-shadow var(--t-base)}
  .hv-cyan:hover{color:var(--c-cyan)} .hv-cyan{transition:color var(--t-fast)}
  .hv-underline{background-image:linear-gradient(var(--c-cyan),var(--c-cyan));background-size:0% 2px;
    background-position:0 100%;background-repeat:no-repeat;transition:background-size var(--t-base)}
  .hv-underline:hover{background-size:100% 2px}
  .td-0{transition-delay:0s}.td-1{transition-delay:.1s}.td-2{transition-delay:.2s}.td-3{transition-delay:.3s}
  .td-4{transition-delay:.4s}.td-5{transition-delay:.5s}.td-6{transition-delay:.6s}
  .dur-fast{transition-duration:var(--t-fast)}.dur-base{transition-duration:var(--t-base)}.dur-slow{transition-duration:var(--t-slow)}
  .ease-out-u{transition-timing-function:var(--ease-out)}.ease-spring-u{transition-timing-function:var(--ease-spring)}

  /* =================================================================
     51. EFEITOS — borda gradiente animada, brilho conic, sublinhado
     ================================================================= */
  .anim-border{position:relative;isolation:isolate;border-radius:var(--r-8)}
  .anim-border::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;padding:1.5px;
    background:conic-gradient(from var(--a,0deg),var(--c-cyan),var(--c-petrol),var(--c-cyan));
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
    animation:spinBorder 5s linear infinite}
  @property --a{syntax:"<angle>";inherits:false;initial-value:0deg}
  @keyframes spinBorder{to{--a:360deg}}

  .conic-glow{position:relative}
  .conic-glow::after{content:"";position:absolute;inset:-40%;z-index:-1;border-radius:50%;
    background:conic-gradient(from 0deg,transparent,rgba(105,218,255,.25),transparent 40%);
    animation:spin 8s linear infinite;filter:blur(30px)}

  .link-underline{position:relative}
  .link-underline::after{content:"";position:absolute;inset-block-end:-2px;inset-inline:0;block-size:2px;
    background:var(--grad);transform:scaleX(0);transform-origin:0 50%;transition:transform var(--t-base) var(--ease-out)}
  .link-underline:hover::after{transform:scaleX(1)}

  /* Highlight de texto (marca-texto) */
  .mark{background:linear-gradient(120deg,transparent 0,color-mix(in srgb,var(--c-cyan) 22%,transparent) 0);
    background-size:100% 40%;background-position:0 90%;background-repeat:no-repeat;padding-inline:2px}
}

@layer enhancements {
  /* =================================================================
     52. I18N / RTL — pronto para direção invertida (propriedades lógicas)
     ================================================================= */
  [dir="rtl"] .card__link svg,[dir="rtl"] .btn .arrow{transform:scaleX(-1)}
  [dir="rtl"] .step:not(:last-child)::after{inset-inline-start:auto;inset-inline-end:3.4rem}
  [dir="rtl"] .foot ul a::before{inset-inline-start:auto;inset-inline-end:-12px}
  [dir="rtl"] .breadcrumb li:not(:last-child)::after{content:"\\"}
  /* Já usamos margin-inline/inset-inline em todo o arquivo, então o espelhamento é automático */

  /* =================================================================
     53. FORCED COLORS (modo alto contraste do Windows) e reduced data
     ================================================================= */
  @media (forced-colors:active){
    .btn,.card,.simu,.quote,.faq__i,.info-item .ii{border:1px solid CanvasText}
    .txt-grad,.text-grad,.grad-cyan{-webkit-text-fill-color:CanvasText;color:CanvasText}
    .card::before,.card::after,.cta::before{display:none}
    .wa-float{border:2px solid CanvasText}
  }
  @media (prefers-reduced-data:reduce){
    .hero__pattern,.cta::after,#faq::before,.noise::after{background-image:none!important}
    .hero::before,.hero::after,.blob,.conic-glow::after{display:none!important}
  }

  /* =================================================================
     54. COMPONENTES DE CONSÓRCIO — destaque de valor, faixa, prova
     ================================================================= */
  .price-tag{display:inline-flex;align-items:baseline;gap:6px}
  .price-tag .cur{font-size:1rem;color:var(--c-mut);font-weight:600}
  .price-tag .amount{font-size:2.4rem;font-weight:700;color:var(--c-white);line-height:1;font-variant-numeric:tabular-nums}
  .price-tag .per{font-size:.9rem;color:var(--c-mut)}
  .price-tag--grad .amount{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

  /* Faixa/ribbon "sem juros" no canto de um card */
  .ribbon{position:absolute;inset-block-start:14px;inset-inline-end:-34px;transform:rotate(45deg);
    background:var(--grad);color:#04222e;font-size:.72rem;font-weight:700;letter-spacing:.05em;
    padding:.3rem 2.6rem;box-shadow:var(--sh-2)}
  .ribbon-wrap{position:relative;overflow:hidden}

  /* Barra de prova social (números da empresa) */
  .proof{display:flex;flex-wrap:wrap;gap:var(--fib-13) var(--fib-34);align-items:center;justify-content:center}
  .proof__i{text-align:center}
  .proof__n{font-size:clamp(1.6rem,1.2rem+1.4vw,2.4rem);font-weight:700;color:var(--c-white);line-height:1}
  .proof__l{font-size:.82rem;color:var(--c-mut);margin-block-start:4px}

  /* Selo circular de confiança (BACEN) */
  .seal{inline-size:88px;block-size:88px;border-radius:50%;display:grid;place-items:center;text-align:center;
    font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--c-cyan);
    border:2px dashed var(--brd-cyan);background:color-mix(in srgb,var(--c-petrol) 12%,transparent);padding:var(--fib-3)}

  /* Passo de simulação com destaque do resultado */
  .result-card{background:linear-gradient(160deg,color-mix(in srgb,var(--c-petrol) 16%,var(--c-ink-2)),var(--c-ink-2));
    border:var(--brd-cyan);border-radius:var(--r-8);padding:var(--fib-13);box-shadow:var(--sh-glow);text-align:center}
  .result-card .label{font-size:.85rem;color:var(--c-mut);text-transform:uppercase;letter-spacing:.08em}
  .result-card .big{font-size:2.6rem;font-weight:700;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1.1}
  .result-card .sub{font-size:.86rem;color:var(--c-mut);margin-block-start:var(--fib-3)}
}

@layer enhancements {
  /* =================================================================
     55. LOADERS ANIMADOS — pontos, barras, pulso
     ================================================================= */
  .dots-loader{display:inline-flex;gap:6px}
  .dots-loader i{inline-size:8px;block-size:8px;border-radius:50%;background:var(--c-cyan);animation:dotBounce 1.2s ease-in-out infinite}
  .dots-loader i:nth-child(2){animation-delay:.15s} .dots-loader i:nth-child(3){animation-delay:.3s}
  @keyframes dotBounce{0%,80%,100%{transform:scale(.6);opacity:.5}40%{transform:scale(1);opacity:1}}

  .bars-loader{display:inline-flex;gap:4px;align-items:flex-end;block-size:24px}
  .bars-loader i{inline-size:4px;background:var(--c-cyan);border-radius:2px;animation:barScale 1s ease-in-out infinite}
  .bars-loader i:nth-child(2){animation-delay:.1s}.bars-loader i:nth-child(3){animation-delay:.2s}.bars-loader i:nth-child(4){animation-delay:.3s}
  @keyframes barScale{0%,100%{block-size:8px}50%{block-size:24px}}

  .pulse-loader{inline-size:40px;block-size:40px;border-radius:50%;background:var(--grad);animation:pulseScale 1.2s ease-in-out infinite}
  @keyframes pulseScale{0%{transform:scale(.7);opacity:.7}50%{transform:scale(1);opacity:1}100%{transform:scale(.7);opacity:.7}}

  .progress-line{block-size:3px;background:var(--c-ink-3);border-radius:99px;overflow:hidden}
  .progress-line::after{content:"";display:block;block-size:100%;inline-size:40%;background:var(--grad);border-radius:99px;
    animation:indeterminate 1.4s ease-in-out infinite}
  @keyframes indeterminate{0%{transform:translateX(-100%)}100%{transform:translateX(320%)}}

  /* =================================================================
     56. UTILITÁRIOS DE GRID / ASPECTO / POSIÇÃO (final)
     ================================================================= */
  .grid-cols-auto{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
  .grid-cols-2u{grid-template-columns:repeat(2,1fr)}
  .grid-cols-3u{grid-template-columns:repeat(3,1fr)}
  .grid-cols-4u{grid-template-columns:repeat(4,1fr)}
  .grid-cols-12{grid-template-columns:repeat(12,1fr)}
  .span-3{grid-column:span 3}.span-4{grid-column:span 4}.span-6{grid-column:span 6}.span-8{grid-column:span 8}
  @media(max-width:768px){.span-3,.span-4,.span-6,.span-8{grid-column:1/-1}}
  .items-stretch{align-items:stretch}.self-center{align-self:center}.self-start{align-self:start}
  .justify-items-center{justify-items:center}
  .aspect-square{aspect-ratio:1}.aspect-video{aspect-ratio:16/9}.aspect-portrait{aspect-ratio:3/4}.aspect-wide{aspect-ratio:21/9}
  .object-cover{object-fit:cover}.object-contain{object-fit:contain}
  .top-auto{inset-block-start:auto}.bottom-0{inset-block-end:0}.start-0{inset-inline-start:0}.end-0{inset-inline-end:0}
  .z-header-u{z-index:var(--z-header)}.z-float-u{z-index:var(--z-float)}.z-modal-u{z-index:var(--z-modal)}
  .pointer-none{pointer-events:none}.pointer-auto{pointer-events:auto}
  .isolate{isolation:isolate}.contain-paint{contain:paint}

  /* =================================================================
     57. ACESSIBILIDADE FINAL — foco visível universal, aria-live
     ================================================================= */
  [tabindex]:focus-visible,summary:focus-visible,[role="button"]:focus-visible{
    outline:2px solid var(--c-cyan);outline-offset:3px;border-radius:6px}
  [aria-busy="true"]{cursor:progress;opacity:.7}
  [aria-live]{min-block-size:1px}
  [hidden]{display:none!important}
  .visually-hidden{position:absolute!important;inline-size:1px;block-size:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  /* aumenta área clicável de rótulos de formulário */
  label{cursor:pointer}
  /* estado desabilitado consistente */
  :disabled,[aria-disabled="true"]{opacity:.5;cursor:not-allowed;pointer-events:none}
  /* leitura confortável para blocos de texto longos */
  .readable{max-inline-size:var(--w-prose);line-height:1.75}
}

@layer enhancements {
  /* =================================================================
     58. ESCALA TIPOGRÁFICA FLUIDA — classes utilitárias (clamp)
     ================================================================= */
  .display-1{font-size:clamp(2.6rem,1.6rem+4.6vw,4.6rem);font-weight:700;line-height:1.02;letter-spacing:-.02em}
  .display-2{font-size:clamp(2.1rem,1.4rem+3.4vw,3.6rem);font-weight:700;line-height:1.06;letter-spacing:-.02em}
  .h1{font-size:clamp(1.9rem,1.3rem+2.6vw,3rem);font-weight:700;line-height:1.1}
  .h2u{font-size:clamp(1.6rem,1.1rem+2vw,2.6rem);font-weight:700;line-height:1.12}
  .h3u{font-size:clamp(1.2rem,1rem+.8vw,1.5rem);font-weight:600;line-height:1.2}
  .h4u{font-size:clamp(1.05rem,.98rem+.4vw,1.25rem);font-weight:600}
  .body-lg{font-size:clamp(1.05rem,1rem+.4vw,1.25rem);line-height:1.7}
  .body{font-size:1rem;line-height:1.65}
  .body-sm{font-size:.9rem;line-height:1.6}
  .caption{font-size:.78rem;color:var(--c-mut);letter-spacing:.02em}
  .overline{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.16em;color:var(--c-cyan)}
  .balance{text-wrap:balance}.pretty{text-wrap:pretty}
  .tabular{font-variant-numeric:tabular-nums}

  /* Eyebrow variações */
  .eyebrow--center{justify-content:center}
  .eyebrow--dot::before{inline-size:8px;block-size:8px;border-radius:50%;background:var(--c-cyan)}
  .eyebrow--boxed{padding:.3rem .7rem;border:1px solid var(--brd-cyan);border-radius:var(--r-full);
    background:color-mix(in srgb,var(--c-petrol) 12%,transparent)}
  .eyebrow--boxed::before{display:none}

  /* =================================================================
     59. BOTÕES — variações extras
     ================================================================= */
  .btn--outline-cyan{background:transparent;border:1px solid var(--c-cyan);color:var(--c-cyan)}
  .btn--outline-cyan:hover{background:color-mix(in srgb,var(--c-cyan) 14%,transparent)}
  .btn--soft{background:color-mix(in srgb,var(--c-petrol) 22%,var(--c-ink-2));color:var(--c-white);border:var(--brd)}
  .btn--soft:hover{border-color:var(--brd-cyan)}
  .btn--link{background:transparent;color:var(--c-cyan);min-height:auto;padding:0;border-radius:0}
  .btn--link:hover{transform:none;text-decoration:underline;text-underline-offset:4px}
  .btn--wa-outline{background:transparent;border:1px solid #25d366;color:#25d366}
  .btn--wa-outline:hover{background:color-mix(in srgb,#25d366 14%,transparent)}
  .btn--grad-border{position:relative;background:var(--c-ink-2);color:var(--c-white);isolation:isolate}
  .btn--grad-border::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;padding:1px;
    background:var(--grad);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
  .btn--pill{border-radius:var(--r-full)}
  .btn--wide{padding-inline:var(--fib-55)}

  /* =================================================================
     60. CARTÕES — variações extras (horizontal, feature, destaque)
     ================================================================= */
  .card--h{display:grid;grid-template-columns:auto 1fr;gap:var(--fib-8);align-items:center}
  @media(max-width:480px){.card--h{grid-template-columns:1fr}}
  .card--feature{text-align:center}
  .card--feature .card__ico{margin-inline:auto}
  .card--outline{background:transparent;border:var(--brd)}
  .card--gradient{background:linear-gradient(160deg,color-mix(in srgb,var(--c-petrol) 18%,var(--c-ink-2)),var(--c-ink-2))}
  .card--flat{box-shadow:none;border:var(--brd-soft)}
  .card--flat:hover{box-shadow:var(--sh-2)}
  .card--interactive{cursor:pointer}
  .card--interactive:active{transform:translateY(-2px) scale(.99)}
  .card__top{display:flex;align-items:center;justify-content:space-between;gap:var(--fib-5);margin-block-end:var(--fib-8)}
  .card__foot{margin-block-start:var(--fib-8);padding-block-start:var(--fib-5);border-block-start:var(--brd-soft);
    display:flex;align-items:center;justify-content:space-between;gap:var(--fib-3)}
}

@layer enhancements {
  /* =================================================================
     61. LISTAS ESTILIZADAS — numerada, checklist, passos inline
     ================================================================= */
  .list-num{counter-reset:li;display:grid;gap:var(--fib-5)}
  .list-num li{counter-increment:li;display:flex;gap:var(--fib-5);align-items:flex-start;color:var(--c-light)}
  .list-num li::before{content:counter(li);flex:none;inline-size:1.9rem;block-size:1.9rem;border-radius:50%;
    display:grid;place-items:center;background:var(--grad);color:#04222e;font-weight:700;font-size:.9rem}
  .list-check{display:grid;gap:var(--fib-3)}
  .list-check li{display:flex;gap:var(--fib-3);align-items:flex-start;color:var(--c-light);font-size:.95rem}
  .list-check li::before{content:"";flex:none;inline-size:20px;block-size:20px;margin-block-start:1px;
    background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%2369daff' stroke-width='2.5'%3E%3Cpath d='M4 10l4 4 8-8'/%3E%3C/svg%3E")}
  .list-x li::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%23ff7a8a' stroke-width='2.5'%3E%3Cpath d='M5 5l10 10M15 5L5 15'/%3E%3C/svg%3E")}
  .steps-inline{display:flex;flex-wrap:wrap;gap:var(--fib-3);align-items:center;color:var(--c-mut);font-size:.9rem}
  .steps-inline .sep{color:var(--c-line)}

  /* Estado vazio */
  .empty{text-align:center;padding:var(--fib-34) var(--fib-13);color:var(--c-mut)}
  .empty__ico{inline-size:var(--fib-55);block-size:var(--fib-55);margin-inline:auto;margin-block-end:var(--fib-8);
    border-radius:50%;display:grid;place-items:center;background:var(--c-ink-3);color:var(--c-line)}
  .empty__ico svg{inline-size:36px;block-size:36px}
  .empty h3{color:var(--c-light);margin-block-end:var(--fib-3)}

  /* =================================================================
     62. SCROLL-SNAP — carrosséis utilitários
     ================================================================= */
  .snap-x{display:flex;gap:var(--fib-8);overflow-x:auto;scroll-snap-type:x mandatory;
    scroll-padding-inline:var(--fib-8);padding-block-end:var(--fib-5);scrollbar-width:none}
  .snap-x::-webkit-scrollbar{display:none}
  .snap-x > *{scroll-snap-align:start;flex:0 0 auto}
  .snap-item-80{inline-size:80%}.snap-item-60{inline-size:60%}.snap-item-40{inline-size:40%}
  @media(min-width:769px){.snap-item-40{inline-size:calc(33.333% - var(--fib-8))}}

  /* Indicadores de carrossel (bolinhas) */
  .dots{display:flex;gap:var(--fib-2);justify-content:center;margin-block-start:var(--fib-8)}
  .dots button{inline-size:8px;block-size:8px;border-radius:50%;border:0;background:var(--c-line);cursor:pointer;transition:.2s;padding:0}
  .dots button.active{inline-size:22px;border-radius:99px;background:var(--grad)}

  /* =================================================================
     63. AJUSTES RESPONSIVOS DE ESPAÇO — padding/gap fluidos por bp
     ================================================================= */
  @media(max-width:768px){
    .p-13,.p-13-u,.p-21-u,.card,.glass-card,.simu{padding:var(--fib-8)}
    .flow > * + *{margin-block-start:var(--fib-5)}
    .gap-21{gap:var(--fib-13)}.gap-13{gap:var(--fib-8)}
    .display-1,.display-2{letter-spacing:-.01em}
    .versus{gap:var(--fib-8)}
  }
  @media(max-width:480px){
    .p-21,.p-21-u{padding:var(--fib-5)}
    .sec-head{margin-block-end:var(--fib-8)}
    .plans,.cols-3,.cols-4{gap:var(--fib-8)}
  }

  /* Espaçadores verticais rápidos */
  .spacer-8{block-size:var(--fib-8)}.spacer-13{block-size:var(--fib-13)}.spacer-21{block-size:var(--fib-21)}
  .spacer-34{block-size:var(--fib-34)}.spacer-55{block-size:var(--fib-55)}
}

@layer enhancements {
  /* =================================================================
     64. FUNDOS COM GRADIENTE ANIMADO (aurora sutil, on-brand)
     ================================================================= */
  .aurora{position:relative;overflow:hidden;isolation:isolate}
  .aurora::before{content:"";position:absolute;inset:-30%;z-index:-1;
    background:conic-gradient(from 0deg at 50% 50%,rgba(38,126,155,.18),rgba(105,218,255,.12),rgba(14,20,26,0),rgba(38,126,155,.18));
    filter:blur(60px);animation:spin 24s linear infinite}
  .mesh-bg{background:
    radial-gradient(at 20% 20%,rgba(38,126,155,.18),transparent 45%),
    radial-gradient(at 80% 30%,rgba(105,218,255,.12),transparent 45%),
    radial-gradient(at 50% 90%,rgba(38,126,155,.14),transparent 45%),var(--c-ink)}
  .stripe-bg{background:repeating-linear-gradient(45deg,transparent,transparent 12px,color-mix(in srgb,var(--c-line) 40%,transparent) 12px,color-mix(in srgb,var(--c-line) 40%,transparent) 13px)}

  /* Realce animado do gradiente de marca */
  .bg-grad-anim{background:linear-gradient(120deg,var(--c-petrol),var(--c-cyan),var(--c-petrol));
    background-size:200% 200%;animation:gradShift 6s ease infinite}

  /* =================================================================
     65. SEPARADORES E DECORAÇÃO DE SEÇÃO
     ================================================================= */
  .sep-dot{display:flex;align-items:center;justify-content:center;gap:var(--fib-3);color:var(--c-line)}
  .sep-dot::before,.sep-dot::after{content:"";block-size:1px;inline-size:min(30%,120px);background:var(--grad-line)}
  .sep-dot i{inline-size:6px;block-size:6px;border-radius:50%;background:var(--c-cyan)}
  .corner-accent{position:relative}
  .corner-accent::before,.corner-accent::after{content:"";position:absolute;inline-size:22px;block-size:22px;border:2px solid var(--c-cyan);opacity:.6}
  .corner-accent::before{inset-block-start:0;inset-inline-start:0;border-inline-end:0;border-block-end:0}
  .corner-accent::after{inset-block-end:0;inset-inline-end:0;border-inline-start:0;border-block-start:0}

  /* Número grande de seção (marca d'água) */
  .watermark-n{position:absolute;inset-block-start:-.3em;inset-inline-end:0;font-size:12rem;font-weight:800;line-height:1;
    color:color-mix(in srgb,var(--c-line) 40%,transparent);pointer-events:none;z-index:0;user-select:none}

  /* =================================================================
     66. UTILITÁRIOS FINAIS + POLIMENTO GLOBAL
     ================================================================= */
  .filter-grad{filter:grayscale(1) opacity(.6);transition:filter var(--t-base)}
  .filter-grad:hover{filter:none}
  .backdrop-blur{backdrop-filter:blur(10px)}
  .backdrop-blur-lg{backdrop-filter:blur(20px) saturate(1.2)}
  .rotate-45{transform:rotate(45deg)}.rotate-90{transform:rotate(90deg)}.rotate-180{transform:rotate(180deg)}
  .flip-x{transform:scaleX(-1)}.flip-y{transform:scaleY(-1)}
  .cursor-pointer{cursor:pointer}.cursor-default{cursor:default}
  .select-none{user-select:none}.select-all{user-select:all}
  .whitespace-nowrap{white-space:nowrap}.break-word{overflow-wrap:anywhere}
  .list-reset{list-style:none;margin:0;padding:0}
  .decoration-none{text-decoration:none}
  .align-middle{vertical-align:middle}
  .full-bleed{inline-size:100vw;margin-inline:calc(50% - 50vw)}
  .contain-content{contain:content}

  /* Melhora leve de contraste em texto secundário sobre fundo escuro */
  .sec p,.card p,.quote p{color:color-mix(in srgb,var(--c-mut) 92%,var(--c-light))}

  /* Garante que imagens de logo nunca estourem em telas pequenas */
  .nav__logo img,.foot__logo{max-block-size:48px;object-fit:contain}

  /* Suaviza a transição de foco entre âncoras */
  html{scroll-padding-block-start:5.5rem}

  /* Botão flutuante não cobre conteúdo em telas muito baixas */
  @media(max-height:480px){.wa-float,.to-top{transform:scale(.85)}}

  /* Ajuste fino: espaço extra no fim do corpo para respiro */
  .site-foot{margin-block-start:0}
}
/* ===================== FIM enhancements.css ===================== */

@layer enhancements {
  /* =================================================================
     67. ANIMAÇÕES DE REVELAÇÃO EXTRAS — clip, flip, slide, blur
     ================================================================= */
  @keyframes clipUp{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
  @keyframes clipLeft{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
  @keyframes flipInX{from{opacity:0;transform:perspective(600px) rotateX(-25deg)}to{opacity:1;transform:none}}
  @keyframes slideInUp{from{opacity:0;transform:translateY(60px)}to{opacity:1;transform:none}}
  @keyframes slideInScale{from{opacity:0;transform:translateY(30px) scale(.96)}to{opacity:1;transform:none}}
  @keyframes blurIn{from{opacity:0;filter:blur(12px)}to{opacity:1;filter:blur(0)}}
  @keyframes revealText{from{opacity:0;transform:translateY(.4em)}to{opacity:1;transform:none}}

  .rv-clip{animation:clipUp var(--t-slower) var(--ease-out) both}
  .rv-clip-l{animation:clipLeft var(--t-slower) var(--ease-out) both}
  .rv-flip{animation:flipInX var(--t-slower) var(--ease-out) both}
  .rv-slide{animation:slideInUp var(--t-slower) var(--ease-out) both}
  .rv-scale{animation:slideInScale var(--t-slow) var(--ease-out) both}
  .rv-blur{animation:blurIn var(--t-slow) var(--ease-out) both}

  /* Revelação por palavra/linha quando o pai recebe .in */
  [data-words].in > *{animation:revealText var(--t-slow) var(--ease-out) both}
  [data-words].in > *:nth-child(1){animation-delay:.05s}
  [data-words].in > *:nth-child(2){animation-delay:.12s}
  [data-words].in > *:nth-child(3){animation-delay:.19s}
  [data-words].in > *:nth-child(4){animation-delay:.26s}
  [data-words].in > *:nth-child(5){animation-delay:.33s}

  /* Cursor de digitação (typewriter) */
  .typewriter{border-inline-end:2px solid var(--c-cyan);white-space:nowrap;overflow:hidden;animation:caret .8s step-end infinite}
  @keyframes caret{50%{border-color:transparent}}

  /* =================================================================
     68. CAMPOS DE FORMULÁRIO — variações de tamanho e com ícone
     ================================================================= */
  .field--sm input,.field--sm select{min-block-size:2.6rem;font-size:.9rem}
  .field--lg input,.field--lg select{min-block-size:3.6rem;font-size:1.05rem}
  .field--icon{position:relative}
  .field--icon > svg{position:absolute;inset-block-start:2.35rem;inset-inline-start:var(--fib-5);inline-size:20px;block-size:20px;color:var(--c-mut);pointer-events:none}
  .field--icon input{padding-inline-start:2.9rem}
  .field-hint{font-size:.78rem;color:var(--c-mut);margin-block-start:6px}
  .field-required{color:#ff7a8a}
  .field-optional{color:var(--c-mut);font-weight:400;font-size:.8rem}

  /* Grupo de opções (segmentos) em pílulas */
  .option-pills{display:flex;flex-wrap:wrap;gap:var(--fib-2)}
  .option-pill{padding:var(--fib-3) var(--fib-8);border:var(--brd);border-radius:var(--r-full);cursor:pointer;
    font-size:.9rem;color:var(--c-mut);background:var(--c-ink);transition:.2s}
  .option-pill:hover{border-color:var(--brd-cyan);color:var(--c-light)}
  .option-pill[aria-pressed=true]{background:var(--grad);color:#04222e;border-color:transparent;font-weight:600}

  /* =================================================================
     69. STATUS / SELOS — cores semânticas
     ================================================================= */
  .status{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;font-weight:600}
  .status::before{content:"";inline-size:8px;block-size:8px;border-radius:50%}
  .status--on{color:#7ff0a8}.status--on::before{background:#25d366;box-shadow:0 0 8px #25d366}
  .status--off{color:var(--c-mut)}.status--off::before{background:var(--c-line)}
  .status--warn{color:#ffcf7a}.status--warn::before{background:#ffb020}
  .tag{display:inline-block;font-size:.72rem;font-weight:600;padding:.25rem .6rem;border-radius:var(--r-2);
    background:var(--c-ink-3);color:var(--c-light);border:var(--brd-soft)}
  .tag--cyan{color:var(--c-cyan);border-color:var(--brd-cyan);background:color-mix(in srgb,var(--c-petrol) 14%,transparent)}

  /* =================================================================
     70. ALIASES SEMÂNTICOS + FECHAMENTO
     ================================================================= */
  .surface-card{background:var(--c-ink-2);border:var(--brd);border-radius:var(--r-8);padding:var(--fib-13)}
  .surface-raised{background:var(--c-ink-3);border:var(--brd);border-radius:var(--r-8);box-shadow:var(--sh-3)}
  .interactive{transition:transform var(--t-base) var(--ease-out),box-shadow var(--t-base),border-color var(--t-base)}
  .interactive:hover{transform:translateY(-4px);box-shadow:var(--sh-3);border-color:var(--brd-cyan)}
  .clickable{cursor:pointer;user-select:none}
  .clickable:active{transform:scale(.98)}
  .muted-hover{color:var(--c-mut);transition:color var(--t-fast)}
  .muted-hover:hover{color:var(--c-white)}
  .center-abs{position:absolute;inset:50% auto auto 50%;translate:-50% -50%}
  .stretch{position:absolute;inset:0}
  .fit-cover{inline-size:100%;block-size:100%;object-fit:cover}
  .grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
  .glow-text{text-shadow:0 0 24px rgba(105,218,255,.4)}
}
/* ============ enhancements.css concluído — camada isolada ============ */

@layer enhancements {
  /* =================================================================
     71. DIMENSIONAMENTO — largura, altura, min/max (lógicos)
     ================================================================= */
  .w-auto{inline-size:auto}.w-25{inline-size:25%}.w-33{inline-size:33.333%}.w-50{inline-size:50%}
  .w-66{inline-size:66.666%}.w-75{inline-size:75%}.w-100{inline-size:100%}
  .maxw-100{max-inline-size:100%}.maxw-320{max-inline-size:320px}.maxw-420{max-inline-size:420px}
  .maxw-560{max-inline-size:560px}.maxw-720{max-inline-size:720px}.maxw-960{max-inline-size:960px}.maxw-1180{max-inline-size:1180px}
  .minw-0{min-inline-size:0}.minw-200{min-inline-size:200px}
  .h-auto{block-size:auto}.h-100{block-size:100%}.h-full-v{block-size:100dvh}.minh-100{min-block-size:100%}
  .minh-screen{min-block-size:100dvh}.minh-half{min-block-size:50dvh}
  .basis-0{flex-basis:0}.basis-auto{flex-basis:auto}.basis-half{flex-basis:50%}
  .grow{flex-grow:1}.grow-0{flex-grow:0}.shrink-0{flex-shrink:0}

  /* =================================================================
     72. ESPAÇAMENTO DIRECIONAL COMPLETO (lógico, escala Fibonacci)
     ================================================================= */
  .pt-0{padding-block-start:0}.pt-3{padding-block-start:var(--fib-3)}.pt-5{padding-block-start:var(--fib-5)}
  .pt-8{padding-block-start:var(--fib-8)}.pt-13{padding-block-start:var(--fib-13)}.pt-21{padding-block-start:var(--fib-21)}.pt-34{padding-block-start:var(--fib-34)}
  .pb-0{padding-block-end:0}.pb-3{padding-block-end:var(--fib-3)}.pb-5{padding-block-end:var(--fib-5)}
  .pb-8{padding-block-end:var(--fib-8)}.pb-13{padding-block-end:var(--fib-13)}.pb-21{padding-block-end:var(--fib-21)}.pb-34{padding-block-end:var(--fib-34)}
  .ps-3{padding-inline-start:var(--fib-3)}.ps-5{padding-inline-start:var(--fib-5)}.ps-8{padding-inline-start:var(--fib-8)}
  .pe-3{padding-inline-end:var(--fib-3)}.pe-5{padding-inline-end:var(--fib-5)}.pe-8{padding-inline-end:var(--fib-8)}
  .px-3{padding-inline:var(--fib-3)}.px-5{padding-inline:var(--fib-5)}.px-13{padding-inline:var(--fib-13)}.px-21{padding-inline:var(--fib-21)}
  .py-3{padding-block:var(--fib-3)}.py-5{padding-block:var(--fib-5)}.py-13{padding-block:var(--fib-13)}.py-21{padding-block:var(--fib-21)}.py-34{padding-block:var(--fib-34)}
  .mt-3u{margin-block-start:var(--fib-3)}.mt-21u{margin-block-start:var(--fib-21)}.mt-34u{margin-block-start:var(--fib-34)}.mt-55{margin-block-start:var(--fib-55)}
  .mb-34{margin-block-end:var(--fib-34)}.mb-55{margin-block-end:var(--fib-55)}
  .neg-mt-8{margin-block-start:calc(-1 * var(--fib-8))}.neg-mt-13{margin-block-start:calc(-1 * var(--fib-13))}

  /* =================================================================
     73. GAPS DIRECIONAIS + ALINHAMENTOS FINOS
     ================================================================= */
  .gap-x-3{column-gap:var(--fib-3)}.gap-x-5{column-gap:var(--fib-5)}.gap-x-8{column-gap:var(--fib-8)}
  .gap-y-3{row-gap:var(--fib-3)}.gap-y-5{row-gap:var(--fib-5)}.gap-y-8{row-gap:var(--fib-8)}.gap-y-13{row-gap:var(--fib-13)}
  .content-center{align-content:center}.content-between{align-content:space-between}
  .place-items-center{place-items:center}.place-content-center{place-content:center}
  .self-end{align-self:end}.justify-self-center{justify-self:center}.justify-self-end{justify-self:end}
  .order-1{order:1}.order-2{order:2}.order-last{order:99}.order-first{order:-1}

  /* =================================================================
     74. TEXTO — refinamentos finais
     ================================================================= */
  .ls-tight{letter-spacing:-.02em}.ls-wide{letter-spacing:.06em}.ls-wider{letter-spacing:.12em}
  .lh-1{line-height:1}.lh-tight{line-height:1.15}.lh-snug{line-height:1.35}.lh-normal{line-height:1.6}.lh-loose{line-height:1.9}
  .italic{font-style:italic}.not-italic{font-style:normal}
  .underline-cyan{text-decoration:underline;text-decoration-color:var(--c-cyan);text-underline-offset:4px}
  .strike{text-decoration:line-through;color:var(--c-mut)}
  .indent{text-indent:var(--fib-8)}
  .first-cap::first-letter{font-size:1.4em;font-weight:700;color:var(--c-cyan)}
  .nowrap{white-space:nowrap}.wrap-anywhere{overflow-wrap:anywhere}

  /* Bloco final de respiro utilitário */
  .section-gap{padding-block:var(--pad-sec)}
  .section-gap-lg{padding-block:var(--pad-sec-lg)}
}
/* ==================== enhancements.css — 2000+ linhas ==================== */

@layer enhancements {
  /* =================================================================
     75. RESPEITO A MOVIMENTO REDUZIDO — desliga as novas animações
     ================================================================= */
  @media (prefers-reduced-motion:reduce){
    .aurora::before,.conic-glow::after,.anim-border::before,.bg-grad-anim,.marquee__track,
    .typewriter,.dots-loader i,.bars-loader i,.pulse-loader,.progress-line::after,
    .txt-grad,.text-shine,.blob--float,.cta img,.anim-float,.anim-breathe,.anim-glow{
      animation:none!important}
    .rv-clip,.rv-clip-l,.rv-flip,.rv-slide,.rv-scale,.rv-blur,
    [data-words].in > *,[data-anim],[data-stagger].in > *{
      animation:none!important;opacity:1!important;transform:none!important;filter:none!important;clip-path:none!important}
    .hero__col,.hero .simu{animation:none!important;opacity:1!important;transform:none!important}
    .scroll-cue{display:none}
    html{scroll-behavior:auto}
  }

  /* =================================================================
     76. KEYFRAMES EXTRAS REUTILIZÁVEIS
     ================================================================= */
  @keyframes fadeOut{from{opacity:1}to{opacity:0}}
  @keyframes slideOutRight{from{transform:none;opacity:1}to{transform:translateX(40px);opacity:0}}
  @keyframes scaleOut{from{transform:scale(1);opacity:1}to{transform:scale(.9);opacity:0}}
  @keyframes heartbeat{0%,100%{transform:scale(1)}25%{transform:scale(1.08)}50%{transform:scale(1)}75%{transform:scale(1.05)}}
  @keyframes swing{0%,100%{transform:rotate(0)}20%{transform:rotate(8deg)}40%{transform:rotate(-6deg)}60%{transform:rotate(4deg)}80%{transform:rotate(-2deg)}}
  @keyframes tada{0%{transform:scale(1)}10%,20%{transform:scale(.95) rotate(-3deg)}30%,50%,70%,90%{transform:scale(1.05) rotate(3deg)}40%,60%,80%{transform:scale(1.05) rotate(-3deg)}100%{transform:scale(1)}}
  .anim-heartbeat{animation:heartbeat 1.4s ease-in-out infinite}
  .anim-swing{transform-origin:top center;animation:swing 1.2s ease-in-out}
  .anim-tada{animation:tada 1.2s ease both}
  .anim-out{animation:fadeOut var(--t-base) var(--ease-out) forwards}

  /* =================================================================
     77. ESTADO "JS INDISPONÍVEL" — degrada com elegância
     ================================================================= */
  .no-js [data-rise],.no-js [data-anim],.no-js [data-stagger] > *,.no-js [data-words] > *{
    opacity:1!important;transform:none!important}
  .no-js .to-top,.no-js .scroll-progress{display:none}

  /* Fim: garante que o WhatsApp flutuante fique sempre visível e acessível */
  .wa-float:focus-visible{outline:3px solid #fff;outline-offset:3px}
}
/* ========= enhancements.css — 2000+ linhas de melhorias — FIM ========= */

@layer enhancements {
  /* =================================================================
     78. AJUSTES FINOS DE FECHAMENTO — micro-polimento
     ================================================================= */
  /* Botões de contato lado a lado no hero em telas médias */
  @media(min-width:641px) and (max-width:960px){
    .hero__actions{gap:var(--fib-5)}
    .hero__actions .btn{flex:1;min-inline-size:200px}
  }
  /* Selo de confiança no rodapé alinhado */
  .foot .seal{margin-block-start:var(--fib-8)}
  /* Espaço de leitura em parágrafos do "sobre" */
  #sobre p{max-inline-size:60ch}
  /* Realce discreto ao passar sobre o card de simulação inteiro */
  .simu{transition:box-shadow var(--t-base) var(--ease-out)}
  /* Impede seleção acidental de ícones decorativos */
  .card__ico,.why__item > svg,.step__n,.hero__badge svg{user-select:none}
  /* Melhora contraste do placeholder no tema claro */
  :root[data-theme="light"] .field input::placeholder{color:#8aa0ad}
  /* Garante área tocável mínima nos ícones sociais */
  .foot__soc a,.contact__info .foot__soc a{min-inline-size:2.75rem;min-block-size:2.75rem}
  /* Transição suave de cor ao trocar tema */
  body,.card,.simu,.site-head,.site-foot,.field input,.field select{transition:background-color var(--t-slow),border-color var(--t-slow),color var(--t-slow)}
  /* Evita "flash" de conteúdo sem estilo no topo */
  .hero{contain-intrinsic-size:auto 600px}
}
/* =========================================================
   enhancements.css — 2000+ linhas — Mach Consórcios
   Camada @layer enhancements (isolada, não quebra styles.css)
   ========================================================= */

/* =================================================================
   79. CABEÇALHO MOBILE (burger à esquerda, logo centralizado,
   menu em popup de tela cheia) + CORREÇÃO DE OVERFLOW HORIZONTAL
   ================================================================= */
@layer enhancements {
  /* ---- trava de overflow horizontal (segurança global) ---- */
  html{overflow-x:clip}
  body{overflow-x:clip;max-inline-size:100%}
  /* filhos de flex/grid podem encolher (evita estouro por conteúdo longo) */
  .nav,.hero__grid,.hero__actions,.hero__badges,.contact,.contact__info,.grid,
  .g-2,.g-3,.g-4,.why,.stats,.steps,.foot__grid,.simu,.seg-tabs,.cta__actions{min-inline-size:0}
  .grid>*,.g-2>*,.g-3>*,.g-4>*,.why>*,.contact>*,.foot__grid>*,.hero__grid>*,
  .stats>*,.steps>*,.seg-tabs>*{min-inline-size:0}
  /* quebra de textos longos (e-mails, links, palavras grandes) */
  .info-item a,.info-item span,.foot ul a,.foot p,.hero__badge,.card p,.quote p,
  .faq__a,.foot__disc,.sec-head p,.hero__lead,a[href^="mailto:"]{overflow-wrap:anywhere;word-break:break-word}
  img,svg,video,picture{max-inline-size:100%}
  /* nenhum bloco maior que a tela */
  .simu,.card,.quote,.cta,.info-item,.field input,.field select,.field textarea,
  #contatoForm,.hero .simu{max-inline-size:100%}
  .field,.field input,.field select,.field textarea{inline-size:100%}

  /* CTAs dentro do menu só existem no mobile */
  .nav__menu-cta{display:none}
}

@media(max-width:900px){
  @layer enhancements{
    /* barra do topo: burger à esquerda, logo no centro */
    .nav{justify-content:center;position:relative;gap:0}
    .nav__cta{position:absolute;inset-inline-start:0;inset-block:0;display:flex;align-items:center;gap:0;padding:0}
    .nav__cta .btn{display:none!important}          /* remove os botões do cabeçalho no mobile */
    .nav__burger{display:flex;position:relative;z-index:calc(var(--z-header) + 2)}
    .nav__logo{margin-inline:auto}
    .nav__logo img{height:38px}

    /* menu em POPUP de tela cheia (100%) */
    .nav__menu{position:fixed;inset:0;inline-size:100%;block-size:100dvh;min-block-size:100vh;
      display:flex;flex-direction:column;justify-content:center;align-items:center;gap:0;
      background:var(--c-ink);border:0;border-radius:0;box-shadow:none;
      padding:6rem var(--fib-13) var(--fib-21);overflow-y:auto;
      transform:translateY(-100%);opacity:0;visibility:hidden;
      transition:transform var(--t-slow) var(--ease-out),opacity var(--t-slow),visibility var(--t-slow);
      z-index:calc(var(--z-header) + 1)}
    .nav__menu.open{transform:none;opacity:1;visibility:visible}
    .nav__menu a{inline-size:min(100%,420px);text-align:center;font-size:1.25rem;font-weight:500;
      padding-block:var(--fib-5);border-block-end:1px solid var(--c-line);border-radius:0}
    .nav__menu a:hover{background:transparent;padding-inline-start:0;color:var(--c-cyan)}
    .nav__menu a::after{display:none}
    /* CTAs no rodapé do menu fullscreen */
    .nav__menu-cta{display:flex;flex-direction:column;gap:var(--fib-3);
      inline-size:min(100%,420px);margin-block-start:var(--fib-13)}
    .nav__menu-cta .btn{display:inline-flex!important;inline-size:100%;max-inline-size:none}

    /* seções não deixam decoração vazar */
    section{overflow-x:clip}
    /* carrossel de depoimentos sem margem negativa que estourava a tela */
    #depoimentos .grid.g-3{margin-inline:0;padding-inline:0;grid-auto-columns:88%}
    /* respiro lateral consistente */
    .wrap{inline-size:100%;padding-inline:18px}
  }
}
@media(max-width:480px){
  @layer enhancements{
    .wrap{padding-inline:16px}
    .nav__menu a{font-size:1.15rem}
    .nav__menu{padding:5.5rem var(--fib-8) var(--fib-13)}
  }
}
/* trava a rolagem do fundo enquanto o menu fullscreen está aberto */
@layer enhancements{ html:has(.nav__menu.open){overflow:hidden} }
/* ===== fim: header mobile + responsividade 100% ===== */

/* =================================================================
   80. OVERRIDE SEM CAMADA (unlayered) — precedência sobre o
   bloco MOBILE NAV do styles.css (que também é unlayered).
   Cabeçalho mobile: burger à esquerda, logo centralizado,
   sem botões no topo, menu em POPUP de tela cheia.
   ================================================================= */
@media(max-width:900px){
  /* grade de 3 colunas: burger (respeitando a margem do conteúdo) | logo centralizado | vazio */
  .nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:0;position:relative;justify-content:unset}
  .nav__cta{position:static;grid-column:1;justify-self:start;display:flex;align-items:center;gap:0;padding:0;margin:0}
  .nav__cta .btn{display:none!important}                 /* remove os botões do cabeçalho no mobile */
  .nav__burger{display:flex;position:relative;z-index:62}
  .nav__logo{grid-column:2;justify-self:center;margin:0}
  .nav__logo img{height:38px}

  /* POPUP de tela cheia */
  .nav__menu{position:fixed;inset:0;width:100%;height:100dvh;min-height:100vh;
    display:flex;flex-direction:column;justify-content:center;align-items:center;gap:0;
    background:var(--c-ink);border:0;border-radius:0;box-shadow:none;
    padding:6rem 1.75rem 3rem;overflow-y:auto;
    transform:translateY(-100%);opacity:0;visibility:hidden;
    transition:transform .4s cubic-bezier(.16,1,.3,1),opacity .4s ease,visibility .4s;
    z-index:61}
  .nav__menu.open{transform:none;opacity:1;visibility:visible}
  /* garante que os links NUNCA fiquem escondidos por animação de entrada */
  .nav__menu a,.nav__menu.open a,.nav__menu-cta .btn{animation:none!important;opacity:1!important;visibility:visible!important}
  .nav__menu a{display:flex;align-items:center;justify-content:center;
    width:min(100%,420px);text-align:center;font-size:1.25rem;font-weight:500;
    color:var(--c-light);padding-block:1rem;border-block-end:1px solid var(--c-line)}
  .nav__menu a:hover,.nav__menu a:focus-visible{color:var(--c-cyan)}
  .nav__menu-cta{display:flex;flex-direction:column;gap:.75rem;width:min(100%,420px);margin-top:2rem;border:0}
  .nav__menu-cta .btn{display:inline-flex!important;width:100%;max-width:none}
}
@media(min-width:901px){.nav__menu-cta{display:none}}
html:has(.nav__menu.open){overflow:hidden}
@media(max-width:480px){
  .nav__menu a{font-size:1.15rem}
  .nav__menu{padding:5.25rem 1.25rem 2.5rem}
}
/* ===== fim override unlayered ===== */

/* =================================================================
   81. Botões do cabeçalho menores (Simular / Fale conosco) — desktop
   ================================================================= */
@layer enhancements{
  .nav__cta .btn{min-height:2.6rem;padding-inline:var(--fib-8);font-size:.88rem;font-weight:600}
  .nav__cta .btn svg{width:16px;height:16px}
  .site-head .nav{min-height:4.4rem}
}

/* =================================================================
   82. Abas do simulador — ícone + texto sempre visíveis (2x2)
   ================================================================= */
@layer enhancements{
  .seg-tabs{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--fib-2)}
  .seg-tab{min-inline-size:0;flex:none;padding:var(--fib-3) var(--fib-3);gap:8px;white-space:nowrap}
  .seg-tab svg{flex:none;inline-size:18px;block-size:18px;color:var(--c-cyan)}   /* nunca encolhe/some */
  .seg-tab[aria-pressed=true] svg{color:var(--c-cyan)}
}
@media(max-width:360px){
  @layer enhancements{ .seg-tab{font-size:.8rem;gap:6px} .seg-tab svg{inline-size:16px;block-size:16px} }
}