/* ============================================================
   EMILY GABRIELA · XV AÑOS
   Paleta western: negro, dorado, coral, crema
   ============================================================ */

:root{
  --negro:      #0d0b0a;
  --negro-2:    #1c1816;
  --oro:        #d4af37;
  --oro-claro:  #f0d98a;
  --oro-oscuro: #9a7b22;
  --coral:      #c8372d;
  --crema:      #f6efe4;
  --crema-2:    #e7dcc9;
  --texto:      #2a2320;

  --script: "Pinyon Script", cursive;
  --serif:  "Cormorant Garamond", Georgia, serif;
  --sans:   "Jost", system-ui, sans-serif;

  --max: 480px;
}

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

html,body{ margin:0; padding:0; }

html{ background:var(--negro); }

body{
  font-family:var(--sans);
  color:var(--texto);
  background:var(--negro);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

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

/* La invitación completa vive en una columna vertical centrada */
.portada,
.invitacion{
  width:100%;
  max-width:var(--max);
  margin-inline:auto;
  position:relative;
}


/* ============================================================
   PANTALLA 1 · PORTADA
   ============================================================ */

.portada{
  min-height:100svh;
  min-height:100dvh;
  overflow:hidden;
  background:var(--negro);
  display:flex;
  will-change:opacity, transform;
}

.portada__foto{
  position:absolute;
  inset:0;
  z-index:0;
}

.portada__foto img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:58% center;
  animation:acercar 18s ease-out forwards;
}

@keyframes acercar{
  from{ transform:scale(1.12); }
  to  { transform:scale(1); }
}

/* Velo: aclara arriba para el nombre, oscurece abajo para el sobre */
.portada__velo{
  position:absolute;
  inset:0;
  background:
    linear-gradient(to bottom,
      rgba(13,11,10,.42) 0%,
      rgba(13,11,10,.10) 22%,
      rgba(13,11,10,0)   40%,
      rgba(13,11,10,.35) 68%,
      rgba(13,11,10,.80) 100%);
}

.portada__contenido{
  position:relative;
  z-index:1;
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:
    calc(env(safe-area-inset-top) + 26px) 16px
    calc(env(safe-area-inset-bottom) + 2px);
}

/* ---- Nombre ---- */

.portada__titulo{
  text-align:center;
  animation:subir 1.1s .15s both cubic-bezier(.2,.7,.3,1);
}

.portada__ante{
  margin:0 0 2px;
  font-family:var(--sans);
  font-weight:300;
  font-size:.66rem;
  letter-spacing:.42em;
  text-indent:.42em;
  text-transform:uppercase;
  color:var(--crema);
  opacity:.9;
  text-shadow:0 1px 10px rgba(0,0,0,.6);
}

.nombre{
  margin:0;
  font-family:var(--script);
  font-weight:400;
  font-size:clamp(3.1rem, 15.5vw, 4.6rem);
  line-height:.98;
  color:var(--crema);
  text-shadow:
     0 2px 18px rgba(0,0,0,.55),
     0 0 36px rgba(212,175,55,.18);
}

/* ---- Sobre ---- */

.sobre-zona{
  margin-top:auto;          /* empuja todo el bloque hacia abajo */
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  animation:subir 1.1s .45s both cubic-bezier(.2,.7,.3,1);
}


.sobre{
  position:relative;
  display:block;
  width:min(96vw, 440px);
  /* El margen negativo sube el texto hacia la zona transparente del PNG,
     y como el bloque está anclado abajo, el sobre baja en pantalla */
  margin-bottom:clamp(-128px, -23vw, -74px);
  padding:0;
  border:0;
  background:none;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  animation:flotar 4.5s ease-in-out infinite;
  transition:transform .35s cubic-bezier(.2,.7,.3,1), filter .35s;
}

.sobre:hover{ transform:translateY(-4px) scale(1.02); }
.sobre:active{ transform:scale(.985); }

.sobre__img{
  width:100%;
  filter:drop-shadow(0 22px 34px rgba(0,0,0,.55));
}

@keyframes flotar{
  0%,100%{ transform:translateY(0); }
  50%    { transform:translateY(-9px); }
}

/* Destello que recorre el sello dorado */
.sobre__brillo{
  position:absolute;
  left:37%;
  top:20%;
  width:26%;
  aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,240,190,.85) 0%, rgba(255,215,120,0) 68%);
  mix-blend-mode:screen;
  opacity:0;
  pointer-events:none;
  animation:destello 3.6s ease-in-out infinite;
}

@keyframes destello{
  0%,72%,100%{ opacity:0; transform:scale(.7); }
  84%        { opacity:1; transform:scale(1.25); }
}

/* Flecha dibujada hacia el sello */
.sobre__flecha{
  position:absolute;
  left:30%;
  bottom:34%;
  width:32%;
  fill:none;
  stroke:var(--crema);
  stroke-width:3;
  stroke-linecap:round;
  stroke-linejoin:round;
  opacity:.9;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.6));
  pointer-events:none;
}

.sobre__flecha path{
  stroke-dasharray:120;
  stroke-dashoffset:120;
  animation:trazar 3.6s ease-in-out infinite;
}
.sobre__flecha path:nth-child(2){ animation-delay:.45s; }

@keyframes trazar{
  0%      { stroke-dashoffset:120; }
  22%,70% { stroke-dashoffset:0; }
  92%,100%{ stroke-dashoffset:120; }
}

.sobre__hint{
  align-self:flex-start;
  margin:0;
  font-family:var(--serif);
  font-style:italic;
  font-size:1.02rem;
  letter-spacing:.02em;
  color:var(--crema);
  text-shadow:0 1px 10px rgba(0,0,0,.7);
}

/* ---- Pases reservados ---- */

.pases{
  align-self:flex-start;
  display:flex;
  align-items:center;
  gap:12px;
  padding:9px 16px 9px 10px;
  border:1px solid rgba(246,239,228,.45);
  border-radius:3px;
  background:rgba(13,11,10,.42);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}

.pases__num{
  flex:none;
  min-width:34px;
  padding:4px 8px;
  border-right:1px solid rgba(246,239,228,.35);
  font-family:var(--serif);
  font-size:1.5rem;
  line-height:1;
  text-align:center;
  color:var(--oro-claro);
}

.pases__txt{
  font-family:var(--serif);
  font-size:.92rem;
  line-height:1.3;
  letter-spacing:.03em;
  color:var(--crema);
}

.pases__txt strong{
  font-weight:600;
  color:#fff;
}

@keyframes subir{
  from{ opacity:0; transform:translateY(26px); }
  to  { opacity:1; transform:translateY(0); }
}


/* ---- Apertura del sobre ---- */

.portada.abriendo .sobre{
  animation:none;
  transform:scale(1.14);
  opacity:0;
  transition:
    transform .52s cubic-bezier(.33,0,.2,1),
    opacity   .42s ease-out;
}

.portada.abriendo .sobre__hint,
.portada.abriendo .pases,
.portada.abriendo .portada__titulo{
  opacity:0;
  transform:translateY(-10px);
  transition:opacity .34s ease-out, transform .5s ease-out;
}

.portada.fuera{
  opacity:0;
  transform:scale(1.045);
  transition:
    opacity   .62s ease-in-out,
    transform .78s cubic-bezier(.33,0,.2,1);
  pointer-events:none;
}


/* ============================================================
   INVITACIÓN
   ============================================================ */

.invitacion{
  background:#fff;
}

.invitacion[hidden]{ display:none; }

/* Revelado al hacer scroll */
.reveal{
  opacity:0;
  transform:translateY(32px);
  transition:opacity .9s ease, transform 1s cubic-bezier(.2,.7,.3,1);
}
.reveal.visible{
  opacity:1;
  transform:none;
}


/* ============================================================
   SECCIÓN 2 · FOTO + NOMBRE + FECHA
   ============================================================ */

.hero2{
  position:relative;
  overflow:hidden;
  background:#fff;
}

.hero2__foto{
  width:100%;
  aspect-ratio:4 / 5;        /* la foto es 2:3, aquí se recorta más corta */
  height:auto;
  object-fit:cover;
  object-position:center 55%;
}

.hero2__velo{
  position:absolute;
  inset:0;
  background:linear-gradient(to bottom,
    rgba(13,11,10,.25) 0%,
    rgba(13,11,10,0)   28%,
    rgba(13,11,10,.32) 60%,
    rgba(13,11,10,.72) 85%,
    rgba(13,11,10,.80) 100%);
}

.hero2__texto{
  position:absolute;
  left:0; right:0;
  bottom:15%;              /* libra el sobre que se encima abajo */
  padding:0 18px;
  text-align:center;
  color:#fff;
}

.hero2__ante{
  margin:0 0 -4px;
  font-family:var(--sans);
  font-weight:300;
  font-size:.62rem;
  letter-spacing:.44em;
  text-indent:.44em;
  text-transform:uppercase;
  opacity:.92;
  text-shadow:0 1px 10px rgba(0,0,0,.75);
}

.hero2__nombre{
  margin:0;
  font-family:var(--script);
  font-weight:400;
  font-size:clamp(2.9rem, 14.5vw, 4.2rem);
  line-height:1.02;
  text-shadow:
    0 2px 16px rgba(0,0,0,.6),
    0 0 40px rgba(0,0,0,.35);
}

/* Regla con rombo */
.regla{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin:10px auto 8px;
  max-width:280px;
}

.regla__linea{
  flex:1;
  height:1px;
  background:linear-gradient(to right,
    transparent, rgba(255,255,255,.75), transparent);
}

.regla__rombo{
  flex:none;
  width:7px; height:7px;
  fill:rgba(255,255,255,.9);
}

.hero2__fecha{
  margin:0;
  font-family:var(--sans);
  font-weight:400;
  font-size:.74rem;
  letter-spacing:.24em;
  text-indent:.24em;
  text-transform:uppercase;
  text-shadow:0 1px 10px rgba(0,0,0,.8);
}


/* ============================================================
   SECCIÓN 3 · SOBRE + CARTA
   ============================================================ */

.bloque-carta{
  position:relative;
  z-index:3;
  margin-top:-11%;          /* sube y se encima un poco sobre la foto */
  padding:0 0 42px;
  background:transparent;   /* el blanco lo pone .invitacion */
}

.sobre2{
  position:relative;
  z-index:1;
  width:100%;
}

.sobre2__img{
  width:100%;
  filter:drop-shadow(0 14px 26px rgba(0,0,0,.6));
}

/* La carta sale del sobre: arranca donde termina la solapa */
.carta{
  position:relative;
  z-index:2;
  width:78%;
  margin:-30% auto 0;          /* se mete dentro del sobre */
  background:#fff;
  box-shadow:
    0  2px  6px rgba(60,44,30,.10),
    0 10px 22px rgba(60,44,30,.16),
    0 28px 56px rgba(60,44,30,.22);
  overflow:hidden;
}

.carta__top,
.carta__bot{
  width:100%;
  height:auto;
}

.carta__cuerpo{
  padding:0 clamp(16px, 7%, 32px) 2px;
  margin-top:-2%;
  text-align:center;
  color:var(--texto);
}

/* Mensaje de apertura */
.carta__mensaje{
  margin:0 0 20px;
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(.98rem, 4.1vw, 1.12rem);
  line-height:1.62;
  letter-spacing:.012em;
  color:#3a312b;
  text-wrap:balance;
}

/* Líneas en script: "En compañía de Dios y mi Madre", "Mis Padrinos" */
.carta__script{
  margin:0 0 6px;
  font-family:var(--script);
  font-weight:400;
  font-size:clamp(1.85rem, 8vw, 2.3rem);
  line-height:1.3;
  color:#2f2823;
}

.carta__script--chico{
  margin-top:26px;
  font-size:clamp(1.65rem, 7vw, 2.05rem);
}

/* Ramo separador */
.carta__adorno{
  width:clamp(118px, 42%, 168px);
  height:auto;
  margin:6px auto 10px;
}

/* Nombres de mamá y padrinos */
.carta__nombres{
  margin:0;
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(1.02rem, 4.4vw, 1.18rem);
  line-height:1.7;
  letter-spacing:.03em;
  color:#2f2823;
  text-wrap:balance;
}

.carta__amp{
  display:block;
  margin:1px 0;
  font-family:var(--serif);
  font-style:italic;
  font-weight:400;
  font-size:.92em;
  color:#8a7668;
}

/* La carta se desliza hacia abajo saliendo del sobre */
.carta.reveal{
  transform:translateY(-34px);
  transition:opacity .9s ease, transform 1.1s cubic-bezier(.2,.7,.3,1) .15s;
}
.carta.reveal.visible{
  transform:translateY(0);
}


/* ============================================================
   MÚSICA
   ============================================================ */

.musica{
  position:fixed;
  z-index:60;
  right:14px;
  bottom:calc(env(safe-area-inset-bottom) + 14px);
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid rgba(255,255,255,.3);
  border-radius:50%;
  background:rgba(18,14,12,.4);
  backdrop-filter:blur(10px) saturate(1.2);
  -webkit-backdrop-filter:blur(10px) saturate(1.2);
  cursor:pointer;
  opacity:.52;
  -webkit-tap-highlight-color:transparent;
  transition:opacity .3s ease, transform .3s cubic-bezier(.2,.7,.3,1);
  animation:asomar .7s ease both;
}

.musica[hidden]{ display:none; }

.musica:hover{ opacity:.95; transform:scale(1.06); }
.musica:active{ transform:scale(.94); }

.musica svg{
  grid-area:1 / 1;
  width:12px;
  height:12px;
  fill:rgba(255,255,255,.92);
}

/* Sonando -> se ofrece pausa. Pausada -> se ofrece play. */
.musica .musica__play { display:none; }
.musica .musica__pausa{ display:block; }

.musica.pausada .musica__play { display:block; }
.musica.pausada .musica__pausa{ display:none; }

.musica.pausada{ opacity:.8; }

@keyframes asomar{
  from{ opacity:0; transform:translateY(8px) scale(.9); }
  to  { opacity:.52; transform:none; }
}


/* ============================================================
   ACCESIBILIDAD
   ============================================================ */

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

/* Pantallas anchas: marco oscuro a los lados */
@media (min-width: 520px){
  body{
    background:
      radial-gradient(120% 90% at 50% 0%, #241e1a 0%, var(--negro) 70%);
  }
  .portada, .invitacion{
    box-shadow:0 0 60px rgba(0,0,0,.65);
  }
}


/* ============================================================
   SECCIÓN 4 · CUENTA REGRESIVA + CUÁNDO Y DÓNDE
   ============================================================ */

.noche{
  position:relative;
  overflow:hidden;
  padding:0 0 46px;
  background:
    radial-gradient(120% 70% at 50% 0%, #19120f 0%, var(--negro) 62%);
}

/* Esquineros florales */
.esquina{
  position:absolute;
  top:-2px;
  width:46%;
  max-width:210px;
  pointer-events:none;
  z-index:2;
}
.esquina--izq{ left:-2px; }
.esquina--der{ right:-2px; transform:scaleX(-1); }

.noche__dentro{
  position:relative;
  z-index:1;
  padding:0 20px;
  text-align:center;
}

/* "Ya sólo faltan..." */
.noche__ante{
  margin:0;
  padding-top:clamp(74px, 26vw, 128px);
  font-family:var(--script);
  font-size:clamp(1.9rem, 8.2vw, 2.45rem);
  line-height:1.2;
  color:var(--oro-claro);
}

/* Texto con veta dorada */
.noche__ante,
.noche__titulo{
  background:linear-gradient(180deg,
    #fbf0c4 0%, #e8cf84 34%, #c9a63f 58%, #f3e3a8 78%, #d8b65a 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* ---- Reloj ---- */

.reloj{
  margin:12px 0 0;
}

.reloj__fila{
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:4px;
}

.reloj__num{
  flex:0 0 clamp(52px, 17vw, 76px);
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(2.1rem, 9.6vw, 2.9rem);
  line-height:1.1;
  letter-spacing:.01em;
  font-variant-numeric:tabular-nums;
  color:var(--oro-claro);
  text-shadow:0 0 26px rgba(212,175,55,.3);
}

.reloj__sep{
  font-family:var(--serif);
  font-size:clamp(1.6rem, 7vw, 2.2rem);
  line-height:1;
  color:rgba(240,217,138,.7);
  transform:translateY(-.08em);
}

.reloj__etiquetas{
  margin-top:2px;
  gap:4px;
}

.reloj__etiquetas span{
  flex:0 0 clamp(52px, 17vw, 76px);
  font-family:var(--sans);
  font-weight:300;
  font-size:clamp(.52rem, 2.3vw, .62rem);
  letter-spacing:.16em;
  text-indent:.16em;
  text-transform:uppercase;
  color:rgba(246,239,228,.72);
}

/* Compensa el ancho de los dos puntos para alinear etiquetas y números */
.reloj__etiquetas span + span{ margin-left:calc(.55em + 4px); }

/* Regla dorada */
.noche__regla{
  display:block;
  width:min(76%, 300px);
  height:1px;
  margin:16px auto 0;
  background:linear-gradient(to right,
    transparent, rgba(212,175,55,.85) 22%, rgba(212,175,55,.85) 78%, transparent);
}

/* Guirnalda bajo el contador */
.noche__guirnalda{
  width:min(96%, 400px);
  height:auto;
  margin:-14px auto 0;
}

/* "Cuándo y Dónde" */
.noche__titulo{
  margin:14px 0 0;
  font-family:var(--script);
  font-weight:400;
  font-size:clamp(2.5rem, 11.5vw, 3.4rem);
  line-height:1.15;
  color:var(--oro-claro);
}

.noche__sub{
  margin:8px 0 0;
  font-family:var(--serif);
  font-size:clamp(.98rem, 4.2vw, 1.1rem);
  letter-spacing:.02em;
  color:var(--crema);
}


/* ---- Lugares ---- */

.lugar{
  margin-top:34px;
}

.lugar__icono{
  width:clamp(54px, 15.5vw, 70px);
  height:auto;
  margin:0 auto 10px;
}

.lugar__icono--copas{
  width:clamp(72px, 21vw, 98px);
}

.lugar__tipo{
  margin:0 0 2px;
  font-family:var(--sans);
  font-weight:300;
  font-size:.6rem;
  letter-spacing:.34em;
  text-indent:.34em;
  text-transform:uppercase;
  color:rgba(246,239,228,.68);
}

.lugar__nombre{
  margin:0;
  font-family:var(--script);
  font-weight:400;
  font-size:clamp(2.2rem, 10vw, 3rem);
  line-height:1.18;
  background:linear-gradient(180deg,
    #fbf0c4 0%, #e8cf84 34%, #c9a63f 58%, #f3e3a8 78%, #d8b65a 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}

.lugar__hora{
  margin:6px 0 0;
  font-family:var(--serif);
  font-size:clamp(1rem, 4.4vw, 1.14rem);
  letter-spacing:.14em;
  text-indent:.14em;
  color:var(--crema);
}

/* Botón Ver mapa */
.btn-mapa{
  display:inline-block;
  margin-top:14px;
  padding:9px 30px;
  border-radius:999px;
  background:linear-gradient(180deg, #ff6ea2 0%, #fb528c 52%, #e13d78 100%);
  box-shadow:
    0 6px 18px rgba(251,82,140,.34),
    inset 0 1px 0 rgba(255,255,255,.3);
  font-family:var(--sans);
  font-weight:500;
  font-size:.62rem;
  letter-spacing:.24em;
  text-indent:.24em;
  text-transform:uppercase;
  color:#fff;
  text-decoration:none;
  -webkit-tap-highlight-color:transparent;
  transition:transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s;
}

.btn-mapa:hover{
  transform:translateY(-2px);
  box-shadow:
    0 10px 24px rgba(251,82,140,.45),
    inset 0 1px 0 rgba(255,255,255,.35);
}

.btn-mapa:active{ transform:translateY(0) scale(.98); }


/* ============================================================
   SECCIÓN 5 · ITINERARIO
   ============================================================ */

.itinerario{
  padding:48px 22px 46px;
  background:#fff;
  text-align:center;
}

.itin__titulo{
  margin:0 0 34px;
  font-family:var(--script);
  font-weight:400;
  font-size:clamp(2.4rem, 11vw, 3.2rem);
  line-height:1.1;
  color:var(--coral);
}

/* Linea de tiempo */
.linea{
  position:relative;
  max-width:300px;
  margin:0 auto;
  padding:0 0 0 70px;
  list-style:none;
  text-align:left;
}

/* El hilo vertical */
.linea::before{
  content:"";
  position:absolute;
  left:27px;
  top:12px;
  bottom:12px;
  width:1px;
  background:linear-gradient(to bottom,
    transparent, rgba(168,130,47,.4) 12%, rgba(168,130,47,.4) 88%, transparent);
}

.linea__hito{
  position:relative;
  display:grid;
  grid-template-columns:1fr;
  padding:0 0 30px;
  min-height:56px;
}

.linea__hito:last-child{ padding-bottom:0; }

.linea__icono{
  position:absolute;
  left:-70px;
  top:-6px;
  width:55px;
  height:55px;
  display:grid;
  place-items:center;
  border:1px solid rgba(168,130,47,.32);
  border-radius:50%;
  background:#fff;
}

.linea__icono img{
  width:37px;
  height:37px;
  object-fit:contain;
}

.linea__hora{
  padding-top:4px;
  font-family:var(--serif);
  font-weight:600;
  font-size:1.14rem;
  line-height:1.2;
  letter-spacing:.03em;
  color:#8a6a1f;
}

.linea__que{
  font-family:var(--sans);
  font-weight:300;
  font-size:.64rem;
  letter-spacing:.3em;
  text-indent:.3em;
  text-transform:uppercase;
  color:#6b5c50;
}


/* ============================================================
   SECCIÓN 6 · MESA DE REGALOS
   ============================================================ */

.regalos{
  padding:50px 24px 46px;
  background:
    radial-gradient(120% 70% at 50% 0%, #19120f 0%, var(--negro) 62%);
  text-align:center;
}

.regalos__icono svg,
.regalos__sobre svg{
  width:38px; height:38px;
  margin:0 auto;
  fill:none;
  stroke:var(--oro-claro);
  stroke-width:1.3;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.regalos__sobre svg{
  width:30px; height:30px;
  stroke:rgba(240,217,138,.55);
}

.regalos__titulo{
  margin:14px 0 0;
  font-family:var(--script);
  font-weight:400;
  font-size:clamp(2.3rem, 10.6vw, 3.1rem);
  line-height:1.14;
  background:linear-gradient(180deg,
    #fbf0c4 0%, #e8cf84 34%, #c9a63f 58%, #f3e3a8 78%, #d8b65a 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}

.regalos__texto{
  max-width:330px;
  margin:14px auto 0;
  font-family:var(--serif);
  font-size:clamp(1rem, 4.3vw, 1.1rem);
  line-height:1.68;
  letter-spacing:.015em;
  color:var(--crema);
  text-wrap:balance;
}

.regalos__sobre{
  display:block;
  margin-top:22px;
}


/* ============================================================
   SECCIÓN 7 · CÓDIGO DE VESTIMENTA
   ============================================================ */

.vestimenta{
  padding:34px 18px 12px;
  background:#fff;
}

.vest__lamina{
  width:100%;
  height:auto;
  border-radius:3px;
  box-shadow:
    0  2px  6px rgba(60,44,30,.10),
    0 10px 24px rgba(60,44,30,.14);
}


/* ============================================================
   SECCIÓN 8 · CONFIRMAR ASISTENCIA
   ============================================================ */

.confirmar{
  padding:52px 18px 40px;
  background:#fff;
  text-align:center;
}

/* Tarjeta negra */
.card{
  position:relative;
  padding:clamp(76px, 25vw, 104px) 22px clamp(30px, 8vw, 40px);
  background:var(--negro);
}

/* El ramo se asoma por arriba de la tarjeta */
.card__ramo{
  position:absolute;
  left:50%;
  top:0;
  width:min(74%, 290px);
  height:auto;
  transform:translate(-50%, -46%);
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.35));
}

.card__titulo{
  margin:0;
  font-family:var(--script);
  font-weight:400;
  font-size:clamp(2.3rem, 10.6vw, 3.1rem);
  line-height:1.16;
  background:linear-gradient(180deg,
    #fbf0c4 0%, #e8cf84 34%, #c9a63f 58%, #f3e3a8 78%, #d8b65a 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}

.card__fecha{
  margin:10px 0 0;
  font-family:var(--serif);
  font-size:clamp(1rem, 4.4vw, 1.14rem);
  letter-spacing:.04em;
  color:var(--crema);
}

/* Botón de WhatsApp */
.btn-wa{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:20px;
  padding:11px 26px;
  border-radius:999px;
  background:linear-gradient(180deg, #ff6ea2 0%, #fb528c 52%, #e13d78 100%);
  box-shadow:
    0 6px 20px rgba(251,82,140,.38),
    inset 0 1px 0 rgba(255,255,255,.3);
  font-family:var(--sans);
  font-weight:500;
  font-size:.68rem;
  letter-spacing:.2em;
  text-indent:.2em;
  text-transform:uppercase;
  color:#fff;
  text-decoration:none;
  -webkit-tap-highlight-color:transparent;
  transition:transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s;
  animation:pulso 2.8s ease-in-out infinite;
}

.btn-wa__icono{
  flex:none;
  width:17px; height:17px;
  fill:#fff;
}

.btn-wa:hover{
  transform:translateY(-2px);
  box-shadow:
    0 11px 26px rgba(251,82,140,.5),
    inset 0 1px 0 rgba(255,255,255,.35);
}

.btn-wa:active{ transform:translateY(0) scale(.98); }

@keyframes pulso{
  0%,100%{ box-shadow:0 6px 20px rgba(251,82,140,.38), inset 0 1px 0 rgba(255,255,255,.3); }
  50%    { box-shadow:0 6px 28px rgba(251,82,140,.62), inset 0 1px 0 rgba(255,255,255,.3); }
}

/* Herradura con caballos */
.confirmar__herradura{
  width:min(72%, 290px);
  height:auto;
  margin:36px auto 0;
}


/* ============================================================
   SECCIÓN 9 · GALERÍA (baraja)
   ============================================================ */

.galeria{
  padding:14px 18px 54px;
  background:#fff;
  text-align:center;
}

.galeria__titulo{
  margin:0 0 clamp(26px, 9vw, 40px);
  font-family:var(--script);
  font-weight:400;
  font-size:clamp(2.4rem, 11vw, 3.2rem);
  line-height:1.1;
  color:var(--coral);
}

/* La baraja */
.pila{
  position:relative;
  width:min(76%, 310px);
  aspect-ratio:4 / 5;
  margin:0 auto;
  touch-action:pan-y;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  user-select:none;
}

.naipe{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border-radius:4px;
  background:#efe9e0;
  box-shadow:
    0  2px  6px rgba(60,44,30,.12),
    0 10px 24px rgba(60,44,30,.20),
    0 24px 48px rgba(60,44,30,.18);
  transform-origin:50% 100%;
  will-change:transform, opacity;
  transition:
    transform .62s cubic-bezier(.22,.68,.26,1),
    opacity   .45s ease;
}

/* Una foto llena la carta; dos se reparten mitad y mitad */
.naipe img{
  flex:1;
  min-height:0;
  width:100%;
  object-fit:cover;
  object-position:center 42%;
}

/* Fase de salida: se desliza fuera del montón */
.naipe.saliendo{
  transition:
    transform .32s cubic-bezier(.4,0,.7,.4),
    opacity   .32s ease;
}

.galeria__pie{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3px;
  margin:26px 0 0;
}

#galNum{
  font-family:var(--serif);
  font-size:1rem;
  letter-spacing:.12em;
  color:var(--texto);
}

.galeria__hint{
  font-family:var(--sans);
  font-weight:300;
  font-size:.58rem;
  letter-spacing:.26em;
  text-indent:.26em;
  text-transform:uppercase;
  color:#9c8d80;
}


/* ============================================================
   SECCIÓN 10 · DESPEDIDA
   ============================================================ */

.final{
  position:relative;
  overflow:hidden;
  padding:56px 22px 0;
  background:
    radial-gradient(120% 80% at 50% 100%, #19120f 0%, var(--negro) 64%);
  text-align:center;
}

.final__dentro{
  position:relative;
  z-index:1;
}

/* Guirnalda de cierre: ancho completo, pegada al borde */
.final__flores{
  position:relative;
  z-index:0;
  display:block;
  width:100%;
  height:auto;
  margin:28px 0 0;
}

.final__texto{
  margin:0;
  font-family:var(--serif);
  font-size:clamp(1.06rem, 4.6vw, 1.2rem);
  line-height:1.7;
  color:var(--crema);
}

.final__script{
  margin:16px 0 0;
  font-family:var(--script);
  font-weight:400;
  font-size:clamp(2.3rem, 10.6vw, 3.1rem);
  line-height:1.14;
  background:linear-gradient(180deg,
    #fbf0c4 0%, #e8cf84 34%, #c9a63f 58%, #f3e3a8 78%, #d8b65a 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}

.final__chico{
  margin:4px 0 0;
  font-family:var(--sans);
  font-weight:300;
  font-size:.66rem;
  letter-spacing:.34em;
  text-indent:.34em;
  text-transform:uppercase;
  color:rgba(246,239,228,.72);
}

.final__nombre{
  margin:30px 0 0;
  font-family:var(--script);
  font-size:clamp(1.9rem, 8.4vw, 2.4rem);
  line-height:1;
  color:var(--oro-claro);
  opacity:.85;
}