/* Dra. Thamara Martins — o estúdio do espelho.
   Cores tiradas da clínica real: parede branca, latão das letras e do logo,
   moldura do espelho, o rosé do vestido e a luz quente do ambiente. */

:root {
  --parede: #FFFBFA;
  --nevoa: #FBEFEB;
  --vestido: #F5E3DF;
  --cafe: #2E201B;
  --cafe-suave: #6B5750;
  --latao: #B08A5B;          /* linhas e ornamentos */
  --latao-texto: #8A6440;    /* letreiro do arco, sobre fundo claro */
  --latao-luz: #F2DDB9;      /* latão sobre a noite */
  --acao: #7A5231;
  --acao-alto: #86603F;
  --acao-press: #5F3F25;
  --aberto: #3E7B53;

  --latao-metal: linear-gradient(145deg, #EBD2AA 0%, #B08A5B 26%, #F4E1C0 47%, #9C7648 70%, #D9B88F 100%);
  --anel: conic-gradient(from 200deg, #EBD2AA, #9C7648, #E9C6BF, #B08A5B, #EBD2AA);

  /* Sombras em camadas, tingidas de marrom — nunca cinza. */
  --sombra-1: 0 1px 2px rgb(46 32 27 / 0.06), 0 6px 14px -6px rgb(122 82 49 / 0.2);
  --sombra-2: 0 2px 4px rgb(46 32 27 / 0.05), 0 20px 40px -18px rgb(122 82 49 / 0.38);
  --sombra-espelho: 0 2px 3px rgb(46 32 27 / 0.12), 0 22px 40px -18px rgb(90 58 32 / 0.5), 0 50px 80px -40px rgb(90 58 32 / 0.35);

  --serifa: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
  --sans: "Jost", "Futura", system-ui, sans-serif;

  --motion-instant: 90ms;
  --motion-fast: 150ms;
  --motion-standard: 220ms;
  --motion-emphasis: 340ms;
  --motion-scene: 460ms;
  --motion-signature: 800ms;

  --ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-exit: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-standard: cubic-bezier(0.65, 0, 0.35, 1);

  --shift-sm: 6px;
  --press-scale: 0.98;

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --gutter: 20px;
  /* margem lateral que também centraliza o conteúdo em telas largas (conteúdo máx. 520px) */
  --lado: max(var(--gutter), calc((100% - 520px) / 2));
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --shift-sm: 0px;
    --press-scale: 1;
    --motion-scene: 200ms;
    --motion-emphasis: 200ms;
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--parede);
  color: var(--cafe);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

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

a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--cafe);
  outline-offset: 3px;
  border-radius: 6px;
}

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.pular {
  position: absolute;
  left: 12px;
  top: calc(-60px + var(--safe-top));
  z-index: 30;
  min-height: 48px;
  padding: 12px 16px;
  background: var(--cafe);
  color: var(--parede);
  border-radius: 8px;
  text-decoration: none;
}
.pular:focus { top: calc(12px + var(--safe-top)); }

.palco,
main > section,
.rodape {
  width: 100%;
  padding-inline: var(--lado);
}

/* ======================================================================
   Cena 1 — o estúdio
   ====================================================================== */

.palco {
  position: relative;
  isolation: isolate;
  padding-top: calc(4px + var(--safe-top));
  padding-bottom: 28px;
}

/* Luz ambiente: janela quente no alto, rosé atrás do espelho, textura estática. */
.palco__luz {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    /* dissolve a luz no branco no fim do hero, sem emenda com a cena seguinte */
    linear-gradient(180deg, transparent 72%, var(--parede) 100%),
    radial-gradient(70% 38% at 50% 30%, rgb(245 227 223 / 0.95), transparent 72%),
    radial-gradient(46% 26% at 86% 6%, rgb(235 210 170 / 0.45), transparent 70%),
    radial-gradient(40% 24% at 8% 58%, rgb(233 198 191 / 0.4), transparent 70%),
    linear-gradient(180deg, #FDF3F0 0%, var(--parede) 78%);
}
.palco__luz::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.16;
  mix-blend-mode: multiply;
  -webkit-mask-image: linear-gradient(180deg, #000 65%, transparent);
  mask-image: linear-gradient(180deg, #000 65%, transparent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .18 0 0 0 0 .12 0 0 0 0 .1 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Barra do perfil, como no app. */
.topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 52px;
}

.topo__perfil {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-weight: 500;
  font-size: 17px;
}

.topo__selo {
  color: #0095F6;
  font-size: 14px;
}

.topo__compartilhar {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-right: -10px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--cafe);
  font-size: 18px;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--motion-fast) var(--ease-standard), transform var(--motion-fast) var(--ease-standard);
}
.topo__compartilhar[hidden] { display: none; }
.topo__compartilhar:active { background: rgb(176 138 91 / 0.16); transform: scale(0.92); }

/* ---------- O espelho 3D ---------- */

.espelho {
  position: relative;
  margin-top: 2px;
  perspective: 1100px;
  touch-action: pan-y;
}

.espelho__objeto {
  position: relative;
  padding-bottom: 40px; /* a placa cobre a base do espelho */
  transform-style: preserve-3d;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 900ms var(--ease-enter);
}
.espelho__objeto.is-tocando { transition: transform 140ms linear; }

.espelho__arco {
  /* o espelho fica um pouco atrás da placa; a escala compensa a perspectiva */
  --arco-base: translateZ(-26px) scale(1.024);
  position: relative;
  display: flow-root; /* a margem da moldura não vaza e o letreiro fica visível */
  width: min(74%, 272px, 36vh);
  width: min(74%, 272px, 36svh);
  margin-inline: auto;
  transform-style: preserve-3d;
  transform: var(--arco-base);
}

.espelho__letreiro {
  position: absolute;
  inset: 0 0 auto;
  width: 100%;
  height: auto;
  overflow: visible;
  pointer-events: none;
}

.espelho__letreiro text {
  font-family: var(--serifa);
  font-style: italic;
  font-size: 16px;
  letter-spacing: 0.05em;
  fill: var(--latao-texto);
}

/* Moldura de latão com volume: brilho metálico, borda clara em cima, sombra embaixo. */
.espelho__moldura {
  margin: 11.25% 6.9% 0;
  padding: 7px;
  border-radius: 1000px 1000px 12px 12px;
  background: var(--latao-metal);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.55),
    inset 0 -2px 3px rgb(80 50 25 / 0.35),
    var(--sombra-espelho);
}

.espelho__vidro {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transform: translateZ(0); /* evita vazamento do arco no Safari em contexto 3D */
  border-radius: 1000px 1000px 6px 6px;
  background: var(--vestido);
}
/* Aro claro por dentro e profundidade do vidro. */
.espelho__vidro::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  pointer-events: none;
  box-shadow:
    inset 0 0 0 3px rgb(255 251 250 / 0.9),
    inset 0 10px 24px rgb(46 32 27 / 0.22);
}

.espelho__foto {
  width: 100%;
  aspect-ratio: 619 / 886;
  object-fit: cover;
  object-position: 50% 0%;
}

/* Reflexo do vidro: acompanha a inclinação (--gx) e corre uma vez na entrada. */
.espelho__brilho {
  position: absolute;
  inset: -10% -60%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(112deg,
    transparent 38%,
    rgb(255 255 255 / 0.26) 46%,
    rgb(255 255 255 / 0.08) 52%,
    transparent 58%);
  transform: translateX(calc(34% + var(--gx, 0%)));
  transition: transform 900ms var(--ease-enter);
}
.is-tocando .espelho__brilho { transition-duration: 140ms; }

/* Placa de vidro fosco à frente do espelho: fica mais perto do olhar (translateZ). */
.placa {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: min(100%, 380px);
  margin-inline: auto;
  padding: 14px 14px 12px;
  text-align: center;
  background: rgb(255 251 250 / 0.9);
  border: 1px solid rgb(176 138 91 / 0.42);
  border-radius: 20px;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.9), var(--sombra-2);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .placa {
    background: rgb(255 251 250 / 0.78);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    backdrop-filter: blur(14px) saturate(1.2);
  }
}
.placa::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 50%;
  width: 72px;
  height: 2px;
  border-radius: 2px;
  background: var(--latao-metal);
  transform: translateX(-50%);
}

.placa__nome {
  margin: 0;
  font-family: var(--serifa);
  font-weight: 500;
  font-size: clamp(24px, 7.6vw, 32px);
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.placa__papel {
  margin: 6px 0 0;
  color: var(--cafe-suave);
  font-size: 16px;
  font-weight: 500;
}

/* Sombra no chão: fica fora do objeto, então não inclina junto. */
.espelho__sombra {
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: -14px;
  height: 28px;
  z-index: -1;
  background: radial-gradient(50% 50% at 50% 50%, rgb(90 58 32 / 0.24), transparent 72%);
}

/* ---------- Números, bio e ações (lógica do perfil) ---------- */

.numeros {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}
.numeros li + li { border-left: 1px solid rgb(176 138 91 / 0.35); }

.numeros__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 58px;
  padding: 4px;
  border-radius: 12px;
  text-align: center;
  text-decoration: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--motion-fast) var(--ease-standard);
}
.numeros__item:active { background: rgb(245 227 223 / 0.8); }
.numeros__item strong { font-weight: 500; font-size: 18px; line-height: 1.2; }
.numeros__item span { color: var(--cafe-suave); font-size: 14px; line-height: 1.3; }

.bio {
  margin: 14px auto 0;
  max-width: 38ch;
  text-align: center;
  font-size: 16px;
}

/* ---------- Ações ---------- */

.acao {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 14px 22px;
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform var(--motion-fast) var(--ease-standard),
    box-shadow var(--motion-fast) var(--ease-standard),
    background-color var(--motion-fast) var(--ease-standard),
    color var(--motion-fast) var(--ease-standard);
}

.acao i { font-size: 20px; }

.acao:active { transform: translateY(1px) scale(var(--press-scale)); }

/* Botões principais: topo em arco como o espelho, volume de latão escuro. */
.acao--principal,
.acao--cuidado {
  border-radius: 28px 28px 8px 8px;
  background: linear-gradient(180deg, var(--acao-alto), var(--acao));
  color: var(--parede);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.18),
    0 1px 2px rgb(46 32 27 / 0.2),
    0 14px 26px -14px rgb(122 82 49 / 0.75);
}
.acao--principal:active,
.acao--cuidado:active {
  background: var(--acao-press);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.1), 0 1px 2px rgb(46 32 27 / 0.2);
}


.acao--contorno {
  border-radius: 28px 28px 8px 8px;
  border: 1.5px solid var(--acao);
  color: var(--acao);
  background: transparent;
}
.acao--contorno:active { background: var(--vestido); }

.acao--luz {
  width: 100%;
  margin-top: 32px;
  border-radius: 28px 28px 8px 8px;
  background: linear-gradient(180deg, #F6E6C9, #DDBE95);
  color: var(--cafe);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.7),
    0 18px 36px -16px rgb(221 190 149 / 0.55);
}
.acao--luz:active { background: #D6B489; box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.5); }

@media (hover: hover) and (pointer: fine) {
  .acao--principal:hover,
  .acao--cuidado:hover { background: var(--acao-press); }
  .acao--contorno:hover { background: var(--vestido); }
  .acao--luz:hover { background: #F2DDB9; }
}

/* ======================================================================
   Títulos das cenas
   ====================================================================== */

.titulo {
  margin: 0;
  font-family: var(--serifa);
  font-weight: 400;
  font-size: clamp(28px, 7.8vw, 34px);
  line-height: 1.15;
}

.apoio {
  margin: 10px 0 0;
  color: var(--cafe-suave);
  max-width: 38ch;
  font-size: 16px;
}

/* ======================================================================
   Cena 2 — cuidados em carrossel de posts
   ====================================================================== */

.cuidados {
  padding-top: 40px;
  padding-bottom: 36px;
  background: linear-gradient(180deg, var(--parede), var(--nevoa) 55%, var(--parede));
}

.carrossel { margin-top: 20px; }

.carrossel__trilho {
  display: flex;
  gap: 14px;
  margin: 0 calc(-1 * var(--lado));
  padding: 10px var(--lado) 34px;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--lado);
  scrollbar-width: none;
}
.carrossel__trilho::-webkit-scrollbar { display: none; }
.carrossel__trilho:focus-visible { outline-offset: -3px; border-radius: 12px; }

.post {
  flex: 0 0 min(84%, 400px);
  scroll-snap-align: center;
}

.post__cartao {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid rgb(176 138 91 / 0.22);
  border-radius: 26px;
  background: var(--parede);
  box-shadow: var(--sombra-2);
}

.post__midia {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  background:
    radial-gradient(90% 90% at 25% 15%, #FFFFFF, transparent 60%),
    radial-gradient(80% 90% at 85% 100%, rgb(217 184 143 / 0.5), transparent 62%),
    var(--vestido);
}

/* Mini espelho de latão com o ícone do cuidado. */
.post__nicho {
  width: 78px;
  height: 100px;
  padding: 5px;
  border-radius: 999px 999px 10px 10px;
  background: var(--latao-metal);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.5), 0 14px 26px -12px rgb(90 58 32 / 0.55);
}
.post__nicho i {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: 999px 999px 6px 6px;
  background: linear-gradient(180deg, #FFFFFF, var(--vestido));
  color: var(--acao);
  font-size: 28px;
  box-shadow: inset 0 6px 14px rgb(46 32 27 / 0.14);
}

.post__contador {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgb(46 32 27 / 0.72);
  color: var(--parede);
  font-size: 13px;
  font-weight: 500;
}

.post__corpo {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 18px 18px 20px;
}
.post__corpo p { margin: 8px 0 0; font-size: 16px; }

.post__titulo {
  margin: 0;
  font-family: var(--serifa);
  font-weight: 500;
  font-size: 26px;
  line-height: 1.15;
}

.post__temas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 20px;
  padding: 0;
  list-style: none;
}
.post__temas li {
  padding: 5px 12px;
  border: 1px solid rgb(176 138 91 / 0.35);
  border-radius: 999px;
  background: var(--nevoa);
  font-size: 14px;
}

.post__corpo .acao { margin-top: auto; }

/* Coverflow ligado ao deslizar: o card do centro fica de frente, os vizinhos giram. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .post__cartao {
      animation: post-fluxo linear both;
      animation-timeline: view(inline);
    }
  }
}
@keyframes post-fluxo {
  0%       { transform: perspective(1000px) rotateY(-18deg) scale(0.9); opacity: 0.55; }
  40%, 60% { transform: none; opacity: 1; }
  100%     { transform: perspective(1000px) rotateY(18deg) scale(0.9); opacity: 0.55; }
}

.carrossel__pontos {
  display: flex;
  justify-content: center;
  gap: 2px;
  margin-top: -18px;
}
.carrossel__pontos[hidden] { display: none; }
.carrossel__pontos button {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.carrossel__pontos button::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: rgb(107 87 80 / 0.35);
  transition: width var(--motion-standard) var(--ease-enter), background-color var(--motion-standard) var(--ease-standard);
}
.carrossel__pontos button[aria-current="true"]::before {
  width: 20px;
  background: var(--acao);
}

/* ======================================================================
   Cena 3 — a clínica
   ====================================================================== */

.casa {
  padding-top: 24px;
  padding-bottom: 48px;
}

.casa__cartao {
  padding: 28px 20px 20px;
  border: 1px solid rgb(176 138 91 / 0.45);
  border-radius: 120px 120px 18px 18px / 56px 56px 18px 18px;
  background: linear-gradient(180deg, #FFFFFF, var(--parede));
  box-shadow: var(--sombra-2);
}

.casa__identidade {
  display: flex;
  align-items: center;
  gap: 14px;
}

.casa__anel {
  position: relative;
  isolation: isolate;
  flex: none;
  width: 70px;
  height: 70px;
  padding: 3px;
  border-radius: 50%;
}
.casa__anel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 50%;
  background: var(--anel);
}

.casa__logo {
  width: 100%;
  height: 100%;
  border: 3px solid var(--parede);
  border-radius: 50%;
  object-fit: cover;
}

.casa__nome {
  margin: 0;
  font-family: var(--serifa);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.2;
}

.casa__arroba {
  margin: 2px 0 0;
  color: var(--cafe-suave);
  font-size: 16px;
}

.casa__texto { margin: 16px 0 0; font-size: 16px; }

.casa__acao {
  width: 100%;
  margin-top: 20px;
}

/* ======================================================================
   Cena 4 — visita
   ====================================================================== */

.visita {
  padding-top: 8px;
  padding-bottom: 64px;
}

.status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0 0;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--nevoa);
  border: 1px solid rgb(176 138 91 / 0.3);
  font-size: 15px;
  font-weight: 500;
}
.status[hidden] { display: none; }
.status__ponto {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cafe-suave);
}
.status.is-aberto .status__ponto {
  background: var(--aberto);
  box-shadow: 0 0 0 4px rgb(62 123 83 / 0.16);
}

.mapa-cartao {
  margin-top: 20px;
  overflow: hidden;
  border: 1px solid rgb(176 138 91 / 0.22);
  border-radius: 24px;
  background: var(--parede);
  box-shadow: var(--sombra-2);
}

.mapa {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--vestido);
}

.mapa__arte {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.mapa__ruas path,
.mapa__rua-secundaria {
  fill: none;
  stroke: #FFFBFA;
  stroke-width: 6;
  stroke-linecap: round;
}
.mapa__rua-secundaria { stroke-width: 9; }
.mapa__avenida {
  fill: none;
  stroke: #FFFFFF;
  stroke-width: 16;
  stroke-linecap: round;
  filter: drop-shadow(0 1px 0 rgb(176 138 91 / 0.4));
}
.mapa__rotulo {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  fill: var(--cafe-suave);
  dominant-baseline: middle;
}

.mapa__pino {
  position: absolute;
  left: 52%;
  top: 50%;
  color: var(--acao);
  font-size: 34px;
  line-height: 1;
  transform: translate(-50%, -100%);
  filter: drop-shadow(0 6px 5px rgb(46 32 27 / 0.3));
}
.mapa__pino::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -4px;
  width: 22px;
  height: 7px;
  border-radius: 50%;
  background: rgb(46 32 27 / 0.22);
  transform: translateX(-50%);
  z-index: -1;
}

@media (prefers-reduced-motion: no-preference) {
  .js .mapa:not(.is-visivel) .mapa__pino { transform: translate(-50%, -160%); opacity: 0; }
  .js .mapa__pino {
    transition:
      transform var(--motion-scene) var(--ease-enter) 120ms,
      opacity var(--motion-standard) linear 120ms;
  }
}

.mapa__abrir {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 18px;
  border-radius: 999px;
  background: rgb(255 251 250 / 0.94);
  color: var(--acao);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  box-shadow: var(--sombra-1);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--motion-fast) var(--ease-standard);
}
.mapa__abrir:active { transform: scale(0.96); }

.mapa iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  opacity: 0;
  transition: opacity var(--motion-scene) var(--ease-standard);
}
.mapa.is-carregado iframe { opacity: 1; }

.mapa-cartao__info {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 16px;
  padding: 16px 16px 18px 18px;
}

.endereco {
  font-style: normal;
  font-size: 16px;
  line-height: 1.5;
}
.endereco strong { font-weight: 500; font-size: 17px; }

.copiar {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid rgb(176 138 91 / 0.5);
  border-radius: 14px;
  background: transparent;
  color: var(--acao);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--motion-fast) var(--ease-standard), transform var(--motion-fast) var(--ease-standard);
}
.copiar[hidden] { display: none; }
.copiar:active { transform: scale(0.96); }
.copiar.is-copiado { background: var(--nevoa); color: var(--aberto); border-color: rgb(62 123 83 / 0.4); }

.horario {
  margin: 20px 0 0;
}

.horario__linha {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 2px;
  border-bottom: 1px solid var(--vestido);
}
.horario__linha dt { color: var(--cafe-suave); }
.horario__linha dd { margin: 0; font-weight: 500; }

.horario__linha.is-hoje {
  margin-inline: -12px;
  padding-inline: 14px;
  border-radius: 12px;
  border-bottom-color: transparent;
  background: var(--nevoa);
}
.horario__linha.is-hoje dt { color: var(--cafe); font-weight: 500; }
.horario__linha.is-hoje dt::after {
  content: " (hoje)";
  font-weight: 400;
  color: var(--cafe-suave);
}

.visita__rota {
  width: 100%;
  margin-top: 24px;
}

/* ======================================================================
   Cena 5 — a noite
   ====================================================================== */

.fechamento {
  padding-top: 72px;
  padding-bottom: 56px;
  background:
    radial-gradient(90% 55% at 50% 0%, rgb(217 184 143 / 0.22), transparent 70%),
    radial-gradient(60% 40% at 100% 100%, rgb(233 198 191 / 0.1), transparent 70%),
    var(--cafe);
  color: var(--parede);
}
.fechamento :focus-visible { outline-color: var(--latao-luz); }

.citacao { margin: 0; }
.citacao blockquote { margin: 0; }

.citacao__texto {
  margin: 0;
  font-family: var(--serifa);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(30px, 8.8vw, 38px);
  line-height: 1.16;
  color: #FDF3F0;
}

.linha {
  display: block;
  overflow: hidden;
  padding-bottom: 0.08em;
}
.linha > span { display: block; }

.citacao figcaption {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  color: var(--latao-luz);
  font-size: 16px;
}
.citacao figcaption::before {
  content: "";
  width: 32px;
  height: 1px;
  background: var(--latao-luz);
}

@media (prefers-reduced-motion: no-preference) {
  .js [data-revelar] .linha > span {
    transform: translateY(105%);
    transition: transform var(--motion-scene) var(--ease-enter);
  }
  .js [data-revelar] .linha:nth-child(2) > span { transition-delay: 90ms; }
  .js [data-revelar].is-in .linha > span { transform: none; }
}

/* ---------- Rodapé ---------- */

.rodape {
  padding-top: 28px;
  padding-bottom: calc(28px + var(--safe-bottom));
  border-top: 1px solid rgb(242 221 185 / 0.16);
  background: var(--cafe);
  color: #CDBDB6;
  text-align: center;
  font-size: 15px;
}
.rodape :focus-visible { outline-color: var(--latao-luz); }
.rodape p { margin: 14px 0 0; }

.credito {
  font-size: 14px;
  color: #B9A69E;
}
.rodape .credito { margin-top: 2px; }
.credito a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 4px;
  color: var(--latao-luz);
  text-decoration: underline;
  text-decoration-color: rgb(242 221 185 / 0.4);
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
.credito a:active { color: #FFFFFF; }
.js .rodape { padding-bottom: calc(100px + var(--safe-bottom)); }

.redes {
  display: flex;
  justify-content: center;
  gap: 12px;
}
.redes a {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgb(242 221 185 / 0.25);
  color: var(--latao-luz);
  font-size: 20px;
  text-decoration: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--motion-fast) var(--ease-standard);
}
.redes a:active { background: rgb(242 221 185 / 0.12); }

/* ---------- Barra do polegar (vidro) ---------- */

.barra { display: none; }

.js .barra {
  display: block;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  padding: 10px var(--lado) calc(10px + var(--safe-bottom));
  background: var(--parede);
  border-top: 1px solid rgb(176 138 91 / 0.25);
  box-shadow: 0 -12px 30px -20px rgb(46 32 27 / 0.35);
  transform: translateY(calc(100% + 8px));
  visibility: hidden;
  transition:
    transform var(--motion-emphasis) var(--ease-exit),
    visibility 0s linear var(--motion-emphasis);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .js .barra {
    background: rgb(255 251 250 / 0.8);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    backdrop-filter: blur(16px) saturate(1.4);
  }
}
.js .barra.is-visivel {
  transform: none;
  visibility: visible;
  transition:
    transform var(--motion-emphasis) var(--ease-enter),
    visibility 0s;
}
.barra .acao--principal {
  max-width: 520px;
  margin: 0 auto;
  min-height: 52px;
}

/* ======================================================================
   Assinatura: a entrada do estúdio (só com movimento liberado)
   ====================================================================== */

@media (prefers-reduced-motion: no-preference) {
  .js .palco__luz {
    animation: luz-acende 1000ms ease-out both;
  }
  .js .espelho__arco {
    animation: espelho-assenta var(--motion-signature) var(--ease-enter) both;
  }
  .js .espelho__foto {
    animation: reflexo-assenta 1000ms var(--ease-enter) both;
  }
  .js .espelho__brilho {
    animation: brilho-varre 1400ms var(--ease-standard) 350ms backwards;
  }
  .js .espelho__letreiro text {
    animation: letreiro-aparece var(--motion-signature) var(--ease-enter) 200ms both;
  }
  .js .placa {
    animation: placa-chega var(--motion-signature) var(--ease-enter) 120ms backwards;
  }
}

@keyframes luz-acende {
  from { opacity: 0.35; }
}
@keyframes espelho-assenta {
  from { transform: var(--arco-base) translateY(22px) rotateX(14deg); }
  to   { transform: var(--arco-base); }
}
@keyframes reflexo-assenta {
  from { transform: scale(1.07); }
}
@keyframes brilho-varre {
  from { transform: translateX(-80%); }
  to   { transform: translateX(34%); }
}
@keyframes letreiro-aparece {
  from { opacity: 0; }
}
@keyframes placa-chega {
  from { transform: translateY(12px); }
}

@media (prefers-reduced-motion: reduce) {
  .js .barra { transform: none; opacity: 0; transition: opacity var(--motion-emphasis) linear, visibility 0s linear var(--motion-emphasis); }
  .js .barra.is-visivel { opacity: 1; transition: opacity var(--motion-emphasis) linear, visibility 0s; }
  .espelho__objeto,
  .espelho__brilho { transition: none; }
}

/* ---------- Telas muito estreitas (320px) ---------- */

@media (max-width: 359px) {
  :root { --gutter: 16px; }
  .post__corpo,
  .casa__cartao { padding-inline: 16px; }
  .acao { padding-inline: 14px; gap: 8px; font-size: 16px; }
  .numeros__item span { font-size: 13px; }
  .placa__papel { font-size: 14px; }
  .post__corpo .acao { padding-inline: 10px; }
  .post { flex-basis: 90%; }
  .post__corpo .acao { font-size: 15px; }
}

/* ---------- Telas maiores ---------- */

@media (min-width: 600px) {
  .palco { padding-top: calc(24px + var(--safe-top)); }
}