/* ==========================================================================
   52 · Luna de oro
   Para tiendas de accesorios con logo de luna y oro. Todo sale del medallón del
   logo: la crema del fondo, el dorado (#D19D01) y el dorado claro (#FEE4A8) de la
   marca, la luna creciente rellena de un calado de flores y los destellos de
   cuatro puntas. El azul noche es el cielo de la constelación y el celeste sale
   del lazo de la mochila. Yeseva One, de alto contraste y curvas femeninas, para
   títulos; Rethink Sans para leer. El dorado de la marca no aguanta texto encima
   de la crema: para letras va un oro hondo, y el dorado queda para rellenos.
   ========================================================================== */

:root{
  --crema:       #FBF3E4;
  --crema-2:     #F5E6C8;
  --perla:       #FFFBF3;
  --dorado:      #D19D01;
  --dorado-claro:#FEE4A8;
  --oro-hondo:   #84580E;
  --cafe:        #3B2414;
  --cafe-2:      #6A4A34;
  --cafe-suave:  #7B5E48;
  --cielo:       #1E2A45;
  --cielo-2:     #2C3B5E;
  --celeste:     #A9C4E2;
  --linea:       rgba(59,36,20,.14);
  --linea-oro:   rgba(209,157,1,.42);
  --linea-clara: rgba(254,228,168,.24);
  --ease:cubic-bezier(.2,.8,.25,1);
  --r:22px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; overflow-x:clip}
body{margin:0; background:var(--crema); color:var(--cafe); line-height:1.72; -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.12}
h1 em, h2 em{font-style:normal; color:var(--oro-hondo)}
p{margin:0 0 1rem}
.blob{display:none !important}

.wrap{width:min(1180px,92vw); margin:0 auto}
.sec{padding:104px 0; position:relative}
.centrado{text-align:center}
.sec-head{max-width:680px; margin:0 auto 56px; text-align:center}
.sec-head h2{font-size:clamp(2.2rem,4.4vw,3.4rem); margin-bottom:14px}
.sec-head p{margin:0; color:var(--cafe-2)}
.eyebrow{text-transform:uppercase; color:var(--oro-hondo); margin-bottom:12px}
.eyebrow::before{content:"✦"; margin-right:.6em; color:var(--dorado); letter-spacing:0}
.chip{display:inline-flex; align-items:center; gap:8px; text-transform:uppercase; color:var(--cafe-2)}
.chip svg{color:var(--dorado)}

/* ---------- Encabezado ---------- */
header{position:sticky; top:0; z-index:60; background:rgba(251,243,228,.94); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--linea-oro); transition:box-shadow .3s var(--ease)}
header.stuck{box-shadow:0 14px 32px -24px rgba(59,36,20,.5)}
.nav{display:flex; align-items:center; justify-content:space-between; gap:18px}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; min-width:0}
.brand img{width:64px; height:64px; border-radius:50%; object-fit:cover; flex:none; box-shadow:0 0 0 1px var(--linea-oro);
  transition:width .3s var(--ease), height .3s var(--ease)}
header.stuck .brand img{width:52px; height:52px}
.brand > span{display:flex; flex-direction:column; min-width:0}
.brand b{font-family:var(--f-titulo); font-weight:400; font-size:1.5rem; line-height:1.1; color:var(--cafe);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.brand i{font-style:normal; text-transform:uppercase; color:var(--oro-hondo); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.nav-links{display:flex; gap:28px}
.nav-links a{position:relative; text-decoration:none; padding:7px 0; color:var(--cafe)}
.nav-links a::after{content:"✦"; position:absolute; left:50%; bottom:-12px; translate:-50% 0; font-size:.7rem; color:var(--dorado);
  opacity:0; scale:.4; transition:opacity .3s var(--ease), scale .3s var(--ease)}
.nav-links a:hover::after{opacity:1; scale:1}

/* ---------- Botones ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; text-decoration:none;
  border-radius:999px; border:1.5px solid transparent; cursor:pointer; transition:all .3s var(--ease)}
.btn svg{width:1.15em; height:1.15em; flex:none}
.btn-primary{background:var(--dorado); color:var(--cafe)}
.btn-primary:hover{background:var(--cafe); color:var(--dorado-claro)}
.btn-linea, .btn-ghost{background:transparent; color:var(--cafe); border-color:var(--cafe)}
.btn-linea:hover, .btn-ghost:hover{background:var(--cafe); color:var(--dorado-claro)}
.btn-ghost:not(.btn-sm), .btn-linea:not(.btn-sm){padding:1rem 2.1rem; font-weight:700}
.btn-wa{background:#25D366; color:#06280F}

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

/* Foto redonda reutilizable: la imagen va fija dentro para que una foto alta no
   estire el círculo. */
.jl-foto-circ{position:relative; display:block; width:100%; aspect-ratio:1; border-radius:50%; overflow:hidden; background:var(--crema-2)}
.jl-foto-circ img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}

/* ---------- 1 · Portada: el medallón ---------- */
.jl-hero{position:relative; overflow:hidden;
  background:radial-gradient(60% 60% at 80% 40%, #FFF7E3 0, rgba(255,247,227,0) 70%), var(--crema)}
.jl-destello{position:absolute; z-index:1; width:18px; height:18px; background:var(--dorado); pointer-events:none;
  clip-path:polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%)}
.jl-destello.d1{left:6%; top:18%}
.jl-destello.d2{left:46%; top:12%; width:12px; height:12px}
.jl-destello.d3{right:5%; bottom:18%; width:24px; height:24px}
.anim .jl-destello{animation:titilaJl 3.8s ease-in-out infinite}
.anim .jl-destello.d2{animation-delay:-1.3s}
.anim .jl-destello.d3{animation-delay:-2.4s}
@keyframes titilaJl{0%,100%{opacity:.3; scale:.7} 50%{opacity:1; scale:1.1}}
.jl-hero-grid{position:relative; z-index:2; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(30px,5vw,70px);
  align-items:center; padding-block:clamp(50px,6vw,90px) clamp(96px,9vw,130px)}
.jl-hero h1{font-size:clamp(2.8rem,5.6vw,4.7rem); line-height:1.04}
.jl-hero h1 span, .jl-hero h1 em{display:block}
.jl-lead{font-size:1.1rem; color:var(--cafe-2); max-width:46ch; margin:22px 0 0}
.jl-cta{display:flex; flex-wrap:wrap; gap:14px; margin:30px 0 24px}
.jl-firmas{display:flex; flex-wrap:wrap; gap:10px 22px}
.jl-medallon{position:relative; width:min(100%,460px); justify-self:center}
.jl-medallon-in{position:relative; padding:18px; border-radius:50%; background:var(--perla);
  box-shadow:0 0 0 1px var(--linea-oro), 0 40px 80px -46px rgba(59,36,20,.55); --lav:var(--dorado)}
.jl-medallon-in .jl-foto-circ img{object-position:55% 45%}
.jl-luna-hero{position:absolute; z-index:3; right:-12%; top:-4%; width:58%; height:auto; pointer-events:none;
  filter:drop-shadow(0 16px 20px rgba(59,36,20,.25))}
.anim .jl-luna-hero{animation:mecerLuna 7s ease-in-out infinite}
@keyframes mecerLuna{0%,100%{rotate:-4deg} 50%{rotate:4deg}}

/* ---------- 2 · Las fases de la luna ---------- */
.jl-fases{background:var(--dorado-claro)}
.jl-fases.franja{padding-top:30px !important}
.jl-fases .wrap{display:flex; flex-wrap:wrap; justify-content:center; gap:14px 40px}
.jl-fases a{display:inline-flex; align-items:center; gap:12px; text-decoration:none; font-weight:700; color:var(--cafe)}
.jl-fases a:hover{color:var(--oro-hondo)}
/* Cada fase: un círculo dorado al que otro círculo del color de fondo le tapa una parte. */
.fase{position:relative; flex:none; width:30px; height:30px; border-radius:50%; background:var(--dorado); overflow:hidden;
  box-shadow:inset 0 0 0 1.5px var(--oro-hondo)}
.fase::after{content:""; position:absolute; top:0; width:100%; height:100%; border-radius:50%; background:var(--dorado-claro)}
.fase.f1::after{left:-22%}
.fase.f2::after{left:-50%}
.fase.f3::after{left:-78%}
.fase.f4::after{display:none}

/* ---------- 3 · La constelación ---------- */
.jl-cielo{color:var(--dorado-claro); overflow:hidden;
  background:radial-gradient(70% 50% at 50% 0%, var(--cielo-2) 0, rgba(44,59,94,0) 72%), var(--cielo)}
.jl-estrellas{position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.55;
  background:
    radial-gradient(circle, rgba(254,228,168,.9) 0 1px, rgba(254,228,168,0) 1.6px) 0 0 / 90px 90px,
    radial-gradient(circle, rgba(169,196,226,.8) 0 1.2px, rgba(169,196,226,0) 2px) 45px 30px / 130px 120px}
.anim .jl-estrellas{animation:parpadeoCielo 6s ease-in-out infinite}
@keyframes parpadeoCielo{0%,100%{opacity:.4} 50%{opacity:.7}}
.jl-cielo > .wrap{position:relative; z-index:1}
.jl-cielo .eyebrow{color:var(--dorado-claro)}
.jl-cielo .sec-head h2{color:var(--perla)}
.jl-cielo .sec-head p{color:rgba(255,251,243,.8)}
.jl-mapa{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:40px}
.jl-mapa.tres{position:relative; display:block; aspect-ratio:1100/760; max-width:1100px; margin:0 auto 160px}
.jl-lineas{position:absolute; inset:0; width:100%; height:100%; overflow:visible; z-index:0; pointer-events:none}
.jl-lineas path{fill:none; stroke:var(--dorado); stroke-width:1.6; stroke-dasharray:1; stroke-dashoffset:0; vector-effect:non-scaling-stroke}
.anim .jl-lineas path{stroke-dashoffset:1; transition:stroke-dashoffset 2.2s var(--ease) .4s}
.anim .jl-mapa.visto .jl-lineas path{stroke-dashoffset:0}
.jl-mapa.tres .jl-astro{position:absolute; width:24%; z-index:1}
.jl-mapa.tres .a0{left:4%; top:0}
.jl-mapa.tres .a1{left:38%; top:34%}
.jl-mapa.tres .a2{left:72%; top:6%}
.jl-orbe{display:block; position:relative; padding:10px; border-radius:50%; background:var(--cielo);
  box-shadow:0 0 0 1px var(--dorado), 0 0 40px -6px rgba(254,228,168,.5); --lav:var(--dorado-claro); transition:box-shadow .4s var(--ease)}
.jl-astro:hover .jl-orbe{box-shadow:0 0 0 1px var(--dorado), 0 0 60px 0 rgba(254,228,168,.65)}
.jl-orbe .jl-foto-circ img{transition:transform .8s var(--ease)}
.jl-astro:hover .jl-orbe .jl-foto-circ img{transform:scale(1.07)}
.jl-astro-tx{padding:18px 4px 0; text-align:center; display:flex; flex-direction:column; align-items:center; gap:6px}
.jl-coleccion{font-size:.72rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--celeste)}
.jl-astro-tx h3{font-size:1.4rem; color:var(--perla)}
.jl-astro-tx h3 a{text-decoration:none}
.jl-astro-tx > p{margin:0; color:rgba(255,251,243,.78); font-size:.92rem}
.jl-compra{display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:10px 14px; margin-top:6px}
.jl-precio{font-family:var(--f-titulo); font-size:1.3rem; color:var(--dorado-claro)}
.jl-cielo .btn-primary:hover{background:var(--dorado-claro); color:var(--cafe)}
.variants small{color:rgba(255,251,243,.78)}
.cat-note{text-align:center; color:rgba(255,251,243,.8); margin:0 auto}
.cat-note a{color:var(--dorado-claro); font-weight:700}

/* ---------- 4 · Las dos hermanas ---------- */
.jl-hermanas{background:var(--perla)}
.jl-herm-grid{display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(30px,5vw,76px); align-items:center}
.jl-dos-lunas{position:relative; width:min(100%,420px); aspect-ratio:1; margin:0 auto}
.jl-luna-a, .jl-luna-b{position:absolute; top:6%; width:62%; height:auto}
.jl-luna-a{left:0; transform:scaleX(-1)}
.jl-luna-b{right:0}
.jl-herm-logo{position:absolute; left:50%; top:50%; translate:-50% -50%; width:40%; height:auto; aspect-ratio:1; border-radius:50%; object-fit:cover;
  box-shadow:0 0 0 8px var(--perla), 0 0 0 9px var(--linea-oro), 0 30px 50px -30px rgba(59,36,20,.5)}
.jl-hermanas h2{font-size:clamp(2.1rem,4vw,3.2rem); margin-bottom:16px}
.jl-hermanas .hist > summary{color:var(--oro-hondo)}
.jl-mv{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:24px}
.jl-mv > div{position:relative; padding:22px 20px 18px; border-radius:var(--r); background:var(--crema); box-shadow:inset 0 0 0 1px var(--linea-oro)}
.jl-mv h3{font-family:var(--f-cuerpo); font-size:.76rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--oro-hondo); margin-bottom:8px}
.jl-mv p{margin:0; color:var(--cafe-2); font-size:.94rem}

/* ---------- 5 · Cómo pedir: las fases ---------- */
.jl-pedir{background:var(--crema-2)}
.jl-pasos{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:30px}
.jl-pasos li{text-align:center; padding:0 8px}
/* Los pasos crecen como la luna: creciente, media y llena. */
.jl-paso-luna{position:relative; display:block; width:88px; height:88px; margin:0 auto 16px; border-radius:50%; overflow:hidden;
  background:var(--dorado); box-shadow:inset 0 0 0 2px var(--oro-hondo), 0 16px 28px -18px rgba(59,36,20,.6)}
.jl-paso-luna::after{content:""; position:absolute; top:0; width:100%; height:100%; border-radius:50%; background:var(--crema-2)}
.jl-paso-luna.p0::after{left:-28%}
.jl-paso-luna.p1::after{left:-62%}
.jl-paso-luna.p2::after{display:none}
.jl-paso-n{display:block; font-size:.74rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--oro-hondo); margin-bottom:4px}
.jl-pasos h3{font-size:1.45rem; margin-bottom:6px}
.jl-pasos p{margin:0 auto; max-width:30ch; color:var(--cafe-2)}
.jl-pedir-cta{text-align:center; margin-top:44px}

/* ---------- 6 · Contacto: la tarjeta de regalo ---------- */
.jl-contacto{background:var(--cielo); color:var(--perla)}
.jl-contacto .eyebrow{color:var(--dorado-claro)}
.jl-con-grid{display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); gap:clamp(30px,5vw,70px); align-items:center}
.jl-contacto h2{font-size:clamp(2.3rem,4.4vw,3.4rem); color:var(--perla); margin-bottom:14px}
.jl-con-txt{color:rgba(255,251,243,.84); max-width:40ch; margin-bottom:24px}
.jl-contacto .btn-primary:hover{background:var(--dorado-claro); color:var(--cafe)}
.jl-regalo{position:relative; padding:34px 30px 26px; border-radius:24px; background:var(--perla); color:var(--cafe);
  box-shadow:inset 0 0 0 1px var(--linea-oro), inset 0 0 0 8px var(--perla), inset 0 0 0 9px var(--linea-oro), 0 40px 70px -40px rgba(0,0,0,.6);
  --lav:var(--celeste)}
.jl-regalo-logo{width:92px; height:92px; margin:0 auto 12px; border-radius:50%; object-fit:cover; box-shadow:0 0 0 1px var(--linea-oro)}
.jl-regalo ul{list-style:none; margin:0; padding:0}
.jl-regalo li a{display:flex; align-items:center; gap:14px; padding:12px 6px; border-bottom:1px dashed var(--linea); text-decoration:none}
.jl-regalo li:last-child a{border-bottom:0}
.jl-red-ic{flex:none; width:44px; height:44px; border-radius:50%; display:grid; place-items:center; background:var(--dorado-claro); color:var(--oro-hondo)}
.jl-red-ic svg{width:21px; height:21px}
.jl-red-tx{display:flex; flex-direction:column; min-width:0; line-height:1.25}
.jl-red-tx small{font-size:.7rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--oro-hondo)}
.jl-red-tx b{font-weight:700; font-size:.98rem; overflow-wrap:break-word}

/* ---------- Pie ---------- */
footer{background:var(--cielo-2); color:rgba(255,251,243,.78); padding:56px 0 40px; border-top:1px solid var(--linea-clara)}
footer .brand b{color:var(--perla)}
footer .brand i{color:var(--dorado-claro); text-transform:none}
.foot-top{display:flex; flex-wrap:wrap; gap:22px; align-items:center; justify-content:space-between; padding-bottom:24px; border-bottom:1px solid var(--linea-clara)}
.foot-social{display:flex; gap:12px}
.foot-social a{width:46px; height:46px; border-radius:50%; display:grid; place-items:center; border:1px solid var(--linea-clara); color:var(--dorado-claro); transition:all .3s var(--ease)}
.foot-social a:hover{background:var(--dorado); color:var(--cafe); border-color:var(--dorado)}
.foot-social svg{width:20px; height:20px}
.foot-bot{display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; padding-top:20px}
footer .btn-primary:hover{background:var(--dorado-claro)}

/* ---------- Flotantes y piezas compartidas ---------- */
.wa-float{position:fixed; right:24px; bottom:24px; z-index:90; display:inline-flex; align-items:center; gap:10px;
  background:#25D366; color:#06280F; text-decoration:none; border-radius:999px;
  box-shadow:0 18px 38px -16px rgba(37,211,102,.9)}
.anim .wa-float{animation:latirJl 3.4s ease-out infinite}
@keyframes latirJl{0%{box-shadow:0 18px 38px -16px rgba(37,211,102,.9), 0 0 0 0 rgba(37,211,102,.55)}
  70%,100%{box-shadow:0 18px 38px -16px rgba(37,211,102,.9), 0 0 0 16px rgba(37,211,102,0)}}
.pista{color:var(--oro-hondo)}
.arriba{background:var(--cafe); color:var(--dorado-claro)}
.insignia, .insignia-linea{border-radius:999px}
.insignia-linea{background:var(--dorado-claro); color:var(--cafe); font-weight:700}
.hist > summary{color:var(--oro-hondo)}
.barra-compra{background:var(--perla); border-top:1px solid var(--linea-oro)}

/* ---------- Ficha de producto ---------- */
.jp-cab{position:relative; overflow:hidden; background:var(--crema-2)}
.jp-cab-luna{position:absolute; right:4%; top:50%; width:clamp(120px,16vw,210px); height:auto; translate:0 -50%; opacity:.5; pointer-events:none}
.jp-cab-in{position:relative; z-index:1; padding-block:34px 40px}
.p-migas{margin:0; font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; color:var(--cafe-2)}
.p-migas a{text-decoration:none}
.p-migas span{margin:0 8px; color:var(--dorado)}
.jp-cab .jl-coleccion{display:block; margin:16px 0 4px; color:var(--oro-hondo)}
.jp-cab h1{max-width:20ch; font-size:clamp(2.2rem,4.4vw,3.4rem)}
.jp-cuerpo{padding:52px 0 80px; background:var(--crema)}
.jp-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(28px,4vw,64px); align-items:start; width:min(1180px,92vw); margin:0 auto}
.jp-fotos{position:relative}
.jp-foto{position:relative; padding:12px; border-radius:var(--r); background:var(--perla); box-shadow:0 0 0 1px var(--linea-oro), 0 30px 56px -40px rgba(59,36,20,.55); --lav:var(--dorado)}
.jp-foto img{width:100%; height:auto; border-radius:calc(var(--r) - 8px)}
.jl-precio.grande{position:absolute; z-index:3; top:20px; right:20px; padding:10px 18px; border-radius:999px; font-size:1.45rem;
  background:var(--cielo); color:var(--dorado-claro); box-shadow:0 12px 24px -12px rgba(30,42,69,.7)}
.jp-mini{display:flex; flex-wrap:wrap; gap:10px; margin-top:14px}
.jp-mini button{width:70px; height:70px; padding:0; border-radius:50%; overflow:hidden; cursor:pointer; background:none; border:2px solid transparent}
.jp-mini button[aria-current="true"], .jp-mini button[aria-pressed="true"]{border-color:var(--dorado)}
.jp-mini img{width:100%; height:100%; object-fit:cover}
.jp-nombre{font-size:clamp(1.8rem,3vw,2.4rem); margin-bottom:10px}
.p-desc{color:var(--cafe-2)}
.p-precio{display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 12px; margin:20px 0 6px}
.p-precio b{font-family:var(--f-titulo); font-weight:400; font-size:2.7rem; line-height:1; color:var(--cafe)}
.p-precio small{color:var(--cafe-suave)}
.p-opciones{margin:22px 0}
.p-opciones h3{font-family:var(--f-cuerpo); font-size:.76rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--oro-hondo); margin-bottom:10px}
.p-chips{display:flex; flex-wrap:wrap; gap:9px}
.p-chips button{min-height:44px; padding:0 16px; border-radius:999px; border:1.5px solid var(--linea); background:var(--perla); cursor:pointer; font:inherit; font-weight:700; font-size:.9rem; color:var(--cafe)}
.p-chips button[aria-pressed="true"]{background:var(--dorado); border-color:var(--dorado)}
.p-puntos{list-style:none; margin:22px 0 0; padding:0; display:grid; gap:11px}
.p-puntos li{display:flex; gap:11px; align-items:flex-start; color:var(--cafe-2)}
.p-puntos svg{width:18px; height:18px; flex:none; margin-top:4px; color:var(--dorado)}
.p-cta{margin-top:26px}
.btn-block{width:100%}
.p-nota{display:flex; align-items:flex-start; gap:9px; margin-top:16px; color:var(--cafe-suave); font-size:.9rem}
.p-nota svg{width:18px; height:18px; color:var(--oro-hondo); flex:none; margin-top:3px}
.p-agotado{padding:5px 12px; border-radius:999px; background:var(--crema-2); color:var(--oro-hondo); font-weight:700; font-size:.8rem}
.jp-det{padding:0 0 86px; background:var(--crema); overflow:hidden}
.jp-ficha{position:relative; overflow:hidden; max-width:760px; margin:0 auto; padding:36px 36px 28px; border-radius:26px; background:var(--perla);
  box-shadow:inset 0 0 0 1px var(--linea-oro), inset 0 0 0 8px var(--perla), inset 0 0 0 9px var(--linea-oro)}
.jp-ficha-luna{position:absolute; right:-30px; bottom:-30px; width:180px; height:auto; opacity:.14; pointer-events:none}
.jp-ficha h2{position:relative; font-size:2rem; text-align:center; margin-bottom:14px}
.jp-ficha .rico{position:relative; color:var(--cafe-2)}
.jp-otros{padding:76px 0; color:var(--perla); background:var(--cielo)}
.jp-otros .eyebrow{color:var(--dorado-claro)}
.jp-otros .sec-head h2{color:var(--perla)}
.jp-otros-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:30px}
.jp-otro{display:flex; flex-direction:column; align-items:center; gap:4px; text-align:center; text-decoration:none}
.jp-otro .jl-foto-circ{width:min(80%,200px); margin-bottom:12px; box-shadow:0 0 0 1px var(--dorado), 0 0 0 8px var(--cielo), 0 0 0 9px var(--linea-clara)}
.jp-otro b{font-family:var(--f-titulo); font-weight:400; font-size:1.25rem; color:var(--perla)}
.jp-otro small{font-weight:700; color:var(--dorado-claro)}

/* ---------- Pantallas ---------- */
@media (max-width:960px){
  .jl-hero-grid, .jl-herm-grid, .jl-con-grid, .jp-grid{grid-template-columns:minmax(0,1fr)}
  .jl-medallon{width:min(84%,400px)}
  .jl-mapa.tres{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:40px; aspect-ratio:auto; margin-bottom:50px}
  .jl-mapa.tres .jl-astro{position:static; width:auto}
  .jl-lineas{display:none}
  .jl-orbe{width:min(100%,240px); margin:0 auto}
}
@media (max-width:820px){
  .sec{padding:78px 0}
  .nav-links{display:none}
  .jl-pasos{grid-template-columns:minmax(0,1fr); gap:34px}
  .jl-mv{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:620px){
  .brand img{width:50px; height:50px}
  .brand i{display:none}
  .jl-hero h1{font-size:clamp(2.3rem,10.5vw,3rem)}
  .jl-luna-hero{right:-6%; width:50%}
  .jl-fases .wrap{gap:12px 22px}
  .jl-mapa.tres{grid-template-columns:minmax(0,1fr)}
  .jl-regalo{padding:30px 20px 22px}
  .jp-ficha{padding:30px 22px 22px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .btn, .jl-orbe, .jl-orbe .jl-foto-circ img{transition:none}
  .anim .jl-destello, .anim .jl-luna-hero, .anim .jl-estrellas, .anim .wa-float{animation:none}
  .anim .jl-lineas path{stroke-dashoffset:0; transition:none}
}