/* ===================================================================
   front-page.css — vasitos.es
   Estilos exclusivos de la Home. Se carga solo si is_front_page().
   Usa las mismas variables --ink, --orange, etc. definidas en
   site-chrome.css (que se carga siempre antes que este archivo).
=================================================================== */

/* ===== HERO ===== */
.vh-hero{ position:relative; min-height:82vh; display:flex; align-items:flex-end; overflow:hidden; }
.vh-hero-bg{ position:absolute; inset:0; }
.vh-hero-bg img{ width:100%; height:100%; object-fit:cover; object-position:50% 30%; display:block; }
.vh-hero-bg::after{ content:''; position:absolute; inset:0; background:linear-gradient(0deg, rgba(15,10,8,.82) 0%, rgba(15,10,8,.28) 45%, rgba(15,10,8,.08) 62%, rgba(15,10,8,.5) 100%); }
.vh-hero-content{ position:relative; z-index:2; max-width:640px; padding:0 40px 60px; margin:0 auto; }
.vh-hero-eyebrow{ font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.7); margin-bottom:14px; }
.vh-hero h1{ font-family:'Barlow Condensed',sans-serif; font-weight:800; text-transform:uppercase; font-size:clamp(36px,5.6vw,58px); line-height:1; color:#fff; letter-spacing:-.01em; margin-bottom:16px; }
.vh-hero h1 em{ font-style:normal; color:var(--orange); }
.vh-hero p{ font-size:14.5px; line-height:1.6; color:rgba(255,255,255,.82); max-width:440px; margin-bottom:28px; }
.vh-hero-ctas{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.vh-btn-primary{ background:var(--orange); color:#fff; border:none; border-radius:8px; padding:14px 28px; font-family:'Barlow Condensed',sans-serif; text-transform:uppercase; font-weight:700; letter-spacing:.04em; font-size:14px; box-shadow:0 4px 14px rgba(244,96,54,.25); text-decoration:none; display:inline-block; }
.vh-btn-primary:hover{ background:#DB4E27; }
.vh-btn-ghost{ font-family:'Barlow Condensed',sans-serif; text-transform:uppercase; font-weight:700; letter-spacing:.03em; font-size:13.5px; color:#fff; padding:14px 6px; border-bottom:1.5px solid rgba(255,255,255,.4); text-decoration:none; }
.vh-btn-ghost:hover{ border-color:#fff; }
.vh-btn-ghost-light{ background:var(--step-bg); color:var(--ink); border-radius:8px; padding:14px 26px; font-family:'Barlow Condensed',sans-serif; text-transform:uppercase; font-weight:700; letter-spacing:.03em; font-size:13.5px; text-decoration:none; }
.vh-btn-ghost-light:hover{ background:var(--line); }

/* ===== EYEBROW+HEADING reutilizado en cada sección ===== */
.vh-sec-head{ margin-bottom:26px; }
.vh-eyebrow{ font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:8px; }
.vh-sec-head h2{ font-family:'Barlow Condensed',sans-serif; text-transform:uppercase; font-weight:800; font-size:26px; letter-spacing:-.01em; margin:0; }

/* ===== TRUST ===== */
.vh-trust{ max-width:1160px; margin:0 auto; padding:44px 40px 8px; }
.vh-trust-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.vh-trust-item{ background:var(--step-bg); border-radius:12px; padding:18px 20px; display:flex; align-items:flex-start; gap:12px; }
.vh-trust-item svg{ width:19px; height:19px; stroke:var(--orange); flex-shrink:0; margin-top:1px; }
.vh-trust-item span{ font-size:12.5px; color:var(--ink); font-weight:500; line-height:1.4; }

/* ===== CATEGORÍAS ===== */
.vh-cats{ max-width:1160px; margin:0 auto; padding:56px 40px 8px; }
.vh-cats-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.vh-cat-card{ background:var(--surface); border-radius:12px; box-shadow:var(--shadow); overflow:hidden; text-decoration:none; display:block; }
.vh-cat-card-img{ aspect-ratio:4/3; display:flex; align-items:center; justify-content:center; background:var(--paper); }
.vh-cat-card-img img{ width:100%; height:100%; object-fit:cover; }
.vh-cat-card-body{ padding:16px 18px 20px; }
.vh-cat-card-body b{ display:block; font-family:'Barlow Condensed',sans-serif; text-transform:uppercase; font-size:17px; font-weight:700; margin-bottom:3px; color:var(--ink); }
.vh-cat-card-body span{ font-size:12px; color:var(--muted); }
.vh-ver{ display:inline-block; margin-top:10px; font-family:'Barlow Condensed',sans-serif; text-transform:uppercase; font-size:11.5px; font-weight:700; color:var(--orange); }

/* ===== VASOS SEGÚN OCASIÓN ===== */
.vh-occasions{ max-width:1160px; margin:0 auto; padding:56px 40px 8px; }
.vh-occasions-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.vh-occ-card{ background:var(--surface); border-radius:14px; box-shadow:var(--shadow); overflow:hidden; display:flex; flex-direction:column; text-decoration:none; }
.vh-occ-img{ aspect-ratio:4/5; overflow:hidden; }
.vh-occ-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.vh-occ-img-color{ display:flex; align-items:center; justify-content:center; }
.vh-occ-body{ padding:18px 18px 20px; flex:1; display:flex; flex-direction:column; }
.vh-occ-body b{ display:block; font-family:'Barlow Condensed',sans-serif; text-transform:uppercase; font-size:17px; font-weight:700; margin-bottom:8px; color:var(--ink); }
.vh-occ-body p{ font-size:12px; color:var(--muted); line-height:1.55; margin-bottom:14px; flex:1; }
.vh-occ-card:hover .vh-ver{ text-decoration:underline; }
.vh-occasions-footer{ margin-top:30px; padding-top:28px; border-top:1px solid var(--line); text-align:center; }
.vh-occasions-footer p{ font-size:12.5px; color:var(--muted); line-height:1.7; max-width:600px; margin:0 auto 20px; }
.vh-occasions-ctas{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* ===== CÓMO FUNCIONA ===== */
.vh-how{ max-width:1160px; margin:0 auto; padding:56px 40px 8px; }
.vh-how-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.vh-how-step{ background:var(--step-bg); border-radius:10px; padding:22px 20px; }
.vh-num{ width:30px; height:30px; border-radius:50%; background:var(--ink); color:#fff; display:flex; align-items:center; justify-content:center; font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:14px; margin-bottom:16px; }
.vh-how-step b{ display:block; font-family:'Barlow Condensed',sans-serif; text-transform:uppercase; font-size:15px; font-weight:700; margin-bottom:6px; color:var(--ink); }
.vh-how-step p{ font-size:12.5px; color:var(--muted); line-height:1.6; margin:0; }

/* ===== PRODUCTOS DESTACADOS ===== */
.vh-featured{ max-width:1160px; margin:0 auto; padding:56px 40px 8px; }
.vh-featured-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.vh-prod-card{ background:var(--surface); border-radius:12px; box-shadow:var(--shadow); overflow:hidden; text-decoration:none; display:block; }
.vh-prod-card-img{ aspect-ratio:1/1; background:var(--surface); display:flex; align-items:center; justify-content:center; padding:16px; }
.vh-prod-card-img img{ max-width:100%; max-height:100%; object-fit:contain; }
.vh-prod-card-body{ padding:0 16px 16px; }
.vh-cat{ font-family:'IBM Plex Mono',monospace; font-size:9.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; margin-bottom:4px; }
.vh-prod-card-body b{ display:block; font-family:'Barlow Condensed',sans-serif; text-transform:uppercase; font-size:14px; font-weight:700; margin-bottom:6px; color:var(--ink); }
.vh-price{ font-family:'Barlow Condensed',sans-serif; color:var(--orange); font-size:15px; font-weight:700; }
.vh-price ins{ text-decoration:none; }
.vh-price del{ opacity:.5; font-size:11px; margin-right:4px; }

/* ===== VENTAJAS ===== */
.vh-advantages{ max-width:1160px; margin:0 auto; padding:56px 40px 8px; }
.vh-adv-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.vh-adv-item{ display:flex; gap:14px; align-items:flex-start; background:var(--step-bg); border-radius:10px; padding:18px 20px; }
.vh-adv-item svg{ width:20px; height:20px; stroke:var(--orange); flex-shrink:0; margin-top:2px; }
.vh-adv-item b{ display:block; font-family:'Barlow Condensed',sans-serif; text-transform:uppercase; font-size:13.5px; font-weight:700; margin-bottom:4px; color:var(--ink); }
.vh-adv-item p{ font-size:12px; color:var(--muted); line-height:1.55; margin:0; }

/* ===== CTA FINAL ===== */
.vh-cta-final{ max-width:none; margin:64px 0 0; background:var(--ink); padding:56px 40px; text-align:center; }
.vh-cta-final .vh-eyebrow{ color:rgba(255,255,255,.55); }
.vh-cta-final h2{ font-family:'Barlow Condensed',sans-serif; text-transform:uppercase; font-weight:800; font-size:30px; color:#fff; letter-spacing:-.01em; margin-bottom:20px; }
.vh-cta-final .vh-btn-primary{ font-size:15px; padding:16px 34px; }

@media (max-width:860px){
  .vh-hero-content{ padding:0 20px 40px; }
  .vh-trust{ padding:36px 20px 8px; } .vh-trust-grid{ grid-template-columns:repeat(2,1fr); }
  .vh-cats{ padding:44px 20px 8px; } .vh-cats-grid{ grid-template-columns:1fr; }
  .vh-occasions{ padding:44px 20px 8px; } .vh-occasions-grid{ grid-template-columns:1fr 1fr; }
  .vh-how{ padding:44px 20px 8px; } .vh-how-grid{ grid-template-columns:1fr; }
  .vh-featured{ padding:44px 20px 8px; } .vh-featured-grid{ grid-template-columns:repeat(2,1fr); }
  .vh-advantages{ padding:44px 20px 8px; } .vh-adv-grid{ grid-template-columns:1fr; }
  .vh-cta-final{ padding:44px 20px; }
}