/* Atelier · Hojarasca. Registro «papel con detalles»: un solo papel crema y, encima, lo pintado a mano.
   Acuarelas de flores en terracota, rosa empolvado y hojas secas; íconos de línea a una tinta café;
   fotos con la orilla rasgada. En escritorio, la hoja descansa sobre una mesa de madera oscura. */
.inv[data-theme="at-hojarasca"]{
  --at-papel:#FBF7F1; --at-fondo:#F5EFE6; --at-tinta:#4A3328; --at-tenue:#8C7366; --at-acento:#B5603D; --at-linea:rgba(74,51,40,.16);
  --at-fd:'Cormorant Garamond'; --at-ft:'EB Garamond';
  --terra:#B5603D; --terra2:#9E4F31; --rosa:#D9A79A; --cafe:#4A3328; --crema:#F5EFE6;
  --papel:linear-gradient(rgba(252,249,244,.4),rgba(252,249,244,.4)),url(/img/texturas/papel-crema-teja.jpg) center top/900px auto repeat,#F8F2EA;
  font-size:18px; line-height:1.6;
}
/* Mesa de madera oscura (solo se ve en escritorio, a los lados de la hoja): veta vertical dibujada con ruido. */
.inv[data-theme="at-hojarasca"] .hj,.hj-op{--madera:
  url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='600'><filter id='v'><feTurbulence type='fractalNoise' baseFrequency='.22 .006' numOctaves='4' seed='11' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .1  0 0 0 0 .06  0 0 0 0 .03  0 0 0 .75 0'/></filter><rect width='100%' height='100%' filter='url(%23v)'/></svg>") 0 0/300px 600px,
  linear-gradient(90deg,rgba(0,0,0,.25),rgba(0,0,0,0) 30%,rgba(0,0,0,0) 70%,rgba(0,0,0,.25)),#4A3426}

/* ---------- Hoja ---------- */
.hj{position:relative}
.hj-papel{position:relative;isolation:isolate;overflow:hidden;background:var(--papel);background-blend-mode:normal,multiply}
.hj-papel.at-grano::after{opacity:.5}
@media (min-width:760px){
  .inv[data-theme="at-hojarasca"]{--at-fondo:#3A291E}
  .inv[data-theme="at-hojarasca"] .hj{background:var(--madera);padding:0 0 0}
  .hj-papel{max-width:620px;margin:0 auto;box-shadow:0 0 0 1px rgba(0,0,0,.25),0 0 50px 6px rgba(0,0,0,.45),0 0 14px rgba(0,0,0,.3)}
  .inv[data-theme="at-hojarasca"] .inv-brand{color:rgba(245,239,230,.66)}
  .inv[data-theme="at-hojarasca"] .inv-brand a{color:rgba(245,239,230,.85)}
}

/* ---------- Detalles pintados ---------- */
.hj-ram{position:absolute;z-index:2;display:block;pointer-events:none;aspect-ratio:1;background:url(/img/texturas/hojarasca-ramillete.webp) left top/contain no-repeat}
.hj-guir{display:block;margin:0 auto;pointer-events:none;aspect-ratio:1502/506;background:url(/img/texturas/hojarasca-guirnalda.webp) center/contain no-repeat}
.hj-ico{display:block;width:44px;height:44px;background:var(--cafe);
  -webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat}
.hj-ico-iglesia{--ico:url(/img/texturas/hojarasca-ico-iglesia.png)}
.hj-ico-pareja{--ico:url(/img/texturas/hojarasca-ico-pareja.png)}
.hj-ico-copas{--ico:url(/img/texturas/hojarasca-ico-copas.png)}
.hj-ico-cubiertos{--ico:url(/img/texturas/hojarasca-ico-cubiertos.png)}
.hj-ico-fuegos{--ico:url(/img/texturas/hojarasca-ico-fuegos.png)}
.hj-ico-regalo{--ico:url(/img/texturas/hojarasca-ico-regalo.png)}
.hj-ico-calendario{--ico:url(/img/texturas/hojarasca-ico-calendario.png)}
.hj-ico-tit{width:58px;height:58px;margin:0 auto 18px;background:var(--terra)}
.hj-fil{position:relative;display:block;width:120px;height:12px;margin:14px auto 0;color:var(--terra)}
.hj-fil::before,.hj-fil::after{content:"";position:absolute;top:50%;width:48px;height:1px;background:currentColor;opacity:.55}
.hj-fil::before{left:0}.hj-fil::after{right:0}
.hj-fil svg{position:absolute;left:50%;top:0;width:12px;height:11px;transform:translateX(-50%);fill:currentColor}

/* ---------- Orilla rasgada ----------
   La tira rasgada (PNG con alfa) recorta un pedazo de papel que se pone sobre la orilla de la foto; detrás asoma
   una franja de fibra blanca. Cada foto usa otro tramo de la tira (--rx). */
.hj-rasgo{position:absolute;left:0;right:0;z-index:1;height:clamp(30px,8.5vw,52px);pointer-events:none}
.hj-rasgo-abajo{bottom:-1px}
.hj-rasgo-arriba{top:-1px;transform:scale(-1,-1)}
.hj-rasgo::before,.hj-rasgo::after{content:"";position:absolute;inset:0;
  -webkit-mask:url(/img/texturas/hojarasca-rasgo.png) var(--rx,0%) 100%/170% 100% no-repeat;mask:url(/img/texturas/hojarasca-rasgo.png) var(--rx,0%) 100%/170% 100% no-repeat}
.hj-rasgo::before{background:#FFFDF8;transform:translateY(-5px);box-shadow:none}
.hj-rasgo::after{background:var(--papel);background-blend-mode:normal,multiply}
.hj-foto{position:relative;z-index:1;margin:0;isolation:isolate}
.hj-foto > img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;background:#D8C8B6}
.hj-foto::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;box-shadow:inset 0 0 60px rgba(60,35,20,.18)}
.hj-ram-foto{width:min(44%,260px);bottom:-13%}
.hj-ram-izq.hj-ram-foto{left:-5%;transform:scaleY(-1)}
.hj-ram-der.hj-ram-foto{right:-5%;transform:scale(-1,-1)}

/* ---------- Secciones ---------- */
.hj-s{position:relative}
.hj-sec{position:relative;z-index:1;max-width:560px;margin:0 auto;padding:68px max(10vw,30px);text-align:center}
.hj-h{margin:0 0 30px}
.hj-k{margin:0;font:500 13px/1.6 var(--at-ft),serif;letter-spacing:.22em;text-transform:uppercase;color:var(--cafe)}
.hj-t{margin:0;font:500 clamp(24px,6.6vw,30px)/1.2 var(--at-fd),serif;letter-spacing:.12em;text-transform:uppercase;color:var(--cafe);text-wrap:balance}
.hj-h .hj-k{margin-bottom:6px;color:var(--at-tenue);font-size:13px}
.hj-txt{margin:0 auto 18px;max-width:32ch;text-wrap:pretty}
.hj-intro{margin:26px auto 0;max-width:30ch;text-wrap:pretty}
.hj-nota{margin:10px auto 0;max-width:32ch;font-style:italic;font-size:17px;color:var(--at-tenue)}
.hj-btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 30px;border-radius:999px;background:var(--terra);color:#FBF7F1;text-decoration:none;
  font:500 16px/1 var(--at-ft),serif;letter-spacing:.04em;box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 8px 18px -8px rgba(120,55,30,.65);transition:background .3s,transform .3s}
.hj-btn:hover{background:var(--terra2);transform:translateY(-1px)}
.hj-btn-l{background:transparent;color:var(--terra);box-shadow:inset 0 0 0 1px rgba(181,96,61,.55)}
.hj-btn-l:hover{background:rgba(181,96,61,.08)}
.hj-enlace{display:inline-block;margin-top:6px;padding:4px 0;border-bottom:1px solid rgba(181,96,61,.5);color:var(--terra);text-decoration:none;font-size:16px;letter-spacing:.04em}

/* ---------- Portada ---------- */
.hj-portada{position:relative}
.hj-ram-portada{top:-2px;left:-2px;width:min(44vw,290px)}
.hj-sec-portada{padding-top:clamp(40px,10vw,64px);padding-bottom:40px}
.hj-cita{margin:0 0 0 auto;width:min(54%,300px);text-align:center}
@media (min-width:500px){.hj-cita{width:min(56%,320px)}}
.hj-cita p{margin:0;font:italic 400 17px/1.5 var(--at-fd),serif;color:var(--cafe)}
.hj-cita cite{display:block;margin-top:10px;font:400 14px/1.3 var(--at-ft),serif;font-style:normal;color:var(--at-tenue);letter-spacing:.04em}
.hj-mono{display:flex;align-items:center;justify-content:center;gap:.28em;margin:clamp(52px,16vw,96px) 0 0;font:300 clamp(82px,25vw,124px)/1 var(--at-fd),serif;color:var(--cafe)}
.hj-mono i{display:block;width:1px;height:.86em;background:currentColor;opacity:.6}
.hj-eb{margin:20px 0 0;font:500 14px/1.4 var(--at-ft),serif;letter-spacing:.3em;text-transform:uppercase;color:var(--cafe)}
.hj-para{margin:22px auto 0;max-width:30ch;font:italic 400 19px/1.45 var(--at-fd),serif;color:var(--terra)}
.hj-para strong{font-weight:500}
.hj-foto-portada > img{aspect-ratio:4/5}
.hj-foto-portada .hj-ram-foto{bottom:-15%}

/* ---------- Nombres y fecha ---------- */
.hj-s-nombres .hj-sec{padding-top:96px;padding-bottom:64px}
.hj-invitan{position:relative}
.hj-ram-lado{top:50%;width:min(36vw,190px);z-index:-1}
.hj-ram-izq.hj-ram-lado{left:calc(-1 * max(10vw,30px) - 12%);transform:translateY(-62%) rotate(45deg)}
.hj-ram-der.hj-ram-lado{right:calc(-1 * max(10vw,30px) - 12%);transform:translateY(-38%) scaleX(-1) rotate(45deg)}
.hj-nos{margin:0;font:400 24px/1 var(--at-fd),serif;color:var(--cafe)}
.hj-nombres{margin:10px 0 0;font:400 clamp(64px,19vw,100px)/.95 'Allura',cursive;color:var(--cafe);text-wrap:balance}
.hj-nombres span{display:block}
.hj-nombres em{display:block;margin:.02em 0 .04em;font:400 .62em/1 'Allura',cursive;color:var(--terra)}
.hj-fecha{margin:48px auto 0;max-width:340px}
.hj-mes{margin:0 0 12px;font:500 15px/1 var(--at-ft),serif;letter-spacing:.34em;text-transform:uppercase;color:var(--cafe)}
.hj-fila{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px}
.hj-lado{padding:9px 0;border-top:1px solid var(--at-linea);border-bottom:1px solid var(--at-linea);font:500 13px/1 var(--at-ft),serif;letter-spacing:.2em;text-transform:uppercase;color:var(--cafe)}
.hj-dia{font:400 clamp(66px,19vw,88px)/.9 var(--at-fd),serif;font-variant-numeric:lining-nums;color:var(--cafe)}

/* ---------- Cuenta regresiva ---------- */
.hj-s-cuenta .hj-sec{padding-top:24px;padding-bottom:44px}
.hj-cd{--g:clamp(14px,5vw,30px);display:flex;justify-content:center;align-items:flex-start;gap:var(--g);margin:14px 0 18px}
.hj-cd .cdu{position:relative;display:grid;gap:6px;min-width:0}
.hj-cd .cdu + .cdu::before{content:":";position:absolute;left:calc(var(--g) / -2);top:.1em;transform:translateX(-50%);font:400 clamp(30px,8.4vw,40px)/1 var(--at-fd),serif;color:var(--at-tenue)}
.hj-cd b{font:400 clamp(36px,10.4vw,48px)/1 var(--at-fd),serif;font-variant-numeric:lining-nums tabular-nums;color:var(--cafe)}
.hj-cd small{font:italic 400 16px/1 var(--at-fd),serif;color:var(--at-tenue)}
.hj-guir-cuenta{width:min(92%,440px);margin-top:34px}

/* ---------- Familias ---------- */
.hj-papas,.hj-padrinos{display:grid;gap:34px}
.hj-padrinos{margin-top:34px;padding-top:34px;border-top:1px solid var(--at-linea)}
.hj-papas .hj-k,.hj-padrinos .hj-k{margin-bottom:8px}
.hj-papa{margin:0;font-size:19px;line-height:1.45}
.hj-s-familia .hj-sec{padding-top:96px}

/* ---------- Lugares ---------- */
.hj-lugares{display:grid;gap:56px}
.hj-fil-sep{margin:0 auto 46px}
.hj-hrs{margin:0;font:500 15px/1 var(--at-ft),serif;letter-spacing:.2em;text-transform:uppercase;color:var(--cafe)}
.hj-t3{margin:12px 0 0;font:500 clamp(25px,7vw,32px)/1.15 var(--at-fd),serif;letter-spacing:.1em;text-transform:uppercase;color:var(--cafe);text-wrap:balance}
.hj-sitio{margin:16px 0 0;font-size:19px;line-height:1.4}
.hj-dir{margin:6px auto 22px;max-width:28ch;font-size:17px;line-height:1.5;color:var(--at-tenue)}

/* ---------- Itinerario: íconos, línea con puntos y la hora a la derecha ---------- */
.hj-itin{position:relative;list-style:none;margin:8px auto 0;padding:0;max-width:420px;text-align:left}
.hj-itin::before{content:"";position:absolute;left:62px;top:14px;bottom:14px;width:1px;background:var(--terra);opacity:.5}
.hj-itin li{position:relative;display:grid;grid-template-columns:44px 36px minmax(0,1fr) auto;align-items:center;gap:0;min-height:84px}
.hj-itin .hj-ico{width:44px;height:44px}
.hj-punto{justify-self:center;width:7px;height:7px;border-radius:50%;background:var(--terra);box-shadow:0 0 0 4px var(--crema)}
.hj-que{padding-right:12px}
.hj-que strong{display:block;font-weight:400;font-size:18px;line-height:1.3}
.hj-que small{display:block;margin-top:2px;font-style:italic;font-size:15px;color:var(--at-tenue)}
.hj-cuando{font:400 20px/1 var(--at-fd),serif;font-variant-numeric:lining-nums tabular-nums;color:var(--cafe)}

/* ---------- Vestimenta ---------- */
.hj-codigo{margin:-4px 0 18px;font:italic 400 30px/1.2 var(--at-fd),serif;color:var(--cafe)}
.hj-siluetas{display:block;width:clamp(140px,42vw,190px);aspect-ratio:599/640;margin:0 auto 24px;background:url(/img/texturas/hojarasca-siluetas.png) center/contain no-repeat}
.hj-sw{margin:4px 0 18px;gap:10px}
.hj-sw i{width:24px;height:24px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.1),0 0 0 3px #FBF7F1,0 0 0 4px var(--at-linea)}
.hj-evitar{margin:0 auto;max-width:30ch;font-style:italic;font-size:17px;color:var(--at-tenue)}

/* ---------- Galería: fotos rasgadas abajo, como recortes ---------- */
.hj-galeria{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.hj .hj-g{position:relative;aspect-ratio:3/4}
.hj .hj-g:nth-child(2n){margin-top:34px}
.hj .hj-g .hj-rasgo{height:22px}

/* ---------- Regalos ---------- */
.hj-opcion{margin:30px auto 0}
.hj-opcion .hj-k{margin-bottom:6px}
.hj-dato{margin:2px 0;font-size:17px;color:var(--cafe)}
.hj-dato span{color:var(--terra)}
.hj-dato-c{margin-top:6px}
.hj-opcion .hj-btn{margin-top:12px}
.hj-clabe{margin:4px 0 0;color:var(--terra);font-size:17px}
.hj .hj-clabe .copy{min-height:34px;border-radius:999px;padding:0 16px;color:var(--cafe);box-shadow:inset 0 0 0 1px rgba(74,51,40,.3);font-size:12px}

/* ---------- Hospedaje, notas y hashtag ---------- */
.hj-s-breve .hj-sec{padding-top:40px;padding-bottom:40px}
.hj-notas{list-style:none;margin:18px 0 0;padding:0;font-style:italic;font-size:19px;color:var(--cafe)}
.hj-tag{margin:8px 0 0;font:400 clamp(44px,13vw,60px)/1.1 'Allura',cursive;color:var(--terra)}
.hj-dato a{color:inherit}

/* ---------- Confirmación: campos en caja sobre el papel ---------- */
.hj-talon{margin:26px auto 0;max-width:440px;text-align:left}
.inv[data-theme="at-hojarasca"] .hj-talon .fld input,.inv[data-theme="at-hojarasca"] .hj-talon .fld select,.inv[data-theme="at-hojarasca"] .hj-talon .fld textarea{
  padding:11px 14px;background:rgba(255,253,249,.82);border:1px solid rgba(74,51,40,.22);border-radius:6px;box-shadow:inset 0 1px 2px rgba(74,51,40,.06);font-size:17px}
.inv[data-theme="at-hojarasca"] .hj-talon .fld select{background-position:calc(100% - 18px) 55%,calc(100% - 13px) 55%}
.inv[data-theme="at-hojarasca"] .hj-talon .fld input:focus,.inv[data-theme="at-hojarasca"] .hj-talon .fld select:focus,.inv[data-theme="at-hojarasca"] .hj-talon .fld textarea:focus{border-color:var(--terra);box-shadow:0 0 0 1px var(--terra)}
.inv[data-theme="at-hojarasca"] .hj-talon .fld > span{font-size:13px;letter-spacing:.18em;color:var(--at-tenue)}
.inv[data-theme="at-hojarasca"] .hj-talon .seg{border-radius:999px;overflow:hidden;background:rgba(255,253,249,.82);box-shadow:inset 0 0 0 1px rgba(74,51,40,.22)}
.inv[data-theme="at-hojarasca"] .hj-talon .seg span{font-size:17px}
.inv[data-theme="at-hojarasca"] .hj-talon .seg input:checked + span{background:var(--terra);color:#FBF7F1}
.inv[data-theme="at-hojarasca"] .hj .rsvp .btn{border-radius:999px;background:var(--terra);color:#FBF7F1;font:500 16px/1 var(--at-ft),serif;letter-spacing:.04em;text-transform:none;padding:16px 34px;box-shadow:0 8px 18px -8px rgba(120,55,30,.65)}
.inv[data-theme="at-hojarasca"] .hj .btn-line{border-radius:999px}
.hj-cal{margin:30px 0 0}

/* ---------- Cierre ---------- */
.hj-s-cierre{position:relative;z-index:2}
.hj-s-cierre .hj-sec{padding-top:72px;padding-bottom:clamp(120px,34vw,180px)}
.hj-espera{font-size:15px;letter-spacing:.26em;margin-bottom:14px}
.hj-gracias{margin:22px 0 0;font:400 clamp(66px,19vw,92px)/1 'Allura',cursive;color:var(--cafe)}
.hj-firma{margin:12px 0 0;font:500 13px/1.5 var(--at-ft),serif;letter-spacing:.24em;text-transform:uppercase;color:var(--at-tenue)}
.hj-ram-cierre{right:-3%;bottom:-17%;width:min(54vw,320px);transform:scale(-1,-1)}
.hj-foto-fin > img{aspect-ratio:4/5}
.inv[data-theme="at-hojarasca"] .inv-brand{padding-top:18px}

/* ---------- Apertura: hoja que se rasga ----------
   Dos mitades de la misma hoja; cada una lleva su recorte (clip-path en línea) y, detrás, la fibra blanca.
   Al tocar: un tirón y las dos mitades se van, una hacia arriba y la otra hacia abajo. */
.inv .op.hj-op{padding:0;background:transparent;color:var(--cafe)}
.hj-mitad{position:absolute;inset:0;background:var(--papel);background-blend-mode:normal,multiply;will-change:transform}
/* En reposo la fibra es del mismo papel (la hoja está entera); al rasgarse asoma blanca. */
.hj-op.is-opening .hj-mitad{background:#FFFDF8}
.hj-pliego{position:absolute;inset:0;background:var(--papel);background-blend-mode:normal,multiply}
/* Viñeta suave en toda la hoja (por encima de las dos mitades, para que en reposo no se note el corte). */
.hj-op::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(120% 70% at 50% 45%,transparent 60%,rgba(120,85,60,.12));transition:opacity .3s}
.hj-op.is-opening::before{opacity:0}
.hj-hoja{position:absolute;inset:0}
.hj-ram-op{top:-2px;left:-2px;width:min(62vw,380px,44vh)}
.hj-ram-op2{right:-2px;bottom:-2px;width:min(36vw,260px,30vh);transform:scale(-1,-1)}
.hj-op-c{position:absolute;left:0;right:0;top:20%;bottom:50%;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:0 10vw 0;text-align:center}
.hj-op .at-para{color:var(--cafe);opacity:1;font-size:13px;letter-spacing:.3em}
.hj-mono-op{margin:14px 0 0;font-size:clamp(80px,24vw,130px)}
.hj-op-n{margin:10px 0 0;font:400 clamp(30px,8.4vw,44px)/1.1 'Allura',cursive;color:var(--cafe)}
.hj-op-f{margin:6px 0 0;font:500 13px/1 var(--at-ft),serif;letter-spacing:.3em;color:var(--at-tenue)}
.hj-pista{position:absolute;left:0;right:0;top:62%;margin:0;padding:0 10vw;text-align:center;font:italic 400 20px/1.3 var(--at-fd),serif;color:var(--terra)}
.hj-toca{position:absolute;inset:0;z-index:3;width:100%;height:100%;padding:0;border:0;background:transparent;cursor:pointer}
.hj-op .at-skip{z-index:4;color:var(--cafe);opacity:.8;border-radius:999px;background:rgba(251,247,241,.85);box-shadow:inset 0 0 0 1px rgba(74,51,40,.2)}
.hj-op .hj-pista{animation:hj-pulso 2.4s ease-in-out infinite}
.hj-op.is-opening .hj-pista,.hj-op.is-opening .at-skip{opacity:0;animation:none;transition:opacity .25s}
.hj-op.is-opening .hj-m-arriba{animation:hj-arriba 1.9s cubic-bezier(.55,0,.25,1) both}
.hj-op.is-opening .hj-m-abajo{animation:hj-abajo 1.9s cubic-bezier(.55,0,.25,1) both}
@keyframes hj-arriba{0%{transform:none}14%{transform:translateY(-1.4%) rotate(-.8deg)}24%{transform:translateY(-2%) rotate(-1deg)}100%{transform:translateY(-62%) rotate(-5deg)}}
@keyframes hj-abajo{0%{transform:none}14%{transform:translateY(1.2%) rotate(.6deg)}24%{transform:translateY(2%) rotate(.8deg)}100%{transform:translateY(60%) rotate(4deg)}}
@keyframes hj-pulso{50%{opacity:.55}}
.hj-m-arriba{transform-origin:20% 0}
.hj-m-abajo{transform-origin:80% 100%}
@media (prefers-reduced-motion:reduce){.hj-op.is-opening .hj-m-arriba,.hj-op.is-opening .hj-m-abajo{animation:none;opacity:0;transition:opacity .4s}}
@media (min-width:760px){.hj-foto > img,.hj-foto-portada > img,.hj-foto-fin > img{aspect-ratio:1/1.08}}