/*
  El diseño de Figma mide 1080 px de ancho (móvil a 3x).
  1rem = 100 px del diseño, así que un valor de Figma de 96 px se escribe .96rem
  y todo escala a la vez con el ancho de la pantalla (hasta 480 px en escritorio).
*/
:root {
  --verde: #526736;
  --crema: #f8f5ea;
  --col: min(100vw, 480px);
  /*
    La invitación tiene sus colores y no cambia con el modo oscuro del móvil.
    Sin esto, Chrome en Android (y Samsung Internet) invierten por su cuenta
    los fondos y el texto de cualquier web cuando el teléfono está en oscuro,
    y la invitación saldría con los verdes y el crema cambiados.
    También mantiene claras las cajas de texto de confirmar asistencia.
  */
  color-scheme: light;
}

/* Por si algún navegador aplica sus propios colores en modo oscuro: los
   nuestros son siempre estos. */
@media (prefers-color-scheme: dark) {
  :root { color-scheme: light; }
  body { background: #e9e5e5; color: var(--verde); }
  .page { background: var(--crema); }
  .dlg { background: var(--verde); color: var(--crema); }
  .dlg-flow input, .dlg-flow textarea { background: var(--crema); color: var(--verde); }
}

/*
  En pantalla grande la invitación sigue siendo una columna (el diseño es
  vertical), pero crece hasta 820 px para que ocupe pantalla y el texto se
  lea de verdad: a 480 px el cuerpo queda en 12,4 px y a 820 px en 24 px.
  Nunca baja de 480 ni pasa de 820, así que no se deforma a ningún tamaño.
*/
/*
  Un móvil con la "versión para ordenador" activada en Chrome dice medir
  980 px de ancho. Sin esto le dábamos la maqueta de escritorio y la
  invitación salía como una tira estrecha en medio de la pantalla.
  El ancho miente, pero el tipo de puntero no: en un móvil siempre es
  "grueso" (el dedo) y no hay ratón.
*/
@media (pointer: coarse) {
  :root { --col: 100vw; }
}

@media (min-width: 720px) and (hover: hover) and (pointer: fine) {
  :root { --col: clamp(480px, 60vw, 820px); }
}

html { font-size: calc(var(--col) / 10.8); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: #e9e5e5; color: var(--verde); font-family: "Instrument Serif", serif; font-size: max(.32rem, 14px); }
h1, h2, h3, p { margin: 0; font-weight: 400; }
img { display: block; }

.page { width: 10.8rem; margin: 0 auto; overflow: hidden; background: var(--crema); box-shadow: 0 0 40px rgba(0,0,0,.12); }

/*
  En escritorio, en vez del gris vacío alrededor de la columna, ponemos de
  fondo la misma foto del Cap de Formentor desenfocada y oscurecida. El
  scale(1.06) tapa los bordes claros que deja el desenfoque.
*/
@media (min-width: 720px) and (hover: hover) and (pointer: fine) {
  body { background: #2b3520; }
  body::before {
    content: ""; position: fixed; inset: 0; z-index: -1;
    background: url("assets/formentor.jpg") center / cover no-repeat;
    filter: blur(26px) brightness(.34) saturate(.75);
    transform: scale(1.08);
  }
  .page { box-shadow: 0 0 3rem rgba(0,0,0,.45); }
}

/* Tipografías */
.serif { font-family: "Instrument Serif", serif; }
.pinyon { font-family: "Pinyon Script", cursive; }
.felix { font-family: "Cinzel", serif; text-transform: uppercase; }

/* Secciones: cada una es una pantalla del diseño */
.s { position: relative; width: 10.8rem; height: 9.6rem; overflow: hidden; }
.cream { background: var(--crema); }
.verde { background: var(--verde); }

/* Texto colocado: left = centro horizontal del texto en el diseño */
.t { position: absolute; transform: translateX(-50%); text-align: center; white-space: nowrap; line-height: normal; }
.t.wrap { white-space: normal; }
.h65 { font-size: .65rem; }
.s32 { font-size: max(.32rem, 14px); }
.s48 { font-size: max(.48rem, 18px); }
.lh32 { line-height: max(.32rem, 18px); }

/* Botones */
.btn {
  position: absolute; display: flex; align-items: center; justify-content: center;
  margin: 0; padding: 0; border: 0; border-radius: 0; cursor: pointer;
  font-family: "Cinzel", serif; text-transform: uppercase; font-size: max(.24rem, 12px); line-height: normal;
  text-align: center; text-decoration: none; white-space: nowrap;
  -webkit-tap-highlight-color: transparent; transition: filter .15s, background-color .15s, color .15s;
}
/*
  El "left" de cada botón es su centro y el ancho del Figma es solo el mínimo:
  en móvil, donde el texto tiene un tamaño mínimo en píxeles, el botón crece
  hacia los dos lados en vez de que se le salga la palabra del recuadro.
*/
.btn:not(.static) { transform: translateX(-50%); padding: 0 .16rem; }
.btn.fill { background: var(--verde); color: var(--crema); }
.btn.line { background: transparent; color: var(--verde); border: .02rem solid var(--verde); }
.btn.cream { background: var(--crema); color: var(--verde); }
.btn:active { filter: brightness(.9); }
.btn:focus-visible { outline: .03rem solid currentColor; outline-offset: .04rem; }

/* 1 · Portada */
.bg { position: absolute; left: 0; top: -.05rem; width: 10.8rem; height: 9.65rem; object-fit: cover; object-position: 50% 50%; }
.veil { position: absolute; inset: 0; background: rgba(82,103,54,.4); }
.hero .t { color: #fff; }
.names { left: 5.4rem; top: 3.55rem; font-size: .96rem; line-height: .67rem; }
.and { left: 5.4rem; top: 3.86rem; font-size: .96rem; }
.secasan { left: 5.4rem; top: 5.61rem; font-size: max(.37rem, 15px); }

/*
  La portada ocupa la pantalla entera, tanto en móvil como en escritorio: al
  abrir el enlace se ve la foto a toda página con los nombres, sin que asome
  la sección siguiente. Usamos svh (la altura con las barras del navegador a
  la vista) para que nunca quede nada cortado.
  Los nombres iban clavados en rem sobre una sección de 9,6rem. Movemos el
  grupo entero a un porcentaje de la pantalla, pero las distancias de dentro
  siguen en rem: si se pasan las tres a porcentaje, se separan al crecer la
  pantalla y el "and" acaba escrito encima de CLAUDIA.
*/
.hero { height: auto; min-height: 100svh; }
.hero .bg { top: 0; height: 100%; }
.hero .names   { top: 37%; }
.hero .and     { top: calc(37% + .31rem); }
.hero .secasan { top: calc(37% + 2.06rem); }

/* 2 · Foto de la pareja */
.frame { position: absolute; border: .04rem solid var(--verde); }
.frame-out { left: .86rem; top: 1.6rem; width: 4.54rem; height: 6.4rem; }
.frame-in { left: 1.05rem; top: 1.77rem; width: 4.16rem; height: 6.06rem; }
.foto { position: absolute; left: 1.25rem; top: 2.01rem; width: 3.77rem; height: 5.59rem;
  background: url("assets/pareja.jpg") 0 100% / 124.42% auto no-repeat; }
.fecha { left: 8.23rem; top: 4.41rem; font-size: max(.36rem, 15px); }

/* 3 · Bienvenida */
.card-verde { position: absolute; left: 1.06rem; top: .91rem; width: 8.68rem; height: 7.73rem; background: rgba(73,91,47,.75); }
.b-title { left: 5.405rem; top: 1.57rem; font-size: max(.48rem, 18px); color: #fff; }
.b-text { left: 5.4rem; top: 2.62rem; font-size: max(.28rem, 14px); line-height: max(.35rem, 18px); color: #fff; }

/* 4 · Programa */
.p-title { left: 5.405rem; top: 1.13rem; font-size: .65rem; }
.p-sub { left: 5.405rem; top: 1.92rem; font-size: max(.32rem, 14px); }
.lbl { font-size: max(.36rem, 14px); }
.hr { font-size: max(.32rem, 13px); }
.ic { position: absolute; object-fit: cover; }
.ic.rot { display: flex; align-items: center; justify-content: center; }
.ic.rot img { flex: none; object-fit: cover; }
.ic.crop { overflow: hidden; }
.linea { position: absolute; left: 1.25rem; top: 5.825rem; width: 8.23rem; height: .03rem; background: var(--verde); }
.rombo { position: absolute; top: 5.71rem; width: .11rem; height: .25rem; }

/* 5 · Ubicaciones */
.ubicaciones .t { color: var(--crema); font-size: max(.30rem, 14px); }
.u-r { transform: none; left: auto; right: 7rem; text-align: right; }
.u-l { transform: none; left: 6.76rem; text-align: left; }
.u-card { position: absolute; left: .73rem; width: 9.15rem; height: 3.85rem; border: .02rem solid var(--crema); border-radius: .27rem; pointer-events: none; }
.finca { position: absolute; left: .89rem; top: 5.21rem; width: 8.45rem; height: 3.51rem; overflow: hidden; }
.finca img { position: absolute; left: -48.43%; top: -62.44%; width: 148.41%; height: 269.52%; max-width: none; }
.finca-tag { position: absolute; left: 6.49rem; top: 6.11rem; width: 2.44rem; height: 1.77rem; border-radius: .27rem; background: var(--verde); }

/* 6 y 8 · Fondo de foto al 20 % con tarjeta crema */
.bg-foto { position: absolute; inset: 0; overflow: hidden; opacity: .2; }
.bg-foto img { position: absolute; max-width: none; }
.card-crema { position: absolute; left: .73rem; width: 9.34rem; background: rgba(248,245,234,.7); }

/* 8 · Dudas y 9 · Final */
.dudas { height: 19.74rem; }
.final { height: 8.63rem; }

/* Ventanas emergentes */
.dlg {
  position: fixed; margin: auto; padding: 0; border: 0;
  background: var(--verde); color: var(--crema); max-width: none;
  /* Con la columna a 820 px las ventanas también crecen; en un portátil bajo
     alguna no cabría de alto, así que se deja desplazar en vez de cortarse. */
  max-height: 94dvh; overflow: auto;
}
.dlg::backdrop { background: rgba(30,36,22,.55); }
.dlg[open] { animation: aparece .22s ease-out; }
@keyframes aparece { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
.dlg .t { color: inherit; }
/* Ventanas que se leen y se rellenan (quién viene, bus, coche, alergias) */
.dlg-flow { padding: .8rem .55rem .55rem; text-align: center; max-height: 92dvh; overflow-y: auto; }
.dlg-flow form { display: flex; flex-direction: column; align-items: stretch; gap: .28rem; }
.dlg-flow .titulo { font-size: .62rem; line-height: 1.15; }
.dlg-flow .ayuda { font-size: max(.3rem, 14px); line-height: max(.4rem, 19px); }
.dlg-flow .campo { display: flex; flex-direction: column; gap: .08rem; text-align: left; font-size: max(.28rem, 13px); }
.dlg-flow .campo[hidden] { display: none; }
.dlg-flow input, .dlg-flow textarea {
  width: 100%; padding: .16rem .2rem; border: 0; border-radius: .08rem; resize: vertical;
  background: var(--crema); color: var(--verde); font-size: max(.32rem, 15px); line-height: 1.3; font-family: "Instrument Serif", serif;
}
.dlg-flow input:focus, .dlg-flow textarea:focus { outline: .03rem solid var(--crema); outline-offset: .05rem; }
.dlg-flow .acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem; margin-top: .1rem; }
.btn.static { position: static; width: 1.85rem; height: .57rem; }
.btn.borde { background: transparent; color: var(--crema); border: .02rem solid var(--crema); }
.btn[disabled] { opacity: .6; cursor: default; }

/* La X de volver, en todas las ventanas */
.cerrar {
  position: absolute; right: .1rem; top: .02rem; z-index: 2;
  width: .8rem; height: .8rem; padding: 0; border: 0; background: none;
  color: inherit; font-family: system-ui, sans-serif; font-size: .6rem; line-height: 1;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.cerrar:active { opacity: .6; }
.cerrar:focus-visible { outline: .03rem solid currentColor; outline-offset: -.04rem; }

/* La música no tiene botón: suena sola y en bucle desde app.js */

/* Estado elegido en los botones de bus */
.btn[data-choice].chosen { background: var(--verde); color: var(--crema); border: 0; }
.btn[data-choice].unchosen { background: transparent; color: var(--verde); border: .02rem solid var(--verde); }

.toast {
  position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom) + .5rem); transform: translateX(-50%);
  padding: .14rem .3rem; background: var(--verde); color: var(--crema); font-size: max(.28rem, 13px);
  border-radius: .1rem; opacity: 0; transition: opacity .25s; pointer-events: none; white-space: nowrap;
}
.toast.show { opacity: 1; }

@media (prefers-reduced-motion: reduce) { .dlg[open] { animation: none; } }

/*
  ── Móvil: las secciones de texto fluyen ──────────────────────────────────
  El Figma coloca cada frase en una coordenada exacta. Eso funciona mientras
  el texto mida lo que dice el diseño, pero en el móvil le hemos puesto un
  tamaño mínimo en píxeles para que se pueda leer, así que los párrafos
  crecen y se pisarían unos a otros (a 320 px la carta se salía de su marco).

  En pantalla pequeña, estas cinco secciones dejan de estar clavadas y se
  apilan en vertical. El truco del flex-wrap: los textos ocupan la fila
  entera y los botones solo lo suyo, así dos botones seguidos salen juntos
  en la misma línea, como en el diseño.

  En escritorio (≥720px) no se aplica nada de esto: el Figma queda intacto.
*/
@media (max-width: 719px), (pointer: coarse) {
  .bienvenida, .rsvp, .importante, .dudas, .final {
    height: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: flex-start;
    gap: .36rem .28rem;
    padding: 1.15rem .95rem 1.25rem;
  }

  .bienvenida > .t, .rsvp > .t, .importante > .t, .dudas > .t, .final > .t {
    position: static;
    transform: none;
    white-space: normal;
    flex: 0 0 100%;
    max-width: 100%;
  }
  .bienvenida > .btn, .rsvp > .btn, .importante > .btn, .dudas > .btn, .final > .btn {
    position: static;
    transform: none;
    flex: 0 0 auto;
    padding: 0 .3rem;
  }

  /* Los saltos de línea del Figma sobran cuando el texto fluye: escondemos
     los sueltos y dejamos solo los que separan párrafos de verdad, que van
     marcados con .pp en el HTML.
     (Ojo: no vale el selector br + br, porque empareja dos saltos aunque
     haya un párrafo entero de texto entre ellos.) */
  .bienvenida > .t br, .rsvp > .t br, .importante > .t br, .dudas > .t br { display: none; }
  .bienvenida > .t br.pp, .importante > .t br.pp, .dudas > .t br.pp { display: inline; }

  /* Los fondos pasan a cubrir la sección entera, que ahora crece con el texto.
     Si no, la foto se queda con su alto del Figma y el texto blanco de la
     carta acaba sobre el vacío, ilegible. */
  .bienvenida .bg { top: 0; height: 100%; }

  /* Al dejar de estar posicionado, el texto se pinta por DEBAJO de los
     paneles de fondo y desaparece. Convertimos la sección en su propio
     contexto y mandamos los fondos detrás. */
  .bienvenida, .rsvp, .importante, .dudas, .final { isolation: isolate; }
  .bienvenida .bg, .bienvenida .veil, .card-verde,
  .rsvp .bg-foto, .rsvp .card-crema,
  .dudas .bg-foto, .dudas .card-crema { z-index: -1; }
  .card-verde { left: .6rem; top: .6rem; width: calc(100% - 1.2rem); height: calc(100% - 1.2rem); }
  .rsvp .card-crema, .dudas .card-crema {
    top: .55rem !important;
    height: calc(100% - 1.1rem) !important;
  }

  /* Un respiro extra antes de cada pregunta de "Las grandes dudas" */
  .dudas > .s48 { margin-top: .45rem; }

  /* La fecha va a la derecha de la foto, y ahí no cabe "Iglesia de Ses
     Salines" de una tirada en un móvil estrecho: la dejamos partir en dos. */
  .fecha { white-space: normal; max-width: 5rem; }

  /* Con el texto a su tamaño mínimo, la hora y el botón quedaban pegados */
  .ubicaciones .btn { margin-top: .14rem; }

}

/*
  ── Móvil: las ventanas emergentes también fluyen ─────────────────────────
  Las del Figma (ALERTA, The Ladies, los regalos…) tenían el ancho y el alto
  clavados y el texto colocado por coordenadas. Con el texto a tamaño legible
  ya no cabía: se salía por los lados y los botones quedaban encima de las
  frases. Aquí dejan de estar clavadas y crecen con lo que llevan dentro.
*/
@media (max-width: 719px), (pointer: coarse) {
  .dlg {
    width: min(9.5rem, 93vw) !important;
    /* fit-content, no auto: el navegador le pone arriba y abajo a cero a las
       ventanas modales, y con "auto" se estiran a toda la pantalla. */
    height: fit-content !important;
    max-height: 90dvh;
    overflow-y: auto;
  }

  .dlg:not(.dlg-flow) {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .32rem;
    padding: 1rem .6rem .7rem;
    text-align: center;
  }
  /* Con !important porque algunos párrafos del Figma llevan el
     position:absolute y el nowrap escritos en el propio atributo style. */
  .dlg:not(.dlg-flow) > p {
    position: static !important;
    transform: none;
    white-space: normal !important;
    width: auto !important;
    max-width: 100%;
  }
  .dlg:not(.dlg-flow) > img {
    position: static !important;
    width: min(5.4rem, 72%) !important;
    height: auto !important;
    left: auto !important;
    top: auto !important;
  }
  .dlg:not(.dlg-flow) > .btn {
    position: static;
    transform: none;
    margin-top: .12rem;
  }

  /* Los saltos del Figma sobran cuando el texto fluye; el doble sigue
     separando párrafos. Los botones de dos líneas no se tocan. */
  .dlg:not(.dlg-flow) > p br { display: none; }
  .dlg:not(.dlg-flow) > p br.pp { display: inline; }

  /* "DE ACUERDO" salía cortado: el ancho fijo no daba para el texto */
  .btn.static { width: auto; min-width: 1.85rem; padding: 0 .3rem; }
  .dlg .btn { height: auto; min-height: .57rem; padding-top: .1rem; padding-bottom: .1rem; }
}