/* Invitación · Migue & Bren
   Una sola tarjeta, como la de papel. Medidas y tiempos según la pauta de diseño de Codex.
   Móvil primero. Todo el movimiento es CSS. */

:root {
  --crema: #fbf7f1;
  --papel: #fffcf7;
  --arena: #efe6d9;
  --beige: #e0d2be;
  --tinta: #4a3b2e;
  --suave: #8a7460;
  --tenue: #a89684;
  --salvia: #95a88d;
  /* Los dos bandos y el confeti. Apagados a propósito: la tarjeta es de papel,
     no una fiesta de globos. */
  --azul: #bcd0e0;
  --rosa: #e8c9c9;
  --azul-tinta: #4d6a85;
  --rosa-tinta: #8a5b5b;
  --display: 'Cormorant Garamond', Georgia, serif;
  --texto: Karla, system-ui, -apple-system, sans-serif;
}

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

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

body {
  margin: 0;
  background: var(--crema);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: 1rem;
  line-height: 1.4;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--salvia); outline-offset: 3px; border-radius: 6px; }

/* ---------- Fondo ---------- */
.cielo { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.nube { position: absolute; color: #fff; opacity: .9; will-change: transform; filter: drop-shadow(0 1px 0 #efe6d9); }
.nube-1 { width: 15rem; top: 8%;  animation: cruza 88s linear infinite; }
.nube-2 { width: 10rem; top: 46%; opacity: .36; animation: cruza 124s linear infinite; animation-delay: -38s; }
.nube-3 { width: 19rem; top: 78%; opacity: .3;  animation: cruza 150s linear infinite; animation-delay: -90s; }
@keyframes cruza {
  from { transform: translateX(-24rem); }
  to   { transform: translateX(110vw); }
}
/* Lo que flota: motitas, corazones y ositos, todos subiendo despacio.
   Van en DOS elementos anidados a propósito: el de fuera sube y el de dentro
   se mece. Con una sola animación por elemento, subir y mecerse pelean por el
   mismo `transform` y una de las dos se pierde. */
.flota { position: absolute; animation: sube linear infinite; will-change: transform; }
.flota > i { display: block; animation: vaiven ease-in-out infinite alternate; will-change: transform; }
@keyframes sube {
  0%   { transform: translateY(0);      opacity: 0; }
  12%  {                                opacity: 1; }
  86%  {                                opacity: .8; }
  100% { transform: translateY(-82vh);  opacity: 0; }
}
@keyframes vaiven {
  from { transform: translateX(-9px) rotate(-7deg); }
  to   { transform: translateX(9px)  rotate(7deg); }
}

.f-punto { border-radius: 50%; background: var(--beige); opacity: .55; }
.f-corazon,
.f-oso { background-repeat: no-repeat; background-position: center; background-size: contain; opacity: .58; }
/* Corazón y osito van como máscara, no como imagen: así el color sale de
   `background-color` y un mismo dibujo sirve para los tres tonos. */
.f-corazon, .f-oso { -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; background-image: none; }
.f-corazon {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 21s-8-5.1-8-10.4A4.6 4.6 0 0 1 12 7a4.6 4.6 0 0 1 8 3.6C20 15.9 12 21 12 21z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 21s-8-5.1-8-10.4A4.6 4.6 0 0 1 12 7a4.6 4.6 0 0 1 8 3.6C20 15.9 12 21 12 21z'/%3E%3C/svg%3E");
}
.f-oso {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%23000'%3E%3Ccircle cx='6' cy='6.5' r='3.4'/%3E%3Ccircle cx='18' cy='6.5' r='3.4'/%3E%3Ccircle cx='12' cy='14' r='8'/%3E%3C/g%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%23000'%3E%3Ccircle cx='6' cy='6.5' r='3.4'/%3E%3Ccircle cx='18' cy='6.5' r='3.4'/%3E%3Ccircle cx='12' cy='14' r='8'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---------- Lo que vuela por encima de la tarjeta ----------
   En celular la tarjeta ocupa casi toda la pantalla y deja 12 px por lado, así
   que todo lo que va en el fondo queda tapado. Esta capa va ENCIMA: hojitas que
   caen y globitos que suben, cruzando la invitación. No estorban: pointer-events none. */
.vuelo { position: fixed; inset: 0; z-index: 5; pointer-events: none; overflow: hidden; }

.vuela { position: absolute; top: -14vh; will-change: transform; }
.vuela > i { display: block; will-change: transform;
  /* Una sombra apenas, para que se despeguen del papel de la tarjeta. */
  filter: drop-shadow(0 1px 1.5px rgba(74, 59, 46, .18)); }

/* La hojita cae girando: el de fuera baja y el de dentro se bambolea.
   Van separados porque dos animaciones sobre el mismo `transform` se pisan. */
.v-hoja { animation: cae-hoja linear infinite; }
.v-hoja > i { animation: remolino ease-in-out infinite alternate; }
@keyframes cae-hoja {
  from { transform: translateY(0)     translateX(0); }
  to   { transform: translateY(125vh) translateX(var(--deriva, 6vw)); }
}
@keyframes remolino {
  from { transform: rotate(-24deg) scaleX(.82); }
  to   { transform: rotate(26deg)  scaleX(1); }
}

/* El globito sube desde abajo */
.v-globo { top: auto; bottom: -18vh; animation: asciende linear infinite; }
.v-globo > i { animation: ladea ease-in-out infinite alternate; }
@keyframes asciende {
  from { transform: translateY(0);      }
  to   { transform: translateY(-132vh); }
}
@keyframes ladea {
  from { transform: translateX(-7px) rotate(-5deg); }
  to   { transform: translateX(7px)  rotate(5deg); }
}

.vuela svg { display: block; width: 100%; height: auto; }

/* ---------- La mesa donde reposa la tarjeta ---------- */
.mesa {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  padding: clamp(1rem, 4vw, 3rem) 12px;
}

/* ---------- La tarjeta ---------- */
.invitacion {
  width: 100%;
  max-width: 420px;
  background: var(--papel);
  border-radius: 8px;
  box-shadow: 0 6px 24px rgba(74, 59, 46, .08);
  position: relative;
  overflow: hidden;
  /* Entrada: la hoja se asienta. 650 ms, sin rebote. */
  animation: asienta .65s cubic-bezier(.22, .61, .36, 1) both;
}
/* Grano de papel, al 2% */
.invitacion::after {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  opacity: .02;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23g)'/%3E%3C/svg%3E");
}
@keyframes asienta {
  from { opacity: 0; transform: translateY(-16px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

/* Filete interior continuo */
.filete {
  border: 1px solid var(--beige);
  border-radius: 4px;
  margin: 10px;
  padding: 24px 20px 28px;
  text-align: center;
}

/* ---------- La corona ---------- */
.corona {
  position: relative;
  width: 100%;
  margin: 0 auto 4px;
  /* guirnalda + osito aparecen después de que la hoja se asienta */
  animation: aparece .5s ease .45s both;
}
.guirnalda { width: 100%; }
.guirnalda { animation: respira 8s ease-in-out infinite alternate; transform-origin: 50% 30%; }
@keyframes respira {
  from { transform: rotate(-.5deg); }
  to   { transform: rotate(.5deg); }
}
.corona .oso {
  position: absolute;
  left: 50%;
  bottom: -6%;
  transform: translateX(-50%);
  height: 76%;
  width: auto;
  animation: flota-oso 5.5s ease-in-out infinite alternate;
}
/* El translateX(-50%) va DENTRO de los fotogramas: es lo que lo centra, y una
   animación de transform lo borraría dejando al osito pegado a la derecha. */
@keyframes flota-oso {
  from { transform: translateX(-50%) translateY(0)    rotate(-1.3deg); }
  to   { transform: translateX(-50%) translateY(-6px) rotate(1.3deg); }
}
@keyframes aparece {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ---------- La invitación ---------- */
/* El saludo solo sale cuando la invitación trae código: es lo que convierte
   «una invitación» en «tu invitación». */
.saludo {
  font-family: var(--display); font-size: 1.32rem; font-weight: 500;
  margin-top: 16px; line-height: 1.25;
  animation: entra .5s cubic-bezier(.22, .61, .36, 1) both;
}
.saludo em { font-style: italic; font-size: .62em; color: var(--tenue); display: block; letter-spacing: .12em; text-transform: uppercase; font-family: var(--texto); font-weight: 600; margin-bottom: 1px; }

.mis-papas {
  font-size: .68rem; letter-spacing: .26em; text-transform: uppercase;
  color: var(--tenue); margin-top: 14px;
}
.nombres {
  font-family: var(--display); font-size: 1.6rem; font-weight: 500;
  letter-spacing: .04em; margin-top: 4px; line-height: 1.2;
}
.nombres .amp { font-style: italic; color: var(--salvia); margin: 0 .1em; }
.invitan { font-size: .9rem; color: var(--suave); margin-top: 6px; }

.titulo {
  font-family: var(--display); font-weight: 300;
  font-size: clamp(1.95rem, 8.6vw, 2.15rem);
  line-height: 1.06; margin: 8px 0 0;
  display: flex; flex-direction: column; align-items: center;
}
.titulo .y { font-style: italic; font-size: .46em; color: var(--salvia); margin: .08em 0; font-weight: 400; }

.cuando { font-size: .95rem; color: var(--suave); line-height: 1.5; margin-top: 20px; }
.cuando strong { font-family: var(--display); font-size: 1.22rem; font-weight: 500; color: var(--tinta); }
.faltan { font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--tenue); margin-top: 6px; }

.lugar-nombre { font-family: var(--display); font-size: 1.45rem; margin-top: 20px; line-height: 1.2; }
address { font-style: normal; font-size: .88rem; color: var(--suave); line-height: 1.5; margin-top: 5px; }

.ramita { width: 90px; margin: 22px auto; opacity: .85; }

/* ---------- Equipos ---------- */
/* Escoger bando es una PETICIÓN, no un adorno: por eso título de display,
   igual que «¿Me acompañas?», y botones de verdad que se quedan marcados. */
.equipos-titulo { font-family: var(--display); font-size: 1.5rem; line-height: 1.2; }
.equipos-apoyo { font-size: .85rem; color: var(--suave); margin-top: 5px; }

.equipos { display: flex; justify-content: center; gap: 14px; margin-top: 14px; }
.equipo {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  width: 118px; padding: 12px 6px 11px;
  background: transparent; border: 1px solid transparent; border-radius: 14px;
  font-family: var(--texto); color: inherit; cursor: pointer;
  transition: background-color .25s ease, border-color .25s ease, transform .18s ease;
}
.equipo img { width: 62px; animation: mece 4.4s ease-in-out infinite alternate; }
.equipo-nina img { animation-delay: -2.2s; }
@keyframes mece {
  from { transform: translateY(2px)  rotate(-2deg); }
  to   { transform: translateY(-4px) rotate(2deg); }
}
.equipo:hover { border-color: var(--arena); background: #fffefb; }
.equipo:active { transform: translateY(1px); }
.equipo-nombre { font-family: var(--display); font-size: 1rem; margin-top: 2px; }
.equipo-que {
  font-size: .64rem; letter-spacing: .16em; text-transform: uppercase;
  margin-top: 3px; padding: 2px 9px; border-radius: 999px;
}
.equipo-nino .equipo-que { color: var(--azul-tinta); background: #eef3f8; }
.equipo-nina .equipo-que { color: var(--rosa-tinta); background: #f9f0f0; }

/* Escogido: el bando se queda puesto y se ve de lejos cuál es. */
.equipo-nino.escogido { background: #eef3f8; border-color: var(--azul); }
.equipo-nina.escogido { background: #f9f0f0; border-color: var(--rosa); }
/* El otro se apaga, para que el escogido no compita con nadie. */
.equipos.hay-equipo .equipo:not(.escogido) { opacity: .45; }
/* La etiqueta tiene el mismo tono que la tarjeta escogida y se fundía con
   ella: sobre fondo escogido va en blanco para que siga leyéndose como chip. */
.equipo.escogido .equipo-que { background: #fff; }

.equipo-palomita {
  position: absolute; top: 7px; right: 7px;
  width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center;
  color: #fff; opacity: 0; transform: scale(.4);
  transition: opacity .2s ease, transform .3s cubic-bezier(.34, 1.56, .64, 1);
}
.equipo-nino .equipo-palomita { background: var(--azul-tinta); }
.equipo-nina .equipo-palomita { background: var(--rosa-tinta); }
.equipo.escogido .equipo-palomita { opacity: 1; transform: scale(1); }

.equipos-eco {
  font-family: var(--display); font-size: 1.1rem; line-height: 1.35;
  margin-top: 10px; animation: entra .45s cubic-bezier(.22, .61, .36, 1) both;
}
.equipos-eco .quitar {
  display: block; margin: 4px auto 0;
  background: none; border: 0; color: var(--tenue); font-family: var(--texto);
  font-size: .72rem; letter-spacing: .05em; text-decoration: underline; text-underline-offset: 4px;
  cursor: pointer; padding: .4rem;
}

/* El detallito extra: va DESPUÉS y en voz baja. Antes encabezaba con un «O
   escoge equipo» que volvía el bando una alternativa entre dos. */
.regalo-extra { font-size: .86rem; color: var(--suave); line-height: 1.55; margin-top: 16px; }
.regalo-extra strong { font-family: var(--display); font-size: 1.05rem; font-weight: 500; color: var(--tinta); }

/* ---------- Confirmar ---------- */
.rsvp-titulo { font-family: var(--display); font-size: 1.5rem; line-height: 1.2; }
.rsvp-apoyo { font-size: .85rem; color: var(--suave); margin-top: 5px; }

.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  min-height: 44px; padding: .7rem 1.4rem; border-radius: 999px;
  font-family: var(--texto); font-size: .92rem; font-weight: 500; letter-spacing: .03em;
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
  transition: transform .18s ease, box-shadow .25s ease, background-color .2s ease;
}
.boton:active { transform: translateY(2px); }
.boton-linea { background: transparent; border-color: var(--beige); color: var(--tinta); margin-top: 14px; }
.boton-linea:hover { background: #fffefb; box-shadow: 0 5px 14px -9px rgba(74, 59, 46, .6); }

.respuestas { display: flex; flex-direction: column; gap: 9px; max-width: 250px; margin: 16px auto 0; }
.boton-si { background: var(--tinta); color: var(--papel); box-shadow: 0 8px 20px -13px rgba(74, 59, 46, 1); }
.boton-si:hover { background: #5b4a3a; }
.boton-no { background: transparent; border-color: var(--beige); color: var(--suave); }
.boton-no:hover { background: #fffefb; }
.boton[disabled] { opacity: .5; pointer-events: none; }

.gracias { display: flex; flex-direction: column; align-items: center; margin-top: 12px; animation: entra .6s cubic-bezier(.22, .61, .36, 1) both; }
@keyframes entra {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.gracias img { width: 66px; }
.gracias p { font-family: var(--display); font-size: 1.22rem; line-height: 1.35; margin-top: 8px; }
.cambiar {
  background: none; border: 0; color: var(--tenue); font-family: var(--texto);
  font-size: .76rem; letter-spacing: .05em; text-decoration: underline; text-underline-offset: 4px;
  cursor: pointer; padding: .55rem;
}

.firma { font-family: var(--display); font-style: italic; font-size: 1.05rem; color: var(--suave); margin-top: 24px; }

/* ---------- Confeti ---------- */
/* Solo aparece cuando alguien confirma o escoge bando. Es un premio, y un
   premio que está siempre puesto deja de serlo. */
.confeti { position: fixed; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
.papelito {
  position: absolute; top: -24px; width: 8px; height: 13px; border-radius: 1px;
  will-change: transform, opacity;
  animation: cae cubic-bezier(.3, .5, .6, 1) forwards;
}
.papelito--redondo { border-radius: 50%; height: 8px; }
@keyframes cae {
  from { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 1; }
  to   { transform: translate3d(var(--desvio), 104vh, 0) rotate(var(--giro)); opacity: 0; }
}

/* ---------- Pantallas grandes ---------- */
@media (min-width: 30rem) {
  .filete { padding: 28px 26px 32px; }
  .nombres { font-size: 1.75rem; }
  .equipos { gap: 20px; }
  .equipo { width: 130px; }
  .equipo img { width: 70px; }
}

/* ---------- Quien prefiere no ver movimiento ---------- */
@media (prefers-reduced-motion: reduce) {
  .nube, .flota, .flota > i, .guirnalda, .corona .oso, .equipo img { animation: none !important; }
  /* Con movimiento reducido NO se esconden: se quedan quietas donde cayeron.
     En Android el ahorro de batería enciende esta preferencia, y esconder la capa
     dejaba la invitación pelona sin que el dueño supiera por qué. */
  .vuela, .vuela > i { animation: none !important; }
  .vuela { top: auto; bottom: auto; }
  .v-hoja:nth-child(odd)  { top: 12%; }
  .v-hoja:nth-child(even) { top: 58%; }
  .v-globo { bottom: 14%; }
  /* Sin los fotogramas, el osito de la corona pierde lo que lo centraba. */
  .corona .oso { transform: translateX(-50%); }
  /* Se quedan quietos donde nacieron, no desaparecen: el fondo seguiría vacío. */
  .flota { opacity: .35; }
  .equipos-eco, .saludo { animation: none !important; }
  .invitacion, .corona, .gracias { animation: none !important; opacity: 1; transform: none; }
  .boton, .equipo, .equipo img, .equipo-palomita { transition: none; }
}