/* =========================================================
   Tienda pública — tema negro y dorado
   Compartido por index.html y productos.html (los colores y
   botones del tema están en noir.css): cabecera, pie, tarjeta
   de producto, franja de beneficios y bloque de ayuda.
   ========================================================= */

/* ---------- Franja de promesa ---------- */
.promise{background:#070605; border-bottom:1px solid var(--line); color:var(--ink-soft); font-size:12px; font-weight:500}
.promise .wrap{display:flex; justify-content:center; align-items:center; min-height:36px}
.promise span{padding:0 26px}
.promise span + span{border-left:1px solid var(--line)}
.promise i{color:var(--gold); margin-right:9px}
.promise span:nth-child(n+2){display:none}
@media (min-width:560px){.promise span:nth-child(2){display:inline}}
@media (min-width:860px){.promise span:nth-child(3){display:inline}}

/* ---------- Cabecera ---------- */
.site-head{
    position:sticky; top:0; z-index:50;
    background:rgba(11,10,9,.86);
    backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line);
    transition:box-shadow .2s var(--ease);
}
.site-head.scrolled{box-shadow:0 12px 30px -18px rgba(0,0,0,.9)}
.site-head .wrap{display:flex; align-items:center; gap:var(--space-5); min-height:76px}


.site-nav{display:flex; gap:38px; margin:0 auto}
.site-nav a{position:relative; text-decoration:none; color:var(--ink); font-size:13.5px; font-weight:500; padding:8px 0; transition:color .15s var(--ease)}
.site-nav a:hover,.site-nav a.active{color:var(--gold)}
.site-nav a.active::after{content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--gold)}

.head-actions{display:flex; align-items:center; gap:6px}
.icon-btn{
    width:42px; height:42px; display:inline-grid; place-items:center;
    border:0; border-radius:50%; background:transparent; color:var(--ink);
    font-size:17px; text-decoration:none; transition:color .15s var(--ease), background .15s var(--ease);
}
.icon-btn:hover{color:var(--gold); background:var(--surface-2)}
.menu-toggle{display:none}

@media (max-width:959px){
    .site-head .wrap{min-height:66px; gap:var(--space-3)}
    .head-actions{margin-left:auto}
    .menu-toggle{display:inline-grid}
    .site-nav{
        position:absolute; left:0; right:0; top:100%;
        display:grid; gap:0; margin:0; padding:var(--space-2) var(--space-5) var(--space-4);
        background:var(--bg); border-bottom:1px solid var(--line);
        opacity:0; transform:translateY(-6px); pointer-events:none;
        transition:opacity .18s var(--ease), transform .18s var(--ease);
    }
    .site-nav.open{opacity:1; transform:none; pointer-events:auto}
    .site-nav a{padding:15px 0; border-bottom:1px solid var(--line); font-size:15px}
    .site-nav a:last-child{border-bottom:0}
    .site-nav a.active::after{display:none}
}
@media (max-width:420px){.brand-name small{display:none}}

/* ---------- Estrellas ---------- */
.stars{display:flex; align-items:center; gap:3px; color:var(--gold); font-size:11px}
.stars span{color:var(--ink-faint); margin-left:6px; font-size:11.5px}

/* ---------- Promesa (4 columnas) ---------- */
.perks{border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--bg-2)}
.perks-grid{display:grid; grid-template-columns:repeat(2,1fr)}
.perk{display:grid; justify-items:center; text-align:center; gap:6px; padding:28px 12px}
.perk i{font-size:26px; color:var(--gold); margin-bottom:8px}
.perk strong{font-size:13.5px; font-weight:600}
.perk span{font-size:12px; color:var(--ink-faint)}
.perk:nth-child(odd){border-right:1px solid var(--line)}
.perk:nth-child(-n+2){border-bottom:1px solid var(--line)}
@media (min-width:860px){
    .perks-grid{grid-template-columns:repeat(4,1fr)}
    .perk{padding:36px 12px}
    .perk:nth-child(-n+2){border-bottom:0}
    .perk + .perk{border-left:1px solid var(--line)}
    .perk:nth-child(odd){border-right:0}
}

/* ---------- Secciones ---------- */
.section{padding-top:88px}
.section-head{display:flex; align-items:flex-end; justify-content:space-between; gap:var(--space-4); margin-bottom:var(--space-6); flex-wrap:wrap}
.section-head h2{font-family:var(--font-display); font-weight:400; font-size:clamp(30px,3.4vw,42px); line-height:1.1}
.section-head p{color:var(--ink-soft); margin-top:8px; font-size:14px}
.more{display:inline-flex; align-items:center; gap:10px; color:var(--gold); font-size:13px; font-weight:600; text-decoration:none}
.more i{font-size:11px; transition:transform .2s var(--ease)}
.more:hover i{transform:translateX(3px)}
@media (max-width:640px){.section{padding-top:64px}}

/* ---------- Tarjeta de producto ---------- */
.product-grid{display:grid; gap:14px; grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:720px){.product-grid{grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px}}
@media (min-width:960px){.product-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:1180px){.product-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}


.p-card{
    display:flex; flex-direction:column; min-width:0; padding:8px;
    text-decoration:none; color:inherit;
    background:linear-gradient(180deg,var(--surface) 0%,var(--bg-2) 100%);
    border:1px solid var(--line); border-radius:var(--radius-card);
    transition:border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.p-card:hover{border-color:var(--line-strong); transform:translateY(-3px); box-shadow:var(--shadow-2)}
.p-card:hover .p-media img{transform:scale(1.05)}

/* La foto va sobre marfil y se funde con él (las fotos tienen fondo blanco) */
.p-media{
    position:relative; aspect-ratio:1/1; border-radius:8px; overflow:hidden;
    background:radial-gradient(90% 90% at 50% 38%, #fdfbf7 0%, var(--ivory) 55%, #dcd3c3 100%);
}
.p-media img{width:100%; height:100%; object-fit:contain; padding:12%; mix-blend-mode:multiply; transition:transform .5s var(--ease)}
.p-media .tag{
    position:absolute; top:8px; left:8px; height:22px; padding:0 9px;
    background:rgba(14,12,10,.88); color:var(--gold-hi); border:1px solid var(--line-strong);
    font-size:10.5px; font-weight:600; text-transform:none;
}
.p-media .off{position:absolute; top:8px; right:8px; background:var(--gold-grad); color:#1a140b; font-size:10.5px; font-weight:700; border-radius:var(--radius-pill); padding:4px 8px}

.p-body{display:grid; gap:6px; flex:1; align-content:start; padding:12px 6px 6px}
.p-body .cat{font-size:10.5px; color:var(--ink-faint)}
.p-body h3{font-size:13px; font-weight:500; line-height:1.4; min-height:2.8em; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.p-price{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin-top:auto; padding-top:4px}
.p-price strong{font-size:17px; font-weight:600; letter-spacing:-.01em}
.p-price s{color:var(--ink-faint); font-size:11.5px}
.p-cta{
    display:flex; align-items:center; justify-content:center; gap:8px;
    min-height:34px; margin-top:10px; border-radius:var(--radius-pill);
    border:1px solid rgba(244,238,228,.28); font-size:12px; font-weight:600;
    transition:background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.p-card:hover .p-cta{background:var(--gold-grad); border-color:transparent; color:#1a140b}

/* Variante "recién llegados": la categoría va sobre el nombre */
.p-card.compact .p-body .cat{text-transform:none}

@media (max-width:480px){
    .p-media .tag{max-width:calc(100% - 64px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block; line-height:20px}
    .p-card{padding:6px}
    .p-body{padding:10px 4px 4px}
    .p-price strong{font-size:15px}
}

.p-card.is-loading .p-media{background:var(--surface-2)}
.p-card.is-loading .skeleton{height:10px; margin:4px 0}

/* ---------- Estado vacío ---------- */
.empty{border:1px dashed var(--line-strong); border-radius:var(--radius-card)}
.empty > i{color:var(--gold)}

/* ---------- Ayuda ---------- */
.help{
    position:relative; overflow:hidden; isolation:isolate;
    margin-top:96px; border-radius:14px; border:1px solid var(--line-strong);
    display:grid; gap:var(--space-5); padding:40px 28px;
    background:
        radial-gradient(50% 120% at 85% 50%, rgba(170,115,50,.30), transparent 70%),
        linear-gradient(90deg,#0f0d0b 0%,#15110d 100%);
}
.help .eyebrow{letter-spacing:0; text-transform:none; font-size:13px; color:var(--gold)}
.help h2{font-size:clamp(30px,3.6vw,44px); margin-top:8px}
.help-copy > p:not(.eyebrow){color:var(--ink-soft); max-width:52ch; margin-top:14px; font-size:14px}
.help-actions{display:flex; gap:var(--space-3); flex-wrap:wrap; margin-top:var(--space-5)}
.help-art{position:relative; display:flex; align-items:center; justify-content:center; gap:28px; min-height:200px}
.phone{
    width:120px; aspect-ratio:9/18; border-radius:22px; padding:6px; transform:rotate(-10deg);
    background:linear-gradient(145deg,#3a342c,#0d0c0a);
    box-shadow:0 30px 50px -20px rgba(0,0,0,.95), inset 0 0 0 1px rgba(255,255,255,.12);
}
.phone-screen{
    height:100%; border-radius:17px; display:grid; place-items:center;
    background:radial-gradient(circle at 50% 40%, #14352a, #07130f 75%);
}
.phone-screen i{
    width:56px; height:56px; border-radius:50%; display:grid; place-items:center;
    background:#25d366; color:#fff; font-size:32px; box-shadow:0 0 30px rgba(37,211,102,.45);
}
.script{font-family:var(--font-script); font-size:44px; line-height:.95; color:var(--gold-hi); transform:rotate(-8deg); text-align:center}
@media (min-width:860px){
    .help{grid-template-columns:1.3fr 1fr; align-items:center; padding:44px 56px}
}
@media (max-width:480px){
    .help-actions .btn{width:100%}
    .help-art{min-height:170px}
    .phone{width:96px}
    .script{font-size:36px}
}

/* ---------- Pie ---------- */
.site-foot{margin-top:96px; border-top:1px solid var(--line); background:#080706; font-size:13px}
.foot-grid{display:grid; gap:var(--space-6); padding-top:56px; padding-bottom:40px}
.site-foot h4{font-size:13px; font-weight:600; margin-bottom:14px}
.site-foot a,.foot-grid span{display:block; text-decoration:none; color:var(--ink-faint); padding:4px 0}
.site-foot a:hover{color:var(--gold)}
.site-foot .brand{display:inline-flex; padding:0; color:var(--ink)}
.foot-about p{max-width:34ch; margin-top:14px; color:var(--ink-faint); line-height:1.7}
.foot-social{display:flex; gap:10px; margin-top:18px}
.foot-social a{width:36px; height:36px; display:grid; place-items:center; border-radius:50%; border:1px solid var(--line-strong); padding:0; color:var(--ink)}
.foot-social a:hover{border-color:var(--gold)}
.foot-legal{display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; padding-top:18px; padding-bottom:22px; border-top:1px solid var(--line); color:var(--ink-faint); font-size:12px}
.foot-legal nav{display:flex; gap:18px}
.foot-legal nav a{padding:0}
.foot-legal nav a + a{border-left:1px solid var(--line); padding-left:18px}
@media (min-width:640px){.foot-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.foot-grid{grid-template-columns:1.6fr 1fr 1fr 1fr 1.3fr}}

/* ---------- WhatsApp flotante ---------- */
.wa-float{
    position:fixed; right:18px; bottom:18px; z-index:60;
    width:54px; height:54px; border-radius:50%; display:grid; place-items:center;
    background:var(--gold-grad); color:#1a140b; font-size:25px; text-decoration:none;
    box-shadow:0 14px 30px -10px rgba(212,175,110,.6);
    transition:transform .2s var(--ease);
}
.wa-float:hover{transform:translateY(-2px)}