/* ══════════════════════════════════════════════════════════════════════
   ÁLVARO & TIFFANY — Invitación de boda
   Paleta: #616740 · #9f8a3d · #d1cfa7 · #a4aa59 · #fdfdfd
   ══════════════════════════════════════════════════════════════════════ */

/* ─── 1. VARIABLES ──────────────────────────────────────────────────── */
:root {
  --olivo:       #616740;
  --olivo-osc:   #464b2e;
  --dorado:      #9f8a3d;   /* decorativo: ornamentos y textos grandes */
  --dorado-txt:  #7d6a2c;   /* textos pequeños: contraste AA sobre crema */
  --dorado-cl:   #c1a95c;
  --salvia:      #a4aa59;
  --arena:       #d1cfa7;
  /* Los dos fondos claros son arena aguada con blanco: quedan dentro de la
     paleta y sin el tono rosado que tenían antes (#f7f4ec / #fdfcf7).       */
  --crema:       #f6f6ef;
  --crema-cl:    #fbfbf5;
  --blanco:      #fdfdfd;
  --papel:       #fefefe;   /* mismo blanco del fondo del logo */
  --tinta:       #3a3d2b;
  --tinta-suave: #5a5d46;

  --serif:  'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --script: 'Great Vibes', 'Cormorant Garamond', cursive;
  --sans:   'Jost', 'Helvetica Neue', Arial, sans-serif;

  --sombra:      0 1px 2px rgba(70, 75, 46, .04), 0 8px 30px rgba(70, 75, 46, .07);
  --sombra-alta: 0 2px 6px rgba(70, 75, 46, .06), 0 20px 60px rgba(70, 75, 46, .13);

  --radio: 3px;
  --transicion: .55s cubic-bezier(.22, .61, .36, 1);
}


/* ─── 2. BASE ───────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--blanco);
  color: var(--tinta);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.78;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.bloqueado { overflow: hidden; height: 100%; }

img { max-width: 100%; display: block; }

button { font: inherit; color: inherit; cursor: pointer; }

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

::selection { background: var(--arena); color: var(--olivo-osc); }

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


/* ─── 3. LAYOUT ─────────────────────────────────────────────────────── */
.contenedor {
  width: min(100% - 2.5rem, 1120px);
  margin-inline: auto;
}
.contenedor--angosto { width: min(100% - 2.5rem, 640px); }

.centro { text-align: center; }

.seccion { padding: clamp(4.5rem, 11vw, 8.5rem) 0; position: relative; }
.seccion--crema { background: var(--crema); }


/* ─── 4. TIPOGRAFÍA ─────────────────────────────────────────────────── */
.eyebrow {
  font-family: var(--sans);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--dorado-txt);
  margin: 0 0 1.2rem;
}
.eyebrow--claro { color: var(--arena); }

.titulo {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.4rem, 8vw, 3.8rem);
  line-height: 1.12;
  letter-spacing: .015em;
  color: var(--olivo);
  margin: 0 0 1.5rem;
  text-wrap: balance;
}
.titulo--pequeno { font-size: clamp(1.9rem, 6vw, 2.5rem); margin-bottom: 2.2rem; }
.titulo--claro   { color: var(--crema); }

.parrafo {
  font-size: 1.06rem;
  line-height: 1.82;
  color: var(--tinta-suave);
  margin: 0 0 1.2rem;
}
.parrafo--destacado {
  font-family: var(--serif);
  font-size: clamp(1.3rem, 4vw, 1.6rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.6;
  color: var(--olivo);
}
.parrafo--chico  { font-size: 1rem; line-height: 1.72; }
.parrafo--claro  { color: rgba(253, 253, 253, .82); }
.parrafo:last-child { margin-bottom: 0; }


/* Nombres de los novios */
.nombres {
  font-family: var(--serif);
  font-weight: 300;
  line-height: 1;
  margin: 0;
  color: var(--olivo);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .1em;
}
.nombres__uno,
.nombres__dos {
  font-size: clamp(2.6rem, 12vw, 4.6rem);
  letter-spacing: .06em;
  text-transform: none;
}
.nombres__amp {
  font-family: var(--script);
  font-size: clamp(1.9rem, 8vw, 3rem);
  color: var(--dorado);
  line-height: 1;
  margin: -.12em 0;
}
.nombres--hero { color: var(--blanco); }
.nombres--hero .nombres__amp { color: var(--arena); }


/* ─── 5. ORNAMENTOS SVG ─────────────────────────────────────────────── */
.orn {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.1;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--dorado);
}
.orn--divisor {
  width: clamp(200px, 58vw, 280px);
  height: auto;
  margin: 0 auto 1.9rem;
  display: block;
  opacity: 1;
  stroke-width: 1.3;
}
.orn--claro { color: var(--arena); opacity: .7; }

.orn--hoja {
  width: 36px; height: 36px;
  color: var(--olivo);
  margin: 0 auto 1.1rem;
  display: block;
  opacity: .8;
}

.orn--comilla {
  width: 46px; height: 46px;
  color: var(--dorado);
  stroke-width: 1.3;
  margin: 0 auto 1.4rem;
  display: block;
}

.orn--esquina {
  position: absolute;
  width: clamp(72px, 17vw, 120px);
  height: auto;
  color: var(--arena);
  opacity: .75;
  stroke-width: 1;
}
.orn--ne { top: 1.6rem; right: 1.6rem; }
.orn--so { bottom: 1.6rem; left: 1.6rem; transform: rotate(180deg); }


/* ─── 6. BOTONES ────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  border: 1px solid transparent;
  border-radius: var(--radio);
  padding: 1rem 2.1rem;
  font-family: var(--sans);
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  background: none;
  transition: background var(--transicion), color var(--transicion),
              border-color var(--transicion), transform .25s ease;
}
.btn:active { transform: scale(.98); }

.btn--solido {
  background: var(--olivo);
  color: var(--crema-cl);
  border-color: var(--olivo);
}
.btn--solido:hover { background: var(--olivo-osc); border-color: var(--olivo-osc); }

.btn--fantasma {
  color: var(--olivo);
  border-color: var(--arena);
}
.btn--fantasma:hover { background: var(--crema); border-color: var(--olivo); }

.btn--linea {
  color: var(--dorado-txt);
  border-color: var(--arena);
  padding: .82rem 1.6rem;
  font-size: .74rem;
}
.btn--linea:hover { background: var(--olivo); color: var(--crema-cl); border-color: var(--olivo); }

.btn--claro {
  background: var(--crema-cl);
  color: var(--olivo);
  border-color: var(--crema-cl);
  padding: 1rem 2.4rem;
}
.btn--claro:hover { background: transparent; color: var(--crema-cl); }

.btn__ico { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.4; }


/* ─── 7. PORTADA (pantalla de bienvenida) ───────────────────────────── */
.portada {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--papel);
  display: grid;
  place-items: center;
  padding: 1.5rem 1.25rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  transition: opacity .9s ease, visibility .9s;
}
.portada.oculta { opacity: 0; visibility: hidden; pointer-events: none; }

.portada__marco { position: absolute; inset: 0; pointer-events: none; }

.portada__contenido {
  text-align: center;
  max-width: 480px;
  animation: aparecer 1.4s ease both;
}

.portada__logo {
  width: min(94%, 390px);
  height: auto;
  max-height: 47svh;
  object-fit: contain;
  margin: -.2rem auto .3rem;
}

.portada__sub {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--tinta-suave);
  margin: 0 0 1.6rem;
}

.portada__nota {
  font-size: .8rem;
  letter-spacing: .06em;
  color: var(--tinta-suave);
  margin: 0 0 1.6rem;
}

.portada__acciones {
  display: flex;
  flex-direction: column;
  gap: .7rem;
  align-items: center;
}
.portada__acciones .btn { width: min(100%, 280px); }

@keyframes aparecer {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}


/* ─── 8. BOTÓN DE MÚSICA ────────────────────────────────────────────── */
.musica {
  position: fixed;
  right: max(1.1rem, env(safe-area-inset-right));
  bottom: max(1.1rem, env(safe-area-inset-bottom));
  z-index: 80;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border: 1px solid var(--arena);
  border-radius: 50%;
  background: var(--crema-cl);
  color: var(--dorado);
  box-shadow: var(--sombra);
  transition: background var(--transicion), color var(--transicion),
              transform .3s ease;
}
.musica:hover { transform: scale(1.06); }
.musica[hidden] { display: none; }

.musica__ico {
  width: 24px; height: 24px;
  fill: none; stroke: currentColor;
  stroke-width: 1.4; stroke-linecap: round;
  grid-area: 1 / 1;
}
.musica__ico--on  { display: none; }
.musica__ico--off { display: block; }
.musica.sonando .musica__ico--on  { display: block; }
.musica.sonando .musica__ico--off { display: none; }
.musica.sonando { background: var(--olivo); color: var(--crema-cl); border-color: var(--olivo); }

/* Ondas animadas cuando suena */
.musica__ondas {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
}
.musica__ondas i {
  position: absolute;
  inset: 0;
  border: 1px solid var(--salvia);
  border-radius: 50%;
  opacity: 0;
}
.musica.sonando .musica__ondas i { animation: onda 3s ease-out infinite; }
.musica.sonando .musica__ondas i:nth-child(2) { animation-delay: .75s; }
.musica.sonando .musica__ondas i:nth-child(3) { animation-delay: 1.5s; }
.musica.sonando .musica__ondas i:nth-child(4) { animation-delay: 2.25s; }

@keyframes onda {
  0%   { opacity: .55; transform: scale(1); }
  100% { opacity: 0;   transform: scale(1.9); }
}


/* ─── 9. HERO ───────────────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: end;
  justify-items: center;
  overflow: hidden;
  text-align: center;
  padding: 6rem 1.5rem clamp(5rem, 14vh, 8rem);
}

.hero__foto {
  position: absolute;
  inset: -2%;
  background: url('../img/abrazo.jpg') center 28% / cover no-repeat;
  animation: kenburns 26s ease-in-out infinite alternate;
}
@keyframes kenburns {
  from { transform: scale(1);    }
  to   { transform: scale(1.11); }
}

/* El fondo desenfocado solo hace falta cuando la foto se va a un lado
   (pantallas anchas). En celular la foto ocupa todo y esto no se ve.     */
.hero__fondo { display: none; }

/* ─── Pantallas anchas: ellos a un lado, el texto sobre el fondo ──────
   La foto es vertical: si se estira a lo ancho, la cara de Álvaro queda
   justo debajo de los nombres. En horizontal se manda la foto a la
   derecha y el texto se lee sobre la misma foto desenfocada.            */
@media (min-width: 860px) {
  .hero {
    grid-template-columns: 1fr minmax(0, 46%);
    align-items: center;
    justify-items: center;
    padding: 6rem clamp(2rem, 5vw, 5rem) 7rem;
  }

  .hero__fondo {
    display: block;
    position: absolute;
    inset: -6%;
    background: url('../img/abrazo.jpg') center 34% / cover no-repeat;
    filter: blur(38px) saturate(1.15) brightness(.62);
    transform: scale(1.06);
  }

  .hero__foto {
    inset: 0 0 0 auto;
    width: 48%;
    background-position: center 16%;
    /* Se funde con el fondo por el borde de adentro, sin corte duro */
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%);
            mask-image: linear-gradient(90deg, transparent 0%, #000 22%);
  }

  .hero__velo {
    background:
      linear-gradient(90deg, rgba(30, 33, 20, .58) 0%, rgba(30, 33, 20, .30) 48%,
                              rgba(30, 33, 20, 0) 72%),
      linear-gradient(180deg, rgba(30, 33, 20, .40) 0%, rgba(30, 33, 20, .05) 35%,
                              rgba(30, 33, 20, .45) 100%);
  }

  .hero__contenido { grid-column: 1; }
}

.hero__velo {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(30, 33, 20, .42) 0%, rgba(30, 33, 20, .12) 30%,
                            rgba(30, 33, 20, .55) 72%, rgba(30, 33, 20, .82) 100%);
}

.hero__contenido {
  position: relative;
  z-index: 2;
  animation: aparecer 1.6s .3s ease both;
}

.hero__fecha {
  font-size: .8rem;
  letter-spacing: .5em;
  text-transform: uppercase;
  color: var(--arena);
  margin: 0 0 1.6rem;
  text-indent: .5em;
}
.hero__fecha span { opacity: .55; margin: 0 .25em; }

.hero__sub {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.05rem, 3.5vw, 1.35rem);
  color: rgba(253, 253, 253, .88);
  margin: 1.3rem 0 0;
  letter-spacing: .04em;
}

.hero__scroll {
  position: absolute;
  bottom: 2.2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  width: 22px;
  height: 38px;
  border: 1px solid rgba(253, 253, 253, .5);
  border-radius: 12px;
  display: grid;
  place-items: start center;
  padding-top: 7px;
}
.hero__scroll span {
  width: 3px; height: 7px;
  background: var(--arena);
  border-radius: 2px;
  animation: bajar 2s ease-in-out infinite;
}
@keyframes bajar {
  0%, 100% { transform: translateY(0);   opacity: 1;  }
  50%      { transform: translateY(11px); opacity: .25; }
}


/* ─── 10. CONTADOR ──────────────────────────────────────────────────── */
.seccion--contador { background: var(--blanco); }

/* La sección va apretada a propósito: el avión no ocupa espacio propio,
   vuela por detrás de las cajas.                                        */
.seccion--contador { padding-block: clamp(3.4rem, 8vw, 6rem); }

/* El avión y su estela viven detrás del contador. El rizo queda arriba,
   en el aire libre, y la estela cruza por detrás de las cuatro cajas:
   se asoma en los espacios que quedan entre ellas.                      */
.cuenta-envoltura {
  position: relative;
  max-width: 560px;
  margin: clamp(3rem, 9vw, 4.4rem) auto 0;
}

.cuenta-estela {
  position: absolute;
  left: 50%;
  top: -46%;
  width: 104%;
  height: auto;
  transform: translateX(-50%);
  overflow: visible;
  pointer-events: none;
  z-index: 0;
}

.despegue__estela {
  stroke: var(--dorado-cl);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-dasharray: 5 8.5;
  animation: volar 6s linear infinite;
}
@keyframes volar { to { stroke-dashoffset: -27; } }

.despegue__avion { fill: var(--olivo); }

/* Las cajas van encima y tapan la estela: por eso se ve "por detrás" */
.cuenta {
  position: relative;
  z-index: 1;
}

.cuenta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(.5rem, 2.5vw, 1.4rem);
  max-width: 560px;
  margin-inline: auto;
}

.cuenta__caja {
  border: 1px solid var(--arena);
  border-radius: var(--radio);
  padding: clamp(.9rem, 3vw, 1.5rem) .3rem;
  background: var(--crema-cl);
}

.cuenta__num {
  display: block;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2rem, 8.5vw, 3.1rem);
  line-height: 1;
  color: var(--olivo);
  font-variant-numeric: tabular-nums;
}

.cuenta__lbl {
  display: block;
  margin-top: .5rem;
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--dorado-txt);
}

.cuenta__llego {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-style: italic;
  color: var(--dorado-txt);
  margin: 1.5rem 0 0;
}


/* ─── 11. TARJETAS ──────────────────────────────────────────────────── */
.tarjeta {
  background: var(--blanco);
  border: 1px solid var(--arena);
  border-radius: var(--radio);
  padding: clamp(1.8rem, 5vw, 2.6rem) clamp(1.3rem, 4vw, 2.2rem);
  text-align: center;
  box-shadow: var(--sombra);
}

.tarjeta__ico {
  width: 46px; height: 46px;
  fill: none;
  stroke: var(--olivo);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  display: block;
}

.tarjeta__titulo {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.55rem, 5vw, 1.95rem);
  font-weight: 500;
  color: var(--olivo);
  margin: 0 0 1rem;
  letter-spacing: .01em;
}


/* Tarjeta de invitado (reemplazada por el pase de abordar) */

.invitado__conteo {
  font-family: var(--serif);
  font-size: clamp(2.6rem, 10vw, 3.4rem);
  line-height: 1;
  color: var(--dorado);
  margin: 0;
}
.invitado__lbl {
  font-size: .66rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  margin: .5rem 0 0;
}
.invitado__acomp {
  font-size: .84rem;
  font-style: italic;
  color: var(--tinta-suave);
  margin: .2rem 0 0;
}
.invitado__acomp[hidden] { display: none; }

.invitado__nombre {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 5.5vw, 2rem);
  color: var(--olivo);
  margin: 1.2rem 0 1rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--arena);
}


/* ─── 12. HISTORIA ──────────────────────────────────────────────────── */
.capitulo {
  display: grid;
  gap: clamp(1.8rem, 5vw, 3.5rem);
  align-items: center;
  margin-bottom: clamp(3.5rem, 9vw, 6rem);
}

.capitulo__foto {
  position: relative;
  border-radius: var(--radio);
  overflow: hidden;
  width: 100%;
  max-width: 260px;
  margin-inline: auto;
}
.capitulo__foto::after {
  content: '';
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(253, 253, 253, .32);
  pointer-events: none;
}
.capitulo__foto img {
  width: 100%;
  height: auto;          /* anula el alto que trae el atributo del <img> */
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: transform 1.2s ease;
}
.capitulo:hover .capitulo__foto img { transform: scale(1.04); }

.capitulo__ano {
  font-size: .68rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--dorado-txt);
  margin: 0 0 .7rem;
}

.capitulo__titulo {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.7rem, 5.5vw, 2.4rem);
  color: var(--olivo);
  margin: 0 0 1.2rem;
  letter-spacing: .02em;
}

@media (min-width: 780px) {
  .capitulo { grid-template-columns: 1fr 1fr; }
  .capitulo--invertido .capitulo__foto { order: 2; }
}

/* Cita destacada */
.cita {
  margin: 0;
  padding: clamp(2rem, 6vw, 3rem) 0 0;
  border-top: 1px solid var(--arena);
}
.cita blockquote {
  margin: 0;
  font-family: var(--serif);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(1.25rem, 4.2vw, 1.7rem);
  line-height: 1.6;
  color: var(--olivo);
}


/* ─── 13. GALERÍA ───────────────────────────────────────────────────── */
.galeria {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: clamp(105px, 29vw, 165px);
  gap: .55rem;
}
@media (min-width: 720px) {
  .galeria {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: clamp(120px, 14vw, 175px);
    gap: .75rem;
  }
}

/* Cada clasificación, con su rótulo */
.galeria-grupo + .galeria-grupo { margin-top: clamp(2.4rem, 6vw, 3.6rem); }

.galeria__rotulo {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0 0 1.1rem;
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--dorado-txt);
}
.galeria__rotulo::before,
.galeria__rotulo::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--arena);
}

.galeria__item {
  position: relative;
  overflow: hidden;
  border-radius: var(--radio);
  padding: 0;
  border: none;
  background: var(--arena);
  display: block;
}
.galeria__item--alto { grid-row: span 2; }

.galeria__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s ease, filter .5s ease;
}
.galeria__item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(70, 75, 46, .3));
  opacity: 0;
  transition: opacity .5s ease;
}
.galeria__item:hover img { transform: scale(1.06); }
.galeria__item:hover::after { opacity: 1; }


/* ─── 14. EVENTOS (ceremonia / recepción) ───────────────────────────── */
.eventos {
  display: grid;
  gap: clamp(1.2rem, 3.5vw, 2rem);
  margin-bottom: clamp(1.4rem, 4vw, 2rem);
}
@media (min-width: 760px) {
  .eventos { grid-template-columns: repeat(2, 1fr); }
}

.evento__bloque { padding: .4rem 0; }

.evento__etiqueta {
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--dorado-txt);
  margin: 0 0 .6rem;
}

.evento__valor {
  font-family: var(--serif);
  font-size: 1.38rem;
  font-weight: 500;
  color: var(--olivo);
  margin: 0 0 .2rem;
  line-height: 1.4;
}

.evento__detalle {
  font-size: .96rem;
  color: var(--tinta-suave);
  margin: 0 0 1rem;
}
.evento__bloque .btn { margin-top: .8rem; }

.evento__linea {
  height: 1px;
  background: var(--arena);
  margin: 1.5rem auto;
  width: 60%;
}


/* ─── 15. RSVP ──────────────────────────────────────────────────────── */
.seccion--rsvp {
  background:
    linear-gradient(rgba(70, 75, 46, .82), rgba(70, 75, 46, .82)),
    url('../img/manos.jpg') center 30% / cover no-repeat fixed;
}
@media (hover: none) {
  .seccion--rsvp { background-attachment: scroll; }
}
.seccion--rsvp .parrafo strong { color: var(--arena); font-weight: 400; }

/* La fecha límite no se parte: o cabe entera en la línea, o baja entera */
[data-limite] { white-space: nowrap; }


/* ─── 16. REJILLA DE TARJETAS (fiesta) ──────────────────────────────── */
.rejilla {
  display: grid;
  gap: clamp(1rem, 3vw, 1.6rem);
  grid-template-columns: 1fr;
  margin-top: 2.5rem;
}
@media (min-width: 620px) { .rejilla { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .rejilla { grid-template-columns: repeat(4, 1fr); } }

.tarjeta--mini {
  display: flex;
  flex-direction: column;
  background: var(--crema-cl);
}
.tarjeta--mini .parrafo { flex: 1; }
.tarjeta--mini .btn { margin-top: 1.4rem; align-self: center; }


/* ─── 17. CIERRE ────────────────────────────────────────────────────── */
.cierre {
  position: relative;
  min-height: 78svh;
  display: grid;
  place-items: center;
  overflow: hidden;
  text-align: center;
  padding: 5rem 1.5rem;
}
.cierre__foto {
  position: absolute;
  inset: 0;
  background: url('../img/caminando.jpg') center 35% / cover no-repeat;
}
.cierre__velo {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(30, 33, 20, .62), rgba(30, 33, 20, .5));
}
.cierre__contenido { position: relative; z-index: 2; }

.cierre__frase {
  font-family: var(--serif);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(1.25rem, 4.5vw, 1.9rem);
  line-height: 1.65;
  color: var(--blanco);
  margin: 0 0 2rem;
}

.cierre__firma {
  font-family: var(--script);
  font-size: clamp(2.1rem, 8vw, 3.2rem);
  color: var(--arena);
  margin: 0;
  line-height: 1.3;
}
.cierre__firma span { color: var(--dorado-cl); font-size: .7em; }


/* ─── 18. PIE DE PÁGINA ─────────────────────────────────────────────── */
.pie {
  background: var(--papel);
  border-top: 1px solid var(--arena);
  padding: clamp(3.5rem, 9vw, 5.5rem) 0 2.5rem;
  text-align: center;
}

.pie__logo {
  width: min(58%, 210px);
  height: auto;
  margin: 0 auto 1rem;
}

.nombres--pie .nombres__uno,
.nombres--pie .nombres__dos { font-size: clamp(1.9rem, 8vw, 2.6rem); }
.nombres--pie .nombres__amp { font-size: clamp(1.4rem, 5vw, 1.9rem); }

.pie__apellidos {
  font-size: .68rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--dorado-txt);
  margin: .9rem 0 0;
}

.pie__sub {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--tinta-suave);
  margin: .4rem 0 1.6rem;
}

.pie__enlaces {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .35rem 1.6rem;
  margin-bottom: 2.5rem;
}
.pie__enlaces a {
  background: none;
  border: none;
  padding: .35rem 0;
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  border-bottom: 1px solid transparent;
  transition: color var(--transicion), border-color var(--transicion);
}
.pie__enlaces a:hover { color: var(--olivo); border-bottom-color: var(--dorado); }

.pie__credito {
  font-size: .7rem;
  letter-spacing: .12em;
  color: var(--tinta-suave);
  margin: 0;
}
.pie__credito span { color: var(--dorado-txt); }


/* ─── 19. MODAL ─────────────────────────────────────────────────────── */
.modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 1.5rem;
}
.modal[hidden] { display: none; }

.modal__fondo {
  position: absolute;
  inset: 0;
  background: rgba(40, 44, 26, .55);
  backdrop-filter: blur(3px);
  animation: aparecer .4s ease both;
}

.modal__caja {
  position: relative;
  z-index: 2;
  width: min(100%, 520px);
  max-height: 85svh;
  overflow-y: auto;
  background: var(--crema-cl);
  border: 1px solid var(--arena);
  border-radius: var(--radio);
  padding: clamp(2rem, 6vw, 2.8rem);
  box-shadow: var(--sombra-alta);
  text-align: center;
  animation: subir .5s cubic-bezier(.22, .61, .36, 1) both;
}
@keyframes subir {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}

.modal__cerrar {
  position: absolute;
  top: .9rem; right: .9rem;
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  background: none;
  border: none;
  color: var(--tinta-suave);
  transition: color var(--transicion), transform .3s ease;
}
.modal__cerrar:hover { color: var(--olivo); transform: rotate(90deg); }
.modal__cerrar svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; }

.modal__titulo {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 5vw, 1.9rem);
  color: var(--olivo);
  margin: 0 0 1.3rem;
}

.modal__cuerpo { text-align: left; font-size: .95rem; color: var(--tinta-suave); }
.modal__cuerpo p { margin: 0 0 1rem; line-height: 1.75; }
.modal__cuerpo strong { color: var(--olivo); font-weight: 500; }
.modal__cuerpo ul { margin: 0 0 1rem; padding-left: 1.1rem; }
.modal__cuerpo li { margin-bottom: .7rem; line-height: 1.7; }
.modal__cuerpo li::marker { color: var(--dorado); }

.modal__lead {
  font-family: var(--serif);
  font-size: 1.3rem !important;
  font-style: italic;
  color: var(--olivo) !important;
  text-align: center;
}

.modal__aviso {
  background: var(--crema);
  border-left: 2px solid var(--dorado);
  padding: .9rem 1.1rem;
  font-size: .88rem;
  margin-bottom: 0 !important;
}

.dato {
  border: 1px solid var(--arena);
  border-radius: var(--radio);
  padding: 1rem 1.2rem;
  margin-bottom: 1rem;
  background: var(--crema);
}
.dato__lbl {
  font-size: .63rem !important;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--dorado-txt);
  margin-bottom: .5rem !important;
}
.dato p:last-child { margin-bottom: 0; }

.modal__acciones {
  display: flex;
  flex-direction: column;
  gap: .7rem;
  align-items: stretch;
  margin-top: 1.4rem;
}
.modal__acciones .btn { width: 100%; }


/* ─── 20. VISOR DE FOTOS ────────────────────────────────────────────── */
.visor {
  position: fixed;
  inset: 0;
  z-index: 130;
  background: rgba(28, 31, 18, .95);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: .5rem;
  padding: 1rem;
  animation: aparecer .35s ease both;
}
.visor[hidden] { display: none; }

.visor__marco {
  margin: 0;
  display: grid;
  place-items: center;
  gap: 1rem;
  max-height: 100%;
  min-width: 0;
}
.visor__marco img {
  max-width: 100%;
  max-height: 78svh;
  object-fit: contain;
  border-radius: var(--radio);
  animation: subir .45s ease both;
}

.visor__pie {
  font-size: .68rem;
  letter-spacing: .24em;
  color: var(--arena);
  text-transform: uppercase;
}

.visor__cerrar,
.visor__nav {
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  background: none;
  border: 1px solid rgba(209, 207, 167, .3);
  border-radius: 50%;
  color: var(--arena);
  transition: background var(--transicion), color var(--transicion);
}
.visor__cerrar:hover,
.visor__nav:hover { background: var(--arena); color: var(--olivo-osc); }

.visor__cerrar {
  position: absolute;
  top: 1.2rem; right: 1.2rem;
  z-index: 3;
}
.visor__cerrar svg,
.visor__nav svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 560px) {
  .visor { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  .visor__marco { grid-row: 1; }
  .visor__nav--prev { grid-row: 2; justify-self: start; }
  .visor__nav--next { grid-row: 2; justify-self: end; }
}


/* ─── 20b. AVISO BREVE ──────────────────────────────────────────────── */
.aviso {
  position: fixed;
  left: 50%;
  bottom: calc(1.4rem + env(safe-area-inset-bottom));
  transform: translate(-50%, 130%);
  z-index: 90;
  max-width: min(90vw, 340px);
  padding: .75rem 1.2rem;
  background: var(--olivo-osc);
  color: var(--crema-cl);
  border-radius: var(--radio);
  box-shadow: var(--sombra-alta);
  font-size: .78rem;
  letter-spacing: .04em;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: transform .5s cubic-bezier(.22, .61, .36, 1), opacity .5s ease;
}
.aviso.visible { transform: translate(-50%, 0); opacity: 1; }


/* ─── 21. ANIMACIONES DE ENTRADA ────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .9s ease, transform .9s cubic-bezier(.22, .61, .36, 1);
}
.reveal.visible { opacity: 1; transform: none; }


/* ─── 22. ACCESIBILIDAD: MOVIMIENTO REDUCIDO ────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .hero__foto { animation: none; }
}


/* ─── 23. IMPRESIÓN ─────────────────────────────────────────────────── */
@media print {
  .portada, .musica, .hero__scroll, .visor, .modal { display: none !important; }
  body { background: #fff; }
  .seccion { padding: 1.5rem 0; break-inside: avoid; }
}


/* ══════════════════════════════════════════════════════════════════════
   AJUSTES AÑADIDOS — formularios dentro del sitio, iconos y regalos
   ══════════════════════════════════════════════════════════════════════ */

/* ─── Contenedor intermedio ─────────────────────────────────────────── */
.contenedor--medio { width: min(100% - 2.5rem, 820px); }


/* ─── Portada en pantallas bajas (que quepan siempre los botones) ───── */
@media (max-height: 760px) {
  .portada__logo   { max-height: 42svh; margin-bottom: .1rem; }
  .portada__sub    { font-size: 1rem; margin-bottom: .9rem; }
  .portada__nota   { font-size: .78rem; margin-bottom: .9rem; }
  .portada .eyebrow { font-size: .68rem; margin-bottom: .6rem; }
  .portada__acciones .btn { padding: .85rem 1.6rem; }
}
@media (max-height: 620px) {
  .portada { place-items: start center; padding-top: 1.5rem; }
  .portada__logo  { max-height: 38svh; }
  .portada__sub   { margin-bottom: .6rem; }
  .portada__nota  { margin-bottom: .7rem; }
  .portada .orn--esquina { display: none; }
}


/* ─── Medalla circular detrás de los iconos ─────────────────────────── */
.tarjeta__medalla {
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  margin: 0 auto 1.4rem;
  border-radius: 50%;
  background: var(--crema);
  border: 1px solid var(--arena);
}
.tarjeta--mini .tarjeta__medalla,
.tarjeta--escribir .tarjeta__medalla { background: var(--blanco); }


/* ─── Campos de formulario ──────────────────────────────────────────── */
.campo {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  text-align: left;
  margin-bottom: 1.1rem;
}
.campo[hidden] { display: none; }

.campo__lbl {
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dorado-txt);
}
.campo__opc {
  text-transform: none;
  letter-spacing: .02em;
  font-weight: 300;
  opacity: .8;
}

.campo__input {
  width: 100%;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 300;
  color: var(--tinta);
  background: var(--blanco);
  border: 1px solid var(--arena);
  border-radius: var(--radio);
  padding: .8rem .95rem;
  transition: border-color var(--transicion), box-shadow var(--transicion);
}
.campo__input::placeholder { color: #9aa08a; }
.campo__input:focus {
  outline: none;
  border-color: var(--olivo);
  box-shadow: 0 0 0 3px rgba(97, 103, 64, .15);
}
textarea.campo__input { resize: vertical; min-height: 4.5rem; }

select.campo__input {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%237d6a2c' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .95rem center;
  background-size: 12px;
  padding-right: 2.4rem;
}


/* ─── CONFIRMACIÓN DE ASISTENCIA ────────────────────────────────────── */
.rsvp { margin-top: 2.5rem; }

/* Solo se ve cuando el link no trae el nombre */
.rsvp__nombre {
  max-width: 420px;
  margin-inline: auto;
  margin-bottom: 1.6rem;
}
@media (min-width: 520px) { .rsvp__nombre { max-width: 520px; } }
.rsvp__nombre .campo__lbl { color: var(--arena); }

.rsvp__eleccion {
  display: grid;
  gap: .9rem;
  grid-template-columns: 1fr;
  max-width: 420px;
  margin-inline: auto;
}
@media (min-width: 520px) {
  .rsvp__eleccion { grid-template-columns: 1fr 1fr; max-width: 520px; }
}

.opcion {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .7rem;
  padding: 1.6rem 1rem;
  background: rgba(253, 253, 253, .07);
  border: 1px solid rgba(209, 207, 167, .45);
  border-radius: var(--radio);
  color: var(--crema);
  transition: background var(--transicion), border-color var(--transicion),
              transform .25s ease;
}
.opcion:hover {
  background: var(--crema-cl);
  border-color: var(--crema-cl);
  color: var(--olivo);
}
.opcion:active { transform: scale(.98); }

.opcion__ico {
  width: 30px; height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.opcion__txt {
  font-size: .84rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.rsvp__form {
  max-width: 440px;
  margin-inline: auto;
  text-align: left;
}
.rsvp__form[hidden], .rsvp__listo[hidden] { display: none; }

.rsvp__resumen {
  color: var(--arena);
  font-size: 1rem;
  text-align: center;
  margin: 0 0 1.6rem;
}

.rsvp__form .campo__lbl { color: var(--arena); }

.rsvp__botones {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .8rem;
  margin-top: 1.6rem;
}
.rsvp__botones .btn--claro { width: 100%; }

.btn--textoClaro {
  color: var(--arena);
  border-color: transparent;
  padding: .5rem 1rem;
  font-size: .72rem;
  letter-spacing: .12em;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.btn--textoClaro:hover { color: var(--crema-cl); }

.rsvp__listo { max-width: 440px; margin-inline: auto; }

.rsvp__check {
  width: 84px; height: 84px;
  margin: 0 auto 1.3rem;
  display: block;
  fill: none;
  stroke: var(--arena);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Quién confirmó y con cuántos pases */
.rsvp__quien {
  font-family: var(--serif);
  font-size: clamp(1.7rem, 6vw, 2.2rem);
  font-weight: 500;
  line-height: 1.2;
  color: var(--crema-cl);
  margin: 0;
}

.rsvp__pases {
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--arena);
  margin: .55rem 0 0;
}
.rsvp__pases[hidden] { display: none; }

.rsvp__gracias {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 4vw, 1.55rem);
  font-style: italic;
  line-height: 1.55;
  color: var(--crema);
  margin: 1.5rem 0 1.4rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(209, 207, 167, .35);
}


/* ─── TARJETAS CON FORMULARIO (canción y libro de firmas) ───────────── */
.escritura {
  display: grid;
  gap: clamp(1.2rem, 3.5vw, 2rem);
  margin-top: 2.8rem;
}
@media (min-width: 780px) {
  .escritura { grid-template-columns: repeat(2, 1fr); align-items: stretch; }
}
.escritura > .tarjeta { display: flex; flex-direction: column; }
/* El formulario empuja el botón al fondo: los pares quedan parejos */
.escritura .mini { display: flex; flex-direction: column; flex: 1; }
.escritura .mini .btn { margin-top: auto; }

.tarjeta--escribir { background: var(--crema-cl); }
.tarjeta--escribir .parrafo { margin-bottom: 1.6rem; }

/* ─── El libro de firmas se destaca a propósito ──────────────────────
   Es lo que más queremos que la gente llene, así que va en olivo, con
   el texto claro, para que salte a la vista al lado de la otra tarjeta. */
.tarjeta--postal {
  background: var(--olivo);
  border-color: var(--olivo-osc);
  box-shadow: var(--sombra-alta);
}
.tarjeta--postal .tarjeta__medalla {
  background: rgba(253, 252, 247, .09);
  border-color: rgba(209, 207, 167, .55);
}
.tarjeta--postal .tarjeta__ico  { stroke: var(--arena); }
.tarjeta--postal .tarjeta__titulo { color: var(--crema-cl); }
.tarjeta--postal .parrafo       { color: var(--arena); }
.tarjeta--postal .campo__lbl    { color: var(--arena); }
.tarjeta--postal .mini__listo   { color: var(--crema-cl); }

.tarjeta__gancho {
  font-family: var(--script);
  font-size: clamp(1.5rem, 5vw, 1.85rem);
  line-height: 1.15;
  color: var(--dorado-cl);
  margin: 0 0 .1rem;
}

.mini { text-align: left; }
.mini .btn { width: 100%; margin-top: .4rem; }

.mini__listo {
  font-family: var(--serif);
  font-size: 1.2rem;
  font-style: italic;
  color: var(--olivo);
  text-align: center;
  margin: 1rem 0 0;
}
.mini__listo[hidden] { display: none; }

/* ══════════════════════════════════════════════════════════════════════
   SUBIR FOTOS Y VIDEOS A DRIVE
   ══════════════════════════════════════════════════════════════════════ */
.subida { margin-top: 2.6rem; }

/* El input real se esconde, pero sigue siendo accesible desde el teclado:
   el foco se dibuja sobre la caja de al lado.                            */
.subida__input {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}

.subida__caja {
  display: block;
  cursor: pointer;
  background: var(--crema);
  border: 2px dashed var(--arena);
  border-radius: var(--radio);
  padding: clamp(2rem, 7vw, 3.2rem) 1.4rem;
  transition: border-color var(--transicion), background var(--transicion);
}
.subida__caja:hover {
  border-color: var(--olivo);
  background: var(--crema-cl);
}
.subida__input:focus-visible + .subida__caja,
.subida__caja:focus-visible {
  outline: 2px solid var(--dorado);
  outline-offset: 3px;
}

.subida__ico {
  width: 62px; height: 62px;
  margin: 0 auto 1rem;
  display: block;
  fill: none;
  stroke: var(--olivo);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.subida__titulo {
  display: block;
  font-family: var(--serif);
  font-size: clamp(1.4rem, 5vw, 1.75rem);
  font-weight: 500;
  color: var(--olivo);
}
.subida__ayuda {
  display: block;
  font-size: .92rem;
  color: var(--tinta-suave);
  margin-top: .3rem;
}

/* La lista de archivos elegidos */
.subida__lista {
  list-style: none;
  margin: 1.6rem 0 0;
  padding: 0;
  text-align: left;
  display: grid;
  gap: .5rem;
}
.subida__lista[hidden] { display: none; }

.subida__item {
  display: flex;
  align-items: center;
  gap: .8rem;
  background: var(--blanco);
  border: 1px solid var(--arena);
  border-radius: var(--radio);
  padding: .7rem .9rem;
  font-size: .92rem;
  line-height: 1.35;
}

.subida__nombre {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--tinta);
}
.subida__peso {
  font-size: .78rem;
  color: var(--tinta-suave);
  white-space: nowrap;
}

/* El estado de cada archivo: esperando, subiendo, listo o con problema */
.subida__estado {
  width: 22px;
  height: 22px;
  flex: none;
  display: grid;
  place-items: center;
  font-size: .95rem;
  line-height: 1;
}
.subida__item--listo  .subida__nombre { color: var(--tinta-suave); }
.subida__item--listo  { border-color: var(--salvia); }
.subida__item--error  { border-color: var(--dorado-txt); }
.subida__item--grande { border-style: dashed; }

.subida__giro {
  width: 17px; height: 17px;
  border: 2px solid var(--arena);
  border-top-color: var(--olivo);
  border-radius: 50%;
  animation: girar .8s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

.subida__btn { width: 100%; margin-top: 1.4rem; }
.subida__btn[hidden] { display: none; }

.subida__nota {
  font-size: .88rem;
  line-height: 1.6;
  color: var(--tinta-suave);
  margin: 1.4rem 0 0;
}
.subida__nota:empty { display: none; }
.subida__nota a { color: var(--dorado-txt); }


.rejilla--dos { margin-top: clamp(1.2rem, 3.5vw, 2rem); }
@media (min-width: 620px) { .rejilla--dos { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .rejilla--dos { grid-template-columns: repeat(2, 1fr); } }


/* ─── REGALOS: cuentas bancarias ────────────────────────────────────── */
.cuentas {
  display: grid;
  gap: 1.2rem;
  margin: 2.5rem 0 1.8rem;
  text-align: left;
  justify-content: center;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 420px));
}

.cuenta-card {
  width: 100%;
  background: var(--blanco);
  border: 1px solid var(--arena);
  border-radius: var(--radio);
  padding: clamp(1.4rem, 4vw, 1.9rem);
  box-shadow: var(--sombra);
  display: flex;
  flex-direction: column;
}

.cuenta-card__banco {
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 500;
  color: var(--olivo);
  margin: 0 0 1rem;
}

.cuenta-card__numero {
  background: var(--crema);
  border-radius: var(--radio);
  padding: .9rem 1rem;
  margin-bottom: 1rem;
}
.cuenta-card__lbl {
  display: block;
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--dorado-txt);
  margin-bottom: .35rem;
}
.cuenta-card__numero strong {
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--olivo);
  letter-spacing: .05em;
  font-variant-numeric: tabular-nums;
  word-break: break-all;
}

.cuenta-card__detalle {
  margin: 1.2rem 0 0;
  padding-top: 1.1rem;
  border-top: 1px solid var(--arena);
  display: grid;
  gap: .55rem;
}
.cuenta-card__fila {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: .93rem;
}
.cuenta-card__fila dt {
  color: var(--dorado-txt);
  font-weight: 500;
  flex-shrink: 0;
}
.cuenta-card__fila dd {
  margin: 0;
  color: var(--tinta-suave);
  text-align: right;
}

.regalos__sobres {
  font-size: 1rem;
  font-style: italic;
  color: var(--tinta-suave);
  margin: 0;
}
.regalos__sobres[hidden] { display: none; }


/* ─── Medallas en variantes ─────────────────────────────────────────── */
.tarjeta__medalla--chica {
  width: 82px;
  height: 82px;
  margin-bottom: 1.1rem;
}
.tarjeta__medalla--chica .tarjeta__ico { width: 40px; height: 40px; }

.tarjeta__medalla--suelta {
  background: var(--blanco);
  margin-bottom: 1.4rem;
}
.tarjeta__medalla--suelta .tarjeta__ico { width: 42px; height: 42px; }

/* El avión es una silueta llena, no un contorno */
.orn--hoja use[href="#ico-avion"],
.tarjeta__ico use[href="#ico-avion"] {
  fill: var(--olivo);
  stroke: none;
}


/* ══════════════════════════════════════════════════════════════════════
   PASE DE ABORDAR
   ══════════════════════════════════════════════════════════════════════ */
.pase {
  --muesca: 17px;
  position: relative;
  max-width: 560px;
  margin: 2.4rem auto 2rem;
  background: var(--papel);
  border: 1px solid var(--arena);
  border-radius: 6px;
  box-shadow: var(--sombra-alta);
  text-align: left;
  overflow: hidden;
}

/* ── Franja superior ─────────────────────────────────────────────── */
.pase__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .85rem clamp(1.1rem, 4vw, 1.7rem);
  background: var(--olivo);
  color: var(--crema-cl);
}

.pase__marca {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.pase__marca svg {
  width: 20px; height: 20px;
  fill: var(--arena);
  stroke: none;
  transform: rotate(90deg);
}

.pase__vuelo {
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .16em;
  color: var(--arena);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ── Cuerpo ──────────────────────────────────────────────────────── */
.pase__cuerpo { padding: clamp(1.3rem, 4.5vw, 1.9rem); }

.pase__lbl {
  display: block;
  font-size: .6rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--dorado-txt);
  margin-bottom: .3rem;
}

.pase__campo--ancho { margin-bottom: 1.5rem; }

.pase__nombre {
  display: block;
  font-family: var(--serif);
  font-size: clamp(1.5rem, 5.5vw, 2.1rem);
  font-weight: 500;
  line-height: 1.2;
  color: var(--olivo);
  letter-spacing: .01em;
}

/* ── Ruta: GUA ✈ A&T ─────────────────────────────────────────────── */
.pase__ruta {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(.6rem, 3vw, 1.4rem);
  padding: 1.2rem 0;
  border-top: 1px solid var(--arena);
  border-bottom: 1px solid var(--arena);
}

.pase__punto:last-child { text-align: right; }

.pase__sigla {
  display: block;
  font-family: var(--serif);
  font-size: clamp(1.6rem, 6vw, 2.2rem);
  font-weight: 500;
  line-height: 1;
  color: var(--olivo);
  letter-spacing: .04em;
}

.pase__lugar {
  display: block;
  font-size: .76rem;
  color: var(--tinta-suave);
  margin-top: .2rem;
}

.pase__trayecto {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 60px;
}
.pase__linea {
  width: 100%;
  height: 20px;
  fill: none;
  stroke: var(--arena);
  stroke-width: 2;
  stroke-linecap: round;
}
.pase__aviocito {
  position: absolute;
  width: 26px; height: 26px;
  fill: var(--dorado);
  stroke: none;
  transform: rotate(90deg);
}

/* ── Datos del vuelo ─────────────────────────────────────────────── */
.pase__datos {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem 2.2rem;
  padding-top: 1.2rem;
}
.pase__datos .pase__campo { min-width: 84px; }
.pase__datos .pase__campo[hidden] { display: none; }

.pase__dato {
  display: block;
  font-size: 1.02rem;
  font-weight: 500;
  color: var(--olivo);
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
}
.pase__dato--fuerte {
  font-family: var(--serif);
  font-size: 1.5rem;
  line-height: 1;
}

/* ── Talón perforado con código de barras ────────────────────────── */
.pase__talon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem clamp(1.1rem, 4vw, 1.7rem);
  background: var(--crema);
  border-top: 2px dashed var(--arena);
}
/* Las muescas laterales de un boleto de verdad */
.pase__talon::before,
.pase__talon::after {
  content: '';
  position: absolute;
  top: calc(var(--muesca) / -1);
  width: var(--muesca);
  height: var(--muesca);
  background: var(--crema);
  border: 1px solid var(--arena);
  border-radius: 50%;
}
.pase__talon::before { left:  calc(var(--muesca) / -2); }
.pase__talon::after  { right: calc(var(--muesca) / -2); }

.pase__barras {
  flex-shrink: 0;
  width: clamp(88px, 26vw, 132px);
  height: 34px;
  background: repeating-linear-gradient(90deg,
    var(--olivo) 0 2px, transparent 2px 5px,
    var(--olivo) 5px 6px, transparent 6px 10px,
    var(--olivo) 10px 13px, transparent 13px 15px);
  opacity: .85;
}

.pase__pie {
  font-size: .7rem;
  letter-spacing: .05em;
  color: var(--tinta-suave);
  text-align: right;
  line-height: 1.5;
}

/* En pantallas muy angostas, la ruta se apila */
@media (max-width: 380px) {
  .pase__ruta { gap: .5rem; }
  .pase__lugar { font-size: .7rem; }
  .pase__talon { flex-direction: column; align-items: flex-start; gap: .7rem; }
  .pase__pie { text-align: left; }
}


/* ══════════════════════════════════════════════════════════════════════
   CONFIRMACIÓN BLOQUEADA (sin invitación personal)
   ══════════════════════════════════════════════════════════════════════ */
.rsvp__bloqueado {
  max-width: 460px;
  margin-inline: auto;
}
.rsvp__bloqueado[hidden] { display: none; }

.rsvp__candado {
  width: 62px; height: 62px;
  margin: 0 auto 1.3rem;
  display: block;
  fill: none;
  stroke: var(--arena);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rsvp__aviso {
  color: var(--crema);
  font-size: 1.02rem;
  line-height: 1.7;
  margin: 0 0 1rem;
}
.rsvp__aviso--chico {
  font-size: .9rem;
  color: var(--arena);
  margin-bottom: 1.5rem;
}


/* ══════════════════════════════════════════════════════════════════════
   HORA DE CADA MOMENTO
   ══════════════════════════════════════════════════════════════════════ */
.evento__hora {
  font-family: var(--serif);
  font-size: clamp(2.1rem, 7vw, 2.8rem);
  font-weight: 400;
  line-height: 1;
  color: var(--dorado-txt);
  margin: 0 0 .5rem;
  font-variant-numeric: tabular-nums;
}


/* ══════════════════════════════════════════════════════════════════════
   EL LUGAR — uno solo para todo el día
   ══════════════════════════════════════════════════════════════════════ */
.lugar {
  background: var(--crema);
  border: 1px solid var(--arena);
  border-radius: var(--radio);
  padding: clamp(1.8rem, 5vw, 2.8rem) clamp(1.3rem, 4vw, 2.2rem);
  text-align: center;
}

.lugar__nombre {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.7rem, 5.5vw, 2.3rem);
  color: var(--olivo);
  margin: 0 0 .2rem;
  line-height: 1.2;
}

.lugar__recinto {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--tinta-suave);
  margin: 0 0 .9rem;
}

.lugar__direccion {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--tinta-suave);
  margin: 0 auto 1.8rem;
  max-width: 30ch;
}

.lugar__pregunta {
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--dorado-txt);
  margin: 0 0 1rem;
}

.lugar__botones {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  justify-content: center;
}

.btn--mapa {
  flex: 1 1 170px;
  max-width: 230px;
  padding: .95rem 1.2rem;
  font-size: .78rem;
}
.btn--waze {
  background: var(--olivo);
  color: var(--crema-cl);
  border-color: var(--olivo);
}
.btn--waze:hover { background: var(--olivo-osc); border-color: var(--olivo-osc); }

.btn--gmaps {
  background: transparent;
  color: var(--olivo);
  border-color: var(--olivo);
}
.btn--gmaps:hover { background: var(--olivo); color: var(--crema-cl); }

.btn--mapa .btn__ico { width: 18px; height: 18px; stroke-width: 1.5; }


/* ══════════════════════════════════════════════════════════════════════
   DRESS CODE (ventana emergente)
   ══════════════════════════════════════════════════════════════════════ */
.modal__caja--ancha { width: min(100%, 620px); }

.dress__etiqueta {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.35rem;
  color: var(--dorado-txt);
  text-align: center;
  margin: -.4rem 0 1.4rem !important;
}

/* ── Las siluetas ────────────────────────────────────────────────── */
.dress__figuras {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(1rem, 5vw, 2.4rem);
  padding: .6rem 0 1.6rem;
}

.dress__fig {
  width: clamp(94px, 26vw, 132px);
  height: auto;
}
.dress__oro {
  fill: #d8c07c;
  stroke: #8d7833;
  stroke-width: 4;
  stroke-linejoin: round;
}
.dress__verde {
  fill: #3d4f45;
  stroke: #26332c;
  stroke-width: 4;
  stroke-linejoin: round;
}
.dress__blanco  { fill: #fdfdfb; stroke: #26332c; stroke-width: 4; stroke-linejoin: round; }
.dress__oscuro  { fill: #26332c; stroke: #26332c; stroke-width: 3; stroke-linejoin: round; }
.dress__solapa  { fill: none; stroke: #26332c; stroke-width: 4; stroke-linejoin: round; }
.dress__hilo    { fill: none; stroke: #8d7833; stroke-width: 2.4; stroke-linecap: round; opacity: .55; }
.dress__hilo2   { fill: none; stroke: #26332c; stroke-width: 2.4; stroke-linecap: round; opacity: .5; }

.dress__imagen {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radio);
  margin: 0 auto 1.6rem;
}

/* ── Los dos grupos: lo que sí y lo que no ───────────────────────── */
.dress__grupo {
  border-top: 1px solid var(--arena);
  padding-top: 1.3rem;
  margin-top: 1.3rem;
}
.dress__grupo:first-of-type { margin-top: 0; }

.dress__titulo {
  font-size: .72rem !important;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--dorado-txt);
  text-align: center;
  margin: 0 0 1.2rem !important;
}

.dress__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem clamp(1rem, 5vw, 2rem);
}

.dress__quien {
  font-family: var(--serif);
  font-size: 1.25rem !important;
  font-weight: 500;
  color: var(--olivo);
  text-align: center;
  margin: 0 0 .8rem !important;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--arena);
}

.dress__lista {
  list-style: none;
  margin: 0 !important;
  padding: 0 !important;
  display: grid;
  gap: .8rem;
  text-align: center;
}
.dress__lista li { margin: 0 !important; line-height: 1.3; }

.dress__que {
  display: block;
  font-family: var(--serif);
  font-size: 1.16rem;
  font-weight: 500;
  color: var(--olivo);
}
.dress__detalle {
  display: block;
  font-size: .86rem;
  color: var(--tinta-suave);
  margin-top: .05rem;
}

/* El ✅ y el ❌ de los títulos */
.dress__marca {
  font-size: 1.15em;
  line-height: 1;
  margin-right: .3em;
  vertical-align: -.08em;
}

/* Colores sugeridos */
.dress__quien--colores {
  margin-top: 1.9rem !important;
  border-bottom: 0;
  padding-bottom: 0;
}
/* Dos por fila en celular y tres en pantallas grandes: los nombres largos
   ("Azul medianoche") entran en una sola línea y las filas quedan parejas */
.dress__colores {
  list-style: none;
  margin: 1rem 0 0 !important;
  padding: 0 !important;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.3rem .6rem;
}
@media (min-width: 520px) {
  .dress__colores { grid-template-columns: repeat(3, 1fr); }
}
.dress__color {
  margin: 0 !important;
  text-align: center;
  line-height: 1.25;
}
.dress__muestra {
  display: block;
  width: 54px;
  height: 54px;
  margin: 0 auto .5rem;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(70, 75, 46, .14), var(--sombra);
}
.dress__colorNom {
  display: block;
  font-size: .82rem;
  color: var(--tinta-suave);
}

/* El ❌ ya marca la diferencia; el color se queda dentro de la paleta */
.dress__grupo--no .dress__titulo { color: var(--olivo); }
.dress__evitar {
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.12rem !important;
  line-height: 1.6;
  color: var(--olivo);
  margin: 0 !important;
}

@media (max-width: 420px) {
  .dress__cols { grid-template-columns: 1fr; }
  .dress__quien { margin-top: .4rem !important; }
}