/* ============================================================
   Residencial Geriátrico Sagrada Família — estilo.css (v2)
   Folha de estilo única do site. Sem framework, sem fonte externa.
   Paleta: verde-sálvia (acolhimento) + creme (calma) +
           azul-marinho (confiança — conversa com a fachada azul).
   Mobile-first · contraste AA · foco visível · reduced-motion.
   ============================================================ */

/* ------------------------------------------------------------
   1. Variáveis
   ------------------------------------------------------------ */
:root{
  /* Verde-sálvia (cor principal) */
  --salvia-900:#2e4036;
  --salvia-700:#46604f;   /* texto/realce sobre fundo claro (AA) */
  --salvia-500:#6f8c78;
  --salvia-200:#cdddd2;
  --salvia-100:#e8efe9;

  /* Creme (fundos) */
  --creme:#f7f3ea;
  --creme-escuro:#ece5d4;

  /* Azul-marinho (apoio institucional) */
  --navy:#1f3a5f;
  --navy-escuro:#14283f;
  --navy-claro:#2e5a88;

  /* Neutros */
  --branco:#fffdf9;
  --tinta:#2c2e29;        /* texto principal */
  --cinza:#585b53;        /* texto secundário (AA sobre creme/branco) */
  --linha:#e0d9c8;        /* bordas suaves */

  /* WhatsApp (verde escurecido para garantir contraste com texto branco) */
  --zap:#117a43;
  --zap-escuro:#0c5e33;
  --zap-vivo:#25d366;     /* só para o ícone flutuante (fundo de ícone, não de texto) */

  /* Apoio */
  --sombra:0 6px 22px rgba(31,58,95,.10);
  --sombra-leve:0 2px 10px rgba(31,58,95,.08);
  --raio:16px;
  --raio-peq:10px;
  --max:1080px;
  --foco:#1f3a5f;
}

/* ------------------------------------------------------------
   2. Base
   ------------------------------------------------------------ */
*{box-sizing:border-box;margin:0;padding:0}

html{font-size:100%;scroll-behavior:smooth}

body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:1.0625rem;            /* 17px na escala padrão */
  line-height:1.65;
  color:var(--tinta);
  background:var(--creme);
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;height:auto;display:block}

a{color:var(--salvia-700);text-decoration:underline;text-underline-offset:2px}
a:hover{color:var(--salvia-900)}

h1,h2,h3,h4{line-height:1.25;color:var(--tinta);font-weight:700;text-wrap:balance}
h1{font-size:1.9rem;margin-bottom:.5em}
h2{font-size:1.5rem;margin:0 0 .6em}
h3{font-size:1.2rem;margin:0 0 .4em}
p{margin:0 0 1em}
ul,ol{margin:0 0 1em 1.25em}
li{margin-bottom:.35em}
strong{color:var(--tinta)}

.container{max-width:var(--max);margin:0 auto;padding:0 20px}
.estreito{max-width:780px}
.centro{text-align:center}

/* ------------------------------------------------------------
   3. Acessibilidade global
   ------------------------------------------------------------ */
/* Link "pular para o conteúdo" — primeiro elemento focável da página */
.pular-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--navy);color:#fff;padding:12px 20px;border-radius:0 0 var(--raio-peq) 0;
  font-weight:700;text-decoration:none;
}
.pular-link:focus{left:0}

/* Foco visível em todo elemento interativo */
:focus-visible{outline:3px solid var(--foco);outline-offset:2px;border-radius:4px}
.rodape :focus-visible,
.cta :focus-visible,
.hero-navy :focus-visible{outline-color:#fff}

/* Movimento reduzido: corta animações e rolagem suave */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
}

/* Modo de alto contraste (ativado pela barra de acessibilidade) */
body.contraste-alto{background:#000!important;color:#fff!important}
body.contraste-alto :is(header,footer,section,div,article,figure,figcaption,details,summary,nav,td,th,li,blockquote){
  background:#000!important;color:#fff!important;border-color:#fff!important;box-shadow:none!important;
}
body.contraste-alto :is(h1,h2,h3,h4,p,span,strong,em,small){color:#fff!important}
body.contraste-alto a{color:#ffd700!important}
body.contraste-alto .btn,
body.contraste-alto .menu .btn-whats,
body.contraste-alto .zap-flutuante{background:#ffd700!important;color:#000!important}
body.contraste-alto .btn *,body.contraste-alto .zap-flutuante *{fill:#000!important;color:#000!important}
body.contraste-alto .a11y-bar button{background:#000!important;color:#fff!important;border-color:#fff!important}

/* ------------------------------------------------------------
   4. Barra de acessibilidade (topo da página)
   ------------------------------------------------------------ */
.a11y-bar{
  background:var(--salvia-100);
  border-bottom:1px solid var(--salvia-200);
  display:flex;justify-content:flex-end;align-items:center;
  gap:6px;padding:5px 16px;flex-wrap:wrap;
  font-size:.78rem;color:var(--cinza);
}
.a11y-bar .a11y-rotulo{font-weight:600;letter-spacing:.05em;text-transform:uppercase;font-size:.68rem;margin-right:4px}
.a11y-bar button{
  font:inherit;font-size:.8rem;font-weight:600;
  padding:3px 10px;min-height:28px;
  background:var(--branco);color:var(--tinta);
  border:1px solid var(--salvia-200);border-radius:8px;cursor:pointer;
  transition:background .15s,color .15s,border-color .15s;
}
.a11y-bar button:hover{border-color:var(--navy);color:var(--navy)}
.a11y-bar button[aria-pressed="true"]{background:var(--navy);color:#fff;border-color:var(--navy)}

/* ------------------------------------------------------------
   5. Cabeçalho e navegação
   ------------------------------------------------------------ */
.topo{
  background:var(--branco);
  border-bottom:1px solid var(--linha);
  position:sticky;top:0;z-index:50;
}
.topo-inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:10px 0;flex-wrap:wrap;
}
.marca{
  display:flex;align-items:center;gap:10px;
  font-weight:700;color:var(--navy);text-decoration:none;
  font-size:1.02rem;line-height:1.15;
}
.marca:hover{color:var(--navy);text-decoration:none}
.marca img{width:44px;height:44px;flex:0 0 44px;border-radius:50%}
.marca .marca-sub{display:block;font-weight:500;font-size:.78rem;color:var(--cinza);letter-spacing:.03em}

/* Botão hambúrguer (some no desktop) */
.nav-toggle{
  display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
  width:46px;height:42px;padding:0 11px;
  background:var(--branco);border:1px solid var(--linha);border-radius:var(--raio-peq);
  cursor:pointer;
}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--navy);border-radius:2px}

/* Menu: coluna no celular, linha no desktop */
.menu{
  display:none;width:100%;
  flex-direction:column;gap:2px;
  padding:6px 0 14px;
  font-size:.97rem;
}
.menu.aberto{display:flex}
.menu a{
  color:var(--tinta);text-decoration:none;font-weight:500;
  padding:10px 10px;border-radius:var(--raio-peq);
}
.menu a:hover{background:var(--salvia-100);color:var(--salvia-900)}
.menu a[aria-current="page"]{color:var(--salvia-700);font-weight:700}

/* Submenu de cidades (funciona sem script, via details/summary) */
.menu-cidades summary{
  cursor:pointer;font-weight:500;padding:10px 10px;border-radius:var(--raio-peq);
  list-style:none;display:flex;align-items:center;gap:6px;color:var(--tinta);
}
.menu-cidades summary::-webkit-details-marker{display:none}
.menu-cidades summary::after{content:"▾";font-size:.8em;color:var(--cinza)}
.menu-cidades summary:hover{background:var(--salvia-100)}
.menu-cidades .submenu{display:flex;flex-direction:column;padding-left:16px}

/* Botão WhatsApp do menu */
.menu .btn-whats{margin-top:6px}

@media (min-width:920px){
  .nav-toggle{display:none}
  .menu{display:flex;width:auto;flex-direction:row;align-items:center;gap:2px;padding:0}
  .menu .btn-whats{margin:0 0 0 8px}
  .menu-cidades{position:relative}
  .menu-cidades .submenu{
    position:absolute;top:calc(100% + 4px);left:0;min-width:190px;
    background:var(--branco);border:1px solid var(--linha);border-radius:var(--raio-peq);
    box-shadow:var(--sombra);padding:8px;z-index:60;
  }
}

/* ------------------------------------------------------------
   6. Botões
   ------------------------------------------------------------ */
.btn{
  display:inline-block;border-radius:30px;padding:13px 26px;
  font-weight:700;font-size:1rem;text-align:center;text-decoration:none;
  cursor:pointer;border:2px solid transparent;
  transition:background .15s,transform .15s,color .15s;
}
.btn:hover{transform:translateY(-1px);text-decoration:none}

.btn-whats{background:var(--zap);color:#fff!important}
.btn-whats:hover{background:var(--zap-escuro);color:#fff}

.btn-navy{background:var(--navy);color:#fff!important}
.btn-navy:hover{background:var(--navy-escuro);color:#fff}

.btn-claro{background:#fff;color:var(--navy)!important;border-color:var(--navy)}
.btn-claro:hover{background:var(--salvia-100)}

.btn-contorno{background:transparent;color:var(--salvia-700)!important;border-color:var(--salvia-500)}
.btn-contorno:hover{background:var(--salvia-100)}

.btn-grande{font-size:1.15rem;padding:17px 32px}

.icone-whats{width:1.25em;height:1.25em;vertical-align:-.24em;margin-right:.5em;fill:currentColor}

/* ------------------------------------------------------------
   7. Hero (texto + foto real em retrato)
   ------------------------------------------------------------ */
.hero{background:linear-gradient(180deg,var(--branco) 0%,var(--creme) 100%);padding:36px 0 44px}
.hero-grid{display:grid;gap:28px;align-items:center}
.hero h1{font-size:1.85rem;color:var(--navy)}
.hero .lema{font-size:1.22rem;color:var(--salvia-700);font-weight:600;margin-bottom:.9em}
.hero .apoio{color:var(--cinza);margin-bottom:1.4em}
.hero .sub{margin-top:.9em;font-size:.93rem;color:var(--cinza)}

/* Moldura da foto: a foto é vertical (1050x1400) — entra inteira, sem cortar prédio */
.hero-foto{margin:0;max-width:460px;justify-self:center;width:100%}
.hero-foto img{
  width:100%;aspect-ratio:3/4;object-fit:cover;
  border-radius:var(--raio);box-shadow:var(--sombra);
  border:6px solid var(--branco);
}
.hero-foto figcaption{font-size:.85rem;color:var(--cinza);text-align:center;padding-top:8px}

/* Selos de confiança (linha de itens curtos sob o CTA) */
.selos{list-style:none;margin:1.2em 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.selos li{
  background:var(--salvia-100);border:1px solid var(--salvia-200);
  color:var(--salvia-900);font-size:.86rem;font-weight:600;
  padding:6px 14px;border-radius:30px;margin:0;
}

@media (min-width:840px){
  .hero{padding:52px 0 60px}
  .hero-grid{grid-template-columns:1.15fr .85fr}
  .hero h1{font-size:2.3rem}
}

/* ------------------------------------------------------------
   8. Seções (blocos)
   ------------------------------------------------------------ */
.bloco{padding:44px 0}
.bloco-creme{background:var(--creme-escuro)}
.bloco-branco{background:var(--branco)}
.bloco-salvia{background:var(--salvia-100)}
.subtitulo{color:var(--cinza);max-width:680px;margin:0 auto 1.6em;text-align:center}
.titulo-secao{text-align:center;color:var(--navy)}
.filete{width:56px;height:3px;background:var(--salvia-500);border-radius:3px;margin:0 auto 1.6em}

/* ------------------------------------------------------------
   9. Cards em grade
   ------------------------------------------------------------ */
.grade{display:grid;grid-template-columns:1fr;gap:18px;margin-top:1.4em}
.card{
  background:var(--branco);border:1px solid var(--linha);border-radius:var(--raio);
  padding:24px 22px;box-shadow:var(--sombra-leve);
}
.card h3{display:flex;align-items:center;gap:10px;color:var(--salvia-900)}
.card .card-ico{
  width:42px;height:42px;flex:0 0 42px;border-radius:12px;
  background:var(--salvia-100);display:inline-flex;align-items:center;justify-content:center;
  font-size:1.3rem;
}
.card .card-ico svg{width:24px;height:24px;fill:var(--salvia-700)}
.card p{color:var(--cinza);margin-bottom:0}
.card ul{margin:.6em 0 0 1.1em;color:var(--cinza)}

@media (min-width:680px){.grade{grid-template-columns:repeat(2,1fr)}}
@media (min-width:920px){.grade-3{grid-template-columns:repeat(3,1fr)}}

/* ------------------------------------------------------------
   10. Lista do que está incluído (checklist)
   ------------------------------------------------------------ */
.inclusos{list-style:none;margin:1.4em 0 0;padding:0;display:grid;grid-template-columns:1fr;gap:10px}
.inclusos li{
  display:flex;align-items:flex-start;gap:12px;margin:0;
  background:var(--branco);border:1px solid var(--linha);border-radius:var(--raio-peq);
  padding:14px 16px;
}
.inclusos .check{width:24px;height:24px;flex:0 0 24px;fill:var(--salvia-500);margin-top:2px}
.inclusos span{color:var(--cinza)}
.inclusos strong{color:var(--tinta)}
@media (min-width:680px){.inclusos{grid-template-columns:repeat(2,1fr)}}

/* ------------------------------------------------------------
   11. Valores (cards de acomodação + tabela)
   ------------------------------------------------------------ */
.planos{display:grid;grid-template-columns:1fr;gap:18px;margin:1.4em 0 .8em}
.plano{
  background:var(--branco);border:1px solid var(--linha);border-radius:var(--raio);
  padding:28px 22px;text-align:center;box-shadow:var(--sombra-leve);
}
.plano-destaque{border:2px solid var(--salvia-500)}
.plano h3{color:var(--navy);margin-bottom:.1em}
.plano .faixa{font-size:1.6rem;font-weight:800;color:var(--salvia-900);margin:.25em 0}
.plano .mes{font-size:.92rem;color:var(--cinza);font-weight:400}
.plano .desc{color:var(--cinza);font-size:.95rem;margin:.6em 0 1.2em}
.plano-tag{
  display:inline-block;background:var(--salvia-100);color:var(--salvia-900);
  border:1px solid var(--salvia-200);font-size:.78rem;font-weight:700;
  padding:3px 12px;border-radius:20px;margin-bottom:.7em;letter-spacing:.02em;
}
.nota-valores{color:var(--cinza);font-size:.95rem;text-align:center;max-width:700px;margin:0 auto}
@media (min-width:760px){.planos{grid-template-columns:repeat(3,1fr)}}

table.tabela{
  width:100%;border-collapse:collapse;margin:1.4em 0;
  background:var(--branco);border-radius:var(--raio);overflow:hidden;box-shadow:var(--sombra-leve);
}
table.tabela th,table.tabela td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--linha)}
table.tabela th{background:var(--navy);color:#fff;font-weight:600}
table.tabela tr:last-child td{border-bottom:none}
table.tabela td strong{color:var(--salvia-700)}
.tabela-rolavel{overflow-x:auto}

/* ------------------------------------------------------------
   12. FAQ (acordeão nativo com details/summary)
   ------------------------------------------------------------ */
.faq{margin-top:1.4em}
.faq details{
  background:var(--branco);border:1px solid var(--linha);
  border-radius:var(--raio-peq);padding:2px 18px;margin-bottom:12px;
}
.faq summary{
  font-weight:600;cursor:pointer;padding:14px 0;list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:12px;color:var(--tinta);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--salvia-700);font-size:1.5rem;font-weight:700;line-height:1;flex:0 0 auto}
.faq details[open] summary::after{content:"–"}
.faq details p{color:var(--cinza);padding-bottom:14px;margin:0}
.faq details a{font-weight:600}

/* ------------------------------------------------------------
   13. Passos (como visitar)
   ------------------------------------------------------------ */
.passos{display:grid;grid-template-columns:1fr;gap:16px;margin-top:1.4em;counter-reset:passo}
.passo{
  background:var(--branco);border:1px solid var(--linha);border-radius:var(--raio-peq);
  padding:20px 20px 20px 66px;position:relative;
}
.passo::before{
  counter-increment:passo;content:counter(passo);
  position:absolute;left:18px;top:20px;width:34px;height:34px;
  background:var(--salvia-700);color:#fff;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-weight:700;
}
.passo h3{margin:0 0 .25em;font-size:1.08rem}
.passo p{margin:0;color:var(--cinza)}
@media (min-width:680px){.passos{grid-template-columns:repeat(2,1fr)}}

/* ------------------------------------------------------------
   14. Galeria de fotos reais (formato retrato 3:4)
   ------------------------------------------------------------ */
.galeria{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:1.4em}
.galeria figure{
  margin:0;background:var(--branco);border:1px solid var(--linha);
  border-radius:var(--raio);overflow:hidden;box-shadow:var(--sombra-leve);
}
.galeria img{width:100%;aspect-ratio:3/4;object-fit:cover}
.galeria figcaption{font-size:.85rem;color:var(--cinza);padding:9px 12px;background:var(--branco)}
@media (min-width:680px){.galeria{grid-template-columns:repeat(3,1fr)}}
@media (min-width:920px){.galeria-4{grid-template-columns:repeat(4,1fr)}}

/* Foto solta dentro de uma página de conteúdo (também retrato) */
.figura-retrato{margin:1.6em auto;max-width:440px}
.figura-retrato img{width:100%;border-radius:var(--raio);box-shadow:var(--sombra);border:6px solid var(--branco)}
.figura-retrato figcaption{font-size:.85rem;color:var(--cinza);text-align:center;padding-top:8px}

/* Legenda discreta sob a galeria (transparência sobre as fotos) */
.nota-fotos{font-size:.88rem;color:var(--cinza);text-align:center;margin-top:1em;font-style:italic}

/* ------------------------------------------------------------
   15. Caixa de chamada (CTA)
   ------------------------------------------------------------ */
.cta{
  background:linear-gradient(160deg,var(--navy) 0%,var(--navy-escuro) 100%);
  color:#fff;border-radius:var(--raio);padding:38px 26px;text-align:center;margin:34px 0 4px;
}
.cta h2{color:#fff;margin-top:0}
.cta p{color:#dde6f0;max-width:620px;margin:0 auto 1.3em}
.cta .btn-whats{background:#fff;color:var(--zap-escuro)!important}
.cta .btn-whats:hover{background:var(--salvia-100)}

/* ------------------------------------------------------------
   16. Mapa e blocos de localização
   ------------------------------------------------------------ */
.mapa{border:0;width:100%;height:340px;border-radius:var(--raio);box-shadow:var(--sombra-leve)}
.endereco-box{
  background:var(--branco);border:1px solid var(--linha);border-radius:var(--raio);
  padding:22px;box-shadow:var(--sombra-leve);
}
.endereco-box p{margin-bottom:.5em;color:var(--cinza)}

/* ------------------------------------------------------------
   17. Blog (lista e artigo)
   ------------------------------------------------------------ */
.lista-posts{display:grid;grid-template-columns:1fr;gap:18px;margin-top:1.4em}
.post-card{
  background:var(--branco);border:1px solid var(--linha);border-radius:var(--raio);
  padding:24px 22px;box-shadow:var(--sombra-leve);
}
.post-card h3{margin-top:0}
.post-card h3 a{color:var(--navy);text-decoration:none}
.post-card h3 a:hover{color:var(--salvia-700);text-decoration:underline}
.post-card p{color:var(--cinza)}
.post-card .mais{font-weight:700;color:var(--salvia-700)}
.post-card .post-meta{font-size:.82rem;color:var(--cinza);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.5em}
@media (min-width:680px){.lista-posts{grid-template-columns:repeat(2,1fr)}}

.artigo{max-width:760px;margin:0 auto;padding:34px 20px 10px}
.artigo .meta{color:var(--cinza);font-size:.9rem;margin-bottom:1.6em}
.artigo h1{color:var(--navy)}
.artigo h2{margin-top:1.6em;color:var(--salvia-900)}
.artigo img{border-radius:var(--raio);margin:1.2em 0}
.artigo blockquote{
  border-left:4px solid var(--salvia-500);padding:.4em 0 .4em 1.1em;
  color:var(--cinza);font-style:italic;margin:1.2em 0;
}
.artigo .voltar{display:inline-block;margin:1.6em 0 .4em;color:var(--cinza)}

/* ------------------------------------------------------------
   18. Migalhas (breadcrumb) e avisos
   ------------------------------------------------------------ */
.trilha{font-size:.88rem;color:var(--cinza);padding:14px 0 0}
.trilha a{color:var(--salvia-700)}

.nota{font-size:.9rem;color:var(--cinza)}
.nota-destacada{
  background:var(--salvia-100);border-left:4px solid var(--salvia-500);
  border-radius:0 var(--raio-peq) var(--raio-peq) 0;padding:14px 18px;margin:1.2em 0;
  color:var(--salvia-900);font-size:.95rem;
}

/* ------------------------------------------------------------
   19. Rodapé
   ------------------------------------------------------------ */
.rodape{background:var(--navy-escuro);color:#dde6f0;padding:44px 0 28px;margin-top:40px}
.rodape a{color:#fff}
.rodape a:hover{color:var(--salvia-200)}
.rodape-cols{display:grid;grid-template-columns:1fr;gap:28px}
.rodape-titulo{color:#fff;font-weight:700;font-size:1.05rem;margin:0 0 .7em}
.rodape p{margin:0 0 .55em;color:#c7d3e2;font-size:.95rem}
.rodape .lema-rodape{font-style:italic;color:#aebfd4}
.rodape .menu-rodape{list-style:none;margin:0;padding:0}
.rodape .menu-rodape li{margin:0 0 .45em}
.rodape .menu-rodape a{text-decoration:none}
.rodape .menu-rodape a:hover{text-decoration:underline}
.rodape .legal{
  border-top:1px solid rgba(255,255,255,.18);margin-top:30px;padding-top:18px;
  font-size:.84rem;color:#9fb0c6;text-align:center;
}
@media (min-width:920px){.rodape-cols{grid-template-columns:1.4fr 1fr 1fr}}

/* ------------------------------------------------------------
   20. Botão flutuante do WhatsApp
   ------------------------------------------------------------ */
.zap-flutuante{
  position:fixed;right:18px;bottom:18px;z-index:99;
  width:60px;height:60px;border-radius:50%;
  background:var(--zap);display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,.28);transition:transform .15s,background .15s;
}
.zap-flutuante:hover{background:var(--zap-escuro);transform:scale(1.06)}
.zap-flutuante svg{width:32px;height:32px;fill:#fff}
.zap-flutuante .rotulo{
  position:absolute;right:72px;white-space:nowrap;
  background:var(--branco);color:var(--tinta);
  padding:8px 14px;border-radius:20px;font-size:.9rem;font-weight:600;
  box-shadow:var(--sombra);opacity:0;pointer-events:none;transition:opacity .2s;
}
.zap-flutuante:hover .rotulo,.zap-flutuante:focus-visible .rotulo{opacity:1}

/* ------------------------------------------------------------
   21. Impressão
   ------------------------------------------------------------ */
@media print{
  .a11y-bar,.zap-flutuante,.nav-toggle,.menu,.cta .btn{display:none!important}
  body{background:#fff;color:#000}
  .rodape{background:#fff;color:#000}
  .rodape a{color:#000}
}

/* Dica do botão flutuante no celular: mostra o rótulo por alguns segundos */
@media (max-width:760px){
  .zap-flutuante .rotulo{animation:zapdica 6s ease 1.5s both}
}
@keyframes zapdica{0%,10%{opacity:0}20%,80%{opacity:1}100%{opacity:0}}

/* ------------------------------------------------------------
   22. Hero — selo e link de vídeo
   ------------------------------------------------------------ */
.hero-olho{
  font-size:.8rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--salvia-700);margin-bottom:.8em;display:flex;align-items:center;gap:8px;flex-wrap:wrap;
}
.hero-olho span{opacity:.35}
.hero-olho em{
  font-style:normal;color:var(--navy);background:var(--salvia-100);
  border:1px solid var(--salvia-200);padding:3px 12px;border-radius:20px;letter-spacing:.04em;
}

/* ------------------------------------------------------------
   23. Seção de vídeos ("Amar é cuidar")
   ------------------------------------------------------------ */
.olho-secao{
  text-align:center;color:var(--salvia-700);font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;font-size:.8rem;margin:0 0 .55em;
}
.olho-claro{color:var(--salvia-200);text-align:left}

/* ------------------------------------------------------------
   24. Faixa-convite (vídeo vertical do porta-voz)
   ------------------------------------------------------------ */
.convite-video{
  background:linear-gradient(160deg,var(--navy) 0%,var(--navy-escuro) 100%);
  color:#fff;
}
.convite-grid{display:grid;gap:18px;justify-items:start;max-width:680px;margin:0 auto}
.convite-texto h2{color:#fff;font-size:1.85rem;margin-bottom:.5em}
.convite-texto p{color:#d7e2f0;max-width:600px}
.convite-texto .btn-whats{margin-top:.5em}

/* ------------------------------------------------------------
   25. Site em VÍDEO (v3) — hero e seções com vídeo
   ------------------------------------------------------------ */
.hero-video-full{padding:46px 0 10px;text-align:center}
.hero-video-full .hero-olho{justify-content:center}
.hero-video-full h1{max-width:16ch;margin:.1em auto .25em}
.hero-video-full .lema{max-width:48ch;margin:0 auto 1.4em;color:var(--cinza)}
.hero-ctas{margin-top:1.4em;display:flex;flex-direction:column;align-items:center;gap:.5em}
.video-hero{max-width:760px;margin:0 auto}

.secao-video .video-grid{display:grid;gap:24px;align-items:center}
@media (min-width:820px){
  .secao-video .video-grid{grid-template-columns:1fr 1fr;gap:40px}
  .secao-video .video-grid.invertido .video-texto{order:2}
  .secao-video .video-grid.invertido figure{order:1}
}
.video-texto h2{margin:.15em 0 .45em}
.video-texto p{color:var(--cinza);max-width:48ch}
.inclusos-mini{list-style:none;margin:.4em 0 0;padding:0;display:grid;gap:.7em}
.inclusos-mini li{position:relative;padding-left:1.7em;color:var(--cinza)}
.inclusos-mini li::before{content:"✓";position:absolute;left:0;top:0;color:var(--salvia-700);font-weight:800}
.inclusos-mini strong{color:var(--navy)}

/* Moldura do player (poster + play sobreposto) */
.video-moldura{
  position:relative;border-radius:var(--raio);overflow:hidden;margin:0;
  background:#0e1c13;aspect-ratio:16/9;
  border:6px solid var(--branco);box-shadow:var(--sombra);
}
.video-moldura video{width:100%;height:100%;object-fit:cover;display:block;background:#0e1c13}
.play-selo{
  position:absolute;inset:0;margin:auto;width:76px;height:76px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.94);border:none;border-radius:50%;cursor:pointer;
  box-shadow:0 10px 30px rgba(0,0,0,.34);transition:transform .18s,background .18s;
}
.play-selo svg{width:34px;height:34px;fill:var(--salvia-900);margin-left:5px}
.play-selo:hover{transform:scale(1.07);background:#fff}
.play-selo::after{
  content:"";position:absolute;inset:-12px;border-radius:50%;
  border:2px solid rgba(255,255,255,.7);animation:pulsoplay 2.6s ease-out infinite;
}
@keyframes pulsoplay{0%{transform:scale(.92);opacity:.75}100%{transform:scale(1.55);opacity:0}}
.video-moldura.tocando .play-selo{display:none}
@media (prefers-reduced-motion:reduce){.play-selo::after{animation:none}}

/* texto claro na faixa-convite (fundo navy) */
.convite-video .video-texto h2{color:#fff}
.convite-video .video-texto p{color:#dce6f2}

/* ------------------------------------------------------------
   26. Seção podcast (player de áudio)
   ------------------------------------------------------------ */
.podcast-player{max-width:660px;margin:1.6em auto 0;text-align:center}
.podcast-player audio{width:100%;display:block;border-radius:10px}
.podcast-dica{color:var(--cinza);font-size:.95rem;margin-top:.9em}