/* Demo de invitación digital. Todos los datos son ficticios. */

/* ===================== TOKENS ===================== */
:root{
  --olivo:        #6B6A3E;
  --olivo-medio:  #6F6D44;
  --olivo-tenue:  #B6B394;
  --tinta:        #4C4B30;
  --crema:        #FBFAF4;
  --crema-honda:  #F3F1E6;
  --papel:        #FFFFFF;
  --durazno:      #E3D3C0;
  --linea:        #D9D6C2;
  --alerta:       #9A4524;

  --franja-alto:  2.75rem;
  --paso: clamp(1.5rem, 5vw, 2.4rem);
  --col: 30rem;

  --sombra-papel: 0 1px 2px rgba(107,106,62,.06), 0 18px 40px -22px rgba(107,106,62,.35);
}

*,*::before,*::after{ box-sizing:border-box; }
[hidden]{ display:none !important; }
img{ max-width:100%; }

html{ -webkit-text-size-adjust:100%; overflow-x:hidden; scroll-behavior:smooth; scroll-padding-top:calc(var(--franja-alto) + 1rem); }

body{
  margin:0;
  padding-block:calc(var(--franja-alto) + clamp(1.6rem,7vw,3.4rem)) clamp(2.4rem,9vw,4.5rem);
  padding-inline:clamp(.7rem,4vw,2rem);
  background-color:var(--crema);
  color:var(--tinta);
  font-family:"Cormorant Garamond","Sitka Text",Georgia,"Times New Roman",serif;
  font-size:clamp(17px,1.9vw,19px);
  font-weight:400;
  line-height:1.62;
  overflow-x:hidden;
  position:relative;
}

/* Patrón floral en el margen de la hoja. */
body::before{
  content:"";
  position:fixed;
  inset:-5vmax;
  z-index:0;
  background-image:url("assets/floral.webp");
  background-size:min(120vw,760px) auto;
  background-repeat:repeat;
  background-position:center top;
  opacity:.75;
  pointer-events:none;
}

/* ===================== FRANJA DE LA DEMO ===================== */
.franja-demo{
  position:fixed;
  inset:0 0 auto 0;
  z-index:80;
  height:var(--franja-alto);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.8rem;
  padding-inline:clamp(.7rem,4vw,1.5rem);
  background:#1c1b14;
  color:#F3F1E6;
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:.82rem;
  line-height:1.2;
}
.franja-demo b{ font-weight:600; }
.franja-demo a{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding-inline:.7rem;
  color:#F3F1E6;
  border:1px solid #8a8870;
  border-radius:999px;
  text-decoration:none;
  white-space:nowrap;
}
.franja-demo a:hover{ background:#F3F1E6; color:#1c1b14; }
.franja-demo a:focus-visible{ outline:2px solid #F3F1E6; outline-offset:2px; }

/* ===================== TIPOGRAFÍA ===================== */
.script{
  font-family:"Ballet",cursive;
  font-weight:400;
  color:var(--olivo);
  line-height:.82;
}
.rubro{
  font-family:"Marcellus",Georgia,serif;
  text-transform:uppercase;
  letter-spacing:.26em;
  font-size:.7rem;
  color:var(--olivo-medio);
  margin:0;
}
h2.titulo{
  font-family:"Marcellus",Georgia,serif;
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:clamp(1.05rem,2.6vw,1.25rem);
  color:var(--olivo);
  margin:.35rem 0 0;
  text-wrap:balance;
}
p{ margin:0; }

/* ===================== HOJA ===================== */
.envoltura{
  position:relative;
  z-index:2;
  max-width:var(--col);
  margin-inline:auto;
  padding-inline:clamp(1.1rem,5vw,3rem);
  padding-block:0 2.4rem;
  background:var(--papel);
  box-shadow:var(--sombra-papel);
}

.envoltura section{ padding-block:var(--paso); position:relative; }
.envoltura section + section, .cierre{ border-top:1px solid var(--linea); }

.encabezado-seccion{
  text-align:center;
  margin-bottom:1.5rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.1rem;
}

.filete{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.7rem;
  color:var(--olivo-tenue);
}
.filete::before,.filete::after{
  content:"";
  height:1px;
  width:min(28%,5.5rem);
  background:linear-gradient(90deg,transparent,var(--linea));
}
.filete::after{ background:linear-gradient(90deg,var(--linea),transparent); }
.filete svg{ display:block; width:1.05rem; height:1.05rem; opacity:.85; }

.nota{
  margin-top:1.2rem;
  font-size:1rem;
  font-style:italic;
  color:var(--olivo-medio);
  text-align:center;
  max-width:30rem;
  margin-inline:auto;
}

/* ===================== PORTADA ===================== */
.portada{ padding-block:2.4rem 2.2rem; text-align:center; }

/* Arco ilustrado con degradados: sustituye al retrato de la invitación real. */
.arco{
  position:relative;
  width:min(100%,19rem);
  aspect-ratio:4/5;
  margin:0 auto 2.6rem;
}
.arco::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50% 50% 4px 4px / 12% 12% 4px 4px;
  background:
    radial-gradient(circle at 50% 30%, rgba(255,255,255,.85) 0 7%, transparent 8%),
    radial-gradient(ellipse at 50% 100%, var(--olivo-tenue) 0 38%, transparent 39%),
    linear-gradient(180deg, var(--durazno) 0%, var(--crema-honda) 60%, var(--olivo-tenue) 100%);
}
.arco::after{
  content:"";
  position:absolute;
  inset:-.75rem;
  border:1px solid var(--olivo-tenue);
  border-radius:50% 50% 4px 4px / 12% 12% 4px 4px;
  pointer-events:none;
}
.arco-foto{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:50% 50% 4px 4px / 12% 12% 4px 4px;
  box-shadow:var(--sombra-papel);
}
.foto-lugar{ margin:0 0 1.6rem; }
.foto-lugar img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:3/2;
  object-fit:cover;
  border-radius:50% 50% 4px 4px / 14% 14% 4px 4px;
}

.portada .intro{
  font-size:1rem;
  letter-spacing:.09em;
  color:var(--olivo-medio);
  line-height:1.5;
}
.nombres{
  margin:1.2rem 0 .3rem;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.nombres > *{ max-width:100%; }
.nombres .n1{ font-size:clamp(3.5rem,18vw,6.4rem); align-self:flex-start; }
.nombres .amp{ font-size:clamp(1.8rem,7.5vw,2.8rem); margin:-.04em 0 -.02em; color:var(--olivo-medio); }
.nombres .n2{ font-size:clamp(3.3rem,17vw,6.6rem); align-self:flex-end; }

.fecha{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:.5rem;
  margin-top:2rem;
}
.fecha .flanco{
  font-family:"Marcellus",Georgia,serif;
  text-transform:uppercase;
  letter-spacing:.2em;
  font-size:clamp(.78rem,2vw,.9rem);
  color:var(--olivo);
  padding-block:.45rem;
  border-top:1px solid var(--olivo-medio);
  border-bottom:1px solid var(--olivo-medio);
  white-space:nowrap;
}
.fecha .flanco small{ font-size:.62em; letter-spacing:.1em; }
.fecha .centro{ line-height:1.05; }
.fecha .mes,.fecha .anio{
  font-family:"Marcellus",Georgia,serif;
  letter-spacing:.18em;
  font-size:clamp(.78rem,1.8vw,.86rem);
  color:var(--olivo);
}
.fecha .dia{
  font-family:"Marcellus",Georgia,serif;
  font-size:clamp(2.5rem,7vw,3.2rem);
  color:var(--olivo);
}

.sede{ margin-top:2.2rem; }
.sede .nombre{
  font-family:"Marcellus",Georgia,serif;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:clamp(1.12rem,2.8vw,1.3rem);
  color:var(--olivo);
}
.sede .dir{
  margin-top:.5rem;
  font-size:1rem;
  color:var(--tinta);
  max-width:28rem;
  margin-inline:auto;
}

/* ===================== FRASE ===================== */
.frase-caja{ text-align:center; padding-block:.5rem; }
.frase-caja .comilla{
  font-family:"Ballet",cursive;
  font-size:2.6rem;
  color:var(--olivo-tenue);
  line-height:1;
  display:block;
  margin-bottom:.3rem;
}
.frase-caja .texto{
  font-size:clamp(1.2rem,3.2vw,1.45rem);
  font-style:italic;
  color:var(--olivo);
  line-height:1.5;
  text-wrap:balance;
  max-width:30rem;
  margin-inline:auto;
}

/* ===================== PASE ===================== */
.pase{
  background:var(--crema-honda);
  padding:1.8rem 1.2rem 1.6rem;
  text-align:center;
  border-top:2px solid var(--durazno);
}
.pase .para{ font-size:.85rem; letter-spacing:.14em; text-transform:uppercase; color:var(--olivo-medio); font-family:"Marcellus",Georgia,serif; }
.pase .invitado{
  font-family:"Ballet",cursive;
  font-size:clamp(2.2rem,11vw,3.4rem);
  color:var(--olivo);
  line-height:1.18;
  margin:.45rem 0 .15rem;
  overflow-wrap:break-word;
}
.pase .acompanantes{ font-size:1rem; font-style:italic; color:var(--olivo-medio); }

.datos-pase{ display:flex; justify-content:center; margin-top:1.4rem; }
.datos-pase .celda{ padding-inline:1.6rem; display:flex; flex-direction:column; gap:.15rem; }
.datos-pase .celda + .celda{ border-left:1px solid var(--linea); }
.datos-pase .cifra{
  font-family:"Marcellus",Georgia,serif;
  font-size:1.9rem;
  color:var(--olivo);
  line-height:1;
  font-variant-numeric:tabular-nums;
}
.datos-pase .etq{ font-size:.7rem; text-transform:uppercase; letter-spacing:.2em; color:var(--olivo-medio); font-family:"Marcellus",Georgia,serif; }

.dedicatoria{
  margin:1.6rem auto 0;
  max-width:26rem;
  text-align:center;
  font-size:clamp(1.1rem,3vw,1.25rem);
  font-style:italic;
  line-height:1.55;
  color:var(--olivo);
  text-wrap:balance;
}
.dedicatoria::before{
  content:"";
  display:block;
  width:2.2rem;
  height:1px;
  background:var(--durazno);
  margin:0 auto 1.1rem;
}

.urge-arriba{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.4rem;
  margin:1.8rem auto 0;
  max-width:26rem;
  padding:1.1rem 1.2rem;
  border:1px solid var(--durazno);
  background:var(--crema);
  text-align:center;
  text-decoration:none;
  color:inherit;
  transition:border-color .35s ease, background-color .35s ease;
}
.urge-arriba:hover{ border-color:var(--olivo-tenue); background:var(--crema-honda); }
.urge-arriba:focus-visible{ outline:2px solid var(--olivo); outline-offset:3px; }
.urge-etq{
  font-family:"Marcellus",Georgia,serif;
  text-transform:uppercase;
  letter-spacing:.2em;
  font-size:.7rem;
  color:var(--olivo-medio);
}
.urge-texto{ font-size:1rem; color:var(--tinta); text-wrap:balance; }
.urge-ir{
  font-family:"Marcellus",Georgia,serif;
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:.74rem;
  color:var(--olivo);
  margin-top:.2rem;
}

/* ===================== CUENTA REGRESIVA ===================== */
.reloj{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:.5rem;
  max-width:26rem;
  margin-inline:auto;
}
.reloj .unidad{ background:var(--crema-honda); padding:.9rem .2rem .7rem; text-align:center; }
.reloj .val{
  font-family:"Marcellus",Georgia,serif;
  font-size:clamp(1.7rem,4.6vw,2.1rem);
  color:var(--olivo);
  line-height:1;
  font-variant-numeric:tabular-nums;
  display:block;
}
.reloj .etq{ font-size:.66rem; text-transform:uppercase; letter-spacing:.18em; color:var(--olivo-medio); font-family:"Marcellus",Georgia,serif; }
.reloj-nota{ text-align:center; margin-top:.9rem; font-style:italic; color:var(--olivo-medio); font-size:1rem; }

/* ===================== ITINERARIO ===================== */
.linea-tiempo{ list-style:none; margin:0 auto; padding:0; max-width:26rem; }
.linea-tiempo li{
  display:grid;
  grid-template-columns:4.6rem 1px 1fr;
  gap:0 1rem;
  padding-block:.65rem;
}
.linea-tiempo .hora{
  font-family:"Marcellus",Georgia,serif;
  font-size:.98rem;
  color:var(--olivo);
  text-align:right;
  font-variant-numeric:tabular-nums;
  padding-top:.1rem;
}
.linea-tiempo .riel{ background:var(--linea); position:relative; }
.linea-tiempo .riel::before{
  content:"";
  position:absolute;
  left:50%;
  top:.55rem;
  width:7px; height:7px;
  margin-left:-3.5px;
  border-radius:50%;
  background:var(--olivo);
  border:1px solid var(--olivo);
}
.linea-tiempo li:first-child .riel{ background:linear-gradient(var(--papel) 0 .55rem, var(--linea) .55rem); }
.linea-tiempo li:last-child .riel{ background:linear-gradient(var(--linea) 0 .8rem, transparent .8rem); }
.linea-tiempo .que{ font-size:1.1rem; color:var(--olivo); }
.linea-tiempo .detalle{ font-size:.95rem; color:var(--olivo-medio); font-style:italic; }

/* ===================== MENÚ ===================== */
.menu{ display:flex; flex-direction:column; gap:1.2rem; text-align:center; }
.menu .tiempo{ font-size:.7rem; text-transform:uppercase; letter-spacing:.24em; color:var(--olivo-medio); font-family:"Marcellus",Georgia,serif; }
.menu .platillo{ font-size:1.2rem; color:var(--tinta); margin-top:.2rem; text-wrap:balance; }
.menu .guarnicion{ font-size:.98rem; font-style:italic; color:var(--olivo-medio); }

/* ===================== VESTIMENTA ===================== */
.vestimenta-valor{
  text-align:center;
  font-family:"Marcellus",Georgia,serif;
  text-transform:uppercase;
  letter-spacing:.2em;
  font-size:1.1rem;
  color:var(--olivo);
}

/* ===================== BOTONES ===================== */
.acciones{ display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; margin-top:1.4rem; }
.boton{
  font-family:"Marcellus",Georgia,serif;
  font-size:.8rem;
  text-transform:uppercase;
  letter-spacing:.17em;
  color:var(--olivo);
  background:transparent;
  border:1px solid var(--olivo-medio);
  min-height:44px;
  padding:.75rem 1.2rem;
  cursor:pointer;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  transition:background-color .35s ease, color .35s ease, border-color .35s ease;
}
.boton:hover,.boton:focus-visible{ background:var(--olivo); color:var(--crema); border-color:var(--olivo); }
.boton.primario{ background:var(--olivo); color:var(--crema); border-color:var(--olivo); }
.boton.primario:hover,.boton.primario:focus-visible{ background:var(--tinta); border-color:var(--tinta); }
.boton svg{ width:.95rem; height:.95rem; flex:none; }
:where(a,button,input,summary):focus-visible{ outline:2px solid var(--olivo); outline-offset:3px; }

/* ===================== REGALO ===================== */
.cuentas{ display:flex; flex-direction:column; gap:.55rem; max-width:26rem; margin:1.4rem auto 0; }
.cuenta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.8rem;
  border-bottom:1px solid var(--linea);
  padding-block:.6rem;
  text-align:left;
}
.cuenta:last-child{ border-bottom:0; }
.cuenta .etq{ font-size:.7rem; text-transform:uppercase; letter-spacing:.2em; color:var(--olivo-medio); font-family:"Marcellus",Georgia,serif; }
.cuenta .val{ font-size:1.05rem; color:var(--tinta); font-variant-numeric:tabular-nums; }
.copiar{
  font-family:"Marcellus",Georgia,serif;
  font-size:.7rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--olivo-medio);
  background:none;
  border:1px solid var(--linea);
  min-height:32px;
  padding:.4rem .75rem;
  cursor:pointer;
  flex:none;
  transition:color .3s ease,border-color .3s ease;
}
.copiar:hover{ color:var(--olivo); border-color:var(--olivo-tenue); }
.copiar[data-listo="1"]{ color:var(--olivo); border-color:var(--olivo); }

/* ===================== RSVP ===================== */
.rsvp{ background:var(--crema-honda); padding:2.1rem 1.2rem; text-align:center; }
.cuenta-limite{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.1rem;
  margin:0 auto 1.4rem;
  padding-bottom:1.3rem;
  border-bottom:1px solid var(--linea);
  max-width:24rem;
}
.cl-num{
  font-family:"Marcellus",Georgia,serif;
  font-size:clamp(3rem,13vw,4rem);
  line-height:1;
  color:var(--olivo);
  font-variant-numeric:tabular-nums;
}
.cl-etq{
  font-family:"Marcellus",Georgia,serif;
  text-transform:uppercase;
  letter-spacing:.2em;
  font-size:.72rem;
  color:var(--olivo-medio);
  margin-top:.3rem;
}
.cl-fecha{ font-size:.95rem; font-style:italic; color:var(--olivo-medio); margin-top:.5rem; }
.cuenta-limite.apura .cl-num,
.cuenta-limite.apura .cl-etq{ color:var(--alerta); }

.motivo{
  margin:0 auto;
  max-width:27rem;
  font-size:1rem;
  color:var(--tinta);
  text-align:center;
  text-wrap:balance;
}
.pases-fijos{
  margin:1.3rem auto 0;
  font-size:1.05rem;
  color:var(--olivo);
  border-top:1px solid var(--linea);
  border-bottom:1px solid var(--linea);
  padding-block:.85rem;
  max-width:24rem;
}
.pases-fijos b{ font-family:"Marcellus",Georgia,serif; font-weight:400; font-size:1.15em; }

.contador{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1.2rem;
  margin:1.5rem 0 .4rem;
}
.contador button{
  width:2.9rem;
  height:2.9rem;
  border:1px solid var(--olivo-medio);
  background:transparent;
  color:var(--olivo);
  font-size:1.4rem;
  font-family:"Cormorant Garamond",Georgia,serif;
  line-height:1;
  cursor:pointer;
  transition:background-color .3s ease, color .3s ease, opacity .3s ease;
}
.contador button:hover:not(:disabled){ background:var(--olivo); color:var(--crema); }
.contador button:disabled{ opacity:.35; cursor:default; }
.contador .n{
  font-family:"Marcellus",Georgia,serif;
  font-size:2.6rem;
  line-height:1;
  color:var(--olivo);
  min-width:2.4rem;
  font-variant-numeric:tabular-nums;
}
.contador-etq{
  font-family:"Marcellus",Georgia,serif;
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:.7rem;
  color:var(--olivo-medio);
  margin-top:1.2rem;
}
.no-puedo{
  display:inline-block;
  margin-top:1.1rem;
  min-height:24px;
  font-size:.95rem;
  color:var(--olivo-medio);
  text-decoration:underline;
  text-underline-offset:3px;
  background:none;border:none;cursor:pointer;
  font-family:inherit;
}
.no-puedo:hover{ color:var(--olivo); }

.mensaje-demo{
  margin:1.4rem auto 0;
  max-width:26rem;
  padding:1rem 1.1rem;
  border:1px dashed var(--olivo-medio);
  background:var(--papel);
  font-size:1.02rem;
  color:var(--tinta);
  text-wrap:balance;
}
.mensaje-demo b{ font-weight:600; color:var(--olivo); }

/* ===================== CIERRE ===================== */
.cierre{ text-align:center; padding-block:var(--paso) 1rem; }
.cierre .frase{
  font-family:"Ballet",cursive;
  font-size:clamp(2.1rem,10vw,3.2rem);
  color:var(--olivo);
  line-height:1.05;
}
.cierre .firma{ margin-top:1rem; font-size:1rem; color:var(--olivo-medio); font-style:italic; }
.cierre .aviso-demo{ margin-top:1.6rem; font-size:.85rem; color:var(--olivo-medio); }

/* ===================== SOBRE ===================== */
.sobre{
  position:fixed;
  inset:var(--franja-alto) 0 0 0;
  z-index:50;
  background:var(--crema);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:1.25rem;
  text-align:center;
  overflow:auto;
  transition:opacity .9s ease, visibility .9s;
}
.sobre::before{
  content:"";
  position:absolute;
  inset:-5vmax;
  background-image:url("assets/floral.webp");
  background-size:min(120vw,760px) auto;
  opacity:.55;
  pointer-events:none;
}
.sobre.cerrado{ opacity:0; visibility:hidden; pointer-events:none; }
.sobre .tarjeta{
  position:relative;
  background:var(--papel);
  box-shadow:var(--sombra-papel);
  padding:2.6rem 1.6rem 2.2rem;
  max-width:24rem;
  width:100%;
  animation:subir 1s cubic-bezier(.22,1,.36,1) both;
}
@keyframes subir{ from{ opacity:0; transform:translateY(22px); } to{ opacity:1; transform:none; } }
.sobre .lazo{ width:2.4rem; height:2.4rem; color:var(--olivo-tenue); margin-inline:auto; display:block; }
.sobre .para{ font-family:"Marcellus",Georgia,serif; text-transform:uppercase; letter-spacing:.22em; font-size:.7rem; color:var(--olivo-medio); margin-top:1.1rem; }
.sobre .quien{ font-family:"Ballet",cursive; font-size:clamp(2.2rem,11vw,3.1rem); color:var(--olivo); line-height:1.18; margin-top:.5rem; overflow-wrap:break-word; }
.sobre .pares{ font-size:1rem; font-style:italic; color:var(--olivo-medio); margin-top:.5rem; }
.sobre .quienes{ margin-top:1.8rem; font-family:"Ballet",cursive; font-size:2rem; color:var(--olivo-medio); line-height:1; }
.sobre .boton{ margin-top:1.6rem; }

/* ===================== REVELADO ===================== */
.js .revelar{ opacity:0; transform:translateY(16px); }
.js .revelar.visible{ opacity:1; transform:none; transition:opacity .9s ease, transform .9s cubic-bezier(.22,1,.36,1); }

/* ===================== ANCHOS ===================== */
@media (min-width:640px){
  :root{ --col:36rem; }
  .datos-pase .celda{ padding-inline:2.2rem; }
}
@media (min-width:1024px){
  :root{ --col:42rem; --paso:2.8rem; }
  .portada{ padding-block:3.4rem 3rem; }
}
@media (max-width:420px){
  .franja-demo{ font-size:.76rem; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .js .revelar{ opacity:1; transform:none; }
}