/* ==================================================================
   Camila & Mateo · Nuestra boda — "La orilla dorada" (cliente real)
   Diseño propio: boda boho chic en la playa, al atardecer, con Luna (su
   bulldog francés). Combina con su papelería: papel crema, impresión verde
   oliva, sobre color duna, sello de cera nude, verde agua del forro e
   íconos de línea.
   Tipografías: Allison (títulos manuscritos), Marcellus SC (nombres,
   rótulos y botones) y Sorts Mill Goudy (texto).
   Lenguaje: huellitas que caminan bajo cada título, una huellita por
   segundo donde anda el cursor, pétalos por cada clic o toque, olas entre
   secciones y el sol que baja por el itinerario.
   ================================================================== */

:root{
  --marfil:#FBF6EE;
  --champagne:#F4E9DA;
  --arena:#EADBC6;
  --duna:#D9C2A7;
  --nude:#DDB09A;
  --durazno:#F0B48F;
  --terracota:#B97F60;
  --terracota-osc:#96603F;
  --agua:#D5DBC7;
  --salvia:#B9BE9F;
  --oliva-claro:#A3A680;
  --oliva:#6E6B3C;
  --oliva-osc:#4F4D29;
  --tinta:#45432A;
  --tinta-suave:#7B785A;
  --ocaso:#5A3324;
  --sol:#FFD79A;
  --placa:rgba(251,246,238,.93);
  --script:'Allison','Mrs Saint Delafield','Snell Roundhand',cursive;
  --caps:'Marcellus SC','Marcellus','Cormorant SC','Georgia',serif;
  --serif:'Sorts Mill Goudy','Cormorant Garamond','Georgia','Times New Roman',serif;
  --pad:22px;
  --arriba:env(safe-area-inset-top,0px);
  --abajo:env(safe-area-inset-bottom,0px);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;background:#E9B08A}
body{
  background:var(--marfil);
  color:var(--tinta);
  font-family:var(--serif);
  font-size:19px;
  line-height:1.6;
  overflow-x:hidden;
  position:relative;              /* para la capa de la magia (15-oct) */
  -webkit-font-smoothing:antialiased;
}
/* LA CAPA DE LA MAGIA (15-oct): pétalos, corazón, huellitas y destellos viven aquí; recorta lo que se sale por los
   bordes para que la página no crezca a lo ancho ni a lo alto */
.magia{position:absolute;left:0;top:0;width:100%;height:100%;overflow:hidden;pointer-events:none;z-index:30}
body.cerrado{overflow:hidden;height:100%;background:#E9B08A}
img{max-width:100%;height:auto;display:block}
b,strong{font-weight:400}
h1,h2,h3,p,ol,ul,figure{margin:0;padding:0}
ol,ul{list-style:none}
[hidden]{display:none!important}
.defs{position:absolute;width:0;height:0;overflow:hidden}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
:focus-visible{outline:2px solid var(--oliva);outline-offset:3px}
.tarde :focus-visible,.oliva :focus-visible,.cierre :focus-visible{outline-color:var(--sol)}

.valle{position:relative;z-index:1;opacity:0;transition:opacity .7s ease}
body.abierto .valle{opacity:1}

/* ------------------------------------------------------------------
   MARCA DE AGUA · solo en la vista previa (clase "vista-previa" en <html>)
   ------------------------------------------------------------------ */
.marca-agua{display:none}
html.vista-previa .marca-agua{
  display:block;
  position:fixed;
  inset:0;
  z-index:200;
  pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='200'%3E%3Cg transform='rotate(-27 150 100)' font-family='Arial,Helvetica,sans-serif' font-weight='700' text-anchor='middle' fill='%23fff' fill-opacity='.34' stroke='%235A3324' stroke-opacity='.3' stroke-width='.7' paint-order='stroke'%3E%3Ctext x='150' y='96' font-size='17' letter-spacing='4'%3EVISTA PREVIA%3C/text%3E%3Ctext x='150' y='118' font-size='11' letter-spacing='5'%3ETARJETA VIVA%3C/text%3E%3C/g%3E%3C/svg%3E");
  background-size:300px 200px;
}

/* ------------------------------------------------------------------
   PÉTALOS QUE CAEN (secciones claras), HUELLITAS DEL CURSOR Y PÉTALOS
   DEL CLIC. Solo se mueven con su sección a la vista (.viva).
   ------------------------------------------------------------------ */
.petalos{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.petalo{
  position:absolute;
  top:-40px;
  left:var(--x,50%);
  width:var(--t,16px);
  height:var(--t,16px);
  color:var(--c,#F3C9B6);
  opacity:0;
  animation:caer-petalo var(--d,14s) linear var(--r,0s) infinite;
  animation-play-state:paused;
}
.petalo svg{display:block;width:100%;height:100%}
@keyframes caer-petalo{
  0%{transform:translate3d(0,0,0) rotate(var(--g0,0deg));opacity:0}
  10%{opacity:var(--o,.7)}
  50%{transform:translate3d(var(--x1,30px),calc(var(--alto,900px) * .5),0) rotate(calc(var(--g0,0deg) + 150deg))}
  88%{opacity:var(--o,.7)}
  100%{transform:translate3d(var(--x2,-20px),var(--alto,900px),0) rotate(calc(var(--g0,0deg) + 300deg));opacity:0}
}
.viva > .petalos .petalo{animation-play-state:running}
/* lo que deja el cursor y cada clic o toque (lo crea y lo borra orilla.js) */
.rastro{position:absolute;left:0;top:0;z-index:30;pointer-events:none;width:var(--t,26px);height:var(--t,26px);margin:calc(var(--t,26px) / -2) 0 0 calc(var(--t,26px) / -2);color:var(--c,#B97F60);opacity:0;will-change:transform,opacity}
.rastro svg{display:block;width:100%;height:100%}

/* ------------------------------------------------------------------
   PORTADA · la playa al atardecer (fotograma 0 del video)
   ------------------------------------------------------------------ */
.portada{position:fixed;inset:0;z-index:60;overflow:hidden;background:#E9B08A}
body.abierto .portada{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .6s ease,visibility 0s linear .6s}
.mundo{position:absolute;inset:0;visibility:hidden}
.portada.lista .mundo{visibility:visible}
.panel{position:absolute;inset:0;will-change:transform}
.panel__arte{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover}
.panel--fin{opacity:0}

.portada__bruma{
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
  background:
    linear-gradient(180deg,rgba(120,58,40,.5) 0%,rgba(140,70,46,.28) 12%,rgba(140,70,46,0) 26%),
    linear-gradient(0deg,rgba(90,51,36,.5) 0%,rgba(90,51,36,.22) 11%,rgba(90,51,36,0) 22%);
}

/* Luna vive: un aro de luz que late sobre ella y corazones que suben (su sitio lo pone orilla.js desde COORDS) */
.medusa-viva{position:absolute;left:0;top:0;z-index:4;width:0;height:0;pointer-events:none;visibility:hidden}
.portada.lista .medusa-viva{visibility:visible}
.medusa-viva__aro{
  position:absolute;
  left:calc(-150px * var(--k,1));
  top:calc(-150px * var(--k,1));
  width:calc(300px * var(--k,1));
  height:calc(300px * var(--k,1));
  border-radius:50%;
  border:2px solid rgba(255,244,222,.9);
  box-shadow:0 0 22px rgba(255,226,170,.8),inset 0 0 22px rgba(255,226,170,.5);
  animation:late 2.4s ease-out infinite;
}
@keyframes late{0%{transform:scale(.55);opacity:0}25%{opacity:.95}100%{transform:scale(1.16);opacity:0}}
.medusa-viva__cora{position:absolute;left:0;top:0;width:calc(26px * var(--k,1));height:calc(26px * var(--k,1));color:#FFF4E6;opacity:0;filter:drop-shadow(0 2px 6px rgba(150,70,50,.7));animation:sube-cora 3.6s ease-in infinite}
.medusa-viva__cora svg{display:block;width:100%;height:100%}
.medusa-viva__cora--1{margin:calc(-150px * var(--k,1)) 0 0 calc(-128px * var(--k,1))}
.medusa-viva__cora--2{margin:calc(-178px * var(--k,1)) 0 0 calc(96px * var(--k,1));animation-delay:-1.3s;color:#FFD9C9}
.medusa-viva__cora--3{margin:calc(-214px * var(--k,1)) 0 0 calc(-22px * var(--k,1));animation-delay:-2.4s}
@keyframes sube-cora{0%{transform:translateY(20px) scale(.4);opacity:0}25%{opacity:1}100%{transform:translateY(calc(-74px * var(--k,1))) scale(1.05);opacity:0}}
.chispas{position:absolute;inset:0;z-index:5;pointer-events:none}
.chispa{position:absolute;left:0;top:0;width:var(--s,14px);height:var(--s,14px);margin:calc(var(--s,14px) / -2) 0 0 calc(var(--s,14px) / -2);color:var(--c,#fff);opacity:0}
.chispa svg{display:block;width:100%;height:100%;filter:drop-shadow(0 0 6px var(--c,rgba(255,225,160,.95)))}
.chispa--suelta{position:absolute;z-index:30;pointer-events:none}
html.viajando .medusa-viva__aro,html.viajando .medusa-viva__cora,
body.abierto .medusa-viva__aro,body.abierto .medusa-viva__cora,body.abierto .portada__pista::before,body.abierto .portada__pista .pista__mano{animation-play-state:paused}

/* cabecera: en vertical, los nombres sobre el cielo; en horizontal, uno a cada lado del aro */
.portada__cabecera{
  position:absolute;
  left:0;
  right:0;
  top:0;
  z-index:6;
  height:var(--cielo,21vh);
  min-height:150px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:calc(var(--arriba) + 10px) 12px 0;
  text-align:center;
  pointer-events:none;
  visibility:hidden;
  color:#FFF8EC;
  text-shadow:0 2px 14px rgba(120,52,34,.75),0 0 3px rgba(120,52,34,.55);
}
.portada.lista .portada__cabecera{visibility:visible}
.portada__sobre{display:block;font-family:var(--script);font-size:clamp(40px,12.4vw,62px);line-height:.9;color:#FFF3DE}
.portada__nombres{display:block;margin-top:6px;font-family:var(--caps);font-size:clamp(23px,7.5vw,40px);line-height:1.1;letter-spacing:.09em;white-space:nowrap}
.pn--y{display:inline-block;margin:0 .32em;font-family:var(--serif);font-style:italic;font-size:.82em;letter-spacing:0;color:var(--sol)}
.portada__para{
  margin-top:8px;
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  max-width:calc(100vw - 40px);
  padding:6px 20px 6px;
  border-radius:14px;
  background:var(--placa);
  color:var(--tinta);
  text-shadow:none;
}
.portada__para small{font-family:var(--caps);font-size:10.5px;line-height:1.5;letter-spacing:.24em;color:var(--terracota-osc);margin-left:.24em}
.portada__para b{font-family:var(--serif);font-size:clamp(18px,5.4vw,24px);line-height:1.2;text-wrap:balance}
/* nombres largos (los dos de una pareja, o tres en una invitación): letra más chica y en dos renglones */
html.inv-largo .portada__para b{font-size:clamp(16px,4.7vw,21px)}
html.inv-largo .pase__nombre{font-size:clamp(18px,5vw,21px)}
html.invitado .portada__cabecera{justify-content:flex-start;height:auto;padding-top:calc(var(--arriba) + clamp(8px,1.6vh,20px))}
html.invitado .portada__sobre{font-size:clamp(34px,10vw,52px)}

html.horizontal .portada__cabecera{height:auto;min-height:0;display:block;padding:0}
html.horizontal .portada__sobre{position:absolute;left:0;right:0;top:calc(var(--arriba) + clamp(4px,1.4vh,18px));font-size:clamp(34px,min(4.6vw,8.6vh),76px)}
html.horizontal .portada__nombres{margin:0;position:absolute;left:0;right:0;top:var(--a-mid,24vh);height:0;font-size:clamp(28px,min(5vw,calc((var(--a-izq,36vw) - 40px) / 5.3)),96px);letter-spacing:.1em}
html.horizontal .pn{position:absolute;top:0;transform:translateY(-50%)}
html.horizontal .pn--a{right:calc(100% - var(--a-izq,36vw) + clamp(14px,2.4vw,44px))}
html.horizontal .pn--b{left:calc(var(--a-der,60vw) + clamp(14px,2.4vw,44px))}
html.horizontal .pn--y{display:none}
html.horizontal .portada__para{position:absolute;left:50%;top:calc(var(--arriba) + clamp(56px,11vh,110px));transform:translateX(-50%);flex-direction:row;gap:10px;align-items:baseline;white-space:nowrap}
html.horizontal.inv-largo .portada__para b{font-size:clamp(16px,1.9vw,23px)}
html.horizontal.invitado .portada__sobre{font-size:clamp(30px,min(4vw,7vh),60px)}

/* el toque: botón a pantalla completa; abajo, la fecha y el llamado con la manito */
.portada__tap{
  position:absolute;
  inset:0;
  z-index:7;
  width:100%;
  border:0;
  margin:0;
  background:transparent;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  padding:0 16px calc(var(--abajo) + clamp(12px,2.6vh,36px));
  font:inherit;
  color:inherit;
  -webkit-tap-highlight-color:transparent;
}
.portada__tap:focus-visible{outline:none}
.portada__fecha{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:2px 10px;
  max-width:100%;
  padding:7px 16px 7px;
  border-radius:999px;
  background:var(--placa);
  color:var(--tinta);
  font-family:var(--caps);
  font-size:clamp(12.5px,3.5vw,16px);
  letter-spacing:.08em;
  line-height:1.3;
}
.portada__sep{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--terracota)}
.portada__pista{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:52px;
  padding:0 26px 0 20px;
  border-radius:999px;
  border:1.5px solid var(--oliva);
  background:var(--oliva);
  color:#FFF8EC;
  font-family:var(--caps);
  font-size:14.5px;
  line-height:1.2;
  letter-spacing:.16em;
  transition:background-color .35s ease,color .35s ease,border-color .35s ease;
}
.portada__pista::before{
  content:'';
  position:absolute;
  inset:-7px;
  border-radius:999px;
  border:1.5px solid #FFF3DE;
  animation:anillo 2.4s ease-out infinite;
  pointer-events:none;
}
@keyframes anillo{0%{transform:scale(1);opacity:.9}70%,100%{transform:scale(1.08,1.3);opacity:0}}
.pista__mano{width:22px;height:22px;flex:0 0 auto;animation:toque 1.8s ease-in-out infinite}
@keyframes toque{0%,100%{transform:translateY(0) scale(1)}40%{transform:translateY(4px) scale(.88)}70%{transform:translateY(0) scale(1)}}
@media (hover:hover) and (pointer:fine){
  .portada__tap:hover .portada__pista,
  .portada__tap:focus-visible .portada__pista{background:var(--marfil);color:var(--oliva-osc);border-color:var(--marfil)}
}
/* en horizontal la fecha y el llamado van uno al lado del otro, bien al pie (Luna llega al 85 % del alto) */
html.horizontal .portada__tap{flex-direction:row;align-items:flex-end;justify-content:center;gap:14px;padding-bottom:calc(var(--abajo) + clamp(8px,1.8vh,22px))}
html.horizontal .portada__fecha{min-height:44px}
html.horizontal .portada__pista{min-height:44px}

.velo{
  position:absolute;
  inset:0;
  z-index:9;
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  background:radial-gradient(circle at 50% 40%,#FFF8EC 0%,#FFE2B8 44%,#F0B48F 100%);
}

/* ------------------------------------------------------------------
   EL RECORRIDO · video, su foto dentro del aro y las placas
   ------------------------------------------------------------------ */
.viaje{position:absolute;inset:0;z-index:4;opacity:0;visibility:hidden;pointer-events:none}
.viaje__video{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;background:#E9B08A;opacity:0}
/* la foto ocupa el disco del aro y sigue al video cuadro a cuadro; lleva puesta la forma exacta del disco (las
   flores le comen un lado): assets/mascara-*.png, recortada a la misma caja que mide la pista */
.viaje__foto{
  position:absolute;
  left:0;
  top:0;
  width:0;
  height:0;
  opacity:0;
  overflow:hidden;
  background:var(--champagne);
  -webkit-mask:url(assets/mascara-movil.png) center/100% 100% no-repeat;
  mask:url(assets/mascara-movil.png) center/100% 100% no-repeat;
}
html.horizontal .viaje__foto{-webkit-mask-image:url(assets/mascara-desktop.png);mask-image:url(assets/mascara-desktop.png)}
.viaje__foto img{width:100%;height:100%;max-width:none;object-fit:cover}
.viaje__foto::after{
  content:'';
  position:absolute;
  inset:0;
  z-index:2;
  background:radial-gradient(circle at 50% 46%,rgba(255,255,255,.98) 0%,rgba(255,236,205,.75) 52%,rgba(255,236,205,0) 90%);
  opacity:0;
  pointer-events:none;
}
.viaje__foto--luz::after{animation:destello-foto 1.6s ease-out 1}
@keyframes destello-foto{0%{opacity:1}100%{opacity:0}}

.viaje__texto,.viaje__final,html.horizontal .viaje__placa{
  background:var(--placa);
  box-shadow:inset 0 0 0 1px rgba(110,107,60,.45),0 8px 26px rgba(90,51,36,.22);
}
.viaje__texto{
  position:absolute;
  left:6%;
  right:6%;
  bottom:calc(var(--abajo) + 4.5%);
  z-index:2;
  margin:0;
  padding:14px 20px 13px;
  border-radius:18px;
  text-align:center;
  text-wrap:balance;
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(20px,5.6vw,26px);
  line-height:1.3;
  color:var(--tinta);
  opacity:0;
}
.viaje__final{
  position:absolute;
  left:6%;
  right:6%;
  bottom:calc(var(--abajo) + 2.6%);
  z-index:2;
  padding:13px 14px 12px;
  border-radius:18px;
  text-align:center;
  opacity:0;
}
.viaje__placa{position:relative;margin:0}
.viaje__nombre{display:block;font-family:var(--caps);font-size:clamp(22px,7vw,34px);line-height:1.15;letter-spacing:.08em;white-space:nowrap;color:var(--oliva-osc)}
.viaje__nombre i{font-family:var(--serif);font-style:italic;font-size:.82em;letter-spacing:0;color:var(--terracota)}
.viaje__invita{display:block;margin-top:3px;text-wrap:balance;font-family:var(--caps);font-size:clamp(12px,3.3vw,14px);line-height:1.6;letter-spacing:.16em;color:var(--tinta-suave)}
.viaje__invita b{color:var(--terracota-osc)}

html.horizontal .viaje__texto{
  left:0;
  right:0;
  width:fit-content;
  max-width:88vw;
  margin:0 auto;
  bottom:auto;
  top:calc(var(--arriba) + 5%);
  padding:14px 34px 13px;
  font-size:clamp(20px,2vw,32px);
}
html.horizontal .viaje__final{inset:0;padding:0;border-radius:0;background:none;box-shadow:none;--sep:clamp(70px,max(9vw,15vh),200px);--lado:calc(var(--m-left,38vw) - var(--sep) - 12px)}
html.horizontal .viaje__placa{
  position:absolute;
  top:var(--m-mid,40vh);
  transform:translateY(-50%);
  width:min(30vw,460px,var(--lado));
  padding:18px 20px 18px;
  border-radius:18px;
  text-align:center;
}
html.horizontal .viaje__placa--nombre{right:calc(100% - var(--m-left,38vw) + var(--sep))}
html.horizontal .viaje__placa--invita{left:calc(var(--m-right,62vw) + var(--sep))}
html.horizontal .viaje__nombre{white-space:normal;font-size:clamp(26px,min(3.4vw,calc((var(--lado) - 44px) / 5.2)),58px);line-height:1.2}
html.horizontal .viaje__nombre i{display:block;line-height:.9}
html.horizontal .viaje__invita{margin-top:0;font-size:clamp(12px,1vw,15px);line-height:1.9}
html.horizontal .viaje__invita b{display:block;font-family:var(--script);font-size:clamp(46px,4.2vw,76px);letter-spacing:0;line-height:.95;margin-top:2px}

/* ------------------------------------------------------------------
   BOTONES FIJOS · volver y música
   ------------------------------------------------------------------ */
.volver-fijo{
  position:fixed;
  left:calc(12px + env(safe-area-inset-left,0px));
  top:calc(var(--arriba) + 12px);
  z-index:40;
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:44px;
  padding:0 16px 0 10px;
  border:1px solid var(--oliva-claro);
  border-radius:999px;
  background:rgba(251,246,238,.95);
  color:var(--tinta);
  font:400 13px/1 var(--caps);
  letter-spacing:.16em;
  cursor:pointer;
  opacity:0;
  visibility:hidden;
  transition:opacity .5s ease,visibility 0s linear .5s,background-color .3s ease,color .3s ease;
}
.volver-fijo svg{width:18px;height:18px}
body.abierto .volver-fijo{opacity:1;visibility:visible;transition:opacity .5s ease .5s,visibility 0s,background-color .3s ease,color .3s ease}
.volver-fijo:hover,.volver-fijo:focus-visible{background:var(--oliva);color:#fff}
.musica-flotante{
  position:fixed;
  right:calc(14px + env(safe-area-inset-right,0px));
  bottom:calc(var(--abajo) + 16px);
  z-index:70;
  display:none;
  align-items:center;
  gap:8px;
  height:54px;
  padding:0 16px 0 6px;
  border:1px solid var(--duna);
  border-radius:999px;
  background:rgba(251,246,238,.95);
  color:var(--oliva);
  cursor:pointer;
  box-shadow:0 6px 18px rgba(90,51,36,.2);
}
html.musica .musica-flotante{display:inline-flex}
/* durante el recorrido no se ve (taparía las placas); en la portada, solo el sello */
html.viajando .musica-flotante{visibility:hidden}
body.cerrado .musica-flotante{padding:0 6px}
body.cerrado .musica-flotante__ondas{display:none}
.musica-flotante__sello{width:42px;display:flex;align-items:center}
.musica-flotante__sello img{width:100%;height:auto}
.musica-flotante--tocando .musica-flotante__sello{animation:gira-sello 9s linear infinite}
@keyframes gira-sello{to{transform:rotate(360deg)}}
.musica-flotante__ondas{display:inline-flex;align-items:flex-end;gap:3px;height:18px}
.musica-flotante__ondas i{width:3px;height:6px;border-radius:2px;background:currentColor}
.musica-flotante--tocando .musica-flotante__ondas i{animation:onda 1s ease-in-out infinite}
.musica-flotante--tocando .musica-flotante__ondas i:nth-child(2){animation-delay:-.3s}
.musica-flotante--tocando .musica-flotante__ondas i:nth-child(3){animation-delay:-.6s}
.musica-flotante--tocando .musica-flotante__ondas i:nth-child(4){animation-delay:-.15s}
@keyframes onda{0%,100%{height:5px}50%{height:18px}}
/* el reproductor de YouTube, escondido en su caja */
.yt-caja{position:absolute;left:-9999px;top:0;width:200px;height:120px;overflow:hidden;opacity:0;pointer-events:none}
.yt-caja iframe{position:absolute;left:0;top:0;width:100%;height:100%;max-width:none;border:0}
/* PLAN B de la música (9-oct): la caja, invisible, sobre los audífonos o el botón; el toque va al reproductor.
   orilla.js le pone sitio y tamaño. El botón flotante se muestra aunque nada haya sonado y dice "Activar música". */
.yt-caja--toque{position:fixed;z-index:71;opacity:.01;pointer-events:auto;border-radius:28px}
.musica-flotante__activar{display:none;font-weight:700;font-size:12px;line-height:1;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
html.musica-toca .musica-flotante{display:inline-flex;padding:0 18px 0 6px;animation:llama-musica 1.8s ease-out infinite}
html.musica-toca .musica-flotante__activar{display:inline}
html.musica-toca .musica-flotante__ondas{display:none}
/* llama la atención con un aro que se abre, sin moverse ni cambiar de tamaño (el reproductor va justo encima) */
@keyframes llama-musica{0%{box-shadow:0 6px 18px rgba(90,51,36,.2),0 0 0 0 rgba(110,107,60,.5)}70%,100%{box-shadow:0 6px 18px rgba(90,51,36,.2),0 0 0 12px rgba(110,107,60,0)}}

/* ------------------------------------------------------------------
   PIEZAS COMUNES · secciones, cabezas, huellitas, botones, olas
   ------------------------------------------------------------------ */
.valle > section{position:relative;padding:clamp(70px,11vw,116px) var(--pad);overflow:hidden}
.valle > section > *{position:relative;z-index:1}
.valle > section > .petalos,
.valle > section > .rincon{position:absolute;z-index:0}
/* la orilla: cada sección clara termina en una ola que monta sobre la siguiente */
.ola-borde{position:absolute!important;left:0;right:0;bottom:-1px;z-index:2!important;height:clamp(22px,4.4vw,46px);pointer-events:none;color:var(--sig,var(--marfil))}
.ola-borde svg{display:block;width:100%;height:100%}
.ola-borde path{fill:currentColor}

.cabeza{max-width:720px;margin:0 auto clamp(22px,4.5vw,36px);text-align:center}
.rotulo{font-family:var(--caps);font-size:clamp(12.5px,3.4vw,15px);line-height:1.5;letter-spacing:.24em;color:var(--oliva);margin-left:.24em;text-wrap:balance}
.rotulo--claro{color:#FFF1DC}
.titulo{font-family:var(--script);font-weight:400;font-size:clamp(66px,19vw,118px);line-height:.92;color:var(--terracota);margin-top:2px;text-wrap:balance}
.titulo--claro{color:#FFF6E6;text-shadow:0 2px 16px rgba(90,51,36,.5)}
.cabeza .rotulo,.cabeza .titulo{opacity:0;transform:translateY(18px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.cabeza .titulo{transition-delay:.12s}
.cabeza.vista .rotulo,.cabeza.vista .titulo{opacity:1;transform:none}
html.suave .cabeza .rotulo,html.suave .cabeza .titulo,html:not(.js) .cabeza .rotulo,html:not(.js) .cabeza .titulo{opacity:1;transform:none}

/* huellitas que caminan bajo el título: cinco, de izquierda a derecha, alternando el paso */
.huellas{display:flex;justify-content:center;align-items:center;gap:clamp(7px,2vw,12px);height:30px;margin-top:8px;color:var(--oliva-claro)}
.huellas--claro{color:#FFE9CC}
.huellas i{display:block;width:17px;height:17px;opacity:0;transform:translateY(var(--dy,0)) rotate(var(--g,90deg)) scale(.3)}
.huellas i svg{display:block;width:100%;height:100%}
.huellas i:nth-child(odd){--dy:-5px;--g:78deg}
.huellas i:nth-child(even){--dy:5px;--g:102deg}
.huellas.pisadas i{animation:pisar .5s cubic-bezier(.2,1.4,.4,1) forwards;animation-delay:calc(var(--i,0) * .16s + var(--r,.25s))}
@keyframes pisar{to{opacity:1;transform:translateY(var(--dy,0)) rotate(var(--g,90deg)) scale(1)}}
html.suave .huellas i{opacity:1;transform:translateY(var(--dy,0)) rotate(var(--g,90deg))}

.revela{opacity:0;transform:translateY(22px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.revela.vista{opacity:1;transform:none}
html.suave .revela,html:not(.js) .revela{opacity:1;transform:none}

.boton{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:52px;
  padding:0 28px;
  border-radius:999px;
  border:1.5px solid var(--oliva);
  background:transparent;
  color:var(--oliva-osc);
  font-family:var(--caps);
  font-size:14.5px;
  line-height:1.2;
  letter-spacing:.16em;
  text-decoration:none;
  cursor:pointer;
  transition:background-color .35s ease,color .35s ease,border-color .35s ease,transform .35s ease;
}
.boton svg{width:22px;height:22px;flex:0 0 auto}
.boton img{width:15px;height:auto;flex:0 0 auto;transition:filter .35s ease}
.boton--oliva{background:var(--oliva);color:#FFF8EC}
.boton--oliva img{filter:brightness(0) invert(1)}
.boton--claro{border-color:#FFF1DC;color:#FFF6E6}
.boton--wa{background:var(--marfil);border-color:var(--marfil);color:var(--oliva-osc)}
.boton--no{border-color:rgba(255,241,220,.8);color:#FFF6E6}
@media (hover:hover) and (pointer:fine){
  .boton:hover{background:var(--oliva);color:#FFF8EC;transform:translateY(-2px)}
  .boton--oliva:hover{background:var(--oliva-osc)}
  .boton--claro:hover,.boton--no:hover{background:#FFF6E6;color:var(--ocaso);border-color:#FFF6E6}
  .boton--wa:hover{background:var(--oliva);border-color:var(--oliva);color:#FFF8EC}
}

/* íconos de línea en los rincones (como en su papelería) */
.rincon{width:min(34vw,210px);opacity:.34;pointer-events:none}
.rincon--a{left:-5%;top:-1%;transform:rotate(-18deg)}
.rincon--b{right:-6%;top:1%;transform:rotate(12deg)}

/* secciones sobre el atardecer */
.tarde{color:#FFF6E6;background:var(--ocaso)}
.oliva{color:#FBF3E2;background:var(--oliva-osc)}

/* ------------------------------------------------------------------
   LOS NOVIOS · el aro con su foto, el monograma y sus padres
   ------------------------------------------------------------------ */
.novios{background:linear-gradient(180deg,#FFF3E2 0%,var(--marfil) 26%,var(--marfil) 100%)}
.novios__dentro{display:flex;flex-direction:column;align-items:center;gap:clamp(18px,4vw,30px);max-width:1080px;margin:0 auto}
/* el aro: la foto va DEBAJO del marco (un círculo en el hueco); las flores la pisan */
.aro{position:relative;width:min(92vw,470px);margin:0 auto;aspect-ratio:1100/1148}
.aro__marco{position:relative;z-index:2;width:100%;height:100%;filter:drop-shadow(0 16px 26px rgba(120,80,50,.25))}
.aro__foto{position:absolute;z-index:1;left:var(--fx,29%);top:var(--fy,16%);width:var(--fw,62%);height:var(--fh,66%);border-radius:50%;overflow:hidden;background:var(--champagne)}
.aro__foto img{width:100%;height:100%;object-fit:cover}
.novios__texto{display:flex;flex-direction:column;align-items:center;text-align:center;max-width:560px}
.mono{position:relative;width:clamp(104px,28vw,136px);aspect-ratio:1;margin-bottom:16px;color:var(--oliva)}
.mono__circulo{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.mono__circulo circle{stroke-dasharray:1 1;stroke-dashoffset:1;transition:stroke-dashoffset 1.6s cubic-bezier(.4,0,.2,1)}
.mono.vista .mono__circulo circle{stroke-dashoffset:0}
.mono__letras{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding-right:8%;font-family:var(--caps);font-size:clamp(38px,10.4vw,50px);line-height:1;color:var(--oliva-osc);opacity:0;transition:opacity 1s ease .7s}
.mono__letras i{font-family:var(--serif);font-style:italic;font-size:.5em;margin:0 .04em;color:var(--terracota)}
.mono.vista .mono__letras{opacity:1}
.mono__palmera{position:absolute;right:-17%;top:4%;width:56%;opacity:0;transform:rotate(18deg) scale(.6);transform-origin:50% 100%;transition:opacity .8s ease 1s,transform 1.1s cubic-bezier(.2,1.3,.4,1) 1s}
.mono__ola{position:absolute;left:-9%;bottom:10%;width:52%;opacity:0;transform:translateX(-14px);transition:opacity .8s ease 1.2s,transform 1s ease 1.2s}
.mono__anillos{position:absolute;right:2%;bottom:5%;width:30%;opacity:0;transform:scale(.4);transition:opacity .6s ease 1.5s,transform .8s cubic-bezier(.2,1.5,.4,1) 1.5s}
.mono.vista .mono__palmera{opacity:1;transform:none;animation:mecer 5s ease-in-out 2.2s infinite}
.mono.vista .mono__ola,.mono.vista .mono__anillos{opacity:1;transform:none}
@keyframes mecer{0%,100%{transform:rotate(0)}50%{transform:rotate(4deg)}}
html.suave .mono__circulo circle{stroke-dashoffset:0}
html.suave .mono__letras,html.suave .mono__palmera,html.suave .mono__ola,html.suave .mono__anillos{opacity:1;transform:none}
.novios__saludo{margin-bottom:12px;padding:8px 18px;border-radius:14px;background:var(--champagne);font-style:italic;font-size:18px;line-height:1.4;text-wrap:balance}
.novios__nombres{margin-top:8px;font-family:var(--caps);font-weight:400;font-size:clamp(36px,10.6vw,66px);line-height:1.08;letter-spacing:.06em;color:var(--oliva-osc)}
.novios__nombres span{display:block}
.novios__nombres i{display:block;font-family:var(--script);font-style:normal;font-size:1.25em;line-height:.62;letter-spacing:0;color:var(--terracota);margin:-.02em 0 -.1em}
.novios__invita{margin-top:10px;font-style:italic;font-size:clamp(19px,5.2vw,22px);line-height:1.45;text-wrap:balance}
.padres{display:flex;align-items:stretch;justify-content:center;gap:clamp(14px,4vw,30px);margin-top:20px}
.padres p{display:flex;flex-direction:column;font-size:clamp(17px,4.5vw,19px);line-height:1.5}
.padres__sep{display:block;width:1px;background:var(--duna)}

/* ------------------------------------------------------------------
   FECHA · sobre el bucle del mar al atardecer
   ------------------------------------------------------------------ */
.fecha{padding-top:clamp(80px,13vw,130px)!important;padding-bottom:clamp(80px,13vw,130px)!important;text-align:center}
.fecha__video{position:absolute!important;inset:0;z-index:0!important;width:100%;height:100%;object-fit:cover}
.fecha__velo{position:absolute!important;inset:0;z-index:0!important;background:linear-gradient(180deg,rgba(90,51,36,.66) 0%,rgba(90,51,36,.42) 38%,rgba(90,51,36,.46) 70%,rgba(70,38,26,.76) 100%)}
.fecha__dentro{max-width:760px;margin:0 auto}
.dia{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:0 clamp(14px,4vw,26px);max-width:520px;margin:0 auto}
.dia__sem,.dia__mes{font-family:var(--caps);font-size:clamp(14px,3.9vw,18px);line-height:1.35;letter-spacing:.18em}
.dia__sem{text-align:right;padding-right:clamp(14px,4vw,26px);border-right:1px solid rgba(255,241,220,.6)}
.dia__mes{text-align:left;padding-left:clamp(14px,4vw,26px);border-left:1px solid rgba(255,241,220,.6)}
.dia__num{font-family:var(--caps);font-size:clamp(84px,24vw,132px);line-height:.9;color:#FFF6E6;text-shadow:0 4px 24px rgba(90,51,36,.6)}
.dia__hora{grid-column:1 / -1;margin-top:14px;font-family:var(--caps);font-size:clamp(25px,7vw,34px);letter-spacing:.14em;line-height:1;color:#FFF6E6;text-shadow:0 2px 14px rgba(90,51,36,.7)}
.cuenta{display:flex;justify-content:center;gap:clamp(8px,2.4vw,16px);margin:22px auto 24px}
.cuenta__c{min-width:clamp(66px,19vw,92px);padding:12px 6px 10px;border-radius:16px;background:rgba(251,246,238,.16);box-shadow:inset 0 0 0 1px rgba(255,241,220,.5);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}
.cuenta__c b{display:block;font-family:var(--caps);font-size:clamp(28px,8vw,40px);line-height:1;font-variant-numeric:tabular-nums}
.cuenta__c span{display:block;margin-top:5px;font-family:var(--caps);font-size:12px;letter-spacing:.18em;color:#FFE9CC}
.cuenta__fin{margin:20px 0 22px;font-family:var(--script);font-size:54px;line-height:1;color:var(--sol)}

/* ------------------------------------------------------------------
   LUGAR · la tarjeta entera lleva a Google Maps
   ------------------------------------------------------------------ */
.lugar-s{background:var(--champagne)}
.lugar{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  max-width:560px;
  margin:0 auto;
  padding:clamp(30px,7vw,44px) clamp(20px,5vw,40px) clamp(28px,6vw,40px);
  border-radius:26px;
  background:var(--marfil);
  box-shadow:0 14px 40px rgba(150,96,63,.16),inset 0 0 0 1px rgba(163,166,128,.5);
  color:var(--tinta);
  text-align:center;
  text-decoration:none;
  transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s ease;
}
.lugar__palmera{width:clamp(74px,20vw,96px);margin-bottom:8px;transform-origin:50% 100%}
.viva .lugar__palmera{animation:mecer 5s ease-in-out infinite}
.lugar__nombre{font-family:var(--caps);font-size:clamp(24px,6.8vw,34px);line-height:1.2;letter-spacing:.06em;color:var(--oliva-osc)}
.lugar__playa{font-family:var(--script);font-size:clamp(50px,14vw,72px);line-height:.95;color:var(--terracota);margin-top:2px}
.lugar__ola{width:120px;height:12px;margin:10px 0 12px;color:var(--oliva-claro)}
.lugar__dir{font-size:clamp(18px,4.8vw,20px);line-height:1.5}
.lugar__hora{margin-top:10px;font-family:var(--caps);font-size:clamp(13px,3.6vw,15px);letter-spacing:.14em;color:var(--tinta-suave)}
.lugar__hora b{color:var(--oliva-osc)}
.lugar__boton{margin-top:20px}
@media (hover:hover) and (pointer:fine){
  .lugar:hover{transform:translateY(-5px);box-shadow:0 22px 50px rgba(150,96,63,.24),inset 0 0 0 1px rgba(110,107,60,.7)}
  .lugar:hover .lugar__boton{background:var(--oliva-osc)}
}

/* ------------------------------------------------------------------
   NUESTRA HISTORIA · una línea que se dibuja con el scroll
   ------------------------------------------------------------------ */
.historia{background:var(--marfil)}
.linea{position:relative;max-width:640px;margin:0 auto;padding-left:0}
.linea__hilo{position:absolute;left:27px;top:10px;bottom:10px;width:2px;border-radius:2px;background:rgba(163,166,128,.3);overflow:hidden}
.linea__hilo i{display:block;width:100%;height:100%;background:var(--oliva);transform-origin:50% 0;transform:scaleY(var(--p,0))}
.momento{position:relative;display:flex;gap:18px;align-items:flex-start;padding:0 0 clamp(26px,6vw,38px)}
.momento:last-child{padding-bottom:0}
.momento__ico{position:relative;z-index:1;flex:0 0 56px;width:56px;height:56px;border-radius:50%;background:var(--marfil);box-shadow:inset 0 0 0 1.5px var(--oliva-claro);display:flex;align-items:center;justify-content:center;transform:scale(.4);opacity:0;transition:transform .7s cubic-bezier(.2,1.5,.4,1),opacity .5s ease,background-color .5s ease}
.momento__ico img{width:62%;max-height:62%;object-fit:contain}
.momento__txt{opacity:0;transform:translateX(18px);transition:opacity .8s ease .12s,transform .8s cubic-bezier(.2,.7,.2,1) .12s}
.momento.vista .momento__ico{transform:none;opacity:1;background:var(--agua)}
.momento.vista .momento__txt{opacity:1;transform:none}
html.suave .momento__ico,html.suave .momento__txt{opacity:1;transform:none}
.momento__fecha{display:block;font-family:var(--caps);font-size:13px;letter-spacing:.2em;color:var(--terracota-osc)}
.momento h3{font-family:var(--script);font-weight:400;font-size:clamp(34px,9.8vw,46px);line-height:.88;color:var(--oliva-osc);margin:5px 0 7px;text-wrap:balance}
.momento p{font-size:clamp(17.5px,4.6vw,19px);line-height:1.55}
.historia__cierre{max-width:560px;margin:clamp(30px,7vw,46px) auto 0;text-align:center;font-style:italic;font-size:clamp(19px,5.2vw,22px);line-height:1.5;color:var(--terracota-osc);text-wrap:balance}

/* ------------------------------------------------------------------
   FRANJA · su foto a lo ancho con la frase de su tarjeta
   ------------------------------------------------------------------ */
.franja{padding:0!important;height:clamp(420px,74vh,720px);display:flex;align-items:flex-end;justify-content:center;background:var(--ocaso)}
.franja__foto{position:absolute!important;left:0;top:-8%;z-index:0!important;width:100%;height:116%;max-width:none;object-fit:cover;object-position:73% 50%;will-change:transform}
.franja__velo{position:absolute!important;inset:0;z-index:0!important;background:linear-gradient(180deg,rgba(90,51,36,.12) 0%,rgba(90,51,36,0) 40%,rgba(70,38,26,.72) 100%)}
.franja__frase{padding:0 22px clamp(34px,7vw,60px);text-align:center;font-family:var(--script);font-size:clamp(46px,12.6vw,84px);line-height:.95;color:#FFF6E6;text-shadow:0 2px 18px rgba(70,38,26,.8);text-wrap:balance;opacity:0;transform:translateY(24px);transition:opacity 1.2s ease,transform 1.2s cubic-bezier(.2,.7,.2,1)}
.franja__frase.vista{opacity:1;transform:none}
html.suave .franja__frase{opacity:1;transform:none}

/* ------------------------------------------------------------------
   MEDUSA · el paseo (cruza con el scroll dejando huellitas) y su sección
   ------------------------------------------------------------------ */
.medusa{background:var(--agua);padding-top:0!important;text-align:center}
.paseo{position:relative;height:clamp(130px,30vw,190px);margin:0 calc(var(--pad) * -1) clamp(18px,4vw,30px);overflow:hidden}
.paseo__huellas{position:absolute;left:0;right:0;bottom:16px;height:26px}
.paseo__huellas i{position:absolute;bottom:var(--b,0px);width:17px;height:17px;color:var(--oliva);opacity:0;transform:rotate(var(--g,90deg)) scale(.5);transition:opacity .5s ease,transform .5s cubic-bezier(.2,1.4,.4,1)}
.paseo__huellas i svg{display:block;width:100%;height:100%}
.paseo__huellas i.pisada{opacity:.55;transform:rotate(var(--g,90deg)) scale(1)}
.paseo__perra{position:absolute;left:0;bottom:22px;width:clamp(120px,30vw,180px);height:auto;transform:translate3d(-120%,0,0);will-change:transform}
.paseo__perra.anda{animation:trote .42s ease-in-out infinite alternate}
@keyframes trote{from{margin-bottom:0}to{margin-bottom:7px}}
.medusa__motivos{position:absolute!important;inset:0;z-index:0!important;pointer-events:none;opacity:.5}
.medusa__motivos img{position:absolute;width:clamp(54px,13vw,96px);height:auto}
.medusa__motivos img:nth-child(1){left:3%;top:25%}
.medusa__motivos img:nth-child(2){right:3%;top:29%;transform:rotate(14deg)}
.medusa__motivos img:nth-child(3){left:3%;top:45%;transform:rotate(-8deg)}
.medusa__motivos img:nth-child(4){right:5%;top:49%;width:clamp(40px,9vw,66px)}
.medusa__motivos img:nth-child(5){left:5%;top:63%;width:clamp(40px,9vw,66px)}
.medusa__motivos img:nth-child(6){right:3%;top:64%;width:clamp(48px,11vw,80px)}
.medusa__motivos img:nth-child(7),.medusa__motivos img:nth-child(8){display:none}
.mimo{position:relative;display:block;width:min(64vw,330px);margin:0 auto;padding:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.mimo__halo{position:absolute;left:50%;top:54%;width:112%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(251,246,238,.95) 0%,rgba(251,246,238,.6) 44%,rgba(251,246,238,0) 70%)}
.mimo__img{position:relative;width:100%;height:auto;filter:drop-shadow(0 14px 16px rgba(79,77,41,.28));transform-origin:50% 96%}
.viva .mimo__img{animation:respira 3.4s ease-in-out infinite}
@keyframes respira{0%,100%{transform:scale(1)}50%{transform:scale(1.022,1.012)}}
.medusa__guia,.medusa__cuenta{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:14px;font-family:var(--caps);font-size:13.5px;letter-spacing:.16em;color:var(--oliva-osc)}
.medusa__guia svg{width:20px;height:20px;animation:toque 1.8s ease-in-out infinite}
.medusa__cuenta b{font-size:1.5em;color:var(--terracota-osc)}
.medusa__texto{max-width:560px;margin:16px auto 0;font-size:clamp(18.5px,5vw,21px);line-height:1.55;text-wrap:balance}

/* ------------------------------------------------------------------
   ITINERARIO · el sol baja por la línea y enciende cada momento
   ------------------------------------------------------------------ */
.itinerario{background:linear-gradient(180deg,var(--marfil) 0%,#FFF1DE 62%,#FCE3C6 100%)}
.ruta{position:relative;max-width:620px;margin:0 auto}
.ruta__svg{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.ruta__linea{stroke:rgba(185,127,96,.4);stroke-width:2;stroke-dasharray:2 9;stroke-linecap:round}
.ruta__hecho{stroke:var(--terracota);stroke-width:2.4;stroke-linecap:round}
.ruta__sol{position:absolute;left:0;top:0;z-index:2;width:0;height:0;pointer-events:none}
.ruta__sol i{position:absolute;left:-19px;top:-19px;width:38px;height:38px;border-radius:50%;background:radial-gradient(circle,#FFF4D8 0%,#FFD487 46%,#F3A568 100%);box-shadow:0 0 0 7px rgba(255,212,135,.3),0 0 26px 10px rgba(255,196,120,.55)}
.pasos{position:relative;z-index:1;display:flex;flex-direction:column;gap:clamp(24px,6vw,36px)}
.paso{display:flex;align-items:center;gap:16px;padding-left:clamp(40px,10.5vw,84px)}
.paso:nth-child(even){padding-left:clamp(58px,15.5vw,128px)}
.paso__ico{flex:0 0 66px;width:66px;height:66px;border-radius:50%;background:var(--marfil);box-shadow:inset 0 0 0 1.5px var(--duna);display:flex;align-items:center;justify-content:center;transition:background-color .6s ease,box-shadow .6s ease,transform .6s cubic-bezier(.2,1.5,.4,1)}
.paso__ico img{width:58%;max-height:58%;object-fit:contain;opacity:.55;transition:opacity .6s ease}
.paso__txt{opacity:.45;transition:opacity .6s ease}
.paso.dado .paso__ico{background:#FFE3BC;box-shadow:inset 0 0 0 1.5px var(--terracota),0 0 22px rgba(255,196,120,.7);transform:scale(1.07)}
.paso.dado .paso__ico img,.paso.dado .paso__txt{opacity:1}
html.suave .paso__ico img,html.suave .paso__txt{opacity:1}
.paso__hora{display:block;font-family:var(--caps);font-size:14px;letter-spacing:.18em;color:var(--terracota-osc)}
.paso h3{font-family:var(--script);font-weight:400;font-size:clamp(31px,9.2vw,44px);line-height:.88;color:var(--oliva-osc);margin:4px 0 5px;text-wrap:balance}
.paso p{font-size:clamp(17px,4.5vw,18.5px);line-height:1.45}
.itinerario__nota{max-width:520px;margin:clamp(46px,11vw,60px) auto 0;text-align:center;font-style:italic;font-size:clamp(16.5px,4.4vw,18px);line-height:1.5;color:var(--tinta-suave);text-wrap:balance}
.itinerario__nota b{font-style:normal;font-weight:400;font-family:var(--caps);font-size:.84em;letter-spacing:.14em;color:var(--terracota-osc)}

/* ------------------------------------------------------------------
   GALERÍA · sus fotos tal cual. En celular, una fila que se desliza; en
   pantallas anchas, una rejilla. Al tocar, el visor.
   ------------------------------------------------------------------ */
.galeria{padding-left:0!important;padding-right:0!important}
.galeria .cabeza{padding:0 var(--pad)}
.fotos{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px var(--pad) 16px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.fotos::-webkit-scrollbar{display:none}
.foto{flex:0 0 86%;scroll-snap-align:center;padding:0;border:0;border-radius:16px;overflow:hidden;background:#3C3A1E;cursor:zoom-in;aspect-ratio:16/9;box-shadow:0 12px 30px rgba(20,20,8,.35);opacity:0;transform:translateY(26px) scale(.96);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.foto.vista{opacity:1;transform:none}
html.suave .foto{opacity:1;transform:none}
.foto img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.fotos__guia{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:6px;font-family:var(--caps);font-size:12.5px;letter-spacing:.16em;color:#E9E2C4;text-align:center;padding:0 var(--pad)}
.fotos__puntos{display:flex;gap:7px}
.fotos__puntos i{width:7px;height:7px;border-radius:50%;background:rgba(251,243,226,.35);transition:background-color .3s ease,transform .3s ease}
.fotos__puntos i.activo{background:var(--sol);transform:scale(1.35)}
@media (hover:hover) and (pointer:fine){.foto:hover img{transform:scale(1.05)}}

.visor{position:fixed;inset:0;z-index:150;display:flex;align-items:center;justify-content:center;background:rgba(30,26,14,.94);opacity:0;transition:opacity .35s ease}
.visor.abierto{opacity:1}
.visor__img{max-width:min(96vw,1500px);max-height:84vh;width:auto;height:auto;border-radius:10px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.visor__x,.visor__flecha{position:absolute;z-index:2;display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;border:1px solid rgba(251,243,226,.5);background:rgba(30,26,14,.6);color:#FBF3E2;cursor:pointer;transition:background-color .3s ease,color .3s ease}
.visor__x svg,.visor__flecha svg{width:22px;height:22px}
.visor__x{right:14px;top:calc(var(--arriba) + 14px)}
.visor__flecha--a{left:10px;bottom:calc(var(--abajo) + 18px)}
.visor__flecha--b{right:10px;bottom:calc(var(--abajo) + 18px)}
.visor__n{position:absolute;left:0;right:0;bottom:calc(var(--abajo) + 30px);text-align:center;font-family:var(--caps);font-size:14px;letter-spacing:.2em;color:#E9E2C4;pointer-events:none}
@media (hover:hover) and (pointer:fine){.visor__x:hover,.visor__flecha:hover{background:#FBF3E2;color:var(--oliva-osc)}}

/* ------------------------------------------------------------------
   VESTIMENTA · sus dos paletas, como pinceladas
   ------------------------------------------------------------------ */
.vestimenta{background:var(--marfil)}
.vestimenta__intro{max-width:620px;margin:0 auto clamp(22px,5vw,34px);text-align:center;font-size:clamp(18px,4.8vw,20px);line-height:1.55;text-wrap:balance}
.paletas{display:grid;gap:clamp(18px,4vw,28px);max-width:1040px;margin:0 auto}
.paleta{padding:clamp(22px,5vw,32px) clamp(14px,3.6vw,28px) clamp(20px,4.4vw,28px);border-radius:24px;background:#FFFDF8;box-shadow:inset 0 0 0 1px rgba(217,194,167,.7),0 10px 30px rgba(150,96,63,.08);text-align:center}
.paleta__titulo{font-family:var(--script);font-weight:400;font-size:clamp(52px,14vw,68px);line-height:.9;color:var(--terracota)}
.paleta__sub{font-family:var(--caps);font-size:13px;letter-spacing:.18em;color:var(--tinta-suave);margin:2px 0 18px}
.tonos{display:grid;grid-template-columns:repeat(4,1fr);gap:14px 4px}
.tonos li{display:flex;flex-direction:column;align-items:center;gap:6px}
.tonos i{display:block;width:clamp(46px,13vw,62px);aspect-ratio:1;border-radius:47% 53% 50% 50% / 52% 48% 52% 48%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(110,107,60,.14),inset 0 -6px 12px rgba(0,0,0,.05),0 4px 10px rgba(150,96,63,.14);transform:scale(0) rotate(-40deg);transition:transform .7s cubic-bezier(.2,1.5,.4,1);transition-delay:calc(var(--i,0) * .06s)}
.tonos li:nth-child(odd) i{border-radius:52% 48% 47% 53% / 48% 53% 47% 52%}
.tonos span{font-family:var(--caps);font-size:clamp(10.5px,2.8vw,12px);line-height:1.25;letter-spacing:.06em;color:var(--tinta);opacity:0;transition:opacity .6s ease;transition-delay:calc(var(--i,0) * .06s + .2s);text-wrap:balance}
.paleta.vista .tonos i{transform:none}
.paleta.vista .tonos span{opacity:1}
html.suave .tonos i{transform:none}
html.suave .tonos span{opacity:1}
@media (hover:hover) and (pointer:fine){.tonos li:hover i{transform:scale(1.14) rotate(8deg);transition-delay:0s}}
.combina{display:grid;gap:clamp(16px,4vw,24px);max-width:1040px;margin:clamp(18px,4vw,28px) auto 0}
.combina__caja{padding:clamp(20px,5vw,28px) clamp(18px,4.4vw,28px);border-radius:22px;background:var(--champagne)}
.combina__caja h3{font-family:var(--caps);font-weight:400;font-size:15.5px;letter-spacing:.2em;color:var(--oliva-osc);margin-bottom:12px;text-align:center}
.combos li{display:flex;align-items:center;gap:12px;padding:6px 0;font-size:clamp(16.5px,4.3vw,18px);line-height:1.35}
.combos i{flex:0 0 46px;height:20px;border-radius:999px;background:linear-gradient(90deg,var(--a) 0 33.3%,var(--b) 33.3% 66.6%,var(--c) 66.6% 100%);box-shadow:inset 0 0 0 1px rgba(110,107,60,.18)}
.detalles li{position:relative;padding:6px 0 6px 24px;font-size:clamp(16.5px,4.3vw,18px);line-height:1.4}
.detalles li::before{content:'';position:absolute;left:2px;top:.82em;width:9px;height:9px;border-radius:50%;background:var(--nude)}
.vestimenta__clave{max-width:620px;margin:clamp(20px,5vw,30px) auto 0;padding:14px 20px;border:1px solid var(--duna);border-radius:16px;text-align:center;font-style:italic;font-size:clamp(17.5px,4.6vw,19.5px);line-height:1.5;text-wrap:balance}
.vestimenta__clave b{font-style:normal;font-family:var(--caps);letter-spacing:.14em;font-size:.8em;color:var(--terracota-osc)}
/* "ni de blanco ni de negro" (9-oct): dos muestras tachadas y la frase, bien visible */
.evitar{display:flex;flex-direction:column;align-items:center;gap:14px;max-width:620px;margin:clamp(18px,4.4vw,26px) auto 0;padding:20px 22px 22px;border-radius:22px;background:#FFFDF8;box-shadow:inset 0 0 0 1.5px var(--terracota);text-align:center}
.evitar__tonos{display:flex;gap:16px}
.evitar__tono{position:relative;display:block;width:44px;height:44px;border-radius:50%;overflow:hidden;background:var(--c);box-shadow:inset 0 0 0 1.5px rgba(69,67,42,.45)}
.evitar__tono::after{content:'';position:absolute;left:50%;top:-8px;bottom:-8px;width:3px;margin-left:-1.5px;background:var(--terracota-osc);transform:rotate(45deg)}
.evitar__tono--blanco{--c:#FFFFFF}
.evitar__tono--negro{--c:#1D1C17}
.evitar__texto{font-size:clamp(18px,4.9vw,21px);line-height:1.45;text-wrap:balance}
.evitar__texto b{font-weight:400;font-family:var(--caps);letter-spacing:.08em;color:var(--terracota-osc)}

/* ------------------------------------------------------------------
   PASE · su pase semiovalado, frente y reverso
   ------------------------------------------------------------------ */
.pase-s{background:var(--arena)}
.pases{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(18px,4vw,32px);max-width:760px;margin:0 auto;perspective:1200px}
.pase{position:relative;flex:0 1 310px;min-height:420px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:74px 26px 34px;border-radius:999px 999px 20px 20px / 300px 300px 20px 20px;background:linear-gradient(180deg,#B3B694 0%,#A6A985 100%);box-shadow:inset 0 0 0 1.5px rgba(79,77,41,.2),inset 0 0 0 9px rgba(251,246,238,.13),0 16px 34px rgba(79,77,41,.25);color:#3F3D20;text-align:center}
.pase__flor{position:absolute;top:22px;left:50%;width:46px;margin-left:-23px;opacity:.75}
.pase__para{font-family:var(--caps);font-size:19px;letter-spacing:.2em;line-height:1.3}
.pase__n{font-family:var(--caps);font-size:clamp(23px,6.4vw,27px);letter-spacing:.14em;line-height:1.3;margin-top:4px}
.pase__n span{font-family:var(--serif);letter-spacing:0;opacity:.8}
.pase__cora{width:15px;height:15px;margin:12px 0;color:#55532C}
.pase__solo{font-family:var(--serif);font-size:19px;line-height:1.35}
.pase__solo b{display:block;font-family:var(--caps);font-size:24px;letter-spacing:.2em}
.pase__nota{margin-top:12px;font-size:17px;line-height:1.45;text-wrap:balance}
.pase__letra{margin-top:12px;font-size:15px;line-height:1.5;text-wrap:balance}
.pase__gracias{margin-top:10px;font-style:italic;font-size:16px}
.pase--reverso{background:linear-gradient(180deg,#A9AC89 0%,#9DA07C 100%)}
/* 9-oct: el nombre del invitado en el frente y, en el reverso, su código de acceso */
.pase__mas{margin-top:3px;font-family:var(--caps);font-size:14.5px;letter-spacing:.18em;line-height:1.3}
.pase__nombre{margin-top:5px;font-family:var(--serif);font-size:clamp(21px,5.8vw,24px);line-height:1.2;text-wrap:balance}
.pase__codigo{min-width:min(100%,214px);margin:2px 0 2px;padding:13px 16px 11px;border-radius:14px;background:rgba(251,246,238,.93);box-shadow:inset 0 0 0 1.5px rgba(79,77,41,.3),0 6px 14px rgba(79,77,41,.14)}
.pase__codigo b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(24px,6.8vw,29px);line-height:1.2;letter-spacing:.12em;margin-right:-.12em;white-space:nowrap;font-variant-numeric:lining-nums tabular-nums;color:#3F3D20;-webkit-user-select:all;user-select:all}
.pase--reverso:not([data-estado="valido"]) .pase__codigo b{opacity:.4}
.pase__si{display:none}
.pase--reverso[data-estado="general"] .pase__si--general,.pase--reverso[data-estado="valido"] .pase__si--valido,.pase--reverso[data-estado="invalido"] .pase__si--invalido{display:block}
/* las condiciones del pase (9-oct): aforo limitado, máximo dos personas y puntualidad */
.condiciones{max-width:640px;margin:clamp(24px,6vw,38px) auto 0;padding:clamp(22px,5.4vw,32px) clamp(20px,5vw,34px);border-radius:26px;background:#FFFDF8;box-shadow:inset 0 0 0 1px rgba(217,194,167,.9),0 12px 30px rgba(150,96,63,.1)}
.condiciones__rotulo{font-family:var(--caps);font-size:16px;letter-spacing:.24em;line-height:1.3;text-align:center;color:var(--terracota-osc);margin-bottom:12px}
.condiciones__lista li{position:relative;padding:7px 0 7px 26px;font-size:clamp(17px,4.5vw,18.5px);line-height:1.45}
.condiciones__lista li::before{content:'';position:absolute;left:3px;top:.95em;width:9px;height:9px;border-radius:50%;background:var(--nude)}
.condiciones__lista b{font-weight:400;color:var(--terracota-osc)}
.condiciones__gracias{margin-top:12px;text-align:center;font-style:italic;color:var(--terracota-osc);text-wrap:balance}

/* ------------------------------------------------------------------
   REGALOS · su tarjeta redonda de "¡Gracias!", la lista y los sobres
   ------------------------------------------------------------------ */
.regalos{background:linear-gradient(180deg,var(--marfil) 0%,var(--champagne) 100%)}
.gracias{max-width:600px;margin:0 auto;padding:clamp(34px,8vw,64px) clamp(24px,6vw,70px) clamp(34px,8vw,60px);border-radius:46px;background:#FFFDF8;box-shadow:inset 0 0 0 1px rgba(217,194,167,.8),0 16px 40px rgba(150,96,63,.12);text-align:center;font-size:clamp(17.5px,4.6vw,19px);line-height:1.5}
.gracias__ola{width:110px;height:12px;color:var(--duna)}
.gracias__titulo{font-family:var(--script);font-weight:400;font-size:clamp(74px,21vw,104px);line-height:1;color:var(--terracota);margin:0 0 12px}
.gracias__lista{counter-reset:g;margin:12px 0;text-align:left;display:inline-block}
.gracias__lista li{counter-increment:g;position:relative;padding:5px 0 5px 34px}
.gracias__lista li::before{content:counter(g);position:absolute;left:0;top:5px;width:24px;height:24px;border-radius:50%;background:var(--agua);font-family:var(--caps);font-size:13px;line-height:24px;text-align:center;color:var(--oliva-osc)}
.gracias__firma{font-style:italic;color:var(--terracota-osc);text-wrap:balance}
.obsequios{display:grid;gap:clamp(18px,4vw,28px);max-width:960px;margin:clamp(22px,5vw,34px) auto 0}
.obsequio{position:relative;overflow:hidden;padding:clamp(26px,6vw,36px) clamp(20px,5vw,32px);border-radius:26px;background:#FFFDF8;box-shadow:inset 0 0 0 1px rgba(217,194,167,.8),0 12px 30px rgba(150,96,63,.1);text-align:center}
.obsequio > *{position:relative;z-index:1}
.obsequio__ico{width:74px;margin:0 auto 8px}
.obsequio h3{font-family:var(--script);font-weight:400;font-size:clamp(52px,14vw,64px);line-height:.95;color:var(--terracota)}
.obsequio h3 .ll{margin-right:-.13em}
.obsequio__sub{max-width:400px;margin:6px auto 16px;font-size:clamp(17px,4.5vw,18.5px);line-height:1.45;text-wrap:balance}
.ideas{display:flex;flex-wrap:wrap;justify-content:center;gap:9px}
.ideas li{padding:8px 16px;border-radius:999px;background:var(--champagne);box-shadow:inset 0 0 0 1px rgba(217,194,167,.9);font-size:17px;line-height:1.3;transition:background-color .35s ease,transform .35s ease}
@media (hover:hover) and (pointer:fine){.ideas li:hover{background:var(--agua);transform:translateY(-2px)}}
.sobres__lluvia{position:absolute!important;inset:0;z-index:0!important;pointer-events:none;overflow:hidden}
.sobre-cae{position:absolute;top:-50px;width:var(--t,34px);aspect-ratio:560/532;background:url(assets/sobre.webp) center/contain no-repeat;opacity:0;animation:caer-sobre var(--d,9s) linear var(--r,0s) infinite;animation-play-state:paused}
@keyframes caer-sobre{0%{transform:translate3d(0,0,0) rotate(var(--g0,0deg));opacity:0}10%{opacity:.5}86%{opacity:.5}100%{transform:translate3d(var(--x2,20px),var(--alto,700px),0) rotate(var(--g1,120deg));opacity:0}}
.viva .sobre-cae{animation-play-state:running}
/* 9-oct: el sobre, a poco más de la mitad (antes min(48vw,200px): se comía la tarjeta) */
.obsequio__sobre{width:min(28vw,112px);margin:0 auto 4px;filter:drop-shadow(0 8px 12px rgba(150,96,63,.22))}
.qr{display:inline-flex;flex-direction:column;align-items:center;gap:10px}
.qr__hueco{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;width:min(62vw,230px);aspect-ratio:1;padding:16px;border-radius:20px;border:1.5px dashed var(--oliva-claro);background:var(--marfil);font-family:var(--caps);font-size:13px;letter-spacing:.14em;line-height:1.5;color:var(--tinta-suave);text-wrap:balance}
.qr__hueco img{width:64px;opacity:.75}
.qr figcaption{font-family:var(--caps);font-size:14px;letter-spacing:.1em;color:var(--oliva-osc)}
/* segunda vuelta (9-oct): el botón a Sin Envolturas y los datos para aportes (Interbank y Plin) */
.obsequio__boton{max-width:100%;min-height:54px;padding:12px 24px;text-align:center;text-wrap:balance}
@media (hover:hover) and (pointer:fine){.obsequio__boton:hover{background:var(--oliva-osc);border-color:var(--oliva-osc)}}
.aportes{display:grid;gap:14px;max-width:440px;margin:4px auto 0}
.aporte{padding:20px clamp(10px,3.4vw,18px) 22px;border-radius:20px;background:var(--marfil);box-shadow:inset 0 0 0 1px rgba(217,194,167,.9)}
.aporte__titulo{font-family:var(--caps);font-weight:400;font-size:17px;letter-spacing:.22em;line-height:1.3;color:var(--oliva-osc);margin-bottom:6px}
.aporte__dato{display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 0 12px}
.aporte__dato + .aporte__dato{border-top:1px dashed var(--duna)}
.aporte__dato span{font-size:15.5px;line-height:1.3;color:var(--tinta-suave)}
.aporte__dato b{font-family:var(--serif);font-weight:400;font-size:clamp(15px,4.8vw,22px);line-height:1.3;letter-spacing:.02em;font-variant-numeric:lining-nums tabular-nums;white-space:nowrap;-webkit-user-select:all;user-select:all}
.copiar{margin-top:6px;min-width:112px;min-height:38px;padding:0 18px;border-radius:999px;border:1.5px solid var(--oliva);background:transparent;color:var(--oliva-osc);font-family:var(--caps);font-size:12.5px;letter-spacing:.16em;line-height:1.2;cursor:pointer;transition:background-color .3s ease,color .3s ease,border-color .3s ease}
.copiar.copiado{background:var(--oliva);border-color:var(--oliva);color:#FFF8EC}
@media (hover:hover) and (pointer:fine){.copiar:hover{background:var(--oliva);color:#FFF8EC}}
.aporte__titular{padding-top:12px;border-top:1px dashed var(--duna);font-family:var(--caps);font-size:14px;letter-spacing:.1em;line-height:1.4;color:var(--oliva-osc)}
.qr__img{display:block;width:min(62vw,230px);height:auto;border-radius:16px;box-shadow:0 0 0 1px rgba(217,194,167,.9);image-rendering:pixelated}

/* ------------------------------------------------------------------
   CONFIRMAR · sobre el mar al atardecer
   ------------------------------------------------------------------ */
/* en celular se ve más el lado derecho de la foto (el sol); en pantallas anchas, centrada */
.confirmar{background:var(--ocaso) url(assets/atardecer.webp) 62% 50%/cover no-repeat;text-align:center}
.confirmar__velo{position:absolute!important;inset:0;z-index:0!important;background:linear-gradient(180deg,rgba(90,51,36,.72) 0%,rgba(90,51,36,.46) 46%,rgba(70,38,26,.8) 100%)}
.confirmar__texto{max-width:540px;margin:0 auto 20px;font-size:clamp(18.5px,5vw,21px);line-height:1.5;text-wrap:balance}
.confirmar__texto b{color:var(--sol)}
.contador{display:inline-flex;align-items:center;gap:16px;margin:0 auto 22px;padding:8px;border-radius:999px;background:rgba(251,246,238,.14);box-shadow:inset 0 0 0 1px rgba(255,241,220,.5)}
.contador__btn{display:flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;border:0;background:var(--marfil);color:var(--oliva-osc);cursor:pointer;transition:background-color .3s ease,opacity .3s ease,transform .3s ease}
.contador__btn svg{width:20px;height:20px}
.contador__btn:disabled{opacity:.35;cursor:default}
.contador__n{min-width:126px;font-family:var(--caps);font-size:15px;letter-spacing:.16em}
.contador__n b{font-size:30px;line-height:1;vertical-align:-3px;margin-right:4px;font-variant-numeric:tabular-nums}
.respuestas{display:flex;flex-direction:column;align-items:center;gap:12px}
@media (hover:hover) and (pointer:fine){.contador__btn:not(:disabled):hover{background:var(--sol);transform:scale(1.08)}}

/* ------------------------------------------------------------------
   CANCIÓN · los audífonos de su papelería
   ------------------------------------------------------------------ */
.cancion{background:var(--champagne);text-align:center}
.cancion .titulo{font-size:clamp(58px,16vw,104px)}
.cancion__artista{font-family:var(--caps);font-size:clamp(14px,3.9vw,17px);letter-spacing:.2em;color:var(--oliva-osc);margin-top:-12px}
.audio{position:relative;display:block;width:clamp(150px,42vw,190px);aspect-ratio:1;margin:24px auto 12px;padding:0;border:0;border-radius:50%;background:var(--marfil);box-shadow:inset 0 0 0 1.5px var(--oliva-claro),0 14px 30px rgba(150,96,63,.18);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .4s cubic-bezier(.2,.7,.2,1),background-color .4s ease}
.audio__halo{position:absolute;inset:-9px;border-radius:50%;border:1.5px solid var(--nude);opacity:0}
.cancion.tocando .audio__halo{animation:anillo-audio 2s ease-out infinite}
@keyframes anillo-audio{0%{transform:scale(.94);opacity:.9}100%{transform:scale(1.2);opacity:0}}
.audio__img{position:absolute;left:24%;top:23%;width:52%;height:auto}
.cancion.tocando .audio__img{animation:compas 1s ease-in-out infinite}
@keyframes compas{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
.audio__notas{position:absolute;inset:0;pointer-events:none}
.nota{position:absolute;bottom:60%;width:var(--s,20px);height:var(--s,20px);color:var(--terracota);opacity:0}
.nota svg{display:block;width:100%;height:100%}
.cancion.tocando .nota{animation:sube-nota var(--d,3s) ease-out var(--r,0s) infinite}
@keyframes sube-nota{0%{transform:translate(0,0) rotate(-8deg);opacity:0}18%{opacity:.9}100%{transform:translate(var(--x,10px),-120px) rotate(12deg);opacity:0}}
.cancion__pista{font-family:var(--caps);font-size:13.5px;letter-spacing:.16em;color:var(--tinta-suave);text-wrap:balance}
.cancion__pista a{color:var(--terracota-osc)}
.yt-oculto{position:absolute!important;left:-9999px;top:0;width:200px;height:120px;overflow:hidden;opacity:0;pointer-events:none}
@media (hover:hover) and (pointer:fine){.audio:hover{transform:scale(1.05);background:#FFFDF8}}

/* ------------------------------------------------------------------
   CIERRE · su foto entre las olas, los nombres y Luna echada
   ------------------------------------------------------------------ */
.cierre{padding:0!important;min-height:min(100vh,920px);display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--ocaso);color:#FFF6E6;text-align:center}
.cierre__foto{position:absolute!important;left:0;top:-6%;z-index:0!important;width:100%;height:112%;max-width:none;object-fit:cover;object-position:46% 50%;will-change:transform}
.cierre__velo{position:absolute!important;inset:0;z-index:0!important;background:linear-gradient(180deg,rgba(90,51,36,.66) 0%,rgba(90,51,36,.4) 46%,rgba(70,38,26,.8) 100%)}
.cierre__dentro{display:flex;flex-direction:column;align-items:center;padding:clamp(70px,12vw,110px) var(--pad) clamp(150px,36vw,210px)}
.cierre__titulo{font-family:var(--script);font-weight:400;font-size:clamp(84px,24vw,150px);line-height:.9;color:#FFF6E6;text-shadow:0 3px 22px rgba(70,38,26,.7);white-space:nowrap;margin:4px 0 10px}
.cierre__nombres{font-family:var(--caps);font-size:clamp(25px,7.2vw,40px);letter-spacing:.1em;line-height:1.2}
.cierre__nombres i{font-family:var(--serif);font-style:italic;font-size:.82em;letter-spacing:0;color:var(--sol)}
.cierre__fecha{font-family:var(--caps);font-size:clamp(13px,3.6vw,16px);letter-spacing:.24em;color:#FFE9CC;margin:8px 0 24px}
.cierre__medusa{position:absolute!important;left:50%;bottom:-4px;z-index:1;width:clamp(170px,44vw,250px);height:auto;margin-left:calc(clamp(170px,44vw,250px) / -2);filter:drop-shadow(0 -4px 18px rgba(70,38,26,.4))}

/* ------------------------------------------------------------------
   CRÉDITOS
   ------------------------------------------------------------------ */
.creditos{position:relative;z-index:1;padding:38px 22px calc(var(--abajo) + 92px);background:var(--oliva-osc);color:#EDE6C8;text-align:center;font-size:16.5px;line-height:1.5}
.creditos__pregunta{font-family:var(--script);font-size:44px;line-height:1;color:#FFF6E6;margin-bottom:14px}
.creditos__wa{display:inline-flex;align-items:center;gap:9px;min-height:48px;padding:0 24px;border-radius:999px;background:var(--marfil);color:var(--oliva-osc);font-family:var(--caps);font-size:14px;letter-spacing:.14em;text-decoration:none;transition:background-color .3s ease,color .3s ease}
.creditos__wa svg{width:20px;height:20px}
.creditos__wa:hover{background:var(--sol)}
.creditos__correo{display:block;margin:12px 0 14px;color:#EDE6C8}
.creditos__extras{max-width:520px;margin:0 auto 14px;font-size:14.5px;opacity:.82;text-wrap:balance}
.creditos__marca{display:flex;flex-direction:column;align-items:center}
.creditos__logo{font-family:var(--caps);font-size:19px;letter-spacing:.24em;color:#FFF6E6}
.creditos__lema{font-size:13.5px;font-style:italic;opacity:.8}

/* ------------------------------------------------------------------
   PANTALLAS ANCHAS
   ------------------------------------------------------------------ */
@media (min-width:860px){
  :root{--pad:40px}
  body{font-size:20px}
  .novios__dentro{flex-direction:row;justify-content:center;gap:clamp(30px,5vw,70px)}
  .aro{flex:0 0 min(44vw,520px);width:min(44vw,520px);margin:0}
  .novios__texto{flex:0 1 500px}
  .rincon{width:min(18vw,240px)}
  .linea{max-width:860px}
  .linea__hilo{left:50%;margin-left:-1px}
  .momento{width:50%;padding-right:56px;flex-direction:row-reverse;text-align:right}
  .momento:nth-child(odd){margin-left:50%;padding-right:0;padding-left:56px;flex-direction:row;text-align:left}
  .momento__ico{position:absolute;right:-28px;top:0}
  .momento:nth-child(odd) .momento__ico{right:auto;left:-28px}
  .momento__txt{transform:translateX(-18px)}
  .momento:nth-child(odd) .momento__txt{transform:translateX(18px)}
  .medusa{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:40px;align-items:center}
  .medusa > .paseo{grid-column:1 / -1}
  .medusa > .cabeza{grid-column:2;margin-bottom:10px;align-self:end}
  .medusa > .mimo{grid-column:1;grid-row:2 / span 4;width:min(30vw,380px);justify-self:end;margin:0 30px 0 0}
  .medusa > .medusa__guia,.medusa > .medusa__cuenta,.medusa > .medusa__texto{grid-column:2;max-width:480px;justify-self:center}
  .fotos{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;overflow:visible;max-width:1180px;margin:0 auto;padding:6px var(--pad) 0}
  .foto{flex:none;aspect-ratio:16/9}
  .foto--grande{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
  .foto--ancha{grid-column:1 / -1}
  .fotos__puntos{display:none}
  .fotos__guia{margin-top:18px}
  .paletas,.combina{grid-template-columns:1fr 1fr}
  /* 9-oct: la lista de regalos manda (franja a todo el ancho, con su botón grande a la derecha); debajo, los
     sobres: a la izquierda el sobre y el texto, a la derecha el banco y el Plin, lado a lado */
  #lista-regalos{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;column-gap:34px;padding:34px 44px;text-align:left;box-shadow:inset 0 0 0 1.5px var(--oliva-claro),0 14px 34px rgba(150,96,63,.12)}
  #lista-regalos .obsequio__ico{grid-row:1 / span 2;width:104px;margin:0}
  #lista-regalos h3{grid-column:2;align-self:end}
  #lista-regalos .obsequio__sub{grid-column:2;align-self:start;max-width:470px;margin:6px 0 0}
  #lista-regalos .obsequio__boton{grid-column:3;grid-row:1 / span 2;max-width:290px;min-height:64px;padding:14px 28px}
  #sobres{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.55fr);align-items:center;column-gap:34px;padding:34px 36px}
  #sobres .obsequio__sub{margin-bottom:0}
  #sobres .aportes{grid-template-columns:1fr 1fr;max-width:none;margin:0;align-items:stretch}
  #sobres .aporte{display:flex;flex-direction:column;justify-content:center}
  #sobres .aporte__dato b{font-size:19px}
  #sobres .qr__img{width:min(100%,200px)}
  .tonos{grid-template-columns:repeat(4,1fr)}
  .respuestas{flex-direction:row;justify-content:center}
  .visor__flecha--a{left:22px;bottom:auto;top:50%;margin-top:-24px}
  .visor__flecha--b{right:22px;bottom:auto;top:50%;margin-top:-24px}
  .gracias{border-radius:50%;aspect-ratio:1;max-width:640px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:70px 84px}
  .ruta{max-width:500px}
  .paso{padding-left:70px}
  .paso:nth-child(even){padding-left:150px}
  .solo-movil{display:none}
  .franja__foto{object-position:64% 50%}
  .confirmar{background-position:center 34%}
}
@media (max-width:359px){
  .tonos{grid-template-columns:repeat(3,1fr)}
  .cuenta__c{min-width:60px}
}

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

/* la ola del pie de cada sección: el dibujo mide el doble y se repite, así puede mecerse sin cortes */
.ola-borde{overflow:hidden}
.ola-borde svg{width:200%;max-width:none}
.viva > .ola-borde svg{animation:ola-va 11s linear infinite}
@keyframes ola-va{to{transform:translate3d(-50%,0,0)}}