/* Atelier · Hilo. Kraft, algodón, lino e hilo terracota. Todo está puesto sobre la mesa, ligeramente torcido.
Una luz cálida desde arriba a la izquierda; el acabado protagonista es el papel rasgado con su sombra.
Materiales reales (public/img/texturas): kraft fotográfico (Magnific) teñido con --kraft, hojas de algodón desbarbadas
(tarjeta-algodon.png), lino (Magnific) en los retazos, y tres piezas de ChatGPT con fondo transparente:
etiqueta de kraft con hilo (hilo-etiqueta.png), ramillete de flores prensadas (hilo-ramillete.png) y estampilla (hilo-estampilla.png). */
.inv[data-theme="at-hilo"]{
--at-papel:#F5EFE4; --at-fondo:#C8A880; --at-tinta:#3D3027; --at-tenue:#6E6155; --at-acento:#6F7F62; --at-linea:rgba(61,48,39,.18);
--at-fd:'Fraunces'; --at-ft:'Fraunces'; --mano:'Homemade Apple';
--kraft:#C8A880; --kraft2:#B08D62; --kraft3:#9C7A51; --crema:#F5EFE4; --hilo:#A24A36; --hilo-osc:#6B3125; --salvia:#5F6F53;
font-size:18px; line-height:1.6; font-weight:400; font-variation-settings:"opsz" 14;
}
/* Mesa de kraft: foto de papel kraft (neutra) teñida con multiply, en teja espejada que corre con el contenido sin costuras. */
.inv[data-theme="at-hilo"]{position:relative;background:#B89C78}
.inv[data-theme="at-hilo"]::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
background:radial-gradient(90% 560px at 24% 0%,rgba(255,244,222,.28),transparent 62%),linear-gradient(90deg,rgba(70,45,20,.14),transparent 20%,transparent 80%,rgba(70,45,20,.14)),
url(/img/texturas/hilo-kraft-teja.jpg) calc(50% + 190px) 300px/min(150%,980px) auto repeat,url(/img/texturas/hilo-kraft-teja.jpg) center top/min(190%,1240px) auto repeat,#F4CF98;
background-blend-mode:normal,normal,multiply,multiply,normal}
.inv[data-theme="at-hilo"] .inv-main{position:relative;z-index:1}
.hl{position:relative;background:none;color:var(--at-tinta)}
.hl-mano{margin:0;font:400 clamp(20px,5.2vw,23px)/1.55 var(--mano),cursive;color:var(--hilo-osc)}
.hl-papel-in .hl-mano,.hl-tag .hl-mano{color:var(--hilo)}
.hl-flor{color:var(--salvia);opacity:.85}
/* ---------- Apertura: sobre con hilo y botón ---------- */
.hl-op{background:#E6DCCB;color:var(--at-tinta);perspective:1400px}
.hl-mantel{position:absolute;inset:0;background:
radial-gradient(70% 50% at 50% 30%,rgba(255,250,240,.75),transparent 70%),
repeating-linear-gradient(0deg,rgba(90,70,50,.06) 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,rgba(90,70,50,.06) 0 1px,transparent 1px 3px),#E6DCCB}
.hl-arriba{position:absolute;top:max(40px,7vh);left:0;right:0;z-index:3;display:grid;gap:10px;justify-items:center;text-align:center;padding:0 24px}
.hl-op .at-para{color:var(--salvia);opacity:1;font-weight:600}
.hl-pista{margin:0;max-width:24ch;font:400 17px/1.5 var(--mano),cursive;color:var(--hilo)}
.hl-op .at-skip{color:var(--at-tinta);box-shadow:inset 0 0 0 1px rgba(61,48,39,.3);background:rgba(245,239,228,.8);opacity:1}
.hl-escena{position:relative;z-index:2;width:min(84vw,380px);aspect-ratio:1.42;transform:translateY(4vh)}
.hl-sombra{position:absolute;left:4%;right:4%;bottom:-8%;height:26%;border-radius:50%;background:rgba(70,45,25,.45);filter:blur(16px);transform:scaleY(.5);transition:opacity .8s 2.6s}
.hl-sobre{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(24deg);transition:transform 1.2s cubic-bezier(.5,.05,.2,1) 3s}
.hl-sobre>div,.hl-sobre>span,.hl-sobre>button{position:absolute}
.hl-kraft{background:
url("data:image/svg+xml;utf8,"),var(--kraft)}
.hl-atras{inset:0;border-radius:3px;background:url("data:image/svg+xml;utf8,"),linear-gradient(180deg,rgba(0,0,0,.18),rgba(0,0,0,.05) 45%),var(--kraft2)}
.hl-tarjeta-w{left:5%;right:5%;top:7%;bottom:7%;z-index:1;display:grid;place-items:center;filter:drop-shadow(0 2px 2px rgba(60,40,20,.25));transition:filter 1s 2.1s,z-index 0s 3s}
.hl-tarjeta{position:relative;width:100%;height:100%;display:grid;align-content:center;justify-items:center;gap:4px;padding:6% 8%;text-align:center;background:var(--crema);color:var(--at-tinta)}
.hl-tarjeta .hl-lavanda{position:absolute;left:4%;top:6%;height:70%;width:auto;transform:rotate(-18deg);opacity:.7}
.hl-tj-eb{font:400 10px/1.4 var(--mano),cursive;color:var(--hilo)}
.hl-tj-n{display:grid;font:300 clamp(18px,5.6vw,26px)/1.05 var(--at-fd),serif;letter-spacing:.02em}
.hl-tj-n i{font-style:italic;font-size:.7em;color:var(--salvia)}
.hl-tj-f{font:italic 300 11px/1.3 var(--at-ft),serif}
.hl-tarjeta .hl-ms{position:absolute;right:4%;bottom:6%;width:34%;height:auto;color:var(--hilo);opacity:.7;transform:rotate(-10deg);mix-blend-mode:multiply}
.hl-frente{inset:0;z-index:2;border-radius:3px;clip-path:polygon(0 0,50% 52%,100% 0,100% 100%,0 100%);
background:url("data:image/svg+xml;utf8,"),
linear-gradient(118deg,rgba(0,0,0,.08),transparent 48%),linear-gradient(-118deg,rgba(0,0,0,.08),transparent 48%),var(--kraft);transition:opacity .6s 3.2s}
.hl-frente::after{content:"";position:absolute;inset:0;clip-path:polygon(0 100%,50% 48%,100% 100%);background:linear-gradient(180deg,rgba(0,0,0,.1),rgba(255,255,255,.06) 40%,rgba(0,0,0,.03))}
.hl-solapa{left:0;right:0;top:0;height:56%;z-index:3;transform-origin:50% 0;clip-path:polygon(0 0,100% 0,50% 100%);
background:url("data:image/svg+xml;utf8,"),
linear-gradient(180deg,rgba(255,255,255,.08),rgba(0,0,0,.12)),var(--kraft);box-shadow:0 6px 10px -6px rgba(0,0,0,.4);transition:z-index 0s 1.7s,opacity .6s 3.2s}
@keyframes hl-solapa{0%{transform:rotateX(0)}49.9%{background:var(--kraft)}50%{background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.15)),var(--kraft3)}100%{transform:rotateX(180deg);background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.15)),var(--kraft3)}}
.hl-cuerda{position:absolute;left:0;top:0;width:100%;height:100%;z-index:4;pointer-events:none;overflow:visible}
.hl-cuerda path{stroke-dasharray:520;stroke-dashoffset:0}
.hl-cabo{stroke-dasharray:80!important;stroke-dashoffset:0!important}
.hl-boton{z-index:5;left:50%;width:11%;aspect-ratio:1;margin-left:-5.5%;border-radius:50%;border:0;padding:0;
background:radial-gradient(circle at 35% 30%,#D9BE93,#B08D62 60%,#8E6E48);box-shadow:inset 0 0 0 1.5px rgba(60,40,20,.25),inset 0 -2px 3px rgba(0,0,0,.2),0 2px 3px rgba(0,0,0,.35)}
.hl-boton::before,.hl-boton::after{content:"";position:absolute;top:50%;width:18%;height:18%;border-radius:50%;background:#5C4330;box-shadow:inset 0 1px 1px rgba(0,0,0,.5);transform:translateY(-50%)}
.hl-boton::before{left:26%}.hl-boton::after{right:26%}
.hl-boton-a{top:32%;margin-top:-5.5%;cursor:pointer;transition:transform .25s}
.hl-boton-b{top:60%;margin-top:-5.5%}
.hl-boton-a:hover{transform:scale(1.06)}
/* Secuencia: hilo que se desenreda, solapa que sube, tarjeta que sale y llega a la mano. */
.hl-op.is-opening .hl-cuerda-p,.hl-op.is-opening .hl-cuerda-s{stroke-dashoffset:520;transition:stroke-dashoffset 1.2s cubic-bezier(.4,0,.6,1)}
.hl-op.is-opening .hl-cabo{animation:hl-cabo .9s ease-in .9s forwards}
@keyframes hl-cabo{to{stroke-dashoffset:80;opacity:0}}
.hl-op.is-opening .hl-solapa{animation:hl-solapa 1.05s cubic-bezier(.6,.05,.25,1) 1.15s forwards;z-index:0;opacity:0}
.hl-op.is-opening .hl-tarjeta-w{animation:hl-salir 2.2s cubic-bezier(.55,.05,.2,1) 2s forwards;z-index:6;filter:drop-shadow(0 30px 30px rgba(60,40,20,.45))}
@keyframes hl-salir{0%{transform:none}48%{transform:translateY(-78%)}100%{transform:translateY(-16%) scale(1.3)}}
.hl-op.is-opening .hl-sobre{transform:rotateX(0) translateY(14%) scale(1.1)}
.hl-op.is-opening .hl-frente,.hl-op.is-opening .hl-atras,.hl-op.is-opening .hl-sombra,.hl-op.is-opening .hl-boton{opacity:0;transition:opacity .6s 3.2s}
.hl-op.is-opening .hl-pista,.hl-op.is-opening .at-para,.hl-op.is-opening .at-skip{opacity:0;transition:opacity .5s .6s}
.hl-op.is-opening::after{content:"";position:absolute;inset:0;z-index:7;pointer-events:none;background:var(--kraft);opacity:0;animation:hl-fundido .6s ease-in 3.8s forwards}
@keyframes hl-fundido{to{opacity:1}}
@media (prefers-reduced-motion:reduce){.hl-op.is-opening .hl-tarjeta-w,.hl-op.is-opening .hl-solapa,.hl-op.is-opening::after{animation:none}}
/* ---------- Página: recorrido por la mesa del campo ----------
Cada sección es un patio a todo lo ancho con su material; dentro, .hl-sec acota el texto. El kraft es la mesa base
(la teja de arriba; las secciones .hl-mesa la dejan ver) y se vuelve a él entre materiales; dos secciones de mesa seguidas se separan con una puntada de hilo rojo. */
.hl-patio{position:relative;isolation:isolate}
.hl-sec{position:relative;max-width:600px;margin:0 auto;padding:96px max(10vw,32px);text-align:center}
.hl-ancho .hl-sec{max-width:960px}
.hl-breve .hl-sec{padding-top:44px;padding-bottom:44px}
.hl-mesa + .hl-mesa .hl-sec::before{content:"";position:absolute;top:0;left:50%;width:132px;height:2px;transform:translateX(-50%);
background:repeating-linear-gradient(90deg,var(--hilo) 0 9px,transparent 9px 16px);box-shadow:0 1px 0 rgba(255,244,226,.35)}
.hl-h{margin:0 0 30px;display:grid;justify-items:center;gap:6px}
.hl-t{margin:0;font:300 clamp(36px,9.4vw,52px)/1.06 var(--at-fd),serif;font-variation-settings:"opsz" 144;letter-spacing:-.01em;color:var(--at-tinta);text-wrap:balance}
.hl-k2{margin:0 0 4px;font:600 13px/1.4 var(--at-ft),serif;letter-spacing:.22em;text-transform:uppercase;color:var(--at-tinta)}
.hl-intro{margin:0 auto;max-width:34ch}
.hl-nota{margin:12px 0 0;font-style:italic;color:var(--at-tenue)}
.inv[data-theme="at-hilo"] .hl-link{display:inline-block;margin-top:12px;padding:0 0 1px;color:var(--hilo-osc);text-decoration:none;font:400 20px/1.5 var(--mano),cursive;border-bottom:1.5px solid currentColor}
.hl-ms{color:var(--hilo);mix-blend-mode:multiply;opacity:.8}
/* Hoja de algodón desbarbada de la portada (tarjeta-algodon.png, 666×1000). Es la única pieza que crece al alto del teléfono:
border-image conserva la orilla a cualquier alto (sobre el kraft la costura no se lee); la sombra va aparte en ::before. */
.hl-papel{position:relative;isolation:isolate;rotate:var(--r,0deg)}
.hl-papel::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border:30px solid transparent;
border-image:url(/img/texturas/tarjeta-algodon.png) 70 fill / 30px / 0 stretch}
.hl-papel::before{content:"";position:absolute;inset:16px 14px 14px;z-index:-2;pointer-events:none;
box-shadow:6px 16px 26px rgba(60,38,18,.30),1px 3px 5px rgba(60,38,18,.22)}
.hl-papel-in{position:relative;padding:max(48px,13%) max(36px,13%) max(48px,13%);color:var(--at-tinta);text-align:center}
.hl-papel-in .hl-mano{color:var(--hilo)}
/* Portada: la hoja al alto del teléfono, con el ramillete prensado metido en la esquina y la foto en una estampilla. */
.hl-portada{position:relative;display:grid;place-items:center;min-height:100vh;min-height:100svh;padding:max(26px,3.4svh) max(14px,4vw);max-width:620px;margin:0 auto}
.hl-papel-portada{width:100%}
.hl-papel-portada .hl-papel-in{min-height:calc(100svh - max(52px,6.8svh));display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:max(64px,17%) 11% max(54px,13%)}
.hl-portada::after{content:"";position:absolute;z-index:2;pointer-events:none;left:max(6px,1.6vw);top:max(16px,2.2svh);width:min(33%,186px);aspect-ratio:592/900;
background:url(/img/texturas/hilo-ramillete.png) center/contain no-repeat;rotate:-24deg;transform-origin:30% 80%}
.hl-eb{font-size:clamp(21px,5.6vw,25px)}
.hl-nombres{margin:0;display:grid;gap:2px;font:300 clamp(46px,13vw,76px)/1 var(--at-fd),serif;font-variation-settings:"opsz" 144;letter-spacing:-.01em;text-wrap:balance}
.hl-nombres em{font:italic 300 .48em/1.1 var(--at-fd),serif;color:var(--salvia)}
.hl-fecha{margin:6px 0 0;font:italic 300 clamp(19px,5vw,23px)/1.45 var(--at-fd),serif;max-width:28ch;text-wrap:balance}
/* Estampilla (hilo-estampilla.png, 560×806): filete verde en 6,2–93,3 % × 4,9–95,3 %. La foto entra dentro del filete. */
.hl-foto{position:relative;width:min(70%,280px);margin:14px 0 8px;rotate:-2.4deg}
.hl-est{position:relative;isolation:isolate;display:block;aspect-ratio:625/900}
.hl-est::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:url(/img/texturas/hilo-estampilla.png) center/100% 100% no-repeat}
.hl-est::before{content:"";position:absolute;inset:3% 4%;z-index:-2;pointer-events:none;box-shadow:4px 10px 16px rgba(60,38,18,.28),1px 2px 3px rgba(60,38,18,.2)}
.hl-est-in{position:absolute;inset:8% 9.6% 8.4%;overflow:hidden;background:#E9DFCC}
.hl-est-in img{display:block;width:100%;height:100%;object-fit:cover;filter:sepia(.12) saturate(.9)}
.hl-foto .hl-ms{position:absolute;right:-16%;bottom:-6%;width:46%;height:auto;rotate:-14deg}
.hl-lugar{margin:0;max-width:26ch;font:600 13px/1.6 var(--at-ft),serif;letter-spacing:.22em;text-transform:uppercase;color:var(--at-tenue);text-wrap:balance}
.hl-para{margin:6px 0 0;font-style:italic;color:var(--at-tenue)}
/* Campo: la mesa larga bajo los árboles al atardecer (hilo-campo.jpg). Velo en ::before: casi nada arriba (focos y cielo),
penumbra cerrada abajo, donde va la cita en blanco roto. */
.hl-campo{min-height:min(96svh,880px);display:grid;align-items:end;color:#FBF4E8;background:url(/img/texturas/hilo-campo.jpg) 50% 18%/cover #3A2A1C}
.hl-campo::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
background:linear-gradient(180deg,rgba(28,16,8,.22),rgba(28,16,8,0) 24%,rgba(28,16,8,.3) 46%,rgba(22,13,7,.8) 68%,rgba(20,12,6,.9) 100%)}
.hl-campo .hl-sec{padding-top:min(50svh,440px);padding-bottom:76px}
@media(min-width:760px){.hl-campo{background-position:50% 64%}}
.hl-campo blockquote{margin:0}
.hl-campo blockquote p{margin:0;font:italic 300 clamp(29px,7.8vw,42px)/1.26 var(--at-fd),serif;font-variation-settings:"opsz" 144;color:#FBF4E8;text-wrap:balance;text-shadow:0 2px 22px rgba(0,0,0,.5)}
.hl-campo cite{display:block;margin-top:18px;font:600 13px/1.3 var(--at-ft),serif;letter-spacing:.22em;text-transform:uppercase;font-style:normal;color:rgba(251,244,232,.8)}
.hl-campo .hl-intro{margin-top:26px;color:rgba(251,244,232,.92);text-shadow:0 1px 14px rgba(0,0,0,.45)}
.hl-campo .hl-firma-m{margin-top:20px;color:#EDBBA3;text-shadow:0 1px 12px rgba(0,0,0,.5)}
/* Lino crudo (lino-teja.jpg): la cuenta escrita en una etiqueta de cartulina atada con hilo rojo y blanco (hilo-marbete.webp,
1024×1536; la etiqueta ocupa 13–87 % de ancho y 15–98 % de alto, el ojal a 21 %). */
.hl-lino{background:url(/img/texturas/lino-teja.jpg) center/300px auto repeat,#EFE6D6;background-blend-mode:multiply}
.hl-lino::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
background:radial-gradient(70% 55% at 50% 45%,rgba(255,252,244,.2),transparent 70%),linear-gradient(180deg,rgba(90,70,45,.14),transparent 14%,transparent 86%,rgba(90,70,45,.16))}
.hl-lino .hl-sec{padding-top:56px;padding-bottom:72px}
.hl-marbete{position:relative;isolation:isolate;width:min(84vw,350px);aspect-ratio:1024/1536;margin:0 auto;rotate:-2.2deg;transform-origin:50% 0}
.hl-marbete::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:url(/img/texturas/hilo-marbete.webp) center/100% 100% no-repeat}
.hl-marbete::before{content:"";position:absolute;inset:22% 16% 3% 16%;z-index:-2;pointer-events:none;box-shadow:6px 16px 26px rgba(70,50,30,.32),1px 3px 5px rgba(70,50,30,.2)}
.hl-marbete-in{position:absolute;left:21%;right:21%;top:31%;bottom:8%;display:grid;align-content:center;justify-items:center;gap:4px;color:var(--at-tinta)}
.hl-marbete .hl-k{font-size:24px;color:var(--hilo)}
.hl-cd{display:grid;width:100%;margin:6px 0 4px}
.hl-cd .cdu{display:grid;grid-template-columns:1fr 1fr;align-items:baseline;gap:12px;padding:6px 0;border-bottom:1.5px dotted rgba(61,48,39,.35)}
.hl-cd .cdu:last-child{border-bottom:0}
.hl-cd b{justify-self:end;font:300 clamp(40px,11vw,52px)/1.05 var(--at-fd),serif;font-variation-settings:"opsz" 144;font-variant-numeric:lining-nums tabular-nums;color:var(--at-tinta)}
.hl-cd small{justify-self:start;font:600 13px/1 var(--at-ft),serif;letter-spacing:.2em;text-transform:uppercase;color:var(--at-tinta)}
.inv[data-theme="at-hilo"] .hl-marbete .hl-link{margin-top:6px;font-size:17px;white-space:nowrap}
/* Pino claro (hilo-pino.jpg, cenital, sin repetir: cubre la sección). Sobre la madera, la tarjeta de algodón desbarbada
(tarjeta-algodon.png 666×1000: la hoja ocupa 24–642 × 32–962) en su proporción, con los nombres de las familias. */
.hl-pino{background:url(/img/texturas/hilo-pino.jpg) 50% 50%/cover #E8D0AA}
.hl-pino::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
background:radial-gradient(80% 50% at 30% 10%,rgba(255,248,232,.32),transparent 70%),linear-gradient(180deg,rgba(80,50,20,.18),rgba(255,246,228,.12) 18%,rgba(255,246,228,.12) 82%,rgba(80,50,20,.2))}
.hl-pino .hl-sec{padding:80px max(6vw,20px)}
.hl-pino .hl-t{color:#33261C}
.hl-algodon{position:relative;isolation:isolate;width:min(100%,410px);aspect-ratio:666/1000;margin:0 auto;padding:17% 14% 16%;display:grid;align-content:center;color:var(--at-tinta)}
.hl-algodon::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:url(/img/texturas/tarjeta-algodon.png) center/100% 100% no-repeat}
.hl-algodon::before{content:"";position:absolute;inset:8% 10%;z-index:-2;border-radius:10px;box-shadow:6px 22px 40px 2px rgba(70,45,20,.36),1px 5px 12px rgba(70,45,20,.18)}
.hl-fam{display:grid;gap:24px}
.hl-nom{margin:0;font:400 clamp(19px,5.2vw,22px)/1.32 var(--at-fd),serif;text-wrap:balance}
/* Lugares, sobre el kraft: postales de cartulina con su foto y estampilla (hilo-estampilla.png con el ícono del lugar
a línea); un camino de hilo rojo cosido va de una a otra. */
.hl-postales{display:grid;justify-items:center}
.hl-postal{position:relative;width:min(100%,420px);padding:14px 14px 30px;rotate:var(--r,0deg);color:var(--at-tinta);
background:url(/img/texturas/papel-fibra.jpg) center/700px,#F7F1E6;background-blend-mode:multiply;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.4),0 1px 2px rgba(60,38,18,.35),5px 18px 28px -10px rgba(60,38,18,.5)}
.hl-postal-f{aspect-ratio:4/3;overflow:hidden;background:#E9DFCC;box-shadow:inset 0 0 0 1px rgba(60,40,20,.12)}
.hl-postal-f img{display:block;width:100%;height:100%;object-fit:cover;filter:sepia(.14) saturate(.88)}
.hl-postal-t{padding:22px 9% 0}
.hl-postal-t .hl-mano{color:var(--hilo)}
.hl-postal h3{margin:4px 0 8px;font:400 clamp(25px,6.6vw,30px)/1.15 var(--at-fd),serif;text-wrap:balance}
.hl-hora{margin:0;font-style:italic;font-size:20px;color:var(--salvia)}
.hl-dir{margin:8px auto 0;max-width:30ch;font-size:17px;line-height:1.5;color:var(--at-tenue)}
.hl-sello{position:absolute;right:-12px;top:-18px;z-index:2;width:clamp(68px,20vw,86px);aspect-ratio:560/806;rotate:7deg;isolation:isolate}
.hl-sello::after{content:"";position:absolute;inset:0;z-index:-1;background:url(/img/texturas/hilo-estampilla.png) center/100% 100% no-repeat}
.hl-sello::before{content:"";position:absolute;inset:4% 6%;z-index:-2;box-shadow:2px 6px 10px rgba(60,38,18,.35)}
.hl-sello-in{position:absolute;inset:18% 20% 34%;display:grid;place-items:center;color:var(--salvia)}
.hl-sello-in svg{width:100%;height:auto}
.hl-postal:nth-of-type(2n) .hl-sello{right:auto;left:-12px;rotate:-6deg}
.hl-puntada{display:block;overflow:visible}
.hl-camino{width:60px;height:120px;margin:-4px auto}
/* En escritorio las postales van lado a lado y el camino cosido corre entre ellas, de costado. */
@media(min-width:860px){.hl-postales{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:24px 0}
.hl-mesa.hl-ancho .hl-sec{max-width:1040px;padding-left:40px;padding-right:40px}
.hl-postal{width:400px}.hl-camino{rotate:-90deg;margin:0 6px}}
/* Cuaderno: hoja de cuaderno antiguo a todo lo ancho (hilo-cuaderno-teja.jpg), con renglones de 40 px y margen rojo dibujados
en CSS para que la letra caiga en el renglón: todo lo que va dentro mide múltiplos de 40 px. Orillas rasgadas con máscara. */
.hl-cuaderno{--ren:40px;
background:repeating-linear-gradient(180deg,transparent 0 29px,rgba(72,108,150,.3) 29px 30px,transparent 30px 40px),
url(/img/texturas/hilo-cuaderno-teja.jpg) center/520px auto repeat,#F4EAD3;background-blend-mode:normal,multiply,normal;
-webkit-mask:url("data:image/svg+xml;utf8,") 0 0/260px 14px repeat-x,
url("data:image/svg+xml;utf8,") 0 100%/300px 14px repeat-x,
linear-gradient(#000,#000) 0 50%/100% calc(100% - 26px) no-repeat;
mask:url("data:image/svg+xml;utf8,") 0 0/260px 14px repeat-x,
url("data:image/svg+xml;utf8,") 0 100%/300px 14px repeat-x,
linear-gradient(#000,#000) 0 50%/100% calc(100% - 26px) no-repeat}
.hl-cuaderno::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
background:radial-gradient(90% 60% at 50% 40%,transparent 60%,rgba(140,105,60,.14)),linear-gradient(90deg,rgba(140,105,60,.1),transparent 12%,transparent 88%,rgba(140,105,60,.1))}
.hl-cuaderno .hl-sec{--col:58px;padding:120px max(7vw,20px) 120px;text-align:left}
.hl-cuaderno .hl-sec::after{content:"";position:absolute;top:0;bottom:0;left:calc(max(7vw,20px) + var(--col) - 14px);width:5px;pointer-events:none;
border-left:1px solid rgba(180,70,55,.5);border-right:1px solid rgba(180,70,55,.42)}
.hl-cuaderno .hl-h{margin:0 0 var(--ren);padding-left:var(--col);justify-items:start;gap:0}
.hl-cuaderno .hl-h .hl-mano{line-height:var(--ren);font-size:21px}
.hl-cuaderno .hl-t{line-height:80px;font-size:clamp(40px,10.4vw,52px)}
.hl-prog{list-style:none;margin:0;padding:0}
.hl-prog li{display:grid;grid-template-columns:var(--col) 1fr;grid-template-areas:"i h" "i t" "i n";margin:0 0 var(--ren)}
.hl-prog li:last-child{margin-bottom:0}
.hl-pi{grid-area:i;align-self:start;width:28px;height:28px;margin:6px 0 0 4px;color:var(--hilo-osc);opacity:.75}
.hl-pi svg{width:100%;height:100%}
.hl-ph{grid-area:h;font-size:19px;line-height:var(--ren);color:var(--hilo)}
.hl-pt{grid-area:t;font:400 23px/var(--ren) var(--at-fd),serif;color:var(--at-tinta)}
.hl-pn{grid-area:n;font-style:italic;font-size:17px;line-height:var(--ren);color:var(--at-tenue)}
/* Lino salvia: el mismo lino multiplicado con verde salvia; encima, un retazo de lino claro cosido con pespunte rojo,
y los colores sugeridos como retazos pequeños de la misma tela. */
.hl-salvia{color:var(--crema);--at-tinta:#F5EFE4;background:url(/img/texturas/lino-teja.jpg) center/280px auto repeat,#7B8A6B;background-blend-mode:multiply}
.hl-salvia::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
background:radial-gradient(80% 50% at 30% 0%,rgba(255,246,226,.14),transparent 65%),linear-gradient(180deg,rgba(20,28,16,.22),transparent 20%,transparent 80%,rgba(20,28,16,.28))}
.hl-salvia .hl-mano{color:#F3C9B4}
.hl-parche{position:relative;max-width:420px;margin:0 auto;padding:38px 11% 36px;rotate:-1deg;color:#3D3027;--at-tenue:#6E6155;
background:url(/img/texturas/lino-teja.jpg) center/240px,#F7F2E8;background-blend-mode:multiply;
clip-path:polygon(0 1%,4% 0,30% .6%,61% 0,96% .8%,100% 0,99.4% 34%,100% 70%,99.2% 100%,62% 99.2%,33% 100%,2% 99.4%,0 100%,.6% 62%);
box-shadow:0 1px 1px rgba(0,0,0,.2)}
.hl-parche::after{content:"";position:absolute;inset:11px;pointer-events:none;border:1.6px dashed rgba(168,64,47,.85);border-radius:2px}
.hl-parche p{margin:0}
.hl-telas{display:flex;justify-content:center;flex-wrap:wrap;gap:14px;margin:20px 0 6px}
.hl-telas i{display:block;width:50px;height:50px;rotate:-3deg;background:url(/img/texturas/hilo-lino.jpg) center/160px,var(--c);background-blend-mode:multiply;
box-shadow:1px 2px 3px rgba(40,30,20,.35);outline:1px dashed rgba(255,248,236,.7);outline-offset:-6px;clip-path:polygon(2% 0,98% 1%,100% 97%,1% 100%)}
.hl-telas i:nth-child(2n){rotate:2.5deg}
/* Galería sobre pino: fotos instantáneas giradas, sujetas con cinta de papel (washi) a rayas, lisa o de cuadros. */
.hl-album{display:grid;grid-template-columns:repeat(2,1fr);gap:36px 20px;max-width:760px;margin:0 auto;padding:10px 4px 0}
.hl-polar{position:relative;rotate:var(--r);transition:rotate .5s}
.hl-polar:hover{rotate:0deg}
.inv[data-theme="at-hilo"] .hl-polar .gal-i{display:block;width:100%;aspect-ratio:auto;border-radius:0;padding:9px 9px 40px;background:#FBF8F1;box-shadow:0 1px 2px rgba(60,40,20,.3),3px 14px 22px -10px rgba(60,40,20,.55)}
.inv[data-theme="at-hilo"] .hl-polar img{display:block;height:auto;aspect-ratio:1;filter:sepia(.1) saturate(.92)}
.hl-washi{position:absolute;top:-11px;left:50%;width:56%;height:24px;transform:translateX(-50%) rotate(-5deg);pointer-events:none;opacity:.88;
clip-path:polygon(0 8%,4% 0,8% 10%,12% 0,100% 0,96% 12%,100% 24%,96% 38%,100% 52%,96% 66%,100% 80%,96% 92%,100% 100%,0 100%,4% 86%,0 72%,4% 58%,0 44%,4% 30%,0 18%);
background:repeating-linear-gradient(120deg,rgba(168,64,47,.75) 0 5px,rgba(248,240,226,.8) 5px 11px);box-shadow:0 1px 1px rgba(60,40,20,.15)}
.hl-washi-1{background:linear-gradient(rgba(95,111,83,.72),rgba(95,111,83,.72));transform:translateX(-50%) rotate(4deg)}
.hl-washi-2{background:repeating-linear-gradient(0deg,rgba(200,168,128,.55) 0 1px,transparent 1px 6px),repeating-linear-gradient(90deg,rgba(200,168,128,.55) 0 1px,transparent 1px 6px),rgba(245,236,220,.82);transform:translateX(-50%) rotate(-2deg)}
@media(min-width:720px){.hl-album{grid-template-columns:repeat(3,1fr);gap:48px 34px}}
/* Kraft tostado: el kraft de la mesa multiplicado con café. Encima, sobres de papel de fibra con la solapa abierta. */
.hl-tostado{color:var(--crema);--at-tinta:#F5EFE4;--at-tenue:rgba(245,239,228,.78);
background:url(/img/texturas/hilo-kraft-teja.jpg) center/560px auto repeat,#8A6440;background-blend-mode:multiply}
.hl-tostado::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
background:radial-gradient(80% 50% at 40% 20%,rgba(255,230,190,.12),transparent 70%),linear-gradient(180deg,rgba(30,18,8,.3),transparent 18%,transparent 82%,rgba(30,18,8,.34))}
.hl-tostado .hl-mano{color:#F3C9B4}
.hl-tostado .hl-intro{color:rgba(245,239,228,.9)}
.hl-cartas{display:grid;gap:34px;margin-top:66px}
@media(min-width:860px){.hl-cartas{grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:34px 30px;align-items:start}.hl-tostado .hl-intro{max-width:40ch}}
.hl-carta{--pico:62px;position:relative;width:min(100%,420px);margin:var(--pico) auto 0;rotate:var(--r,0deg);color:#3D3027;--at-tinta:#3D3027;--at-tenue:#6E6155;--at-linea:rgba(61,48,39,.22);
background:linear-gradient(to top right,transparent calc(50% - .6px),rgba(110,80,45,.2) 50%,transparent calc(50% + .8px)) 0 100%/50.2% 64% no-repeat,
linear-gradient(to top left,transparent calc(50% - .6px),rgba(110,80,45,.2) 50%,transparent calc(50% + .8px)) 100% 100%/50.2% 64% no-repeat,
url(/img/texturas/papel-fibra.jpg) center/700px,#F5EEE1;background-blend-mode:normal,normal,multiply,normal;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.35),0 1px 1px rgba(0,0,0,.4),0 18px 28px -12px rgba(0,0,0,.7)}
.hl-pico{position:absolute;left:0;right:0;bottom:100%;height:var(--pico);clip-path:polygon(0 100%,50% 4%,100% 100%);
background:linear-gradient(0deg,rgba(80,55,30,.22),rgba(80,55,30,.04) 60%),url(/img/texturas/papel-fibra.jpg) center/700px,#E9DFCC;background-blend-mode:normal,multiply,normal}
.hl-carta-in{position:relative;padding:34px 10% 32px}
.hl-carta-in .hl-mano{color:var(--hilo)}
.hl-carta-in p{margin:4px 0 0}
.hl-carta .at-clabe{font-size:17px}
.hl-carta .at-clabe .copy{box-shadow:inset 0 0 0 1px rgba(61,48,39,.3)}
/* Hospedaje, notas y hashtag: kraft limpio, solo tipografía. */
.hl-hoteles{display:grid;gap:30px}
.hl-hotel h3{margin:0 0 6px;font:400 clamp(25px,6.6vw,30px)/1.2 var(--at-fd),serif}
.hl-hotel p{margin:2px 0}
.hl-hotel a[href^="tel"]{color:var(--hilo-osc);text-decoration:none;border-bottom:1px solid rgba(107,49,37,.4)}
.hl-notas{margin:0;padding:0;list-style:none;display:grid;gap:8px;font-style:italic;font-size:19px}
.hl-tagh{margin:0;font:300 clamp(30px,8vw,42px)/1.1 var(--at-fd),serif}
/* Lino teñido de hilo rojo: la confirmación es una postal de cartulina de corte recto (papel de fibra) con filete,
estampilla y la etiqueta de kraft (hilo-etiqueta.png) colgando de la orilla. */
.hl-rojo{background:url(/img/texturas/lino-teja.jpg) center/300px auto repeat,#A04634;background-blend-mode:multiply}
.hl-rojo::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
background:radial-gradient(80% 45% at 40% 0%,rgba(255,220,190,.14),transparent 65%),linear-gradient(180deg,rgba(40,10,6,.28),transparent 16%,transparent 84%,rgba(40,10,6,.34))}
.hl-rsvp .hl-sec{padding:120px max(5vw,16px) 96px}
.hl-cartulina{position:relative;max-width:480px;margin:0 auto;padding:116px 10% 54px;color:#3D3027;--at-tinta:#3D3027;--at-tenue:#6E6155;--at-linea:rgba(61,48,39,.2);text-align:left;
background:url(/img/texturas/papel-fibra.jpg) center/800px,#F6F0E3;background-blend-mode:multiply;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.4),0 1px 1px rgba(0,0,0,.45),0 30px 50px -16px rgba(0,0,0,.6)}
.hl-cartulina::after{content:"";position:absolute;inset:12px;pointer-events:none;border:1px solid rgba(95,111,83,.42);box-shadow:inset 0 0 0 3px rgba(246,240,227,0),inset 0 0 0 4px rgba(95,111,83,.22)}
.hl-cartulina .hl-h{text-align:center}
.hl-cartulina .hl-mano{color:var(--hilo)}
.hl-cartulina .hl-t{font-size:clamp(32px,8.6vw,44px)}
.hl-colgante{position:absolute;left:7%;top:-96px;z-index:2;width:clamp(60px,17vw,74px);aspect-ratio:396/900;rotate:-9deg;transform-origin:50% 0;isolation:isolate}
.hl-colgante::after{content:"";position:absolute;inset:0;z-index:-1;background:url(/img/texturas/hilo-etiqueta.png) center/100% 100% no-repeat}
.hl-colgante::before{content:"";position:absolute;inset:36% 6% 2%;z-index:-2;box-shadow:3px 10px 14px rgba(40,20,10,.38)}
.hl-sello-rsvp{right:7%;top:24px;left:auto;rotate:5deg;width:clamp(56px,15vw,70px)}
.hl-cartulina .rsvp{grid-template-columns:minmax(0,1fr)}
.inv[data-theme="at-hilo"] .hl-cartulina .rsvp .btn{justify-self:stretch;width:100%;min-width:0;padding-left:12px;padding-right:12px;letter-spacing:.14em;white-space:normal}
.hl-cartulina .fld input,.hl-cartulina .fld select,.hl-cartulina .fld textarea{min-width:0;width:100%;box-sizing:border-box}
.inv[data-theme="at-hilo"] .rsvp .btn{background:var(--hilo);color:var(--crema);border-radius:0;font-size:16px}
.inv[data-theme="at-hilo"] .seg input:checked + span{background:var(--salvia);color:var(--crema)}
.inv[data-theme="at-hilo"] .fld > span{font-size:13px;color:#5E5247}
.inv[data-theme="at-hilo"] .seg span{font-size:17px}
.inv[data-theme="at-hilo"] .fld input,.inv[data-theme="at-hilo"] .fld select,.inv[data-theme="at-hilo"] .fld textarea{font-size:17px}
/* Cierre: kraft limpio con el emblema en grabado a una tinta (hilo-carrete.webp: carrete de hilo con dos espigas). */
.hl-cierre .hl-sec{padding:88px max(10vw,32px) 56px}
.hl-emblema{display:block;width:min(56vw,230px);aspect-ratio:1;margin:0 auto 10px;background:url(/img/texturas/hilo-carrete.webp) center/contain no-repeat;mix-blend-mode:multiply;opacity:.92}
.hl-cierre .hl-intro{font-style:italic;font-size:20px}
.hl-firma{margin:16px 0 10px;font-size:clamp(23px,6.4vw,30px)}
.hl-puntos{letter-spacing:.3em;color:var(--at-tenue)}
.inv[data-theme="at-hilo"] .inv-brand{color:rgba(61,48,39,.7)}
/* ---------- Apertura en video (sobre kraft sobre lino) ----------
El video sale en 2:3: se muestra entero para que el sobre no se corte en teléfonos angostos; arriba y abajo
queda el mismo lino (foto) y las orillas del video se funden en él, sin cortes duros. */
.inv[data-template="hilo"] .op-video{background:radial-gradient(80% 50% at 22% 18%,rgba(255,244,226,.35),transparent 70%),
radial-gradient(120% 70% at 50% 118%,rgba(80,60,40,.28),transparent 70%),url(/img/texturas/hilo-lino.jpg) center/440px,#D6C7B3;
background-blend-mode:normal,normal,multiply,normal}
.inv[data-template="hilo"] .opv{inset:auto;left:50%;top:50%;width:min(100%,calc(100svh * 2 / 3));height:auto;aspect-ratio:2/3;transform:translate(-50%,-50%);object-fit:cover;background:transparent;
-webkit-mask-image:linear-gradient(180deg,transparent,#000 8%,#000 92%,transparent),linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);-webkit-mask-composite:source-in;
mask-image:linear-gradient(180deg,transparent,#000 8%,#000 92%,transparent),linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);mask-composite:intersect}
.inv[data-template="hilo"] .opv-ui{padding-top:max(30px,5.4svh);gap:4px}
.inv[data-template="hilo"] .opv-ui .op-to{font:400 21px/1.4 'Homemade Apple',cursive;letter-spacing:0;text-transform:none;color:#7A3426;text-shadow:0 0 14px rgba(250,243,232,.95),0 1px 0 rgba(250,243,232,.8)}
.inv[data-template="hilo"] .opv-ui .op-to strong{font-weight:400;color:#5A2A1F}
.inv[data-template="hilo"] .opv-n{margin-top:2px;font:300 clamp(38px,10.4vw,56px)/1.04 'Fraunces',serif;font-variation-settings:"opsz" 144;letter-spacing:-.01em;color:#3D3027;
text-shadow:0 0 18px rgba(250,243,232,.95),0 0 4px rgba(250,243,232,.8);text-wrap:balance;max-width:14ch}
.inv[data-template="hilo"] .opv-tap{white-space:nowrap;background:rgba(245,239,228,.92);color:#3D3027;font:600 13px/1 'Fraunces',serif;letter-spacing:.22em;
box-shadow:inset 0 0 0 1px rgba(61,48,39,.22),4px 12px 26px -8px rgba(60,38,18,.55)}
.inv[data-template="hilo"] .opv-skip{min-height:40px;border-radius:999px;background:rgba(61,48,39,.6);color:#F5EFE4;font:600 12px/1 'Fraunces',serif;letter-spacing:.22em;
backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}