/* ============================================================
   GARELLI MOTORS — KIT DE DISEÑO v1.0
   Fuente única de verdad de color, tipografía, espaciado y
   componentes. Todo lo que se ve en la web sale de acá.
   ============================================================ */

/* ------------------------------------------------------------
   1. TOKENS
   ------------------------------------------------------------ */
:root{
  /* --- Escala oscura (la base de la marca) --- */
  --gm-ink-900:#000000;   /* fondo absoluto, hero, nosotros, CTA */
  --gm-ink-800:#050505;   /* secciones oscuras alternas: líneas, FAQ */
  --gm-ink-700:#0E0E0E;   /* superficies elevadas: badges, panel de contacto */
  --gm-ink-600:#141414;   /* cards sobre fondo oscuro */

  /* --- Escala clara (los dos cortes de la página) --- */
  --gm-paper-100:#FFFFFF; /* cards de producto */
  --gm-paper-200:#F4F4F4; /* sección productos */
  --gm-paper-300:#F2F2F2; /* franja de marcas */
  --gm-paper-400:#E4E4E4; /* bordes sobre claro */

  /* --- Rojo de marca --- */
  --gm-red:#E01D1D;       /* rellenos, barras, iconos, botones */
  --gm-red-hi:#FF3B3B;    /* texto rojo SOBRE OSCURO (contraste AA) */
  --gm-red-dk:#B71515;    /* hover de rellenos y texto rojo sobre claro */

  /* --- Texto --- */
  --gm-txt-hi:#FFFFFF;    /* titulares sobre oscuro */
  --gm-txt:#A8A8A8;       /* cuerpo sobre oscuro */
  --gm-txt-lo:#9A9A9A;    /* apoyo, descripciones cortas */
  --gm-txt-mute:#777777;  /* micro-copy, hints */
  --gm-txt-dk:#000000;    /* titulares sobre claro */
  --gm-txt-dk-soft:#555555;/* cuerpo sobre claro */
  --gm-txt-dk-mute:#6B6B6B;/* micro-copy sobre claro */

  /* --- Líneas y sombras --- */
  --gm-line:rgba(255,255,255,.08);
  --gm-line-2:rgba(255,255,255,.14);
  --gm-line-dk:#E4E4E4;
  --gm-shadow:0 26px 50px rgba(0,0,0,.16);

  /* --- Verde WhatsApp (única excepción a la paleta) --- */
  --gm-wa:#25D366;

  /* --- Tipografía --- */
  --gm-font-display:'Barlow Condensed',Haettenschweiler,'Arial Narrow',sans-serif;
  --gm-font-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;

  --gm-fs-h1:clamp(52px,8.4vw,124px);
  --gm-fs-h2:clamp(38px,5.6vw,76px);
  --gm-fs-h2-sm:clamp(34px,4.4vw,62px);
  --gm-fs-h2-xs:clamp(32px,4vw,54px);
  --gm-fs-h3:22px;
  --gm-fs-h4:18px;
  --gm-fs-lead:17px;
  --gm-fs-body:15.5px;
  --gm-fs-eyebrow:14px;
  --gm-fs-micro:12.5px;

  --gm-ls-display:-.005em;
  --gm-ls-eyebrow:.32em;
  --gm-ls-btn:.16em;
  --gm-ls-label:.12em;
  --gm-lh-display:.9;
  --gm-lh-body:1.75;

  /* --- Ritmo y layout --- */
  --gm-space-section:clamp(80px,9vw,120px);
  --gm-space-block:clamp(36px,5vw,60px);
  --gm-gutter:20px;
  --gm-maxw:1280px;
  --gm-radius:0px;          /* la marca es 100% canto vivo */
  --gm-ease:cubic-bezier(.2,.7,.3,1);
  --gm-dur:.4s;
}

/* ------------------------------------------------------------
   2. GLOBALS DE ELEMENTOR
   Esto es lo que evita que Elementor pinte con su paleta por
   defecto todo lo que no tenga estilo propio (botones, iconos,
   enlaces, widgets nuevos que agregue el cliente).
   ------------------------------------------------------------ */
:root{
  --e-global-color-primary:var(--gm-txt-hi);
  --e-global-color-secondary:var(--gm-red);
  --e-global-color-text:var(--gm-txt);
  --e-global-color-accent:var(--gm-red);

  --e-global-typography-primary-font-family:'Barlow Condensed';
  --e-global-typography-primary-font-weight:900;
  --e-global-typography-secondary-font-family:'Barlow Condensed';
  --e-global-typography-secondary-font-weight:700;
  --e-global-typography-text-font-family:'Inter';
  --e-global-typography-text-font-weight:300;
  --e-global-typography-accent-font-family:'Barlow Condensed';
  --e-global-typography-accent-font-weight:800;
}

/* ------------------------------------------------------------
   3. BASE
   ------------------------------------------------------------ */
::selection{background:var(--gm-red);color:#fff}
.jx-page{font-family:var(--gm-font-body)}
.jx-page img{display:block;max-width:100%}
.elementor-icon svg{fill:currentColor}

/* Scrollbar de marca (solo WebKit, degrada sin romper nada) */
.jx-page-garelli::-webkit-scrollbar{width:9px}
.jx-page-garelli::-webkit-scrollbar-track{background:#080808}
.jx-page-garelli::-webkit-scrollbar-thumb{background:var(--gm-red)}

/* ------------------------------------------------------------
   4. REVEAL (nativos + bloques HTML, un solo sistema)
   ------------------------------------------------------------ */
.jx-rv{opacity:0;transform:translateY(38px);
  transition:opacity .95s var(--gm-ease),transform .95s var(--gm-ease)}
.jx-rv.is-in{opacity:1;transform:none}
/* !important justificado: dentro del editor de Elementor el cliente
   no debe ver los bloques invisibles mientras edita. */
.elementor-editor-active .jx-rv{opacity:1!important;transform:none!important}
@media(prefers-reduced-motion:reduce){
  .jx-rv{opacity:1;transform:none;transition:none}
}

/* ------------------------------------------------------------
   5. TIPOGRAFÍA — widgets nativos de Elementor
   ------------------------------------------------------------ */
.jx-eyebrow .elementor-heading-title{
  font-family:var(--gm-font-display);font-size:var(--gm-fs-eyebrow);font-weight:700;
  letter-spacing:var(--gm-ls-eyebrow);text-transform:uppercase;
  color:var(--gm-red-hi);line-height:1.2;display:block;margin:0}
.jx-eyebrow.jx-on-light .elementor-heading-title{color:var(--gm-red-dk)}

.jx-h1 .elementor-heading-title{
  font-family:var(--gm-font-display);font-size:var(--gm-fs-h1);font-weight:900;
  line-height:var(--gm-lh-display);letter-spacing:var(--gm-ls-display);
  text-transform:uppercase;color:var(--gm-txt-hi);max-width:14ch;margin:0}

.jx-h2 .elementor-heading-title{
  font-family:var(--gm-font-display);font-size:var(--gm-fs-h2);font-weight:900;
  line-height:var(--gm-lh-display);letter-spacing:var(--gm-ls-display);
  text-transform:uppercase;color:var(--gm-txt-hi);margin:0}
.jx-h2--sm .elementor-heading-title{font-size:var(--gm-fs-h2-sm)}
.jx-h2--xs .elementor-heading-title{font-size:var(--gm-fs-h2-xs)}
.jx-h1 em,.jx-h2 em{font-style:normal;color:var(--gm-red-hi)}
.jx-dark .elementor-heading-title{color:var(--gm-txt-dk)}
.jx-dark em{color:var(--gm-red-dk)}

.jx-lead{font-family:var(--gm-font-body);color:var(--gm-txt);font-size:var(--gm-fs-lead);
  line-height:var(--gm-lh-body);font-weight:300;max-width:56ch}
.jx-lead p{font:inherit;color:inherit;margin:0}
.jx-lead a{color:var(--gm-red-hi);text-decoration:none;border-bottom:1px solid currentColor}
.jx-lead--hero{color:#C9C9C9;font-size:18px;line-height:1.7;max-width:52ch}
.jx-lead--dark{color:var(--gm-txt-dk-soft)}
.jx-lead--dark a{color:var(--gm-red-dk)}
.jx-lead--center{margin-inline:auto}
.jx-center{text-align:center}

/* ------------------------------------------------------------
   6. BOTONES
   ------------------------------------------------------------ */
.jx-btn .elementor-button{
  display:inline-flex;align-items:center;gap:11px;
  font-family:var(--gm-font-display);font-size:15px;font-weight:800;
  letter-spacing:var(--gm-ls-btn);text-transform:uppercase;
  padding:15px 30px;border-radius:var(--gm-radius);border:1px solid transparent;
  background-color:var(--gm-red);color:#fff;fill:#fff;
  transition:background-color var(--gm-dur),color var(--gm-dur),border-color var(--gm-dur)}
.jx-btn .elementor-button:hover,
.jx-btn .elementor-button:focus-visible{background-color:#fff;color:var(--gm-ink-900);fill:var(--gm-ink-900)}
.jx-btn .elementor-button-content-wrapper{display:flex;align-items:center;gap:11px}
.jx-btn .elementor-button-icon{transition:transform .3s}
.jx-btn .elementor-button:hover .elementor-button-icon{transform:translateX(5px)}

.jx-btn--out .elementor-button{background-color:transparent;border-color:rgba(255,255,255,.35);color:#fff}
.jx-btn--out .elementor-button:hover,
.jx-btn--out .elementor-button:focus-visible{background-color:#fff;color:var(--gm-ink-900);border-color:#fff}

/* Variante para fondo claro */
.jx-btn--on-light .elementor-button:hover,
.jx-btn--on-light .elementor-button:focus-visible{background-color:var(--gm-ink-900);color:#fff;fill:#fff}

/* ------------------------------------------------------------
   7. ICON BOX — badges de confianza
   ------------------------------------------------------------ */
.jx-badge .elementor-icon-box-wrapper{display:flex;gap:18px;align-items:flex-start;text-align:left}
.jx-badge .elementor-icon-box-icon{margin:0;flex:0 0 auto}
.jx-badge .elementor-icon{font-size:27px;color:var(--gm-red-hi)}
.jx-badge .elementor-icon-box-title{
  font-family:var(--gm-font-display);font-size:var(--gm-fs-h4);font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--gm-txt-hi);
  margin:0 0 7px;line-height:1.05}
.jx-badge .elementor-icon-box-description{
  font-family:var(--gm-font-body);font-size:13px;color:var(--gm-txt-lo);
  line-height:1.55;font-weight:300;margin:0}

/* ------------------------------------------------------------
   8. ICON BOX — datos de contacto
   ------------------------------------------------------------ */
.jx-dato{padding:19px 0;border-bottom:1px solid var(--gm-line)}
.jx-dato--first{border-top:1px solid var(--gm-line)}
.jx-dato .elementor-icon-box-wrapper{display:flex;gap:17px;align-items:flex-start;text-align:left}
.jx-dato .elementor-icon-box-icon{margin:0;flex:0 0 20px}
.jx-dato .elementor-icon{font-size:18px;color:var(--gm-red-hi);margin-top:3px}
.jx-dato .elementor-icon-box-title{
  font-family:var(--gm-font-display);font-size:16px;font-weight:700;
  letter-spacing:var(--gm-ls-label);text-transform:uppercase;
  color:var(--gm-txt-hi);margin:0 0 5px;line-height:1.1}
.jx-dato .elementor-icon-box-description{
  font-family:var(--gm-font-body);font-size:14.5px;color:var(--gm-txt-lo);
  line-height:1.6;font-weight:300;margin:0}
.jx-dato .elementor-icon-box-description a{color:var(--gm-txt-lo);text-decoration:none;transition:color .25s}
.jx-dato .elementor-icon-box-description a:hover{color:var(--gm-red-hi)}

/* ------------------------------------------------------------
   9. UTILIDADES
   ------------------------------------------------------------ */
.jx-cta-glow::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:radial-gradient(ellipse at center,rgba(224,29,29,.14),transparent 62%)}
.jx-cta-glow>.e-con-inner{position:relative;z-index:2}
.jx-fill,.jx-fill>.elementor-widget-container{height:100%}