/* Atelier · Listón. Papel de algodón, satín rosa viejo, encaje y pluma. Hecha a mano: nada perfectamente recto. La luz viene de arriba a la izquierda. La apertura es un video (catalogo.js → videoApertura); la apertura animada en CSS de abajo queda como respaldo si se quita el video. */ .inv[data-theme="at-liston"]{ --at-papel:#F8F2EC; --at-fondo:#F3EAE3; --at-tinta:#3A2E2E; --at-tenue:#664F4E; --at-acento:#A65C61; --at-linea:rgba(58,46,46,.16); --at-fd:'Cormorant Garamond'; --at-ft:'Cormorant Garamond'; --mano:'Caveat'; --script:'Allison'; --satin1:#A85C68; --satin2:#D9939C; --satin3:#F6DEE1; --crema:#F8F2EC; font-size:19px; line-height:1.5; font-weight:500; } /* Satín: tres paradas y brillo móvil */ .ls-satin{background:linear-gradient(90deg,var(--satin1) 0%,var(--satin2) 22%,var(--satin3) calc(50% + var(--tx) * 18%),var(--satin2) 72%,var(--satin1) 100%)} /* ---------- Apertura: paquete atado ---------- */ .ls-op{background:#E6D9D1;color:var(--at-tinta)} .ls-mesa{position:absolute;inset:0;background: radial-gradient(80% 55% at 50% 28%,rgba(255,250,246,.9),transparent 70%), repeating-linear-gradient(0deg,rgba(120,90,80,.05) 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,rgba(120,90,80,.05) 0 1px,transparent 1px 3px),#E6D9D1} .ls-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} .ls-op .at-para{color:var(--at-acento);opacity:1;font-weight:600} .ls-pista{margin:0;max-width:26ch;font:500 21px/1.2 var(--mano),cursive;color:var(--at-tenue)} .ls-op .at-skip{color:var(--at-tinta);box-shadow:inset 0 0 0 1px rgba(58,46,46,.3);background:rgba(248,242,236,.8)} .ls-paquete{--w:min(62vw,250px);position:relative;z-index:2;width:var(--w);aspect-ratio:3/4;perspective:1300px;transform:translateY(5vh);filter:drop-shadow(0 34px 30px rgba(80,50,50,.35))} /* Sin filtro aquí: un filtro aplana el preserve-3d y el papel se abriría sin perspectiva. */ .ls-caja{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(9deg)} .ls-tarjeta-w{position:absolute;inset:0;z-index:0;display:grid;place-items:center;transition:transform 1.3s cubic-bezier(.5,.05,.2,1) 3s,filter 1.3s 3s} .ls-tarjeta{position:relative;width:90%;height:92%;display:grid;align-content:center;justify-items:center;gap:6px;padding:10% 8%;text-align:center;background:var(--crema);color:var(--at-tinta)} .ls-tj-eb{font:600 9px/1 var(--at-ft),serif;letter-spacing:.3em;text-transform:uppercase;color:var(--at-tenue)} .ls-tj-foto{display:block;width:54%;aspect-ratio:4/5;border-radius:50%;overflow:hidden;box-shadow:0 0 0 1px var(--at-linea),0 0 0 5px var(--crema),0 0 0 6px var(--at-linea);margin:4% 0} .ls-tj-foto img{width:100%;height:100%;object-fit:cover} .ls-tj-n{font:400 clamp(30px,8.4vw,44px)/1 var(--script),cursive;color:var(--at-acento)} .ls-tj-f{font:italic 500 12px/1.2 var(--at-ft),serif;letter-spacing:.04em} .ls-papel{position:absolute;top:0;bottom:0;width:50.5%;z-index:1;background:linear-gradient(90deg,rgba(0,0,0,.05),transparent 20%,transparent 80%,rgba(0,0,0,.07)),#F6EFE9; transition:transform 1.5s cubic-bezier(.6,.05,.25,1) 1.95s,filter 1.5s 1.95s} .ls-papel-izq{left:0;transform-origin:0 50%;box-shadow:inset -1px 0 0 rgba(0,0,0,.06)} .ls-papel-der{right:0;transform-origin:100% 50%;box-shadow:inset 1px 0 0 rgba(0,0,0,.06),-6px 0 10px -8px rgba(0,0,0,.25)} .ls-papel::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(255,255,255,.35),transparent 45%,rgba(90,60,60,.06))} .ls-banda{position:absolute;z-index:2;background:linear-gradient(90deg,var(--satin1) 0%,var(--satin2) 22%,var(--satin3) calc(50% + var(--tx) * 18%),var(--satin2) 72%,var(--satin1) 100%);box-shadow:0 1px 3px rgba(80,40,50,.35)} .ls-banda-v{left:50%;top:-3%;bottom:-3%;width:11%;transform:translateX(-50%);transition:transform 1.1s cubic-bezier(.6,0,.3,1) .75s} .ls-banda-h{left:-3%;right:-3%;top:36%;height:11%;background:linear-gradient(180deg,var(--satin1) 0%,var(--satin2) 22%,var(--satin3) calc(50% + var(--ty) * 14%),var(--satin2) 72%,var(--satin1) 100%);transition:transform 1.1s cubic-bezier(.6,0,.3,1) .95s} .ls-mono{position:absolute;z-index:3;left:50%;top:41.5%;width:66%;padding:0;border:0;background:none;transform:translate(-50%,-46%);cursor:grab;touch-action:none} .ls-mono-svg{display:block;width:100%;height:auto;filter:drop-shadow(0 4px 4px rgba(80,40,50,.35)) brightness(calc(1 + var(--tx) * .06))} .ls-lazos{transform-origin:110px 78px;transform:scale(calc(1 - var(--drag,0) * .5));transition:transform .18s ease-out} .ls-colas{transform-origin:110px 78px;transform:translateY(calc(var(--drag,0) * 30px)) scaleY(calc(1 + var(--drag,0) * .4));transition:transform .18s ease-out} .ls-op.is-dragging .ls-lazos,.ls-op.is-dragging .ls-colas{transition:none} .ls-op:not(.is-opening) .ls-mono:hover .ls-mono-svg{transform:translateY(2px)} /* Secuencia: moño que se desata, bandas que se deslizan, papel que se abre, tarjeta que llega. */ .ls-op.is-opening .ls-lazos{transform:scale(0);transition:transform .8s cubic-bezier(.5,0,.3,1)} .ls-op.is-opening .ls-nudo,.ls-op.is-opening .ls-nudo-s{opacity:0;transition:opacity .3s .55s} .ls-op.is-opening .ls-colas{transform:translateY(80px) scaleY(1.6);opacity:0;transition:transform 1s cubic-bezier(.5,0,.6,1) .25s,opacity .5s .8s} .ls-op.is-opening .ls-banda-v{transform:translate(-50%,118%) rotate(-3deg)} .ls-op.is-opening .ls-banda-h{transform:translateX(120%) rotate(4deg)} .ls-op.is-opening .ls-papel-izq{transform:rotateY(-162deg);filter:brightness(.9)} .ls-op.is-opening .ls-papel-der{transform:rotateY(162deg);filter:brightness(.9)} .ls-op.is-opening .ls-tarjeta-w{transform:scale(1.24) translateZ(20px) translateY(-2%);filter:drop-shadow(0 30px 30px rgba(80,50,50,.3))} .ls-op.is-opening .ls-pista,.ls-op.is-opening .at-para,.ls-op.is-opening .at-skip,.ls-op.is-opening .ls-mono{opacity:0;transition:opacity .5s .9s} .ls-op.is-opening::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;background:var(--at-fondo);opacity:0;animation:ls-fundido .7s ease-in 3.7s forwards} @keyframes ls-fundido{to{opacity:1}} @media (prefers-reduced-motion:reduce){.ls-op.is-opening::after{animation:none}} /* ---------- Página: un material por sección ---------- Cada sección es un «patio» a todo lo ancho con su material (.ls-patio.ls-); .ls-sec acota el texto. El lino rosa empolvado es la base de la pieza y el material al que siempre se vuelve: los patios «lino» no pintan fondo. Materiales (public/img/texturas): hoja de algodón rasgada (papel-fibra.jpg con máscara de orilla rasgada), jardín de rosas al atardecer (liston-jardin.jpg), encaje chantilly (liston-chantilly-teja.jpg) con banda de satín (liston-banda.png), algodón blanco (papel-crema-teja.jpg), satín rosa con pliegues (liston-satin.jpg), tarjeta desbarbada (tarjeta-algodon.png) con moño (liston-mono.png), tul rosa (liston-tul.jpg), papel perlado (liston-perlado-teja.jpg) y la rosa en grabado (liston-rosa.webp). Sombras siempre en box-shadow o en un pseudoelemento aparte, nunca con filter. Ningún fondo fijo. */ .inv[data-theme="at-liston"]{position:relative;background:#E7D6CF; --ls-r-arriba:url("data:image/svg+xml;utf8,"); --ls-r-abajo:url("data:image/svg+xml;utf8,"); --ls-r-izq:url("data:image/svg+xml;utf8,"); --ls-r-der:url("data:image/svg+xml;utf8,");} /* El lino corre con el contenido: teja espejada en dos capas a distinta escala y desfasadas, multiplicadas. */ .inv[data-theme="at-liston"]::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background:radial-gradient(90% 560px at 22% 0%,rgba(255,248,244,.55),transparent 62%),linear-gradient(90deg,rgba(120,70,70,.1),transparent 20%,transparent 80%,rgba(120,70,70,.1)), linear-gradient(rgba(250,236,234,.34),rgba(250,236,234,.34)),url(/img/texturas/lino-teja.jpg) 0 0/400px auto repeat,url(/img/texturas/lino-teja.jpg) 173px 241px/560px auto repeat,#F1D3CF; background-blend-mode:normal,normal,normal,multiply,multiply,normal} .inv[data-theme="at-liston"] .inv-main{position:relative;z-index:1} .ls{position:relative;background:none;color:var(--at-tinta)} .ls-mano{margin:0;font:500 clamp(22px,5.9vw,26px)/1.2 var(--mano),cursive;color:var(--at-acento)} /* Piezas raster */ .ls-monoR{display:block;aspect-ratio:1000/641;background:url(/img/texturas/liston-mono.png) center/contain no-repeat;pointer-events:none} .ls-encaje{position:relative;z-index:2;height:clamp(74px,21vw,104px);background:url(/img/texturas/liston-encaje.png) 50% 0/auto 100% repeat-x;pointer-events:none} .ls-rosa{display:block;width:min(50vw,210px);aspect-ratio:1;margin:0 auto;background:url(/img/texturas/liston-rosa.webp) center/contain no-repeat;pointer-events:none} /* Patios */ .ls-patio{position:relative;isolation:isolate} .ls-patio::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none} .ls-sec{position:relative;max-width:600px;margin:0 auto;padding:96px max(10vw,32px);text-align:center} .ls-ancho .ls-sec{max-width:900px} .ls-breve .ls-sec{padding-top:60px;padding-bottom:60px} .ls-con-soporte .ls-sec{padding-left:max(5vw,16px);padding-right:max(5vw,16px)} .ls-h{margin:0 0 36px;display:grid;justify-items:center;gap:8px} .ls-k{margin:0;font:600 13px/1.4 var(--at-ft),serif;letter-spacing:.26em;text-transform:uppercase;color:var(--at-tenue)} .ls-t{margin:0;font:italic 500 clamp(38px,9.6vw,52px)/1.06 var(--at-fd),serif;text-wrap:balance} .ls-onda{width:180px;height:20px;color:var(--at-acento);margin-top:4px} .ls-intro{margin:0 auto;max-width:32ch;text-wrap:pretty} .ls-nota{margin:16px auto 0;max-width:34ch;font-style:italic;font-size:17px;color:var(--at-tenue)} .inv[data-theme="at-liston"] .ls-link{display:inline-block;margin-top:12px;padding:0 0 1px;color:var(--at-acento);text-decoration:none;font:500 23px/1.2 var(--mano),cursive;border-bottom:1.5px solid currentColor} /* Dos patios de lino seguidos: un moño chico como costura entre los dos. */ .ls-lino + .ls-lino > .ls-sec::before{content:"";position:absolute;top:0;left:50%;width:64px;aspect-ratio:1000/641;transform:translate(-50%,-50%);background:url(/img/texturas/liston-mono.png) center/contain no-repeat} /* ---------- Portada: lino con la cenefa de encaje cosida arriba; hoja de algodón rasgada a mano al alto del teléfono ---------- La orilla rasgada es una máscara (cuatro tiras SVG con fibra irregular + el centro lleno): sirve a cualquier alto sin estirar nada. La foto en óvalo, atada con un tramo de listón y su moño. */ .ls-portada{--enc:clamp(74px,21vw,104px);position:relative;display:grid;min-height:100vh;min-height:100svh;padding:calc(var(--enc) * .5) max(12px,3.4vw) max(22px,2.8svh);max-width:620px;margin:0 auto} .ls-encaje-arriba{position:absolute;left:50%;top:-2px;width:100vw;height:var(--enc);max-width:none;transform:translateX(-50%)} .ls-pliego-portada{position:relative;isolation:isolate;z-index:1;display:grid} .ls-pliego-portada::before{content:"";position:absolute;inset:3% 5% 2%;z-index:-1;pointer-events:none;box-shadow:6px 20px 36px rgba(96,52,56,.3),1px 4px 8px rgba(96,52,56,.16)} .ls-rasgado{position:relative;min-height:calc(100svh - var(--enc) * .5 - max(22px,2.8svh));display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px; padding:max(84px,23%) 11% max(56px,14%);text-align:center;color:var(--at-tinta); background:linear-gradient(160deg,rgba(255,255,255,.5),rgba(255,255,255,0) 42%,rgba(120,80,70,.06)),linear-gradient(rgba(255,251,247,.38),rgba(255,251,247,.38)),url(/img/texturas/papel-fibra.jpg) center/760px auto,#FBF4EE; background-blend-mode:normal,normal,multiply,normal; /* Capas: arriba ∩ abajo ∩ izquierda ∩ (derecha ∪ relleno). La orilla derecha es una tira de 40 px (una tira de 1600 px dejaba una línea suelta junto al corte). */ -webkit-mask:var(--ls-r-arriba) 0 0/300px 1600px repeat-x,var(--ls-r-abajo) 0 100%/300px 1600px repeat-x,var(--ls-r-izq) 0 0/1600px 300px repeat-y,var(--ls-r-der) 100% 0/40px 300px repeat-y,linear-gradient(#000,#000) 0 0/calc(100% - 39px) 100% no-repeat; -webkit-mask-composite:source-in,source-in,source-in,source-over; mask:var(--ls-r-arriba) 0 0/300px 1600px repeat-x,var(--ls-r-abajo) 0 100%/300px 1600px repeat-x,var(--ls-r-izq) 0 0/1600px 300px repeat-y,var(--ls-r-der) 100% 0/40px 300px repeat-y,linear-gradient(#000,#000) 0 0/calc(100% - 39px) 100% no-repeat; mask-composite:intersect,intersect,intersect,add} .ls-eb{margin:0;font:600 13px/1.4 var(--at-ft),serif;letter-spacing:.32em;text-transform:uppercase;color:var(--at-tenue)} .ls-nombre{margin:0;font:400 clamp(76px,22vw,120px)/.9 var(--script),cursive;color:var(--at-acento);letter-spacing:.01em} .ls-ovalo{--w:min(66%,270px);position:relative;isolation:isolate;width:var(--w);margin:10px 0 calc(var(--w) * .2)} .ls-ovalo-in{position:relative;display:block;aspect-ratio:4/5;border-radius:50%;overflow:hidden; box-shadow:0 0 0 1px rgba(58,46,46,.14),0 0 0 8px #FBF6F0,0 0 0 9px rgba(58,46,46,.14),3px 14px 26px rgba(96,52,56,.28)} .ls-ovalo-in img{width:100%;height:100%;object-fit:cover} .ls-cinta{position:absolute;z-index:-1;left:-34%;right:-34%;top:84%;height:calc(var(--w) * .13); background:url(/img/texturas/liston-banda.png) center/100% 100% no-repeat;clip-path:polygon(0 0,100% 0,95% 50%,100% 100%,0 100%,5% 50%)} .ls-mono-foto{position:absolute;z-index:2;left:50%;top:calc(84% + var(--w) * .065);width:76%;transform:translate(-50%,-36%);rotate:-3deg} .ls-fecha{margin:0;font:italic 500 clamp(23px,6vw,27px)/1.3 var(--at-fd),serif;text-wrap:balance} .ls-portada .ls-mano{font-size:clamp(24px,6.4vw,28px)} .ls-lugar{margin:2px 0 0;font:600 13px/1.5 var(--at-ft),serif;letter-spacing:.24em;text-transform:uppercase;color:var(--at-tenue);max-width:26ch;text-wrap:balance} .ls-para{margin:6px 0 0;font-style:italic;color:var(--at-tenue)} /* ---------- Jardín: rosas al atardecer con la pérgola encendida (liston-jardin.jpg, 1024×1536) ---------- El cielo en penumbra queda arriba para la cita en blanco; la pérgola y las rosas, abajo. Velo en ::before. */ .ls-jardin{min-height:min(112svh,920px);display:grid;align-items:start;color:#FFF9F6;background:url(/img/texturas/liston-jardin.jpg) 62% 72%/cover #4A3340} .ls-jardin::before{background:linear-gradient(180deg,rgba(48,26,44,.66),rgba(56,30,50,.56) 26%,rgba(56,30,50,.2) 50%,rgba(40,22,30,0) 66%,rgba(36,20,26,.25) 90%,rgba(36,20,26,.5))} .ls-jardin .ls-sec{padding-top:max(84px,10svh);padding-bottom:min(50svh,440px)} @media (min-width:900px){.ls-jardin{background-position:50% 44%}.ls-jardin::before{background:linear-gradient(180deg,rgba(48,26,44,.62),rgba(56,30,50,.5) 30%,rgba(56,30,50,.3) 52%,rgba(40,22,30,.06) 72%,rgba(36,20,26,.4))}} .ls-cita{margin:0} .ls-cita p{margin:0;font:italic 500 clamp(29px,7.6vw,40px)/1.26 var(--at-fd),serif;color:#FFF9F6;text-wrap:balance;text-shadow:0 2px 22px rgba(40,18,32,.55)} .ls-cita cite{display:block;margin-top:16px;font:600 13px/1.3 var(--at-ft),serif;letter-spacing:.26em;text-transform:uppercase;font-style:normal;color:#F6D2D6} .ls-jardin .ls-intro{margin-top:24px;font-size:19px;color:rgba(255,249,246,.94);text-shadow:0 1px 14px rgba(40,18,32,.6)} .ls-jardin .ls-mano{margin-top:16px;color:#FFD3D8;text-shadow:0 1px 12px rgba(40,18,32,.6)} /* ---------- Encaje chantilly: una banda de satín cruza de orilla a orilla y lleva la cuenta ---------- La banda (liston-banda.png, 1200×181) se muestra a su proporción en teléfono y apenas se estira a lo ancho en escritorio; se oscurece con multiply para que el blanco se lea. */ .ls-chantilly{background:url(/img/texturas/liston-chantilly-teja.jpg) 0 0/360px auto repeat,#E9C9C6} .ls-chantilly::before{background:radial-gradient(70% 55% at 50% 50%,rgba(70,30,38,.0),rgba(70,30,38,.12)),linear-gradient(180deg,rgba(80,40,46,.2),transparent 16%,transparent 84%,rgba(80,40,46,.2))} .ls-chantilly > .ls-sec{max-width:none;padding:88px 0 84px} .ls-cinta-cd{position:relative;padding:20px 16px 22px;color:#FFF9F6; background:url(/img/texturas/liston-banda.png) center/max(100%,1000px) 100% no-repeat,#D9A3A9;background-blend-mode:multiply; box-shadow:0 16px 24px -14px rgba(70,24,34,.6),0 3px 5px -2px rgba(70,24,34,.32)} .ls-cinta-cd .ls-k{color:#FFF4F2;text-shadow:0 1px 2px rgba(80,30,40,.55)} .ls-cd{display:flex;justify-content:center;gap:clamp(24px,7vw,48px);margin-top:8px} .ls-cd .cdu{display:grid;justify-items:center;gap:4px} .ls-cd b{font:500 clamp(52px,14vw,70px)/1 var(--at-fd),serif;font-variant-numeric:lining-nums tabular-nums;color:#FFFBF9;text-shadow:0 1px 2px rgba(80,28,40,.55),0 0 22px rgba(110,40,56,.35)} .ls-cd small{font:500 22px/1 var(--mano),cursive;color:#FFEDEE;text-shadow:0 1px 2px rgba(80,28,40,.6)} .ls-guardar{margin:30px 0 0} .inv[data-theme="at-liston"] .ls-guardar .ls-link{margin:0;padding:6px 20px 8px;border:0;color:#8A4650;background:#FCF6F2;box-shadow:0 1px 1px rgba(80,30,40,.2),0 10px 18px -10px rgba(80,30,40,.5)} /* ---------- Algodón blanco, limpio: solo tipografía en tinta rosa viejo ---------- */ .ls-algodon{background:url(/img/texturas/papel-crema-teja.jpg) 0 0/460px auto repeat,#FDF9F6;background-blend-mode:multiply} .ls-algodon::before{background:linear-gradient(180deg,rgba(120,70,70,.1),transparent 10%,transparent 90%,rgba(120,70,70,.1))} .ls-papas{display:grid;gap:28px;margin:0 0 40px} @media (min-width:600px){.ls-papas{grid-template-columns:1fr 1fr}.ls-papas:has(> :only-child){grid-template-columns:1fr}} .ls-nom{margin:2px 0 0;font:500 clamp(23px,6vw,27px)/1.3 var(--at-fd),serif;text-wrap:balance} .ls-padrinos{columns:2;column-gap:22px;margin:0;padding:30px 0 0;border-top:1px solid rgba(166,92,97,.28)} .ls-padrinos:has(> div:only-child){columns:1} .ls-padrinos div{break-inside:avoid;margin:0 0 20px} .ls-padrinos div:last-child{margin-bottom:0} .ls-padrinos dt{font:500 23px/1.2 var(--mano),cursive;color:var(--at-acento);margin-bottom:4px} .ls-padrinos dd{margin:0;font:500 21px/1.35 var(--at-fd),serif} /* ---------- Satín rosa con pliegues (liston-satin.jpg, una sola foto a cubrir: en teja se vería caleidoscopio) ---------- Cada lugar con su foto en un óvalo de oro rosa: aro de metal, paspartú de papel y un hilo de oro junto a la foto. */ .ls-satin{--at-tenue:#5A4041;--at-acento:#87414B;background:url(/img/texturas/liston-satin.jpg) 50% 30%/cover #D9A9A8} .ls-satin::before{background:radial-gradient(75% 55% at 50% 50%,rgba(255,240,238,.34),rgba(255,240,238,.12)),linear-gradient(180deg,rgba(90,40,48,.22),transparent 14%,transparent 86%,rgba(90,40,48,.24))} .ls-satin .ls-k{color:#5A4041} .ls-satin .ls-onda{color:#87414B} .ls-lugares{display:grid;gap:64px} @media (min-width:760px){.ls-lugares{grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:40px}} .ls-oro{position:relative;width:min(68vw,270px);aspect-ratio:4/5;margin:0 auto 26px;padding:5px;border-radius:50%; background:linear-gradient(140deg,#8C5849,#E9C3B1 20%,#B27B67 38%,#F7DDCF 54%,#A06A58 72%,#E2B5A1 90%,#9A6352); box-shadow:0 24px 36px -14px rgba(70,24,34,.6),0 4px 8px rgba(70,24,34,.25)} .ls-oro-in{display:block;width:100%;height:100%;padding:9px;border-radius:50%;background:#FBF5F1;box-shadow:inset 0 1px 3px rgba(80,40,40,.25)} .ls-oro-in img{display:block;width:100%;height:100%;object-fit:cover;border-radius:50%;box-shadow:0 0 0 1.5px #C2907B} .ls-sitio-t h3{margin:6px 0 6px;font:500 clamp(26px,6.8vw,31px)/1.15 var(--at-fd),serif;text-wrap:balance} .ls-hora{margin:0;font-style:italic;font-size:20px;color:var(--at-acento)} .ls-dir{margin:8px auto 0;max-width:28ch;font-size:17px;line-height:1.5;color:var(--at-tenue)} /* ---------- Programa: tarjeta de algodón desbarbada (tarjeta-algodon.png, 2:3) con un moño chico en la esquina, sobre lino ---------- aspect-ratio 2/3 como mínimo: la tarjeta nunca se aplasta; si el programa es largo, crece. */ .ls-tarjeta-prog{position:relative;isolation:isolate;max-width:440px;aspect-ratio:2/3;margin:0 auto;padding:17% 13% 18%;display:flex;flex-direction:column;justify-content:center;background:none} .ls-tarjeta-prog::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:url(/img/texturas/tarjeta-algodon.png) center/100% 100% no-repeat} .ls-tarjeta-prog::before{content:"";position:absolute;inset:8% 10%;z-index:-2;pointer-events:none;border-radius:8px;box-shadow:6px 22px 40px rgba(96,52,56,.32),1px 5px 10px rgba(96,52,56,.16)} .ls-mono-esquina{position:absolute;z-index:2;top:-1%;right:-5%;width:40%;rotate:16deg} .ls-tarjeta-prog .ls-h{margin-bottom:22px} .ls-tarjeta-prog .ls-t{font-size:clamp(34px,9vw,44px)} .ls-prog{list-style:none;margin:0;padding:0;text-align:left} .ls-prog li{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:baseline;padding:12px 0;border-bottom:1px solid rgba(166,92,97,.22)} .ls-prog li:last-child{border-bottom:0} .ls-ph{min-width:78px;font:500 22px/1.1 var(--mano),cursive;color:var(--at-acento);white-space:nowrap} .ls-pd{display:grid;gap:2px}.ls-pd strong{font:500 22px/1.2 var(--at-fd),serif}.ls-pd small{color:var(--at-tenue);font-size:16px;font-style:italic} /* ---------- Tul rosa (liston-tul.jpg): la tela del vestido; las muestras son botones forrados de tela ---------- */ .ls-tul{background:url(/img/texturas/liston-tul.jpg) 50% 50%/cover #EBCACA} .ls-tul::before{background:radial-gradient(70% 60% at 50% 50%,rgba(255,246,244,.58),rgba(255,246,244,.3)),linear-gradient(180deg,rgba(110,60,66,.14),transparent 14%,transparent 86%,rgba(110,60,66,.14))} .ls-tul .ls-nota{color:#5E4446} .ls-tul .ls-intro{font-size:19px} .ls-botones{display:flex;flex-wrap:wrap;justify-content:center;gap:18px 20px;margin:26px 0 4px} .ls-botones i{position:relative;display:block;width:52px;height:52px;border-radius:50%; background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.5),rgba(255,255,255,0) 42%),radial-gradient(circle,rgba(0,0,0,0) 56%,rgba(0,0,0,.28) 100%), url(/img/texturas/lino-teja.jpg) 0 0/80px auto,var(--c);background-blend-mode:normal,normal,multiply,normal; box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 -2px 3px rgba(0,0,0,.18) inset,0 4px 7px -2px rgba(60,24,30,.5),0 1px 2px rgba(60,24,30,.3)} .ls-botones i::after{content:"";position:absolute;inset:7px;border-radius:50%;border:1px dashed rgba(255,255,255,.35)} .ls-botones i:nth-child(2n){translate:0 4px} /* ---------- Papel perlado (liston-perlado-teja.jpg): fotos en marcos redondeados atadas de dos en dos por un listón ---------- */ .ls-perlado{background:linear-gradient(115deg,rgba(255,226,234,0) 6%,rgba(255,230,238,.5) 34%,rgba(232,238,255,.42) 56%,rgba(255,248,236,.3) 72%,rgba(255,250,240,0) 90%), linear-gradient(rgba(255,253,250,.34),rgba(255,253,250,.34)), url(/img/texturas/liston-perlado-teja.jpg) 0 0/420px auto repeat,url(/img/texturas/liston-perlado-teja.jpg) 190px 260px/610px auto repeat,#FDFAF6; background-blend-mode:normal,normal,multiply,multiply,normal} .ls-perlado::before{background:linear-gradient(180deg,rgba(120,80,80,.12),transparent 10%,transparent 90%,rgba(120,80,80,.12))} .ls-album{display:grid;gap:40px;max-width:700px;margin:0 auto} .ls-fila{position:relative;isolation:isolate;display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,6vw,48px);padding:0 2px} .ls-fila-1{grid-template-columns:minmax(0,calc(50% - 11px));justify-content:center} .ls-cordon{position:absolute;z-index:-1;left:-14%;right:-14%;top:50%;height:clamp(20px,5.4vw,30px);transform:translateY(-50%) rotate(-1.6deg); background:url(/img/texturas/liston-banda.png) center/100% 100% no-repeat;clip-path:polygon(0 0,100% 0,calc(100% - 12px) 50%,100% 100%,0 100%,12px 50%)} .ls-fila:nth-child(2n) .ls-cordon{transform:translateY(-50%) rotate(1.4deg)} .ls-fila:first-child::after{content:"";position:absolute;z-index:2;left:50%;top:50%;width:clamp(84px,24vw,120px);aspect-ratio:1000/641;transform:translate(-50%,-40%) rotate(-4deg); background:url(/img/texturas/liston-mono.png) center/contain no-repeat;pointer-events:none} .ls-fila-1::after{display:none} .ls-foto{position:relative;rotate:var(--r);transition:rotate .5s} .ls-foto:hover{rotate:0deg} .inv[data-theme="at-liston"] .ls-foto .gal-i{grid-row:auto;aspect-ratio:4/5;padding:7px;border-radius:20px;background:#FDFBF8; box-shadow:inset 0 0 0 1px rgba(166,92,97,.18),0 1px 2px rgba(70,40,40,.18),0 18px 26px -16px rgba(80,40,46,.6)} .inv[data-theme="at-liston"] .ls-foto .gal-i img{border-radius:14px} /* ---------- Regalos: lino limpio con sobres de papel perlado abiertos (la solapa en pico hacia arriba) ---------- */ .ls-sobres{display:grid;gap:clamp(96px,26vw,130px);margin-top:clamp(96px,26vw,124px)} .ls-sobre{position:relative;width:100%;max-width:420px;margin:0 auto;padding:36px 10% 38px;color:var(--at-tinta); background:linear-gradient(170deg,rgba(255,255,255,.4),rgba(255,255,255,0) 40%),url(/img/texturas/liston-perlado-teja.jpg) 0 0/380px auto,#FCF8F4;background-blend-mode:normal,multiply,normal; box-shadow:inset 0 0 0 1px rgba(255,255,255,.5),0 1px 1px rgba(80,40,40,.22),0 20px 30px -16px rgba(96,52,56,.55)} .ls-solapa{position:absolute;left:0;right:0;bottom:100%;height:clamp(78px,22vw,104px);clip-path:polygon(0 100%,50% 0,100% 100%); background:linear-gradient(180deg,rgba(255,255,255,.35),rgba(140,90,90,.14)),url(/img/texturas/liston-perlado-teja.jpg) 40px 0/380px auto,#F4EBE6;background-blend-mode:normal,multiply,normal} /* Forro del sobre: el encaje chantilly asoma en la cara interior de la solapa abierta. */ .ls-solapa::before{content:"";position:absolute;left:16px;right:16px;top:16px;bottom:0;clip-path:polygon(0 100%,50% 0,100% 100%); background:linear-gradient(180deg,rgba(255,244,242,.2),rgba(90,40,50,.12)),url(/img/texturas/liston-chantilly-teja.jpg) 0 0/200px auto,#E9C9C6;background-blend-mode:normal,normal,normal} .ls-solapa::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:rgba(140,90,90,.25)} .ls-sobre-in p{margin:4px 0 0} .ls-sobre-in .ls-mano{margin:0 0 6px} .ls-sobre .at-clabe{font-size:17px} /* Hospedaje y notas (lino o algodón) */ .ls-hoteles{display:grid;gap:34px} .ls-hotel h3{margin:0 0 6px;font:500 26px/1.2 var(--at-fd),serif} .ls-hotel p{margin:4px 0 8px} .ls-notas{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-style:italic;font-size:20px;color:var(--at-tenue)} .ls-tag{margin:6px 0 0;font:italic 500 clamp(36px,10vw,50px)/1.1 var(--at-fd),serif;letter-spacing:.01em;color:var(--at-acento)} /* ---------- Confirmación: pliego de papel de corte recto con filete doble rosa viejo, sobre el satín ---------- */ .ls-rsvp > .ls-sec{padding-top:80px;padding-bottom:96px} .ls-pliego{position:relative;max-width:480px;margin:0 auto;padding:58px 10% 60px;text-align:left;color:var(--at-tinta);--at-tenue:#664F4E;--at-acento:#A65C61; background:linear-gradient(165deg,rgba(255,255,255,.45),rgba(255,255,255,0) 45%),url(/img/texturas/papel-crema-teja.jpg) 0 0/420px auto,#FCF7F3;background-blend-mode:normal,multiply,normal; box-shadow:0 1px 1px rgba(70,24,34,.3),0 30px 48px -18px rgba(70,24,34,.62),0 8px 16px -8px rgba(70,24,34,.3)} .ls-pliego::before,.ls-pliego::after{content:"";position:absolute;pointer-events:none} .ls-pliego::before{inset:14px;border:1px solid rgba(166,92,97,.75)} .ls-pliego::after{inset:18px;border:.5px solid rgba(166,92,97,.45)} .ls-pliego .ls-h{text-align:center;margin-bottom:28px} .ls-pliego .ls-t{font-size:clamp(34px,9vw,46px)} .ls-rsvp .rsvp{grid-template-columns:minmax(0,1fr)} .ls-rsvp .fld input,.ls-rsvp .fld select,.ls-rsvp .fld textarea{min-width:0;width:100%;box-sizing:border-box} .inv[data-theme="at-liston"] .ls-rsvp .rsvp .btn{justify-self:stretch;width:100%;min-width:0;padding-left:12px;padding-right:12px;white-space:normal} .inv[data-theme="at-liston"] .rsvp .btn{background:var(--at-acento);color:#FFF9F6;border-radius:0;font-size:16px;letter-spacing:.16em} .inv[data-theme="at-liston"] .seg input:checked + span{background:var(--at-acento);color:#FFF9F6} .inv[data-theme="at-liston"] .seg span{font-size:17px} .inv[data-theme="at-liston"] .fld > span{font-size:13px;letter-spacing:.18em} .inv[data-theme="at-liston"] .fld input,.inv[data-theme="at-liston"] .fld select,.inv[data-theme="at-liston"] .fld textarea{font-size:17px} /* ---------- Cierre: lino limpio, la rosa abierta en grabado a una tinta (PNG transparente), la firma y la cenefa al pie ---------- */ .ls-cierre{overflow:hidden} .ls-cierre > .ls-sec{padding:88px max(10vw,32px) 48px} .ls-cierre .ls-rosa{margin-bottom:18px} .ls-cierre .ls-intro{margin-bottom:8px} .ls-firma{margin:10px 0 8px;font:400 clamp(60px,16vw,86px)/1 var(--script),cursive;color:var(--at-acento)} .ls-encaje-abajo{transform:scaleY(-1)} .inv[data-theme="at-liston"] .inv-brand{color:rgba(58,46,46,.8)} /* ---------- Apertura en video (paquete de algodón atado con listón, sobre lino) ---------- El video sale en 2:3: se muestra entero para que el paquete no se corte en teléfonos angostos; arriba y abajo queda el mismo lino (foto) y las orillas del video se funden en él. Póster claro: nombres en tinta oscura. */ .inv[data-template="liston"] .op-video{background:radial-gradient(80% 50% at 22% 18%,rgba(255,248,240,.35),transparent 70%), radial-gradient(120% 70% at 50% 118%,rgba(90,70,55,.22),transparent 70%),url(/img/texturas/hilo-lino.jpg) center/440px,#E6DDD1; background-blend-mode:normal,normal,multiply,normal} .inv[data-template="liston"] .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="liston"] .opv-ui{padding-top:max(28px,4.6svh);gap:0} .inv[data-template="liston"] .opv-ui .op-to{font:600 13px/1.4 'Cormorant Garamond',serif;letter-spacing:.3em;text-transform:uppercase;color:#5A4142;text-shadow:0 0 12px rgba(250,244,238,1),0 0 4px rgba(250,244,238,.9)} .inv[data-template="liston"] .opv-ui .op-to strong{font-weight:700;color:#4A3434} .inv[data-template="liston"] .opv-n{margin-top:-4px;font:400 clamp(86px,24vw,124px)/1 'Allison',cursive;color:#9A5560; text-shadow:0 0 22px rgba(250,244,238,.95),0 0 6px rgba(250,244,238,.85)} .inv[data-template="liston"] .opv-tap{white-space:nowrap;background:rgba(250,245,240,.92);color:#3A2E2E;font:600 13px/1 'Cormorant Garamond',serif;letter-spacing:.24em; box-shadow:inset 0 0 0 1px rgba(58,46,46,.2),4px 12px 26px -8px rgba(96,52,56,.5)} .inv[data-template="liston"] .opv-skip{min-height:40px;border-radius:999px;background:rgba(58,46,46,.58);color:#F8F2EC;font:600 12px/1 'Cormorant Garamond',serif;letter-spacing:.24em; backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)} /* Remate: relicario sobre la tarjeta de algodón que sube. Marco de papel, no de oro; el moño real al pie del óvalo; tinta oscura. */ .inv[data-template="liston"] .opv-fin-relicario::before{content:"";position:absolute;inset:0;background:radial-gradient(64% 46% at 50% 50%,rgba(252,248,242,.7),rgba(252,248,242,0) 76%)} .inv[data-template="liston"] .opv-fin-relicario .opv-fin-in{--w:min(50vw,224px);position:relative} .inv[data-template="liston"] .opv-rel{width:var(--w);box-shadow:0 0 0 1px rgba(58,46,46,.16),0 0 0 7px #FBF6F0,0 0 0 8px rgba(58,46,46,.16),3px 18px 34px rgba(96,52,56,.32);margin-bottom:calc(var(--w) * .38)} .inv[data-template="liston"] .opv-fin-relicario .opv-fin-in::after{content:"";position:absolute;left:50%;top:calc(var(--w) * 1.25 - var(--w) * .2);width:calc(var(--w) * .74);aspect-ratio:1000/641; transform:translateX(-50%);background:url(/img/texturas/liston-mono.png) center/contain no-repeat;pointer-events:none} .inv[data-template="liston"] .opv-fin-relicario .opv-fin-eb{color:#6E4F50;font:600 13px/1.4 'Cormorant Garamond',serif;letter-spacing:.3em;opacity:1;text-shadow:0 0 10px rgba(252,248,242,.9)} .inv[data-template="liston"] .opv-fin-relicario .opv-fin-n{font:400 clamp(66px,18vw,96px)/1 'Allison',cursive;color:#9A5560;text-shadow:0 0 18px rgba(252,248,242,.95)}