/* ==========================================================================
   VestiLar — BIO PRIME
   Conceito: um dia pela janela. Entardecer (abertura) → dia no linho (produto)
   → noite (convite). A ousadia mora em um lugar só: a persiana da cena 2.
   ========================================================================== */

@property --tilt {
  syntax: '<number>';
  inherits: true;
  initial-value: 0.5;
}

:root {
  /* Cor — base tirada do logo (traço champanhe sobre grafite) e das fotos de linho e madeira */
  --grafite: #231F20;          /* fundo do logo; texto no claro 12:1 */
  --champanhe: #EFDDCF;        /* traço do logo; texto e ação no escuro 12,3:1 */
  --champanhe-press: #E2C9B5;
  --linho: #E3DCCF;            /* linho natural cru, fundo das cenas de dia */
  --madeira: #7A4A28;          /* lâminas; texto de apoio no claro 5,4:1 */
  --sol: #E39B45;              /* só luz: brilho da persiana e foco no escuro 7:1 */

  --tinta: #3B3435;            /* corpo de texto no linho 10:1 */
  --nevoa: #5E554D;            /* texto secundário no linho 5,3:1 */
  --nevoa-escuro: #BDB0A3;     /* texto secundário no grafite 7,6:1 */

  /* Tipografia */
  --f-titulo: 'Forum', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --f-texto: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Motion — lâmina gira no próprio eixo; nada desliza pela tela */
  --motion-instant: 80ms;
  --motion-fast: 140ms;
  --motion-standard: 220ms;
  --motion-emphasis: 320ms;
  --motion-scene: 480ms;
  --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);
  --ease-emphasis: cubic-bezier(0.22, 1, 0.36, 1);
  --press-scale: 0.98;
  --shift: 12px;

  --gutter: 20px;
  --raio: 6px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --foco: var(--grafite);
}

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

/* ---------- Base ---------- */

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

html {
  background: var(--grafite);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--grafite);
  color: var(--tinta);
  font-family: var(--f-texto);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

h1, h2, h3, p, figure, ul { margin: 0; }

a { color: inherit; }

button { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: 3px;
}

.pular {
  position: absolute;
  top: -80px;
  left: 12px;
  z-index: 50;
  padding: 12px 16px;
  background: var(--champanhe);
  color: var(--grafite);
  border-radius: var(--raio);
  font-weight: 600;
}
.pular:focus { top: calc(12px + var(--safe-top)); }

.pagina {
  max-width: 560px;
  margin-inline: auto;
  overflow-x: clip;
}

.miolo { padding-inline: var(--gutter); }

/* ---------- Botões e links ---------- */

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 56px;
  padding: 14px 22px;
  border-radius: var(--raio);
  font-family: var(--f-texto);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-align: center;
  text-decoration: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform var(--motion-fast) var(--ease-standard),
    background-color var(--motion-fast) var(--ease-standard);
}
.btn i { font-size: 20px; }
.btn:active { transform: scale(var(--press-scale)); }

.btn-champanhe { background: var(--champanhe); color: var(--grafite); }
.btn-champanhe:active { background: var(--champanhe-press); }

.btn-grafite { background: var(--grafite); color: var(--champanhe); }
.btn-grafite:active { background: #3A3234; }

@media (hover: hover) and (pointer: fine) {
  .btn-champanhe:hover { background: #F6E8DD; }
  .btn-grafite:hover { background: #342D2F; }
  .link-claro:hover,
  .link-acao:hover { text-decoration-thickness: 2px; }
}

.link-claro,
.link-acao {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  -webkit-tap-highlight-color: transparent;
  transition: opacity var(--motion-fast) var(--ease-standard);
}
.link-claro:active,
.link-acao:active { opacity: 0.6; }

.link-claro { color: var(--champanhe); font-size: 15px; }

.link-acao {
  margin-top: 4px;
  color: var(--grafite);
  font-size: 16px;
  font-weight: 600;
}
.link-acao i { font-size: 19px; color: var(--madeira); }

/* ==========================================================================
   CENA 1 · Entardecer
   ========================================================================== */

.abertura {
  --foco: var(--sol);
  position: relative;
  background: var(--grafite);
  color: var(--champanhe);
}

.abertura-foto {
  position: relative;
  height: 62vh;
  height: min(62svh, 125vw);
  min-height: 340px;
  overflow: hidden;
}
.abertura-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 38%;
}
/* sombra de cima segura a marca; a de baixo vira o chão do texto */
.abertura-foto::before,
.abertura-foto::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.abertura-foto::before {
  background:
    radial-gradient(70% 34% at 50% 14%, rgb(35 31 32 / 0.62), rgb(35 31 32 / 0) 100%),
    linear-gradient(to bottom, rgb(35 31 32 / 0.84) 0%, rgb(35 31 32 / 0.42) 26%, rgb(35 31 32 / 0) 46%);
}
.abertura-foto::after {
  background: linear-gradient(to top, var(--grafite) 0%, rgb(35 31 32 / 0.7) 20%, rgb(35 31 32 / 0) 48%);
}

.marca {
  position: absolute;
  top: calc(26px + var(--safe-top));
  left: 0;
  right: 0;
  z-index: 2;
  text-align: center;
}
.marca-simbolo {
  display: block;
  width: 60px;
  height: auto;
  margin: 0 auto;
  overflow: visible;
  fill: none;
  stroke: var(--champanhe);
  stroke-width: 2;
  stroke-linejoin: miter;
}
.marca-nome {
  margin-top: 10px;
  padding-left: 0.26em;
  font-family: var(--f-titulo);
  font-size: 26px;
  line-height: 1;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}
.marca-tag {
  margin-top: 8px;
  padding-left: 0.2em;
  font-family: var(--f-titulo);
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--champanhe);
  opacity: 0.88;
}

/* entrada: o telhado se desenha uma vez, a chaminé fecha o traço */
@media (prefers-reduced-motion: no-preference) {
  .marca-telhado,
  .marca-chamine {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: desenha 900ms var(--ease-emphasis) 120ms forwards;
  }
  .marca-chamine {
    animation-duration: 260ms;
    animation-delay: 860ms;
  }
}
@keyframes desenha { to { stroke-dashoffset: 0; } }

.abertura-texto {
  position: relative;
  z-index: 2;
  margin-top: -96px;
  padding: 0 var(--gutter) 30px;
}

h1 {
  font-family: var(--f-titulo);
  font-size: clamp(36px, 10.6vw, 44px);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: 0.005em;
  color: var(--champanhe);
  text-wrap: balance;
}

.abertura-lead {
  max-width: 34ch;
  margin-top: 14px;
  font-size: 17px;
  line-height: 1.55;
  color: var(--nevoa-escuro);
}

.abertura .btn { margin-top: 22px; }

.abertura-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0 20px;
  margin-top: 6px;
}
.abertura-links i { font-size: 17px; }

/* ==========================================================================
   Cenas de dia (linho)
   ========================================================================== */

.cena { padding-block: 76px; }

.cena h2 {
  font-family: var(--f-titulo);
  font-size: clamp(32px, 9.2vw, 38px);
  font-weight: 400;
  line-height: 1.06;
  color: var(--grafite);
  text-wrap: balance;
}

.cena-intro {
  max-width: 36ch;
  margin-top: 14px;
  color: var(--tinta);
}

/* ---------- CENA 2 · Luz na medida certa ---------- */

.cena-luz {
  --tilt: 0.5;
  --giro: 0ms;
  --cascata: 0ms;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--linho);
}
.cena-luz[data-modo="arraste"] { --giro: 90ms; }
.cena-luz[data-modo="toque"]   { --giro: 560ms; --cascata: 24ms; }
.cena-luz[data-modo="cascata"] { --giro: 1000ms; --cascata: 60ms; }

/* a luz que entra pela persiana aquece o próprio linho da cena */
.cena-luz-brilho {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(110% 60% at 82% 46%, rgb(227 155 69 / 0.5), rgb(227 155 69 / 0) 68%),
    radial-gradient(80% 40% at 10% 90%, rgb(239 221 207 / 0.7), rgb(239 221 207 / 0) 70%);
  opacity: var(--tilt);
  transition: opacity var(--giro) var(--ease-standard);
}

.persiana {
  position: relative;
  margin-top: 30px;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 3px;
  background: #3B2718;
  box-shadow: 0 34px 60px -34px rgb(35 31 32 / 0.6);
}
.persiana img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* caixa superior e régua inferior */
.persiana::before,
.persiana::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  z-index: 3;
  pointer-events: none;
}
.persiana::before {
  top: 0;
  height: 14px;
  background: linear-gradient(to bottom, #5C3A20, #3F2715);
  box-shadow: 0 2px 5px rgb(0 0 0 / 0.35);
}
.persiana::after {
  bottom: 0;
  height: 9px;
  background: linear-gradient(to bottom, #6B4426, #472C18);
}

.laminas {
  position: absolute;
  inset: 14px 0 9px;
  z-index: 2;
  display: grid;
  grid-template-rows: repeat(14, 1fr);
  perspective: 820px;
}
/* cordões da escada da persiana */
.laminas::before,
.laminas::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  width: 2px;
  background: rgb(239 221 207 / 0.42);
}
.laminas::before { left: 17%; }
.laminas::after { right: 17%; }

.laminas span {
  position: relative;
  z-index: 0;
  margin-block: -0.5px;
  background: linear-gradient(to bottom, #9C6A42 0%, #7A4A28 52%, #5B361E 100%);
  transform: rotateX(calc(var(--tilt) * 78deg));
  transition: transform var(--giro) var(--ease-standard) calc(var(--i) * var(--cascata));
  will-change: transform;
}
/* a face da lâmina pega luz conforme abre */
.laminas span::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgb(255 222 176 / 0.6), rgb(255 222 176 / 0) 70%);
  opacity: var(--tilt);
  transition: opacity var(--giro) var(--ease-standard) calc(var(--i) * var(--cascata));
}

.controle { display: none; margin-top: 22px; }
.js .controle { display: block; }

.controle-topo {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.controle-topo label {
  font-size: 15px;
  color: var(--nevoa);
}
.controle-topo output {
  font-family: var(--f-titulo);
  font-size: 24px;
  line-height: 1.1;
  color: var(--madeira);
}

/* o range é o bastão de giro da persiana */
.controle input[type="range"] {
  --pct: 50%;
  display: block;
  width: 100%;
  height: 48px;
  margin: 4px 0 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  touch-action: pan-y;
}
.controle input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(to right, var(--madeira) var(--pct), rgb(122 74 40 / 0.22) var(--pct));
}
.controle input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px;
  height: 40px;
  margin-top: -18px;
  border: 3px solid var(--linho);
  border-radius: 11px;
  background: var(--grafite);
  box-shadow: 0 3px 8px rgb(35 31 32 / 0.35);
  transition: transform var(--motion-fast) var(--ease-standard);
}
.controle input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.08); }
.controle input[type="range"]::-moz-range-track {
  height: 4px;
  border-radius: 2px;
  background: rgb(122 74 40 / 0.22);
}
.controle input[type="range"]::-moz-range-progress {
  height: 4px;
  border-radius: 2px;
  background: var(--madeira);
}
.controle input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 34px;
  border: 3px solid var(--linho);
  border-radius: 11px;
  background: var(--grafite);
  box-shadow: 0 3px 8px rgb(35 31 32 / 0.35);
}
.controle input[type="range"]:focus-visible {
  outline: 2px solid var(--grafite);
  outline-offset: 2px;
  border-radius: var(--raio);
}

.controle-atalhos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 8px;
}
.controle-atalhos button {
  min-height: 48px;
  padding: 8px 6px;
  border: 1px solid rgb(122 74 40 / 0.5);
  border-radius: var(--raio);
  background: transparent;
  color: var(--grafite);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color var(--motion-standard) var(--ease-standard),
    color var(--motion-standard) var(--ease-standard),
    transform var(--motion-fast) var(--ease-standard);
}
.controle-atalhos button:active { transform: scale(var(--press-scale)); }
.controle-atalhos button[aria-pressed="true"] {
  background: var(--madeira);
  border-color: var(--madeira);
  color: var(--linho);
}

.cena-luz .btn { margin-top: 26px; }

.nota {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
  color: var(--nevoa);
}

/* ---------- CENA 3 · O guarda-roupa da casa ---------- */

.cena-pecas {
  background: var(--linho);
  padding-top: 20px;
}

.peca { margin-top: 52px; }

.peca h3 {
  margin-top: 18px;
  font-family: var(--f-titulo);
  font-size: 30px;
  font-weight: 400;
  line-height: 1.1;
  color: var(--grafite);
}
.peca p { max-width: 38ch; margin-top: 8px; }

/* cortinas: o tecido de perto, encostado na borda direita como um caimento */
.peca-cortinas .peca-foto {
  width: 86%;
  margin-left: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

/* persianas: a parede inteira, de ponta a ponta */
.peca-persianas .peca-foto {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* toldos: sem foto real ainda, só a palavra, no escuro da área externa */
.peca-toldos {
  --foco: var(--sol);
  margin: 52px var(--gutter) 0;
  padding: 30px 24px 22px;
  border-radius: var(--raio);
  background: var(--grafite);
  color: var(--nevoa-escuro);
}
.peca-toldos h3 { margin-top: 0; color: var(--champanhe); }
.peca-toldos .link-acao,
.peca-toldos .link-acao i { color: var(--champanhe); }

/* ---------- CENA 4 · Ambientes entregues ---------- */

.cena-entregas {
  background: var(--linho);
  padding-top: 40px;
}

.entrega { margin-top: 56px; }

.entrega-foto {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  overflow: hidden;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.entrega-foto img {
  width: 100%;
  object-fit: cover;
  transition: transform var(--motion-emphasis) var(--ease-emphasis);
}
.entrega-foto:active img { transform: scale(var(--press-scale)); }

.entrega-mt .entrega-foto img { aspect-ratio: 4 / 5; }
.entrega-gil .entrega-foto img { aspect-ratio: 3 / 2; }

/* a doceria entra recuada, para o ritmo não repetir */
.entrega-doceria .entrega-foto {
  width: 76%;
  margin-left: var(--gutter);
}
.entrega-doceria .entrega-foto img { aspect-ratio: 4 / 5; }

.entrega-contador {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: none;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--raio);
  background: rgb(35 31 32 / 0.8);
  color: var(--champanhe);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
}
.js .entrega-contador { display: inline-flex; }

.entrega h3 {
  margin-top: 16px;
  font-family: var(--f-titulo);
  font-size: 27px;
  font-weight: 400;
  line-height: 1.12;
  color: var(--grafite);
}
.entrega p { max-width: 38ch; margin-top: 8px; }
.entrega .credito-projeto {
  font-size: 14px;
  line-height: 1.55;
  color: var(--nevoa);
}

/* ==========================================================================
   Cenas de noite (grafite)
   ========================================================================== */

.cena-casacor,
.cena-convite {
  --foco: var(--sol);
  background: var(--grafite);
  color: var(--nevoa-escuro);
}
.cena-casacor h2,
.cena-convite h2 { color: var(--champanhe); }

.cena-casacor { padding-top: 0; padding-bottom: 20px; }
.casacor-foto {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.cena-casacor .miolo { margin-top: 28px; }
.cena-casacor p { max-width: 36ch; margin-top: 12px; }

.cena-convite { padding-top: 72px; padding-bottom: 56px; }
.convite-simbolo {
  display: block;
  width: 52px;
  height: auto;
  margin-bottom: 26px;
  fill: none;
  stroke: var(--champanhe);
  stroke-width: 2;
}
.cena-convite p { max-width: 36ch; margin-top: 14px; }
.cena-convite .btn { margin-top: 26px; }
.convite-ig { margin-top: 8px; }
.convite-cidade {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
}
.convite-cidade i { color: var(--champanhe); }

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

.rodape {
  --foco: var(--sol);
  padding: 30px var(--gutter) calc(30px + var(--safe-bottom));
  border-top: 1px solid rgb(239 221 207 / 0.14);
  background: var(--grafite);
  color: var(--nevoa-escuro);
  font-size: 14px;
  text-align: center;
}

/* Selo base2digital */
.credito {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 14px;
  min-height: 44px;
  margin: 18px auto 0;
  color: var(--champanhe);
  text-align: left;
  font-size: 13px;
  line-height: 1.35;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.credito-txt strong {
  display: block;
  font-size: 15px;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.selo-b2 {
  --seal-ink: currentColor;
  --seal-accent: var(--sol);
  --seal-ring: 0;
  --seal-font: var(--f-texto);
  flex: none;
  width: 72px;
  height: 72px;
  overflow: visible;
  transition: rotate 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.selo-borda,
.selo-anel { fill: none; stroke: var(--seal-ink); }
.selo-borda { stroke-width: 1; }
.selo-anel { stroke-width: 0.7; stroke-dasharray: var(--seal-ring); opacity: 0.75; }
.selo-texto {
  fill: var(--seal-ink);
  font-family: var(--seal-font);
  font-size: 6.3px;
  font-weight: 600;
  letter-spacing: 0.8px;
}
.selo-b { fill: var(--seal-ink); }
.selo-acento { fill: var(--seal-accent); }
.credito:active .selo-b2 { rotate: -10deg; }
.selo-giro {
  transform-box: view-box;
  transform-origin: 50px 50px;
}
@keyframes selo-gira { to { transform: rotate(360deg); } }
@keyframes selo-flutua {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -3px; }
}
@media (prefers-reduced-motion: no-preference) {
  .selo-giro { animation: selo-gira 24s linear infinite; }
  .selo-b2 { animation: selo-flutua 4.8s ease-in-out infinite; }
  .selo-b2.is-still,
  .selo-b2.is-still .selo-giro,
  .is-page-hidden .selo-b2,
  .is-page-hidden .selo-giro { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) {
  .credito:active .selo-b2 { rotate: none; }
}

/* ---------- Barra fixa de WhatsApp ---------- */

.barra {
  --foco: var(--sol);
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  max-width: 560px;
  margin-inline: auto;
  padding: 10px var(--gutter) calc(10px + var(--safe-bottom));
  background: var(--grafite);
  border-top: 1px solid rgb(239 221 207 / 0.16);
  transform: translateY(110%);
  visibility: hidden;
  transition:
    transform var(--motion-emphasis) var(--ease-exit),
    visibility 0s linear var(--motion-emphasis);
}
.barra.is-visivel {
  transform: none;
  visibility: visible;
  transition:
    transform var(--motion-scene) var(--ease-enter),
    visibility 0s;
}
.barra .btn { min-height: 52px; }

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

/* ---------- Galeria em bottom sheet ---------- */

.folha {
  --foco: var(--sol);
  width: 100%;
  max-width: 560px;
  max-height: 94svh;
  margin: auto auto 0;
  padding: 0;
  border: 0;
  border-radius: 14px 14px 0 0;
  background: var(--grafite);
  color: var(--champanhe);
  overflow: hidden;
}
.folha::backdrop { background: rgb(20 17 18 / 0.74); }
.folha[open] { animation: folha-entra var(--motion-scene) var(--ease-enter); }
.folha[open]::backdrop { animation: esmaece var(--motion-emphasis) linear; }
.folha.is-saindo { animation: folha-sai var(--motion-standard) var(--ease-exit) forwards; }
.folha.is-saindo::backdrop { animation: esmaece var(--motion-standard) linear reverse forwards; }

@keyframes folha-entra { from { transform: translateY(100%); } }
@keyframes folha-sai { to { transform: translateY(100%); } }
@keyframes esmaece { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .folha[open] { animation-name: esmaece; }
  .folha.is-saindo { animation-name: some; }
}
@keyframes some { to { opacity: 0; } }

html:has(.folha[open]) { overflow: hidden; }

.folha-corpo { padding: 10px 0 calc(14px + var(--safe-bottom)); }

.folha-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 8px 8px var(--gutter);
}
.folha-topo h2 {
  font-family: var(--f-titulo);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.15;
}

.folha-fechar,
.folha-nav button {
  display: grid;
  place-items: center;
  flex: none;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid rgb(239 221 207 / 0.3);
  border-radius: 50%;
  background: transparent;
  color: var(--champanhe);
  font-size: 18px;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform var(--motion-fast) var(--ease-standard),
    opacity var(--motion-standard) var(--ease-standard);
}
.folha-fechar { border-color: transparent; font-size: 22px; }
.folha-fechar:active,
.folha-nav button:active { transform: scale(0.94); }
.folha-nav button:disabled { opacity: 0.3; cursor: default; }

.folha-trilho {
  position: relative;
  display: flex;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  list-style: none;
  padding: 0;
}
.folha-trilho::-webkit-scrollbar { display: none; }
.folha-trilho:focus-visible { outline-offset: -3px; }
.folha-trilho li {
  display: flex;
  flex: 0 0 100%;
  align-items: center;
  justify-content: center;
  height: min(66svh, 124vw);
  scroll-snap-align: center;
  scroll-snap-stop: always;
}
.folha-trilho img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.folha-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px var(--gutter) 0;
}
.folha-contador {
  font-size: 15px;
  color: var(--nevoa-escuro);
  font-variant-numeric: tabular-nums;
}

/* ---------- Telas maiores (o celular continua sendo o desenho) ---------- */

@media (min-width: 560px) {
  :root { --gutter: 28px; }
  .pagina { box-shadow: 0 0 0 1px rgb(239 221 207 / 0.06); }
}

/* Reduced motion: estados mudam sem transição, informação continua toda lá */
@media (prefers-reduced-motion: reduce) {
  .cena-luz[data-modo] { --giro: 0ms; --cascata: 0ms; }
  .entrega-foto img { transition: none; }
}