/* ============================================================
   HOME — estilos exclusivos de index.html
   ============================================================ */

/* ---------- HERO ---------- */
.hero{ position:relative; min-height:88svh; display:flex; align-items:flex-end; overflow:hidden; color:#fff; }
.hero-bg{ position:absolute; inset:-10% -5%; z-index:0; }
.hero-bg img{ width:100%; height:100%; object-fit:cover; }
.hero-overlay{ position:absolute; inset:0; z-index:1; background: linear-gradient(180deg, rgba(4,8,31,.4) 0%, rgba(4,8,31,.78) 100%); }
.hero-content{ position:relative; z-index:2; padding: var(--space-8) 0 var(--space-7); max-width:820px; }
.hero-content h1{ font-family: var(--font-hero); color:#fff; font-size: var(--step-4); text-transform:uppercase; letter-spacing:.01em; line-height:1.05; }
.hero-content .eyebrow{ color: var(--cta); }
.hero-content p{ color: rgba(255,255,255,.9); font-size: var(--step-1); margin-top: var(--space-3); max-width:640px; }
.hero-cta-row{ display:flex; flex-wrap:wrap; gap: var(--space-2); margin-top: var(--space-4); }

/* ---------- BRANDS ---------- */
.brands-grid{ display:grid; grid-template-columns:1fr; gap: var(--space-5); }
@media (min-width:700px){ .brands-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1280px){ .brands-grid{ grid-template-columns:repeat(3,1fr); } }

/* ---------- POSTVENTA (resumen) ---------- */
.postventa-summary{ background: var(--navy-800); color:#fff; position:relative; }
.postventa-summary::before{
  content:''; position:absolute; left:0; right:0; top:0; height:56px; pointer-events:none;
  background: linear-gradient(to bottom, rgba(4,8,31,.2), rgba(4,8,31,0));
}
.postventa-summary h2, .postventa-summary .eyebrow{ color:#fff; }
.postventa-summary .eyebrow{ color: var(--cta); }
.postventa-grid{ display:grid; grid-template-columns:1fr; gap: var(--space-6); align-items:center; }
@media (min-width:900px){ .postventa-grid{ grid-template-columns:1fr 1fr; } }
.postventa-media{ border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow-lg); }
.postventa-media img{ width:100%; height:100%; object-fit:cover; }
.postventa-list{ margin-top: var(--space-3); display:grid; gap: var(--space-3); }
.postventa-list li{ display:flex; gap:14px; align-items:flex-start; }
.postventa-list i{ color: var(--cta); font-size:1.3rem; margin-top:3px; }
.postventa-list strong{ display:block; color:#fff; }
.postventa-list span{ color: rgba(255,255,255,.82); font-size: var(--step--1); }