/* =========================================================
   Inicio / catálogo (la base oscura está en tienda.css)
   ========================================================= */

/* ---------- Hero ---------- */
.hero{
    position:relative; overflow:hidden; isolation:isolate;
    padding:var(--space-8) 0 var(--space-8);
    background:
        radial-gradient(60% 70% at 72% 30%, rgba(176,122,52,.30), transparent 70%),
        radial-gradient(40% 50% at 95% 90%, rgba(120,80,35,.25), transparent 70%),
        radial-gradient(50% 60% at 10% 100%, rgba(60,42,22,.35), transparent 70%),
        linear-gradient(180deg,#0f0d0b 0%,#0b0a09 100%);
}
/* Rejilla tenue, como un estante al fondo */
.hero::before{
    content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
    background:
        linear-gradient(90deg, transparent 49.8%, rgba(212,175,110,.05) 50%, transparent 50.2%) 0 0/260px 100%,
        linear-gradient(0deg, rgba(0,0,0,.5), transparent 40%);
    mask-image:linear-gradient(90deg, transparent 30%, #000 70%);
}
.hero-grid{display:grid; gap:var(--space-7); align-items:center}
.hero h1{font-size:clamp(40px,4.9vw,68px); line-height:1.04; margin-top:var(--space-4)}
.hero-lead{font-size:15.5px; color:var(--ink-soft); max-width:44ch; margin-top:var(--space-5); line-height:1.7}
.hero-actions{display:flex; gap:var(--space-3); flex-wrap:wrap; margin-top:var(--space-6)}

.hero-stage{position:relative; display:grid; justify-items:center; text-decoration:none; color:inherit}
.stage{position:relative; width:min(360px,78vw); display:grid; justify-items:center}
.stage::before{ /* halo cálido detrás del producto */
    content:""; position:absolute; top:-12%; left:50%; width:130%; aspect-ratio:1; transform:translateX(-50%);
    background:radial-gradient(circle, rgba(212,160,90,.30), transparent 62%); z-index:-1;
}
.stage-case{
    position:relative; width:78%; aspect-ratio:1; border-radius:22px; overflow:hidden;
    background:radial-gradient(90% 90% at 50% 40%, #fbf8f2 0%, var(--ivory) 55%, #ddd4c5 100%);
    box-shadow:0 30px 50px -20px rgba(0,0,0,.9), 0 0 0 1px rgba(236,210,156,.45);
    z-index:1;
}
.stage-case img{width:100%; height:100%; object-fit:contain; padding:10%; mix-blend-mode:multiply; transition:transform .5s var(--ease)}
.stage-case .skeleton{width:100%; height:100%; border-radius:0}
.hero-stage:hover .stage-case img{transform:scale(1.04)}
.stage-badge{
    position:absolute; top:-14px; right:-18px; z-index:2;
    font-size:11.5px; font-weight:600; color:var(--gold-hi);
    padding:6px 14px; border-radius:var(--radius-pill);
    background:rgba(20,17,13,.9); border:1px solid var(--line-strong);
}
/* Pedestal de piedra oscura */
.stage-plinth{
    position:relative; width:122%; height:130px; margin-top:-44px;
    border-radius:4px;
    background:
        linear-gradient(100deg, transparent 18%, rgba(255,255,255,.07) 22%, transparent 27%),
        linear-gradient(160deg, transparent 55%, rgba(255,255,255,.05) 60%, transparent 66%),
        radial-gradient(70% 60% at 30% 10%, rgba(255,235,200,.10), transparent 70%),
        linear-gradient(180deg,#2c2823 0%,#1a1714 38%,#0d0c0a 100%);
    box-shadow:inset 0 1px 0 rgba(255,240,215,.22), 0 40px 50px -24px rgba(0,0,0,.95);
}
/* Cara superior del pedestal, iluminada */
.stage-plinth::before{
    content:""; position:absolute; left:0; right:0; top:0; height:44px; border-radius:4px 4px 0 0;
    background:linear-gradient(180deg,#3a342d,#221e1a);
    box-shadow:inset 0 1px 0 rgba(255,240,215,.25), 0 1px 0 rgba(0,0,0,.6);
}

.hero-card{
    position:relative; z-index:3; width:min(300px,100%); margin-top:-30px;
    padding:20px; border-radius:var(--radius-card);
    background:rgba(16,14,12,.92); border:1px solid var(--line-strong);
    box-shadow:0 30px 60px -30px rgba(0,0,0,.9);
    backdrop-filter:blur(8px);
}
.hero-card .cat{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold)}
.hero-card h2{font-size:16px; font-weight:600; line-height:1.35; margin-top:6px}
.hero-card p{font-size:12.5px; color:var(--ink-soft); margin-top:6px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.hero-card .price-row{display:flex; align-items:baseline; gap:10px; margin:14px 0 16px}
.hero-card .price-row strong{font-size:26px; font-weight:600; letter-spacing:-.01em}
.hero-card .price-row s{font-size:13px; color:var(--ink-faint)}
.hero-card .btn{width:100%}
.hero-card .stars{margin-top:8px}

/* Producto y tarjeta lado a lado desde tablet; texto y producto lado a lado desde 1180 */
@media (min-width:720px){
    .hero-stage{grid-template-columns:auto auto; justify-content:center; align-items:center}
    .stage{width:340px; margin-left:20px}
    .hero-card{margin:60px 0 0 -10px; width:260px; align-self:end}
}
@media (min-width:1180px){
    .hero{padding:88px 0 96px}
    .hero-grid{grid-template-columns:1.05fr 1fr}
    .stage{width:360px}
}
@media (max-width:1179px){.hero{padding:var(--space-7) 0}}
@media (max-width:480px){
    .hero-actions .btn{flex:1 1 auto}
    .stage-badge{right:-6px}
}

/* "Los más pedidos" trae 5 o 10 productos: se esconden los que dejarían una fila a medias */
@media (max-width:719px){#productsGrid > :nth-child(odd):last-child{display:none}}
@media (min-width:720px) and (max-width:959px){#productsGrid > :nth-child(n+10), #productsGrid > :nth-child(4):nth-last-child(2), #productsGrid > :nth-child(5):last-child{display:none}}
@media (min-width:960px) and (max-width:1179px){#productsGrid > :nth-child(n+9), #productsGrid > :nth-child(5):last-child{display:none}}

/* ---------- Banner "Cómo comprar" ---------- */
.banner{
    position:relative; overflow:hidden; isolation:isolate;
    display:grid; border-radius:14px; border:1px solid var(--line);
    background:
        radial-gradient(60% 90% at 20% 50%, rgba(150,100,45,.28), transparent 70%),
        linear-gradient(90deg,#15110d 0%,#0e0c0a 100%);
}
.banner-media{
    position:relative; min-height:260px; display:flex; align-items:flex-end; justify-content:center;
    padding:32px 24px 0;
}
.banner-media::after{ /* repisa */
    content:""; position:absolute; left:8%; right:8%; bottom:0; height:40px;
    background:linear-gradient(180deg,#2a241d 0%,#120f0c 100%);
    border-radius:4px 4px 0 0; box-shadow:inset 0 1px 0 rgba(255,255,255,.1);
}
.banner-media .plate{
    position:relative; z-index:1; width:34%; max-width:170px; aspect-ratio:1; margin:0 -3% 26px;
    border-radius:14px; overflow:hidden;
    background:radial-gradient(90% 90% at 50% 40%, #fdfbf7 0%, var(--ivory) 55%, #d8cebd 100%);
    box-shadow:0 24px 40px -18px rgba(0,0,0,.95), 0 0 0 1px rgba(236,210,156,.35);
}
.banner-media .plate:nth-child(2){width:40%; max-width:200px; z-index:2; margin-bottom:30px}
.banner-media .plate img{width:100%; height:100%; object-fit:contain; padding:12%; mix-blend-mode:multiply}
.banner-lines{position:absolute; inset:0; width:100%; height:100%; z-index:-1; pointer-events:none}
.banner-lines path{fill:none; stroke:rgba(212,175,110,.28); stroke-width:1}
.banner-copy{position:relative; padding:36px 28px 40px}
.banner-copy h2{font-size:clamp(30px,3.4vw,42px); line-height:1.08; margin-top:12px}
.steps{list-style:none; padding:0; margin:22px 0 26px; display:grid; gap:14px; counter-reset:paso}
.steps li{display:grid; grid-template-columns:34px 1fr; column-gap:14px; counter-increment:paso}
.steps li::before{
    content:counter(paso); grid-row:span 2; width:34px; height:34px; border-radius:50%;
    display:grid; place-items:center; border:1px solid var(--line-strong);
    font-family:var(--font-display); font-size:16px; color:var(--gold);
}
.steps strong{font-size:14px; font-weight:600}
.steps span{font-size:13px; color:var(--ink-soft)}
@media (min-width:860px){
    .banner{grid-template-columns:1.05fr 1fr; min-height:340px}
    .banner-media{min-height:auto; padding:40px 40px 0}
    .banner-copy{padding:48px 56px 48px 24px; align-self:center}
}

/* ---------- Categorías ---------- */
/* ---------- Carruseles (categorías y recién llegados) ----------
   Muestran el mismo número de columnas que una cuadrícula y avanzan solos;
   el resto de elementos queda a un deslizamiento de distancia. */
.rail{
    --cols:2; --gap:14px;
    display:grid; grid-auto-flow:column; gap:var(--gap);
    grid-auto-columns:calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
    overflow-x:auto; overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory; scroll-behavior:smooth; scrollbar-width:none;
    padding:4px 2px 10px; margin:-4px -2px -10px;
}
.rail::-webkit-scrollbar{display:none}
.rail > *{scroll-snap-align:start; min-width:0}
.product-rail{--gap:14px}
@media (min-width:720px){.product-rail{--cols:3; --gap:18px}}
@media (min-width:960px){.product-rail{--cols:4}}
@media (min-width:1180px){.product-rail{--cols:5}}
@media (min-width:640px){.cat-rail{--cols:3}}
@media (min-width:960px){.cat-rail{--cols:4}}
@media (min-width:1180px){.cat-rail{--cols:6}}

.rail-head{display:flex; align-items:center; gap:18px}
.rail-nav{display:flex; gap:8px}
.rail-btn{
    width:38px; height:38px; display:grid; place-items:center; padding:0;
    border-radius:50%; border:1px solid var(--line-strong); background:transparent; color:var(--ink);
    font-size:12px; transition:border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease);
}
.rail-btn:hover{border-color:var(--gold); color:var(--gold-hi); background:var(--brand-soft)}
.rail-nav[hidden]{display:none}
@media (max-width:480px){.rail-head .more{display:none}}
.cat-tile{
    display:flex; flex-direction:column; text-align:left; padding:0; overflow:hidden;
    border:1px solid var(--line); border-radius:var(--radius-card);
    background:var(--surface); color:var(--ink);
    transition:border-color .25s var(--ease), transform .25s var(--ease);
}
.cat-tile:hover{border-color:var(--line-strong); transform:translateY(-3px)}
.cat-tile .media{
    position:relative; aspect-ratio:5/4; width:100%; overflow:hidden;
    background:radial-gradient(90% 90% at 50% 38%, #fdfbf7 0%, var(--ivory) 55%, #d6ccba 100%);
}
.cat-tile .media img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:12%; mix-blend-mode:multiply; transition:transform .5s var(--ease)}
.cat-tile:hover .media img{transform:scale(1.06)}
.cat-tile .media i{display:grid; place-items:center; height:100%; font-size:34px; color:var(--gold-lo)}
.cat-tile strong{font-size:14px; font-weight:600; padding:14px 14px 2px}
.cat-tile span{display:flex; align-items:center; gap:8px; font-size:11.5px; color:var(--ink-faint); padding:0 14px 14px}
.cat-tile span i{font-size:10px; color:var(--gold)}

/* ---------- Catálogo ---------- */
.catalog-toolbar{display:grid; gap:var(--space-3); margin-bottom:var(--space-4)}
@media (min-width:760px){.catalog-toolbar{grid-template-columns:1fr 240px}}
.catalog-toolbar .input,.catalog-toolbar .select{
    min-height:46px; border-radius:var(--radius-pill); background-color:var(--surface); border-color:var(--line-strong); font-size:14px;
}
.catalog-toolbar .select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23d4af6e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.catalog-toolbar .input::placeholder{color:var(--ink-faint)}
.chips{display:flex; gap:var(--space-2); overflow-x:auto; padding:2px 2px 6px; scrollbar-width:none; margin:0 -2px}
.chips::-webkit-scrollbar{display:none}
.chip{background:transparent; font-size:13px}
.chip.active,.chip[aria-pressed="true"]{background:var(--gold-grad); border-color:transparent; color:#1a140b}
.catalog-grid{margin-top:var(--space-5)}
.catalog-grid .empty{grid-column:1/-1}