/* Landing de Atendimento (/atendimento/), versão de 16/09 à noite: por cima do /sites/landing.css.
   Estrutura pedida pelo Fábio: header + vídeo do castor na lua como abertura → quatro fotos em tela cheia, uma
   cobrindo a outra na rolagem → na última a cor escurece aos poucos até o tema noturno → cards dos planos → fecho. */

:root { --noite-cor: #0b0d14; --acento: #f0a27f; }
body.represa { background: var(--noite-cor); color: var(--paper); }

/* ---------- header escuro (como em /marketing/) ---------- */
body.represa .nav { background: rgba(10, 10, 10, 0.72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
body.represa .brand { color: var(--paper); }
body.represa .brand svg rect { fill: var(--paper); }
body.represa .nav__links a { color: var(--paper); }
body.represa .nav__lang { border-left-color: rgba(247, 246, 243, 0.22); }
/* o botão do cabeçalho segue o vidro do landing.css */

.eyebrow { font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--acento); font-weight: 700; }

/* ---------- abertura: o castor na lua, digitando ---------- */
.lua { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: var(--noite-cor); }
.lua__midia { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 72% 50%; }
.lua__video { opacity: 0; transition: opacity 0.8s var(--ease); }
.lua__video.is-on { opacity: 1; }
.lua::before { content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(11, 13, 20, 0.9) 0%, rgba(11, 13, 20, 0.66) 32%, rgba(11, 13, 20, 0) 60%),
              linear-gradient(0deg, rgba(11, 13, 20, 0.55) 0%, rgba(11, 13, 20, 0) 32%); }
.lua .shell { position: relative; z-index: 2; height: 100%; display: grid; align-content: center; }
.lua__copy { display: grid; gap: 1.1rem; max-width: 620px; padding-top: var(--nav-h); }
.lua__copy h1 { font-size: clamp(2.6rem, 5.6vw, 5.4rem); max-width: 12ch; }
.lua__copy p { color: rgba(247, 246, 243, 0.78); font-size: clamp(1.05rem, 1.45vw, 1.3rem); line-height: 1.45; max-width: 42ch; }
.lua__actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 0.4rem; }
/* botões translúcidos sobre a noite: vidro claro, texto claro */
.lua .btn { color: var(--paper); border: 1px solid rgba(247, 246, 243, 0.3); background: rgba(247, 246, 243, 0.1);
  backdrop-filter: blur(12px) saturate(140%); -webkit-backdrop-filter: blur(12px) saturate(140%); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); }
.lua .btn--primary { background: rgba(247, 246, 243, 0.18); border-color: rgba(247, 246, 243, 0.55); font-weight: 700; }
.lua .btn:hover { background: rgba(247, 246, 243, 0.28); }

/* ---------- as quatro fotos: cada uma gruda e a seguinte cobre ---------- */
.foto { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: var(--noite-cor); }
.foto__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; transform: scale(1.06); transition: transform 1.6s var(--ease); }
.foto.is-on .foto__img { transform: scale(1); }
.foto::before { content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(8, 9, 14, 0.86) 0%, rgba(8, 9, 14, 0.58) 30%, rgba(8, 9, 14, 0) 58%),
              linear-gradient(0deg, rgba(8, 9, 14, 0.55) 0%, rgba(8, 9, 14, 0) 32%); }
.foto__copy { position: absolute; z-index: 2; left: var(--gutter); bottom: clamp(56px, 12vh, 120px); max-width: min(540px, 42vw); display: grid; gap: 16px; }
.foto__copy h2 { font-size: clamp(2.1rem, 4.2vw, 4.2rem); line-height: 0.96; letter-spacing: -0.045em; text-shadow: 0 2px 22px rgba(0, 0, 0, 0.55); }
.foto__copy p { text-shadow: 0 1px 14px rgba(0, 0, 0, 0.6); } /* 17/09: letras claras somiam sobre a janela clara da foto 4 */
.foto__copy p { color: rgba(247, 246, 243, 0.8); font-size: clamp(1rem, 1.25vw, 1.2rem); line-height: 1.5; max-width: 40ch; }
.foto__chip { justify-self: start; display: inline-flex; align-items: center; gap: 10px; padding: 11px 16px 11px 12px; border-radius: 999px;
  background: rgba(247, 246, 243, 0.12); border: 1px solid rgba(247, 246, 243, 0.22); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-weight: 700; font-size: 0.95rem; color: var(--paper); }
.foto__chip svg { width: 22px; height: 22px; flex: none; }
.foto__copy > * { opacity: 0; transform: translateY(18px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.foto.is-on .foto__copy > * { opacity: 1; transform: none; }
.foto.is-on .foto__copy > :nth-child(2) { transition-delay: 0.06s; }
.foto.is-on .foto__copy > :nth-child(3) { transition-delay: 0.12s; }
.foto.is-on .foto__copy > :nth-child(4) { transition-delay: 0.18s; }

/* a última foto: mais alta, e a rolagem extra escurece a cena até o tema noturno dos planos */
.foto--fim { position: relative; height: 200vh; height: 200svh; overflow: visible; --noite: 0; }
.foto--fim .foto__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.foto--fim .foto__img { filter: saturate(calc(1 - 0.45 * var(--noite))) brightness(calc(1 - 0.25 * var(--noite))); }
.foto--fim::before { display: none; }
.foto--fim .foto__sticky::before { content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(8, 9, 14, 0.86) 0%, rgba(8, 9, 14, 0.58) 30%, rgba(8, 9, 14, 0) 58%),
              linear-gradient(0deg, rgba(8, 9, 14, 0.55) 0%, rgba(8, 9, 14, 0) 32%); }
.foto__noite { position: absolute; inset: 0; z-index: 1; background: var(--noite-cor); opacity: calc(var(--noite) * 0.94); pointer-events: none; }
.foto--fim .foto__copy { opacity: calc(1 - var(--noite) * 1.6); } /* a copy some enquanto a cena vira noite */

/* ---------- planos e o resto no tema noturno ---------- */
.plans { position: relative; z-index: 2; background: var(--noite-cor); }
.plans .section-head p, .plans .ledger-note { color: rgba(247, 246, 243, 0.62); }
.plans .plan-slot__mascot { bottom: calc(100% - 44px); }
.plans .section-head { margin-bottom: clamp(150px, 20vh, 210px); } /* espaço para a cabeça do castor do card do meio (206 px de altura, 44 px dentro do card) */
.plan-card--anchor .plan-card__tag { background: var(--rust); color: var(--paper); }
.plans .plan-card, .plans .plan-card h3, .plans .plan-card li, .plans .plan-card p { color: var(--ink); }
#perguntas { position: relative; z-index: 2; background: var(--noite-cor); }
/* perguntas no tema noturno: o .panel do landing.css é claro e o texto herdava a cor clara da página */
#perguntas .panel { background: rgba(247, 246, 243, 0.05); border-color: rgba(247, 246, 243, 0.12); box-shadow: none; color: var(--paper); }
#perguntas .section-head { align-content: start; }
#perguntas .section-head p { color: rgba(247, 246, 243, 0.64); }
#perguntas details { border-top-color: rgba(247, 246, 243, 0.14); }
#perguntas details:last-child { border-bottom-color: rgba(247, 246, 243, 0.14); }
#perguntas summary { color: var(--paper); }
#perguntas summary:hover { color: var(--acento); }
#perguntas summary::after { color: var(--acento); }
#perguntas summary:focus-visible { outline: 2px solid var(--acento); outline-offset: 4px; border-radius: 6px; }
#perguntas details p { color: rgba(247, 246, 243, 0.72); }
.final { background: #0a0a0a; } /* opaco: com 96%, o texto da foto 3 (fixa atrás) aparecia apagado atrás do título */
.footer .brand svg polygon { fill: var(--ink); }

@media (max-width: 980px) {
  #perguntas .faq { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 860px) {
  .lua__midia, .foto__img { object-position: 62% 50%; }
  /* no celular o vídeo vira uma faixa em cima (castor e pop-ups inteiros) e o texto fica embaixo, no escuro */
  .lua__midia { height: 58%; object-position: 60% 50%; }
  .lua::before { background: linear-gradient(180deg, rgba(11, 13, 20, 0) 30%, rgba(11, 13, 20, 0.85) 52%, var(--noite-cor) 58%); }
  .lua .shell { align-content: end; padding-bottom: 7vh; }
  .lua__copy { max-width: none; }
  .foto__copy { left: var(--gutter); right: var(--gutter); max-width: none; bottom: 9vh; }
}
@media (prefers-reduced-motion: reduce) {
  .lua__video { display: none; }
  .foto__img { transform: none; transition: none; }
  .foto__copy > * { opacity: 1; transform: none; transition: none; }
}