/* =========================================
   TEMA: AUTO S.A.S — CLARO
   Rojo #cb2829 del logo sobre fondo claro. Cromo del logo como gris medio.
   ========================================= */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* --- PALETA DEL LOGO --- */
  --wjs-color-primary: #cb2829;
  --wjs-color-primary-dark: #ac1d21;
  --wjs-color-secondary: #6b7683;      /* cromo del logo, oscurecido para que lea sobre blanco */
  --wjs-color-secondary-dark: #4d5762;
  --wjs-color-accent: #e8484a;
  --wjs-color-success: #2e9e6b;
  --wjs-color-danger: #cb2829;
  --wjs-color-warning: #c77c17;
  --wjs-color-info: #2f7fb8;
  --wjs-color-light: #f6f8fa;
  --wjs-color-dark: #14181d;

  --wjs-color-on-primary: #ffffff;
  --wjs-color-on-secondary: #ffffff;
  --wjs-color-on-success: #ffffff;
  --wjs-color-on-danger: #ffffff;
  --wjs-color-on-warning: #ffffff;
  --wjs-color-on-info: #ffffff;
  --wjs-color-on-light: #14181d;
  --wjs-color-on-dark: #ffffff;

  /* --- SUPERFICIES CLARAS --- */
  --wjs-bg-canvas: #ffffff;
  --wjs-bg-surface: #f6f8fa;
  --wjs-bg-muted: #eef1f5;
  --wjs-color-text-main: #1a1f24;
  --wjs-color-text-muted: #5c6773;
  --wjs-color-heading: #101418;
  --wjs-color-link: #cb2829;
  --wjs-color-link-hover: #ac1d21;
  --wjs-border-subtle: #e2e7ec;
  --wjs-border-width: 1px;
  --wjs-focus-ring: rgba(203, 40, 41, 0.28);

  /* --- NAVEGACIÓN --- */
  --wjs-nav-font-family: 'Barlow Condensed', sans-serif;
  --wjs-nav-font-size: 1.05rem;
  --wjs-nav-font-weight: 600;
  --wjs-nav-text-transform: uppercase;
  --wjs-nav-letter-spacing: 0.09em;
  --wjs-nav-color: #4a5560;
  --wjs-nav-color-hover: #cb2829;
  --wjs-nav-transition: color .2s ease;
  --wjs-logo-color: #cb2829;

  /* --- PIE ---
     OJO: el componente del pie NO lee los tokens --wjs-footer-*. Lee
     --wjs-bg-footer / --wjs-color-text-footer-main / --wjs-color-text-footer-dim
     (nombres distintos a los que documentan los temas), y sin ellos cae a un
     azul-negro fijo rgb(17,24,39). Se definen AMBAS grafias. */
  --wjs-bg-footer: #f2f4f7;
  --wjs-color-text-footer-main: #1a1f24;
  --wjs-color-text-footer-dim: #5c6773;
  --wjs-bg-surface-hover: #e9edf2;

  /* --- PIE (nombres de tema) --- */
  --wjs-footer-bg: #f2f4f7;
  --wjs-footer-text-heading: #101418;
  --wjs-footer-text-body: #5c6773;
  --wjs-footer-text-hover: #cb2829;
  --wjs-footer-icon-bg: #e6eaee;
  --wjs-footer-icon-color: #cb2829;

  /* --- TIPOGRAFÍA --- */
  --wjs-font-family-base: 'Inter', system-ui, sans-serif;
  --wjs-font-family-heading: 'Barlow Condensed', sans-serif;
  --wjs-font-family-mono: 'SFMono-Regular', Menlo, Consolas, monospace;
  --wjs-font-size-base: 1rem;
  --wjs-line-height-base: 1.65;
  --wjs-heading-weight: 700;
  --wjs-heading-line-height: 1.08;
  --wjs-h1: 3.6rem;
  --wjs-h2: 2.6rem;
  --wjs-h3: 1.9rem;
  --wjs-h4: 1.45rem;
  --wjs-h5: 1.2rem;
  --wjs-h6: 1rem;

  --wjs-container-max: 1560px;

  --wjs-spacer: 1rem;
  --wjs-radius-sm: 3px;
  --wjs-radius: 6px;
  --wjs-radius-md: 10px;
  --wjs-radius-lg: 14px;
  --wjs-radius-pill: 9999px;
  /* Sombras suaves: en claro, las sombras densas ensucian. */
  --wjs-shadow-sm: 0 1px 2px rgba(16,20,24,.06);
  --wjs-shadow: 0 6px 20px rgba(16,20,24,.10);
  --wjs-shadow-md: 0 14px 34px rgba(16,20,24,.12);
  --wjs-shadow-lg: 0 24px 54px rgba(16,20,24,.14);
}

html, body { overflow-x: hidden; }
.wp-block-hero {
  margin-inline: calc(50% - 50vw) !important;
  width: 100vw !important; max-width: 100vw !important;
  border-radius: 0 !important;
}

body { background-color: var(--wjs-bg-canvas) !important; color: var(--wjs-color-text-main); font-family: var(--wjs-font-family-base); }
h1,h2,h3,h4,h5,h6 { font-family: var(--wjs-font-family-heading); letter-spacing: -0.01em; color: var(--wjs-color-heading); }
h2, h3 { text-transform: uppercase; letter-spacing: .02em; }

/* El hero conserva su velo oscuro sobre la foto: el titular va en blanco encima. */
.wp-block-hero h1, .wp-block-hero p { color: #ffffff !important; }

/* Cabecera clara con una linea inferior sutil. */
header { background: rgba(255,255,255,.92) !important; border-bottom: 1px solid var(--wjs-border-subtle); }

/* El logo: la utilidad .h-10 NO existe en el CSS servido en la web publica
   (verificado: 0 reglas), asi que el <img> se pintaba a tamano natural. */
.wjs-header-logo img { height: 46px !important; width: auto !important; max-width: 260px !important; object-fit: contain !important; }
footer img[alt="Logo"] { height: 34px !important; width: auto !important; max-width: 200px !important; object-fit: contain !important; }

.puck-content h2 { position: relative; padding-bottom: 14px; }
.puck-content h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 64px; height: 4px; background: var(--wjs-color-primary); border-radius: 2px; }
.puck-content img { border-radius: var(--wjs-radius-lg); box-shadow: var(--wjs-shadow); }
.wp-block-cta-banner { border: none; }
.wp-block-stats > div {
  padding: 18px 10px; background: #ffffff;
  border: 1px solid var(--wjs-border-subtle); border-top: 3px solid var(--wjs-color-primary);
  border-radius: var(--wjs-radius-md); box-shadow: var(--wjs-shadow-sm);
}

/* =========================================
   MOVIL
   Columns / Grid / IconList / Stats fijan grid-template-columns con estilo
   EN LINEA, que gana a cualquier hoja de estilos: sin !important nunca colapsan.
   ========================================= */
@media (max-width: 767.98px) {
  [class*="columns-grid-"] { grid-template-columns: 1fr !important; gap: 22px !important; }
  .wp-block-grid          { grid-template-columns: 1fr !important; }
  .wp-block-icon-list     { grid-template-columns: 1fr !important; gap: 18px !important; }
  .wp-block-stats         { grid-template-columns: 1fr !important; gap: 14px !important; }

  /* El .container ya mete 1rem por lado; sumarle el de la seccion dejaba ~34px
     muertos a cada lado en un telefono de 390px. Todo el inset va al contenedor. */
  .container { padding-left: 12px !important; padding-right: 12px !important; }
  .wp-block-section { padding-left: 0 !important; padding-right: 0 !important; }

  /* MENU VACIO: el boton hamburguesa se pinta SIN condicion en el header del core
     (no mira menuItems.length), asi que abria un cajon vacio.
     >>> SI AÑADES ENTRADAS AL MENU, BORRA ESTA REGLA. */
  header button { display: none !important; }

  .wjs-header-logo img { height: 34px !important; max-width: 172px !important; }

  .wp-block-hero { min-height: 70vh !important; padding: 40px 18px !important; }
  .wp-block-hero h1 { font-size: 2.3rem !important; line-height: 1.06 !important; }
  .wp-block-hero p  { font-size: 1rem !important; }
  .wp-block-hero a, .wp-block-cta-banner a {
    display: block !important; width: 100% !important; box-sizing: border-box !important;
    text-align: center !important; min-height: 48px !important; line-height: 1.4 !important;
    padding: 14px 18px !important; margin: 8px 0 !important;
  }
  .wp-block-cta-banner    { padding: 34px 20px !important; border-radius: var(--wjs-radius-lg) !important; }
  .wp-block-cta-banner h2 { font-size: 1.7rem !important; }
  .wp-block-cta-banner p  { font-size: 1rem !important; }
}

@media (min-width: 768px) and (max-width: 1023.98px) {
  .wp-block-icon-list { grid-template-columns: 1fr 1fr !important; }
}

/* El pie es claro: sus titulos y su logo deben leer en oscuro. */
footer h3, footer h4 { color: var(--wjs-color-heading) !important; }
footer a { color: var(--wjs-color-text-footer-dim); }
footer a:hover { color: var(--wjs-color-primary); }

/* El banner de conversion pinta su propio fondo de color y pone color:#fff en el
   contenedor, pero mi regla global de titulares (color: --wjs-color-heading) lo
   pisaba y dejaba el titulo casi invisible sobre el. Se fuerza blanco aqui, y se
   quita la barrita roja de seccion, que ahi no pinta nada. */
.wp-block-cta-banner h2,
.wp-block-cta-banner p { color: #ffffff !important; }
.wp-block-cta-banner h2::after { display: none !important; }