/* ============================================================
   ARCTIC LEOPARD ARGENTINA — Global Stylesheet
   Metodología: Client-First
   Tipografía: Inter (Google Fonts)
   Paleta: Blanco / Negro — sin accent colors
   Estética: Flat, cruda, performance-oriented
   ============================================================

   ÍNDICE
   ─────────────────────────────────────────────────────────────
   1.  Google Fonts Import
   2.  CSS Custom Properties (Design Tokens)
       2a. Colores
       2b. Tipografía
       2c. Espaciado
       2d. Bordes & Radios
       2e. Sombras
       2f. Transiciones
   3.  Reset & Base
   4.  Tipografía Global
       4a. Headings
       4b. Body & Párrafos
       4c. Links
       4d. Listas
   5.  Layout & Grid
       5a. Container
       5b. Grid System
       5c. Flexbox Utilities
   6.  Espaciado Utilities
   7.  Componentes
       7a. Botones
       7b. Formularios
       7c. Cards de Producto
       7d. Badges
       7e. Dividers
   8.  Secciones de Página
       8a. Topbar
       8b. Navbar
       8c. Hero
       8d. Footer
   9.  Utilidades Generales
   10. Animaciones
   11. Media Queries
   ──────────────────────────────────────────────────────────── */


/* ============================================================
   1. GOOGLE FONTS IMPORT
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');


/* ============================================================
   2. CSS CUSTOM PROPERTIES (DESIGN TOKENS)
   ============================================================ */

:root {

  /* ----------------------------------------------------------
     2a. COLORES
     Paleta 100% blanco/negro — fiel a la marca Arctic Leopard
  ---------------------------------------------------------- */

  /* Marca */
  --color-black:          #000000;
  --color-white:          #FFFFFF;

  /* Grises funcionales */
  --color-gray-50:        #F5F5F5;   /* Fondo secciones alternadas */
  --color-gray-100:       #EBEBEB;   /* Bordes suaves */
  --color-gray-200:       #D4D4D4;   /* Bordes inputs */
  --color-gray-400:       #9A9A9A;   /* Texto secundario / eyebrow */
  --color-gray-600:       #555555;   /* Texto muted */
  --color-gray-800:       #222222;   /* Texto body principal */
  --color-gray-900:       #111111;   /* Casi negro — headings */

  /* Semánticos */
  --color-bg:             var(--color-white);
  --color-bg-alt:         var(--color-gray-50);
  --color-bg-dark:        var(--color-black);
  --color-text:           var(--color-gray-800);
  --color-text-muted:     var(--color-gray-600);
  --color-text-subtle:    var(--color-gray-700);
  --color-text-inverse:   var(--color-white);
  --color-border:         var(--color-gray-100);
  --color-border-medium:  var(--color-gray-200);
  --color-border-inverse: rgba(255, 255, 255, 0.25);

  /* Estado */
  --color-success:        #22C55E;
  --color-error:          #EF4444;


  /* ----------------------------------------------------------
     2b. TIPOGRAFÍA
     Inter — todos los pesos de 100 a 900
  ---------------------------------------------------------- */

  --font-base:    'Inter', sans-serif;
  --font-display: 'Inter', sans-serif;
  --font-mono:    'Courier New', Courier, monospace;

  /* Escala — extraída del sitio original */
  --text-10:   0.625rem;    /* 10px — micro labels */
  --text-11:   0.6875rem;   /* 11px — eyebrow */
  --text-12:   0.75rem;     /* 12px — navbar, botones, badges */
  --text-13:   0.8125rem;   /* 13px — footer links */
  --text-14:   0.875rem;    /* 14px — body, card text */
  --text-15:   0.9375rem;   /* 15px — card titles */
  --text-16:   1rem;        /* 16px — base */
  --text-18:   1.125rem;    /* 18px */
  --text-20:   1.25rem;     /* 20px */
  --text-24:   1.5rem;      /* 24px */
  --text-28:   1.75rem;     /* 28px — "CHOOSE YOUR RIDE" */
  --text-32:   2rem;        /* 32px */
  --text-48:   3rem;        /* 48px — "BUILT TO RIDE HARDER" */

  /* Fluid — headings principales */
  --text-hero:  clamp(2.5rem, 6vw, 4.5rem);    /* "CHASE THE PODIUM" */
  --text-h1:    clamp(2rem, 4vw, 3rem);         /* "BUILT TO RIDE HARDER" */
  --text-h2:    clamp(1.5rem, 2.5vw, 1.75rem);  /* "CHOOSE YOUR RIDE" */
  --text-h3:    clamp(1rem, 1.5vw, 1.125rem);   /* Subtítulos de sección */

  /* Pesos — usados en el sitio */
  --font-regular:   400;   /* Body text */
  --font-medium:    500;   /* Navbar links */
  --font-semibold:  600;   /* Botones, labels */
  --font-bold:      700;   /* Card titles */
  --font-extrabold: 800;   /* Headings de sección */
  --font-black:     900;   /* Hero title, H1 principal */

  /* Line heights */
  --leading-none:    1;
  --leading-tight:   1.1;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.6;

  /* Letter spacing — crítico en esta marca */
  --tracking-tightest: -0.04em;   /* Hero title */
  --tracking-tighter:  -0.03em;   /* H1 "BUILT TO RIDE HARDER" */
  --tracking-tight:    -0.02em;   /* H2 */
  --tracking-normal:    0em;
  --tracking-wide:      0.05em;   /* Eyebrow labels */
  --tracking-wider:     0.08em;   /* Navbar links */
  --tracking-widest:    0.12em;   /* Botones, badges */
  --tracking-ultra:     0.15em;   /* "WHY ARCTIC LEOPARD" */


  /* ----------------------------------------------------------
     2c. ESPACIADO
     Base 4px. Extraído del layout del sitio.
  ---------------------------------------------------------- */

  --space-1:   0.25rem;    /*  4px */
  --space-2:   0.5rem;     /*  8px */
  --space-3:   0.75rem;    /* 12px */
  --space-4:   1rem;       /* 16px */
  --space-5:   1.25rem;    /* 20px */
  --space-6:   1.5rem;     /* 24px */
  --space-8:   2rem;       /* 32px */
  --space-10:  2.5rem;     /* 40px */
  --space-12:  3rem;       /* 48px */
  --space-16:  4rem;       /* 64px */
  --space-20:  5rem;       /* 80px */
  --space-24:  6rem;       /* 96px */
  --space-28:  7rem;       /* 112px */

  /* Secciones — fluid, extraído del original */
  --section-sm:   clamp(3rem, 5vw, 4rem);      /* ~48-64px */
  --section-md:   clamp(4rem, 7vw, 6rem);      /* ~64-96px */
  --section-lg:   clamp(5rem, 9vw, 8rem);      /* ~80-128px */

  /* Container */
  --container-max:     1200px;
  --container-padding: 1.5rem;   /* 24px mobile → 40px desktop */

  /* Navbar */
  --topbar-height:  36px;
  --navbar-height:  52px;   /* Navbar compacta, fiel al original */


  /* ----------------------------------------------------------
     2d. BORDES & RADIOS
     Estética flat — casi sin redondeo
  ---------------------------------------------------------- */

  --radius-none:   0;          /* Botones "View Model", cards */
  --radius-xs:     2px;        /* Botones hero (outline pill-ish) */
  --radius-sm:     4px;        /* Inputs */
  --radius-md:     6px;        /* Uso general mínimo */
  --radius-full:   9999px;     /* Solo para pills específicos */

  --border-sm:  1px;
  --border-md:  2px;


  /* ----------------------------------------------------------
     2e. SOMBRAS
     Muy planas — el sitio original no usa sombras decorativas
  ---------------------------------------------------------- */

  --shadow-none:  none;
  --shadow-xs:    0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-sm:    0 1px 4px rgba(0, 0, 0, 0.08);
  --shadow-card:  0 2px 8px rgba(0, 0, 0, 0.06);   /* Cards hover — sutil */


  /* ----------------------------------------------------------
     2f. TRANSICIONES
  ---------------------------------------------------------- */

  --ease-default:  cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:      cubic-bezier(0, 0, 0.2, 1);
  --ease-spring:   cubic-bezier(0.175, 0.885, 0.32, 1.275);

  --duration-fast:   120ms;
  --duration-base:   200ms;
  --duration-slow:   350ms;

  --transition-base:    all var(--duration-base) var(--ease-default);
  --transition-colors:  color var(--duration-base) var(--ease-default),
                        background-color var(--duration-base) var(--ease-default),
                        border-color var(--duration-base) var(--ease-default);
  --transition-opacity: opacity var(--duration-base) var(--ease-default);
}


/* ============================================================
   3. RESET & BASE
   ============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--font-base);
  font-size: var(--text-14);
  font-weight: var(--font-regular);
  line-height: var(--leading-relaxed);
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img,
video,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

picture { display: block; }

input, button, textarea, select { font: inherit; }

p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }

button { cursor: pointer; border: none; background: none; }

a { color: inherit; text-decoration: none; }

ul, ol { list-style: none; }

table { border-collapse: collapse; }

/* Foco accesible */
:focus-visible {
  outline: 2px solid var(--color-black);
  outline-offset: 3px;
}

/* Selección */
::selection {
  background-color: var(--color-black);
  color: var(--color-white);
}


/* ============================================================
   4. TIPOGRAFÍA GLOBAL
   ============================================================ */

/* ----------------------------------------------------------
   4a. HEADINGS
   Todos uppercase con letter-spacing ajustado — fiel al sitio
---------------------------------------------------------- */

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--text-h1);
  font-weight: var(--font-black);        /* 900 */
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tighter);
    color: var(--color-gray-900);
}

h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: var(--font-extrabold);    /* 800 */
  line-height: var(--leading-tight);

 
  color: var(--color-gray-900);
}

h3, .h3 {
  font-size: var(--text-15);
  font-weight: var(--font-bold);         /* 700 */
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-normal);

  color: var(--color-gray-900);
}

h4, .h4 {
  font-size: var(--text-14);
  font-weight: var(--font-semibold);
  line-height: var(--leading-snug);
}

h5, .h5,
h6, .h6 {
  font-size: var(--text-12);
  font-weight: var(--font-semibold);
  letter-spacing: var(--tracking-widest);
  
  color: var(--color-text-muted);
}

/* Hero heading — "CHASE THE PODIUM" */
.heading-hero {
  font-size: var(--text-hero);
  font-weight: var(--font-bold);        /* 900 */
  line-height: var(--leading-none);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-white);
}

/* Eyebrow — "WHY ARCTIC LEOPARD" */
.text-eyebrow {
  display: block;
  font-size: var(--text-14);
  font-weight: var(--font-regular);
  letter-spacing: var(--tracking-ultra);  /* 0.20em */
  text-transform: uppercase;
  color: var(--color-text-subtle);
  margin-bottom: var(--space-3);
}

/* Subtitle de sección — "Performance electric motos..." */
.text-subtitle {
  font-size: var(--text-14);
  font-weight: var(--font-regular);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  margin-top: var(--space-2);
}


/* ----------------------------------------------------------
   4b. BODY & PÁRRAFOS
---------------------------------------------------------- */

p {
  font-size: var(--text-14);
  line-height: var(--leading-relaxed);
  color: var(--color-text);
  max-width: 60ch;
}

.text-lead {
  font-size: var(--text-16);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
}

.text-sm   { font-size: var(--text-13); }
.text-xs   { font-size: var(--text-12); }
.text-tiny { font-size: var(--text-11); }


/* ----------------------------------------------------------
   4c. LINKS
---------------------------------------------------------- */

.link {
  color: var(--color-black);
  text-underline-offset: 3px;
  transition: var(--transition-colors);
}

.link:hover { opacity: 0.6; }

/* Underline animado */
.link-underline {
  position: relative;
  display: inline-block;
}

.link-underline::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 0;
  height: 1px;
  background-color: currentColor;
  transition: width var(--duration-base) var(--ease-out);
}

.link-underline:hover::after { width: 100%; }


/* ----------------------------------------------------------
   4d. Listas
---------------------------------------------------------- */

.list-styled {
  padding-left: 0;
}

.list-styled li {
  position: relative;
  padding-left: var(--space-4);
  margin-bottom: var(--space-2);
  font-size: var(--text-14);
  line-height: var(--leading-relaxed);
  color: var(--color-text);
}

.list-styled li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: var(--color-black);
  font-size: var(--text-12);
  line-height: 1.6;
}


/* ============================================================
   5. LAYOUT & GRID
   ============================================================ */

/* ----------------------------------------------------------
   5a. CONTAINER
   Max-width: 1200px — fiel al original
---------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

.container--sm   { max-width: 960px; }
.container--md   { max-width: 1440px; }
.container--wide { max-width: 1600px; }
.container--full { max-width: 100%; padding-inline: 0; }


/* ----------------------------------------------------------
   5b. GRID SYSTEM
---------------------------------------------------------- */

.grid {
  display: grid;
  gap: var(--space-5);   /* 20px — gap del sitio original */
}

.grid--1  { grid-template-columns: 1fr; }
.grid--2  { grid-template-columns: repeat(2, 1fr); }
.grid--3  { grid-template-columns: repeat(3, 1fr); }
.grid--4  { grid-template-columns: repeat(4, 1fr); }

/* Asimétricos — para la sección "Built to Ride Harder" */
.grid--1-2  { grid-template-columns: 1fr 2fr; }
.grid--2-1  { grid-template-columns: 2fr 1fr; }

/* Auto-fill responsive */
.grid--auto-sm  { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.grid--auto-md  { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.grid--auto-lg  { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }

/* Gap variants */
.gap-0   { gap: 0; }
.gap-2   { gap: var(--space-2); }
.gap-4   { gap: var(--space-4); }
.gap-5   { gap: var(--space-5); }
.gap-6   { gap: var(--space-6); }
.gap-8   { gap: var(--space-8); }
.gap-10  { gap: var(--space-10); }
.gap-12  { gap: var(--space-12); }


/* ----------------------------------------------------------
   5c. FLEXBOX UTILITIES
---------------------------------------------------------- */

.flex         { display: flex; }
.flex-col     { flex-direction: column; }
.flex-wrap    { flex-wrap: wrap; }
.flex-1       { flex: 1; }
.flex-none    { flex: none; }
.flex-shrink-0 { flex-shrink: 0; }

.items-start    { align-items: flex-start; }
.items-center   { align-items: center; }
.items-end      { align-items: flex-end; }
.items-stretch  { align-items: stretch; }

.justify-start    { justify-content: flex-start; }
.justify-center   { justify-content: center; }
.justify-end      { justify-content: flex-end; }
.justify-between  { justify-content: space-between; }

.flex-center  { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }


/* ============================================================
   6. ESPACIADO UTILITIES
   ============================================================ */

.p-0   { padding: 0; }
.p-4   { padding: var(--space-4); }
.p-6   { padding: var(--space-6); }
.p-8   { padding: var(--space-8); }

.py-4  { padding-block: var(--space-4); }
.py-6  { padding-block: var(--space-6); }
.py-8  { padding-block: var(--space-8); }
.py-12 { padding-block: var(--space-12); }
.py-16 { padding-block: var(--space-16); }
.py-20 { padding-block: var(--space-20); }

.px-4  { padding-inline: var(--space-4); }
.px-6  { padding-inline: var(--space-6); }
.px-8  { padding-inline: var(--space-8); }

.section-sm  { padding-block: var(--section-sm); }
.section-md  { padding-block: var(--section-md); }
.section-lg  { padding-block: var(--section-lg); }

.mt-2   { margin-top: var(--space-2); }
.mt-4   { margin-top: var(--space-4); }
.mt-6   { margin-top: var(--space-6); }
.mt-8   { margin-top: var(--space-8); }
.mt-12  { margin-top: var(--space-12); }
.mb-2   { margin-bottom: var(--space-2); }
.mb-4   { margin-bottom: var(--space-4); }
.mb-6   { margin-bottom: var(--space-6); }
.mb-8   { margin-bottom: var(--space-8); }
.mb-12  { margin-bottom: var(--space-12); }
.mx-auto { margin-inline: auto; }


/* ============================================================
   7. COMPONENTES
   ============================================================ */

/* ----------------------------------------------------------
   7a. BOTONES
   Sistema de 3 botones principales + variantes específicas:

   PRIMARIO   → .btn--primary   Negro sólido, radius 8px — "View Model"
   SECUNDARIO → .btn--secondary Borde negro, fondo blanco, radius 8px
   TERCIARIO  → .btn--tertiary  Sin fondo, sin borde, solo texto — ghost

   SLIDER     → .btn--slider    Blanco sólido, pill (~22px radius), sin borde
                                 Fondo blanco, texto negro — botones del hero
                                 XF / XE PRO S / XE PRO S ENDURO

   INVERSO    → .btn--inverse   Para fondos oscuros — borde blanco, texto blanco
---------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-base);
  font-size: var(--text-13);
  font-weight: var(--font-semibold);       /* 600 */
  letter-spacing: var(--tracking-normal);  /* 0 — sin tracking forzado */
  line-height: 1;
  cursor: pointer;
  transition: var(--transition-base);
  white-space: nowrap;
  text-decoration: none;
  border: 2px solid transparent;
  -webkit-user-select: none;
  user-select: none;
  will-change: transform;
  backface-visibility: hidden;
}
/* ── EFECTO LIFT (HOVER) ── */
@media (hover: hover) {
  .btn:hover {
    /* Se eleva sutilmente */
    transform: translateY(-3px); 
    
    /* Añadimos una sombra muy suave para enfatizar que se "despegó" del fondo */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
  }

  .btn:active {
    /* Efecto de "presión" al hacer clic */
    transform: translateY(-1px);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  }
}

.btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* ── PRIMARIO — negro sólido, radius 8px, full width en cards ── */
.btn--primary {
  background-color: var(--color-black);
  color: var(--color-white);
  border-color: var(--color-black);
  border-radius: 8px;
  padding: var(--space-4) var(--space-6);
  font-size: var(--text-14);
  font-weight: var(--font-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: none;
  width: 100%;                             /* Full width por defecto en cards */
}

.btn--primary:hover {
  background-color: var(--color-gray-900);
  border-color: var(--color-gray-900);
}

/* ── SECUNDARIO — borde negro, fondo blanco, radius 8px ── */
.btn--secondary {
  background-color: var(--color-white);
  color: var(--color-black);
  border-color: var(--color-black);
  border-radius: 8px;
  padding: var(--space-4) var(--space-6);
  font-size: var(--text-14);
  font-weight: var(--font-semibold);
  width: 100%;
}

.btn--secondary:hover {
  background-color: var(--color-black);
  color: var(--color-white);
}

/* ── TERCIARIO — sin fondo, sin borde, solo texto con underline ── */
.btn--tertiary {
  background-color: transparent;
  color: var(--color-black);
  border-color: transparent;
  border-radius: 0;
  padding: var(--space-2) 0;
  font-size: var(--text-13);
  font-weight: var(--font-medium);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(0, 0, 0, 0.3);
  width: auto;
}

.btn--tertiary:hover {
  text-decoration-color: var(--color-black);
  opacity: 0.7;
}

/* ── SLIDER (hero) — blanco sólido, pill, texto negro, NO uppercase ──
   Fiel al screenshot: fondo blanco, sin borde, border-radius ~22px
   "XF"  /  "XE PRO S"  /  "XE PRO S ENDURO"
---------------------------------------------------------- */
.btn--slider {
  background-color: var(--color-white);    /* Blanco sólido — no transparente */
  color: var(--color-black);
  border-color: transparent;
  border-radius: 22px;                     /* Pill generoso — fiel al print */
  padding: var(--space-3) var(--space-5);
  font-size: var(--text-13);
  font-weight: var(--font-semibold);       /* 600 */
  letter-spacing: var(--tracking-normal);  /* Sin tracking — fiel al original */
  text-transform: none;                    /* NO uppercase — corregido */
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
  width: auto;
}

.btn--slider:hover {
  background-color: var(--color-gray-50);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

/* ── INVERSO — para secciones sobre fondo oscuro / footer ── */
.btn--inverse {
  background-color: var(--color-white);
  color: var(--color-black);
  border-color: var(--color-white);
  border-radius: 8px;
  padding: var(--space-4) var(--space-6);
  font-size: var(--text-14);
  font-weight: var(--font-semibold);
}

.btn--inverse:hover {
  background-color: transparent;
  color: var(--color-white);
}

/* ── Modificadores de tamaño (aplican sobre cualquier variante) ── */
.btn--sm  { padding: var(--space-2) var(--space-4); font-size: var(--text-12); }
.btn--lg  { padding: var(--space-5) var(--space-8); font-size: var(--text-15); }
.btn--auto { width: auto; }   /* Cancela el width: 100% si hace falta */


/* ----------------------------------------------------------
   7b. FORMULARIOS
   Usado en footer (email subscription)
---------------------------------------------------------- */

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.form-label {
  font-size: var(--text-12);
  font-weight: var(--font-medium);
  letter-spacing: var(--tracking-wide);
  color: var(--color-text);
}

.form-input,
.form-textarea {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-base);
  font-size: var(--text-14);
  color: var(--color-text);
  background-color: var(--color-white);
  border: var(--border-sm) solid var(--color-border-medium);
  border-radius: var(--radius-sm);
  appearance: none;
  -webkit-appearance: none;
  transition: border-color var(--duration-fast) var(--ease-default);
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--color-gray-400);
  font-size: var(--text-13);
}

.form-input:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--color-black);
}

/* Email inline — estilo footer del sitio */
.form-inline {
  display: flex;
  align-items: stretch;
  gap: 0;
}

.form-inline .form-input {
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  border-right: none;
  flex: 1;
}

.form-inline .btn {
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  flex-shrink: 0;
}

.form-error  { font-size: var(--text-12); color: var(--color-error); }
.form-helper { font-size: var(--text-12); color: var(--color-text-muted); }


/* ----------------------------------------------------------
   7c. CARDS DE PRODUCTO
   Sin borde exterior. Imagen con radius arriba. Body gris claro.
   Fiel al screenshot: card XF / XE PRO S / XE PRO S ENDURO
---------------------------------------------------------- */

.product-card {
  display: flex;
  flex-direction: column;
  background-color: var(--color-gray-50);   /* #F5F5F5 — fondo gris claro */
  border: none;                              /* Sin borde — corregido */
  border-radius: var(--radius-none);
  overflow: hidden;
  transition: box-shadow var(--duration-base) var(--ease-default);
  padding: 30px;;
}

.product-card:hover {
  box-shadow: var(--shadow-card);
}

.product-card__image {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;

  border-radius: 12px;                       /* Radius grande solo en la imagen */
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.product-card__body {
  padding: var(--space-5) var(--space-5) var(--space-4);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.product-card__title {
  font-size: var(--text-20);               /* ~20-22px — fiel al screenshot */
  font-weight: var(--font-extrabold);      /* 800 */
  letter-spacing: var(--tracking-tight);  /* -0.02em */
  text-transform: none;                   /* NO uppercase — corregido */
  color: var(--color-gray-900);
  line-height: var(--leading-tight);
}

.product-card__desc {
  font-size: var(--text-15);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  flex: 1;
}

.product-card__footer {
  padding: 0 var(--space-5) var(--space-5);
}

/* Card de media/video — grid 3 columnas en el sitio */
.media-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-none);
  background-color: var(--color-gray-900);
  cursor: pointer;
}

.media-card__image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  transition: opacity var(--duration-slow) var(--ease-default);
}

.media-card:hover .media-card__image {
  opacity: 0.85;
}

.media-card__body {
  padding: var(--space-3) var(--space-4) var(--space-4);
  background-color: var(--color-white);
}

.media-card__title {
  font-size: var(--text-13);
  font-weight: var(--font-semibold);
  color: var(--color-gray-900);
  line-height: var(--leading-snug);
}

.media-card__source {
  font-size: var(--text-11);
  color: var(--color-text-subtle);
  margin-top: var(--space-1);
  letter-spacing: var(--tracking-wide);
}

/* Play button overlay */
.media-card__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -60%);
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  background-color: rgba(255, 255, 255, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--duration-base) var(--ease-spring),
              background-color var(--duration-fast) var(--ease-default);
}

.media-card:hover .media-card__play {
  transform: translate(-50%, -60%) scale(1.08);
}


/* ----------------------------------------------------------
   7d. BADGES
---------------------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-2);
  font-size: var(--text-10);
  font-weight: var(--font-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  line-height: 1.6;
  border-radius: var(--radius-none);
}

.badge--black   { background-color: var(--color-black); color: var(--color-white); }
.badge--white   { background-color: var(--color-white); color: var(--color-black); border: var(--border-sm) solid var(--color-border); }
.badge--new     { background-color: #D72B2B; color: var(--color-white); }   /* "NEW FOR 2026!" del sitio */


/* ----------------------------------------------------------
   7e. DIVIDERS
---------------------------------------------------------- */

.divider {
  border: none;
  border-top: var(--border-sm) solid var(--color-border);
  margin-block: 0;
}

.divider--dark    { border-color: rgba(255, 255, 255, 0.1); }
.divider--medium  { border-color: var(--color-gray-200); }


/* ============================================================
   8. SECCIONES DE PÁGINA
   ============================================================ */

/* ----------------------------------------------------------
   8a. TOPBAR
   Barra negra superior — "Become a Dealer" + social icons
---------------------------------------------------------- */

.topbar {
  width: 100%;
  height: var(--topbar-height);
  background-color: var(--color-black);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.topbar__inner {
  width: 100%;
  max-width: var(--container-max);
  padding-inline: var(--container-padding);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.topbar__social {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.topbar__social a {
  color: var(--color-white);
  opacity: 0.7;
  transition: opacity var(--duration-fast) var(--ease-default);
  display: flex;
  align-items: center;
}

.topbar__social a:hover { opacity: 1; }

.topbar__link {
  font-size: var(--text-12);
  font-weight: var(--font-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-white);
  opacity: 0.85;
  transition: opacity var(--duration-fast) var(--ease-default);
}

.topbar__link:hover { opacity: 1; }


/* ----------------------------------------------------------
   8b. NAVBAR
   Blanca, compacta (52px), logo centrado, hamburger izquierda
   Iconos (user, search, cart) a la derecha
---------------------------------------------------------- */

.navbar {
  width: 100% !important;
  /* min-height asegura que nunca sea menor a esto, e !important gana cualquier disputa */
  min-height: 110px !important; 
  height: auto !important; 
  
  background-color: var(--color-white);
  border-bottom: var(--border-sm) solid var(--color-border);
  display: flex;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 1000;
  
  /* Mantener los bordes redondeados que ya logramos */
  border-radius: 20px 20px 0 0;
  
  /* Espaciado interno para que respire */
  padding: 10px 40px !important;
  box-sizing: border-box;
}
/* Esto asegura que detrás de las esquinas redondeadas se vea NEGRO */
header, .topbar {
    background-color: var(--color-black);
}

/* O simplemente al body para probar */
body {
    background-color: #000; 
}

.navbar--scrolled {
  box-shadow: var(--shadow-sm);
}

.navbar__inner {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

.navbar__left {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

.navbar__logo {
  display: flex;
  align-items: center;
  justify-content: center;
}

.navbar__logo img {
  height: 28px;
  width: auto;
}

.navbar__right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-4);
}

/* Iconos de la derecha */
.navbar__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: var(--color-black);
  opacity: 0.85;
  transition: opacity var(--duration-fast) var(--ease-default);
}

.navbar__icon:hover { opacity: 1; }

/* Hamburger */
.navbar__toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 32px;
  height: 32px;
  cursor: pointer;
  border: none;
  background: none;
  padding: var(--space-1);
}

.navbar__toggle span {
  display: block;
  width: 20px;
  height: 1.5px;
  background-color: var(--color-black);
  border-radius: 0;
  transition: transform var(--duration-base) var(--ease-default),
              opacity var(--duration-fast) var(--ease-default);
}

.navbar__toggle.is-open span:nth-child(1) {
  transform: translateY(5.5px) rotate(45deg);
}
.navbar__toggle.is-open span:nth-child(2) {
  opacity: 0;
}
.navbar__toggle.is-open span:nth-child(3) {
  transform: translateY(-5.5px) rotate(-45deg);
}

/* Mobile nav overlay */
.navbar__mobile-menu {
  display: none;
  position: fixed;
  top: calc(var(--topbar-height) + var(--navbar-height));
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--color-white);
  z-index: 99;
  padding: var(--space-8) var(--container-padding);
  overflow-y: auto;
  flex-direction: column;
  gap: var(--space-1);
}

.navbar__mobile-menu.is-open {
  display: flex;
}

.navbar__mobile-link {
  font-size: var(--text-16);
  font-weight: var(--font-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-black);
  padding-block: var(--space-4);
  border-bottom: var(--border-sm) solid var(--color-border);
  transition: opacity var(--duration-fast) var(--ease-default);
}

.navbar__mobile-link:hover { opacity: 0.5; }

/* Offset del body cuando hay topbar + navbar */
.page-offset {
  padding-top: calc(var(--topbar-height) + var(--navbar-height));
}


/* ----------------------------------------------------------
   8c. HERO
   Imagen full-width, overlay oscuro, texto centrado abajo
   Botones de modelo en row
---------------------------------------------------------- */

.hero {
  position: relative;
  width: 100%;
  min-height: 75vh;
  display: flex;
  align-items: flex-end;    /* Texto pegado abajo — como el original */
  overflow: hidden;
  background-color: var(--color-black);
}

.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.75) 0%,
    rgba(0, 0, 0, 0.25) 50%,
    rgba(0, 0, 0, 0.1) 100%
  );
}

.hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: var(--space-12) var(--container-padding) var(--space-12);
  max-width: var(--container-max);
  margin-inline: auto;
}

.hero__subtitle {
  font-size: var(--text-12);
  font-weight: var(--font-medium);
  letter-spacing: var(--tracking-ultra);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: var(--space-2);
}

.hero__title {
  font-size: var(--text-hero);
  font-weight: var(--font-black);
  line-height: var(--leading-none);
  letter-spacing: var(--tracking-tightest);
  text-transform: uppercase;
  color: var(--color-white);
  margin-bottom: var(--space-6);
}

/* Row de botones de modelo */
.hero__models {
    display: flex;
    justify-content: center; /* Centra horizontalmente si están en línea */
    align-items: center;     /* Centra si están en columna */
    gap: 1rem;               /* Espacio entre botones */
    width: 100%;             /* Asegura que ocupe todo el ancho para poder centrar */
}


/* ----------------------------------------------------------
   8d. FOOTER
   Negro, logo izquierda, nav links, email signup a la derecha
---------------------------------------------------------- */

.footer {
  background-color: var(--color-black);
  color: var(--color-white);
  padding-block: var(--space-16) var(--space-8);
  border-top: var(--border-sm) solid rgba(255, 255, 255, 0.08);
}

.footer__inner {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

.footer__grid {
  display: grid;
  grid-template-columns: 180px 1fr 1fr 280px;
  gap: var(--space-12);
  padding-bottom: var(--space-12);
  border-bottom: var(--border-sm) solid rgba(255, 255, 255, 0.08);
  margin-bottom: var(--space-8);
  align-items: start;
}

.footer__logo img {
  height: 28px;
  width: auto;
  filter: brightness(0) invert(1);
  margin-bottom: var(--space-5);
}

.footer__social {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.footer__social a {
  color: var(--color-white);
  opacity: 0.6;
  transition: opacity var(--duration-fast) var(--ease-default);
  display: flex;
}

.footer__social a:hover { opacity: 1; }

.footer__nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.footer__link {
  font-size: var(--text-13);
  color: rgba(255, 255, 255, 0.65);
  letter-spacing: var(--tracking-normal);
  transition: color var(--duration-fast) var(--ease-default);
}

.footer__link:hover { color: var(--color-white); }

/* Sección email del footer */
.footer__signup-title {
  font-size: var(--text-24);
  font-weight: var(--font-black);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  color: var(--color-white);
  margin-bottom: var(--space-5);
  line-height: var(--leading-tight);
}

/* Footer bottom */
.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
}


.footer__email-link {
  font-size: var(--text-13);
  color: rgba(255, 255, 255, 0.5);
  transition: color var(--duration-fast) var(--ease-default);
}

.footer__email-link:hover { color: var(--color-white); }

.footer__copy {
  font-size: var(--text-12);
  color: rgba(255, 255, 255, 0.35);
  letter-spacing: var(--tracking-wide);
}

/* Trust badges — "Fast Reliable Shipping" / "Secure payment" */
.trust-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-16);
  padding-block: var(--space-6);
  border-top: var(--border-sm) solid var(--color-border);
  border-bottom: var(--border-sm) solid var(--color-border);
}

.trust-bar__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.trust-bar__icon {
  width: 20px;
  height: 20px;
  color: var(--color-black);
  flex-shrink: 0;
}

.trust-bar__text strong {
  display: block;
  font-size: var(--text-13);
  font-weight: var(--font-semibold);
  color: var(--color-gray-900);
}

.trust-bar__text span {
  font-size: var(--text-12);
  color: var(--color-text-muted);
}


/* ============================================================
   9. UTILIDADES GENERALES
   ============================================================ */

/* Visibilidad */
.hidden     { display: none; }
.invisible  { visibility: hidden; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border-width: 0;
}

/* Texto */
.text-left     { text-align: left; }
.text-center   { text-align: center; }
.text-right    { text-align: right; }
.text-uppercase { text-transform: uppercase; }
.text-muted    { color: var(--color-text-muted); }
.text-subtle   { color: var(--color-text-subtle); }
.text-white    { color: var(--color-white); }
.text-black    { color: var(--color-black); }
.truncate      { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.no-wrap       { white-space: nowrap; }

/* Font weights */
.font-regular  { font-weight: var(--font-regular); }
.font-medium   { font-weight: var(--font-medium); }
.font-semibold { font-weight: var(--font-semibold); }
.font-bold     { font-weight: var(--font-bold); }
.font-extrabold { font-weight: var(--font-extrabold); }
.font-black    { font-weight: var(--font-black); }

/* Backgrounds */
.bg-white    { background-color: var(--color-white); }
.bg-light    { background-color: var(--color-gray-50); }
.bg-black    { background-color: var(--color-black); }

/* Layout */
.relative  { position: relative; }
.absolute  { position: absolute; }
.overflow-hidden { overflow: hidden; }
.w-full    { width: 100%; }
.h-full    { height: 100%; }
.h-screen  { height: 100vh; }
.max-content { max-width: max-content; }

/* Aspect ratios */
.aspect-square    { aspect-ratio: 1 / 1; }
.aspect-video     { aspect-ratio: 16 / 9; }
.aspect-4-3       { aspect-ratio: 4 / 3; }

.object-cover    { object-fit: cover; }
.object-contain  { object-fit: contain; }

/* Bordes */
.border          { border: var(--border-sm) solid var(--color-border); }
.border-medium   { border: var(--border-sm) solid var(--color-border-medium); }
.border-black    { border: var(--border-sm) solid var(--color-black); }
.border-top      { border-top: var(--border-sm) solid var(--color-border); }
.border-bottom   { border-bottom: var(--border-sm) solid var(--color-border); }

/* Radius */
.rounded-none  { border-radius: var(--radius-none); }
.rounded-xs    { border-radius: var(--radius-xs); }
.rounded-sm    { border-radius: var(--radius-sm); }
.rounded-full  { border-radius: var(--radius-full); }


/* ============================================================
   10. ANIMACIONES
   ============================================================ */

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

.animate-fadeIn { animation: fadeIn var(--duration-slow) var(--ease-out) both; }
.animate-fadeUp { animation: fadeUp var(--duration-slow) var(--ease-out) both; }

.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }
.delay-400 { animation-delay: 400ms; }

.skeleton {
  background: linear-gradient(
    90deg,
    var(--color-gray-50) 25%,
    var(--color-gray-100) 50%,
    var(--color-gray-50) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ============================================================
   11. MEDIA QUERIES
   ============================================================ */

/* ——— Tablet: 768px ——— */
@media (max-width: 768px) {

  :root {
    --container-padding: 1.25rem;
    --topbar-height: 32px;
  }

  .grid--2,
  .grid--3,
  .grid--4,
  .grid--1-2,
  .grid--2-1 {
    grid-template-columns: 1fr;
  }

  .footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
  }

  .trust-bar {
    gap: var(--space-8);
    flex-wrap: wrap;
  }

  .hero {
    min-height: 60vh;
    align-items: flex-end;
  }
}


/* ——— Mobile: 640px ——— */
@media (max-width: 640px) {

  :root {
    --container-padding: 1rem;
    --topbar-height: 0px;   /* Ocultar topbar en mobile */
  }

  .topbar { display: none; }

  .grid--2,
  .grid--3,
  .grid--4 {
    grid-template-columns: 1fr;
  }

  .footer__grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  .hero__models {
    flex-direction: column;
    align-items: flex-start;
  }

  .hero__models .btn {
    width: auto;
  }

  .trust-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
    padding-inline: var(--container-padding);
  }
}


/* ——— Hover solo en dispositivos que lo soportan ——— */
@media (hover: hover) {

  .product-card:hover {
    box-shadow: var(--shadow-card);
  }
}


/* ——— Desktop ancho: 1440px+ ——— */
@media (min-width: 1440px) {

  :root {
    --container-padding: 2.5rem;
  }
}


/* ============================================================
   FIN DEL STYLESHEET
   ──────────────────────────────────────────────────────────
   Uso básico:
   <link rel="stylesheet" href="css/style.css">

   Tokens a revisar con el cliente:
   - --color-*        → paleta confirmada
   - --container-max  → si el layout cambia
   - --navbar-height  → si se agrega desktop nav
   ============================================================ */

   /* Swiper Custom Styles */
/* ----------------------------------------------------------
   8c. HERO (Ajustado para Slider)
---------------------------------------------------------- */

.hero {
  position: relative;
  width: 100%;
  height: 85vh; /* Altura obligatoria para que se vea el contenido */
  overflow: hidden;
  background-color: var(--color-black);
}

.hero-swiper {
  width: 100%;
  height: 100%;
}

.hero__bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1; /* Por encima del video */
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.7) 0%,
    rgba(0, 0, 0, 0) 60%
  );
}

.hero__content {
  position: absolute; /* Cambiado de relative a absolute */
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 5; /* Por encima del overlay */
  padding-bottom: 80px; /* Espacio para los puntos de abajo */
  pointer-events: none;
}

.hero__content .container, 
.hero__content .btn {
  pointer-events: auto; /* Permite clicks en botones */
}

/* Pagination visible sobre el video */
.swiper-pagination {
  z-index: 10 !important;
  bottom: 40px !important;
}
/* --- TOPBAR REFINADO --- */
.topbar {
    background-color: var(--color-black);
    height: var(--topbar-height);
    display: flex;
    align-items: center;
    z-index: 1100;
}
.topbar__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    color: var(--color-white);
}
.social-icon { color: white; display: flex; align-items: center; }

/* --- NAVBAR REFINADO (Logo Izquierda, Menú Derecha) --- */
.navbar {
    background-color: var(--color-white);
    height: var(--navbar-height);
    display: flex;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid var(--color-border);
}

.navbar__inner {
    display: flex;
    justify-content: space-between; /* Empuja logo a izq y menú a der */
    align-items: center;
    width: 100%;
}

.navbar__toggle { display: none; } /* Oculto en desktop */

.nav-desktop__list {
    display: flex;
    gap: var(--space-8); /* Más aire entre links */
    list-style: none;
}

.nav-link {
    font-size: var(--text-12);
    font-weight: var(--font-bold);
    letter-spacing: var(--tracking-widest);
    color: var(--color-black);
    text-transform: uppercase;
    padding: var(--space-2) 0;
}

/* --- MEGA MENU --- */
.has-megamenu { position: static; }
.megamenu {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: var(--color-white);
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-12) 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s var(--ease-out);
}
.has-megamenu:hover .megamenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.megamenu__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr) 2fr;
    gap: var(--space-8);
}
.megamenu__title {
    display: block;
    color: var(--color-gray-400);
    font-weight: var(--font-black);
    font-size: var(--text-12) !important;
    margin-bottom: var(--space-6);
    
}
.megamenu__title:hover {
    color: #e10114 !important; 
    /* Usamos !important por si hay alguna otra regla pisándolo */
}
.menu-prod {
    font-size: var(--text-12);
    font-weight: var(--font-black);
    color: var(--color-black);
    margin-bottom: var(--space-4);
    display: block;
}
.menu-prod:hover {
    color: var(--color-gray-400) !important; 
    /* Usamos !important por si hay alguna otra regla pisándolo */
}

.megamenu__featured { border-left: 1px solid var(--color-border); text-align: center; }
.featured__card img { max-height: 250px; object-fit: contain; }

/* Responsive Mobile */
@media (max-width: 768px) {
    .nav-desktop { display: none; }
    .navbar__toggle { display: flex; }
}
@media (max-width: 991px) {
    .navbar {
        height: 70px; /* Más petisa en mobile para que no ocupe media pantalla */
        padding: 0 20px;
    }

    .nav-desktop {
        display: none !important; /* ESCONDEMOS EL MEGA MENU EN MOBILE */
    }

    .navbar__toggle {
        display: flex !important; /* APARECE LA HAMBURGUESA */
        flex-direction: column;
        justify-content: space-between;
        width: 25px;
        height: 16px;
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 0;
    }

    .navbar__toggle span {
        width: 100%;
        height: 2px;
        background-color: var(--color-black);
    }
}
/* --- OVERLAY PRINCIPAL --- */
.mobile-menu {
    position: fixed;
    top: 0;
    right: -100%; /* Empieza totalmente escondido a la derecha */
    width: 100%;   /* Ocupa el ancho total para un diseño agresivo en mobile */
    height: 100vh; /* Altura total de la ventana */
    background: var(--color-white);
    z-index: 2000; /* Aseguramos que esté sobre todo */
    transition: right var(--duration-base) var(--ease-out);
    
    /* GESTIÓN DEL CONTENIDO LARGO: Scroll interno */
    overflow-y: auto; 
    -webkit-overflow-scrolling: touch; /* Scroll suave en iOS */
    padding-bottom: var(--space-20); /* Espacio al final */
}

/* Clase de activación gestionada por JS */
.mobile-menu.is-active {
    right: 0; /* Aparece en pantalla */
}

.mobile-menu__inner {
    padding-top: var(--space-20); /* Espacio para que el header no lo pise */
}

/* --- HEADER DEL MENÚ: Título y Cierre --- */
.mobile-menu__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: var(--space-6);
    margin-bottom: var(--space-12);
}

/* BOTÓN CERRAR: Técnico y minimalista */
.mobile-menu__close {
    position: relative;
    width: 24px;
    height: 24px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
}

.mobile-menu__close span {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--color-black);
    transition: transform var(--duration-fast);
}

/* Las dos líneas cruzadas para formar la X */
.mobile-menu__close span:first-child { transform: rotate(45deg); }
.mobile-menu__close span:last-child { transform: rotate(-45deg); }

/* Feedback sutil al hover/tap */
.mobile-menu__close:hover span {
    background-color: var(--color-gray-400);
}

/* --- CONTENIDO: Categorías y Modelos --- */
.mobile-menu__category {
    border-left: 1px solid var(--color-border);
    padding-left: var(--space-4);
}

.megamenu__title {
    display: block;
    color: var(--color-gray-400);
    font-size: var(--text-11);
    margin-bottom: var(--space-4);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
}

.mobile-menu__model-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-3); /* Espacio entre modelos para fácil tap */
}

/* Usamos la misma clase que en desktop (.menu-prod) para mantener la tipografía agresiva,
   pero con una modificación (--mobile) para ajustar el tamaño */
.menu-prod--mobile {
    font-size: var(--text-20) !important; /* Mismo tamaño que en desktop */
    font-weight: var(--font-black);
    color: var(--color-black);
    text-decoration: none;
}

/* --- DIVISOR Y ENLACES SECUNDARIOS --- */
.mobile-menu__divider {
    border: none;
    border-top: 1px solid var(--color-border);
}

.mobile-menu__list--secondary {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.mobile-menu__list--secondary a {
    font-size: var(--text-18);
    font-weight: var(--font-semibold);
    color: var(--color-black);
    text-decoration: none;
    text-transform: uppercase;
}
@media (max-width: 768px) {
    .hero__models {
        flex-direction: column; /* Los ponemos uno sobre otro como en tu imagen */
        margin-top: 2rem;       /* Espacio extra respecto al texto */
    }

    .hero__models .btn--slider {
        width: 120px;           /* Ancho fijo para que todos midan lo mismo y se vean parejos */
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left: auto;      /* Combinación mágica para centrar bloques */
        margin-right: auto;
    }
}
/* --- SECCIÓN WHY --- */
.why-section {
    padding: 80px 0;
    background-color: #ffffff;
    align-content: center;
}

.why-grid {
    display: flex;
    align-items: center; /* Centra verticalmente el texto con la imagen */
    gap: 60px; /* Espacio entre texto e imagen */
}
.why-text p.text-lead {
    padding-left: 0 !important;
    margin-left: 0 !important;
}

/* Columna de texto */
.why-text {
    flex: 1;
}

/* Columna de imagen */
.why-image {
    flex: 1;
}

.why-image img {
    width: 100%;
    height: auto;
    border-radius: 24px; /* El redondeado que venimos usando */
    display: block;
}

/* --- TIPOGRAFÍA --- */
.heading-h1 {
    font-size: 64px; /* Tamaño H1 imponente */
    font-weight: 700;
    line-height: 1;
    margin: 20px 0;
  }

.heading-h2 {
    font-size: 48px; /* Tamaño H2 */
    font-weight: 700;
    line-height: 1;
    margin: 20px 0;
  }
.text-lead {
    font-size: 18px; /* Tamaño Lead */
    line-height: 1.6;
    color: #4a4a4a;
    margin-bottom: 30px;
    font-weight: 400;
}

.why-list {
    list-style: none;
    padding: 0;
    font-size: 18px;
}

.why-list li {
    font-weight: 500;
    margin-bottom: 15px;
    padding-left: 20px;
    position: relative;
}

/* El puntito negro de la lista */
.why-list li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: #000;
}

/* --- RESPONSIVE MOBILE --- */
@media (max-width: 991px) {
    .why-grid {
        flex-direction: column; /* Se apilan en mobile */
        text-align: center;
    }
    
    .why-list li {
        padding-left: 0;
    }
    
    .why-list li::before {
        display: none;
    }
}
/* Borramos cualquier rastro de la franja negra */
.section-products {
    padding: 100px 0;
    background-color: #ffffff; /* Blanco puro */
    border: none !important;   /* Mata la franja negra */
    width: 100%;
}

.text-center {
    text-align: center;
}

.section-header {
    margin-bottom: 60px;
    padding-top: 100px;
}
.section-header {
    display: flex;
    flex-direction: column;
    align-items: center; /* Esto centra los bloques hijos */
    text-align: center;  /* Esto centra el texto adentro de los bloques */
}

/* Además, asegurate que el párrafo no sea gigante para que el centrado se note */
.text-lead {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}
/* Grilla centrada con Flexbox */
.products-grid {
    display: flex;           /* Activa el modo flexible */
    justify-content: center; /* CENTRA LAS CARDS HORIZONTALMENTE */
    align-items: stretch;    /* Hace que todas tengan el mismo alto */
    gap: 30px;               /* Espacio entre las fotos */
    max-width: 1440px;       /* Ancho máximo de la sección */
    margin: 0 auto;          /* CENTRA TODO EL GRUPO EN LA PANTALLA */
    padding: 0 20px;
}

/* Estilo de Card (Misma que arriba) */
.product-card {
    flex: 1;                 /* Hace que las 3 fotos midan lo mismo */
    max-width: 380px;        /* Evita que se estiren demasiado */
    display: flex;
    flex-direction: column;
    align-items: center;     /* CENTRA EL TEXTO Y EL BOTÓN INTERNO */
    text-align: center;      /* Centra el texto */
    background: #fff;
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid #f2f2f2;
}
.product-card__image img {
    width: 100%;
    height: auto;
    display: block;
}

.product-card:hover {
    transform: translateY(-10px);
}

.product-card__content {
    padding: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Reutilizamos tus tamaños de arriba */
.product-title {
    font-size: 24px;
    font-weight: 900;
    text-transform: uppercase;
    margin-bottom: 15px;
}

.product-description {
    font-size: 16px;
    color: #666;
    margin-bottom: 25px;
    line-height: 1.5;
}

.btn-view {
    display: block;
    width: 100%;
    background: #111;
    color: #fff;
    padding: 16px 0;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 700;
    text-transform: uppercase;
}

/* Responsive para que no se rompa */
@media (max-width: 991px) {
    .products-grid {
        flex-direction: column;
        align-items: center;
    }
}
/* Forzamos que TODO en el encabezado de productos sea centrado */
.section-products .container {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centra los hijos flex (header y grid) */
    text-align: center;
}

/* Específicamente para esa frase */
.section-products .text-lead {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: block; /* Asegura que ocupe el ancho para centrarse */
    max-width: 750px; /* Le damos un ancho máximo para que no sea una línea eterna y se lea mejor */
}

/* Por las dudas, revisamos el grid de abajo también */
.products-grid {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-top: 50px;
}
.reviews-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    width: 100%;
    padding-bottom: 150px;
    border-bottom-left-radius:  25px;
}

.video-card {
    cursor: pointer;
    background: #000;
    border-radius: 16px;
    overflow: hidden;
    text-align: left;
    transition: transform 0.3s ease;
}

.video-card:hover {
    transform: scale(1.02);
}

.video-card__thumb {
    position: relative;
    aspect-ratio: 16 / 9;
}

.video-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
}

/* Botón Play central */
.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.play-button::after {
    content: '';
    border-style: solid;
    border-width: 10px 0 10px 15px;
    border-color: transparent transparent transparent black;
    margin-left: 4px;
}

.video-card__info {
    padding: 20px;
    color: white;
}

.video-card__info h3 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 8px;
    line-height: 1.4;
     color: #ffffff;
}

.video-card__info p {
    font-size: 12px;
    color: #888;
}

/* --- ESTILOS DEL POP-UP (MODAL) --- */
.video-modal {
    display: none;
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.9);
    align-items: center;
    justify-content: center;
}

.video-modal__content {
    width: 90%;
    max-width: 1000px;
    position: relative;
}

.video-modal__close {
    position: absolute;
    top: -40px;
    right: 0;
    color: white;
    font-size: 40px;
    cursor: pointer;
}

.video-responsive {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
}

.video-responsive iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
/* --- FOOTER BASE --- */
.footer {
    background-color: #000000;
    padding-top: 80px;
    padding-bottom: 40px;
}

.footer__main-grid {
    display: grid;
    grid-template-columns: 1.2fr 1.5fr 0.5fr;
    gap: 40px;
    align-items: start;
}

/* --- CONTACTO & MAIL --- */
.footer__mail-link {
    display: inline-block;
    color: #ffffff;
    text-decoration: none;
    font-size: 14px; /* Tamaño discreto */
    font-weight: 600;
    text-transform: uppercase;
    padding-bottom: 4px;
    transition: all 0.3s ease;
}

/* HOVER DEL MAIL */
.footer__mail-link:hover {
    color: #ff0000; /* Rojo Arctic para el hover */
    border-color: #ff0000;
}

.footer__social-wrapper {
    margin-top: 25px;
}

/* BOTÓN INSTAGRAM DISCRETO */
.btn-instagram {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #333;
    padding: 8px 16px;
    border-radius: 4px;
    text-decoration: none;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
}

.btn-instagram:hover {
    border-color: #ffffff;
    background: transparent;
}

.icon-ig {
    width: 14px;
    height: 14px;
}

/* --- NAVEGACIÓN --- */
.footer__nav-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.footer__label {
    display: block;
    font-size: 10px;
    font-weight: 600;
    color: #666;
    letter-spacing: 1.5px;
    margin-bottom: 20px;
}

.footer__list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer__list li {
    margin-bottom: 8px;
}

.footer__list a {
    color: #ffffff;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    transition: opacity 0.2s;
}

.footer__list a:hover {
    opacity: 0.6;
}

/* --- ISO --- */
.footer__logo-block {
    display: flex;
    justify-content: flex-end;
}

.footer__iso {
    width: 70px; /* Tamaño ajustado */
    height: auto;
}

/* --- LEGAL BOTTOM --- */
.footer__bottom {
    margin-top: 60px;
    padding-top: 20px;
    border-top: 1px solid #1a1a1a;
}

.footer__bottom p {
    font-size: 12px;
    color: #848484; /* Gris oscuro para discreción */
    letter-spacing: 0.2px;
}

/* --- RESPONSIVE --- */
@media (max-width: 1024px) {
    .footer__main-grid {
        grid-template-columns: 1fr 1fr;
    }
    .footer__logo-block {
        grid-column: span 2;
        justify-content: flex-start;
        margin-top: 30px;
    }
}

@media (max-width: 768px) {
    .footer__main-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }
    .footer__nav-columns {
        grid-template-columns: 1fr;
    }
    .footer__mail-link {
        font-size: 20px;
    }
}
/* --- LAYOUT GRILLA --- */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 80px;
    align-items: start;
}

/* --- INFO DE CONTACTO (Izquierda) --- */
.info-item {
    display: flex;
    gap: 20px;
    margin-bottom: 32px;
    align-items: flex-start;
}

.info-icon {
    background-color: var(--color-black);
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    flex-shrink: 0;
}

.info-icon img {
    width: 45px;
    height: 45px;
   
}

.info-content .text-eyebrow {
    display: block;
    font-weight: 900;
    margin-bottom: 4px;
}

.info-content a {
    color: #007bff; /* Color link estándar o podés usar var(--color-black) subrayado */
    text-decoration: none;
    display: block;
}

/* --- FORMULARIO (Derecha) --- */
.contact-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.form-input {
    width: 100%;
    padding: 18px 24px;
    background-color: var(--color-gray-50);
    border: 1px solid var(--color-gray-100);
    border-radius: 12px;
    font-family: inherit;
    font-size: 14px;
    color: var(--color-gray-900);
    transition: all 0.3s ease;
    outline: none;
}

.form-input:focus {
    border-color: var(--color-gray-200);
    background-color: var(--color-white);
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

/* Ajuste específico para el Select */
.form-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 5 3 3 3-3'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 24px center;
    cursor: pointer;
}

/* Estilo del botón (Reutilizando tu clase) */
.btn--primary.w-full {
    width: 100%;
    padding: 20px;
    cursor: pointer;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 1px;
}

/* --- RESPONSIVE --- */
@media (max-width: 1024px) {
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 60px;
    }
    
    .contact-info {
        text-align: center;
    }
    
    .info-item {
        justify-content: center;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}
/* Aplicamos el espacio solo abajo para despegarlo del footer */
.contact-section {
    padding-bottom: 100px !important;
    padding-top: 100px !important;
    background-color: #fafafa;
}

/* Si querés que el botón ENVIAR también tenga un margen inferior respecto al borde gris */
.contact-form {
    margin-bottom: 20px;
}
html {
    scroll-behavior: smooth;
    scroll-padding-top: 100px; 
}
.whatsapp-raw {
    position: fixed;
    bottom: 30px;
    left: 30px;
    z-index: 99999;
    width: 40px;  /* Ajustá el tamaño si lo querés más grande o chico */
    height: auto;
    display: block;
}

.whatsapp-raw img {
    width: 100%;
    height: auto;
    display: block;
}
.scroll-top-raw {
    position: fixed;
    bottom: 30px;              /* Misma altura que WhatsApp */
    right: 30px;               /* En el extremo opuesto para equilibrar */
    z-index: 99999;
    width: 32px;               /* Un tamaño sutil */
    height: 32px;
    color: var(--color-black);  /* O var(--color-white) si tu fondo general es oscuro */
    display: block;
    transition: transform var(--duration-fast) var(--ease-default);
}

.scroll-top-raw svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Efecto hover minimalista consistente con tu diseño */
@media (hover: hover) {
    .scroll-top-raw:hover {
        transform: translateY(-4px);
    }
}
/* ============================================================
   LAYOUT ASIMÉTRICO: Ficha de Producto Galería Sticky (Corregido)
   ============================================================ */

/* Cambiamos la proporción: 60% para la imagen, el resto para el texto */
.section-product-detail .grid--1-2 {
    grid-template-columns: 1.6fr 1fr !important; /* La galería ahora es mucho más ancha */
    gap: var(--space-12) !important;            /* Más aire de separación (48px) */
    align-items: start;
}

.product-gallery-wrapper {
    position: sticky;
    top: 130px; /* navbar-height (~110px) + aire */
    display: grid;
    grid-template-columns: 65px 1fr; /* Los thumbs un poco más compactos */
    gap: var(--space-4);
    z-index: 10;
}

.product-gallery-thumbnails {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.thumb-btn {
    border: 1px solid var(--color-gray-100);
    border-radius: 8px; /* Redondeado sutil para los thumbs */
    overflow: hidden;
    background: transparent;
    padding: 0;
    cursor: pointer;
    transition: border-color var(--duration-fast);
    aspect-ratio: 1 / 1;
}

.thumb-btn img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.thumb-btn.active,
.thumb-btn:hover {
    border-color: var(--color-black);
}

/* La foto principal ahora domina la pantalla */
.product-gallery-main {
    background-color: var(--color-white);
    overflow: hidden;
}

.product-gallery-main img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
}

/* Columna de texto estilizada y estrecha */
.product-info-scroller {
    width: 100%;
    padding-left: var(--space-4);
}

/* Ajustamos tus fuentes internas para que la columna estrecha se lea impecable */
.product-info-scroller .heading-h1 {
    font-size: var(--text-32) !important; /* Reducimos un toque el tamaño del título del modelo para que no rompa en mil líneas */
    margin-bottom: var(--space-2);
}

.product-info-scroller p {
    max-width: 100%; /* Que ocupe todo el ancho de su nueva columna estrecha */
    font-size: var(--text-14);
    color: var(--color-text-muted);
}

/* Ajuste responsive: En mobile vuelve a ser una sola columna */
@media (max-width: 991px) {
    .section-product-detail .grid--1-2 {
        grid-template-columns: 1fr !important;
        gap: var(--space-6) !important;
    }

    .product-gallery-wrapper {
        position: relative;
        top: 0;
        grid-template-columns: 1fr;
        display: flex;
        flex-direction: column-reverse;
        margin-bottom: var(--space-6);
    }
    
    .product-gallery-thumbnails {
        flex-direction: row;
        justify-content: center;
    }
    
    .product-gallery-thumbnails .thumb-btn {
        width: 50px;
        height: 50px;
    }
}
/* ============================================================
   COMPONENTES EXTRAS: Acordeón Técnico Minimalista
   ============================================================ */


/* El último elemento cierra la grilla con una línea abajo */
.accordion-item:last-child {
    border-bottom: var(--border-sm) solid var(--color-border-medium);
}



/* El contenido empieza cerrado de manera nativa */

/* Clase dinámica aplicada por JS */
.accordion-item.is-open .accordion-content {
    max-height: 600px; /* Un alto de sobra para que entren todos los bullets */
    opacity: 1;
    padding-bottom: var(--space-8);
}

/* Ajuste específico para que las listas no queden pegadas al bullet original */
.accordion-content .list-styled {
    padding-left: var(--space-5);
}

.accordion-content .list-styled li {
    color: var(--color-text-muted);
    margin-bottom: var(--space-3);
}
/* ============================================================
   SECCIÓN: Grilla de Videos Dinámica (9:16) - Corregido
   ============================================================ */

.media-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columnas limpias por fila */
    gap: var(--space-4); /* Mantiene tu gap nativo */
}

.media-card {
    position: relative;
    width: 100%;
    max-height: 90vh; /* Subido a 90% del alto de la pantalla */
    aspect-ratio: 9 / 16;
    border-radius: 16px; /* Bordes redondeados aplicados */
    overflow: hidden; /* Clave para que el video no rompa el redondeado con el zoom */
    background-color: var(--color-black);
}

.media-card video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Recorta hacia el centro sin deformar la moto */
    display: block;
    transition: transform var(--duration-base) var(--ease-default);
}

/* Efecto de acercamiento al pasar el mouse */
@media (hover: hover) {
    .media-card:hover video {
        transform: scale(1.04);
    }
}

/* RESPONSIVE: Adaptación flexible según la pantalla */

/* Tablets en horizontal / Notebooks chicas */
@media (max-width: 1024px) {
    .media-grid {
        grid-template-columns: repeat(2, 1fr); /* Pasa a 2 columnas */
        gap: var(--space-3);
    }
    .media-card {
        max-height: 80vh; /* Se ajusta un poco el alto en pantallas medianas */
    }
}

/* Mobile (Celulares) */
@media (max-width: 640px) {
    .media-grid {
        grid-template-columns: 1fr; /* 1 columna vertical como en el celular */
        gap: var(--space-4);
    }
    .media-card {
        max-height: 85vh; /* Se estira para dar la sensación full screen en mobile */
        border-radius: 12px; /* Redondeado un toque más sutil en pantallas chicas */
    }
}
/* ============================================================
   INTERACTIVO: Acordeón Vertical Deslizante (Sliding Panels)
   ============================================================ */

.xe-sliding-container {
    display: flex !important; /* Forzamos flexbox sobre cualquier conflicto */
    flex-direction: row !important;
    width: 100% !important;
    height: 80vh !important; 
    gap: var(--space-3) !important;
    overflow: hidden !important;
}

.xe-panel {
    position: relative !important;
    flex: 1 1 0% !important; /* Base elástica idéntica para repartir los anchos */
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    border-radius: 16px !important; /* Sincronizado con tus videos */
    padding: var(--space-8) !important;
    overflow: hidden !important;
    cursor: pointer !important;
    transition: flex var(--duration-slow) var(--ease-default) !important;
}

/* Oscurecimiento para asegurar legibilidad */
.xe-panel__overlay {
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.5) 100%) !important;
    z-index: 1 !important;
    transition: background var(--duration-base) var(--ease-default) !important;
}

.xe-panel__content {
    position: relative !important;
    z-index: 2 !important;
    height: 100% !important;
}

/* --- JERARQUÍAS TIPOGRÁFICAS PREMIUM EN BLANCO --- */

.xe-panel__title {
    font-family: var(--font-display) !important;
    font-size: var(--text-48) !important;      /* Título imponente de 48px */
    font-weight: var(--font-black) !important;  /* Peso 900 absoluto de tu marca */
    line-height: var(--leading-none) !important; 
    letter-spacing: var(--tracking-tighter) !important; /* Tracking cerrado agresivo */
    color: var(--color-white) !important;       
    margin-top: var(--space-2) !important;
}

.xe-panel__subtitle {
    font-family: var(--font-display) !important;
    font-size: var(--text-18) !important;       /* Despegado a 18px */
    font-weight: var(--font-black) !important;   /* Bajada con cuerpo pesado 900 */
    text-transform: uppercase !important;       /* Forzado a mayúsculas consistentes */
    color: var(--color-white) !important;
    letter-spacing: var(--tracking-tight) !important;
    margin-top: var(--space-3) !important;
    opacity: 0.95 !important;
}

/* Forzamos estilos de listas y viñetas */
.xe-panel .list-styled li::before,
.xe-panel .list-styled li {
    color: var(--color-white) !important;
}

/* El bloque interno nace oculto */
.xe-panel__details {
    max-height: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
    transition: opacity var(--duration-fast) var(--ease-default), 
                max-height var(--duration-slow) var(--ease-default) !important;
}

.xe-panel__details h4 {
    color: var(--color-white) !important;
    font-weight: var(--font-black) !important; /* Títulos internos en 900 */
    letter-spacing: var(--tracking-wider) !important;
    text-transform: uppercase !important;
    margin-bottom: var(--space-3) !important;
}


.xe-panel__details > p.text-white.mb-6 {
    font-size: 18px !important; /* <--- Cambiá el 18px por el tamaño que quieras (ej: 20px, 22px) */
    line-height: 1.6 !important; /* Ajusta el espacio entre líneas para que se lea cómodo */
}

/* ── COMPORTAMIENTO INTERACTIVO HOVER DESKTOP ── */
@media (min-width: 992px) {
    .xe-panel:hover {
        flex: 3.8 1 0% !important; /* Gran expansión elástica horizontal */
    }

    .xe-panel:hover .xe-panel__details {
        max-height: calc(100vh - 250px) !important; /* Altura dinámica adaptativa */
        opacity: 1 !important;
        overflow-y: auto !important; /* Scroll quirúrgico si se queda sin espacio alto */
        padding-right: var(--space-2);
    }

    /* Scrollbar minimalista imperceptible */
    .xe-panel__details::-webkit-scrollbar {
        width: 4px;
    }
    .xe-panel__details::-webkit-scrollbar-track {
        background: transparent;
    }
    .xe-panel__details::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.2);
        border-radius: 2px;
    }

    .xe-panel:hover .xe-panel__overlay {
        background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.1) 60%, rgba(0,0,0,0.3) 100%) !important;
    }
}

/* ── MODOS RESPONSIVE (FLUJO ADAPTATIVO EN CELULARES) ── */
@media (max-width: 991px) {
    .xe-sliding-container {
        flex-direction: column !important;
        height: auto !important;
        gap: var(--space-4) !important;
    }

    .xe-panel {
        flex: none !important;
        width: 100% !important;
        height: auto !important;
        min-height: 400px !important;
    }

    .xe-panel__details {
        max-height: none !important;
        opacity: 1 !important;
        margin-top: var(--space-4) !important;
    }
}
/* ============================================================
   SECCIÓN: Tabla Comparativa Vertical Plana (Ancho Óptimo)
   ============================================================ */

.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table-xe-compare {
    border-collapse: collapse;
    width: 100%;
    margin-inline: auto; /* Centra la tabla perfectamente */
}

/* Columna izquierda de categorías */
.table-xe-compare__label-col {
    width: 200px;
}

/* Cabeceras de la tabla con tamaño calibrado a 24px */
.table-xe-compare th {
    font-family: var(--font-display) !important;
    font-size: var(--text-24) !important;       /* Bajado a 24px para equilibrar el contenedor sm */
    font-weight: var(--font-black) !important;  /* Peso 900 de la marca */
    line-height: var(--leading-none) !important;
    letter-spacing: var(--tracking-tight) !important; 
    color: var(--color-black) !important;
    text-transform: none !important;            /* Respetamos minúsculas / tipo oración */
    padding: var(--space-5) var(--space-3);
    border-bottom: var(--border-md) solid var(--color-black); 
    text-align: center;
}

/* Celdas comunes de datos */
.table-xe-compare td {
    font-size: var(--text-14); /* Un toque más compacto (14px) para lectura rápida */
    line-height: var(--leading-relaxed);
    padding: var(--space-5) var(--space-3);
    border-bottom: var(--border-sm) solid var(--color-border-medium); 
    text-align: center;
    vertical-align: middle;
}

/* Estilo para los títulos de las filas (Columna Izquierda) */
.table-xe-compare .table-xe-compare__feature-title {
    font-size: var(--text-11);
    font-weight: var(--font-black); 
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase; 
    color: var(--color-gray-400);
    text-align: left; 
    padding-left: var(--space-1);
}

/* Hover sutil de fila */
@media (hover: hover) {
    .table-xe-compare tbody tr:hover {
        background-color: var(--color-gray-50);
        transition: background-color var(--duration-fast) var(--ease-default);
    }
}

/* Responsive para mobile */
@media (max-width: 768px) {
    .table-xe-compare th {
        font-size: var(--text-18) !important;
        padding: var(--space-4) var(--space-2);
    }
    .table-xe-compare td {
        font-size: var(--text-13);
        padding: var(--space-4) var(--space-2);
    }
    .table-xe-compare__label-col {
        width: 110px;
    }
}
/* ============================================================
   SECCIÓN: Manifiesto Tríptico con Fotos de Producto (Corregido)
   ============================================================ */

.section-manifesto {
    position: relative;
}

.section-manifesto.border-top {
    border-top: var(--border-sm) solid var(--color-border-medium); /* */
}

/* Fila elástica controlada */
.manifesto-row {
    display: flex;
    flex-wrap: wrap;
    margin-inline: -15px;
}

/* Columna base (Celular) */
.manifesto-col {
    width: 100%;
    padding-inline: 15px;
}

/* ── LA MAGIA PARA EL IPAD Y DESKTOP ── 
   Desde 768px en adelante forzamos que se queden en 3 columnas perfectas en la misma fila */
@media (min-width: 768px) {
    .manifesto-row {
        flex-wrap: nowrap !important; /* Impide que la tercera moto baje en tablets */
    }
    .manifesto-col {
        flex: 1 1 33.333333% !important;
        max-width: 33.333333% !important;
    }
}

.manifesto-item {
    padding: var(--space-6) var(--space-4); /* */
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
}

.manifesto-item__image-wrap {
    width: 100%;
    max-width: 320px;
    margin-bottom: var(--space-6); /* */
    display: flex;
    justify-content: center;
    align-items: center;
}

.manifesto-item__img {
    width: 100%;
    height: auto;
    object-fit: contain;
    transition: transform var(--duration-base) var(--ease-default); /* */
}

@media (hover: hover) {
    .manifesto-item:hover .manifesto-item__img {
        transform: translateY(-8px) scale(1.02);
    }
}

/* Nombre de la moto en MAYÚSCULAS firmes */
.manifesto-item__badge {
    font-family: var(--font-display) !important; /* */
    font-size: var(--text-24) !important;       /* */
    font-weight: var(--font-black) !important;  /* */
    letter-spacing: var(--tracking-tighter) !important; /* */
    color: var(--color-black) !important; /* */
    text-transform: uppercase !important;       /* Forzado estricto */
    margin-top: 0 !important;
    margin-bottom: var(--space-3) !important; /* */
}

.manifesto-item__text {
    font-size: var(--text-15) !important; /* */
    line-height: var(--leading-relaxed) !important; /* */
    max-width: 260px;
    margin: 0 auto !important;
}

.manifesto-footer-title {
    font-family: var(--font-display) !important; /* */
    font-size: var(--text-32) !important;       /* */
    font-weight: var(--font-black) !important;  /* */
    letter-spacing: var(--tracking-tighter) !important; /* */
    color: var(--color-black); /* */
    text-transform: none !important;            /* Tipo oración */
    margin: 0 !important;
}

/* Ajustes finos para celulares */
@media (max-width: 767px) {
    .manifesto-item__image-wrap {
        max-width: 240px;
        margin-bottom: var(--space-4); /* */
    }
    .manifesto-footer-title {
        font-size: var(--text-24) !important; /* */
    }
}
.product-price {
    /* Escalamos el tamaño para que sea imponente (aprox 32px-36px) */
    font-size: 2.2rem !important; 
    
    /* Aplicamos el color verde vibrante exacto de tu captura */
    color: #4CAF50 !important; 
    
    /* Forzamos a que se ubique en su propia línea abajo del título, como en el print */
    display: block !important; 
    
    /* Un pequeño margen arriba para separarlo del nombre del modelo */
    margin-top: 8px !important; 
    
    /* Mantenemos el peso tipográfico bien marcado */
    font-weight: 700 !important;
}
/* Contenedor y Botones de pestañas */
.tabs-container {
    display: flex;
    gap: 10px;
}

.tab-btn {
    background-color: #f5f5f5;
    color: #333;
    border: 1px solid #e0e0e0;
    padding: 8px 18px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tab-btn:hover {
    background-color: #e8e8e8;
}

/* OPCIÓN ACTIVE: El tono verde clarito translúcido que matchea con tu precio */
.tab-btn.active {
    background-color: rgba(76, 175, 80, 0.15) !important; /* Verde clarito de fondo */
    color: #4CAF50 !important;                            /* Texto en tu verde del precio */
    border-color: #4CAF50 !important;                      /* Borde verde */
}
/* ==========================================================================
   COMPONENTE: PESTAÑAS DE ESPECIFICACIONES CON JERARQUÍA Y ALINEADO ESTRICTO
   ========================================================================== */

/* Contenedor principal: Agregamos el padding superior solicitado */
.specs-tabs-wrapper {
    width: 100%;
    margin-top: 32px;         /* Espacio superior para despegarlo del título principal */
}

/* 1. TABS DE MODELOS (Nivel Superior) - Más imponentes e importantes */
.specs-tabs-wrapper .tabs-container {
    display: flex;
    justify-content: flex-start;  /* Alineado puro a la izquierda */
    gap: 12px;
    margin-bottom: 24px;
}

.tab-model-btn {
    background-color: #f5f5f5;
    color: #222222;
    border: 1px solid #e0e0e0;
    padding: 12px 26px;       /* Le damos más cuerpo y presencia física */
    border-radius: 26px;
    font-size: 16px;          /* Incrementamos el tamaño para denotar el menú principal */
    font-weight: 700;         /* Negrita de alto impacto */
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

/* 2. TABS DE CATEGORÍAS (Nivel Inferior) - Secundarios y más compactos */
.tabs-categories {
    display: flex;
    flex-wrap: wrap;          /* Flexibilidad garantizada para mobile */
    justify-content: flex-start; /* Alineado puro a la izquierda */
    gap: 8px;
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 20px;
    margin-bottom: 24px;
}

.tab-cat-btn {
    background-color: #f5f5f5;
    color: #555555;
    border: 1px solid #e0e0e0;
    padding: 6px 14px;        /* Mantiene el tamaño compacto */
    border-radius: 20px;
    font-size: 13px;          /* Letra visible pero secundaria */
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

/* Hover general para los botones */
.tab-model-btn:hover, .tab-cat-btn:hover {
    background-color: #e8e8e8;
}

/* --- COLORES DE ESTADO ACTIVO (VERDE) --- */

/* MODELOS: Verde pleno y sólido */
.tab-model-btn.active {
    background-color: #4CAF50 !important;
    color: #ffffff !important;
    border-color: #4CAF50 !important;
}

/* CATEGORÍAS: Verde suave y translúcido */
.tab-cat-btn.active {
    background-color: rgba(76, 175, 80, 0.15) !important;
    color: #4CAF50 !important;
    border-color: rgba(76, 175, 80, 0.4) !important;
}

/* --- CONTENIDO INFERIOR: ALINEADO A LA IZQUIERDA ABSOLUTO --- */
.specs-content-box {
    margin-top: 20px;
    text-align: left !important;  /* Forzado estricto a la izquierda */
}

/* Forzamos a que todo lo que esté adentro (listas, textos, párrafos) se alinee a la izquierda */
.specs-content-box * {
    text-align: left !important;
}

.specs-content-box .list-styled {
    list-style: none;
    padding: 0;
    margin: 0;
}

.specs-content-box .list-styled li {
    margin-bottom: 8px;
    font-size: 15px;
}

/* Corrección del párrafo de garantía (para que no se centre nunca más) */
.specs-content-box .text-lead {
    font-size: 15px;
    margin: 0;
    padding: 0;
}

/* --- VISIBILIDAD (PERSISTE SCRIPT JS) --- */
.model-spec-panel {
    display: none;
    width: 100%;
}
.model-spec-panel.active {
    display: block;
}

.cat-content {
    display: none;
    animation: fadeInSpecs 0.25s ease-in-out;
}
.cat-content.active {
    display: block;
}

@keyframes fadeInSpecs {
    from { opacity: 0; transform: translateY(2px); }
    to { opacity: 1; transform: translateY(0); }
}
.contacto__titulo {
    font-size: 48px; /* Probá con 24px o 28px, que es un tamaño ideal y prolijo */
    font-weight: 700; /* Esto lo mantiene en negrita */
}

/* ============================================================
   PARCHE DEFINITIVO: FUERZA GALERÍA RESPONSIVE EN MOBILE
   ============================================================ */

@media (max-width: 991px) {
    /* 1. Forzamos que el contenedor de la galería use Flexbox en vertical y no Grid */
    .product-gallery-wrapper {
        display: flex !important;
        flex-direction: column !important; /* Foto grande arriba, miniaturas abajo */
        grid-template-columns: none !important; /* Destruye las dos columnas de escritorio */
        width: 100% !important;
        max-width: 100% !important;
        position: relative !important;
        top: 0 !important;
        margin-bottom: var(--space-6) !important;
        gap: 16px !important;
    }

    /* 2. Forzamos a la imagen principal a quedarse dentro del ancho de la pantalla */
    .product-gallery-main {
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        overflow: hidden !important;
    }

    .product-gallery-main img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: 40vh !important; /* Evita que la moto ocupe toda la pantalla */
        object-fit: contain !important;
    }

    /* 3. Reordenamos las miniaturas en una tira horizontal abajo de la moto */
    .product-gallery-thumbnails {
        display: flex !important;
        flex-direction: row !important; /* Fila horizontal */
        width: 100% !important;
        min-width: 100% !important;
        max-height: none !important;
        overflow-x: auto !important; /* Scroll con el dedo */
        overflow-y: hidden !important;
        justify-content: flex-start !important;
        padding-bottom: 8px !important;
        gap: 8px !important;
    }

    /* 4. Aseguramos el tamaño de los botones miniatura en celulares */
    .product-gallery-thumbnails .thumb-btn {
        width: 65px !important;
        height: 65px !important;
        flex: 0 0 65px !important; /* Evita que se aplasten en la tira horizontal */
        border-radius: 8px !important;
    }
}
/* ============================================================
   PARCHE DEFINITIVO: SISTEMA DE GRILLAS COMPATIBLE PARA MOBILE
   ============================================================ */

/* En celulares (menor a 768px, idéntico a tu media query global) */
@media (max-width: 768px) {

    /* 1. Forzamos a la grilla a ser de una sola columna limpia */
    .section-product-detail .grid--1-2 {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }

    /* 2. Reestructuramos la galería usando la grilla nativa en una columna */
    .product-gallery-wrapper {
        display: grid !important;
        grid-template-columns: 1fr !important; /* Una columna para todo el bloque de fotos */
        position: relative !important;
        top: 0 !important;
        width: 100% !important;
        gap: 16px !important;
    }

    /* 3. Forzamos a las miniaturas a ir ABAJO de la foto principal mediante 'order' */
    .product-gallery-thumbnails {
        grid-column: 1 !important;
        order: 2 !important; /* Pasa abajo */
        display: flex !important;
        flex-direction: row !important; /* Tira horizontal */
        width: 100% !important;
        overflow-x: auto !important; /* Desplazamiento con el dedo */
        overflow-y: hidden !important;
        gap: 8px !important;
        padding-bottom: 8px !important;
        max-height: none !important;
    }

    /* 4. La foto principal va ARRIBA */
    .product-gallery-main {
        grid-column: 1 !important;
        order: 1 !important; /* Pasa arriba */
        width: 100% !important;
        max-width: 100% !important;
    }

    .product-gallery-main img {
        width: 100% !important;
        height: auto !important;
        max-height: 35vh !important; /* Controla que la moto no rompa el alto de la pantalla */
        object-fit: contain !important;
    }

    /* 5. Aseguramos el tamaño de los botones en mobile */
    .product-gallery-thumbnails .thumb-btn {
        width: 65px !important;
        height: 65px !important;
        flex: 0 0 65px !important; /* Formato cuadrado estricto */
    }
}
/* ============================================================
   PARCHE: CENTRADO DE IMAGEN DESTACADA EN MEGA MENÚ
   ============================================================ */

/* Forzamos a la tarjeta contenedora a centrar todo su contenido */
.megamenu__featured,
.featured__card {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;   /* Centrado horizontal estricto */
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
}

/* Nos aseguramos de que la imagen de la moto responda al centrado */
.featured__card img {
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
    max-height: 250px !important;
    object-fit: contain !important;
}

/* Si el botón "VER MÁS" (.btn) está ahí dentro, aseguramos que se acople al centro */
.featured__card .btn,
.featured__card a.btn--secondary {
    width: 100% !important;
    max-width: 320px !important; /* Limita el ancho del botón para que no se estire al infinito y quede elegante */
    margin-inline: auto !important;
}
.form-input[type=number] {
    appearance: textfield; /* Estándar actual */
    -moz-appearance: textfield; /* Para versiones antiguas de Firefox */
}

/* Opcional: Esto también oculta las flechas en Chrome, Safari y Edge */
.form-input[type=number]::-webkit-inner-spin-button,
.form-input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
/* ============================================================
   PARCHE: OPTIMIZACIÓN DE CONTRASTE Y LECTURA EN SLIDING PANELS
   ============================================================ */

/* Cuando el panel se expande en Desktop, forzamos un overlay mucho más oscuro y uniforme */
@media (min-width: 992px) {
    .xe-panel:hover .xe-panel__overlay {
        background: linear-gradient(
            to top, 
            rgba(0, 0, 0, 0.95) 0%, 
            rgba(0, 0, 0, 0.75) 50%, 
            rgba(0, 0, 0, 0.85) 100%
        ) !important;
    }
}

/* En celulares, como los paneles ya nacen abiertos uno abajo del otro, aseguramos el mismo contraste */
@media (max-width: 991px) {
    .xe-panel .xe-panel__overlay {
        background: linear-gradient(
            to top, 
            rgba(0, 0, 0, 0.95) 0%, 
            rgba(0, 0, 0, 0.75) 50%, 
            rgba(0, 0, 0, 0.85) 100%
        ) !important;
    }
}
/* ============================================================
   PARCHE: ADAPTACIÓN RESPONSIVA SECCIÓN REVIEWS (VIDEOS)
   ============================================================ */

/* Configuración de la grilla base para todas las pantallas */
.reviews-grid {
    display: grid !important;
    gap: var(--space-4, 24px) !important;
    width: 100% !important;
}

/* En celulares (pantallas menores a 768px): los videos se apilan en 1 sola columna */
@media (max-width: 767px) {
    .reviews-grid {
        grid-template-columns: 1fr !important;
    }
    
    .section-reviews {
        padding-top: 3rem !important;  /* Reducimos el espaciado exagerado en móvil */
        padding-bottom: 3rem !important;
    }
    
    .video-card__info h3 {
        font-size: 1rem !important;    /* Achicamos un poco los títulos de los videos */
        line-height: 1.4 !important;
    }
}

/* En tablets (pantallas entre 768px y 1024px): los videos se acomodan en 2 columnas */
@media (min-width: 768px) and (max-width: 1024px) {
    .reviews-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* En computadoras (pantallas mayores a 1024px): los videos vuelven a sus 3 columnas originales */
@media (min-width: 1025px) {
    .reviews-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* Nos aseguramos de que las miniaturas mantengan siempre la proporción de video de YouTube (16:9) */
.video-card__thumb {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    overflow: hidden !important;
    border-radius: 8px !important; /* Le da un toque estético sutil en las esquinas */
}

.video-card__thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}
.tab-content { display: none !important; }
.tab-content.active { display: block !important; }

/* Generar una separación limpia entre el SVG y el texto */
.xe-panel__specs ul li {
    display: flex;
    align-items: center;
    gap: 12px !important; /* Espaciado perfecto para que no estén pegados */
    margin-bottom: 8px;
}

/* Efecto Hover Premium para el botón del deslizador */
.btn--slider:hover {
    background-color: #22c55e !important; /* Fondo verde accesible */
    color: #000000 !important;            /* Texto negro para alto contraste */
    border-color: #22c55e !important;     /* Borde verde */
    transform: translateY(-2px);          /* Leve animación de subida */
    transition: all 0.3s ease-in-out;
}