/* ============================================================
   ÁBREME SI HOY NECESITAS UNA SEÑAL
   Hoja de estilos única. Mobile-first.

   Estética: amarillo cálido, crema, blanco roto, marrón en vez de
   negro, mucho aire, sombras suaves, bordes redondeados. El rosa
   aparece solo en pinceladas pequeñas (la firma, algún detalle),
   nunca como color de fondo.

   Jerarquía: LA CARTA es la protagonista absoluta. Todo lo demás
   (compartir, dejar un mensaje, ayuda, instalar) vive por debajo,
   con menos peso visual, sin marcos ni cajas que compitan con ella.
   ============================================================ */

:root{
  /* Paleta */
  --cream:        #FFF8E9;
  --cream-deep:    #FBEFD6;
  --paper:        #FFFDF8;
  --yellow:       #F5C443;
  --yellow-deep:  #E3A62F;
  --yellow-pale:  #FCE8AE;
  --yellow-soft:  #F7D877;
  --gold-line:    #D9A93B;
  --ink:          #4A3B26;      /* marrón oscuro en vez de negro */
  --ink-soft:     #7A6A50;
  --ink-faint:    #786A4A;   /* ajustado para cumplir contraste AA (>=4.5:1) sobre crema */
  --white:        #FFFFFF;
  --shadow-soft:  rgba(74, 59, 38, 0.14);
  --shadow-softer: rgba(74, 59, 38, 0.08);

  /* Detalles Rodix: rosa solo en pequeñas pinceladas (firma, algún
     botón puntual) — el amarillo/crema sigue siendo protagonista. */
  --pink:         #E98FB3;
  --pink-deep:    #D96E97;
  --pink-soft:    #F8D8E5;
  /* Rosa oscurecido para texto: cumple contraste AA (>=4.5:1) sobre
     fondos claros mientras se percibe claramente como "rosa". */
  --pink-ink:     #B23E72;

  /* Tipografía. Fallbacks robustos por si Google Fonts no carga. */
  --font-ui:     'Quicksand', 'Segoe UI', system-ui, -apple-system, Tahoma, sans-serif;
  --font-serif:  'Fraunces', Georgia, 'Iowan Old Style', 'Palatino Linotype', serif;
  --font-hand:   'Dancing Script', 'Segoe Script', 'Snell Roundhand', 'Brush Script MT', cursive;

  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 12px;

  color-scheme: light;
}

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

/* Refuerzo explícito: algunos componentes usan display:flex en su clase,
   que tiene más especificidad que la regla [hidden] de la hoja de estilos
   del navegador. Sin esto, elementos con el atributo "hidden" (el panel de
   ayuda, las ventanas modales...) seguirían ocupando espacio y capturando
   clics aunque estén "ocultos". */
[hidden]{
  display: none !important;
}

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

body{
  margin: 0;
  min-height: 100vh;   /* fallback para navegadores sin soporte de dvh */
  min-height: 100dvh;  /* iOS/Android: altura real visible, sin la barra del navegador */
  background: linear-gradient(180deg, var(--cream) 0%, var(--cream-deep) 100%);
  color: var(--ink);
  font-family: var(--font-ui);
  font-weight: 500;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  /* Ningún elemento debe poder provocar scroll horizontal, ni durante
     la animación del sobre ni con una palabra muy larga. */
  overflow-x: hidden;
}

/* ===================== ACCESIBILIDAD: utilidades ===================== */

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

.sr-only-canvas{
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.doodle-sprite{
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.skip-link{
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--ink);
  color: var(--white);
  padding: 10px 16px;
  border-radius: 0 0 10px 0;
  z-index: 100;
}
.skip-link:focus{
  left: 0;
}

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

/* Quitamos el outline solo cuando no es navegación por teclado,
   pero SIEMPRE dejamos :focus-visible activo (requisito de accesibilidad). */
:focus:not(:focus-visible){
  outline: none;
}

/* ===================== PEQUEÑOS DIBUJOS (doodles) =====================
   Estrellitas, florecitas, caritas, sobres y algún corazón. Sustituyen
   a los emojis repetidos: pesan unos bytes, heredan el color del texto
   con currentColor y se ven igual en cualquier dispositivo (un emoji
   cambia de dibujo según el móvil). ===================== */

.doodle{
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: -0.14em;
  fill: currentColor;
  flex: none;
}
.doodle--tiny{ width: 0.72em; height: 0.72em; }
.doodle--sm{ width: 1.05em; height: 1.05em; }
.doodle--lg{ width: 1.9rem; height: 1.9rem; }
.doodle--xl{ width: 3rem; height: 3rem; }

/* Centro claro de las florecitas (mismo tono que el papel: funciona
   igual sobre amarillo que sobre crema). */
.doodle__center{ fill: #FFFDF8; }

/* ===================== LAYOUT GENERAL ===================== */

.page{
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* OJO: este padding lateral (20px) entra en el cálculo de --env-h
     más abajo. Si lo cambias, actualiza también esa fórmula. */
  padding: env(safe-area-inset-top, 0) 20px calc(env(safe-area-inset-bottom, 0) + 12px);
  max-width: 520px;
  margin: 0 auto;
  width: 100%;
}

.brand{
  width: 100%;
  text-align: center;
  padding: 22px 0 6px;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: var(--ink-soft);
  font-weight: 600;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.brand__mark{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--gold-line);
}
.brand__mark #brandLabel{ color: var(--ink-soft); }

.brand__date{
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  color: var(--ink-faint);
  font-weight: 600;
}

main{
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.footer{
  width: 100%;
  text-align: center;
  padding: 22px 0 26px;
  font-size: 0.72rem;
  color: var(--ink-faint);
}

.footer__identity{
  letter-spacing: 0.12em;
  margin: 0;
}

.footer__links{
  margin: 8px 0 4px;
}

.footer__link{
  background: transparent;
  border: none;
  color: var(--ink-soft);
  font-size: 0.75rem;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
  padding: 4px;
  font-family: var(--font-ui);
}

.footer__sep{
  color: var(--ink-faint);
  margin: 0 2px;
}

.footer__disclaimer{
  font-size: 0.68rem;
  color: var(--ink-faint);
  max-width: 320px;
  margin: 6px auto 0;
}

/* ===================== VISTA: ANTES DEL LANZAMIENTO ===================== */

.prelaunch{
  width: 100%;
  min-height: 60vh;
  min-height: 60dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 8px;
  padding: 40px 12px;
}

.prelaunch__icon{
  color: var(--gold-line);
  margin-bottom: 14px;
}

.prelaunch__text{
  font-family: var(--font-serif);
  font-size: 1.15rem;
  color: var(--ink);
  max-width: 320px;
  margin: 0;
}
.prelaunch__text--soft{
  font-size: 0.95rem;
  color: var(--ink-soft);
  font-style: italic;
}

/* ===================== VISTA PRINCIPAL ===================== */

.experience{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-top: 14px;
}

.experience__title{
  font-family: var(--font-serif);
  font-weight: 500;
  font-style: italic;
  font-size: 1.5rem;
  line-height: 1.35;
  max-width: 320px;
  margin: 6px 0 0;
  color: var(--ink);
}

/* ============================================================
   EL SOBRE Y LA CARTA — el escenario
   ============================================================
   La carta NO es una tarjeta que aparece debajo del sobre: vive
   dentro del mismo bloque que el sobre y sale físicamente de él.

   Cómo encaja cada pieza (el detalle largo está en js/envelope.js):

     .scene__box   contenedor con posición relativa. NO crea contexto
                   de apilamiento (sin z-index propio), y eso es
                   imprescindible: permite que #letter se intercale
                   ENTRE las capas del sobre.
     .envelope     posicionado en absoluto sobre ese bloque, así que
                   no empuja nada al crecer la carta. Tampoco crea
                   contexto de apilamiento (sin z-index, sin filter,
                   sin perspective ni transform) por el mismo motivo.
     #letter       en el flujo normal: al crecer, empuja de verdad el
                   contenido de abajo.

   Orden real de pintado:
     0 sombra · 1 parte de atrás · 2 forro interior · 3 EL PAPEL ·
     5 bolsillo delantero · 6 solapa (cerrada) · 7 sello
   Al abrirse, la solapa pasa a 0 (detrás de todo) y el papel a 6
   (por delante del bolsillo), justo cuando su borde inferior está
   en la boca del sobre: por eso el cambio no se nota.

   --env-h es la altura del sobre. Se calcula primero en CSS puro
   (para que el hueco esté reservado desde el primer pintado) y
   js/envelope.js la afina con la medida real. --letter-offset es el
   margen superior final del papel ya desplegado: negativo, porque
   termina un poco por encima del borde superior del sobre.
   ============================================================ */

.scene{
  --env-max: 360px;
  --env-ratio: 1.62;
  /* min(ancho disponible, ancho máximo) / proporción. El "40px" son
     los paddings laterales de .page. */
  --env-h: calc(min(100vw - 40px, var(--env-max)) / var(--env-ratio));
  --letter-offset: calc(var(--env-h) * -0.06);

  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Aire generoso arriba: al abrirse, la solapa gira hacia atrás y
     asoma por encima del sobre. Este margen es su sitio, y está
     calculado a partir de la propia altura del sobre para que la
     solapa abierta nunca llegue a tapar el título, ni en un móvil
     pequeño ni en escritorio (ver la rotación de .envelope__flapWrap
     más abajo: ocupa ~0,32 × la altura del sobre por encima de él). */
  margin: calc(var(--env-h) * 0.36) 0 0;
}

.scene__box{
  position: relative;
  width: min(100%, var(--env-max));
  min-height: var(--env-h);
}

/* ---------- EL SOBRE ---------- */

.envelope{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  aspect-ratio: var(--env-ratio);
  cursor: pointer;
  /* Sin z-index / filter / perspective / transform a propósito: si
     creara un contexto de apilamiento, el papel no podría colocarse
     entre sus capas y volveríamos a "una tarjeta detrás del sobre". */
}
.envelope.is-open{ cursor: default; }

.envelope__shadow{
  position: absolute;
  left: 9%;
  right: 9%;
  bottom: -13px;
  height: 18px;
  background: radial-gradient(ellipse at center, var(--shadow-soft) 0%, transparent 72%);
  transition: opacity 600ms ease;
  z-index: 0;
}
.envelope.is-open .envelope__shadow{ opacity: 0.45; }

/* 1 · PARTE DE ATRÁS: es el interior del sobre, lo que se ve por la
   abertura cuando la solapa ya está abierta. Un punto más oscura y
   cálida que el frente, como el papel visto por dentro. */
.envelope__back{
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 12px;
  background: linear-gradient(180deg, #EFC456 0%, #F4D170 46%, #F7DA85 100%);
  box-shadow:
    0 16px 30px -18px var(--shadow-soft),
    inset 0 1px 0 rgba(255,255,255,0.35);
}

/* 2 · FORRO: sombra suave desde el borde superior hacia la boca. Es
   lo que hace que el papel parezca salir de DENTRO y no de detrás. */
.envelope__lining{
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 40%;
  z-index: 2;
  border-radius: 12px 12px 0 0;
  background: linear-gradient(180deg,
              rgba(74,59,38,0.24) 0%,
              rgba(74,59,38,0.09) 44%,
              rgba(74,59,38,0) 100%);
  pointer-events: none;
}

/* 5 · BOLSILLO DELANTERO: empieza justo en la boca (40%) y llega
   hasta abajo. Tapa la parte inferior del papel mientras sale. Los
   dos pliegues diagonales son los que hacen que se lea como un sobre
   de verdad y no como un rectángulo amarillo. */
.envelope__front{
  position: absolute;
  left: 0;
  right: 0;
  top: 40%;
  bottom: 0;
  z-index: 5;
  border-radius: 2px 2px 12px 12px;
  background: linear-gradient(180deg, #F3CF6C 0%, #EFC152 52%, #EAB13C 100%);
  box-shadow: none;
  transition: box-shadow 300ms ease;
  overflow: hidden;
}
.envelope.is-open .envelope__front{
  box-shadow: 0 -6px 12px -8px rgba(74,59,38,0.22);
}
.envelope__front svg{
  width: 100%;
  height: 100%;
  display: block;
}
.envelope__frontFold{
  fill: none;
  stroke: rgba(74,59,38,0.16);
  stroke-width: 1.2;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

/* 6 · SOLAPA: lo único que gira. La perspectiva vive AQUÍ (no en
   .envelope) para no crear un contexto de apilamiento que rompería
   el orden de capas del papel. */
.envelope__flapStage{
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 50%;
  z-index: 6;
  perspective: 900px;
  pointer-events: none;
}
/* Al abrir, la solapa pasa DETRÁS del sobre entero: en un sobre real
   la solapa abierta queda por detrás, y solo asoma su punta por
   encima del borde superior. */
.envelope.is-open .envelope__flapStage{ z-index: 0; }

.envelope__flapWrap{
  position: absolute;
  inset: 0;
  transform-origin: top center;
  transform-style: preserve-3d;
  transform: rotateX(0deg);
  transition: transform 460ms cubic-bezier(.5,.02,.28,1);
  filter: drop-shadow(0 3px 4px var(--shadow-softer));
}
.envelope.is-open .envelope__flapWrap{
  /* Ni plana del todo ni a medias: así se queda una solapa abierta de
     verdad, apoyada hacia atrás. Con menos de 180° también ocupa menos
     por encima del sobre, que es lo que evita que tape el título. */
  transform: rotateX(-134deg);
}

/* La solapa tiene dos caras, como una de verdad: por fuera el
   amarillo del sobre, por dentro un tono más claro (el forro). Al
   girar más de 90° se ve la interior, no un reflejo raro de la otra. */
.envelope__flap{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
  backface-visibility: hidden;
}
.envelope__flap path{
  fill: #F7CE5E;
  stroke: var(--gold-line);
  stroke-width: 1.2;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.envelope__flap--inner{
  transform: rotateY(180deg);
}
.envelope__flap--inner path{
  fill: var(--yellow-pale);
  stroke: var(--gold-line);
}

/* 7 · SELLO: una florecita en vez de otro corazón. Se desvanece y se
   encoge al abrir, como si se rompiera al despegar la solapa. */
.envelope__seal{
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(28px, 12%, 46px);
  height: clamp(28px, 12%, 46px);
  transform: translate(-50%, -50%);
  z-index: 7;
  transition: opacity 300ms ease, transform 300ms ease;
  filter: drop-shadow(0 2px 3px rgba(74,59,38,0.18));
  pointer-events: none;
}
.envelope__seal svg{
  width: 100%;
  height: 100%;
  overflow: visible;
}
.envelope__sealHeart{
  fill: #FFFFFF;
}
.envelope.is-open .envelope__seal{
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.5) rotate(-14deg);
  z-index: 0;
}

/* ---------- EL PAPEL ---------- */

.letter{
  position: relative;
  z-index: 3;                       /* entre el forro (2) y el bolsillo (5) */
  width: 94%;
  margin-left: auto;
  margin-right: auto;
  margin-top: var(--letter-offset);
  box-sizing: border-box;
  /* Textura de papel muy sutil: un degradado casi imperceptible en
     vez de una imagen — nunca "pergamino medieval". */
  background:
    linear-gradient(158deg, rgba(255,255,255,0.65) 0%, rgba(255,255,255,0) 42%),
    var(--paper);
  border-radius: 8px 8px 14px 14px;
  box-shadow:
    0 2px 4px -2px rgba(74,59,38,0.18),
    0 14px 30px -18px var(--shadow-soft);
  padding: 24px 22px 20px;
  text-align: left;
  overflow: hidden;
  opacity: 0;
  transition: opacity 260ms ease, box-shadow 400ms ease;
}

/* Dos marcas de doblez finísimas, como las de una carta que venía
   plegada dentro del sobre. Se colocan en porcentajes, así que
   funcionan igual con una carta corta que con una larga. */
.letter::before,
.letter::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(74,59,38,0.045) 16%, rgba(74,59,38,0.045) 84%, transparent);
  pointer-events: none;
}
.letter::before{ top: 33.33%; }
.letter::after{ top: 66.66%; }

.letter.is-open{ opacity: 1; }

/* Ya fuera del sobre: pasa por delante del bolsillo y gana algo de
   sombra, como un papel que ahora está apoyado sobre el sobre. */
.letter.is-out{
  z-index: 6;
  box-shadow:
    0 3px 6px -3px rgba(74,59,38,0.22),
    0 22px 44px -22px var(--shadow-soft);
}

.letter__label{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  color: var(--ink-faint);
  text-align: center;
  margin: 0 0 14px;
}
.letter__label .doodle{ color: var(--gold-line); }

.letter__message{
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.16rem;
  line-height: 1.55;
  color: var(--ink);
  text-align: center;
  margin: 0;
  /* Una palabra larguísima nunca debe desbordar el papel. */
  overflow-wrap: break-word;
}

/* FECHA PASADA: solo aparece si se ha pedido explícitamente, vía
   ?date=, una fecha anterior a la de hoy (ver script.js). Discreta a
   propósito. */
.letter__pastNote{
  font-size: 0.76rem;
  font-style: italic;
  color: var(--ink-faint);
  text-align: center;
  margin: 12px 0 0;
}

/* Separador con una florecita en medio, en vez de una línea seca. */
.letter__divider{
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 20px 0 18px;
  color: var(--yellow-deep);
}
.letter__divider::before,
.letter__divider::after{
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--yellow-pale), transparent);
}

.letter__note{
  font-size: 0.88rem;
  color: var(--ink);
  line-height: 1.65;
  margin: 0;
  white-space: pre-line;
  overflow-wrap: break-word;
}

/* CIERRE: la despedida, la firma manuscrita en rosa con su corazón
   dibujado a mano y un subrayado ondulado. Es el remate de la carta,
   así que tiene su propio aire alrededor. */
.letter__closing{
  margin: 22px 0 2px;
  text-align: right;
}
.letter__signOff{
  font-family: var(--font-hand);
  font-weight: 500;
  font-size: 1.22rem;
  line-height: 1;
  color: var(--ink-soft);
  margin: 0;
}

/* LA FIRMA
   No es un título: es una firma. Por eso va en una script de trazo
   continuo (Dancing Script), en un cuerpo contenido —solo un poco
   mayor que la despedida, no el doble—, con el trazo algo más fino,
   ligeramente inclinada y con las letras un pelín juntas, como cuando
   se firma de corrido y sin levantar el boli. */
.letter__signature{
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 8px;
  margin: 2px 0 0;
}
.letter__signatureName{
  font-family: var(--font-hand);
  font-weight: 600;
  font-size: 1.72rem;
  line-height: 1.15;
  letter-spacing: -0.005em;
  color: var(--pink-ink);
  /* Un pelín inclinada, como una firma escrita deprisa y con cariño. */
  transform: rotate(-2.2deg);
  transform-origin: right center;
}
.letter__heart{
  width: 19px;
  height: 17px;
  flex: none;
  align-self: center;
  color: var(--pink-deep);
  transform: rotate(9deg);
}
.letter__signatureUnderline{
  display: block;
  width: 108px;
  height: 8px;
  margin: 0 4px 0 auto;
  color: var(--pink);
  opacity: 0.7;
}

/* ---------- CTA + botón de abrir (solo con el sobre cerrado) ---------- */

.scene__cta{
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.02rem;
  color: var(--ink-soft);
  margin: 26px 0 14px;
}

.scene__open{
  min-width: 178px;
}

@media (min-width: 600px){
  .scene:not(.scene--small){ --env-max: 460px; }
  .letter{ padding: 30px 30px 24px; }
  .letter__message{ font-size: 1.3rem; }
}

/* Pantallas muy estrechas (320px): recuperamos ancho de lectura
   reduciendo un poco el acolchado interior del papel. */
@media (max-width: 360px){
  .page{ padding-left: 14px; padding-right: 14px; }
  .scene{ --env-h: calc(min(100vw - 28px, var(--env-max)) / var(--env-ratio)); }
  .letter{ padding: 20px 16px 18px; }
  .letter__message{ font-size: 1.08rem; }
}

/* ===================== BOTONES ===================== */

.btn{
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.95rem;
  border: none;
  cursor: pointer;
  border-radius: 999px;
  padding: 14px 26px;
  min-height: 48px;
  transition: transform 200ms ease, box-shadow 200ms ease, background 200ms ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.btn:active{ transform: scale(0.97); }

.btn--primary{
  background: var(--yellow);
  color: var(--ink);
  box-shadow: 0 10px 24px -10px var(--shadow-soft);
}
.btn--primary:hover{ background: var(--yellow-deep); }
.btn--primary .doodle{ color: rgba(74,59,38,0.55); }

.btn--ghost{
  background: var(--paper);
  color: var(--ink);
  border: 1.5px solid var(--yellow-deep);
}
.btn--ghost:hover{ background: var(--yellow-pale); }

.btn--text{
  background: transparent;
  color: var(--ink-soft);
  padding: 10px 14px;
}

/* Botón de baja jerarquía: existe, se ve, pero no compite con la
   carta ni con el sobre. */
.btn--quiet{
  background: transparent;
  color: var(--ink-soft);
  border: 1.5px solid rgba(217,169,59,0.45);
  font-size: 0.88rem;
  min-height: 42px;
  padding: 10px 20px;
}
.btn--quiet:hover{ background: rgba(252,232,174,0.5); color: var(--ink); }

.btn--pink{
  background: var(--pink);
  color: #4A2036;
  box-shadow: 0 10px 24px -10px rgba(217,110,151,0.45);
}
.btn--pink:hover{ background: var(--pink-deep); }

.btn--pink-ghost{
  background: var(--paper);
  color: var(--pink-ink);
  border: 1.5px solid var(--pink);
}
.btn--pink-ghost:hover{ background: var(--pink-soft); }

.btn--help{
  background: transparent;
  color: var(--ink-soft);
  border: 1.5px solid rgba(217,169,59,0.5);
  width: 100%;
  max-width: 340px;
  font-size: 0.9rem;
  min-height: 44px;
}
.btn--help:hover{ background: var(--cream); color: var(--ink); }

.btn--choice{
  background: var(--paper);
  color: var(--ink);
  border: 1.5px solid var(--gold-line);
  width: 100%;
  max-width: 360px;
  margin-bottom: 10px;
}

/* ===================== CIERRE DEL DÍA + COMPARTIR =====================
   Van fuera de la carta a propósito: son notas de la página, no parte
   del mensaje. Discretos, con aire, sin marcos. ===================== */

.daily-note{
  font-size: 0.82rem;
  color: var(--ink-faint);
  text-align: center;
  margin: 22px 0 0;
  max-width: 300px;
}

.share-row{
  display: flex;
  justify-content: center;
  margin: 18px 0 0;
}

/* Guiño final, en voz muy baja. */
.wink{
  font-size: 0.74rem;
  line-height: 1.6;
  color: var(--ink-faint);
  max-width: 330px;
  text-align: center;
  margin: 4px auto 26px;
  opacity: 0.85;
}
.wink .doodle{ color: var(--yellow-deep); margin-right: 4px; }

/* ===================== COMUNIDAD (mensajes anónimos) =====================
   Progressive enhancement: todo esto sigue oculto si la función no
   está configurada o si Supabase no responde. Sin marcos ni tarjetas:
   solo texto, aire y un pequeño sobre. ===================== */

.community{
  width: 100%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 46px 0 10px;
}

.community__invite,
.community__prompt{
  width: 100%;
  text-align: center;
}

.community__invite{
  padding-top: 26px;
  border-top: 1px solid rgba(217,169,59,0.22);
}

.community__icon{
  color: var(--pink);
  margin-bottom: 6px;
}

.community__title{
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--ink);
  margin: 0 0 6px;
}

.community__subtitle{
  font-size: 0.86rem;
  color: var(--ink-soft);
  margin: 0 0 18px;
  line-height: 1.55;
}

.community__letterBlock{
  width: 100%;
  margin-top: 44px;
  padding-top: 26px;
  border-top: 1px solid rgba(233,143,179,0.28);
}

/* El segundo sobre: mismo motor, más pequeño y en rosa suave. */
.scene--small{
  --env-max: 300px;
  margin-top: 22px;
}
.scene--small .scene__cta{ margin-top: 18px; }

.envelope--small .envelope__back{
  background: linear-gradient(180deg, #E9A0BE 0%, #F0BCD3 34%, #F6D3E2 100%);
}
.envelope--small .envelope__front{
  background: linear-gradient(168deg, var(--pink-soft) 0%, var(--pink) 100%);
}
.envelope--small .envelope__flap path{
  fill: var(--pink-soft);
  stroke: var(--pink-deep);
}
.envelope--small .envelope__flap--inner path{
  fill: #FDEEF4;
  stroke: var(--pink-deep);
}
.envelope--small .envelope__frontFold{ stroke: rgba(122,49,86,0.13); }

/* La carta de comunidad usa el mismo papel que la principal, con los
   acentos en rosa. */
.letter--community{
  border-radius: 8px 8px 14px 14px;
}
.letter--community .letter__label{ color: var(--pink-ink); }

.community__revealLabel{
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--pink-ink);
  text-align: center;
  margin: 0 0 14px;
}

.community__revealText{
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.04rem;
  line-height: 1.6;
  color: var(--ink);
  margin: 0 0 16px;
  text-align: center;
  white-space: pre-line;
  overflow-wrap: break-word;
}

.community__revealFooter{
  font-size: 0.76rem;
  color: var(--ink-faint);
  margin: 0;
  padding-top: 12px;
  text-align: center;
  border-top: 1px solid rgba(233,143,179,0.3);
}

/* ===================== AYUDA ===================== */

.help{
  width: 100%;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 10px 0 32px;
}

.help__panel{
  width: 100%;
  margin-top: 14px;
  background: var(--cream);
  border: 1.5px solid var(--yellow-pale);
  border-radius: var(--radius-md);
  padding: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
}

.help__intro{
  font-size: 0.85rem;
  color: var(--ink);
  margin: 0 0 12px;
}

.help__companyText{
  font-size: 0.8rem;
  color: var(--ink-soft);
  margin: 8px 0 4px;
  font-style: italic;
}

.help__chooser{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.help__chooserText{
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin: 0 0 10px;
}

.help__block{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.help__mainLink{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background: var(--yellow);
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
  padding: 14px 18px;
  border-radius: 999px;
  min-height: 48px;
}

.help__note{
  font-size: 0.78rem;
  color: var(--ink-soft);
  margin: 4px 0 10px;
}

.help__secondaryLink{
  font-size: 0.85rem;
  color: var(--ink);
  text-decoration: underline;
  margin-bottom: 14px;
}

.help__emergencyText{
  font-size: 0.82rem;
  color: var(--ink-soft);
  margin: 10px 0 4px;
}
.help__emergencyLink{
  font-size: 0.9rem;
  color: var(--ink);
  font-weight: 700;
  text-decoration: underline;
  margin-bottom: 14px;
}

.help__switch{
  background: transparent;
  border: none;
  color: var(--ink-soft);
  font-size: 0.8rem;
  text-decoration: underline;
  cursor: pointer;
  padding: 6px;
}

/* ===================== TOAST ===================== */

.toast{
  position: fixed;
  left: 50%;
  bottom: calc(26px + env(safe-area-inset-bottom, 0));
  transform: translateX(-50%);
  background: var(--ink);
  color: var(--paper);
  padding: 12px 20px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  box-shadow: 0 10px 24px -8px rgba(0,0,0,0.35);
  z-index: 50;
  animation: toastIn 220ms ease both;
}

@keyframes toastIn{
  from{ opacity: 0; transform: translateX(-50%) translateY(8px); }
  to{ opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ===================== GUARDAR EN PANTALLA DE INICIO =====================
   Nota discreta, sin caja: explica en una frase cómo instalar la web
   como app en el móvil, sin tecnicismos. ===================== */

.install-note{
  width: 100%;
  max-width: 360px;
  padding: 0 4px;
  margin: 0 0 26px;
  text-align: center;
}

.install-note__title{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ink-soft);
  margin: 0 0 4px;
}
.install-note__title .doodle{ color: var(--yellow-deep); }

.install-note__text{
  font-size: 0.78rem;
  color: var(--ink-faint);
  margin: 0 0 8px;
}

.install-note__steps{
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 0.74rem;
  color: var(--ink-faint);
}

.install-note__steps strong{
  color: var(--ink-soft);
  font-weight: 700;
}

/* ===================== MODALES ===================== */

.modal{
  position: fixed;
  inset: 0;
  background: rgba(74,59,38,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(20px, env(safe-area-inset-top, 0)) max(20px, env(safe-area-inset-right, 0))
           max(20px, env(safe-area-inset-bottom, 0)) max(20px, env(safe-area-inset-left, 0));
  z-index: 90;
}

.modal__panel{
  background: var(--paper);
  border-radius: var(--radius-md);
  padding: 22px;
  max-width: 420px;
  width: 100%;
  max-height: 90vh;
  max-height: 90dvh;
  overflow-y: auto;
  box-shadow: 0 24px 48px -16px rgba(74,59,38,0.35);
}

.modal__panel--narrow{
  max-width: 380px;
}

.modal__title{
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.25rem;
  color: var(--ink);
  margin: 0 0 12px;
}

.modal__intro{
  font-size: 0.88rem;
  color: var(--ink-soft);
  line-height: 1.55;
  margin: 0 0 14px;
}

.modal__form{
  display: flex;
  flex-direction: column;
}

.modal__textarea{
  width: 100%;
  box-sizing: border-box;
  font-family: var(--font-ui);
  font-size: 0.95rem;
  color: var(--ink);
  background: var(--cream);
  border: 1.5px solid var(--yellow-pale);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  resize: vertical;
  min-height: 120px;
  line-height: 1.5;
}
.modal__textarea:focus-visible{
  border-color: var(--pink);
}

.modal__counter{
  font-size: 0.72rem;
  color: var(--ink-faint);
  text-align: right;
  margin: 4px 0 12px;
}

/* Honeypot: invisible para personas (fuera de pantalla, sin tabulado),
   pero presente en el DOM para que un bot simple lo rellene. */
.modal__honeypot{
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.modal__privacyNote{
  font-size: 0.78rem;
  color: var(--ink);
  background: var(--pink-soft);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin: 0 0 14px;
  line-height: 1.5;
}

.modal__rules{
  background: var(--cream);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin: 0 0 14px;
}

.modal__rulesText{
  font-size: 0.78rem;
  color: var(--ink-soft);
  line-height: 1.55;
  margin: 0 0 10px;
}

.modal__checkboxLabel{
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--ink);
  cursor: pointer;
}
.modal__checkboxLabel input{
  margin-top: 3px;
}

.modal__turnstile{
  margin: 4px 0 14px;
  min-height: 0;
}

.modal__error{
  font-size: 0.82rem;
  color: #A23B3B;
  background: #FBEAEA;
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin: 0 0 14px;
}

.modal__actions{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.modal__thanks{
  text-align: center;
}

.modal__thanksIcon{
  color: var(--pink);
  margin-bottom: 8px;
}

.modal__thanksText{
  font-size: 0.95rem;
  color: var(--ink);
  line-height: 1.6;
  margin: 0 0 18px;
  white-space: pre-line;
}

/* Vista previa de la imagen para compartir (reutiliza el modal). */
.story-preview__panel{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.story-preview__panel img{
  width: 100%;
  border-radius: var(--radius-sm);
  box-shadow: 0 10px 24px -10px var(--shadow-soft);
}
.story-preview__hint{
  font-size: 0.78rem;
  color: var(--ink-soft);
  text-align: center;
  margin: 0;
}
.story-preview__actions{
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

/* ===================== REDUCCIÓN DE MOVIMIENTO =====================
   Con movimiento reducido no hay giro 3D ni papel subiendo: la carta
   aparece ya fuera y desplegada, con un fundido mínimo. La
   información NUNCA depende de la animación. ===================== */

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
  .envelope__flapWrap{ transform-style: flat; }
  /* Sin giro: la solapa simplemente se aparta. */
  .envelope.is-open .envelope__flapWrap{
    transform: rotateX(-134deg);
    opacity: 0;
  }
}

/* ===================== ESCRITORIO ===================== */

@media (min-width: 600px){
  .page{ padding-top: 10px; }
  .experience__title{ font-size: 1.72rem; max-width: 400px; }
  .scene__cta{ font-size: 1.1rem; }
}