/* ==================================================================
   Ana & Gabriel — "El expediente" (boda-civil)
   El escritorio del registro civil a la luz del día: papel crema, tinta
   azul notarial y un solo acento, el rojo del sello.
   Tipografías: Mr De Haviland (las firmas), Ibarra Real Nova (títulos y
   texto) y Special Elite (lo que se escribe a máquina).
   Forma propia: la hoja de expediente, con su filete y su clip.
   ================================================================== */

:root{
  --papel:#F7F1E3;
  --papel-2:#EFE6D2;
  --papel-3:#E5D9BF;
  --hueso:#FCF9F0;
  --kraft:#E6D8B8;
  --tinta:#1C2F5E;
  --tinta-osc:#14213F;
  --tinta-suave:#4A5878;
  --tinta-clara:#7C92C6;
  --azul:#1B2E5C;
  --azul-2:#233A72;
  --azul-osc:#111B38;
  --sello:#B5382D;
  --sello-osc:#96281F;
  --sello-claro:#F2A093;
  --crema-suave:#CDD4E6;
  --firma:'Mr De Haviland','Snell Roundhand','Apple Chancery',cursive;
  --serif:'Ibarra Real Nova','Iowan Old Style','Palatino Linotype','Book Antiqua','Times New Roman',serif;
  --maq:'Special Elite','Courier New',Courier,monospace;
  --pad:22px;
  --arriba:env(safe-area-inset-top,0px);
  --abajo:env(safe-area-inset-bottom,0px);
  --izq:env(safe-area-inset-left,0px);
  --der:env(safe-area-inset-right,0px);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;background:var(--papel)}
body{
  background:var(--papel);
  color:var(--tinta-osc);
  font-family:var(--serif);
  font-size:19px;
  line-height:1.55;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
body.cerrado{overflow:hidden;height:100%}
img{max-width:100%;height:auto;display:block}
b,strong{font-weight:600}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.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(--sello);outline-offset:3px}
.azul :focus-visible{outline-color:var(--sello-claro)}
html.raton .solo-tactil,html.tactil .solo-raton{display:none}

/* ------------------------------------------------------------------
   PORTADA · el escritorio del registro (fotograma 0 del video)
   ------------------------------------------------------------------ */
.portada{position:fixed;inset:0;z-index:60;overflow:hidden;background:#DAC29B}
body.abierto .portada{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .6s ease,visibility 0s linear .6s}

/* el mundo: la portada y, pegada a ella, la llegada. La cámara es su transform (solo se mueve en el respaldo sin video) */
.mundo{position:absolute;left:0;top:0;width:100%;height:100%;visibility:hidden;will-change:transform}
.portada.lista .mundo{visibility:visible}
.panel{position:absolute;left:0;top:0;width:100%;height:100%}
.panel--fin{top:100%}
html.horizontal .panel--fin{top:0;left:100%}
.panel__arte{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover}
.trazo-esc{position:absolute;inset:0;display:block;width:100%;height:100%;overflow:visible;pointer-events:none}
.trazo-esc__linea{fill:none;stroke:var(--tinta);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
/* un rayo de sol tapa la costura entre las dos imágenes mientras la cámara pasa (solo se ve en ese momento) */
.mundo__sol{position:absolute;left:0;top:100%;width:100%;height:76%;transform:translateY(-50%);pointer-events:none;opacity:0;
  background:linear-gradient(180deg,rgba(255,250,236,0) 0%,rgba(255,250,236,.97) 34%,rgba(255,250,236,.97) 66%,rgba(255,250,236,0) 100%)}
html.horizontal .mundo__sol{left:100%;top:0;width:76%;height:100%;transform:translateX(-50%);
  background:linear-gradient(90deg,rgba(255,250,236,0) 0%,rgba(255,250,236,.97) 34%,rgba(255,250,236,.97) 66%,rgba(255,250,236,0) 100%)}

/* bruma: un velo de luz arriba, para la tinta de los nombres */
.portada__bruma{
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(252,247,234,.9) 0%,rgba(252,247,234,.7) 17%,rgba(252,247,234,.18) 31%,rgba(252,247,234,0) 38%);
}
html.horizontal .portada__bruma{background:linear-gradient(180deg,rgba(252,247,234,.9) 0%,rgba(252,247,234,.66) 16%,rgba(252,247,234,.14) 29%,rgba(252,247,234,0) 36%)}
/* la pluma: caja por left/top/width/height en píxeles reales; la punta es el origen de sus giros */
.pluma{position:absolute;left:0;top:0;width:0;height:0;z-index:5;pointer-events:none;visibility:hidden;will-change:transform}
.portada.lista .pluma{visibility:visible}
.pluma__dentro{position:absolute;inset:0;display:block;transform-origin:0 50%;animation:pluma-vive 6.4s ease-in-out 1.2s infinite}
html.viajando .pluma__dentro{animation:none}
/* con la invitación abierta la portada queda oculta: sus animaciones se detienen (no gastan aunque no se vean) */
body.abierto .pluma__dentro,body.abierto .portada__pista::before,body.abierto .pista__mano{animation-play-state:paused}
.pluma__sombra,.pluma__cuerpo{position:absolute;inset:0;display:block}
/* la sombra es la silueta de la misma pluma (máscara); acta2.js la desplaza y la desenfoca en proporción a su largo */
.pluma__sombra{opacity:.34;filter:blur(4px);background:#2A1C0A;-webkit-mask:url(assets/pluma.webp) center/100% 100% no-repeat;mask:url(assets/pluma.webp) center/100% 100% no-repeat}
.pluma img{display:block;width:100%;height:100%;max-width:none}
/* viva: cada tanto se levanta apenas de la punta, como invitando a firmar */
@keyframes pluma-vive{
  0%,70%,100%{transform:rotate(0)}
  77%{transform:rotate(-1.9deg)}
  83%{transform:rotate(.25deg)}
  89%{transform:rotate(-1.1deg)}
  95%{transform:rotate(0)}
}

/* cabecera: los nombres firmados arriba, en la luz de la ventana */
.portada__cabecera{
  position:absolute;
  left:0;
  right:0;
  top:0;
  z-index:6;
  height:var(--cielo,28vh);
  min-height:150px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:calc(var(--arriba) + 14px) 12px 0;
  text-align:center;
  pointer-events:none;
  visibility:hidden;
}
.portada.lista .portada__cabecera{visibility:visible}
.portada__sobre{
  display:block;
  margin:0 0 2px .34em;
  font-family:var(--maq);
  font-size:clamp(11px,3.1vw,13.5px);
  line-height:1.5;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--sello-osc);
}
.portada__nombres{
  display:block;
  position:relative;
  padding:0 .1em;
  font-family:var(--firma);
  font-size:max(56px,min(19.5vw,calc((var(--cielo,220px) - 66px) * .82),136px));
  line-height:1.02;
  color:var(--tinta);
  white-space:nowrap;
}
.portada__para{
  margin-top:10px;
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  max-width:calc(100vw - 40px);
  padding:9px 20px 9px;
  border-radius:4px;
  background:rgba(252,249,240,.94);
  box-shadow:0 0 0 1px rgba(28,47,94,.22),0 10px 22px -14px rgba(18,29,60,.5);
  color:var(--tinta-osc);
}
.portada__para small{font-family:var(--maq);font-size:9.5px;line-height:1.5;letter-spacing:.28em;text-transform:uppercase;color:var(--sello-osc);margin-left:.28em}
.portada__para b{font-family:var(--serif);font-weight:600;font-size:clamp(21px,6vw,28px);line-height:1.14}
.portada__para em{margin-top:3px;font-family:var(--maq);font-style:normal;font-size:11.5px;line-height:1.4;letter-spacing:.14em;text-transform:uppercase;color:var(--tinta)}
html.invitado .portada__cabecera{justify-content:flex-start;height:auto;padding-top:calc(var(--arriba) + clamp(14px,2.6vh,30px))}

/* ---- la firma: letras cursivas que se trazan con tinta (un SVG encima mientras se escribe) ---- */
.firma{position:relative;font-variant-ligatures:none;font-feature-settings:"liga" 0,"clig" 0,"calt" 0}
.firma i,.viaje__nombre i,.firmas__novios i{font-style:normal;color:var(--sello)}
.firma__t{display:inline-block}
.firma--espera .firma__t{visibility:hidden}
.firma__svg{position:absolute;left:0;top:0;overflow:visible;pointer-events:none}
.firma__svg text{font-family:var(--firma);font-variant-ligatures:none;font-feature-settings:"liga" 0,"clig" 0,"calt" 0;stroke-linecap:butt;stroke-linejoin:round}

/* líneas de tinta que se trazan: el subrayado de los títulos y las rúbricas */
.subraya{display:block;width:min(62%,250px);height:26px;margin:8px auto 0;overflow:visible}
.subraya path{fill:none;stroke:var(--tinta);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.azul .subraya path{stroke:var(--papel)}
.subraya--portada{width:min(58vw,300px);height:24px;margin-top:-4px}
.subraya--nombres{width:min(70%,290px);height:26px;margin-top:-2px}
.subraya--corta{width:150px;height:24px;margin-top:10px}

/* 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:12px;
  padding:0 16px calc(var(--abajo) + clamp(20px,4.6vh,52px));
  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:8px 18px 9px;
  border-radius:6px;
  background:rgba(252,249,240,.95);
  box-shadow:0 0 0 1px rgba(28,47,94,.26),0 12px 24px -16px rgba(18,29,60,.55);
  color:var(--tinta-osc);
  font-family:var(--serif);
  font-weight:600;
  font-size:clamp(15px,4.1vw,17.5px);
  line-height:1.3;
}
.portada__fecha .solo-anio{display:none}
html.horizontal .portada__fecha .solo-anio{display:inline}
.portada__sep{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--sello)}
.portada__pista{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:54px;
  padding:2px 24px 0 18px;
  border-radius:8px;
  border:1px solid var(--tinta);
  background:var(--hueso);
  color:var(--tinta);
  font-family:var(--maq);
  font-size:13px;
  line-height:1.2;
  letter-spacing:.14em;
  text-transform:uppercase;
  transition:background-color .35s ease,color .35s ease,border-color .35s ease;
}
.portada__pista::before{
  content:'';
  position:absolute;
  inset:-6px;
  border-radius:13px;
  border:1.5px solid var(--tinta);
  animation:anillo 2.4s ease-out infinite;
  pointer-events:none;
}
@keyframes anillo{0%{transform:scale(1);opacity:.8}70%,100%{transform:scale(1.1,1.36);opacity:0}}
.pista__mano{width:22px;height:22px;flex:0 0 auto;margin-top:-3px;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)}}
.portada__tap:hover .portada__pista,
.portada__tap:focus-visible .portada__pista{background:var(--tinta);color:var(--papel);border-color:var(--tinta)}
/* en táctil el hover no existe: nace en su estado llamativo */
@media (hover:none){
  .portada__pista{background:var(--tinta);color:var(--papel);border-color:var(--tinta)}
}
/* con mouse también nace llamativo; el hover lo invierte */
@media (hover:hover) and (pointer:fine){
  .portada__pista{background:var(--tinta);color:var(--papel);border-color:var(--tinta)}
  .portada__tap:hover .portada__pista,
  .portada__tap:focus-visible .portada__pista{background:var(--hueso);color:var(--tinta);border-color:var(--tinta)}
}

.velo{
  position:absolute;
  inset:0;
  z-index:9;
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  background:radial-gradient(circle at 50% 40%,#FFFCF4 0%,var(--papel) 60%,var(--papel-2) 100%);
}

/* ------------------------------------------------------------------
   EL RECORRIDO · video, foto en su espacio con esquineros y 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:#DAC29B;opacity:0}
/* la foto ocupa el espacio liso de la página; las esquinas van cortadas para que se vean los esquineros del arte */
.viaje__foto{
  position:absolute;
  left:0;
  top:0;
  width:0;
  height:0;
  opacity:0;
  background:var(--azul);
  --c:20px;
  clip-path:polygon(var(--c) 0,calc(100% - var(--c)) 0,100% var(--c),100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,var(--c) 100%,0 calc(100% - var(--c)),0 var(--c));
}
.viaje__foto img{width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 28%}
.viaje__foto::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:2;
  background:radial-gradient(ellipse at 50% 40%,rgba(255,252,240,.98) 0%,rgba(255,246,222,.7) 55%,rgba(255,246,222,0) 90%);
  opacity:0;
  pointer-events:none;
}
.viaje__foto--luz::before{animation:destello 1.5s ease-out 1}
@keyframes destello{0%{opacity:1}100%{opacity:0}}

/* placas: azul tinta con filete crema; el texto va a máquina */
.viaje__texto{
  position:absolute;
  left:6%;
  right:6%;
  bottom:calc(var(--abajo) + 12%);
  z-index:2;
  margin:0;
  padding:15px 18px 13px;
  border-radius:8px;
  text-align:center;
  text-wrap:balance;
  background:rgba(17,27,56,.86);
  box-shadow:inset 0 0 0 1px rgba(247,241,227,.4);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  font-family:var(--maq);
  font-size:clamp(19px,5.5vw,26px);
  line-height:1.32;
  color:var(--papel);
  opacity:0;
}
.viaje__final{
  position:absolute;
  left:6%;
  right:6%;
  bottom:calc(var(--abajo) + 3.4%);
  z-index:2;
  padding:4px 16px 16px;
  border-radius:8px;
  text-align:center;
  background:rgba(17,27,56,.88);
  box-shadow:inset 0 0 0 1px rgba(247,241,227,.4);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  opacity:0;
}
.viaje__placa{margin:0}
.viaje__nombre{display:block;font-family:var(--firma);font-size:clamp(62px,18.5vw,92px);line-height:1.06;color:var(--papel);white-space:nowrap;font-variant-ligatures:none}
.viaje__nombre i,.azul .firma i{color:var(--sello-claro)}
.viaje__invita{display:block;text-wrap:balance;font-family:var(--maq);font-size:clamp(11.5px,3.2vw,13.5px);line-height:1.7;letter-spacing:.16em;text-transform:uppercase;color:var(--crema-suave)}
.viaje__invita b{font-weight:400;color:#FFFFFF}

html.horizontal .viaje__texto{
  left:0;
  right:0;
  width:fit-content;
  max-width:88vw;
  margin:0 auto;
  bottom:calc(var(--abajo) + 7%);
  padding:15px 32px 12px;
  font-size:clamp(20px,2.1vw,34px);
}
html.horizontal .viaje__final{inset:0;padding:0;border-radius:0;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;--sep:clamp(16px,calc(5vw - 26px),96px);--lado:calc(var(--m-left,38vw) - var(--sep) - 12px)}
html.horizontal .viaje__placa{
  position:absolute;
  top:var(--m-mid,50vh);
  transform:translateY(-50%);
  width:min(29vw,460px,var(--lado));
  padding:16px 20px 18px;
  border-radius:8px;
  background:rgba(17,27,56,.88);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  box-shadow:inset 0 0 0 1px rgba(247,241,227,.4);
  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{font-size:clamp(30px,min(5.4vw,calc((var(--lado) - 48px) / 4)),104px)}
html.horizontal .viaje__invita{font-size:clamp(12px,1.05vw,15px);line-height:1.9}
html.horizontal .viaje__invita b{display:block;font-family:var(--serif);font-style:italic;font-size:2.5em;letter-spacing:.01em;text-transform:none;line-height:1.15;margin-top:4px}

/* ------------------------------------------------------------------
   BOTONES FIJOS · volver y música
   ------------------------------------------------------------------ */
.volver-fijo{
  position:fixed;
  top:calc(var(--arriba) + 12px);
  left:calc(var(--izq) + 12px);
  z-index:70;
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:44px;
  padding:2px 16px 0 10px;
  border-radius:8px;
  border:1px solid rgba(28,47,94,.5);
  background:rgba(252,249,240,.94);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  color:var(--tinta);
  font-family:var(--maq);
  font-size:11.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  cursor:pointer;
  transition:background-color .35s ease,color .35s ease,opacity .4s ease,visibility 0s;
}
.volver-fijo svg{width:16px;height:16px;margin-top:-3px}
.volver-fijo:hover,.volver-fijo:focus-visible{background:var(--tinta);color:var(--papel)}
body.cerrado .volver-fijo{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s ease,visibility 0s linear .3s}

.musica-flotante{
  position:fixed;
  right:calc(var(--der) + 14px);
  bottom:calc(var(--abajo) + 14px);
  z-index:70;
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:54px;
  padding:6px 16px 6px 7px;
  border-radius:10px;
  border:1px solid rgba(247,241,227,.5);
  background:rgba(17,27,56,.92);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  color:var(--papel);
  cursor:pointer;
  opacity:0;
  visibility:hidden;
  transform:translateY(12px);
  transition:opacity .4s ease,visibility 0s linear .4s,transform .4s ease,background-color .35s ease,border-color .35s ease;
}
html.musica .musica-flotante{opacity:1;visibility:visible;transform:none;transition:opacity .4s ease,visibility 0s,transform .4s ease,background-color .35s ease,border-color .35s ease}
/* durante el recorrido las placas van abajo: el botón se aparta y vuelve al terminar */
html.musica.viajando .musica-flotante{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s ease,visibility 0s linear .3s}
.musica-flotante:hover,.musica-flotante:focus-visible{background:var(--azul-2);border-color:var(--papel)}
/* el carrete del casete */
.musica-flotante__carrete{
  position:relative;
  display:block;
  width:40px;
  height:40px;
  border-radius:50%;
  background:
    radial-gradient(circle,var(--azul-osc) 0 19%,rgba(0,0,0,0) 20%),
    conic-gradient(from 0deg,var(--papel) 0 8%,rgba(0,0,0,0) 8% 33.3%,var(--papel) 33.3% 41.3%,rgba(0,0,0,0) 41.3% 66.6%,var(--papel) 66.6% 74.6%,rgba(0,0,0,0) 74.6% 100%),
    radial-gradient(circle,rgba(247,241,227,.16) 0 54%,rgba(0,0,0,0) 55%);
  box-shadow:inset 0 0 0 2px var(--papel),inset 0 0 0 9px rgba(17,27,56,.001);
  animation:girar 3.2s linear infinite paused;
}
.musica-flotante__carrete i{position:absolute;inset:36%;border-radius:50%;background:var(--sello)}
.musica-flotante--tocando .musica-flotante__carrete{animation-play-state:running}
@keyframes girar{to{transform:rotate(360deg)}}
.musica-flotante__ondas{display:inline-flex;align-items:flex-end;gap:3px;height:18px}
.musica-flotante__ondas i{display:block;width:3px;height:6px;border-radius:1px;background:currentColor}
.musica-flotante--tocando .musica-flotante__ondas i{animation:onda-sonido .9s ease-in-out infinite}
.musica-flotante--tocando .musica-flotante__ondas i:nth-child(2){animation-delay:.15s}
.musica-flotante--tocando .musica-flotante__ondas i:nth-child(3){animation-delay:.3s}
.musica-flotante--tocando .musica-flotante__ondas i:nth-child(4){animation-delay:.45s}
@keyframes onda-sonido{0%,100%{height:6px}50%{height:18px}}
.musica-flotante:not(.musica-flotante--tocando){color:rgba(247,241,227,.62)}
/* de vuelta en la portada el llamado a tocar va abajo: el botón sube a la esquina y se queda en el carrete */
body.cerrado .musica-flotante{top:calc(var(--arriba) + 10px);bottom:auto;right:calc(var(--der) + 10px);min-height:50px;padding:4px;gap:0}
body.cerrado .musica-flotante__ondas{display:none}

/* ------------------------------------------------------------------
   CUERPO · piezas comunes
   ------------------------------------------------------------------ */
.expediente{position:relative;z-index:1;opacity:0;transition:opacity .7s ease}
body.abierto .expediente{opacity:1}
section{position:relative;overflow:hidden;padding:84px var(--pad) 80px}
.azul{background:var(--azul);color:var(--papel)}
/* papel rayado: los renglones del libro y su margen rojo */
.rayado{
  background:
    linear-gradient(90deg,rgba(181,56,45,0) 0 calc(var(--pad) - 8px),rgba(181,56,45,.3) calc(var(--pad) - 8px) calc(var(--pad) - 7px),rgba(181,56,45,0) calc(var(--pad) - 7px)),
    repeating-linear-gradient(180deg,rgba(72,104,170,0) 0 35px,rgba(72,104,170,.17) 35px 36px),
    var(--papel);
}

.cabeza{position:relative;margin:0 calc(-1 * var(--pad));text-align:center}
.rotulo{
  margin:0 0 12px;
  padding:0 var(--pad);
  font-family:var(--maq);
  font-size:12.5px;
  line-height:1.6;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--sello-osc);
  text-align:center;
}
.azul .rotulo{color:var(--sello-claro)}
.rotulo--chico{margin-top:34px}
.titulo{
  margin:0 auto;
  max-width:12em;
  padding:0 var(--pad);
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(43px,12.4vw,64px);
  line-height:1.02;
  color:var(--tinta);
  text-align:center;
  text-wrap:balance;
}
.titulo em{font-style:italic}
.azul .titulo{color:var(--papel)}
/* los títulos se teclean: cada letra golpea el papel */
.pal{display:inline-block;white-space:nowrap}
.letra{display:inline-block;transform-origin:50% 70%}
/* lo que se escribe a máquina: la parte que falta guarda su sitio (nada salta mientras se escribe) */
.tec-falta{opacity:0}
.tec-cursor::after{content:'';display:inline-block;width:0;height:.95em;margin-right:-.56em;border-right:.56em solid currentColor;vertical-align:-.12em;opacity:.8;animation:cursor .5s steps(1) infinite}
@keyframes cursor{50%{opacity:0}}

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

/* la hoja de expediente: papel con filete y un clip */
.hoja{
  position:relative;
  background:var(--hueso);
  border-radius:4px;
  box-shadow:0 0 0 1px rgba(28,47,94,.1),0 24px 40px -26px rgba(18,29,60,.55);
}
.hoja::before{content:'';position:absolute;inset:9px;border:1px solid rgba(28,47,94,.15);border-radius:2px;pointer-events:none}
.clip{position:absolute;left:26px;top:-19px;z-index:3;width:22px;height:55px;rotate:5deg;overflow:visible;pointer-events:none}

.boton{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:52px;
  padding:2px 26px 0;
  border-radius:8px;
  border:1px solid var(--tinta);
  background:transparent;
  color:var(--tinta);
  font-family:var(--maq);
  font-size:13px;
  line-height:1.25;
  letter-spacing:.13em;
  text-transform:uppercase;
  text-decoration:none;
  text-align:center;
  cursor:pointer;
  transition:background-color .35s ease,color .35s ease,border-color .35s ease;
}
.boton svg{width:20px;height:20px;flex:0 0 auto;margin-top:-3px}
.boton:hover,.boton:focus-visible{background:var(--tinta);color:var(--papel)}
.boton--chico{min-height:46px;padding:2px 18px 0;font-size:12px}
.boton--linea{border-color:rgba(28,47,94,.45)}
.boton--wa{background:var(--tinta);border-color:var(--tinta);color:var(--papel);box-shadow:none}
.boton--wa:hover,.boton--wa:focus-visible{background:var(--sello);border-color:var(--sello);color:#FFFFFF;box-shadow:none}
html.js .boton.revela{transition:opacity .75s ease,transform .9s cubic-bezier(.2,.7,.2,1),background-color .35s ease,color .35s ease,border-color .35s ease}

/* esquineros de álbum */
.esquinero{position:absolute;z-index:2;width:30px;height:30px;background:linear-gradient(135deg,#EFE3C6,#DCCBA4)}
.esquinero--1{left:-5px;top:-5px;clip-path:polygon(0 0,100% 0,0 100%)}
.esquinero--2{right:-5px;top:-5px;clip-path:polygon(0 0,100% 0,100% 100%)}
.esquinero--3{left:-5px;bottom:-5px;clip-path:polygon(0 0,0 100%,100% 100%)}
.esquinero--4{right:-5px;bottom:-5px;clip-path:polygon(100% 0,100% 100%,0 100%)}

/* ------------------------------------------------------------------
   LOS CONTRAYENTES
   ------------------------------------------------------------------ */
.novios{
  padding:calc(var(--arriba) + 86px) var(--pad) 64px;
  background:
    radial-gradient(ellipse 90% 46% at 50% 0%,#FFFDF6 0%,rgba(255,253,246,0) 70%),
    linear-gradient(180deg,var(--papel) 0%,var(--papel-2) 100%);
}
.novios__dentro{position:relative;z-index:1;display:grid;gap:34px;justify-items:center;max-width:1080px;margin:0 auto}
.retrato{position:relative;width:min(72vw,300px);margin:22px 0 4px;rotate:-2deg}
.retrato__hoja{position:absolute;inset:0;border-radius:4px;background:var(--hueso);box-shadow:0 0 0 1px rgba(28,47,94,.1),0 20px 34px -24px rgba(18,29,60,.5)}
.retrato__hoja--1{rotate:3.4deg}
.retrato__hoja--2{rotate:-4.6deg;background:var(--papel-2)}
.retrato__foto{
  position:relative;
  z-index:1;
  aspect-ratio:3/4;
  border:13px solid var(--hueso);
  border-bottom-width:46px;
  border-radius:4px;
  background:var(--papel-2);
  box-shadow:0 0 0 1px rgba(28,47,94,.12),0 24px 40px -24px rgba(18,29,60,.6);
}
.retrato__foto img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 24%}
.retrato .clip{left:auto;right:30px;top:-22px;rotate:-7deg}
.retrato__pie{position:absolute;z-index:2;left:0;right:0;bottom:13px;margin:0;text-align:center;font-family:var(--maq);font-size:11px;line-height:1.5;letter-spacing:.24em;text-transform:uppercase;color:var(--tinta-suave)}

.novios__texto{text-align:center;max-width:560px;min-width:0}
.novios__nombres{
  display:block;
  margin:2px 0 0;
  padding:0 .08em;
  font-family:var(--firma);
  font-weight:400;
  font-size:clamp(70px,20vw,150px);
  line-height:1.06;
  color:var(--tinta);
  white-space:nowrap;
}
.novios__anuncio{margin:16px 0 0 .3em;font-family:var(--maq);font-size:13.5px;line-height:1.5;letter-spacing:.3em;text-transform:uppercase;color:var(--sello-osc)}
.novios__fecha{margin:12px 0 0;font-size:clamp(25px,6.9vw,31px);line-height:1.2;color:var(--tinta)}
.novios__fecha b{display:inline-block;margin-top:9px;font-family:var(--maq);font-weight:400;font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--tinta-suave)}
.novios__saludo{
  margin:26px auto 0;
  max-width:24em;
  padding:16px 20px 17px;
  border-radius:4px;
  background:var(--hueso);
  box-shadow:0 0 0 1px rgba(28,47,94,.16),0 16px 30px -22px rgba(18,29,60,.5);
  font-size:19px;
  line-height:1.45;
  color:var(--tinta-suave);
  text-wrap:balance;
}
.novios__saludo b{font-weight:600;font-size:1.3em;line-height:1.1;color:var(--tinta)}
.novios__saludo em{display:table;margin:11px auto 0;padding:6px 14px 4px;border-radius:4px;background:var(--tinta);color:var(--papel);font-family:var(--maq);font-style:normal;font-size:11.5px;line-height:1.4;letter-spacing:.14em;text-transform:uppercase}

/* ------------------------------------------------------------------
   CONSTA POR LA PRESENTE · la hoja del acta, escrita a máquina
   ------------------------------------------------------------------ */
.consta{background:linear-gradient(180deg,var(--papel-2) 0%,var(--papel) 100%)}
.hoja--acta{max-width:620px;margin:42px auto 0;padding:40px 24px 30px;rotate:-.7deg}
.consta__mensaje{margin:0;font-size:clamp(21px,5.6vw,25px);line-height:1.42;color:var(--tinta-osc);text-wrap:pretty}
.ficha{margin:26px 0 0;display:grid;gap:16px}
.ficha div{min-width:0}
.ficha dt{font-family:var(--maq);font-size:10.5px;line-height:1.5;letter-spacing:.22em;text-transform:uppercase;color:var(--sello-osc)}
.ficha dd{margin:3px 0 0;padding:0 0 4px;border-bottom:1px dashed rgba(28,47,94,.45);font-family:var(--maq);font-size:clamp(16px,4.5vw,19px);line-height:1.4;color:var(--tinta);min-height:1.75em}

/* ------------------------------------------------------------------
   NUESTRA HISTORIA · las pruebas salen del expediente
   ------------------------------------------------------------------ */
.historia{background:var(--papel)}
.historia__intro{margin:16px auto 0;max-width:24em;text-align:center;color:var(--tinta-suave);text-wrap:balance}
.pruebas{display:grid;gap:50px;max-width:1080px;margin:50px auto 0}
.prueba{width:min(100%,350px);margin:0 auto;padding:15px 15px 22px;rotate:-1.3deg}
.prueba:nth-child(even){rotate:1.1deg}
.prueba__foto{position:relative;margin:0;aspect-ratio:4/5;overflow:hidden;border-radius:2px;background:var(--papel-2)}
.prueba__foto img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover}
.prueba__texto{position:relative;padding:16px 6px 0}
.prueba__num{margin:0;font-family:var(--maq);font-size:10.5px;line-height:1.5;letter-spacing:.22em;text-transform:uppercase;color:var(--sello-osc)}
.prueba__anio{margin:6px 0 0;font-family:var(--maq);font-size:46px;line-height:.9;color:var(--tinta)}
.prueba__titulo{margin:8px 0 4px;font-family:var(--serif);font-weight:600;font-size:27px;line-height:1.1;color:var(--tinta)}
.prueba__que{margin:0;font-size:18px;line-height:1.45;color:var(--tinta-suave);text-wrap:pretty}
.veredicto{text-align:center;padding:4px 0 0}
.veredicto .prueba__que{max-width:21em;margin:0 auto}

/* ------------------------------------------------------------------
   LA FECHA · el día fijado y el plazo
   ------------------------------------------------------------------ */
.fecha-sec{background:radial-gradient(ellipse 90% 34% at 50% 0%,var(--azul-2) 0%,rgba(35,58,114,0) 70%),var(--azul);text-align:center}
.fecha-sec__cuerpo{display:grid;gap:34px;justify-items:center;max-width:860px;margin:30px auto 0}
.fecha{position:relative;display:flex;flex-direction:column;align-items:center}
.fecha__dia{font-family:var(--maq);font-size:14.5px;line-height:1.4;letter-spacing:.4em;text-transform:uppercase;color:var(--sello-osc);margin-left:.4em}
.fecha__num{font-family:var(--serif);font-weight:600;font-size:clamp(140px,43vw,196px);line-height:.86;letter-spacing:-.03em;color:var(--tinta);font-variant-numeric:lining-nums}
.fecha__mes{margin-top:6px;font-style:italic;font-size:clamp(25px,7vw,31px);line-height:1.15;color:var(--tinta)}
.azul .fecha__dia{color:var(--sello-claro)}
.azul .fecha__num,.azul .fecha__mes{color:var(--papel)}
.azul .fecha__letras{color:var(--crema-suave)}
.fecha__hora{margin-top:15px;padding:10px 18px 7px;border-radius:6px;background:var(--papel);color:var(--tinta-osc);font-family:var(--maq);font-size:13.5px;line-height:1.3;letter-spacing:.14em;text-transform:uppercase}
.almanaque{width:min(100%,318px);padding:32px 18px 20px;rotate:1.2deg}
.almanaque .clip{left:auto;right:28px;rotate:-6deg}
.almanaque__mes{position:relative;margin:0 0 12px;font-family:var(--maq);font-size:13px;line-height:1.5;letter-spacing:.24em;text-transform:uppercase;color:var(--sello-osc)}
.almanaque__rejilla{position:relative;display:grid;grid-template-columns:repeat(7,1fr);row-gap:3px}
.almanaque__rejilla span{position:relative;display:flex;align-items:center;justify-content:center;height:34px;font-family:var(--maq);font-size:15px;line-height:1;color:var(--tinta-suave)}
.almanaque__rejilla .dia-sem{height:26px;font-size:11px;color:var(--tinta);border-bottom:1px solid rgba(28,47,94,.3);margin-bottom:4px}
.almanaque__rejilla .dia-evento{color:var(--tinta);font-size:17px}
.almanaque__circulo{position:absolute;left:50%;top:50%;width:46px;height:42px;margin:-22px 0 0 -23px;overflow:visible;pointer-events:none}
.almanaque__circulo path{fill:none;stroke:var(--sello);stroke-width:2;stroke-linecap:round}
.fecha__letras{margin:32px auto 0;max-width:22em;font-style:italic;font-size:clamp(19px,5.2vw,22px);line-height:1.4;color:var(--tinta-suave);text-wrap:balance}
.cuenta{display:flex;justify-content:center;gap:clamp(7px,2.4vw,14px)}
.cuenta__dato{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  min-width:clamp(68px,20vw,102px);
  padding:15px 4px 9px;
  border-radius:3px;
  background:var(--hueso);
  box-shadow:0 0 0 1px rgba(28,47,94,.4),0 14px 24px -20px rgba(18,29,60,.6);
}
.cuenta__n{font-family:var(--maq);font-size:clamp(34px,10vw,52px);line-height:1;color:var(--tinta);min-width:1.3em}
.cuenta__t{margin-top:7px;font-family:var(--maq);font-size:10.5px;line-height:1.3;letter-spacing:.18em;text-transform:uppercase;color:var(--sello-osc)}
.cuenta__hoy{margin:12px 0 0;font-size:42px;line-height:1.1;color:var(--tinta)}

/* ------------------------------------------------------------------
   PADRES Y TESTIGOS · la hoja de firmas
   ------------------------------------------------------------------ */
.fe{background:var(--papel)}
.fe__intro{margin:16px auto 0;max-width:23em;text-align:center;color:var(--tinta-suave);text-wrap:balance}
.firmas{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  grid-template-areas:"novia novio" "centro centro" "testigos testigos";
  column-gap:14px;
  row-gap:64px;
  max-width:940px;
  margin:42px auto 0;
}
.firmas__tinta{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.firmas__tinta path{fill:none;stroke:var(--tinta);stroke-width:1.5;stroke-linecap:round}
.firmas__tinta circle{fill:var(--tinta)}
.firmas__grupo{position:relative;min-width:0;text-align:center}
.firmas__grupo--novia{grid-area:novia}
.firmas__grupo--novio{grid-area:novio}
.firmas__grupo--testigos{grid-area:testigos}
.firmas__grupo h3{margin:0 0 6px;font-family:var(--maq);font-weight:400;font-size:10.5px;line-height:1.5;letter-spacing:.2em;text-transform:uppercase;color:var(--sello-osc)}
.firmante{position:relative;display:flex;flex-direction:column;align-items:center;min-width:0;padding-top:4px}
.firmante + .firmante{margin-top:10px}
.firmante__firma{display:block;font-family:var(--firma);font-size:clamp(29px,8.4vw,42px);line-height:1.12;color:var(--tinta);white-space:nowrap}
.firmante__linea{display:block;width:88%;max-width:210px;height:1px;margin-top:-3px;background:var(--tinta);transform-origin:0 50%}
.firmante__nombre{display:block;margin-top:6px;font-family:var(--maq);font-weight:400;font-size:13px;line-height:1.35;color:var(--tinta-osc)}
.firmas__centro{grid-area:centro;position:relative;display:flex;flex-direction:column;align-items:center;justify-self:center}
.anillos-tinta{display:block;width:104px;height:70px;overflow:visible}
.anillo-tinta{fill:none;stroke:var(--tinta);stroke-width:2;stroke-linecap:round}
.firmas__novios{margin:2px 0 0;font-family:var(--firma);font-size:clamp(50px,14vw,72px);line-height:1.05;color:var(--tinta);white-space:nowrap;font-variant-ligatures:none}
.firmas__par{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:14px}
.firmas__par .firmante + .firmante{margin-top:0}

/* ------------------------------------------------------------------
   CEREMONIA Y RECEPCIÓN · toda la hoja es el botón al mapa
   ------------------------------------------------------------------ */
.lugares{background:linear-gradient(180deg,var(--papel-2) 0%,var(--papel) 100%)}
.lugares__lista{display:grid;gap:42px;max-width:940px;margin:48px auto 0}
.lugar{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3px;
  padding:36px 22px 28px;
  text-align:center;
  text-decoration:none;
  color:var(--tinta-osc);
  rotate:-.8deg;
  transition:background-color .4s ease;
}
.lugar:nth-child(even){rotate:.7deg}
.lugar__ico{position:relative;display:block;width:104px;height:104px;margin-bottom:10px}
.lugar__ico img{width:100%;height:100%;object-fit:contain;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.lugar__tipo{position:relative;font-family:var(--maq);font-size:11.5px;line-height:1.6;letter-spacing:.24em;text-transform:uppercase;color:var(--sello-osc)}
.lugar__nombre{position:relative;font-size:clamp(31px,8.6vw,39px);font-weight:600;line-height:1.06;color:var(--tinta);text-wrap:balance}
.lugar__dir{position:relative;margin-top:4px;font-size:18px;line-height:1.4;color:var(--tinta-suave);text-wrap:balance}
.lugar__hora{position:relative;margin-top:9px;font-size:18px;line-height:1.4;color:var(--tinta-suave)}
.lugar__hora b{color:var(--tinta)}
.lugar__ir{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:9px;
  min-height:48px;
  margin-top:17px;
  padding:2px 22px 0 16px;
  border-radius:8px;
  border:1px solid var(--tinta);
  color:var(--tinta);
  font-family:var(--maq);
  font-size:12.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  transition:background-color .35s ease,color .35s ease;
}
.lugar:hover,.lugar:focus-visible{background:#FFFFFF}
.lugar:hover .lugar__ir,.lugar:focus-visible .lugar__ir{background:var(--tinta);color:var(--papel)}
.lugar:hover .lugar__ico img{transform:scale(1.08)}
@media (hover:none){
  .lugar__ir{background:var(--tinta);color:var(--papel)}
}

/* ------------------------------------------------------------------
   ORDEN DEL DÍA · a máquina, con la hora encerrada en tinta
   ------------------------------------------------------------------ */
.dia{--pad-r:var(--pad)}
.orden{position:relative;list-style:none;max-width:660px;margin:40px auto 0;padding:0}
.punto{position:relative;display:grid;grid-template-columns:104px minmax(0,1fr);column-gap:16px;align-items:center;padding:0 0 30px}
.punto:last-child{padding-bottom:0}
.punto__hora{position:relative;grid-row:1 / span 2;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:74px;padding-top:4px;text-align:center}
.punto__hora b{position:relative;font-family:var(--maq);font-weight:400;font-size:29px;line-height:1;color:var(--tinta)}
.punto__hora small{position:relative;margin-top:5px;font-family:var(--maq);font-size:10.5px;line-height:1.2;letter-spacing:.06em;color:var(--tinta-suave)}
.punto__circulo{position:absolute;left:-5px;top:-5px;width:calc(100% + 10px);height:calc(100% + 10px);overflow:visible;pointer-events:none}
.punto__circulo path{fill:none;stroke:var(--sello);stroke-width:1.8;stroke-linecap:round}
.punto__que{align-self:end;font-family:var(--maq);font-size:clamp(19px,5.3vw,23px);line-height:1.2;color:var(--tinta)}
.punto__donde{align-self:start;margin-top:3px;font-style:italic;font-size:18px;line-height:1.35;color:var(--tinta-suave)}

/* ------------------------------------------------------------------
   CÓDIGO DE VESTIMENTA
   ------------------------------------------------------------------ */
.vestir{background:linear-gradient(180deg,var(--papel-2) 0%,var(--papel) 100%);text-align:center}
.vestir__nota{margin:16px auto 0;max-width:24em;color:var(--tinta-suave);text-wrap:balance}
.vestir__nota--tonos{margin-top:34px}
.atuendos{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;max-width:480px;margin:42px auto 0}
.atuendo{margin:0;min-width:0;display:flex;flex-direction:column;align-items:center;padding:14px 10px 16px;rotate:-1.2deg}
.atuendo:nth-child(even){rotate:1deg}
.atuendo .clip{left:18px}
.atuendo__caja{position:relative;width:100%;aspect-ratio:3/4;display:flex;align-items:center;justify-content:center;border-radius:2px;background:var(--papel)}
.atuendo__caja img{height:92%;width:auto;max-width:92%;object-fit:contain}
.atuendo figcaption{position:relative;margin-top:12px;display:flex;flex-direction:column;align-items:center}
.atuendo figcaption b{font-size:26px;line-height:1.1;color:var(--tinta)}
.atuendo figcaption span{font-size:16.5px;line-height:1.3;color:var(--tinta-suave);text-wrap:balance}
.tonos{display:flex;flex-wrap:wrap;justify-content:center;gap:16px 6px;list-style:none;margin:18px auto 0;padding:0;max-width:440px}
.tonos li{display:flex;flex-direction:column;align-items:center;gap:9px;width:60px;text-align:center;font-family:var(--maq);font-size:10px;line-height:1.35;letter-spacing:.06em;text-transform:uppercase;color:var(--tinta-suave)}
/* cada tono es una gota de tinta sobre el papel */
.tono{display:block;width:44px;height:44px;border-radius:50% 50% 50% 50% / 58% 58% 42% 42%;background:var(--c);box-shadow:0 0 0 1px rgba(20,33,63,.2),0 0 0 5px var(--hueso),0 0 0 6px rgba(28,47,94,.28)}
.vestir__blanco{margin:26px 0 0;font-style:italic;font-size:23px;line-height:1.3;color:var(--tinta)}

/* ------------------------------------------------------------------
   GALERÍA · los anexos
   ------------------------------------------------------------------ */
.galeria-sec{background:radial-gradient(ellipse 90% 40% at 50% 0%,var(--azul-2) 0%,rgba(35,58,114,0) 70%),var(--azul)}
.galeria__guia{display:flex;align-items:center;justify-content:center;gap:8px;margin:16px 0 0;font-size:16px;color:var(--crema-suave)}
.guia__mano{width:22px;height:22px;color:var(--papel);animation:deslizar 2.2s ease-in-out infinite}
@keyframes deslizar{0%,100%{transform:translateX(6px)}50%{transform:translateX(-8px) rotate(-8deg)}}
.galeria{
  display:flex;
  gap:24px;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  padding:26px 13vw 20px;
  margin:6px calc(-1 * var(--pad)) 0;
  scrollbar-width:none;
}
.galeria::-webkit-scrollbar{display:none}
.foto{position:relative;flex:0 0 74vw;max-width:330px;margin:0;scroll-snap-align:center;rotate:-1.4deg;transition:opacity .45s ease}
.foto:nth-child(even){rotate:1.2deg}
.foto:nth-child(3n){rotate:-.6deg}
.foto__marco{position:relative;aspect-ratio:3/4;overflow:hidden;border-radius:2px;background:var(--azul-2);box-shadow:0 0 0 9px var(--hueso),0 0 0 10px rgba(17,27,56,.4),0 26px 34px -14px rgba(8,13,30,.8)}
.foto__marco img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.foto figcaption{margin-top:22px;text-align:center;font-style:italic;font-size:19px;line-height:1.25;color:var(--papel)}
.foto figcaption small{display:block;margin-bottom:2px;font-family:var(--maq);font-style:normal;font-size:10.5px;line-height:1.5;letter-spacing:.22em;text-transform:uppercase;color:var(--sello-claro)}
.puntos{display:flex;justify-content:center;margin-top:2px}
.punto-g{position:relative;width:44px;height:44px;padding:0;border:0;background:transparent;cursor:pointer}
.punto-g::before{content:'';position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;border:1px solid var(--papel);transition:background-color .35s ease}
.punto-g--activo::before{background:var(--papel)}

/* ------------------------------------------------------------------
   LLUVIA DE SOBRES · la hoja del QR sale del sobre
   ------------------------------------------------------------------ */
.sobres-sec{background:var(--papel);text-align:center}
.sobres__intro{margin:16px auto 0;max-width:26em;color:var(--tinta-suave);text-wrap:pretty}
.sobres__intro b{color:var(--tinta)}
.sobres{position:relative;max-width:520px;margin:30px auto 0;padding:16px 0 0}
.sobres__lluvia{position:absolute;inset:-20px -40px 0;pointer-events:none;overflow:hidden}
.sobre-cae{
  position:absolute;
  top:-60px;
  width:var(--t,34px);
  height:auto;
  max-width:none;
  opacity:.6;
  animation:caer var(--d,9s) linear var(--r,0s) infinite;
}
@keyframes caer{0%{transform:translate3d(0,0,0) rotate(var(--g0,-12deg))}100%{transform:translate3d(var(--x,20px),760px,0) rotate(var(--g1,18deg))}}
.sobres.pausa .sobre-cae{animation-play-state:paused}
.sobre{position:relative;width:min(88%,330px);margin:0 auto;padding-top:8px;overflow:hidden}
.sobre__hoja{
  position:relative;
  z-index:1;
  width:78%;
  margin:0 auto;
  padding:14px 14px 112px;
  border-radius:3px;
  background:var(--hueso);
  box-shadow:0 0 0 1px rgba(28,47,94,.16);
}
.sobre__hoja img{width:100%;height:auto;border-radius:2px}
.sobre__hoja figcaption{margin-top:10px;font-family:var(--maq);font-size:11px;line-height:1.45;letter-spacing:.02em;color:var(--tinta-suave);text-wrap:balance}
.sobre__cuerpo{position:relative;z-index:2;display:block;width:100%;margin-top:-100px;filter:drop-shadow(0 -7px 9px rgba(18,29,60,.2))}
.sobre__cuerpo img{display:block;width:100%;height:auto}
.sobres__texto{position:relative;margin:22px auto 0;max-width:23em;font-size:18px;color:var(--tinta-suave);text-wrap:balance}

/* ------------------------------------------------------------------
   FIRMA EL LIBRO · confirmar (sección única)
   ------------------------------------------------------------------ */
.confirmar{background:linear-gradient(180deg,var(--papel-2) 0%,var(--papel) 100%);text-align:center}
.confirmar__texto{margin:16px auto 0;max-width:25em;color:var(--tinta-suave);text-wrap:pretty}
.confirmar__texto b{color:var(--tinta)}
.libro{
  max-width:540px;
  margin:44px auto 28px;
  padding:34px 18px 20px;
  text-align:left;
  background:
    linear-gradient(90deg,rgba(181,56,45,0) 0 11px,rgba(181,56,45,.26) 11px 12px,rgba(181,56,45,0) 12px),
    var(--hueso);
}
.libro::before{display:none}
.libro__cabeza{display:flex;justify-content:space-between;gap:10px;margin:0 0 14px;padding:0 0 8px 6px;border-bottom:3px double rgba(28,47,94,.4);font-family:var(--maq);font-size:10.5px;line-height:1.5;letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-suave)}
.pase{display:flex;flex-direction:column;align-items:center;gap:1px;margin:0 0 16px;padding:12px 14px 12px;border-radius:3px;background:var(--papel);box-shadow:0 0 0 1px rgba(28,47,94,.2);text-align:center}
.pase__rotulo{font-family:var(--maq);font-size:10px;line-height:1.6;letter-spacing:.24em;text-transform:uppercase;color:var(--sello-osc)}
.pase__nombre{font-size:clamp(27px,7.6vw,34px);line-height:1.1;color:var(--tinta);text-wrap:balance}
.pase__pases{margin-top:8px;padding:6px 13px 4px;border-radius:4px;background:var(--tinta);color:var(--papel);font-family:var(--maq);font-size:11.5px;line-height:1.4;letter-spacing:.14em;text-transform:uppercase}
.libro__renglon{display:flex;align-items:flex-end;gap:10px;padding-left:6px}
.libro__rotulo{flex:0 0 auto;padding-bottom:5px;font-style:italic;font-size:23px;line-height:1.2;color:var(--tinta)}
.libro__entrada{
  flex:1 1 auto;
  min-width:0;
  min-height:46px;
  padding:10px 2px 3px;
  border:0;
  border-bottom:1.5px solid rgba(28,47,94,.6);
  border-radius:0;
  background:transparent;
  color:var(--tinta);
  font-family:var(--maq);
  font-size:19px;
  line-height:1.3;
  -webkit-appearance:none;
  appearance:none;
  transition:border-color .3s ease;
}
.libro__entrada::placeholder{color:#58647F;opacity:1}
.libro__entrada:focus{outline:none;border-bottom-color:var(--sello);box-shadow:0 1.5px 0 var(--sello)}
.libro__texto{margin:12px 0 0;padding-left:6px;font-size:20px;line-height:1.35;color:var(--tinta-osc);text-wrap:pretty}
.contador__pregunta{margin:14px 0 0;padding-left:6px;font-style:italic;font-size:19px;line-height:1.3;color:var(--tinta)}
.libro__renglon--contador{align-items:center;margin-top:10px}
.libro__renglon--contador .libro__rotulo{padding-bottom:0}
.contador{display:flex;align-items:center;gap:12px}
.contador__btn{
  display:flex;
  align-items:center;
  justify-content:center;
  width:48px;
  height:48px;
  padding:0;
  border:1px solid var(--tinta);
  border-radius:50%;
  background:var(--hueso);
  color:var(--tinta);
  cursor:pointer;
  transition:background-color .3s ease,color .3s ease;
}
.contador__btn svg{width:20px;height:20px}
.contador__btn:hover,.contador__btn:focus-visible{background:var(--tinta);color:var(--papel)}
.contador__btn:disabled{opacity:.35;cursor:default;pointer-events:none}
.contador__n{min-width:6.6em;text-align:center;font-family:var(--maq);font-size:15px;line-height:1.3;color:var(--tinta-suave)}
.contador__n b{font-weight:400;font-size:32px;line-height:1;color:var(--tinta);vertical-align:-3px}
/* el lienzo de la firma */
.lienzo{position:relative;height:clamp(150px,42vw,186px);margin:20px 0 0;border-radius:4px;background:#FFFEFA;box-shadow:inset 0 0 0 1.5px rgba(28,47,94,.34)}
.lienzo__papel{position:absolute;inset:0;z-index:2;display:block;width:100%;height:100%;border-radius:4px;touch-action:none;cursor:crosshair;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.lienzo__papel:focus-visible{outline-offset:2px}
.lienzo__guia{position:absolute;left:0;right:0;top:26%;z-index:1;display:flex;align-items:center;justify-content:center;gap:8px;font-family:var(--maq);font-size:12px;line-height:1.3;letter-spacing:.12em;text-transform:uppercase;color:var(--tinta-suave);transition:opacity .4s ease;pointer-events:none}
.lienzo__guia .pista__mano{margin-top:-4px}
.lienzo--firmado .lienzo__guia{opacity:0}
.lienzo__equis{position:absolute;left:7%;bottom:calc(24% + 2px);z-index:1;font-family:var(--maq);font-size:17px;line-height:1;color:var(--tinta-suave)}
.lienzo__renglon{position:absolute;left:13%;right:9%;bottom:24%;z-index:1;height:1px;background:rgba(28,47,94,.6)}
/* el único sello: cae sobre la firma */
.sello{position:absolute;right:-7px;top:-14px;z-index:3;width:clamp(104px,30vw,128px);aspect-ratio:1;color:var(--sello);opacity:0;visibility:hidden;pointer-events:none;mix-blend-mode:multiply}
.sello svg{display:block;width:100%;height:100%;overflow:visible}
.sello__aro{font-family:var(--maq);font-size:12.6px;letter-spacing:1.5px}
.sello__centro{font-family:var(--maq);font-size:23px;letter-spacing:1px}
.sello__fecha{font-family:var(--maq);font-size:12.5px;letter-spacing:1px}
.libro__firmante{min-height:1.5em;margin:8px 0 0;padding-left:6px;font-family:var(--maq);font-size:13.5px;line-height:1.5;color:var(--tinta)}
.libro__acciones{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:10px}
.confirmar__nota{margin:16px auto 0;max-width:23em;font-style:italic;font-size:16.5px;line-height:1.4;color:var(--tinta-suave);text-wrap:balance}

/* ------------------------------------------------------------------
   NUESTRA CANCIÓN · el casete (anexo sonoro)
   ------------------------------------------------------------------ */
.cancion{background:radial-gradient(ellipse 80% 46% at 50% 64%,var(--azul-2) 0%,rgba(35,58,114,0) 70%),var(--azul);text-align:center}
.cancion__artista{margin:14px 0 0 .3em;font-family:var(--maq);font-size:14px;line-height:1.5;letter-spacing:.3em;text-transform:uppercase;color:var(--sello-claro)}
.casete{
  position:relative;
  display:block;
  width:min(84vw,340px);
  margin:32px auto 0;
  padding:0;
  border:0;
  border-radius:14px;
  background:transparent;
  color:inherit;
  font:inherit;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.casete__caja{
  position:relative;
  display:block;
  aspect-ratio:1.58;
  border-radius:14px;
  background:linear-gradient(180deg,#FCF9F0 0%,#EDE4CF 100%);
  box-shadow:inset 0 0 0 2px rgba(17,27,56,.2),0 26px 40px -18px rgba(5,9,22,.85);
  transition:box-shadow .4s ease;
}
.casete:hover .casete__caja,.casete:focus-visible .casete__caja,.cancion.tocando .casete__caja{box-shadow:inset 0 0 0 2px rgba(17,27,56,.2),0 26px 40px -18px rgba(5,9,22,.85),0 0 0 7px rgba(247,241,227,.16)}
.casete__etiqueta{
  position:absolute;
  left:6%;
  right:6%;
  top:6.5%;
  height:46%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  border-radius:5px;
  background:linear-gradient(180deg,var(--sello) 0 15%,#FFFEFA 15% 100%);
  box-shadow:inset 0 0 0 1px rgba(17,27,56,.22);
  padding-top:5.5%;
  color:var(--tinta);
  text-align:center;
}
.casete__etiqueta small{font-family:var(--maq);font-size:clamp(7.5px,2.2vw,9.5px);line-height:1.3;letter-spacing:.14em;text-transform:uppercase;color:var(--sello-osc)}
.casete__etiqueta b{font-family:var(--firma);font-weight:400;font-size:clamp(31px,9.4vw,40px);line-height:1}
.casete__etiqueta i{margin-top:5px;font-family:var(--maq);font-style:normal;font-size:clamp(8.5px,2.4vw,10.5px);line-height:1.2;letter-spacing:.16em;text-transform:uppercase;color:var(--tinta-suave)}
.casete__ventana{
  position:absolute;
  left:17%;
  right:17%;
  top:58%;
  height:25%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 5%;
  border-radius:9px;
  background:var(--azul-osc);
  box-shadow:inset 0 0 0 2px rgba(17,27,56,.55);
}
.casete__carrete{
  position:relative;
  display:block;
  height:80%;
  aspect-ratio:1;
  border-radius:50%;
  background:
    radial-gradient(circle,var(--azul-osc) 0 20%,rgba(0,0,0,0) 21%),
    conic-gradient(from 0deg,var(--papel) 0 6%,rgba(0,0,0,0) 6% 16.6%,var(--papel) 16.6% 22.6%,rgba(0,0,0,0) 22.6% 33.3%,var(--papel) 33.3% 39.3%,rgba(0,0,0,0) 39.3% 50%,var(--papel) 50% 56%,rgba(0,0,0,0) 56% 66.6%,var(--papel) 66.6% 72.6%,rgba(0,0,0,0) 72.6% 83.3%,var(--papel) 83.3% 89.3%,rgba(0,0,0,0) 89.3% 100%);
  box-shadow:inset 0 0 0 2px var(--papel);
  animation:girar 2.6s linear infinite paused;
}
.cancion.tocando .casete__carrete{animation-play-state:running}
.casete__cinta{flex:1 1 auto;height:34%;margin:0 4%;border-radius:2px;background:linear-gradient(180deg,#3B2A22 0%,#231813 100%)}
.casete__pie{position:absolute;left:28%;right:28%;bottom:5%;display:flex;justify-content:space-between}
.casete__pie i{display:block;width:7px;height:7px;border-radius:50%;background:rgba(17,27,56,.34)}
.casete__play{
  position:absolute;
  right:-12px;
  bottom:-16px;
  width:58px;
  height:58px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--sello);
  color:#FFFFFF;
  box-shadow:0 0 0 3px var(--azul);
  transition:background-color .35s ease,color .35s ease;
}
.casete__play svg{width:26px;height:26px}
.casete:hover .casete__play,.casete:focus-visible .casete__play{background:var(--papel);color:var(--tinta)}
.ico-pausa{display:none}
.cancion.tocando .ico-play{display:none}
.cancion.tocando .ico-pausa{display:block}
.cancion__pista{margin:34px 0 0;font-size:17px;color:var(--crema-suave)}
.cancion__pista a{color:#FFFFFF}
.yt-oculto{position:absolute;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none;left:-9999px}

/* ------------------------------------------------------------------
   CIERRE · leído lo cual, firmamos
   ------------------------------------------------------------------ */
.cierre{padding-top:92px;padding-bottom:86px;background:radial-gradient(ellipse 90% 50% at 50% 100%,#FFFDF6 0%,rgba(255,253,246,0) 70%),var(--papel);text-align:center}
.cierre__dentro{position:relative;max-width:640px;margin:0 auto}
.cierre__texto{margin:0 auto;max-width:21em;font-size:clamp(24px,6.5vw,30px);line-height:1.26;color:var(--tinta);text-wrap:balance}
.cierre__texto b{font-weight:600;font-style:italic}
.cierre__firmas{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:18px;max-width:480px;margin:28px auto 0}
.cierre__firma,.cierre__testigo{display:flex;flex-direction:column;align-items:center;min-width:0}
.cierre__firma .firma{display:block;font-family:var(--firma);font-size:clamp(60px,17.5vw,92px);line-height:1.02;color:var(--tinta);white-space:nowrap}
.cierre__linea{display:block;width:88%;height:1px;margin-top:-4px;background:var(--tinta);transform-origin:0 50%}
.cierre__firma small,.cierre__testigo small{margin-top:8px;font-family:var(--maq);font-size:10.5px;line-height:1.5;letter-spacing:.18em;text-transform:uppercase;color:var(--tinta-suave)}
.cierre__testigo{max-width:250px;margin:24px auto 0}
.cierre__lienzo{display:block;width:220px;height:100px}
.cierre__testigo .cierre__linea{margin-top:-14px}
.cierre .boton{margin-top:34px}

/* ------------------------------------------------------------------
   CRÉDITOS · pie común
   ------------------------------------------------------------------ */
.creditos{
  padding:56px 24px calc(var(--abajo) + 104px);
  text-align:center;
  background:var(--azul-osc);
  color:var(--papel);
}
.creditos__pregunta{margin:0 0 18px;font-size:clamp(25px,6.8vw,31px);line-height:1.2;color:var(--papel)}
.creditos__wa{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:52px;
  padding:2px 24px 0;
  border-radius:8px;
  background:var(--papel);
  color:var(--tinta-osc);
  text-decoration:none;
  font-family:var(--maq);
  font-size:13px;
  letter-spacing:.12em;
  text-transform:uppercase;
  box-shadow:none;
  transition:background-color .35s ease,color .35s ease;
}
.creditos__wa svg{width:20px;height:20px;margin-top:-3px}
.creditos__wa:hover,.creditos__wa:focus-visible{background:var(--sello);color:#FFFFFF;box-shadow:none}
.creditos__correo{
  display:table;
  margin:20px auto 0;
  padding:12px 2px;
  color:var(--crema-suave);
  font-size:16.5px;
  text-decoration:none;
  background:linear-gradient(var(--papel),var(--papel)) no-repeat 0 calc(100% - 9px)/0 1px;
  transition:background-size .4s ease,color .35s ease;
}
.creditos__correo:hover,.creditos__correo:focus-visible{background-size:100% 1px;color:#FFFFFF}
.creditos__extras{display:none}
.creditos__marca{margin:28px auto 0;padding-top:20px;max-width:420px;border-top:1px solid rgba(247,241,227,.26);display:flex;flex-direction:column;gap:4px}
.creditos__logo{font-family:var(--serif);font-weight:600;font-size:23px;line-height:1.2;color:var(--papel)}
.creditos__lema{font-family:var(--maq);font-size:11px;line-height:1.5;letter-spacing:.1em;text-transform:uppercase;color:var(--crema-suave)}

/* celulares angostos: los botones no se parten en dos líneas */
@media (max-width:380px){
  .boton,.creditos__wa,.lugar__ir,.portada__pista{letter-spacing:.08em}
  .boton,.creditos__wa{padding-left:18px;padding-right:18px}
  .portada__pista{padding:2px 18px 0 13px;font-size:12.5px}
  .punto{grid-template-columns:96px minmax(0,1fr);column-gap:14px}
  .punto__hora small{font-size:10px;letter-spacing:0}
  .contador{gap:8px}
  .contador__n{min-width:5.8em}
  .tonos{max-width:230px}
}

/* ------------------------------------------------------------------
   HORIZONTAL (escritorio, celular echado): la portada
   ------------------------------------------------------------------ */
html.horizontal .portada__nombres{font-size:max(58px,min(12.4vw,calc((var(--cielo,200px) - 58px) * .85),192px))}
html.horizontal .portada__sobre{font-size:clamp(11px,1.05vw,15px);margin-bottom:0}
html.horizontal .subraya--portada{width:min(26vw,360px)}
/* con invitación por familia, en horizontal: los nombres ceden sitio y la etiqueta va en una sola línea */
html.horizontal.invitado .portada__nombres{font-size:max(52px,min(12.4vw,calc((var(--cielo,200px) - 120px) * .85),192px))}
html.horizontal .portada__para{flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:2px 14px;margin-top:4px;padding:8px 20px 7px}
html.horizontal .portada__para em{margin-top:0}
/* celular echado: arriba queda poco sitio; solo los nombres */
@media (orientation:landscape) and (max-height:500px){
  .portada__tap{flex-direction:row;justify-content:center;align-items:flex-end;padding-bottom:calc(var(--abajo) + 12px)}
  .portada__pista{min-height:44px}
  .subraya--portada,.portada__sobre{display:none}
  .portada__cabecera{min-height:0;padding-top:calc(var(--arriba) + 4px)}
  html.horizontal .portada__nombres{font-size:max(40px,min(12.4vw,calc((var(--cielo,100px) - 18px) * .66),96px))}
  html.invitado .portada__para{margin-top:2px;padding:5px 14px}
  html.horizontal.invitado .portada__nombres{font-size:max(34px,min(12.4vw,calc((var(--cielo,100px) - 50px) * .8),96px))}
}

/* ------------------------------------------------------------------
   ESCRITORIO
   ------------------------------------------------------------------ */
@media (min-width:768px){
  :root{--pad:48px}
  body{font-size:20px}
  section{padding:106px var(--pad) 100px}
  .titulo{font-size:clamp(58px,6vw,86px)}
  .rotulo{font-size:13.5px}
  .subraya{width:280px;height:28px}

  .novios{padding:128px var(--pad) 96px}
  .novios__dentro{gap:44px}
  .retrato{width:340px;margin:30px 0}
  .retrato__foto{border-width:16px;border-bottom-width:54px}
  .retrato__pie{bottom:17px;font-size:12px}
  .esquinero{width:36px;height:36px}
  .novios__nombres{font-size:clamp(104px,13vw,128px)}
  .subraya--nombres{width:340px}
  .novios__anuncio{margin-top:22px;font-size:15px}

  .hoja--acta{margin-top:54px;padding:56px 54px 46px}
  .hoja::before{inset:12px}
  .consta__mensaje{font-size:27px}
  .ficha{grid-template-columns:1fr 1fr;gap:22px 34px;margin-top:34px}
  .ficha dd{font-size:20px}

  .pruebas{grid-template-columns:repeat(3,minmax(0,1fr));gap:34px;align-items:start;margin-top:64px}
  .prueba{width:100%;max-width:330px}
  .prueba:nth-child(2){margin-top:44px}
  .veredicto{grid-column:1 / -1;margin-top:8px}
  .prueba__anio{font-size:52px}

  .fecha-sec__cuerpo{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:40px;margin-top:40px}
  .fecha__num{font-size:232px}
  .fecha__mes{font-size:34px}
  .almanaque{width:350px;padding:38px 26px 26px}
  .almanaque__rejilla span{height:38px;font-size:16.5px}
  .fecha__letras{font-size:24px;margin-top:44px}
  .cuenta__dato{min-width:118px;padding:18px 6px 11px}
  .cuenta__n{font-size:58px}
  .cuenta__t{font-size:11.5px}

  .firmas{max-width:660px;column-gap:40px;row-gap:74px;margin-top:56px}
  .firmas__grupo h3{font-size:12px}
  .firmante__firma{font-size:46px}
  .firmante__nombre{font-size:15px}
  .firmas__novios{font-size:92px}
  .anillos-tinta{width:124px;height:84px}
  .firmas__par{max-width:560px;margin:0 auto;column-gap:40px}

  .lugares__lista{grid-template-columns:1fr 1fr;gap:38px;margin-top:60px}
  .lugar{padding:48px 30px 38px}
  .lugar__ico{width:120px;height:120px}

  .orden{margin-top:54px}
  .punto{grid-template-columns:150px minmax(0,1fr);column-gap:30px;padding-bottom:38px}
  .punto__hora{min-height:88px}
  .punto__hora b{font-size:36px}
  .punto__hora small{font-size:12px}
  .punto__que{font-size:27px}
  .punto__donde{font-size:20px}

  .atuendos{gap:40px;max-width:540px;margin-top:54px}
  .atuendo{padding:18px 14px 22px}
  .tono{width:50px;height:50px}

  .galeria__guia{display:none}
  .galeria{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:56px 44px;
    overflow:visible;
    padding:10px 0 0;
    margin:54px auto 0;
    max-width:1000px;
  }
  .foto{flex:none;max-width:none}
  .puntos{display:none}
  /* el cursor apaga a las otras y agranda la FOTO (la caja nunca se mueve) */
  .galeria:has(.foto:hover) .foto{opacity:.4}
  .galeria:has(.foto:hover) .foto:hover{opacity:1}
  .foto:hover .foto__marco img{transform:scale(1.06)}

  .sobres{margin-top:40px}
  .sobre{width:350px}
  .libro{margin-top:56px;padding:44px 38px 28px;background:linear-gradient(90deg,rgba(181,56,45,0) 0 23px,rgba(181,56,45,.26) 23px 24px,rgba(181,56,45,0) 24px),var(--hueso)}
  .libro__cabeza{font-size:11.5px}
  .lienzo{height:200px}
  .sello{width:142px;right:-22px;top:-22px}
  .casete{width:380px}
  .casete__play{width:64px;height:64px}
  .cierre{padding-top:120px;padding-bottom:110px}
  .cierre__firma .firma{font-size:104px}
}
/* desde 1000 px: la foto y los nombres lado a lado, y las familias a los costados de los anillos */
@media (min-width:1000px){
  .novios__dentro{grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:84px;align-items:center;justify-items:center}
  .novios__nombres{font-size:clamp(96px,calc((100vw - 640px) / 4.4),168px)}
  .firmas{max-width:940px;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);grid-template-areas:"novia centro novio" "testigos testigos testigos";column-gap:34px;align-items:center}
  .firmante__firma{font-size:44px}
  .firmas__novios{font-size:84px}
}
@media (min-width:1100px){
  .firmante__firma{font-size:50px}
  .firmas__novios{font-size:92px}
  .portada__pista{min-height:62px;padding:3px 36px 0 28px;font-size:15.5px;gap:13px}
  .portada__pista .pista__mano{width:27px;height:27px}
  .portada__fecha{font-size:20px;padding:10px 26px 11px}
  .portada__tap{gap:16px}
  .novios__dentro{grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:110px}
  .novios__texto{max-width:700px}
  .retrato{width:380px}
}
@media (min-width:1600px){
  .portada__pista{min-height:70px;padding:3px 42px 0 32px;font-size:17px}
  .portada__pista .pista__mano{width:30px;height:30px}
  .portada__fecha{font-size:22px;padding:11px 30px 12px}
  .portada__sobre{letter-spacing:.42em}
}

/* ------------------------------------------------------------------
   MOVIMIENTO REDUCIDO
   ------------------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  html.js .revela{opacity:1;transform:none;transition:none}
  .pluma__dentro,.portada__pista::before,.pista__mano,.guia__mano,.sobre-cae,.musica-flotante__ondas i,.musica-flotante__carrete,.casete__carrete,.tec-cursor::after{animation:none!important}
}