/* ==========================================================================
   Regalo de cumpleaños · estilos
   ========================================================================== */

:root {
  --crema: #f3ebde;
  --papel: #fbf6ec;
  --tinta: #3a2a20;
  --tinta-suave: #6f5a4b;
  --terracota: #b4583a;
  --terracota-texto: #9a4529;
  --salvia: #879a7a;
  --salvia-oscura: #56664c;
  --corcho: #c9a77f;
  --arena: #dcc6a3;

  --serif-titulo: 'Cormorant Garamond', 'Times New Roman', serif;
  --serif: 'EB Garamond', Georgia, serif;
  --mano: 'Caveat', 'Bradley Hand', cursive;

  --sombra-papel: 0 1px 2px rgba(58, 42, 32, .08), 0 18px 40px -16px rgba(58, 42, 32, .32);
  --suave: cubic-bezier(.22, .7, .2, 1);
  --gutter: 16px;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

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

body {
  margin: 0;
  min-height: 100svh;
  background-color: var(--crema);
  /* Ruido tipo papel: SVG con feTurbulence al 9% de opacidad */
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxODAnIGhlaWdodD0nMTgwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nLjgnIG51bU9jdGF2ZXM9JzMnIHN0aXRjaFRpbGVzPSdzdGl0Y2gnLz48ZmVDb2xvck1hdHJpeCB2YWx1ZXM9JzAgMCAwIDAgLjIzIDAgMCAwIDAgLjE2IDAgMCAwIDAgLjEyIDAgMCAwIDEgMCcvPjwvZmlsdGVyPjxyZWN0IHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnIGZpbHRlcj0ndXJsKCNuKScgb3BhY2l0eT0nLjA5Jy8+PC9zdmc+");
  color: var(--tinta);
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 600; }

button {
  font: inherit;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}

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

::selection { background: rgba(180, 88, 58, .22); }

/* ---------- Botones genéricos ---------- */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 24px;
  border: 0;
  border-radius: 999px;
  background: var(--tinta);
  color: var(--crema);
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: .02em;
  cursor: pointer;
  transition: transform .2s var(--suave), background-color .2s;
}
.boton:hover { background: #2a1d15; }
.boton:active { transform: scale(.97); }
.boton:disabled { opacity: .45; cursor: default; }
.boton--claro { background: var(--papel); color: var(--tinta); }
.boton--claro:hover { background: #fff; }

.enlace {
  min-height: 44px;
  padding: 0 2px;
  border: 0;
  background: none;
  color: var(--terracota-texto);
  font-size: 16px;
  font-style: italic;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  cursor: pointer;
}

/* ==========================================================================
   1 · Entrada
   ========================================================================== */
.entrada {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 34px;
  padding: 32px var(--gutter) 40px;
  transition: opacity .7s ease;
}
.entrada.saliendo { opacity: 0; }

.sobre {
  --w: min(86vw, 370px);
  position: relative;
  width: var(--w);
  aspect-ratio: 3 / 2;
  margin-top: calc(var(--w) * .3);
  perspective: 1100px;
}

.sobre__fondo,
.sobre__bolsillo,
.sobre__solapa,
.sobre__carta { position: absolute; }

.sobre__fondo {
  inset: 0;
  z-index: 1;
  border-radius: 6px;
  background: #e2d1b6;
  box-shadow: 0 2px 3px rgba(58, 42, 32, .1), 0 22px 40px -18px rgba(58, 42, 32, .45);
}

.sobre__carta {
  z-index: 2;
  left: 6%;
  right: 6%;
  top: 5%;
  height: 88%;
  padding: 14% 10% 0;
  border-radius: 3px;
  background: var(--papel);
  box-shadow: 0 1px 3px rgba(58, 42, 32, .12);
  transition: transform 1s var(--suave);
}
.sobre__carta span {
  display: block;
  height: 2px;
  margin-bottom: 9%;
  border-radius: 2px;
  background: rgba(111, 90, 75, .16);
}
.sobre__carta span:nth-child(2) { width: 82%; }
.sobre__carta span:nth-child(3) { width: 56%; }

.sobre__bolsillo {
  inset: 0;
  z-index: 3;
  border-radius: 6px;
  background: linear-gradient(170deg, #efe4d1, #e8d9c0);
  clip-path: polygon(0 0, 50% 54%, 100% 0, 100% 100%, 0 100%);
}
/* pliegue inferior del bolsillo */
.sobre__bolsillo::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0));
  clip-path: polygon(0 100%, 50% 46%, 100% 100%);
}

.sobre__nombre {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 7%;
  font-family: var(--mano);
  font-weight: 500;
  font-size: calc(var(--w) * .145);
  line-height: 1;
  text-align: center;
  color: var(--tinta);
  transform: rotate(-3deg);
}

.sobre__solapa {
  z-index: 4;
  top: 0;
  left: 0;
  right: 0;
  height: 57%;
  background: linear-gradient(180deg, #ebdcc3, #dfcbac);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: 50% 0;
  transition: transform .8s cubic-bezier(.5, .05, .3, 1), background .4s;
}
.sobre.solapa-abierta .sobre__solapa { transform: rotateX(180deg); }
.sobre.solapa-atras .sobre__solapa {
  z-index: 1;
  background: linear-gradient(0deg, #d8c3a3, #cfb895);
}
.sobre.carta-fuera .sobre__carta { transform: translateY(-58%); }

.sello {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 57%;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 47% 53% 50% 46% / 53% 46% 54% 48%;
  background: radial-gradient(circle at 34% 30%, #d27c5c 0%, var(--terracota) 42%, #8a3b23 100%);
  box-shadow:
    0 2px 4px rgba(58, 42, 32, .35),
    inset 0 -2px 4px rgba(60, 20, 8, .35),
    inset 0 2px 3px rgba(255, 220, 200, .25);
  transform: translate(-50%, -50%) rotate(-8deg);
  transition: opacity .35s ease, transform .35s ease;
}
.sello::before {
  content: '';
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 228, 210, .28);
}
.sello span {
  font-family: var(--serif-titulo);
  font-style: italic;
  font-weight: 600;
  font-size: 27px;
  line-height: 1;
  color: #f7e4d6;
  text-shadow: 0 -1px 0 rgba(60, 20, 8, .5);
  transform: translateY(-1px);
}
.sobre.sin-sello .sello {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(-8deg) scale(.85);
}

/* Formulario */
.acceso {
  width: 100%;
  max-width: 360px;
  text-align: center;
}
.acceso__intro {
  font-size: 18px;
  line-height: 1.45;
  color: var(--tinta-suave);
}
.acceso__pregunta {
  display: block;
  margin: 10px 0 18px;
  font-family: var(--serif-titulo);
  font-style: italic;
  font-weight: 600;
  font-size: 1.6rem;
  line-height: 1.15;
}
.acceso__fila {
  display: flex;
  gap: 8px;
}
.acceso__input {
  flex: 1;
  min-width: 0;
  min-height: 50px;
  padding: 0 18px;
  border: 1px solid rgba(58, 42, 32, .22);
  border-radius: 999px;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--serif);
  font-size: 18px;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .2s, box-shadow .2s;
}
.acceso__input::placeholder { color: rgba(111, 90, 75, .6); font-style: italic; }
.acceso__input:focus { outline: none; border-color: var(--terracota); box-shadow: 0 0 0 3px rgba(180, 88, 58, .16); }
.acceso__fila .boton { min-height: 50px; }

.acceso__error {
  min-height: 2.4em;
  margin-top: 12px;
  font-family: var(--mano);
  font-size: 1.5rem;
  line-height: 1.2;
  color: var(--terracota-texto);
}
.acceso__error:not(:empty) { animation: aparecer .35s ease; }

.acceso.sacudir .acceso__fila { animation: sacudir .45s ease; }

@keyframes sacudir {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(7px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(3px); }
}
@keyframes aparecer {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

/* ==========================================================================
   Estructura de secciones
   ========================================================================== */
.seccion {
  padding: 76px var(--gutter);
}
.contenedor {
  max-width: 960px;
  margin: 0 auto;
}
.contenedor--angosto { max-width: 700px; }
.contenedor--ancho { max-width: 1040px; }

.kicker {
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--terracota-texto);
}
.kicker--centro { text-align: center; margin-bottom: 22px; }

.encabezado {
  margin-bottom: 34px;
  text-align: left;
}
.encabezado__titulo {
  margin-top: 10px;
  font-family: var(--serif-titulo);
  font-weight: 600;
  font-size: clamp(2.35rem, 8.5vw, 3.7rem);
  line-height: 1.02;
  letter-spacing: -.01em;
  text-wrap: balance;
}
.encabezado__nota {
  margin-top: 10px;
  font-family: var(--mano);
  font-size: 1.5rem;
  line-height: 1.2;
  color: var(--tinta-suave);
}

/* Aparición al hacer scroll */
.revelar {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .9s var(--suave), transform .9s var(--suave);
}
.revelar.visible {
  opacity: 1;
  transform: none;
}

/* ==========================================================================
   2 · La carta
   ========================================================================== */
.seccion--carta { padding-top: 56px; }

.carta {
  position: relative;
  max-width: 620px;
  margin: 0 auto;
  padding: 40px 26px 46px;
  border-radius: 2px;
  background: var(--papel);
  box-shadow: var(--sombra-papel);
  transform: rotate(-.5deg);
}
/* marcas de doblez casi invisibles */
.carta::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg,
      transparent calc(33.33% - 1px), rgba(58, 42, 32, .05) calc(33.33% - 1px),
      rgba(58, 42, 32, .05) 33.33%, rgba(255, 255, 255, .7) 33.33%,
      rgba(255, 255, 255, .7) calc(33.33% + 1px), transparent calc(33.33% + 1px),
      transparent calc(66.66% - 1px), rgba(58, 42, 32, .05) calc(66.66% - 1px),
      rgba(58, 42, 32, .05) 66.66%, rgba(255, 255, 255, .7) 66.66%,
      rgba(255, 255, 255, .7) calc(66.66% + 1px), transparent calc(66.66% + 1px));
}
.sitio.entrando .carta { animation: cartaEntra 1.2s var(--suave) both; }
@keyframes cartaEntra {
  from { opacity: 0; transform: translateY(46px) rotate(-.5deg); }
  to { opacity: 1; transform: rotate(-.5deg); }
}

.carta__fecha {
  text-align: right;
  font-family: var(--mano);
  font-size: 1.4rem;
  line-height: 1.2;
  color: var(--tinta-suave);
}
.carta__saludo {
  margin: 18px 0 14px;
  font-family: var(--serif-titulo);
  font-style: italic;
  font-weight: 600;
  font-size: 2.1rem;
  line-height: 1.1;
}
.carta__cuerpo p {
  font-size: 19px;
  line-height: 1.68;
  text-wrap: pretty;
}
.carta__cuerpo p + p { margin-top: 1em; }
.carta__cierre {
  margin-top: 1.6em;
  font-style: italic;
  color: var(--tinta-suave);
}
.carta__firma {
  display: inline-block;
  margin-top: 4px;
  font-family: var(--mano);
  font-weight: 700;
  font-size: 3.3rem;
  line-height: 1;
  color: var(--terracota);
  transform: rotate(-5deg);
  transform-origin: left center;
}

.sigue {
  margin-top: 64px;
  text-align: center;
  font-style: italic;
  font-size: 17px;
  color: var(--tinta-suave);
}
.sigue__linea {
  position: relative;
  display: block;
  width: 1px;
  height: 64px;
  margin: 14px auto 0;
  overflow: hidden;
  background: rgba(58, 42, 32, .14);
}
.sigue__linea::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 22px;
  background: var(--terracota);
  animation: bajar 2.2s ease-in-out infinite;
}
@keyframes bajar {
  0% { transform: translateY(-24px); }
  70%, 100% { transform: translateY(66px); }
}

/* ==========================================================================
   3 · 24 cosas
   ========================================================================== */
.progreso {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  column-gap: 16px;
  margin-bottom: 22px;
}
.progreso__texto {
  font-size: 17px;
  font-style: italic;
  color: var(--tinta-suave);
}
.progreso__barra {
  order: 3;
  width: 100%;
  height: 2px;
  margin-top: 4px;
  border-radius: 2px;
  background: rgba(58, 42, 32, .12);
  overflow: hidden;
}
.progreso__barra span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--terracota);
  transition: width .6s var(--suave);
}

/* Torta: cada vela es un botón con su tramo de bizcocho debajo,
   así las velas de una fila forman un piso continuo */
.torta {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  margin: 8px 0 0;
  border-radius: 6px;
  overflow: hidden;
}

.vela {
  --cera: var(--papel);
  --piso: var(--terracota);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 150px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.vela:nth-child(3n + 2) { --cera: #ecd2c4; }
.vela:nth-child(3n + 3) { --cera: #d7decb; }
.vela:nth-child(n + 9) { --piso: var(--salvia); }
.vela:nth-child(n + 17) { --piso: var(--corcho); }

.vela__llama {
  position: relative;
  width: 14px;
  height: 21px;
  border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  background: #f0b04a;
  transform-origin: 50% 100%;
  transition: transform .35s var(--suave), opacity .35s ease;
}
/* corazón de la llama */
.vela__llama::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 6px;
  height: 9px;
  margin-left: -3px;
  border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  background: var(--terracota);
}
.vela__mecha {
  width: 2px;
  height: 8px;
  margin-top: 2px;
  background: var(--tinta);
}
.vela__cera {
  width: 16px;
  height: 52%;
  border-radius: 3px 3px 0 0;
  background: var(--cera);
  box-shadow: inset -4px 0 0 rgba(58, 42, 32, .07);
  transition: transform .2s var(--suave);
}
.vela__piso {
  width: 100%;
  height: 34px;
  background: var(--piso);
}
.vela__humo {
  position: absolute;
  left: 50%;
  top: 14%;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  border-radius: 50%;
  background: rgba(111, 90, 75, .45);
  opacity: 0;
  pointer-events: none;
}

.vela:not(.apagada):hover .vela__cera { transform: translateY(-3px); }
.vela:not(.apagada):hover .vela__llama { transform: scale(1.15); }
.vela:focus-visible { outline-offset: -4px; }
.vela.apagada { cursor: default; }
.vela.apagada .vela__llama { transform: scale(.5); opacity: 0; }
.vela.recien .vela__humo { animation: humo 1.4s ease-out forwards; }

@media (prefers-reduced-motion: no-preference) {
  .vela:not(.apagada) .vela__llama { animation: titila 1.6s ease-in-out infinite; }
  .vela:nth-child(2n) .vela__llama { animation-delay: -.7s; }
  .vela:nth-child(3n) .vela__llama { animation-duration: 1.9s; }
}
@keyframes titila {
  0%, 100% { transform: scale(1, 1) rotate(-2deg); }
  30% { transform: scale(.94, 1.08) rotate(2deg); }
  60% { transform: scale(1.04, .95) rotate(-1deg); }
}
@keyframes humo {
  0% { opacity: .9; transform: translateY(0) scale(.6); }
  100% { opacity: 0; transform: translateY(-56px) scale(2.2); }
}

/* El espacio sobre la torta es donde salen las notas de la primera fila;
   antes de apagar la primera lo ocupa la pista */
.torta-marco {
  position: relative;
  padding-top: 116px;
}
.pista-vela {
  position: absolute;
  left: 0;
  right: 0;
  top: 44px;
  font-family: var(--mano);
  font-size: 1.6rem;
  line-height: 1.2;
  text-align: center;
  color: var(--terracota-texto);
}

/* La frase de la vela recién apagada: un papelito sobre su mecha */
.nota-vela {
  position: absolute;
  z-index: 5;
  width: max-content;
  max-width: min(320px, 100%);
  padding: 12px 18px 13px;
  border-radius: 2px;
  background: var(--papel);
  box-shadow: var(--sombra-papel);
  font-family: var(--serif-titulo);
  font-style: italic;
  font-weight: 600;
  font-size: 1.3rem;
  line-height: 1.2;
  text-align: center;
  text-wrap: balance;
  transform: rotate(var(--giro, 0deg));
  pointer-events: none;
}
/* flecha que apunta a la vela */
.nota-vela::after {
  content: '';
  position: absolute;
  top: 100%;
  left: var(--flecha, 50%);
  width: 0;
  height: 0;
  margin-left: -8px;
  border-style: solid;
  border-width: 27px 8px 0;
  border-color: var(--papel) transparent transparent;
}
.nota-vela.sale { animation: notaSale .55s var(--suave) both; }
@keyframes notaSale {
  from { opacity: 0; transform: translateY(18px) scale(.94) rotate(var(--giro, 0deg)); }
  to { opacity: 1; transform: rotate(var(--giro, 0deg)); }
}

.soplar {
  margin-top: 18px;
  text-align: center;
}
#microfono.escuchando { background: var(--terracota); color: var(--papel); }
.soplar__aviso {
  min-height: 1.4em;
  margin-top: 10px;
  font-family: var(--mano);
  font-size: 1.4rem;
  line-height: 1.2;
  color: var(--terracota-texto);
}

.razones {
  margin: 30px 0 0;
  padding: 26px 26px 22px;
  list-style: none;
  border-radius: 2px;
  background: var(--papel);
  box-shadow: var(--sombra-papel);
}
.razones li {
  position: relative;
  padding: 6px 0 6px 22px;
  font-size: 17px;
  line-height: 1.4;
}
.razones li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 14px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--terracota);
}
.razones li.nueva { animation: aparecer .5s var(--suave); }

.final {
  margin-top: 34px;
  padding: 30px 26px 28px;
  border-radius: 2px;
  background: var(--papel);
  box-shadow: var(--sombra-papel);
  transform: rotate(.6deg);
}
.final.aparece { animation: finalAparece .9s var(--suave) both; }
@keyframes finalAparece {
  from { opacity: 0; transform: translateY(18px) rotate(.6deg); }
  to { opacity: 1; transform: rotate(.6deg); }
}
.final__texto {
  font-family: var(--serif-titulo);
  font-style: italic;
  font-weight: 600;
  font-size: 1.6rem;
  line-height: 1.2;
  text-wrap: pretty;
}
.final__nota {
  margin-top: 12px;
  font-family: var(--mano);
  font-size: 1.7rem;
  line-height: 1.1;
  color: var(--terracota-texto);
}

/* Confeti */
.confeti {
  position: fixed;
  inset: 0;
  z-index: 60;
  overflow: hidden;
  pointer-events: none;
}
.confeti i {
  position: absolute;
  top: -16px;
  left: var(--x);
  width: var(--w);
  height: var(--h);
  border-radius: var(--radio);
  background: var(--c);
  box-shadow: 0 0 0 .5px rgba(58, 42, 32, .12);
  opacity: 0;
  animation: caer var(--d) cubic-bezier(.25, .6, .45, 1) var(--espera) forwards;
}
@keyframes caer {
  0% { opacity: 1; transform: translate3d(0, 0, 0) rotate(0); }
  85% { opacity: 1; }
  100% { opacity: 0; transform: translate3d(var(--dx), 105vh, 0) rotate(var(--r)); }
}

/* ==========================================================================
   4 · Nuestros momentos
   ========================================================================== */
.chips {
  display: flex;
  gap: 8px;
  margin: 0 calc(var(--gutter) * -1) 22px;
  padding: 2px var(--gutter) 10px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.chips::-webkit-scrollbar { display: none; }

.chip {
  flex: none;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid rgba(58, 42, 32, .22);
  border-radius: 999px;
  background: var(--papel);
  font-size: 16px;
  white-space: nowrap;
  cursor: pointer;
  scroll-snap-align: start;
  transition: background-color .25s, color .25s, border-color .25s;
}
.chip:hover { border-color: rgba(58, 42, 32, .45); }
.chip[aria-pressed="true"] {
  background: var(--tinta);
  border-color: var(--tinta);
  color: var(--crema);
}

.corcho {
  padding: 30px 10px 34px;
  border-radius: 8px;
  background-color: var(--corcho);
  background-image:
    radial-gradient(rgba(96, 62, 30, .32) 0.8px, transparent 1.4px),
    radial-gradient(rgba(255, 238, 210, .3) 0.9px, transparent 1.6px),
    radial-gradient(rgba(110, 72, 38, .22) 1.4px, transparent 2.2px),
    radial-gradient(rgba(150, 110, 70, .25) 2px, transparent 3px);
  background-size: 9px 11px, 15px 13px, 23px 19px, 41px 37px;
  background-position: 0 0, 5px 7px, 3px 2px, 11px 17px;
  box-shadow:
    inset 0 2px 16px rgba(70, 44, 20, .38),
    inset 0 0 0 1px rgba(70, 44, 20, .2),
    0 1px 0 rgba(255, 255, 255, .5);
}

.polaroids {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(146px, 1fr));
  gap: 30px 14px;
}

.polaroid {
  position: relative;
  display: block;
  width: 100%;
  padding: 9px 9px 0;
  border: 0;
  border-radius: 2px;
  background: #fffdf8;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(40, 25, 12, .18), 0 10px 18px -8px rgba(40, 25, 12, .5);
  transform: translateY(var(--dy, 0)) rotate(var(--rot, 0deg));
  transition: transform .4s var(--suave), box-shadow .4s var(--suave);
}
.polaroid.filtrada { animation: polaroidEntra .5s var(--suave) both; }
@keyframes polaroidEntra {
  from { opacity: 0; transform: translateY(calc(var(--dy, 0px) + 10px)) rotate(var(--rot, 0deg)) scale(.96); }
}
/* cinta washi */
.polaroid::before {
  content: '';
  position: absolute;
  z-index: 1;
  top: -11px;
  left: 50%;
  width: 68px;
  height: 22px;
  background: var(--washi);
  opacity: .78;
  transform: translateX(-50%) rotate(var(--cinta, -3deg));
  box-shadow: 0 1px 1px rgba(40, 25, 12, .08);
}
@media (hover: hover) {
  .polaroid:hover {
    z-index: 2;
    transform: translateY(0) rotate(0) scale(1.05);
    box-shadow: 0 2px 4px rgba(40, 25, 12, .2), 0 18px 30px -10px rgba(40, 25, 12, .55);
  }
}

.polaroid__foto,
.lightbox__foto {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  background-color: var(--marcador, #e7d6bf);
  background-size: cover;
  background-position: center;
}
.polaroid__foto { aspect-ratio: 1; }
.polaroid__foto::after,
.lightbox__foto::after {
  content: '';
  position: absolute;
  inset: 7px;
  border: 1.5px dotted rgba(58, 42, 32, .3);
  pointer-events: none;
}
.polaroid__marcador,
.lightbox__marcador {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .14em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--tinta-suave);
}
.polaroid__fecha:empty,
.lightbox__fecha:empty { display: none; }
.con-foto::after,
.con-foto .polaroid__marcador,
.con-foto .lightbox__marcador { display: none; }

.polaroid__pie {
  display: block;
  padding: 8px 2px 11px;
}
.polaroid__fecha {
  display: block;
  font-family: var(--mano);
  font-size: 1.05rem;
  line-height: 1.1;
  color: var(--tinta-suave);
}
.polaroid__nota {
  display: block;
  font-family: var(--mano);
  font-size: 1.3rem;
  line-height: 1.1;
  color: var(--tinta);
}

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  overflow-y: auto;
  opacity: 0;
  transition: opacity .3s ease;
}
.lightbox.abierto { opacity: 1; }
.lightbox__fondo {
  position: fixed;
  inset: 0;
  background: rgba(28, 20, 14, .84);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.lightbox__contenido {
  position: relative;
  width: 100%;
  max-width: 440px;
  margin: auto;
  padding-top: 56px;
  transform: translateY(14px) scale(.97);
  transition: transform .4s var(--suave);
}
.lightbox.abierto .lightbox__contenido { transform: none; }

.lightbox__cerrar {
  position: absolute;
  top: 0;
  right: 0;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(243, 235, 222, .35);
  border-radius: 50%;
  background: rgba(243, 235, 222, .1);
  color: var(--crema);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}
.lightbox__cerrar:hover { background: rgba(243, 235, 222, .2); }

.lightbox__polaroid {
  margin: 0;
  padding: 14px 14px 22px;
  border-radius: 2px;
  background: #fffdf8;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .6);
  transform: rotate(-1deg);
}
.lightbox__foto {
  width: min(100%, 50svh * .8);
  aspect-ratio: 4 / 5;
  margin: 0 auto;
}
.lightbox__polaroid figcaption {
  padding: 14px 6px 0;
  text-align: center;
}
.lightbox__fecha {
  font-family: var(--mano);
  font-size: 1.2rem;
  line-height: 1.1;
  color: var(--tinta-suave);
}
.lightbox__nota {
  font-family: var(--mano);
  font-size: 1.75rem;
  line-height: 1.15;
}
.lightbox__larga {
  margin-top: 10px;
  font-size: 17px;
  line-height: 1.55;
  color: var(--tinta-suave);
  text-wrap: pretty;
}
.lightbox__nav {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
}
.lightbox__nav .boton { flex: 1; max-width: 180px; }

/* ==========================================================================
   5 · Cuponera
   ========================================================================== */
.cupones {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 390px), 1fr));
  gap: 26px 24px;
}

.cupon {
  --talon: 82px;
  --r: 5px;
  position: relative;
  filter: drop-shadow(0 1px 1px rgba(58, 42, 32, .12)) drop-shadow(0 8px 12px rgba(58, 42, 32, .14));
}

.cupon__ticket {
  display: grid;
  grid-template-columns: 1fr var(--talon);
  min-height: 200px;
  background: var(--papel);
  /* Troquelado lateral + muescas sobre la línea del talón */
  -webkit-mask:
    radial-gradient(circle var(--r) at left, #0000 97%, #000) 0 0 / 100% calc(var(--r) * 3.4) repeat-y,
    radial-gradient(circle var(--r) at right, #0000 97%, #000) 0 0 / 100% calc(var(--r) * 3.4) repeat-y,
    radial-gradient(circle 10px at calc(100% - var(--talon) - 11px) 0, #0000 97%, #000) no-repeat,
    radial-gradient(circle 10px at calc(100% - var(--talon) - 11px) 100%, #0000 97%, #000) no-repeat;
  -webkit-mask-composite: source-in;
  mask:
    radial-gradient(circle var(--r) at left, #0000 97%, #000) 0 0 / 100% calc(var(--r) * 3.4) repeat-y,
    radial-gradient(circle var(--r) at right, #0000 97%, #000) 0 0 / 100% calc(var(--r) * 3.4) repeat-y,
    radial-gradient(circle 10px at calc(100% - var(--talon) - 11px) 0, #0000 97%, #000) no-repeat,
    radial-gradient(circle 10px at calc(100% - var(--talon) - 11px) 100%, #0000 97%, #000) no-repeat;
  mask-composite: intersect;
}

.cupon__cuerpo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 24px 20px 24px 26px;
  transition: opacity .4s;
}
.cupon__kicker {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--terracota-texto);
}
.cupon__titulo {
  margin-top: 6px;
  font-family: var(--serif-titulo);
  font-weight: 600;
  font-size: 1.75rem;
  line-height: 1.05;
  text-wrap: balance;
}
.cupon__detalle {
  margin-top: 8px;
  font-size: 17px;
  line-height: 1.45;
  color: var(--tinta-suave);
}
.cupon__boton {
  margin-top: auto;
  min-height: 44px;
  padding: 0 22px;
  font-size: 16px;
}
.cupon__detalle + .cupon__boton,
.cupon__detalle + .cupon__mensaje { margin-top: 16px; }
.cupon__mensaje {
  font-family: var(--mano);
  font-size: 1.45rem;
  line-height: 1.15;
  color: var(--terracota-texto);
  outline: none;
}
.cupon__mensaje.aparece { animation: aparecer .6s .25s ease both; }

.cupon__talon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--terracota);
  color: var(--papel);
}
.cupon:nth-child(even) .cupon__talon { background: var(--salvia-oscura); }
.cupon__talon::before {
  content: '';
  position: absolute;
  top: 14px;
  bottom: 14px;
  left: -12px;
  border-left: 2px dashed rgba(58, 42, 32, .28);
}
.cupon__serie {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  white-space: nowrap;
}

.cupon__sello {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: calc((100% - 82px) / 2);
  padding: 6px 16px 4px;
  border: 5px double var(--terracota);
  border-radius: 6px;
  background: rgba(251, 246, 236, .6);
  color: var(--terracota);
  font-family: var(--serif-titulo);
  font-weight: 600;
  font-size: 1.7rem;
  line-height: 1.1;
  white-space: nowrap;
  pointer-events: none;
  opacity: .92;
  transform: translate(-50%, -50%) rotate(-12deg);
}
.cupon__sello.estampar { animation: estampar .55s cubic-bezier(.2, 1.3, .4, 1) both; }
@keyframes estampar {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(-18deg) scale(1.9); }
  60% { opacity: .95; }
  100% { opacity: .92; transform: translate(-50%, -50%) rotate(-12deg) scale(1); }
}
.cupon.canjeado .cupon__cuerpo > :not(.cupon__mensaje) { opacity: .55; }

/* ==========================================================================
   6 · Cierre
   ========================================================================== */
.cierre {
  min-height: 92vh;
  min-height: 92svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 90px var(--gutter) 110px;
  text-align: center;
}
.cierre__linea {
  display: block;
  width: 54px;
  height: 2px;
  margin: 0 auto 30px;
  background: var(--terracota);
}
.cierre__titulo {
  font-family: var(--serif-titulo);
  font-weight: 600;
  font-size: clamp(3.1rem, 14vw, 7rem);
  line-height: .98;
  letter-spacing: -.015em;
  text-wrap: balance;
}
.cierre__teamo {
  margin-top: 18px;
  font-family: var(--serif-titulo);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(2.1rem, 8vw, 3.5rem);
  line-height: 1;
  color: var(--terracota);
}
.cierre__firma {
  margin-top: 30px;
  font-family: var(--mano);
  font-size: 1.85rem;
  line-height: 1.1;
  color: var(--tinta-suave);
}

/* ==========================================================================
   Pantallas más grandes
   ========================================================================== */
@media (min-width: 720px) {
  :root { --gutter: 32px; }
  body { font-size: 20px; }
  .seccion { padding: 110px var(--gutter); }
  .seccion--carta { padding-top: 80px; }
  .carta { padding: 64px 68px 64px; }
  .carta__cuerpo p { font-size: 20px; }
  .torta { grid-template-columns: repeat(12, 1fr); }
  .vela { height: 180px; }
  .vela:nth-child(n + 9) { --piso: var(--terracota); }
  .vela:nth-child(n + 13) { --piso: var(--salvia); }
  .vela__cera { width: 18px; }
  .vela__piso { height: 40px; }
  .torta-marco { padding-top: 124px; }
  .nota-vela { max-width: 360px; font-size: 1.55rem; padding: 14px 22px 15px; }
  .razones { padding: 34px 40px 30px; columns: 2; column-gap: 32px; }
  .razones li { break-inside: avoid; }
  .chips { flex-wrap: wrap; margin: 0 0 28px; padding: 0; overflow: visible; }
  .corcho { padding: 48px 40px 52px; }
  .polaroids { gap: 44px 32px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
  .final { padding: 38px 40px 34px; }
}

/* ==========================================================================
   Movimiento reducido
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .revelar { transform: none; }
  .sigue__linea::after { display: none; }
}