/* ============================================================
   DESIGN SYSTEM — TRG Santa Bárbara d'Oeste
   1. Tokens  2. Base  3. Layout  4. Componentes  5. Páginas
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
:root{
  /* PRIMÁRIA — identidade TRG */
  --azure:#A9D6F2;        /* Pastel Sky Blue: superfícies, traços, luz */
  --azure-claro:#EAF3FB;  /* diluição do pastel para blocos alternados */
  --azure-borda:#C5DFF4;
  --azul:#3175B9;         /* Azure Blue (médio): botões, marca, ícones */
  --azul-forte:#2A6BA0;   /* hover e texto de link, mais claro · 5,7:1 em branco */

  /* SECUNDÁRIA — ouro e champanhe */
  --ouro:#C9A227;             /* Metallic Gold, versão chapada */
  --ouro-grad:linear-gradient(100deg,#B8860B 0%,#E3C260 38%,#F3E0A1 52%,#C79B23 72%,#9C7416 100%);
  --ouro-escuro:#8C6B1F;      /* ouro legível sobre claro · 5,2:1 */
  --ouro-claro:#F6EBD5;
  --champanhe:sienna;         /* Sienna */
  --champanhe-claro:#F2DFD5;  /* Light Sienna para blocos alternados */
  --bege:#C47957;
  --bege-claro:#E2C7B8;
  --bege-escuro:#69351C;

  /* NEUTROS */
  --tinta:#1F5482;        /* navy da identidade, mais claro: títulos, rodapé, CTA */
  --grafite:#111111;      /* corpo de texto · 8,0:1 */
  --cinza:#70828F;
  --linha:#E7E1D8;        /* filete quente, puxado do champanhe */
  --papel:#FFFFFF;        /* Pure Bright White */
  --branco:#FFFFFF;
  --zap:#3175B9;          /* CTA WhatsApp na cor da marca (ver nota no guia) */

  /* Tipografia */
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Karla","Segoe UI",Helvetica,Arial,sans-serif;
  --t-xs:.8125rem; --t-sm:.9375rem; --t-base:1.0625rem; --t-lg:1.1875rem;
  --h4:1.25rem;
  --h3:clamp(1.375rem,1.1rem + 1.2vw,1.625rem);
  --h2:clamp(1.75rem,1.3rem + 2.2vw,2.5rem);
  --h1:clamp(2.125rem,1.4rem + 3.4vw,3.375rem);

  /* Espaço (escala 4pt) */
  --e1:.25rem; --e2:.5rem; --e3:.75rem; --e4:1rem; --e5:1.5rem;
  --e6:2rem; --e7:3rem; --e8:4rem; --e9:6rem;

  /* Forma e profundidade */
  --r-sm:6px; --r-md:12px; --r-lg:20px; --r-full:999px;
  --sombra-1:0 1px 2px rgba(18,58,94,.06);
  --sombra-2:0 10px 30px -18px rgba(18,58,94,.38);
  --max:1160px;
  --header-h:68px;
}

/* Fio de ouro — divisor fino usado entre blocos e sob o selo do hero */
.fio-ouro{height:2px;background:var(--ouro-grad);border:0;margin:0;opacity:.85}

/* ---------- 2. BASE ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background: #FDFDF8 url('/assets/img/fundo-paginas-moderno.jpg') center center/cover no-repeat fixed;
  color:var(--grafite);
  font-family:var(--sans);font-size:var(--t-base);line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
body.is-home {
  background: var(--papel);
}
h1,h2,h3,h4{font-family:var(--serif);color:var(--tinta);line-height:1.15;
  font-weight:500;letter-spacing:-.01em;margin:0 0 var(--e4)}
h1{font-size:var(--h2);line-height:1.15;letter-spacing:-.01em}
h2{font-size:var(--h2)}
h3{font-size:var(--h3)}
h4{font-size:var(--h4);line-height:1.3}
p{margin:0 0 var(--e4);max-width:68ch}
a{color:var(--azul);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--azul-forte)}
img{max-width:100%;display:block}
ul,ol{padding-left:1.15rem;margin:0 0 var(--e4)}
li{margin-bottom:var(--e2);max-width:66ch}
strong{color:var(--tinta);font-weight:600}
:focus-visible{outline:3px solid var(--ouro);outline-offset:3px;border-radius:2px}
.pular{position:absolute;left:-9999px;top:0;background:var(--tinta);color:#fff;
  padding:var(--e3) var(--e4);z-index:200}
.pular:focus{left:var(--e4);top:var(--e2)}

/* ---------- 3. LAYOUT ---------- */
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--e5)}
.bloco{padding-block:var(--e8)}
.bloco--curto{padding-block:var(--e7)}
.bloco--escuro{background:var(--tinta);color:#D3E2EE}
.bloco--escuro h2,.bloco--escuro h3,.bloco--escuro h4{color:#fff}
.bloco--nevoa{background:var(--azure-claro)}
.bloco--bege{background:var(--champanhe-claro)}
.grade{display:grid;gap:var(--e5)}
.limite{max-width:64ch}
.centro{text-align:center;margin-inline:auto}

/* Trilho bilateral — elemento de identidade (estimulação E→D da TRG) */
.trilho{display:flex;align-items:center;gap:6px;margin-bottom:var(--e4)}
.trilho::before{content:"";flex:0 0 56px;height:2px;
  background:repeating-linear-gradient(90deg,var(--azure) 0 4px,transparent 4px 10px)}
.trilho::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--ouro-grad);
  box-shadow:0 0 0 1px rgba(140,107,31,.35)}
.trilho span{font-size:var(--t-sm);font-weight:600;color:var(--azul);letter-spacing:.01em}
.bloco--escuro .trilho span{color:var(--azure)}
.trilho--centro{justify-content:center}

/* ---------- 4. COMPONENTES ---------- */

/* 4.1 Botões */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--e2);
  font-family:var(--sans);font-size:var(--t-base);font-weight:600;line-height:1;
  padding:.875rem 1.5rem;border-radius:var(--r-full);border:1.5px solid transparent;
  cursor:pointer;text-decoration:none;transition:background .18s ease,color .18s ease,border-color .18s ease}
.btn--primario{background:var(--azul);color:#fff}
.btn--primario:hover{background:var(--azul-forte);color:#fff}
.btn--secundario{background:transparent;color:var(--azul);border-color:var(--azure-borda)}
.btn--secundario:hover{background:var(--azure-claro);border-color:var(--azul);color:var(--azul-forte)}
.btn--ouro{background:var(--ouro-grad);color:#3B2C08;border-color:rgba(140,107,31,.45);font-weight:700}
.btn--ouro:hover{filter:brightness(1.06);color:#3B2C08}
.btn--zap{background:var(--zap);color:#fff}
.btn--zap:hover{background:var(--azul-forte);color:#fff}
.btn--fantasma{background:transparent;color:var(--tinta);padding-inline:0;text-decoration:underline}
.btn--fantasma:hover{color:var(--azul)}
.btn--bloco{width:100%}
.btn--pequeno{font-size:var(--t-sm);padding:.625rem 1.125rem}
.bloco--escuro .btn--secundario{color:#fff;border-color:rgba(169,214,242,.4)}
.bloco--escuro .btn--secundario:hover{background:rgba(169,214,242,.12);color:#fff}
.btn svg{flex:0 0 auto}
.btn:disabled,.btn[aria-disabled=true]{opacity:.45;pointer-events:none}

/* 4.2 Chips de sintoma */
.chips{display:flex;flex-wrap:wrap;gap:var(--e2);padding:0;margin:0 0 var(--e5);list-style:none}
.chips li{margin:0}
.chip{display:inline-block;background:var(--branco);border:1px solid var(--azure-borda);
  color:var(--grafite);border-radius:var(--r-full);padding:.45rem .9rem;
  font-size:var(--t-sm);font-weight:500;text-decoration:none;transition:.18s ease}
.chip:hover{border-color:var(--ouro);background:var(--champanhe-claro);color:var(--azul-forte)}

/* 4.3 Card de serviço */
.card{background:var(--branco);border:1px solid var(--linha);border-radius:var(--r-md);
  padding:var(--e5);display:flex;flex-direction:column;box-shadow:var(--sombra-1)}
.card__topo{display:flex;align-items:center;gap:var(--e3);margin-bottom:var(--e3)}
.card__icone{flex:0 0 40px;height:40px;border-radius:10px;background:var(--azure-claro);
  display:grid;place-items:center;color:var(--azul)}
.card h3{font-size:var(--h4);margin:0}
.card p{font-size:var(--t-sm);margin-bottom:var(--e4)}
.card__lista{list-style:none;padding:0;margin:0 0 var(--e5);font-size:var(--t-sm)}
.card__lista li{position:relative;padding-left:1.1rem;margin-bottom:var(--e1)}
.card__lista li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;
  border-radius:50%;background:var(--azure)}
.card__link{margin-top:auto;font-weight:600;font-size:var(--t-sm);text-decoration:none;
  color:var(--azul-forte);border-bottom:2px solid var(--ouro);padding-bottom:2px;align-self:flex-start}
.card__link:hover{border-color:var(--azul);color:var(--azul)}
.card--destaque{border-color:var(--azul);box-shadow:var(--sombra-2)}
.card--bege{background:sienna;border-color:sienna;}
.card--bege h3{color:var(--azure) !important;}
.card--bege p{color:#fff !important;}
.card--bege .card__icone{background:#fff;color:var(--ouro);}
.card--bege .card__link{color:var(--azure) !important;}

.card--azul-claro{background:#A9D6F2;border-color:#A9D6F2;color:#000 !important}
.card--azul-claro .card__icone{color:var(--ouro) !important; background: #fff !important}
.card--azul-claro h3{color:var(--tinta) !important; margin-bottom: var(--e3) !important}
.card--azul-claro p{color:#000 !important}

/* 4.3.1 Card de livro */
.livro{padding:var(--e4)}
.livro__capa{aspect-ratio:2/3;border-radius:var(--r-sm);overflow:hidden;margin-bottom:var(--e4);
  background:linear-gradient(155deg,var(--azure) 0%,var(--champanhe) 100%);
  display:grid;place-items:center;border:1px solid var(--linha)}
.livro__capa span{font-family:var(--serif);font-size:var(--t-xs);color:rgba(15,36,48,.5);
  text-align:center;padding:var(--e3);line-height:1.5}
.livro__selo{display:inline-block;font-size:var(--t-xs);font-weight:600;color:var(--ouro-escuro);
  background:var(--ouro-claro);border-radius:var(--r-full);padding:.2rem .7rem;margin-bottom:var(--e2)}
.livro h3{font-size:var(--h4);margin-bottom:var(--e1)}
.livro__subtitulo{font-size:var(--t-sm);color:var(--cinza);margin-bottom:var(--e3)}
.livro p.livro__descricao{font-size:var(--t-sm);margin-bottom:var(--e3);flex:1}
.livro__rodape{display:flex;align-items:center;justify-content:space-between;gap:var(--e3);
  margin-top:auto;padding-top:var(--e3);border-top:1px solid var(--linha);margin-bottom:var(--e4)}
.livro__preco{font-family:var(--serif);font-size:var(--h4);color:var(--tinta);font-weight:500}
.livro__formato{font-size:var(--t-xs);color:var(--cinza)}

/* 4.3.2 Grade da área de livros: foto e cards na mesma linha e altura */
.livros-grade{display:grid;gap:var(--e5)}
.livros-grade__foto{aspect-ratio:4/5}

/* 4.4 Accordion FAQ */
.faq{border-top:1px solid var(--linha)}
.faq details{border-bottom:1px solid var(--linha)}
.faq summary{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--e4);
  cursor:pointer;list-style:none;padding:var(--e4) 0;font-family:var(--serif);
  font-size:var(--t-lg);color:var(--tinta);font-weight:500;line-height:1.35}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--azul)}
.faq .sinal{flex:0 0 26px;height:26px;border-radius:50%;border:1.5px solid rgba(201,162,39,.5);
  position:relative;margin-top:2px;transition:.2s ease}
.faq .sinal::before,.faq .sinal::after{content:"";position:absolute;inset:50% 25%;
  height:1.5px;background:var(--azul);transform:translateY(-50%);transition:.2s ease}
.faq .sinal::after{transform:translateY(-50%) rotate(90deg)}
.faq details[open] .sinal{background:var(--azul);border-color:var(--azul)}
.faq details[open] .sinal::before,.faq details[open] .sinal::after{background:#fff}
.faq details[open] .sinal::after{transform:translateY(-50%) rotate(0)}
.faq__corpo{padding:0 0 var(--e5);max-width:66ch}
.faq__corpo p:last-child{margin-bottom:0}
@media (prefers-reduced-motion:no-preference){
  .faq details[open] .faq__corpo{animation:abrir .24s ease both}
}
@keyframes abrir{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* 4.5 Header */
.header{position:sticky;top:0;z-index:100;background:rgba(252,252,251,.94);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--linha)}
.header__in{display:flex;align-items:center;justify-content:space-between;gap:var(--e4);
  min-height:var(--header-h)}
.marca{display:flex;align-items:center;gap:var(--e3);text-decoration:none;color:var(--tinta)}
.marca__sigla{width:38px;height:38px;border-radius:10px;background:var(--tinta);
  display:grid;place-items:center;font-family:var(--serif);font-weight:600;
  color:var(--ouro);font-size:1rem;letter-spacing:-.02em;
  box-shadow:inset 0 0 0 1px rgba(201,162,39,.45)}
.marca__nome{font-family:var(--serif);font-size:1.0625rem;font-weight:600;line-height:1.1}
.marca__papel{display:block;font-family:var(--sans);font-size:var(--t-xs);
  color:var(--cinza);font-weight:500}
.nav{display:none}
.nav a{font-size:var(--t-sm);font-weight:500;color:var(--grafite);text-decoration:none;
  padding:var(--e2) 0;border-bottom:2px solid transparent}
.nav a:hover{color:var(--azul)}
.nav a[aria-current=page]{color:var(--tinta);border-color:var(--ouro)}
.header__acoes{display:flex;align-items:center;gap:var(--e3)}
.menu-btn{display:grid;place-items:center;width:44px;height:44px;background:none;
  border:1px solid var(--linha);border-radius:var(--r-sm);cursor:pointer;color:var(--tinta)}
.gaveta{display:none;border-top:1px solid var(--linha);background:var(--branco);
  padding:var(--e4) 0 var(--e5)}
.gaveta.aberta{display:block}
.gaveta a{display:block;padding:var(--e3) 0;font-weight:500;color:var(--tinta);
  text-decoration:none;border-bottom:1px solid var(--linha)}
.gaveta .btn{margin-top:var(--e4)}

/* 4.6 Footer */
.footer{background:var(--tinta);color:#B9CDDE;padding-block:var(--e8) var(--e5);font-size:var(--t-sm)}
.footer h4{font-family:var(--sans);font-size:var(--t-sm);font-weight:700;color:#fff;
  letter-spacing:.02em;margin-bottom:var(--e3)}
.footer a{color:#DCE7F1;text-decoration:none}
.footer a:hover{color:#fff;text-decoration:underline}
.footer__grade{display:grid;gap:var(--e6)}
.footer__lista{list-style:none;padding:0;margin:0}
.footer__lista li{margin-bottom:var(--e2)}
.footer__base{margin-top:var(--e7);padding-top:var(--e4);
  border-top:1px solid rgba(201,162,39,.35);display:flex;flex-wrap:wrap;gap:var(--e3);
  justify-content:space-between;font-size:var(--t-xs);color:#9AB0C4}
.footer .marca__nome{color:#fff}
.footer .marca__papel{color:#B9CDDE}

/* 4.7 Depoimento */
.dep{background:var(--branco);box-shadow:var(--sombra-1);border:1px solid var(--linha);
  border-left:3px solid var(--ouro);border-radius:var(--r-sm);padding:var(--e5)}
.dep p{font-family:var(--serif);font-size:var(--t-lg);color:var(--tinta);line-height:1.5}
.dep footer{font-size:var(--t-sm);color:var(--cinza)}
.estrelas{color:var(--ouro-escuro);font-size:var(--t-sm);letter-spacing:2px;margin-bottom:var(--e3)}

/* 4.8 Etapas numeradas (sequência real) */
.etapas{list-style:none;padding:0;margin:0;counter-reset:etapa}
.etapas li{counter-increment:etapa;position:relative;padding-left:3.25rem;
  padding-bottom:var(--e5);border-left:1px dashed var(--azure-borda);margin-left:1.05rem}
.etapas li:last-child{border-left-color:transparent;padding-bottom:0}
.etapas li::before{content:counter(etapa);position:absolute;left:-1.05rem;top:-2px;
  width:2.1rem;height:2.1rem;border-radius:50%;background:var(--ouro);
  border:1px solid var(--ouro-escuro);color:#fff;display:grid;place-items:center;
  font-weight:700;font-size:var(--t-sm)}
.etapas h4{margin-bottom:var(--e1)}
.etapas p{font-size:var(--t-sm);margin-bottom:0}

/* 4.9 Formulário */
.campo{margin-bottom:var(--e4)}
.campo label{display:block;font-size:var(--t-sm);font-weight:600;color:var(--tinta);
  margin-bottom:var(--e2)}
.campo .dica{font-weight:400;color:var(--cinza)}
.campo input,.campo select,.campo textarea{width:100%;font-family:var(--sans);
  font-size:var(--t-base);color:var(--tinta);background:var(--branco);
  border:1px solid var(--linha);border-radius:var(--r-sm);padding:.75rem .875rem}
.campo input:focus,.campo select:focus,.campo textarea:focus{border-color:var(--azul);
  outline:2px solid rgba(27,94,128,.18);outline-offset:0}
.campo textarea{min-height:120px;resize:vertical}
.erro{color:#9E2C2C;font-size:var(--t-sm);margin-top:var(--e1);display:none}
.campo.invalido input,.campo.invalido textarea{border-color:#9E2C2C}
.campo.invalido .erro{display:block}
.aviso{background:var(--champanhe-claro);border-left:3px solid var(--ouro);
  border-radius:var(--r-sm);padding:var(--e4);font-size:var(--t-sm);color:#5E4A24}
.aviso strong{color:#3F3116}

/* 4.10 Mapa */
.mapa{border:1px solid var(--linha);border-radius:var(--r-md);overflow:hidden;
  background:var(--azure-claro);min-height:280px}
.mapa iframe{width:100%;height:100%;min-height:280px;border:0;display:block}
.dados{list-style:none;padding:0;margin:0 0 var(--e5)}
.dados li{display:flex;gap:var(--e3);padding:var(--e3) 0;border-bottom:1px solid var(--linha);
  font-size:var(--t-sm)}
.dados b{flex:0 0 96px;color:var(--tinta);font-weight:600}

/* 4.11 Card de post */
.post{display:flex;flex-direction:column;background:var(--branco);border:1px solid var(--linha);
  border-radius:var(--r-md);overflow:hidden}
.post__capa{height:220px;background:linear-gradient(140deg,var(--azure-claro),var(--champanhe-claro));
  border-bottom:2px solid var(--ouro);
  display:grid;place-items:center;color:var(--azul);font-family:var(--serif);font-size:1.5rem}
.post__corpo{padding:var(--e5);display:flex;flex-direction:column;flex:1}
.post__meta{font-size:var(--t-xs);color:var(--cinza);margin-bottom:var(--e2)}
.post h3{font-size:1.125rem;margin-bottom:var(--e2)}
.post h3 a{color:var(--tinta);text-decoration:none}
.post h3 a:hover{color:var(--azul)}
.post p{font-size:var(--t-sm);margin-bottom:var(--e4)}
.post .card__link{font-size:var(--t-sm)}

/* 4.12 Faixa de credibilidade */
.faixa{display:grid;gap:var(--e4);border-top:1px solid var(--linha);
  border-bottom:1px solid var(--linha);padding-block:var(--e5)}
.faixa div{display:flex;gap:var(--e3);align-items:flex-start;font-size:var(--t-sm)}
.faixa b{display:block;color:var(--tinta);font-size:var(--t-base);font-family:var(--serif);font-weight:500}
.faixa svg{flex:0 0 auto;color:var(--ouro-escuro);margin-top:3px}

/* 4.13 Breadcrumb */
.migalha{font-size:var(--t-sm);color:var(--cinza);margin-bottom:var(--e4)}
.migalha a{text-decoration:none}
.migalha a:hover{text-decoration:underline}

/* Barra fixa de WhatsApp no mobile */
.barra-zap{position:fixed;left:0;right:0;bottom:0;z-index:90;background:var(--branco);
  border-top:1px solid var(--linha);padding:var(--e3) var(--e4);
  box-shadow:0 -6px 20px -14px rgba(15,36,48,.5)}
body{padding-bottom:84px}

/* ---------- 5. PÁGINAS ---------- */
.pagina{display:none}
.pagina.ativa{display:block}

/* Hero */
.hero{padding-block:var(--e7) var(--e8);}
.hero h1 {color: #000; text-shadow: 0 1px 4px rgba(255,255,255,0.9);}
.hero .trilho span {color: #000; font-weight: 700; text-shadow: 0 1px 4px rgba(255,255,255,0.9);}
.hero p.abertura{font-size:var(--t-lg);color:#000;font-weight:600;max-width:52ch;}
.hero__acoes{display:flex;flex-wrap:wrap;gap:var(--e3);margin-bottom:var(--e5)}
.hero__retrato{position:relative;border-radius:var(--r-lg);overflow:hidden;
  background:linear-gradient(160deg,var(--azure) 0%,var(--champanhe) 100%);
  aspect-ratio:4/5;display:grid;place-items:center;border:1px solid var(--azure-borda)}
.hero__retrato span{font-family:var(--serif);color:rgba(15,36,48,.45);font-size:var(--t-sm);
  padding:var(--e4);text-align:center}
.hero__selo{background:var(--branco);border:1px solid var(--linha);border-radius:var(--r-md);
  padding:var(--e5) var(--e4) var(--e4);margin-top:calc(var(--e5) * -1 - 8px);margin-inline:var(--e4);
  position:relative;overflow:hidden;box-shadow:var(--sombra-2);font-size:var(--t-sm)}
.hero__selo::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--ouro-grad)}
.hero__selo b{display:block;color:var(--tinta);font-family:var(--serif);font-size:var(--t-lg);
  font-weight:500}

/* CTA final */
.cta-final{background:linear-gradient(135deg,var(--tinta) 0%,#0E2E4B 100%);color:#D3E2EE;
  position:relative;overflow:hidden;border-radius:var(--r-lg);
  padding:var(--e6) var(--e5)}
.cta-final::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--ouro-grad)}
.cta-final h2{color:#fff}
.cta-final p{color:#C2D5E4}
.cta-final .acoes{display:flex;flex-wrap:wrap;gap:var(--e3);margin-top:var(--e5)}

/* Guia de estilo */
.amostras{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--e3)}
.amostra{border:1px solid var(--linha);border-radius:var(--r-sm);overflow:hidden;background:#fff}
.amostra .cor{height:76px}
.amostra .meta{padding:var(--e3);font-size:var(--t-xs);line-height:1.5}
.amostra .meta b{display:block;color:var(--tinta);font-size:var(--t-sm)}
.amostra .meta code{color:var(--cinza)}
.escala{border-top:1px solid var(--linha)}
.escala div{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--e4);
  padding:var(--e4) 0;border-bottom:1px solid var(--linha)}
.escala .rot{flex:0 0 150px;font-size:var(--t-xs);color:var(--cinza)}
.vitrine{background:var(--azure-claro);border:1px solid var(--azure-borda);
  border-radius:var(--r-md);padding:var(--e5);display:flex;flex-wrap:wrap;
  gap:var(--e3);align-items:center}

/* ---------- RESPONSIVO (mobile-first → desktop) ---------- */
@media (min-width:600px){
  .grade--2{grid-template-columns:repeat(2,1fr)}
  .faixa{grid-template-columns:repeat(2,1fr);gap:var(--e5)}
  .footer__grade{grid-template-columns:repeat(2,1fr)}
  .livros-grade{grid-template-columns:repeat(2,1fr)}
  .livros-grade__foto{grid-column:1 / -1}
}
@media (min-width:900px){
  :root{--header-h:80px}
  body{padding-bottom:0}
  .barra-zap{display:none}
  .menu-btn{display:none}
  .gaveta{display:none !important}
  .nav{display:flex;gap:var(--e5)}
  .bloco{padding-block:var(--e9)}
  .bloco--curto{padding-block:var(--e8)}
  .grade--3{grid-template-columns:repeat(3,1fr)}
  .grade--2{grid-template-columns:repeat(2,1fr);gap:var(--e7)}
  .faixa{grid-template-columns:repeat(4,1fr)}
  .footer__grade{grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:var(--e5)}
  .hero{padding-block:var(--e8) var(--e9)}
  .hero__in{display:grid;grid-template-columns:1fr 380px;gap:var(--e8);align-items:center;max-width:1300px;justify-content:space-between}
  .hero__in > div:last-child{width:100%;justify-self:end}
  .hero__selo{margin-inline:var(--e6) 0;margin-top:-52px;max-width:330px}
  .cta-final{padding:var(--e8) var(--e7);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:var(--e6)}
  .cta-final .acoes{margin-top:0;flex-direction:column;align-items:center;width:100%}
  .duas-colunas{display:grid;grid-template-columns:1fr 380px;gap:var(--e7);align-items:start}
  .duas-colunas--esq{grid-template-columns:320px 1fr}
  .livros-grade{grid-template-columns:280px 1fr 1fr;align-items:stretch}
  .livros-grade__foto{grid-column:auto;aspect-ratio:auto;height:100%}
  .grudado{position:sticky;top:calc(var(--header-h) + 16px)}
  .mapa{min-height:360px}
  .mapa iframe{min-height:360px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important;scroll-behavior:auto !important}
}
@media print{.header,.footer,.barra-zap,.btn{display:none}.pagina{display:block !important}}
/* MOBILE FIXES: HERO ALIGNMENT & HEADER CTA (V2) */
@media (max-width: 768px) {
  .hero .trilho::before,
  .hero .trilho::after {
    display: none;
  }
  .hero .trilho {
    justify-content: center;
  }
  .hero .trilho span {
    text-align: center;
    font-size: 14px;
  }
  .header__acoes .header-zap .zap-texto { display: none !important; }
  .header__acoes .header-zap {
    padding: 0 !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .header__acoes .header-zap svg {
    margin: 0 !important;
    width: 24px !important;
    height: 24px !important;
  }
}

/* MOBILE CTA-FINAL FIX */
@media (max-width: 768px) {
  .cta-final {
    padding: 3rem 1.5rem !important;
    text-align: center !important;
  }
  .cta-final .acoes {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 1rem !important;
    width: 100% !important;
  }
  .cta-final .btn {
    width: 100% !important;
    margin: 0 !important;
    text-align: center !important;
  }
}

/* MOBILE HERO TEXT FIX V2 */
@media (max-width: 768px) {
  .hero p.abertura {
    font-size: 16.5px !important;
    font-weight: 500 !important;
    line-height: 1.45 !important;
    margin-bottom: 1.5rem !important;
  }
  .esconde-mobile {
    display: none !important;
  }
}

/* REMOVE FIXED BOTTOM BAR ON MOBILE */
.barra-zap { display: none !important; }