/* ─────────────────────────────────────────────────────────────
   INVITACIÓN
   Concepto: un jardín al atardecer. Tarjetas de papel crema con
   flores prensadas pasan sobre el video de fondo; entre una y otra
   se sigue viendo el atardecer.
   ───────────────────────────────────────────────────────────── */

/* ── Video de fondo (fijo detrás de todo) ── */
.fondo {
  position: fixed;
  inset: 0;
  height: 100lvh;
  /* Capas, de atrás hacia adelante:
     video (-1) → velo de la portada → pétalos (0) → textos y tarjetas (1) */
  z-index: -1;
  overflow: hidden;
  background: var(--noche) center / cover no-repeat;
}

.fondo video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

#invitacion {
  position: relative;
  overflow-x: clip;
}

/* ── Portada: nombres y fecha sobre el video ── */
.portada {
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  justify-items: center;
  text-align: center;
  color: var(--sobre-video);
  padding-block: calc(30px + env(safe-area-inset-top, 0px)) calc(32px + env(safe-area-inset-bottom, 0px));
  padding-inline: max(16px, env(safe-area-inset-left, 0px)) max(16px, env(safe-area-inset-right, 0px));
  /* Oscurece el video para que el texto blanco se lea aunque el fondo sea claro
     (cielo, flores de cerezo): un velo general + más sombra detrás de los nombres */
  background:
    radial-gradient(ellipse 70% 42% at 50% 47%, rgba(28, 17, 12, .5), rgba(28, 17, 12, 0) 75%),
    linear-gradient(180deg, rgba(28, 17, 12, .55), rgba(28, 17, 12, .25) 30%, rgba(28, 17, 12, .25) 62%, rgba(28, 17, 12, .7));
}

/* Textos de la portada por encima de los pétalos */
.portada>* {
  position: relative;
  z-index: 1;
}

.portada .etiqueta {
  color: var(--sobre-video);
  text-shadow: 0 1px 10px rgba(0, 0, 0, .5);
}

.portada-nombres {
  align-self: center;
  display: grid;
  justify-items: center;
  gap: 6px;
}

/* Tres flores sobre los nombres: espiga, flor de cerezo, espiga */
.corona {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin-bottom: 6px;
}

.corona img {
  width: clamp(46px, 11vw, 64px);
  height: auto;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .35));
}

.corona img:nth-child(1) {
  transform: rotate(-34deg) translate(10px, 6px);
}

.corona img:nth-child(2) {
  width: clamp(62px, 15vw, 86px);
  position: relative;
  z-index: 1;
}

.corona img:nth-child(3) {
  transform: scaleX(-1) rotate(-34deg) translate(10px, 6px);
}

.portada h1 {
  font: 400 clamp(60px, 16vw, 132px)/.95 var(--letra-titulos);
  font-style: italic;
  text-shadow: 0 2px 28px rgba(30, 15, 10, .55);
  text-wrap: balance;
}

/* El "&" entre los dos nombres */
.portada h1 .y {
  display: block;
  font-size: .4em;
  line-height: 1.15;
  margin-block: .35em .1em;
  font-style: italic;
  color: #f6dcc8;
  /* La cursiva inclina el signo hacia la derecha; se compensa para que quede centrado a la vista */
  transform: translateX(-.12em);
}

.portada h1 .falta {
  font-size: .6em;
  color: inherit;
  background: none;
  border: 0;
  font-family: var(--letra-titulos);
  font-style: italic;
}

.portada-fecha {
  font: 500 clamp(20px, 4.6vw, 26px)/1.3 var(--letra-titulos);
  letter-spacing: .02em;
  margin-top: 14px;
  text-shadow: 0 1px 12px rgba(30, 15, 10, .75);
}

.portada-fecha .falta {
  color: inherit;
  background: rgba(40, 20, 15, .28);
  border-bottom-color: currentColor;
}

/* "Para Familia García" */
.portada-para {
  margin-top: 18px;
  padding: 8px 18px;
  border: 1px solid rgba(255, 250, 240, .55);
  border-radius: 999px;
  font: 500 15px/1.3 var(--letra-texto);
  background: rgba(40, 22, 14, .22);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

/* "Abre tu invitación" con la línea que se estira */
.abrir {
  display: grid;
  justify-items: center;
  gap: 8px;
  min-height: 44px;
  padding-top: 6px;
  color: inherit;
  text-decoration: none;
  font: 600 12.5px/1 var(--letra-texto);
  letter-spacing: .18em;
  text-transform: uppercase;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .6);
}

.abrir i {
  display: block;
  width: 1px;
  height: 40px;
  background: currentColor;
  transform-origin: top;
  animation: estirar 2.6s ease-in-out infinite;
}

.abrir:hover i {
  animation-duration: 1.4s;
}

@keyframes estirar {
  0%, 100% {
    transform: scaleY(.4);
  }

  50% {
    transform: scaleY(1);
  }
}

/* ── Tarjetas ── */
.tarjetas {
  display: grid;
  /* El espacio entre tarjetas deja ver el video (los tendederos lo usan también) */
  --hueco: clamp(110px, 30vh, 280px);
  gap: var(--hueco);
  padding-block: clamp(50px, 14vh, 140px) clamp(160px, 40vh, 380px);
  padding-inline: max(16px, env(safe-area-inset-left, 0px)) max(16px, env(safe-area-inset-right, 0px));
}

.tarjeta {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 680px;
  margin-inline: auto;
  padding: clamp(40px, 7vw, 64px) clamp(22px, 6vw, 60px);
  /* Un rubor rosado muy leve en la esquina, como luz entre los cerezos */
  background:
    radial-gradient(circle at 100% 0, rgba(250, 213, 221, .22), rgba(250, 213, 221, 0) 40%),
    radial-gradient(circle at 0 100%, rgba(250, 213, 221, .15), rgba(250, 213, 221, 0) 36%),
    var(--crema);
  border-radius: 22px;
  box-shadow: 0 1px 1px rgba(30, 18, 10, .18), 0 30px 60px -20px rgba(25, 14, 8, .55);
}

.tarjeta.ancha {
  max-width: 980px;
}

/* Marco fino por dentro de la tarjeta */
.tarjeta::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid var(--linea);
  border-radius: 15px;
  pointer-events: none;
}

.tarjeta>*:not(.flor) {
  position: relative;
  z-index: 1;
}

/* Flor prensada en una esquina de la tarjeta.
   Se acomoda con variables en el atributo style:
   --w ancho, --x izquierda, --rx derecha, --y arriba, --by abajo, --r giro */
.flor {
  position: absolute;
  z-index: 0;
  width: var(--w, 150px);
  height: auto;
  left: var(--x, auto);
  right: var(--rx, auto);
  top: var(--y, auto);
  bottom: var(--by, auto);
  /* El giro va en "rotate" (no en transform) para que la animación de mecerse
     (css/animaciones.css) pueda usar transform sin borrar este giro */
  rotate: var(--r, 0deg);
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 6px 10px rgba(60, 35, 20, .18));
}

/* Etiqueta + título + separador al inicio de cada tarjeta */
.encabezado {
  display: grid;
  justify-items: center;
  gap: 8px;
  margin-bottom: 28px;
  text-align: center;
}

.tarjeta h2 {
  font: 400 clamp(38px, 8.4vw, 54px)/1.04 var(--letra-titulos);
  font-style: italic;
  color: var(--hoja-oscura);
  text-wrap: balance;
}

/* Línea — flor — línea */
.separador {
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(220px, 70%);
  margin-top: 6px;
}

.separador::before,
.separador::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(244, 175, 195, 0), var(--cerezo));
}

.separador::after {
  background: linear-gradient(90deg, var(--cerezo), rgba(244, 175, 195, 0));
}

.separador img {
  width: 26px;
  height: 26px;
  object-fit: contain;
}

.texto {
  display: grid;
  gap: 14px;
  max-width: 58ch;
  margin-inline: auto;
  text-align: center;
  font-size: 18px;
  color: #3d3b30;
}

.tarjeta .botones {
  justify-content: center;
}

.tarjeta a:not(.boton) {
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.tarjeta a:not(.boton):hover {
  text-decoration-thickness: 2px;
}

/* ── Videos dentro de las tarjetas ── */
.marco-video {
  position: relative;
  margin: 0;
  overflow: hidden;
  aspect-ratio: var(--proporcion, 3/4);
  border-radius: var(--esquinas, 16px);
  background: linear-gradient(160deg, var(--petalo), var(--petalo-2));
}

/* Forma de arco: redondo arriba, casi recto abajo */
.marco-video.arco {
  --esquinas: 999px 999px 16px 16px;
}

.marco-video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  cursor: pointer;
  transition: transform .5s var(--suave);
}

.marco-video:hover video {
  transform: scale(1.025);
}

/* Lo que se ve mientras no hay video: una flor y "Video N" */
.marco-video .espacio {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 8px;
  padding: 10px;
  text-align: center;
  font: 600 12.5px/1.2 var(--letra-texto);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}

.marco-video .espacio img {
  width: 54px;
  height: 54px;
  object-fit: contain;
  opacity: .8;
}

.video-bienvenida {
  /* El ancho sale del alto de la pantalla (proporción 3:4) para que el video
     quepa completo y no se corte en celulares ni laptops */
  width: min(100%, 380px, 34vh);
  width: min(100%, 380px, 34svh);
  margin: 24px auto 0;
}

/* En computadora: texto a la izquierda y video a la derecha,
   así la tarjeta cabe en pantallas bajitas (laptops) */
@media (min-width: 900px) {
  #bienvenida {
    max-width: 940px;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "encabezado video"
      "texto      video";
    align-content: center;
    column-gap: 48px;
  }

  #bienvenida .encabezado {
    grid-area: encabezado;
    align-self: end;
  }

  #bienvenida .texto {
    grid-area: texto;
    align-self: start;
  }

  #bienvenida .video-bienvenida {
    grid-area: video;
    align-self: center;
    width: min(340px, 48vh);
    width: min(340px, 48svh);
    margin: 0;
  }
}

/* Galería: 2 columnas en teléfono; en pantalla grande las define
   la variable --columnas-escritorio que pone galeria.js */
.galeria {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}

.galeria .marco-video {
  --columnas: 2;
  flex: 0 0 calc((100% - (var(--columnas) - 1) * 16px) / var(--columnas));
}

@media (min-width: 760px) {
  .galeria .marco-video {
    --columnas: var(--columnas-escritorio, 3);
  }
}

/* ── Cuándo y dónde ── */
.datos-cita {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--linea);
}

.datos-cita>div {
  display: grid;
  gap: 2px;
  padding: 16px 2px;
  border-bottom: 1px solid var(--linea);
  text-align: center;
}

.datos-cita dt {
  font: 600 12px/1.3 var(--letra-texto);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}

.datos-cita dd {
  margin: 0;
  font: 500 clamp(23px, 5.4vw, 28px)/1.2 var(--letra-titulos);
  color: var(--tinta);
  overflow-wrap: anywhere;
}

.datos-cita dd.detalle {
  font: 400 15.5px/1.45 var(--letra-texto);
  color: var(--tinta-suave);
}

@media (min-width: 560px) {
  .datos-cita {
    grid-template-columns: 1fr 1fr;
  }

  .datos-cita>div:nth-child(odd):not(.completo) {
    border-right: 1px solid var(--linea);
  }

  .datos-cita .completo {
    grid-column: 1 / -1;
  }
}

.cuenta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 26px 0;
}

.cuenta div {
  padding: 14px 4px 12px;
  text-align: center;
  background: var(--petalo);
  border-radius: 14px;
}

.cuenta b {
  display: block;
  font: 500 44px/1 var(--letra-titulos);
  color: var(--rosa);
  font-variant-numeric: tabular-nums;
}

.cuenta span {
  font: 500 13px/1.3 var(--letra-texto);
  color: var(--tinta-suave);
}

/* ── Itinerario: hora | flor sobre un tallo | momento ── */
.itinerario {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: grid;
  max-width: 460px;
}

.itinerario li {
  display: grid;
  grid-template-columns: 96px 34px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 64px;
}

.itinerario .hora {
  font: 600 14px/1.3 var(--letra-texto);
  color: var(--tinta-suave);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.itinerario .hora .falta {
  font-size: .95em;
}

/* El tallo es una línea vertical; en el primero y el último
   solo llega a la mitad para que no sobresalga */
.itinerario .tallo {
  align-self: stretch;
  display: grid;
  place-items: center;
  background: linear-gradient(var(--hoja), var(--hoja)) center / 1px 100% no-repeat;
}

.itinerario li:first-child .tallo {
  background-size: 1px 50%;
  background-position: center bottom;
}

.itinerario li:last-child .tallo {
  background-size: 1px 50%;
  background-position: center top;
}

.itinerario li:only-child .tallo {
  background: none;
}

.itinerario .tallo img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  padding: 2px;
  background: var(--crema);
  border-radius: 50%;
}

.itinerario .momento {
  font: 500 21px/1.3 var(--letra-titulos);
  color: var(--tinta);
}

/* ── Código de vestimenta ── */
.estilo {
  margin-bottom: 10px;
  text-align: center;
  font: 500 clamp(26px, 6vw, 32px)/1.2 var(--letra-titulos);
  color: var(--tinta);
}

.estilo em {
  color: var(--rosa);
}

/* Colores sugeridos, con forma de pétalo */
.colores {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px 10px;
  max-width: 420px;
  margin: 28px auto;
  padding: 0;
}

@media (min-width: 560px) {
  .colores {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    max-width: none;
  }
}

.colores li {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 7px;
  text-align: center;
  font: 500 13px/1.25 var(--letra-texto);
  color: var(--tinta-suave);
}

.colores i {
  display: block;
  width: 100%;
  max-width: 62px;
  aspect-ratio: 1;
  border-radius: 60% 40% 55% 45% / 50% 55% 45% 50%;
  background: var(--color);
  box-shadow: inset 0 0 0 1px rgba(40, 25, 10, .1), inset -6px -8px 12px rgba(70, 45, 15, .16);
}

/* "Sí, por favor" y "Mejor no" */
.si-no {
  display: grid;
  gap: 14px;
}

@media (min-width: 560px) {
  .si-no {
    grid-template-columns: 1fr 1fr;
  }
}

.si-no>div {
  padding: 20px 20px 18px;
  border-radius: 16px;
  background: var(--petalo);
}

.si-no>div.mejor-no {
  background: #efe9dc;
}

.si-no h3 {
  margin-bottom: 10px;
  font: 600 12.5px/1.3 var(--letra-texto);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--hoja-oscura);
}

.si-no .mejor-no h3 {
  color: var(--no);
}

.puntos {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 16px;
}

.puntos li {
  position: relative;
  padding-left: 20px;
}

.puntos li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .62em;
  width: 8px;
  height: 8px;
  border-radius: 60% 40% 55% 45%;
  background: var(--hoja);
}

.mejor-no .puntos li::before {
  background: var(--no);
}

/* "Ellas" y "Ellos": dos tarjetitas, cada una con su "Mejor no" abajo */
.ellas-ellos {
  display: grid;
  gap: 14px;
}

@media (min-width: 560px) {
  .ellas-ellos {
    grid-template-columns: 1fr 1fr;
  }
}

.ellas-ellos > div {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 22px 20px 20px;
  border-radius: 16px;
  background: var(--petalo);
}

.ellas-ellos h3 {
  text-align: center;
  font: 500 clamp(24px, 5.6vw, 28px)/1.1 var(--letra-titulos);
  font-style: italic;
  color: var(--hoja-oscura);
}

.ellas-ellos .mejor-no {
  margin-top: 4px;
  padding: 14px 16px;
  border-radius: 12px;
  background: #efe9dc;
}

.ellas-ellos h4 {
  margin-bottom: 8px;
  font: 600 12px/1.3 var(--letra-texto);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--no);
}

/* ── Confirmación de asistencia ── */
#confirmacion-caja>p {
  text-align: center;
}

.invitado {
  margin-bottom: 6px;
  text-align: center;
  font: 500 clamp(28px, 6.5vw, 36px)/1.15 var(--letra-titulos);
  color: var(--tinta);
  overflow-wrap: anywhere;
}

.invitado+p {
  text-align: center;
  color: var(--tinta-suave);
}

.formulario {
  display: grid;
  gap: 26px;
  margin-top: 26px;
}

.formulario .botones {
  justify-content: center;
}

.formulario .boton.lleno {
  min-width: min(100%, 260px);
}

/* "Sí, ahí estaremos" / "No podremos ir" */
.opciones {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.opciones label {
  display: grid;
  place-items: center;
  min-height: 60px;
  padding: 10px;
  border: 1px solid var(--linea);
  border-radius: 16px;
  background: #fff;
  text-align: center;
  line-height: 1.25;
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .18s var(--suave);
}

.opciones label:hover {
  border-color: var(--hoja);
  transform: translateY(-2px);
}

.opciones input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.opciones input:checked+span {
  font-weight: 600;
}

.opciones label:has(input:checked) {
  background: var(--hoja);
  border-color: var(--hoja);
  color: var(--crema);
}

.opciones label:has(input:focus-visible) {
  outline: 3px solid var(--rosa);
  outline-offset: 2px;
}

/* Fila "Adultos  − 2 +" */
.contador {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--linea);
}

.contador:last-child {
  border-bottom: 1px solid var(--linea);
}

.contador small {
  display: block;
  font: 400 14px/1.3 var(--letra-texto);
  color: var(--tinta-suave);
}

.pasos {
  display: grid;
  grid-template-columns: 44px 46px 44px;
  align-items: center;
  text-align: center;
}

.pasos button {
  height: 44px;
  border: 1px solid var(--hoja);
  border-radius: 50%;
  background: transparent;
  color: var(--hoja);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: background .15s, color .15s, transform .1s;
}

.pasos button:hover:not(:disabled) {
  background: var(--hoja);
  color: var(--crema);
}

.pasos button:active:not(:disabled) {
  transform: scale(.94);
}

.pasos button:disabled {
  opacity: .3;
  cursor: not-allowed;
}

.pasos output {
  font: 500 28px/1 var(--letra-titulos);
  font-variant-numeric: tabular-nums;
}

.nombres {
  display: grid;
  gap: 12px;
}

/* Caja que se ve después de responder */
.respondido {
  display: grid;
  justify-items: center;
  gap: 12px;
  margin-top: 20px;
  padding: 24px 20px;
  border-radius: 18px;
  background: var(--petalo);
  text-align: center;
}

.respondido b {
  font: 500 32px/1.1 var(--letra-titulos);
  font-style: italic;
  color: var(--hoja-oscura);
}

.respondido ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}

.respondido li {
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--crema);
  font-size: 15px;
}

/* ── Cierre ── */
.cierre {
  text-align: center;
}

.cierre .marco-video {
  max-width: 300px;
  margin: 0 auto 30px;
}

.cierre-frase {
  font: 400 clamp(32px, 7.2vw, 44px)/1.12 var(--letra-titulos);
  font-style: italic;
  color: var(--hoja-oscura);
  text-wrap: balance;
}

.cierre .firma {
  margin-top: 16px;
  font: 500 22px/1.3 var(--letra-titulos);
  color: var(--rosa);
}

.cierre .ayuda {
  margin-top: 24px;
  font-size: 16px;
  color: var(--tinta-suave);
}

/* Sin link personal válido no se ven fecha, hora, lugar, dirección ni WhatsApp
   (la clase la pone js/confirmacion.js → asignarInvitado) */
.sin-invitacion [data-privado] {
  display: none !important;
}

/* Mientras BODA.mostrarHorario sea false no se ve la hora ni el itinerario
   (la clase la pone js/invitacion.js → pintarHorario) */
.sin-horario [data-horario] {
  display: none !important;
}

.sin-horario .datos-cita {
  grid-template-columns: 1fr;
}

.sin-horario .datos-cita>div {
  border-right: 0 !important;
}