/* ==========================================================================
   58 · Escaparate café
   Para una tienda de moda femenina con catálogo largo —ropa, calzado y bolsos
   en la misma página— y logo de firma dorada sobre madera. Veinte productos en
   una rejilla plana se leen como un listado; aquí se reparten en escaparates:
   cada familia tiene su cornisa de madera con el rótulo pintado en dorado, su
   marco y su primera pieza en grande. Así se sabe dónde se está sin contar.

   Tenor Sans, de proporción clásica y letra ancha, para los rótulos pintados
   sobre el vidrio; Sen para leer. El dorado de la marca (#C5A15B) no aguanta
   letra sobre fondo claro: ahí va oro hondo, y el dorado queda para los
   rótulos sobre madera, los filetes y la banda del cierre.

   Contrastes medidos (AA): tinta sobre hueso 14,9 · café sobre hueso 9,2 ·
   oro hondo sobre hueso 5,6 · oro hondo sobre crema 4,9 · café medio sobre
   hueso 5,6 · hueso sobre café 9,2 · dorado sobre café hondo 6,7 · café hondo
   sobre dorado 6,7 · hueso sobre café hondo 14,5.
   ========================================================================== */

:root{
  --hueso:    #F7F1E7;
  --crema:    #F0E7DB;
  --blanco:   #FFFDFA;
  --dorado:   #C5A15B;   /* color secundario de la marca: rótulos sobre madera */
  --oro-claro:#D9BE86;
  --oro-h:    #7C5A1E;   /* el que aguanta letra sobre fondo claro */
  --cafe:     #5A3825;   /* color primario de la marca */
  --cafe-h:   #2E1C12;
  --cafe-m:   #7A5A3C;
  --tinta:    #2B1A10;
  --linea:    rgba(43,26,16,.16);
  --linea-clara:rgba(255,255,255,.2);
  --lav:      var(--cafe);
  --ease:     cubic-bezier(.2,.8,.25,1);
  --r:        2px;
  --madera:   linear-gradient(180deg, #46291A 0%, #2E1C12 46%, #3A2317 100%);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; overflow-x:clip}
body{margin:0; background:var(--hueso); color:var(--tinta); line-height:1.7; -webkit-font-smoothing:antialiased}
img{max-width:100%; display:block}
a{color:inherit}
h1,h2,h3{margin:0; font-family:var(--f-titulo); font-weight:400; line-height:1.1; letter-spacing:.01em}
h1 em, h2 em{font-style:normal}
p{margin:0 0 1rem}
.blob{display:none !important}

.wrap{width:min(1200px,92vw); margin:0 auto}
.sec{padding:96px 0; position:relative}
.centrado{text-align:center}
.sec-head{max-width:700px; margin:0 auto 48px; text-align:center}
.sec-head h2{font-size:clamp(2.1rem,4.6vw,3.2rem); margin-bottom:12px; color:var(--cafe)}
.sec-head p{margin:0; color:var(--cafe-m)}
.eyebrow{font-weight:700; font-size:.8rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--oro-h); margin-bottom:12px}
.chip{display:inline-flex; align-items:center; gap:9px; padding:8px 15px;
  background:var(--blanco); box-shadow:inset 0 0 0 1px var(--linea); font-weight:600; color:var(--cafe-m)}
.chip svg{width:17px; height:17px; color:var(--oro-h)}

/* La rúbrica: el remate del trazo de la L del logo, bajo los títulos. */
.ll-rubrica{display:block; width:clamp(104px,14vw,148px); margin:14px auto 0; overflow:visible}
.ll-rubrica path{fill:none; stroke:var(--dorado); stroke-width:2.4; stroke-linecap:round}
.ll-rubrica.oscura path{stroke:var(--oro-h)}

/* ---------- Encabezado ----------
   Siempre por #hdr: dentro de las vitrinas hay encabezados de tarjeta y la
   regla del selector suelto les pondría fondo de barra y posición pegajosa. */
#hdr{position:sticky; top:0; z-index:60; background:rgba(247,241,231,.94); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--linea); transition:box-shadow .3s var(--ease)}
#hdr.stuck{box-shadow:0 16px 30px -28px rgba(46,28,18,.8)}
.nav{display:flex; align-items:center; justify-content:space-between; gap:18px}
.brand{display:flex; align-items:center; gap:13px; text-decoration:none; min-width:0}
.brand > span{display:flex; flex-direction:column; min-width:0}
.brand b{font-family:var(--f-titulo); font-weight:400; font-size:1.26rem; line-height:1.1; color:var(--cafe);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0}
.brand i{font-style:normal; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--cafe-m); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0}
.nav-links{display:flex; gap:26px}
.nav-links a{position:relative; text-decoration:none; padding:8px 0; font-weight:600; color:var(--tinta)}
.nav-links a::after{content:""; position:absolute; left:0; right:0; bottom:2px; height:2px;
  background:var(--dorado); transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease)}
.nav-links a:hover::after{transform:scaleX(1)}
@media (max-width:1000px){ .nav-links{display:none} }

/* ---------- Botones ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; text-decoration:none;
  font-weight:700; border-radius:2px; border:2px solid transparent; cursor:pointer;
  padding:.95rem 1.9rem; transition:all .3s var(--ease)}
.btn svg{width:1.15em; height:1.15em; flex:none}
.btn-sm{padding:.6rem 1.15rem; font-size:.88rem; min-height:44px}
.btn-primary{background:var(--cafe); color:var(--hueso); box-shadow:0 12px 24px -14px rgba(46,28,18,.9)}
.btn-primary:hover{background:var(--cafe-h)}
.btn-ghost, .btn-linea{background:transparent; color:var(--cafe); border-color:var(--cafe)}
.btn-ghost:hover, .btn-linea:hover{background:var(--cafe); color:var(--hueso)}
.btn-wa{background:#25D366; color:#06280F}
.btn-block{width:100%}

.progress{position:fixed; top:0; left:0; height:4px; width:0; z-index:100;
  background:linear-gradient(90deg,var(--cafe),var(--dorado),var(--oro-claro))}

/* ---------- 1 · Portada: la vidriera ---------- */
.ll-hero{position:relative; overflow:hidden; background:
  radial-gradient(44% 56% at 82% 30%, #FBF5EB 0, rgba(251,245,235,0) 72%),
  radial-gradient(40% 46% at 6% 92%, #EFE3D1 0, rgba(239,227,209,0) 72%), var(--hueso)}
.ll-hero-grid{position:relative; z-index:2; display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(30px,5vw,70px); align-items:center; padding-block:clamp(44px,6vw,84px) clamp(92px,9vw,126px)}
.ll-hero h1{font-size:clamp(2.8rem,6.4vw,5.2rem); line-height:1.02; color:var(--cafe); margin-bottom:20px}
.ll-hero h1 span{display:block}
.ll-hero h1 em{display:block; color:var(--oro-h)}
.ll-lead{font-size:1.05rem; color:var(--cafe-m); max-width:46ch; margin-bottom:26px}
.ll-cta{display:flex; flex-wrap:wrap; gap:14px; margin-bottom:26px}
.ll-firmas{display:flex; flex-wrap:wrap; gap:10px}

/* La foto de portada va dentro del escaparate: cornisa de madera y marco. */
.ll-escena{margin:0; position:relative; width:min(460px,100%); justify-self:center}
.ll-escena-cornisa{position:relative; height:34px; background:var(--madera); overflow:hidden;
  box-shadow:0 8px 18px -12px rgba(46,28,18,.9)}
.ll-escena-cornisa::before{content:""; position:absolute; inset:5px 10px auto; height:2px; background:var(--dorado); opacity:.65}
.ll-brillo{position:absolute; top:0; bottom:0; width:70px; pointer-events:none;
  background:linear-gradient(90deg, rgba(217,190,134,0) 0, rgba(217,190,134,.55) 50%, rgba(217,190,134,0) 100%)}
.anim .ll-brillo{animation:llBrillo 7s ease-in-out infinite}
@keyframes llBrillo{0%{transform:translateX(-80px)} 55%,100%{transform:translateX(470px)}}
.ll-escena-marco{border:3px solid var(--cafe-h); border-top:0; background:var(--blanco); padding:12px;
  box-shadow:0 36px 56px -44px rgba(46,28,18,.95)}
.ll-escena-marco img{width:100%; aspect-ratio:3/4; height:auto; object-fit:cover}
.ll-escena-precio{position:absolute; left:-18px; bottom:26px; z-index:4; padding:12px 20px;
  background:var(--cafe-h); color:var(--hueso); box-shadow:inset 0 0 0 1px var(--dorado), 0 14px 24px -14px rgba(46,28,18,.9);
  text-align:center; line-height:1.15}
.ll-escena-precio small{display:block; font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--oro-claro)}
.ll-escena-precio b{font-family:var(--f-titulo); font-weight:400; font-size:1.3rem}

/* ---------- 2 · La franja de señales, sobre madera ---------- */
.ll-sellos{background:var(--cafe); color:var(--hueso); position:relative; overflow:hidden}
.ll-sellos::before{content:""; position:absolute; inset:0; opacity:.3;
  background:repeating-linear-gradient(180deg, rgba(255,255,255,.07) 0 1px, transparent 1px 7px)}
.ll-sellos .wrap{position:relative; z-index:2}
.ll-sellos ul{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; justify-content:center;
  gap:12px clamp(20px,4vw,52px)}
.ll-sellos li{display:flex; align-items:center; gap:11px; font-weight:600; color:var(--hueso)}
.ll-sellos li svg{width:21px; height:21px; color:var(--oro-claro); flex:none}

/* ---------- 3 · Los escaparates ---------- */
.ll-catalogo{background:var(--hueso)}
.ll-catalogo.alterno{background:var(--crema)}
.ll-escaparate + .ll-escaparate{margin-top:clamp(64px,8vw,112px)}

/* La cornisa: la madera con el rótulo pintado en dorado. Se monta sobre el marco. */
.ll-cornisa{position:relative; z-index:3; background:var(--madera); color:var(--hueso);
  padding:clamp(24px,3.2vw,38px) clamp(22px,3vw,40px) clamp(28px,3.4vw,42px); text-align:center;
  box-shadow:0 20px 38px -28px rgba(46,28,18,.95)}
.ll-cornisa::before{content:""; position:absolute; inset:7px 12px auto; height:2px; background:var(--dorado); opacity:.6}
.ll-cornisa::after{content:""; position:absolute; inset:auto 12px 7px; height:2px; background:var(--dorado); opacity:.6}
.ll-cornisa h2{font-size:clamp(2.4rem,7vw,5rem); color:var(--dorado); letter-spacing:.1em;
  text-transform:uppercase; line-height:1}
.ll-cornisa-cuenta{margin:0 0 10px; font-size:.74rem; letter-spacing:.26em; text-transform:uppercase; color:var(--oro-claro)}
.ll-cornisa-tx{margin:12px auto 0; max-width:54ch; color:#E6D8C6; font-size:.95rem}

/* El marco de la vitrina y su vidrio. */
.ll-vitrina{border:3px solid var(--cafe-h); border-top:0; background:var(--blanco);
  padding:clamp(18px,2.6vw,34px); box-shadow:0 34px 56px -46px rgba(46,28,18,.95)}
.ll-rejilla{display:grid; grid-auto-flow:row dense; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(16px,2.2vw,28px)}

.ll-prenda{position:relative; display:flex; flex-direction:column}
.ll-prenda-foto{position:relative; margin:0 0 14px; display:block; overflow:hidden; background:var(--crema)}
.ll-prenda-foto img{width:100%; aspect-ratio:3/4; height:auto; object-fit:cover;
  transition:transform .6s var(--ease)}
.ll-prenda:hover .ll-prenda-foto img{transform:scale(1.045)}
.ll-prenda h3{font-size:1.16rem; color:var(--cafe); margin-bottom:5px; line-height:1.2}
.ll-prenda h3 a{text-decoration:none; display:inline-block; padding-block:4px}
.ll-prenda h3 a:hover{color:var(--oro-h)}
.ll-prenda-op{margin:0 0 10px; font-size:.78rem; letter-spacing:.06em; color:var(--cafe-m)}
.ll-prenda-pie{margin-top:auto; display:flex; flex-wrap:wrap; align-items:center; gap:10px}
.ll-precio{display:inline-block; padding:8px 14px; background:var(--cafe-h); color:var(--hueso);
  font-family:var(--f-titulo); font-weight:400; font-size:1.02rem; line-height:1.2;
  box-shadow:inset 0 0 0 1px var(--dorado)}
.ll-prenda .insignia-linea{margin-bottom:10px}

/* La pieza de vitrina: la primera de cada familia, en grande. */
.ll-prenda.destacada{grid-column:span 2; grid-row:span 2}
.ll-prenda.destacada .ll-prenda-foto img{aspect-ratio:4/5; height:auto}
.ll-prenda.destacada h3{font-size:clamp(1.5rem,2.6vw,2.1rem); margin-bottom:8px}
.ll-prenda.destacada .ll-prenda-tx{color:var(--cafe-m); font-size:.96rem; margin-bottom:14px}
.ll-prenda.destacada .ll-precio{font-size:1.3rem; padding:11px 19px}
.ll-escaparate-nota{margin:18px 0 0; font-size:.86rem; color:var(--cafe-m)}
.cat-note{margin:clamp(40px,5vw,64px) 0 0; text-align:center; color:var(--cafe-m); font-size:.92rem}
.cat-note a{color:var(--oro-h); font-weight:700}

/* ---------- 4 · La historia, en la trastienda ---------- */
.ll-historia{background:var(--cafe-h); color:var(--hueso); position:relative; overflow:hidden}
.ll-historia::before{content:""; position:absolute; inset:0; opacity:.26;
  background:repeating-linear-gradient(180deg, rgba(255,255,255,.08) 0 1px, transparent 1px 8px)}
.ll-historia .wrap{position:relative; z-index:2}
.ll-flota{position:absolute; right:-30px; top:12%; width:clamp(200px,26vw,360px); opacity:.2; pointer-events:none; z-index:1}
.ll-hist-grid{display:grid; grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr); gap:clamp(28px,5vw,66px); align-items:start}
.ll-hist-logo{background:var(--hueso); padding:clamp(24px,3.2vw,38px); display:grid; justify-items:center; gap:14px;
  box-shadow:inset 0 0 0 2px var(--dorado), 0 28px 48px -36px rgba(0,0,0,.9)}
.ll-hist-logo img{max-width:240px; height:auto}
.ll-hist-logo p{margin:0; text-align:center; font-size:.9rem; color:var(--cafe-m)}
.ll-historia h2{color:var(--hueso); font-size:clamp(2.1rem,4.6vw,3.2rem); margin-bottom:16px}
.ll-historia .eyebrow{color:var(--dorado)}
.ll-historia .hist p{color:#E6D8C6}
.ll-historia .hist summary{color:var(--dorado)}
.ll-mv{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin-top:28px}
.ll-mv > div{padding:22px 24px; background:rgba(255,255,255,.06); box-shadow:inset 0 0 0 1px var(--linea-clara)}
.ll-mv h3{font-size:1.04rem; color:var(--dorado); margin-bottom:8px; letter-spacing:.1em; text-transform:uppercase}
.ll-mv p{margin:0; color:#E6D8C6; font-size:.94rem}

/* ---------- 5 · Cómo comprar ---------- */
.ll-pasos{background:var(--crema)}
.ll-pasos-lista{list-style:none; margin:0; padding:0; display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(20px,3vw,38px)}
.ll-paso{background:var(--blanco); padding:clamp(24px,3vw,36px); position:relative;
  box-shadow:inset 0 0 0 1px var(--linea), 0 22px 36px -32px rgba(46,28,18,.9);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease)}
.ll-paso:hover{transform:translateY(-5px); box-shadow:inset 0 0 0 1px var(--dorado), 0 28px 44px -28px rgba(46,28,18,.9)}
.ll-paso::before{content:""; position:absolute; left:0; top:0; width:100%; height:4px; background:var(--dorado)}
.ll-paso b{display:block; font-family:var(--f-titulo); font-weight:400; font-size:2.4rem; color:var(--oro-h); line-height:1; margin-bottom:12px}
.ll-paso h3{font-size:1.26rem; color:var(--cafe); margin-bottom:8px}
.ll-paso p{margin:0; color:var(--cafe-m)}

/* ---------- 6 · La banda dorada del cierre ---------- */
.ll-cierre{background:var(--dorado); color:var(--cafe-h); text-align:center; position:relative; overflow:hidden}
.ll-cierre::before{content:""; position:absolute; inset:0; opacity:.3;
  background:radial-gradient(circle at 1px 1px, rgba(255,255,255,.34) 1px, transparent 1.3px) 0 0/13px 13px}
.ll-cierre .wrap{position:relative; z-index:2}
.ll-cierre h2{color:var(--cafe-h); font-size:clamp(2.2rem,5vw,3.5rem); margin-bottom:14px}
.ll-cierre p{color:#3F2715; max-width:56ch; margin:0 auto 28px}
.ll-cierre .eyebrow{color:var(--cafe-h)}
.ll-cierre .ll-rubrica path{stroke:var(--cafe-h)}

/* ---------- 7 · Contacto ---------- */
.ll-contacto{background:var(--cafe-h); color:var(--hueso)}
.ll-contacto h2{color:var(--hueso)}
.ll-contacto .eyebrow{color:var(--dorado)}
.ll-con-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(28px,5vw,62px); align-items:center}
.ll-con-txt{color:#E6D8C6}
.ll-redes{list-style:none; margin:0; padding:0; display:grid; gap:12px}
.ll-redes a{display:flex; align-items:center; gap:14px; text-decoration:none; padding:14px 18px;
  background:rgba(255,255,255,.06); box-shadow:inset 0 0 0 1px var(--linea-clara);
  transition:background .3s var(--ease), transform .3s var(--ease)}
.ll-redes a:hover{background:rgba(255,255,255,.12); transform:translateX(4px)}
.ll-red-ic{display:grid; place-items:center; width:42px; height:42px; flex:none;
  background:var(--dorado); color:var(--cafe-h)}
.ll-red-ic svg{width:21px; height:21px}
.ll-red-tx{display:flex; flex-direction:column; min-width:0}
.ll-red-tx small{font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:#C9B89F}
.ll-red-tx b{font-weight:700; color:var(--hueso); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

/* ---------- Pie ---------- */
footer{background:#241209; color:var(--hueso); padding:54px 0 32px}
.foot-top{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:22px;
  padding-bottom:26px; border-bottom:1px solid var(--linea-clara)}
footer .brand b{color:var(--hueso)}
footer .brand i{color:#C9B89F}
.foot-social{display:flex; gap:12px}
.foot-social a{display:grid; place-items:center; width:44px; height:44px;
  background:rgba(255,255,255,.07); box-shadow:inset 0 0 0 1px var(--linea-clara); color:var(--dorado);
  transition:background .3s var(--ease)}
.foot-social a:hover{background:var(--dorado); color:var(--cafe-h)}
.foot-social svg{width:20px; height:20px}
.foot-bot{display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; padding-top:22px;
  font-size:.84rem; color:#C9B89F}

/* ---------- Flotantes ---------- */
.wa-float{position:fixed; right:18px; bottom:18px; z-index:80; display:inline-flex; align-items:center; gap:10px;
  padding:1rem 1.5rem; border-radius:999px; background:#25D366; color:#06280F; font-weight:700;
  text-decoration:none; box-shadow:0 16px 32px -16px rgba(6,40,15,.8)}
.wa-float svg{width:22px; height:22px}
.arriba{position:fixed; left:18px; bottom:18px; z-index:79; display:grid; place-items:center; width:46px; height:46px;
  background:var(--cafe-h); color:var(--hueso); text-decoration:none;
  box-shadow:0 14px 26px -16px rgba(36,18,9,.95)}

/* ==========================================================================
   Página de prenda
   ========================================================================== */
.lp-cab{background:var(--cafe-h); color:var(--hueso); padding:clamp(26px,3.6vw,44px) 0 clamp(32px,4.4vw,54px);
  position:relative; overflow:hidden}
.lp-cab::before{content:""; position:absolute; inset:0; opacity:.26;
  background:repeating-linear-gradient(180deg, rgba(255,255,255,.08) 0 1px, transparent 1px 8px)}
.lp-cab .wrap{position:relative; z-index:2}
.p-migas{margin:0 0 14px; font-size:.84rem; color:#C9B89F; display:flex; flex-wrap:wrap; align-items:center; gap:.5em}
.p-migas a{color:var(--dorado); text-decoration:none; font-weight:600}
.p-migas a:hover{text-decoration:underline}
.p-migas span{color:var(--cafe-m)}
.lp-cab h1{font-size:clamp(2rem,4.6vw,3.3rem); color:var(--hueso); max-width:22ch}

.lp-cuerpo{background:var(--hueso); padding:clamp(48px,6.4vw,88px) 0}
.lp-grid{width:min(1200px,92vw); margin:0 auto; display:grid;
  grid-template-columns:minmax(0,.96fr) minmax(0,1.04fr); gap:clamp(28px,5vw,64px); align-items:start}
.lp-foto{position:relative; border:3px solid var(--cafe-h); background:var(--blanco); padding:12px;
  box-shadow:0 36px 58px -46px rgba(46,28,18,.95)}
.lp-foto img{width:100%; aspect-ratio:3/4; height:auto; object-fit:cover}
.lp-mini{display:flex; gap:12px; margin-top:14px; flex-wrap:wrap}
.lp-mini button{padding:0; border:2px solid transparent; background:var(--blanco); cursor:pointer; width:76px}
.lp-mini button[aria-current="true"]{border-color:var(--dorado)}
.lp-mini img{width:100%; aspect-ratio:1/1; height:auto; object-fit:cover}

.lp-nombre{font-size:clamp(1.8rem,3.8vw,2.7rem); color:var(--cafe); margin-bottom:14px}
.p-desc{color:var(--cafe-m); margin-bottom:20px}
.p-desc h3{font-size:1.06rem; color:var(--oro-h); margin:18px 0 8px}
.p-desc ul{margin:0 0 14px; padding-left:1.1rem}
.p-precio{display:flex; flex-wrap:wrap; align-items:baseline; gap:10px; padding:18px 0 20px;
  border-top:2px solid var(--cafe); border-bottom:2px solid var(--cafe); margin-bottom:22px}
.p-precio b{font-family:var(--f-titulo); font-weight:400; font-size:clamp(2rem,4.2vw,2.9rem); color:var(--cafe); line-height:1}
.p-precio small{font-size:.82rem; color:var(--cafe-m)}
.p-agotado{background:var(--cafe-h); color:var(--hueso); padding:5px 12px; font-size:.78rem; font-weight:700}
.p-opciones{margin-bottom:18px}
.p-opciones h3{font-size:.8rem; letter-spacing:.2em; text-transform:uppercase; color:var(--oro-h); margin-bottom:10px}
.p-chips{display:flex; flex-wrap:wrap; gap:10px}
.p-chips button{padding:10px 18px; border:2px solid var(--linea); background:var(--blanco); cursor:pointer;
  font-weight:600; font-size:.92rem; color:var(--tinta); min-height:44px; transition:all .25s var(--ease)}
.p-chips button:hover{border-color:var(--dorado)}
.p-chips button[aria-pressed="true"]{background:var(--cafe); border-color:var(--cafe-h); color:var(--hueso)}
.p-puntos{list-style:none; margin:0 0 22px; padding:0; display:grid; gap:10px}
.p-puntos li{display:flex; align-items:flex-start; gap:11px; color:var(--cafe-m)}
.p-puntos li svg{width:19px; height:19px; color:var(--oro-h); flex:none; margin-top:.3em}
.p-cta{margin-bottom:16px}
.p-nota{display:flex; align-items:flex-start; gap:10px; font-size:.9rem; color:var(--cafe-m)}
.p-nota svg{width:19px; height:19px; color:var(--oro-h); flex:none; margin-top:.25em}

.lp-det{background:var(--crema); padding:clamp(46px,6vw,82px) 0}
.lp-ficha{background:var(--blanco); padding:clamp(26px,3.4vw,44px); max-width:880px; margin:0 auto;
  box-shadow:inset 0 0 0 1px var(--linea), 0 26px 44px -36px rgba(46,28,18,.9)}
.lp-ficha-tit{font-family:var(--f-titulo); font-size:1.5rem; color:var(--cafe); margin-bottom:14px}
.lp-ficha h3{font-size:1.06rem; color:var(--oro-h); margin:16px 0 8px}
.lp-ficha ul{margin:0 0 12px; padding-left:1.1rem; color:var(--cafe-m)}

.lp-otros{background:var(--hueso); padding:clamp(48px,6.4vw,88px) 0}
.lp-otros-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(18px,2.6vw,30px)}
.lp-otro{text-decoration:none; display:grid; gap:10px; background:var(--blanco); padding:12px;
  box-shadow:inset 0 0 0 1px var(--linea); transition:transform .35s var(--ease), box-shadow .35s var(--ease)}
.lp-otro:hover{transform:translateY(-5px); box-shadow:inset 0 0 0 1px var(--dorado), 0 26px 40px -30px rgba(46,28,18,.9)}
.lp-otro img{width:100%; aspect-ratio:3/4; height:auto; object-fit:cover}
.lp-otro b{font-family:var(--f-titulo); font-weight:400; font-size:1.2rem; color:var(--cafe)}
.lp-otro small{color:var(--cafe-m); font-weight:600}

/* ==========================================================================
   Acabado premium
   El filete de oro de la cornisa repetido arriba y abajo; la etiqueta de precio
   con su hilo de oro por dentro; el reflejo del vidrio que cruza la foto al
   pasar; y la sombra de contacto bajo cada vitrina, que es lo que le da peso de
   mueble en vez de caja flotante.
   ========================================================================== */
.ll-vitrina{position:relative}
.ll-vitrina::after{content:""; position:absolute; left:6%; right:6%; bottom:-14px; height:14px;
  background:radial-gradient(50% 100% at 50% 0%, rgba(46,28,18,.3) 0, rgba(46,28,18,0) 72%)}
.ll-prenda-foto::after{content:""; position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(43,26,16,.1)}
.ll-prenda:hover .ll-precio{box-shadow:inset 0 0 0 1px var(--oro-claro)}
.ll-paso b::after{content:""; display:block; width:28px; height:2px; background:var(--dorado); margin-top:8px}
.lp-foto::after{content:""; position:absolute; inset:12px; pointer-events:none; box-shadow:inset 0 0 0 1px var(--dorado); opacity:.5}

/* ---------- Pantallas estrechas ---------- */
@media (max-width:1100px){
  .ll-rejilla{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:980px){
  .ll-hero-grid{grid-template-columns:1fr; gap:34px; padding-block:32px 70px}
  .ll-hist-grid, .ll-con-grid, .lp-grid{grid-template-columns:1fr}
  .ll-pasos-lista{grid-template-columns:1fr}
  .ll-mv{grid-template-columns:1fr}
  .ll-escena-precio{left:auto; right:-10px; bottom:-18px}
  .lp-otros-grid{grid-template-columns:1fr}
}
@media (max-width:760px){
  .ll-rejilla{grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px}
  .ll-prenda.destacada{grid-column:span 2; grid-row:auto}
  .ll-prenda.destacada .ll-prenda-foto img{aspect-ratio:3/4; height:auto}
  .ll-cornisa h2{letter-spacing:.06em}
  .ll-prenda h3{font-size:1.02rem}
}
@media (max-width:420px){
  .ll-vitrina{padding:14px}
}

/* ---------- Si piden quietud, todo quieto ---------- */
@media (prefers-reduced-motion:reduce){
  .anim .ll-brillo{animation:none}
  .ll-prenda-foto img, .ll-paso, .lp-otro, .ll-redes a, .btn{transition:none}
}