/* ============================================================
   ELEKTRO3 — elektro3.css · GLOBAL + HOME
   ------------------------------------------------------------
   Lo carga TODA la pagina. Aqui viven: tokens (:root), base,
   utilidades, componentes GLOBALES (eyebrow, header/nav, botones,
   .card, section-headers, footer), los parciales compartidos y los
   bloques EXCLUSIVOS de la home. Las paginas interiores cargan
   ADEMAS interior.css (lo decide head.php con $interior).

   CONTRATO (donde va cada cosa):
   - Se usa en >1 pagina y una es la home  -> AQUI (elektro3.css)
   - Es exclusivo de paginas interiores     -> interior.css
   - Media queries: co-localizadas bajo su componente (no agrupar)

   INDICE (Ctrl-F el nombre de la seccion):
   :root (tokens) · Utilidades de ritmo · Componente .card ·
   Utilidades atomicas · Eyebrow unificado · TOP UTILITY BAR · NAV ·
   MENU MOVIL · HERO CINEMA · POR QUE ELEKTRO3 · SECTION HEADERS ·
   B2B PLATFORM · TECNOLOGIA & I+D · QUIERO UNA FERRETERIA ·
   CATALOGO MAYORISTA · MARCAS PROPIAS · SHOWROOM · SERVICIOS ·
   MARCAS DISTRIBUIDAS · NOTICIAS · COMPROMISO SOCIAL · CTA FINAL ·
   FOOTER · ECOSISTEMA DEL GRUPO   (los @media van co-localizados bajo cada componente)
   ============================================================ */
:root {
    /* Colores de marca y superficie */
    --ink: #0E1116;
    --ink-2: #1A1F26;
    --ink-3: #2A3038;
    --paper: #FAFAF7;
    --paper-2: #F2EFE8;
    --paper-3: #ECE8DC;
    --line: #E2DED2;
    --line-dark: #2A3038;
    --heading: #4A3C24;
    --yellow: #FFCC00;
    --yellow-deep: #E8B500;
    --orange: #FF6A1A;
    --orange-deep: #E45810;
    --blue: #1E55E5;
    --blue-deep: #0F3DB8;
    --edm-blue: #006ab4;   /* azul oficial de marca EDM Product (dossier y materiales EDM) */
    --green: #1F8A5B;
    --muted: #6B6F75;
    --muted-2: #8A8E94;

    /* Tipografia */
    --display: "Wix Madefor Display", system-ui, sans-serif;
    --body: "Wix Madefor Text", system-ui, sans-serif;

    /* Radios */
    --r-sm: 6px;
    --r-md: 12px;
    --r-lg: 20px;
    --r-xl: 28px;

    /* ============================================================
       SISTEMA DE ESPACIADO (design tokens)
       Escala base armonica. Cambia un valor aqui y se propaga a
       TODA la web. En rem (1rem = 16px) por accesibilidad.
       Progresion alternando x1.5 / x1.33 (sensacion "aurea").
       ============================================================ */
    --sp-1: 0.25rem;   /*  4px */
    --sp-2: 0.5rem;    /*  8px */
    --sp-3: 0.75rem;   /* 12px */
    --sp-4: 1rem;      /* 16px */
    --sp-5: 1.5rem;    /* 24px */
    --sp-6: 2rem;      /* 32px */
    --sp-7: 3rem;      /* 48px */
    --sp-8: 4rem;      /* 64px */
    --sp-9: 6rem;      /* 96px */
    --sp-10: 8rem;     /* 128px */

    /* Tokens semanticos: controlan el "aire" de la web.
       Ritmo vertical FLUIDO con clamp() -> sin media queries por seccion. */
    --section-y:    clamp(2.5rem, 1.8rem + 2.4vw, 4rem);   /* 40 -> 64  ritmo estandar de seccion (hueco entre secciones ~ x2) */
    --section-y-sm: clamp(2rem, 1.5rem + 1.5vw, 3rem);     /* 32 -> 48  bandas / secciones que enlazan */
    --hero-y:       clamp(2.5rem, 1.8rem + 2.4vw, 3.5rem); /* 40 -> 56  heroes de pagina */

    --container-max: 1320px;
    --container-px:  clamp(1.125rem, 0.5rem + 2vw, 2rem);  /* 18 -> 32  gutter lateral fluido */

    --stack-head: clamp(2rem, 1.5rem + 1.5vw, 3rem);       /* 32 -> 48  gap cabecera de seccion -> contenido */

    /* Gaps (derivados de la escala) */
    --gap-chip:  var(--sp-2);  /*  8px  chips / tags */
    --gap-list:  var(--sp-3);  /* 12px  listas / botoneras */
    --gap-cards: var(--sp-4);  /* 16px  rejillas de tarjetas */
    --gap-flow:  var(--sp-7);  /* 48px  layouts a 2 columnas */

    --pad-card: 1.75rem 1.5rem; /* 28/24px  padding interior de tarjeta (unifica el cluster 24-32, mas aire vertical) */

    /* Sombra de texto de los heros (unificada: home + interiores) */
    --hero-title-shadow: 0 2px 14px rgba(0,0,0,0.45);
    --hero-text-shadow:  0 1px 8px rgba(0,0,0,0.55);

    /* Tokens de consolidacion (deduplicacion) */
    --grad-ink: linear-gradient(135deg, var(--ink), var(--ink-3));   /* degradado oscuro de tarjeta/aside */
    --shadow-card: 0 14px 30px -26px rgba(14,17,22,0.2);             /* sombra de card en reposo (valor mayoritario) */
    --shadow-neu-yellow: -3px -3px 6px rgba(255,250,220,.9), 3px 3px 7px rgba(150,110,20,.32);  /* disco neumorfico amarillo (eyebrow + iconos valores/VR) */
    --ink-radial: #1A2230;                                           /* color del radial de los heroes oscuros */
    --grad-hero-radial: radial-gradient(circle at 78% 25%, var(--ink-radial) 0%, var(--ink) 60%);  /* fondo radial de heroes oscuros (is-tech / legal / vacante) */
    --mac-red: #FF5F57;                                              /* dot semaforo rojo (barra de navegador simulada) */
    --mac-yellow: #FEBC2E;                                           /* dot semaforo amarillo */
    --mac-green: #28C840;                                            /* dot semaforo verde */
    --green-tint: rgba(31,138,91,0.10);                              /* verde translucido de iconos/tags */
    --gap-2col: 56px;                                                /* gap de layouts a 2 columnas */
    --sticky-top: 96px;                                              /* top de elementos sticky bajo la cabecera */
    --state-live-bg: #E6F6EC;                                        /* badge estado "en produccion" (verde) */
    --state-live-fg: #155F3D;
    --state-soon-bg: #FFF6D6;                                        /* badge estado "proximamente" (ambar) */
    --state-soon-fg: #8A6A00;
  }

  /* ============================================================
     BREAKPOINTS (convencion). CSS no permite var() en @media,
     asi que se usan estos 4 valores SIEMPRE, nunca otros:
       1100px  portatil / tablet apaisada
        900px  tablet
        720px  tablet pequena / movil grande
        560px  movil
     Cada media query va co-locada bajo su componente (no en
     fichero aparte). El espaciado responde solo via clamp().
     ============================================================ */

  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  /* Reserva el hueco de la barra de scroll para que no haya reflow (temblor) cuando
     cambia la altura de la pagina (p. ej. al mostrar/ocultar campos de un formulario). */
  html { scrollbar-gutter: stable; }
  body {
    font-family: var(--body);
    font-size: 1rem;
    line-height: 1.55;
    color: var(--ink);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
  img, svg { display: block; max-width: 100%; }
  a { color: inherit; text-decoration: none; }
  button { font: inherit; cursor: pointer; border: 0; background: 0; color: inherit; }

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

  /* Utilidades de ritmo de seccion (conectar/comprimir sin estilos inline) */
  .section-tight { padding-block: var(--section-y-sm) !important; }

  /* Tono de seccion: alternancia clara/suave para marcar el limite entre bloques.
     Se aplica en el <section> segun su posicion; gana por especificidad (0,1,1)
     a la clase semantica (0,1,0), asi un mismo modulo puede llevar un tono u otro
     segun la pagina sin tocar su CSS. Los fondos negros (--ink) son anclas y no
     llevan modificador. */
  section.tone-light { background: var(--paper); }
  section.tone-soft  { background: var(--paper-2); }
  @media (max-width: 720px) {
    .wrap, .wrap-tight { padding: 0 18px; }
  }

  /* ============================================================
     CARD — componente unico de "tarjeta de contenido"
     Estructura: (icono/logo/tag opcional) + titulo? + parrafo + enlace?
     El shell (fondo, borde, radio, padding, hover, transicion) y la
     tipografia (h3/h4/p) viven AQUI. Cada variante semantica
     (.b2b-card, .svc-card...) solo aporta sus extras (icono, tag, etc.),
     sin repetir el shell. Modificadores: --row (icono a la izq),
     --dark (seccion oscura), --center (centrada), --media (con miniatura).
     ============================================================ */
  .card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: var(--pad-card);
    color: var(--ink); text-decoration: none;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
  }
  .card:hover {
    transform: translateY(-3px);
    border-color: var(--ink-3);
    box-shadow: 0 20px 40px -24px rgba(14,17,22,0.18);
  }
  /* Tipografia base de card (el tamano de parrafo ya esta normalizado a 14) */
  .card h3, .card h4 {
    font-family: var(--display); font-weight: 700; font-size: 1.0625rem;
    letter-spacing: -0.015em; line-height: 1.2; color: inherit;
  }
  .card p { font-size: 0.875rem; line-height: 1.5; color: var(--muted); }
  /* Modificadores de variante (solo lo que cambia respecto al shell por defecto) */
  .card--dark   { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); color: #fff; }
  .card--dark p { color: rgba(255,255,255,0.68); }
  .card--media  { padding: 0; }
  /* Wrapper <article> de las cards de noticia: no altera el layout del grid
     (display:contents), solo aporta semantica de articulo para SEO/accesibilidad. */
  .news-article { display: contents; }

  /* Skip-link: oculto hasta recibir foco por teclado (WCAG 2.4.1). */
  .skip-link { position: absolute; left: 8px; top: -60px; z-index: 2000; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 8px; font-family: var(--body); font-weight: 700; font-size: 0.875rem; text-decoration: none; transition: top .15s ease; }
  .skip-link:focus { top: 8px; }

  /* Cookie banner (libreria CookieConsent, #cconsent-bar): tarjeta abajo-derecha en
     lugar de barra a todo el ancho (pisaba contenido). Solo web publica: este CSS no
     se carga en el front viejo, asi que su banner sigue igual. !important para ganar
     al <style> que inyecta la libreria en runtime.
     DOM real: .ccb__wrapper > .ccb__left(.cc-text) + .ccb__right > .ccb__button >
       [a.ccb__edit(Configurar), button.consent-give-necessary(Rechazar), button.consent-give(Aceptar)]
     Orden forzado por UX: Aceptar, Rechazar, Configurar. Aceptar y Rechazar comparten
     estilo = misma prominencia (requisito RGPD/AEPD: rechazar tan facil como aceptar). */
  #cconsent-bar {
    left: auto !important;
    right: 20px !important;
    bottom: 20px !important;
    top: auto !important;
    width: auto !important;
    max-width: 370px !important;
    border-radius: 16px !important;
    box-shadow: 0 16px 48px rgba(14, 17, 22, 0.28) !important;
    padding: 22px !important;
  }
  #cconsent-bar .ccb__wrapper {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 18px !important;
    max-width: none !important;
  }
  #cconsent-bar .ccb__left { margin: 0 !important; }
  #cconsent-bar .cc-text { line-height: 1.5 !important; font-size: 0.84375rem !important; }
  #cconsent-bar .ccb__right { width: 100% !important; white-space: normal !important; }
  #cconsent-bar .ccb__button {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  /* Orden visual: Aceptar, Rechazar, Configurar */
  #cconsent-bar .consent-give { order: 1 !important; }
  #cconsent-bar .consent-give-necessary { order: 2 !important; }
  #cconsent-bar .ccb__edit { order: 3 !important; }
  /* Aceptar + Rechazar: botones identicos (misma prominencia) */
  #cconsent-bar .consent-give,
  #cconsent-bar .consent-give-necessary {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 12px 16px !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    font-size: 0.875rem !important;
  }
  /* Configurar cookies: enlace discreto, centrado, sin peso de boton */
  #cconsent-bar a.ccb__edit {
    display: block !important;
    width: 100% !important;
    margin: 2px 0 0 !important;
    padding: 0 !important;
    text-align: center !important;
    font-size: 0.8125rem !important;
  }
  /* En movil: tarjeta con margenes laterales, no barra a pantalla completa */
  @media (max-width: 480px) {
    #cconsent-bar { left: 10px !important; right: 10px !important; bottom: 10px !important; max-width: none !important; padding: 18px !important; }
  }

  /* Caja CTA/aside: fondo calido + sombra en reposo, aclara en hover (why-quote, sec-cta) */
  .card--cta    { background: var(--paper-3); box-shadow: 0 14px 30px -22px rgba(14,17,22,0.25); }
  .card--cta:hover { background: #fff; }

  /* ============================================================
     DOSSIER — bloque del dossier corporativo. Material EDM: seccion
     AZUL EDM a TODO el ancho (full-bleed); contenido centrado en .wrap.
     Portada del PDF inclinada a la izquierda + texto + acciones.
     ============================================================ */
  .dossier-band { background: var(--edm-blue); color: #fff; padding-block: var(--section-y); }
  .dossier-cta {
    display: flex; align-items: center; gap: clamp(1.5rem, 1rem + 3vw, 3.5rem);
  }
  .dossier-cta-cover {
    flex: 0 0 auto; width: clamp(220px, 33%, 380px); height: auto; display: block;
    border-radius: var(--r-md);
    box-shadow: 0 22px 50px -16px rgba(0,0,0,0.45);
    transform: rotate(-1.5deg);
  }
  .dossier-cta-body { flex: 1 1 auto; min-width: 0; }
  .dossier-cta-body h2 {
    font-family: var(--display); font-weight: 700;
    font-size: clamp(1.625rem, 1.4rem + 1.9vw, 2.375rem); line-height: 1.1; letter-spacing: -0.02em;
    margin: 0 0 var(--sp-3); color: #fff; text-wrap: balance;
  }
  .dossier-cta-body h2 em { font-style: normal; color: var(--yellow); }
  .dossier-cta-body p {
    font-size: 0.9375rem; line-height: 1.55; color: rgba(255,255,255,0.85);
    margin: 0 0 var(--sp-5); max-width: 52ch;
  }
  .dossier-cta-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4); }
  .dossier-cta-link {
    font-family: var(--display); font-weight: 700; font-size: 0.875rem; color: #fff;
    display: inline-flex; align-items: center; gap: var(--sp-2);
  }
  .dossier-cta-link:hover { color: var(--yellow); }
  @media (max-width: 720px) {
    .dossier-cta { flex-direction: column; align-items: flex-start; }
    .dossier-cta-cover { width: clamp(200px, 62%, 300px); transform: none; align-self: center; }
  }
  /* Visor del dossier — FLIPBOOK (pagina dossier.php, libreria StPageFlip) */
  .dossier-viewer-wrap { background: var(--paper-2); }
  .dossier-flip-stage { max-width: 1300px; margin-inline: auto; padding-inline: var(--container-px); position: relative; }
  .dossier-flip { margin-inline: auto; touch-action: pan-y; }
  .dossier-flip-loading {
    display: flex; flex-direction: column; align-items: center;
    gap: var(--sp-4);
    font-family: var(--display); font-weight: 700; font-size: 1.0625rem; color: var(--ink); text-align: center;
  }
  .dossier-flip-loading[hidden] { display: none; }
  .dossier-flip-loading::before {
    content: ""; width: 54px; height: 54px; border-radius: 50%;
    border: 4px solid var(--line); border-top-color: var(--edm-blue);
    animation: dossier-spin 0.8s linear infinite;
  }
  @keyframes dossier-spin { to { transform: rotate(360deg); } }
  .dossier-flip .stf__parent { margin-inline: auto; }
  /* Flechas a los lados (no ocupan alto) + contador debajo. Se revelan al cargar (.is-ready) */
  .dossier-flip-btn {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
    width: 48px; height: 48px; border-radius: 50%;
    background: var(--ink); color: #fff; font-size: 1.5rem; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 8px 22px -8px rgba(0,0,0,0.45);
    opacity: 0; pointer-events: none;
    transition: opacity .2s ease, background .18s ease;
  }
  .dossier-flip-btn--prev { left: var(--sp-2); }
  .dossier-flip-btn--next { right: var(--sp-2); }
  .dossier-flip-btn:hover { background: var(--ink-2); }
  .dossier-flip-stage.is-ready .dossier-flip-btn { opacity: 1; pointer-events: auto; }
  .dossier-flip-count {
    text-align: center; margin-top: var(--sp-4);
    font-family: var(--display); font-weight: 700; font-size: 0.875rem; color: var(--muted);
    display: none;
  }
  .dossier-flip-stage.is-ready .dossier-flip-count { display: block; }
  /* Boton pantalla completa (esquina sup. der. del visor) */
  .dossier-flip-fs {
    position: absolute; top: var(--sp-3); right: var(--sp-3); z-index: 6;
    width: 42px; height: 42px; border-radius: 10px;
    background: var(--ink); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none;
    transition: opacity .2s ease, background .18s ease;
  }
  .dossier-flip-fs:hover { background: var(--ink-2); }
  .dossier-flip-stage.is-ready .dossier-flip-fs { opacity: 1; pointer-events: auto; }
  /* Modal "pantalla completa": cubre el VIEWPORT del navegador (no la pantalla del PC) */
  .dossier-flip-stage.is-modal {
    position: fixed; inset: 0; z-index: 1000;
    max-width: none; margin: 0;
    padding: clamp(1rem, 2vw, 2rem);
    background: rgba(14,17,22,0.97);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-3);
  }
  body.dossier-modal-open { overflow: hidden; }
  .dossier-flip-stage.is-modal .dossier-flip-count { color: rgba(255,255,255,0.8); margin-top: var(--sp-4); }
  /* En modal (fondo oscuro) los controles necesitan contraste claro */
  .dossier-flip-stage.is-modal .dossier-flip-btn,
  .dossier-flip-stage.is-modal .dossier-flip-fs { background: rgba(255,255,255,0.16); }
  .dossier-flip-stage.is-modal .dossier-flip-btn:hover,
  .dossier-flip-stage.is-modal .dossier-flip-fs:hover { background: rgba(255,255,255,0.28); }

  /* ============================================================
     UTILIDADES (helper classes) y COMPONENTES.
     Para no repetir estilos inline. El espaciado SIEMPRE sale de
     la escala --sp-* (el numero de la clase = paso de la escala).
     ============================================================ */
  /* display / flex */
  .d-none { display: none; }
  @media (max-width: 720px) { .hide-mobile { display: none; } }
  .d-block { display: block; }
  .d-flex { display: flex; }
  .d-inline-flex { display: inline-flex; }
  .flex-col { flex-direction: column; }
  .flex-wrap { flex-wrap: wrap; }
  .flex-none { flex: 0 0 auto; }
  .items-center { align-items: center; }
  .justify-center { justify-content: center; }
  .w-full { width: 100%; }

  /* espaciado (escala --sp-*) */
  .m-0 { margin: 0; }
  .mx-auto { margin-inline: auto; }
  .p-0 { padding: 0; }
  .mt-2 { margin-block-start: var(--sp-2); }
  .mt-3 { margin-block-start: var(--sp-3); }
  .mt-4 { margin-block-start: var(--sp-4); }
  .mt-5 { margin-block-start: var(--sp-5); }
  .mt-7 { margin-block-start: var(--sp-7); }
  .mb-4 { margin-block-end: var(--sp-4); }
  .mb-5 { margin-block-end: var(--sp-5); }
  .gap-2 { gap: var(--sp-2); }
  .gap-3 { gap: var(--sp-3); }
  .gap-4 { gap: var(--sp-4); }

  /* texto */
  .text-center { text-align: center; }
  .fw-500 { font-weight: 500; }
  .fw-700 { font-weight: 700; }
  .uppercase { text-transform: uppercase; }
  .tracking-wide { letter-spacing: 0.1em; }
  .fs-12 { font-size: 0.75rem; }
  .fs-14 { font-size: 0.875rem; }
  .fs-15 { font-size: 0.9375rem; }
  .text-muted { color: var(--muted); }
  .text-muted-2 { color: var(--muted-2); }
  .text-orange { color: var(--orange); }
  .text-ink { color: var(--ink); }
  .text-white { color: #fff; }

  /* fondos */
  .bg-paper-2 { background: var(--paper-2); }
  .bg-paper-3 { background: var(--paper-3); }
  .bg-white { background: #fff; }
  .bdr-light { border-color: rgba(255,255,255,0.25); }   /* borde claro (botones ghost sobre fondo oscuro) */

  /* componentes reutilizables */
  .list-plain { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
  .li-check { display: flex; gap: 10px; align-items: flex-start; }
  .li-ico { flex: 0 0 auto; width: 18px; height: 18px; color: var(--green); margin-block-start: 2px; }
  .img-cover { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
  .btn-block { width: 100%; justify-content: center; padding: 16px; margin-block-start: var(--sp-2); }
  .rule-bar { width: 20px; height: 2px; display: inline-block; background: var(--orange); }
  .upload-label { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px dashed var(--muted-2); border-radius: 10px; background: #fff; cursor: pointer; color: var(--muted); font-size: 0.875rem; }
  .form-control { font-family: var(--body); font-size: 0.9375rem; color: var(--ink); padding: 13px 15px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
  .form-control.is-area { resize: vertical; }

  .eyebrow {
    font-family: var(--body);
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .eyebrow.on-dark { color: var(--yellow); }

  /* ===== Eyebrow unificado: disco amarillo + texto + linea (1 fuente de verdad) ===== */
  .e3-eyebrow {
    display: flex; align-items: center; gap: 14px;
    width: 100%; max-width: 500px; /* desktop tope 500; movil cae a 100% solo */
    margin: 0 0 10px;
    font-family: var(--body); font-weight: 700; font-size: 0.8125rem;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: #161616;
  }
  .e3-eyebrow__disc {
    width: 34px; height: 34px; flex: 0 0 auto; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--yellow);
    box-shadow: var(--shadow-neu-yellow);
  }
  .e3-eyebrow__ico { height: 18px; width: auto; display: block; flex: 0 0 auto; }
  .e3-eyebrow__label { white-space: nowrap; }
  .e3-eyebrow__rule {
    flex: 1; height: 2px; min-width: 40px;
    background: var(--line); border-radius: 2px;
  }
  /* En movil la etiqueta puede envolver en vez de desbordar (nowrap forzaba scroll lateral) */
  @media (max-width: 600px) {
    .e3-eyebrow { max-width: 100%; }
    .e3-eyebrow__label { white-space: normal; }
  }
  /* Variante clicable: hace de <a>, sin subrayado por defecto; el hover mueve la linea a naranja */
  .e3-eyebrow--link { text-decoration: none; cursor: pointer; transition: opacity .15s ease; }
  .e3-eyebrow--link:hover { opacity: 0.72; }
  .e3-eyebrow--link:hover .e3-eyebrow__rule { background: var(--orange); }
  /* Variante oscuro */
  .e3-eyebrow--dark { color: #fff; }
  .e3-eyebrow--dark .e3-eyebrow__rule { background: rgba(255,255,255,0.22); }
  /* En oscuro, sombras invertidas: oscura arriba-izq, clara abajo-der */
  .e3-eyebrow--dark .e3-eyebrow__disc {
    box-shadow: -3px -3px 6px rgba(0,0,0,0.45), 3px 3px 7px rgba(255,238,170,0.30);
  }
  /* Variante "leaf": disco verde + hoja blanca (seccion sostenibilidad) */
  .e3-eyebrow--leaf .e3-eyebrow__disc {
    background: var(--green); color: #fff;
    box-shadow: -3px -3px 6px rgba(220,245,228,0.9), 3px 3px 7px rgba(20,90,55,0.32);
  }
  /* En la home why-head usa flex-gap, el eyebrow no necesita margen propio */
  .why-head-main .e3-eyebrow { margin-bottom: 0; }
  /* Normaliza el espacio eyebrow->encabezado: el hueco lo marca SOLO el eyebrow (10px),
     anulando el margin-top propio del h1/h2/h3 cuando va inmediatamente debajo */
  .e3-eyebrow + h1, .e3-eyebrow + h2, .e3-eyebrow + h3 { margin-top: 0; }
  /* h2 de seccion bajo eyebrow: taupe en claro, blanco si el eyebrow es oscuro */
  .e3-eyebrow + h2 { color: var(--heading); }
  .e3-eyebrow--dark + h2 { color: #fff; }
  /* Contenedor flex con gap propio (8px): el eyebrow no anade margen extra para
     no pegarse al titulo (el -8px anterior anulaba el gap y los dejaba tocandose). */
  .contact-methods .e3-eyebrow { margin-bottom: 0; }

  /* ---------- TOP UTILITY BAR ---------- */
  /* Cabecera fija: topbar + nav. El topbar se oculta al bajar y reaparece al subir
     (la cabecera se desplaza hacia arriba la altura del topbar via JS -> .is-condensed). */
  .site-header {
    position: sticky; top: 0; z-index: 50;
    transition: transform .32s ease;
    /* sin will-change: transform -> creaba containing block que atrapaba el position:fixed del menu movil */
  }
  .site-header.is-condensed { transform: translateY(calc(-1 * var(--topbar-h, 40px))); }

  .topbar {
    background: var(--ink);
    color: #D8D8D6;
    font-size: 0.8125rem;
  }
  .topbar-inner {
    display: flex; align-items: center; justify-content: space-between;
    height: 38px; gap: 24px;
  }
  .topbar-claim {
    display: inline-flex; align-items: center; gap: 10px;
    font-weight: 500;
  }
  .topbar-claim .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--yellow); flex: 0 0 auto; }
  .topbar-claim strong { color: #fff; font-weight: 700; }
  .topbar-right { display: flex; align-items: center; gap: 22px; }
  .topbar-right a { display: inline-flex; align-items: center; gap: 6px; color: #D8D8D6; }
  .topbar-right a:hover { color: #fff; }
  .topbar-right .lang { color: var(--muted-2); }
  .topbar-right .lang.is-active { color: #fff; font-weight: 600; }
  .topbar-right .b2b {
    background: var(--yellow); color: var(--ink); font-weight: 700;
    padding: 6px 12px; border-radius: 999px;
    display: inline-flex; align-items: center; gap: 8px;
  }
  .topbar-right .b2b:hover { background: #fff; }
  @media (max-width: 1100px) {
    .topbar-claim span:not(.dot) { display: none; }
    .topbar-claim::after { content: "Distribuidor mayorista de ferretería, bricolaje y suministro industrial"; color: #D8D8D6; font-weight: 500; }
    .topbar-right .lang + a .lang { display: none; }
    .topbar-right a:not(.b2b) { font-size: 0.78125rem; }
  }
  @media (max-width: 720px) {
    /* topbar movil: fuera la frase del claim (no cabe); solo idiomas.
       Dossier/Contacto/Empleo pasan al menu hamburguesa (ver nav.js). */
    .topbar-claim { display: none; }
    .topbar-right .tb-extra { display: none; }
    .topbar-inner { justify-content: flex-end; }
    .topbar-right { gap: 16px; }
    .topbar-right .lang + a .lang { display: inline; }
  }
  @media (max-width: 720px) {
    .topbar-claim span { display: none; }
  }

  /* ---------- NAV ---------- */
  .nav {
    background: rgba(250,250,247,0.92);
    backdrop-filter: saturate(140%) blur(8px);
    -webkit-backdrop-filter: saturate(140%) blur(8px);
    border-bottom: 1px solid var(--line);
  }
  .nav-inner {
    display: flex; align-items: center; gap: 32px;
    height: 70px;
  }
  .logo {
    display: inline-flex; align-items: center; gap: 14px;
    font-family: var(--display); font-weight: 800; font-size: 1.375rem;
    letter-spacing: -0.02em;
  }
  .logo small { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.12em; color: var(--muted); text-transform: uppercase; font-family: var(--body); display: block; margin-top: -2px; }

  /* logo definitivo (SVG lockup) */
  .logo-img-lockup { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 5px; }
  .logo-img-lockup img { height: 48px; width: auto; display: block; }
  .logo-img-lockup small { font-family: var(--body); font-size: 0.59375rem; font-weight: 700; letter-spacing: 0.22em; color: var(--muted); text-transform: uppercase; margin: 0; }
  .foot-logo img { height: 48px; }
  .foot-logo small { color: rgba(255,255,255,0.5); }

  /* ---------- MENÚ MÓVIL (hamburguesa, ver nav.js) ---------- */
  .nav-burger { display: none; }
  .nav-mobile { display: none; }
  @media (max-width: 1100px) {
    .nav-burger {
      display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
      width: 44px; height: 44px; padding: 10px;
      border: 1px solid var(--line); border-radius: 10px; background: #fff;
      cursor: pointer; flex: 0 0 auto;
    }
    .nav-burger span { display: block; height: 2px; width: 100%; background: var(--ink); border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
    .nav.is-open .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .nav.is-open .nav-burger span:nth-child(2) { opacity: 0; }
    .nav.is-open .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
    .nav-cta { margin-left: auto; }
    /* B2B visible junto al burger (acceso directo); compacto, sin flecha */
    .nav-b2b-btn.btn-arrow::after { display: none; }
    .nav-mobile.is-open {
      display: flex; flex-direction: column; gap: 2px;
      position: fixed; left: 0; right: 0; bottom: 0;
      top: calc(var(--topbar-h, 38px) + 70px);   /* arranca justo bajo la cabecera (pantalla completa) */
      z-index: 49;                                /* bajo el header (z-50): logo y X siguen visibles */
      background: linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 52%, var(--paper-3) 100%);
      padding: 22px 18px 36px; overflow-y: auto;
    }
    .nav-mobile a.nav-trigger {
      font-family: var(--display); font-weight: 700; font-size: 1.1875rem;
      color: var(--ink); padding: 12px 4px; border-bottom: 1px solid var(--line);
    }
    .nav-mobile a.nav-trigger.is-active { color: var(--orange); }
    .nav-mobile-extra { display: flex; flex-wrap: nowrap; gap: 6px; padding: 16px 0 6px; }
    .nav-mobile-extra a {
      flex: 1 1 0; min-width: 0; text-align: center;
      font-size: 0.8125rem; font-weight: 600; color: var(--ink-2);
      padding: 9px 8px; border-radius: 999px; border: 1px solid var(--line); background: #fff;
    }
    .nav-mobile-cta { justify-content: center; margin-top: 10px; padding: 15px; }
  }
  @media (max-width: 720px) {
    /* en movil la cabecera deja solo [B2B] + [burger]; "Hazte cliente" vive dentro del menu */
    .nav-cta .btn:not(.nav-b2b-btn) { display: none; }
    /* B2B compacto y mas bajo (anula el min-height:44 del .btn en movil); sin candado para que "Clientes B2B" quepa hasta en 320px */
    .nav-cta .nav-b2b-btn { padding: 6px 13px; gap: 6px; min-height: 0; }
    .nav-cta .nav-b2b-btn svg { display: none; }
    .nav-mobile.is-open { top: calc(var(--topbar-h, 38px) + 54px); }
  }

  .nav-links { display: flex; align-items: center; gap: 2px; margin-left: 8px; }
  .nav-trigger {
    display: inline-block;
    padding: 10px 12px; border-radius: 8px;
    font-weight: 600; font-size: 0.96875rem; color: var(--ink-2);
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
  }
  .nav-trigger:hover { background: var(--paper-2); color: var(--ink); }
  .nav-cta { margin-left: auto; display: flex; align-items: center; gap: 10px; }
  .btn {
    display: inline-flex; align-items: center; gap: 8px;
    font-weight: 700; padding: 12px 18px; border-radius: 999px;
    font-size: 0.90625rem; line-height: 1;
    transition: transform .15s ease, background .15s ease, color .15s ease, box-shadow .15s ease;
  }
  .btn:hover { transform: translateY(-1px); }
  /* touch target minimo en movil (accesibilidad) */
  @media (max-width: 560px) { .btn { min-height: 44px; } }
  .btn-yellow { background: var(--yellow); color: var(--ink); }
  .btn-yellow:hover { background: var(--yellow-deep); }
  .btn-orange { background: var(--orange); color: #fff; box-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 8px 20px -10px rgba(255,106,26,0.6); }
  .btn-orange:hover { background: var(--orange-deep); }
  .btn-ink { background: var(--ink); color: #fff; }
  .btn-ink:hover { background: var(--ink-2); }
  .btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
  .btn-ghost:hover { background: var(--paper-2); }
  /* Ghost sobre fondo oscuro: el combo .text-white/.bdr-light debe ganar a .btn-ghost */
  .btn-ghost.text-white { color: #fff; }
  .btn-ghost.bdr-light { border-color: rgba(255,255,255,0.25); }
  .btn-ghost.text-white:hover { background: rgba(255,255,255,0.1); }
  .btn-arrow::after {
    content: ""; display: inline-block; width: 14px; height: 10px;
    background: currentColor;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10'><path d='M0 5h12M8 1l4 4-4 4' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / contain;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10'><path d='M0 5h12M8 1l4 4-4 4' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / contain;
  }
  /* la flecha avanza al pasar el raton / con foco (Tier1-04) */
  .btn-arrow:hover::after,
  .btn-arrow:focus-visible::after { transform: translateX(4px); }
  @media (max-width: 1100px) {
    .nav-links { display: none; }
  }
  @media (max-width: 720px) {
    .nav-links { display: none; }
    /* franja del nav mas baja en movil: logo y hamburguesa mas pequenos */
    .nav-inner { height: 54px; gap: 16px; }
    .logo-img-lockup img { height: 32px; }
    .nav-burger { width: 38px; height: 38px; padding: 8px; }
  }

  /* ---------- HERO CINEMA (full-bleed, image background) ---------- */
  .hero-cinema {
    position: relative;
    min-height: 480px;
    color: #fff;
    overflow: hidden;
    isolation: isolate;
    padding: 0;
    display: flex; align-items: stretch;
    background: var(--ink);
  }
  .hc-bg {
    position: absolute; inset: 0; z-index: -2;
  }
  .hc-bg picture, .hc-bg img {
    width: 100%; height: 100%;
    display: block;
  }
  .hc-bg img {
    object-fit: cover;
    object-position: center 45%;
    filter: contrast(1.03) saturate(0.9) brightness(0.6);
  }
  /* Parallax opt-in en portada: agranda solo la foto (no el tint ni el grain). */
  .hero-cinema[data-parallax] .hc-bg picture {
    position: absolute; left: 0; top: -20%;
    width: 100%; height: 140%;
    will-change: transform;
  }
  .hc-tint {
    position: absolute; inset: 0;
    background:
      /* radial pool behind the text block */
      radial-gradient(1000px 700px at 16% 70%, rgba(0,0,0,0.7), transparent 72%),
      /* strong left-to-right darkening so left half is solid */
      linear-gradient(90deg, rgba(8,10,14,0.98) 0%, rgba(8,10,14,0.92) 32%, rgba(14,17,22,0.7) 62%, rgba(14,17,22,0.62) 100%),
      /* top + bottom vignette */
      linear-gradient(180deg, rgba(8,10,14,0.7) 0%, rgba(14,17,22,0.15) 30%, rgba(8,10,14,0.1) 50%, rgba(8,10,14,0.92) 100%);
    z-index: -1;
  }
  .hc-tint::after {
    /* thin yellow brand bar at bottom edge */
    content: "";
    position: absolute; left: 0; right: 0; bottom: 0;
    height: 4px;
    background: var(--yellow);
  }
  .hc-grain {
    position: absolute; inset: 0;
    background-image: radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px);
    background-size: 3px 3px;
    mix-blend-mode: overlay;
    opacity: 0.6;
    z-index: -1;
    pointer-events: none;
  }
  .hc-inner {
    width: 100%;
    padding: var(--hero-y) var(--container-px);
    display: flex; flex-direction: column;
    justify-content: flex-end;
  }
  @keyframes hcPulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(255,204,0,0.25); }
    50%      { box-shadow: 0 0 0 6px rgba(255,204,0,0.08); }
  }
  .hc-title {
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(2.5rem, 5.2vw, 4.75rem);
    line-height: 1.0;
    letter-spacing: -0.03em;
    margin: 0 0 18px;
    max-width: 18ch;
    text-wrap: balance;
    text-shadow: var(--hero-title-shadow);
  }
  .hc-acc {
    color: var(--yellow);
    font-style: italic;
    font-weight: 700;
  }
  .hc-und {
    position: relative;
    display: inline-block;
    padding-bottom: 4px;
  }
  .hc-und::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 6px;
    background: var(--yellow);
    border-radius: 2px;
  }
  .hc-sub {
    font-size: 1.03125rem;
    line-height: 1.55;
    color: rgba(255,255,255,0.90);
    max-width: 64ch;
    margin: 0 0 24px;
    text-shadow: var(--hero-text-shadow);
  }
  .hc-sub strong { color: #fff; font-weight: 700; }
  .hc-ctas {
    display: flex; gap: 12px; flex-wrap: wrap;
    margin-bottom: 40px;
  }
  .hc-ctas .btn { padding: 16px 22px; font-size: 0.9375rem; }
  .btn-ghost-light {
    background: rgba(255,255,255,0.06);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.22);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  .btn-ghost-light:hover { background: rgba(255,255,255,0.12); }

  .hc-trust {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
    padding-top: 28px;
    border-top: 1px solid rgba(255,255,255,0.14);
  }
  .hc-trust-item {
    padding: 4px 22px;
    text-align: center;
    border-right: 1px solid rgba(255,255,255,0.10);
  }
  .hc-trust-item:last-child { border-right: 0; }
  .hc-trust-item strong {
    display: block;
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(1.75rem, 2.4vw, 2.5rem);
    letter-spacing: -0.025em;
    color: var(--yellow);
    line-height: 1;
  }
  .hc-trust-item strong em {
    font-style: normal;
    font-size: 1.25rem;
    color: rgba(255,255,255,0.7);
    font-weight: 700;
    margin-left: 2px;
    letter-spacing: 0;
  }
  .hc-trust-item span {
    display: block;
    margin-top: 2px;
    font-size: 0.78125rem;
    color: rgba(255,255,255,0.92);
    font-weight: 600;
    letter-spacing: 0.02em;
  }
  @media (max-width: 1100px) {
    .hero-cinema { min-height: 440px; }
    .hc-title { font-size: clamp(2.375rem, 6vw, 3.75rem); }
    .hc-trust { grid-template-columns: repeat(3, 1fr); row-gap: 22px; }
    .hc-trust-item:nth-child(3n) { border-right: 0; }
    .hc-trust-item { padding: 0 18px; }
  }
  @media (max-width: 720px) {
    /* aire arriba del titulo y debajo de las cifras en movil. Especificidad .hero-cinema .hc-inner
       para ganar al shorthand ".wrap { padding: 0 18px }" (hc-inner tambien es .wrap y se anulaba) */
    .hero-cinema .hc-inner { padding: 25px 18px 30px; align-items: center; text-align: center; }
    .hc-title, .hc-sub { margin-left: auto; margin-right: auto; }
    .hc-ctas { justify-content: center; }
    /* cifras centradas en 2 filas (3+2) y mas pequenas; flex para que la 2a fila quede centrada */
    .hc-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px 0; }
    .hc-trust-item { flex: 0 0 33.333%; padding: 0 8px; border-right: 0; }
    .hc-trust-item strong { font-size: 1.375rem; }
    .hc-trust-item strong em { font-size: 0.8125rem; }
    .hc-trust-item span { font-size: 0.6875rem; }
  }

  /* ============ Entrada del hero en cascada (Tier1-03) ============
     Solo CSS, se dispara al cargar la pagina. Anima opacidad + un leve
     desplazamiento vertical de los elementos del hero, en secuencia
     (antetitulo -> titular -> texto -> CTA). Anima opacity/transform, asi
     que no reserva ni mueve hueco (sin layout shift) y el fondo con
     parallax no se ve afectado. Cubre los cuatro tipos de hero: portada,
     interiores, vacante y legales. Con prefers-reduced-motion el contenido
     aparece de inmediato. */
  @keyframes heroRise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
  .hc-inner > *,
  .page-hero-inner > *,
  .job-head > .wrap > *,
  .legal-hero > .wrap > * {
    animation: heroRise 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  .hc-inner > *:nth-child(1),
  .page-hero-inner > *:nth-child(1),
  .job-head > .wrap > *:nth-child(1),
  .legal-hero > .wrap > *:nth-child(1) { animation-delay: 0.05s; }
  .hc-inner > *:nth-child(2),
  .page-hero-inner > *:nth-child(2),
  .job-head > .wrap > *:nth-child(2),
  .legal-hero > .wrap > *:nth-child(2) { animation-delay: 0.16s; }
  .hc-inner > *:nth-child(3),
  .page-hero-inner > *:nth-child(3),
  .job-head > .wrap > *:nth-child(3),
  .legal-hero > .wrap > *:nth-child(3) { animation-delay: 0.28s; }
  .hc-inner > *:nth-child(4),
  .page-hero-inner > *:nth-child(4),
  .job-head > .wrap > *:nth-child(4),
  .legal-hero > .wrap > *:nth-child(4) { animation-delay: 0.42s; }
  .hc-inner > *:nth-child(5),
  .page-hero-inner > *:nth-child(5),
  .job-head > .wrap > *:nth-child(5),
  .legal-hero > .wrap > *:nth-child(5) { animation-delay: 0.54s; }
  .hc-inner > *:nth-child(6),
  .page-hero-inner > *:nth-child(6),
  .job-head > .wrap > *:nth-child(6),
  .legal-hero > .wrap > *:nth-child(6) { animation-delay: 0.64s; }
  @media (prefers-reduced-motion: reduce) {
    .hc-inner > *,
    .page-hero-inner > *,
    .job-head > .wrap > *,
    .legal-hero > .wrap > * { animation: none; }
  }

  /* ============ Aparicion al hacer scroll (Tier1-01, opt-in) ============
     Desactivado por defecto: NADA se anima salvo que se marque a mano. Dos
     formas de activarlo en un elemento concreto:
       data-reveal          -> el propio elemento entra con fundido + leve subida.
       data-reveal-stagger  -> sus hijos directos entran en cascada (p. ej. un grid).
     El estado oculto solo se aplica si <html> tiene .reveal-on, clase que el
     script de head.php anade antes de pintar y solo cuando el movimiento esta
     permitido (sin JS o con prefers-reduced-motion, el contenido se ve siempre y
     sin parpadeo). Usamos la propiedad `translate` (no `transform`) para no
     interferir con los `transform: translateY(-Npx)` de hover de las tarjetas. */
  .reveal-on [data-reveal],
  .reveal-on [data-reveal-stagger] > * {
    opacity: 0;
    translate: 0 18px;
    transition: opacity 1.2s cubic-bezier(0.33, 1, 0.68, 1),
                translate 1.2s cubic-bezier(0.33, 1, 0.68, 1);
  }
  .reveal-on [data-reveal].is-in,
  .reveal-on [data-reveal-stagger] > *.is-in {
    opacity: 1;
    translate: 0 0;
  }
  /* El escalonado entre hermanos que asoman juntos lo calcula nav.js por tandas
     (no con nth-child), para que una lista vertical larga no acumule retardo. */

  /* Contadores (Tier1-02): cifras de ancho de digito constante; ademas nav.js
     reserva el ancho del valor final para que el texto contiguo no se mueva. */
  [data-count] { font-variant-numeric: tabular-nums; }

  .hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 32px; }
  .hero-ctas .btn { padding: 16px 22px; font-size: 0.9375rem; }
  .banner-dots {
    position: absolute; left: 50%; transform: translateX(-50%);
    bottom: 14px; display: flex; gap: 5px;
  }
  .banner-dots span { width: 18px; height: 3px; border-radius: 999px; background: rgba(255,255,255,0.2); }
  .banner-dots span.is-active { background: var(--yellow); }

  /* ---------- POR QUÉ ELEKTRO3 ---------- */
  .why { background: var(--paper); padding-block: var(--section-y); }
  /* Wrapper de seccion para reutilizar la figura .why-img fuera de .why (p. ej. contacto) */
  .loc-aerial { padding-block: var(--section-y); }
  .why-head {
    display: grid;
    grid-template-columns: 1.5fr 0.9fr;
    gap: var(--gap-flow);
    align-items: center;
    margin-bottom: 30px;
    max-width: 100%;
  }
  .why-head-main { max-width: 920px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
  .why-quote {
    position: relative;
    display: flex; flex-direction: column;
  }
  .why-quote .why-quote-text {
    font-family: var(--display); font-weight: 700;
    font-size: 1.375rem; line-height: 1.25; letter-spacing: -0.02em;
    color: var(--ink); margin: 0 0 12px; position: relative; z-index: 1;
    text-wrap: balance;
  }
  /* Acento amarillo de marca como resaltado (el texto se mantiene oscuro:
     amarillo de TEXTO sobre card clara seria ilegible, ~1.2:1) */
  .why-quote .why-quote-text em {
    font-style: italic; color: var(--ink);
    background: linear-gradient(transparent 58%, var(--yellow) 58%);
  }
  /* Resaltado tipo rotulador reutilizable. SOLO para fondos CLAROS y palabras
     clave puntuales (el texto se mantiene oscuro para conservar contraste).
     En fondos oscuros el enfasis se hace con <em> amarillo (ver heroes).
     Sirve sobre <strong>, <em> o <span>; respeta el estilo del elemento. */
  .hl {
    color: var(--ink);
    background-image: linear-gradient(transparent 58%, var(--yellow) 58%);
    /* la banda se clona en cada linea si la frase salta a dos lineas */
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }
  /* Variante para fondos OSCUROS: subrayado amarillo fino y el texto en blanco
     pleno (en oscuro la banda gruesa tapa y el amarillo-texto pierde fuerza). */
  .hl-dark {
    color: #fff;
    background-image: linear-gradient(transparent 86%, var(--yellow) 86%);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }
  /* Imagotipo E3 como marca de agua (reutilizable). Aplicar .brand-stamp al bloque
     de fondo oscuro y soltar e3_brand_mark() antes del .wrap (el contenido va en
     .wrap, que elevamos por encima de la marca). */
  .brand-stamp { position: relative; overflow: hidden; isolation: isolate; }
  .brand-mark {
    position: absolute; z-index: -1; pointer-events: none;
    top: 50%; right: -1%; transform: translateY(-50%);
    height: 175%; width: auto;
    fill: #fff; opacity: 0.06;
  }
  /* .why-quote-sub: unificado con .sec-cta .sub (ver regla compartida) */
  .why-quote .go {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--display); font-weight: 700; font-size: 1rem; color: var(--ink);
    margin-top: auto;
  }
  /* disco-flecha compartido por .why-quote y .sec-cta (cuerpo y hover identicos) */
  .why-quote .go .arrow,
  .sec-cta .go .arrow {
    width: 34px; height: 34px; border-radius: 50%; background: var(--yellow); color: var(--ink);
    display: inline-flex; align-items: center; justify-content: center; transition: transform .18s ease; flex: 0 0 auto;
  }
  .why-quote:hover .go .arrow,
  .sec-cta:hover .go .arrow { transform: translateX(4px); }
  .why-h {
    font-family: var(--display);
    font-size: clamp(2.25rem, 4vw, 3.5rem);
    font-weight: 700; letter-spacing: -0.025em; line-height: 1.05;
    color: var(--heading);
    margin: 0 0 14px;
    text-wrap: balance;
    max-width: 26ch;
  }
  .why-h em {
    font-style: italic;
    color: var(--ink);
    font-weight: 700;
    position: relative;
  }
  .why-h em::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 2px;
    height: 8px; background: var(--yellow); opacity: 1; z-index: -1;
    border-radius: 2px;
  }
  .why-lead {
    font-family: var(--display);
    font-size: 1.1875rem;
    line-height: 1.5;
    letter-spacing: -0.005em;
    color: var(--ink-3);
    margin: 0;
    font-weight: 500;
    text-wrap: pretty;
    max-width: 64ch;
  }

  /* 3-up "promises" row */
  .promises {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 30px;
    padding: 28px 28px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    position: relative;
  }
  .promises::before {
    content: "";
    position: absolute; left: 24px; right: 24px; top: 0;
    height: 3px; background: var(--yellow); border-radius: 0 0 3px 3px;
  }
  .promise {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 14px;
    align-items: flex-start;
    padding-right: 12px;
    border-right: 1px solid var(--line);
  }
  .promise:last-child { border-right: 0; padding-right: 0; }
  .promise-tick {
    width: 44px; height: 44px;
    background: var(--ink); color: var(--yellow);
    border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--display); font-weight: 800; font-size: 1.375rem;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    line-height: 1;
    flex: 0 0 auto;
  }
  .promise h3 {
    font-family: var(--display);
    font-weight: 700; font-size: 1.0625rem;
    letter-spacing: -0.015em;
    margin: 4px 0 6px;
    line-height: 1.15;
  }
  .promise p { font-size: 0.875rem; color: var(--muted); margin: 0; line-height: 1.5; }

  .why-img {
    position: relative;
    margin: 0 0 0;
    border-radius: var(--r-lg);
    overflow: hidden;
    aspect-ratio: 21/9;
    background: var(--ink);
  }
  .why-img.has-overlay::after {
    content: "";
    position: absolute; left: 0; right: 0; bottom: 0;
    height: 70%;
    background: linear-gradient(180deg, rgba(14,17,22,0) 0%, rgba(14,17,22,0.35) 35%, rgba(14,17,22,0.85) 75%, rgba(14,17,22,0.96) 100%);
    pointer-events: none;
  }
  .why-img-tag {
    position: absolute;
    top: 22px; left: 22px;
    background: rgba(14,17,22,0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--yellow);
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 0.71875rem; font-weight: 700;
    letter-spacing: 0.1em; text-transform: uppercase;
    border: 1px solid rgba(255,204,0,0.4);
    z-index: 2;
  }
  .why-pillars {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    padding: 32px 36px;
    z-index: 2;
  }
  .why-pillar {
    padding: 0 22px;
    border-left: 1px solid rgba(255,255,255,0.18);
    color: #fff;
    display: flex; flex-direction: column;
    gap: 6px;
  }
  .why-pillar:first-child { border-left: 0; padding-left: 0; }
  .why-pillar:last-child { padding-right: 0; }
  .why-pillar-num {
    font-family: var(--display);
    font-weight: 700; font-size: 0.875rem;
    color: var(--yellow);
    letter-spacing: 0.04em;
    margin-bottom: 8px;
  }
  .why-pillar h3 {
    font-family: var(--display);
    font-weight: 700; font-size: 1.5625rem;
    letter-spacing: -0.015em;
    margin: 0;
    line-height: 1.1;
  }
  .why-pillar p {
    font-size: 1rem;
    line-height: 1.5;
    color: rgba(255,255,255,0.85);
    margin: 4px 0 0;
  }
  .why-img img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center;
    filter: contrast(1.05) saturate(0.9);
  }

  @media (max-width: 1100px) {
    .why-head { grid-template-columns: 1fr; gap: 28px; margin-bottom: 40px; }
    .why-quote { max-width: 560px; }
    .promises { grid-template-columns: 1fr; gap: 22px; padding: 24px; }
    .promise { border-right: 0; border-bottom: 1px solid var(--line); padding: 0 0 22px; }
    .promise:last-child { border-bottom: 0; padding-bottom: 0; }
    .why-img { aspect-ratio: auto; }
    .why-pillars { position: static; grid-template-columns: repeat(2, 1fr); padding: 24px; background: var(--ink); }
    .why-img.has-overlay::after { display: none; }
    .why-pillar { padding: 14px 18px; border-left: 1px solid rgba(255,255,255,0.12); }
    .why-pillar:nth-child(2n+1) { border-left: 0; padding-left: 0; }
    .why-pillar:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,0.12); padding-top: 22px; }
  }
  @media (max-width: 720px) {
    .why-lead { font-size: 1.0625rem; }
    .why-pillars { grid-template-columns: 1fr; gap: 0; }
    .why-pillar { border-left: 0 !important; padding: 16px 0 !important; border-top: 1px solid rgba(255,255,255,0.12); }
    .why-pillar:first-child { border-top: 0; padding-top: 0 !important; }
  }

  /* ---------- SECTION HEADERS ---------- */
  section { padding-block: var(--section-y); }

  /* ===== UNIFIED SECTION HEADER SYSTEM ===== */
  .sec-head { margin-block-end: var(--stack-head); }
  .sec-head .eyebrow {
    display: inline-flex; align-items: center; gap: 12px;
    font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--muted); margin-bottom: 14px;
  }
  .sec-head .eyebrow .bar { width: 28px; height: 2px; background: var(--yellow); display: inline-block; flex: 0 0 auto; }
  .sec-head h2 {
    font-family: var(--display); font-weight: 700;
    letter-spacing: -0.025em; line-height: 1.05; margin: 0; color: var(--heading);
  }
  .sec-head p.sub { color: var(--muted); line-height: 1.55; margin: 0; }

  /* Vertiente 1 — áurea (sin enlace) */
  .sec-head.v1 { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; max-width: 62%; }
  .sec-head.v1 .e3-eyebrow { margin-bottom: 0; }
  .sec-head.v1 h2 { font-size: clamp(2.125rem, 3.8vw, 3.25rem); max-width: 17ch; }
  .sec-head.v1 p.sub { font-size: 1.0625rem; max-width: 46ch; }

  /* Vertiente 2 — título + tarjeta clicable a la derecha (con enlace) */
  .sec-head.v2 { display: grid; grid-template-columns: 1.5fr 0.85fr; column-gap: var(--gap-flow); row-gap: 10px; align-items: stretch; }
  .sec-head.v2 .sec-cta-left { display: contents; }
  .sec-head.v2 .eyebrow { grid-column: 1 / -1; grid-row: 1; margin: 0; }
  .sec-head.v2 .e3-eyebrow { grid-column: 1 / -1; grid-row: 1; margin-bottom: 0; }
  .sec-head.v2 h2 { grid-column: 1; grid-row: 2; align-self: start; font-size: clamp(2rem, 3.6vw, 3rem); max-width: 15ch; }
  .sec-head.v2 .sec-cta { grid-column: 2; grid-row: 2; }
  .sec-cta {
    display: flex; flex-direction: column; justify-content: space-between; gap: 18px;
    color: var(--ink);
  }
  /* Descripcion de caja CTA: tamano unico para .sec-cta y .why-quote (card--cta) */
  .sec-cta .sub, .why-quote .why-quote-sub { font-size: 0.9375rem; color: var(--muted); line-height: 1.5; margin: 0; }
  .sec-cta .go { display: inline-flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 700; font-size: 1rem; color: var(--ink); }
  /* .sec-cta .go .arrow (+:hover) fusionado con .why-quote .go .arrow (ver regla compartida arriba) */

  /* dark-section variant of the áurea header (Marcas del grupo) */
  .sec-head.on-dark h2 { color: #fff; }
  .sec-head.on-dark p.sub { color: rgba(255,255,255,0.65); }
  /* v2 on dark: title + eyebrow turn light, the card stays light */
  .sec-head.v2.on-dark .eyebrow { color: rgba(255,255,255,0.7); }
  .sec-head.v2.on-dark h2 { color: #fff; }
  /* dark card variant on dark sections: combina con las brand-card (--ink-2), no canta */
  .sec-head.v2.on-dark .sec-cta { background: var(--ink-2); border-color: rgba(255,255,255,0.06); color: #fff; }
  .sec-head.v2.on-dark .sec-cta:hover { background: var(--ink-3); border-color: rgba(255,255,255,0.12); box-shadow: 0 20px 44px -22px rgba(0,0,0,0.6); }
  .sec-head.v2.on-dark .sec-cta .sub { color: rgba(255,255,255,0.7); }
  .sec-head.v2.on-dark .sec-cta .go { color: #fff; }

  /* CTA del bloque de noticias: solo un boton "todas las noticias", sin card, para ganar altura */
  .sec-head.v2 .news-all {
    grid-column: 2; grid-row: 2; align-self: end; justify-self: end;
    display: inline-flex; align-items: center; gap: 9px; white-space: nowrap;
    font-family: var(--display); font-weight: 700; font-size: 0.875rem; color: var(--ink);
    padding: 11px 20px; border: 1px solid var(--line); border-radius: 999px; background: #fff;
    transition: border-color .18s ease, box-shadow .18s ease;
  }
  .sec-head.v2 .news-all:hover { border-color: var(--ink-3); box-shadow: 0 12px 26px -20px rgba(14,17,22,0.4); }
  .sec-head.v2 .news-all .arrow { display: inline-flex; transition: transform .18s ease; }
  .sec-head.v2 .news-all:hover .arrow { transform: translateX(3px); }

  @media (max-width: 900px) {
    .sec-head.v1 { max-width: 100%; }
    .sec-head.v2 { grid-template-columns: 1fr; row-gap: 18px; }
    .sec-head.v2 h2 { grid-column: 1; grid-row: 2; }
    .sec-head.v2 .sec-cta { grid-column: 1; grid-row: 3; }
    .sec-head.v2 .news-all { grid-column: 1; grid-row: 3; justify-self: start; align-self: start; }
  }

  /* ---------- B2B PLATFORM (nueva sección) ---------- */
  .b2b {
    background: var(--paper);
    padding-block: var(--section-y);
    position: relative;
  }

  .b2b-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
  }
  .b2b-card {
    display: flex; flex-direction: column;
    position: relative;
  }
  .b2b-card .b2b-icon {
    width: 38px; height: 38px;
    color: var(--ink);
    margin-bottom: 18px;
  }
  .b2b-card .b2b-icon svg { width: 100%; height: 100%; stroke-linecap: round; stroke-linejoin: round; }
  .b2b-card .b2b-tag {
    position: absolute; top: 18px; right: 18px;
    background: var(--paper-2);
    padding: 4px 9px;
    border-radius: 999px;
    font-size: 0.65625rem;
    font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--ink-3);
  }
  .b2b-card .b2b-tag-new {
    background: var(--yellow);
    color: var(--ink);
  }
  .b2b-card h3 {
    font-family: var(--display);
    font-weight: 700;
    font-size: 1.0625rem;
    letter-spacing: -0.015em;
    margin: 0 0 8px;
    line-height: 1.2;
  }
  .b2b-card p {
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--muted);
    margin: 0;
  }

  /* Big featured card spans 2 columns */
  .b2b-card.b2b-key {
    grid-column: span 2;
    grid-row: span 2;
    background: var(--ink);
    color: #fff;
    border-color: var(--ink);
    padding: 36px 32px 32px;
  }
  .b2b-card.b2b-key .b2b-icon { color: var(--yellow); width: 48px; height: 48px; margin-bottom: 28px; }
  .b2b-card.b2b-key .b2b-tag {
    background: var(--yellow); color: var(--ink);
    position: static;
    align-self: flex-start;
    margin-bottom: 16px;
  }
  .b2b-card.b2b-key h3 {
    font-size: 1.875rem;
    letter-spacing: -0.02em;
    line-height: 1.05;
    margin-bottom: 14px;
    max-width: 18ch;
  }
  .b2b-card.b2b-key p {
    color: rgba(255,255,255,0.75);
    font-size: 0.9375rem;
    margin-bottom: 24px;
    max-width: 36ch;
  }
  .b2b-link {
    margin-top: auto;
    align-self: flex-start;
    font-weight: 700; font-size: 0.875rem;
    color: var(--yellow);
    padding-bottom: 4px;
    border-bottom: 1.5px solid var(--yellow);
  }
  .b2b-link:hover { color: #fff; border-bottom-color: #fff; }

  @media (max-width: 1100px) {
    .b2b-grid { grid-template-columns: repeat(2, 1fr); }
    .b2b-card.b2b-key { grid-column: span 2; grid-row: auto; padding: 32px 28px; }
    .b2b-card.b2b-key h3 { font-size: 1.625rem; }
  }
  @media (max-width: 720px) {
    .b2b-grid { grid-template-columns: 1fr; }
    .b2b-card.b2b-key { grid-column: span 1; }
  }

  /* ---------- TECNOLOGÍA & I+D ---------- */
  .tech {
    background: var(--ink);
    color: #fff;
    padding-block: var(--section-y);
    position: relative;
    overflow: hidden;
  }
  .tech::before {
    content: "";
    position: absolute; inset: 0;
    background-image:
      linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(circle at 75% 30%, #000 0%, transparent 70%);
    -webkit-mask-image: radial-gradient(circle at 75% 30%, #000 0%, transparent 70%);
    pointer-events: none;
  }
  .tech-grid {
    display: grid; grid-template-columns: 0.85fr 1.15fr; gap: var(--gap-flow);
    align-items: center; position: relative; z-index: 1;
  }
  .tech-h {
    font-family: var(--display); font-weight: 700;
    font-size: clamp(1.875rem, 3.4vw, 2.875rem); letter-spacing: -0.025em; line-height: 1.06;
    margin: 0 0 18px; max-width: 18ch;
  }
  .tech-h em { font-style: italic; color: var(--yellow); }
  .tech-lead {
    font-size: 1rem; line-height: 1.6; color: rgba(255,255,255,0.72);
    margin: 0 0 28px; max-width: 46ch;
  }
  .tech-lead strong { color: #fff; font-weight: 700; }

  .tech-cards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-cards); }
  .tech-card {
    display: flex; flex-direction: column;
    position: relative;
  }
  .tech-card.has-link:hover { background: rgba(255,255,255,0.07); border-color: rgba(255,204,0,0.45); transform: translateY(-3px); }
  .tech-ic {
    width: 44px; height: 44px; border-radius: 11px;
    background: rgba(255,204,0,0.12); color: var(--yellow);
    display: inline-flex; align-items: center; justify-content: center;
    margin-bottom: 16px;
  }
  .tech-ic svg { width: 22px; height: 22px; }
  .tech-card h3 {
    font-family: var(--display); font-weight: 700; font-size: 1.125rem;
    letter-spacing: -0.015em; margin: 0 0 8px; line-height: 1.15;
  }
  .tech-card p { font-size: 0.875rem; line-height: 1.5; color: rgba(255,255,255,0.68); margin: 0; flex: 1; }
  .tech-tag {
    position: absolute; top: 18px; right: 18px;
    font-size: 0.625rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--ink); background: var(--yellow);
    padding: 4px 8px; border-radius: 999px;
  }
  .tech-go {
    margin-top: 16px; font-family: var(--display); font-weight: 700; font-size: 0.84375rem;
    color: var(--yellow);
  }
  .tech-card.has-link:hover .tech-go { color: #fff; }

  .tech-strip {
    margin-top: 36px; padding-top: 28px;
    border-top: 1px solid rgba(255,255,255,0.1);
    display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
    position: relative; z-index: 1;
  }
  .tech-strip-label { font-size: 0.8125rem; font-weight: 700; color: rgba(255,255,255,0.5); letter-spacing: 0.02em; }
  .tech-strip-items { display: flex; flex-wrap: wrap; gap: 8px; }
  .tech-strip-items span {
    font-size: 0.8125rem; font-weight: 600; color: rgba(255,255,255,0.85);
    padding: 7px 14px; border-radius: 999px;
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
  }

  /* careers integrated into tech (dark) */
  /* Seccion oscura reutilizable para alojar el bloque .tech-careers fuera de .tech */
  .careers { background: var(--ink); color: #fff; padding-block: var(--section-y); }
  .careers .tech-careers { margin-top: 0; }

  .tech-careers {
    margin-top: 16px;
    display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 0;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 18px; overflow: hidden;
    position: relative; z-index: 1;
  }
  .tech-careers-left {
    padding: 36px 38px;
    background: linear-gradient(135deg, rgba(255,106,26,0.14), rgba(255,255,255,0.02));
    border-right: 1px solid rgba(255,255,255,0.08);
  }
  .tech-careers-left h3 {
    font-family: var(--display); font-weight: 700;
    font-size: clamp(1.625rem, 2.6vw, 2.25rem); letter-spacing: -0.02em; line-height: 1.05;
    margin: 0 0 14px; color: #fff;
  }
  .tech-careers-left h3 em { font-style: italic; color: var(--orange); }
  .tech-careers-left p { font-size: 0.90625rem; line-height: 1.6; color: rgba(255,255,255,0.72); margin: 0 0 24px; }
  .tech-careers-left p strong { color: #fff; font-weight: 700; }
  .tech-careers-actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
  .tech-careers-link { font-family: var(--display); font-weight: 700; font-size: 0.875rem; color: var(--yellow); }
  .tech-careers-link:hover { color: #fff; }

  .tech-careers-right { padding: 36px 38px; display: flex; flex-direction: column; }
  .tech-careers-tag {
    font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
    color: rgba(255,255,255,0.5); margin-bottom: 18px;
  }
  .tech-careers-list { list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
  .tech-careers-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 0.875rem; color: rgba(255,255,255,0.82); line-height: 1.4; }
  .tech-careers-list svg { flex: 0 0 auto; width: 20px; height: 20px; color: var(--orange); margin-top: 1px; }
  .tech-careers-facts {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
    padding-top: 22px; border-top: 1px solid rgba(255,255,255,0.1);
  }
  .tech-careers-facts div { display: flex; flex-direction: column; }
  .tech-careers-facts strong { font-family: var(--display); font-weight: 800; font-size: 1.625rem; color: var(--yellow); letter-spacing: -0.02em; line-height: 1; }
  /* solo la etiqueta (span hijo directo del div); NO el numero, que va dentro del <strong> */
  .tech-careers-facts > div > span { font-size: 0.71875rem; color: rgba(255,255,255,0.55); margin-top: 5px; }

  @media (max-width: 900px) {
    .tech-careers { grid-template-columns: 1fr; }
    .tech-careers-left { border-right: 0; border-bottom: 1px solid rgba(255,255,255,0.08); }
  }

  @media (max-width: 1100px) {
    .tech-grid { grid-template-columns: 1fr; gap: 36px; }
  }
  @media (max-width: 720px) {
    .tech-cards { grid-template-columns: 1fr; }
  }

  /* ---------- QUIERO UNA FERRETERÍA (cross-promo) ---------- */
  .qf { background: var(--paper-2); padding-block: var(--section-y-sm); }
  /* Embebido bajo las cards de servicios (mismo bloque): separacion respecto al grid */
  .qf-card--inline { margin-top: var(--sp-7); }
  .qf-card {
    background: radial-gradient(90% 150% at 50% 50%, #243549 0%, var(--ink) 65%);
    border-radius: 24px;
    padding: 44px 48px;
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1.3fr 0.9fr;
    gap: var(--gap-flow);
    align-items: center;
    color: #fff;
  }
  .qf-url {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--yellow);
    font-family: var(--body); font-weight: 700;
    font-size: 0.8125rem; letter-spacing: 0.04em;
    padding-bottom: 4px; border-bottom: 1.5px dashed rgba(255,204,0,0.4);
  }
  .qf-url:hover { color: #fff; border-bottom-color: #fff; }
  .qf-h {
    font-family: var(--display);
    font-size: clamp(2rem, 3.4vw, 2.75rem);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.05;
    margin: 22px 0 16px;
    max-width: 22ch;
    text-wrap: balance;
  }
  .qf-sub {
    font-size: 0.96875rem;
    line-height: 1.55;
    color: rgba(255,255,255,0.72);
    margin: 0 0 32px;
    max-width: 60ch;
  }
  .qf-sub strong { color: #fff; font-weight: 700; }
  .qf-actions {
    display: flex; align-items: center; gap: 22px;
    flex-wrap: wrap;
  }
  .qf-actions .btn { padding: 16px 22px; font-size: 0.90625rem; }
  .qf-meta { font-size: 0.78125rem; color: rgba(255,255,255,0.5); letter-spacing: 0.02em; }
  .qf-visual { position: relative; }
  .qf-screen {
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    color: var(--ink);
    box-shadow: 0 24px 60px -20px rgba(0,0,0,0.5);
    transform: rotate(2deg);
  }
  .qf-browser-bar {
    display: flex; align-items: center; gap: 6px;
    padding: 10px 14px;
    background: var(--paper-2);
    border-bottom: 1px solid var(--line);
  }
  .qf-browser-bar .dot { width: 9px; height: 9px; border-radius: 50%; }
  .qf-browser-bar .dot.r { background: var(--mac-red); }
  .qf-browser-bar .dot.y { background: var(--mac-yellow); }
  .qf-browser-bar .dot.g { background: var(--mac-green); }
  .qf-browser-url {
    margin-left: 10px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 4px 12px;
    font-size: 0.71875rem;
    font-weight: 600;
    color: var(--ink-3);
    font-family: var(--body);
    flex: 1;
    max-width: 240px;
  }
  .qf-screen-shot {
    background: var(--ink);
    line-height: 0;
  }
  .qf-screen-shot img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
  }
  .qf-screen-stat {
    position: absolute;
    left: -16px; bottom: -12px;
    background: var(--yellow); color: var(--ink);
    padding: 14px 18px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    box-shadow: 0 14px 30px -12px rgba(0,0,0,0.35);
    transform: rotate(-4deg);
    display: flex; flex-direction: column; gap: 2px;
    max-width: 160px;
  }
  .qf-screen-stat strong {
    font-family: var(--display); font-weight: 800;
    font-size: 1.375rem; line-height: 1; letter-spacing: -0.02em;
  }
  @media (max-width: 1100px) {
    .qf-card { grid-template-columns: 1fr; padding: 40px 32px; gap: 40px; }
    .qf-visual { max-width: 420px; margin: 0 auto; }
  }
  @media (max-width: 720px) {
    .qf-card { padding: 32px 22px; }
    .qf-screen-stat { left: 0; bottom: -16px; }
  }

  /* ---------- CATÁLOGO MAYORISTA (card a todo el ancho dentro del grid B2B) ---------- */
  .catalog-card { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 279px; gap: var(--sp-6); align-items: stretch; overflow: hidden; }
  .catalog-main { min-width: 0; display: flex; flex-direction: column; }
  /* foto a sangre por arriba/derecha/abajo (anula el padding de .card) para alinear con las cards de arriba */
  .cat-photo { position: relative; overflow: hidden; background: var(--ink-2); min-height: 260px; margin: -1.75rem -1.5rem -1.75rem 0; }
  .cat-photo-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center bottom; opacity: 0; transition: opacity .45s ease; z-index: 0; }
  .cat-photo-img.is-active { opacity: 1; }
  .cat-photo::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, transparent 48%, rgba(14,17,22,0.55) 100%); pointer-events: none; }
  .cat-photo-label { position: absolute; z-index: 2; left: 14px; bottom: 13px; color: #fff; font: 700 0.75rem/1 var(--body); letter-spacing: .08em; text-transform: uppercase; padding: 7px 12px; background: rgba(14,17,22,0.5); backdrop-filter: blur(5px); border-radius: 8px; }
  @media (max-width: 860px) { .catalog-card { grid-template-columns: 1fr; overflow: visible; } .cat-photo { min-height: 200px; margin: 0; border-radius: 14px; } }
  .catalog-card-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--sp-5); flex-wrap: wrap; margin-bottom: 18px;
  }
  .catalog-card-head h3 {
    font-family: var(--display); font-weight: 700; color: var(--heading);
    font-size: clamp(1rem, 1.4vw, 1.1875rem); letter-spacing: -0.01em; line-height: 1.25;
    margin: 0; max-width: 46ch;
  }
  .catalog-stats { display: flex; gap: 22px; flex: 0 0 auto; }
  .cat-stat { display: flex; align-items: baseline; gap: 5px; }
  .cat-stat strong { font-family: var(--display); font-weight: 700; color: var(--heading); font-size: 1rem; letter-spacing: -0.01em; }
  .cat-stat span { font-size: 0.75rem; color: var(--muted); }

  .cat-pills { display: flex; flex-wrap: wrap; gap: 10px; }
  .cat-pill {
    display: inline-flex; align-items: center;
    padding: 9px 13px; border-radius: 8px;
    background: linear-gradient(180deg, #ffffff 0%, var(--paper-2) 100%);
    border: 1px solid var(--line); color: var(--heading);
    font: 600 0.8125rem/1 var(--body); text-decoration: none; white-space: nowrap;
    box-shadow: 0 1px 1px rgba(20,17,16,0.03);
    transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
  }
  .cat-pill:hover { border-color: var(--ink-3); transform: translateY(-2px); box-shadow: 0 8px 18px -10px rgba(20,17,16,0.25); }
  .cat-pill.is-active { border-color: var(--ink-3); background: linear-gradient(180deg, #ffffff 0%, var(--paper) 100%); box-shadow: 0 6px 16px -10px rgba(20,17,16,0.3); }
  .cat-pill-num {
    font-weight: 700; font-size: 0.6875rem; color: var(--muted);
    margin-left: 9px; padding-left: 9px; border-left: 1px solid var(--line);
  }
  .cat-pill--all {
    background: linear-gradient(180deg, var(--ink-2) 0%, var(--ink) 100%);
    border-color: var(--ink); color: #fff; font-weight: 700;
  }
  .cat-pill--all:hover { border-color: var(--ink-2); transform: translateY(-2px); box-shadow: 0 8px 18px -10px rgba(20,17,16,0.45); }
  @media (max-width: 720px) {
    /* movil compacto: sin foto y solo 5 familias + "Ver todas" */
    .catalog-card .cat-photo { display: none; }
    .cat-pills .cat-pill:nth-child(n+6):not(.cat-pill--all) { display: none; }
  }

  /* ---------- MARCAS PROPIAS ---------- */
  .brands-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--gap-cards); }
  .brand-card {
    background: var(--ink-2); border-radius: var(--r-lg);
    padding: 28px 24px 24px;
    border: 1px solid rgba(255,255,255,0.06);
    display: flex; flex-direction: column;
    min-height: 280px; position: relative; overflow: hidden;
  }
  .brand-card .logo-plate {
    height: 88px;
    background: #fff;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    padding: 16px 20px;
    margin-bottom: 18px;
  }
  .brand-card .logo-plate img {
    max-height: 100%;
    max-width: 80%;
    width: auto; height: auto;
    object-fit: contain;
  }
  .brand-card h3 {
    font-family: var(--display); font-weight: 800; font-size: 1.625rem;
    margin: 0; letter-spacing: -0.02em; line-height: 1;
  }
  .brand-card .cat {
    font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase;
    color: rgba(255,255,255,0.5); margin: 4px 0 14px;
  }
  .brand-card p { font-size: 0.875rem; color: rgba(255,255,255,0.7); margin: 0 0 18px; flex: 1; }
  .brand-card .stats-row {
    display: flex; gap: 16px; font-size: 0.75rem; color: rgba(255,255,255,0.5);
    padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.08);
  }
  .brand-card .stats-row strong { display: block; font-family: var(--display); font-weight: 700; font-size: 1.125rem; color: #fff; }
  .brand-card .corner {
    position: absolute; top: 18px; right: 18px;
    width: 30px; height: 30px; border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.15);
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,0.5);
  }
  .brand-card:hover .corner { background: var(--yellow); border-color: var(--yellow); color: var(--ink); }
  /* only linked cards get the out-arrow + pointer + lift */
  .brand-card .corner { display: none; }
  .brand-card.has-link { cursor: pointer; }
  .brand-card.has-link .corner { display: flex; }
  .brand-card.has-link { transition: transform .2s ease, border-color .2s ease; }
  .brand-card.has-link:hover { transform: translateY(-3px); border-color: rgba(255,204,0,0.4); }
  .brand-card .brand-url {
    margin-left: auto;
    align-self: center;
    font-family: var(--body); font-weight: 700;
    font-size: 0.75rem; letter-spacing: 0.02em;
    color: var(--yellow);
  }
  .brand-card .brand-url::before { content: "↗ "; }

  /* Group facts strip */
  .brands-facts {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    margin-top: 40px;
    padding-top: 36px;
    border-top: 1px solid rgba(255,255,255,0.1);
  }
  .bf-item {
    padding: 0 28px;
    border-left: 1px solid rgba(255,255,255,0.1);
  }
  .bf-item:first-child { border-left: 0; padding-left: 0; }
  .bf-item strong {
    display: block;
    font-family: var(--display); font-weight: 800;
    font-size: 2.375rem; letter-spacing: -0.03em; line-height: 1;
    color: var(--yellow);
  }
  .bf-item span { display: block; font-size: 0.8125rem; color: rgba(255,255,255,0.6); margin-top: 8px; }
  @media (max-width: 720px) {
    .brands-facts { grid-template-columns: repeat(2, 1fr); gap: 28px 0; }
    .bf-item { border-left: 0; padding: 0 16px; }
    .bf-item:nth-child(odd) { padding-left: 0; }
  }

  /* Degradado suave + glows, reutilizable (timeline, servicios, showroom...) */
  /* overflow-x: clip recorta el glow lateral SIN crear contenedor de scroll ni romper el position:sticky interno (a diferencia de overflow:hidden) */
  .glow-section { position: relative; overflow-x: clip; background: linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 52%, var(--paper-3) 100%); }
  .glow-section::before, .glow-section::after { content: ""; position: absolute; z-index: 0; border-radius: 50%; pointer-events: none; }
  .glow-section::before { width: 480px; height: 480px; top: 10%; right: -150px; background: radial-gradient(circle, rgba(255,204,0,0.18), transparent 70%); filter: blur(34px); }
  .glow-section::after { width: 440px; height: 440px; bottom: 8%; left: -140px; background: radial-gradient(circle, rgba(255,204,0,0.13), transparent 70%); filter: blur(44px); }
  .glow-section > .wrap { position: relative; z-index: 1; }

  /* ---------- SHOWROOM ---------- */
  .showroom { padding-block: var(--section-y); }
  .sh-card {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 0;
    border-radius: 24px;
    overflow: hidden;
    background: var(--ink);
    color: #fff;
  }
  .sh-media {
    position: relative;
    margin: 0;
    min-height: 480px;
  }
  .sh-media img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center;
  }
  /* slideshow fade */
  .sh-slideshow .sh-slide {
    opacity: 0;
    transition: opacity 1.4s ease;
    will-change: opacity;
  }
  .sh-slideshow .sh-slide.is-active {
    opacity: 1;
  }
  .sh-badge {
    position: absolute;
    left: 22px; bottom: 22px;
    background: rgba(14,17,22,0.78);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255,204,0,0.4);
    color: var(--yellow);
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 0.71875rem; font-weight: 700;
    letter-spacing: 0.05em; text-transform: uppercase;
    max-width: calc(100% - 44px);
    line-height: 1.3;
  }
  .sh-body {
    padding: 56px 56px;
    display: flex; flex-direction: column;
    justify-content: center;
  }
  .sh-h {
    font-family: var(--display);
    font-size: clamp(1.875rem, 3.2vw, 2.75rem);
    font-weight: 700; letter-spacing: -0.025em; line-height: 1.05;
    margin: 0 0 16px;
    max-width: 18ch;
  }
  .sh-lead {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: rgba(255,255,255,0.74);
    margin: 0 0 28px;
    max-width: 52ch;
  }
  .sh-feats {
    list-style: none; padding: 0; margin: 0 0 32px;
    display: flex; flex-direction: column; gap: 16px;
  }
  .sh-feats li {
    display: grid; grid-template-columns: 40px 1fr;
    gap: 14px; align-items: center;
  }
  .sh-feats svg {
    width: 40px; height: 40px;
    padding: 9px;
    border-radius: 10px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
    color: var(--yellow);
  }
  .sh-feats strong { display: block; font-family: var(--display); font-weight: 700; font-size: 0.9375rem; letter-spacing: -0.01em; }
  .sh-feats span { font-size: 0.8125rem; color: rgba(255,255,255,0.6); line-height: 1.35; }
  .sh-actions { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
  .sh-actions .btn { padding: 16px 22px; font-size: 0.90625rem; }
  .sh-link {
    font-weight: 700; font-size: 0.875rem; color: #fff;
  }
  .sh-link:hover { color: var(--yellow); }

  @media (max-width: 1100px) {
    .sh-card { grid-template-columns: 1fr; }
    .sh-media { min-height: 320px; }
    .sh-body { padding: 40px 32px; }
  }
  @media (max-width: 720px) {
    .sh-body { padding: 32px 22px; }
    .sh-badge { max-width: calc(100% - 44px); }
  }

  /* ---------- SERVICIOS ---------- */
  .services { background: var(--paper-2); }
  .services-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: var(--gap-cards);
  }
  .svc-card {
    display: flex; gap: 16px; align-items: flex-start;
  }
  .svc-card .icon {
    flex: 0 0 auto; width: 44px; height: 44px; border-radius: 10px;
    background: var(--paper-2); color: var(--ink);
    display: inline-flex; align-items: center; justify-content: center;
  }
  .svc-card.is-key .icon { background: var(--yellow); }
  .svc-card h3 { font-family: var(--display); font-weight: 700; font-size: 1.0625rem; margin: 0 0 4px; letter-spacing: -0.01em; }
  .svc-card p { font-size: 0.875rem; color: var(--muted); margin: 0; line-height: 1.45; }

  /* ---------- MARCAS DISTRIBUIDAS ---------- */
  .brands-dist { background: var(--paper); }
  .brands-strip {
    display: grid; grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: 148px;
    gap: 0;
    border: 1px solid var(--line); border-radius: var(--r-lg);
    background: #fff; overflow: hidden;
  }
  .bs-cell {
    display: flex; align-items: center; justify-content: center;
    border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
    font-family: var(--display); font-weight: 800; letter-spacing: -0.02em;
    color: var(--ink); font-size: 1.375rem;
    transition: background 0.2s ease;
  }
  .bs-cell:hover { background: var(--paper-2); }
  .bs-cell:nth-child(6n) { border-right: 0; }
  .bs-cell.row-last { border-bottom: 0; }
  .bs-cell img { max-width: 88%; max-height: 76%; object-fit: contain; display: block; }
  .bs-cell .sm { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.04em; color: var(--muted); text-transform: uppercase; }
  /* Fallback: marca sin logo -> nombre centrado (hereda display/bold/ink de .bs-cell) */
  .bs-cell .bs-name { padding: 0 14px; font-size: 1rem; line-height: 1.15; text-align: center; }
  .bs-cell.more-cell { background: var(--ink); text-decoration: none; }
  .bs-cell.more-cell .sm { color: #fff; }
  .bs-cell.more-cell:hover { background: var(--ink-2); }

  .brands-dist .foot {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 20px; font-size: 0.875rem; color: var(--muted);
  }
  .brands-dist .foot strong { color: var(--ink); }

  /* Marcas exclusivas (placeholders nombre + pista hasta tener logos) */
  .brands-excl { background: var(--paper-2); }
  .excl-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 16px;
  }
  .excl-card {
    display: flex; flex-direction: column; align-items: center; gap: 14px;
    text-align: center;
  }
  .excl-logo {
    height: 140px; width: 100%;
    display: flex; align-items: center; justify-content: center;
  }
  .excl-logo img { max-height: 100%; max-width: 100%; object-fit: contain; display: block; }
  .excl-cat { font-size: 0.84375rem; line-height: 1.45; color: var(--muted); margin: 0; }
  @media (max-width: 1100px) {
    .brands-strip { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 165px; }
    .bs-cell { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
    .bs-cell:nth-child(6n) { border-right: 1px solid var(--line); }
    .bs-cell:nth-child(4n) { border-right: 0; }
    .bs-cell.row-last { border-bottom: 1px solid var(--line); }
  }
  @media (max-width: 720px) {
    /* 2 marcas por linea en movil: logos mas grandes y "+800 marcas ->" cabe en una sola linea */
    .brands-strip { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 132px; }
    .bs-cell { border-right: 1px solid var(--line) !important; }
    .bs-cell.more-cell .sm { white-space: nowrap; }
  }

  /* ============================================================
     MARCAS — seccion unica con PESTAÑAS sobre fondo oscuro.
     Barra (Variante A): subrayado amarillo deslizante + indice
     editorial (01/02/03). Cada panel conserva su layout interno
     (marcas propias / exclusivas / tira de distribuidas).
     ============================================================ */
  .brands-tabs { background: var(--ink); color: #fff; padding-block: var(--section-y); }

  /* Pestañas con el lenguaje de los eyebrows del sitio: disco + nombre + linea.
     A todo el ancho (cada tab flex:1, su linea rellena el tramo). Activo = disco amarillo. */
  .tabs {
    display: flex; align-items: center; gap: 6px;
    margin-bottom: var(--sp-7);
    border: 1px solid rgba(255,255,255,0.14); border-radius: var(--r-lg);
    padding: clamp(8px, 1vw, 12px);
    overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tab {
    flex: 1 1 0; min-width: 0;
    background: none; border: 0; padding: 12px 16px; border-radius: 14px; cursor: pointer;
    display: flex; align-items: center; gap: 14px; font-family: var(--body);
    transition: background .2s ease;
  }
  .tab-disc {
    width: 34px; height: 34px; flex: 0 0 auto; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.14);
    color: rgba(255,255,255,0.72);   /* color del imagotipo (currentColor) en inactivo */
    transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, color .2s ease;
  }
  .tab-ico { height: 18px; width: auto; display: block; flex: 0 0 auto; }
  .tab-text { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; min-width: 0; }
  .tab-lbl {
    white-space: nowrap; font-weight: 700; font-size: 0.8125rem; letter-spacing: 0.14em;
    text-transform: uppercase; color: rgba(255,255,255,0.68); transition: color .2s ease;
  }
  .tab-count {
    white-space: nowrap; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.02em;
    color: rgba(255,255,255,0.5); transition: color .2s ease;
  }
  .tab[aria-selected="true"] .tab-count { color: var(--yellow); }
  .tab-rule { flex: 1; height: 2px; min-width: 24px; background: rgba(255,255,255,0.13); border-radius: 2px; transition: background .2s ease; }
  .tab[aria-selected="false"]:hover { background: rgba(255,255,255,0.045); }
  .tab:hover .tab-lbl { color: rgba(255,255,255,0.82); }
  .tab:focus-visible { outline: 2px solid var(--yellow); outline-offset: 4px; border-radius: 6px; }
  .tab[aria-selected="true"] { background: var(--ink-2); }
  .tab[aria-selected="true"] .tab-disc {
    background: var(--yellow); border-color: var(--yellow); color: #161616;
    box-shadow: -3px -3px 6px rgba(0,0,0,0.45), 3px 3px 7px rgba(255,238,170,0.30);
  }
  .tab[aria-selected="true"] .tab-lbl { color: #fff; }
  .tab[aria-selected="true"] .tab-rule { background: var(--yellow); }
  @media (max-width: 900px) {
    .tabs { gap: clamp(6px, 2vw, 14px); }
    .tab { flex: 0 0 auto; }
    .tab-rule { display: none; }
  }

  /* Paneles: solo uno visible; alto suave (JS) + fundido de entrada */
  .tabs-panels { position: relative; transition: height .35s cubic-bezier(.4,0,.2,1); }
  .tab-panel { animation: tabfade .4s ease; }
  .tab-panel[hidden] { display: none; }
  @keyframes tabfade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

  /* sec-head dentro de panel: sin eyebrow -> h2 + card CTA en una sola fila */
  .sec-head.v2.is-panel h2 { grid-row: 1; }
  .sec-head.v2.is-panel .sec-cta { grid-row: 1; }

  /* Pie de "marcas que distribuimos" adaptado a fondo oscuro */
  .brands-tabs .foot {
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;
    gap: 12px; margin-top: 20px; font-size: 0.875rem; color: rgba(255,255,255,0.6);
  }
  .brands-tabs .foot strong { color: #fff; }
  .brands-tabs .foot .link { color: var(--yellow); }

  @media (max-width: 900px) {
    .sec-head.v2.is-panel h2 { grid-row: 1; }
    .sec-head.v2.is-panel .sec-cta { grid-row: 2; }
  }



  /* Nuestro compromiso verde */
  .green {
    background: #E6F4EB; /* verde claro solido */
  }
  /* Cabecera de seccion a 2 columnas: texto (izq) + imagen cuadrada (der).
     Reutilizable: sostenibilidad (economia circular) y compromiso social. */
  .split-head {
    display: flex; align-items: center; gap: var(--gap-flow);
    margin-block-end: var(--stack-head);
  }
  .split-head .sec-head { margin-block-end: 0; max-width: none; flex: 1 1 auto; }
  .split-head-img {
    flex: 0 0 auto; width: clamp(180px, 22vw, 280px); height: auto;
    align-self: center;
  }
  @media (max-width: 720px) {
    .split-head { flex-direction: column; align-items: flex-start; gap: var(--sp-5); }
    .split-head-img { width: clamp(150px, 38vw, 220px); align-self: center; }
  }
  .green-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: var(--gap-cards);
  }
  .green-card {
    position: relative;
  }
  .green-ic {
    width: 46px; height: 46px; border-radius: var(--r-md);
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--green-tint); color: var(--green);
    margin-bottom: 14px;
  }
  .green-ic svg { width: 24px; height: 24px; }
  .green-card h3 {
    font-family: var(--display); font-weight: 700; font-size: 1.0625rem;
    letter-spacing: -0.015em; margin: 0 0 6px; line-height: 1.2;
  }
  .green-card p { font-size: 0.875rem; color: var(--muted); margin: 0; line-height: 1.55; }
  .green-card.is-soon { border-style: dashed; }
  .green-tag {
    position: absolute; top: 16px; right: 16px;
    font-size: 0.65625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--green); background: var(--green-tint);
    padding: 4px 9px; border-radius: 999px;
  }
  
  

  /* ---------- NOTICIAS ---------- */
  .news { background: var(--paper-2); }
  .news .sec-head { margin-block-end: 24px; }
  .news-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: var(--gap-cards); }
  .news-card {
    display: flex; flex-direction: column;
  }
  .news-thumb {
    aspect-ratio: 16/10;
    position: relative;
    background: var(--paper-2);   /* fallback mientras carga la imagen; claro para que no se note en las esquinas redondeadas de la foto */
    color: #fff;
  }
  .news-thumb img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; display: block;
    border-radius: 14px 14px 0 0;
    box-shadow: 0 8px 26px -12px rgba(14,17,22,0.4);
  }
  .news-thumb .badge {
    position: absolute; top: 16px; left: 16px; z-index: 1;
    background: rgba(14,17,22,0.65); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    padding: 5px 10px; border-radius: 999px;
    font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  }
  .news-body { padding: 20px 22px; flex: 1; display: flex; flex-direction: column; }
  .news-body .meta { font-size: 0.75rem; color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; font-weight: 600; }
  /* Titulo (2 lineas) y extracto (4 lineas) acotados -> alturas de card parejas en los
     bloques verticales (home, tecnologia, marcas, relacionadas). El listado horizontal
     tiene su propio recorte mas especifico (.press-main .news-grid) y no se ve afectado. */
  .news-body h3 { font-family: var(--display); font-weight: 700; font-size: 1.3125rem; margin: 4px 0 10px; letter-spacing: -0.01em; line-height: 1.15; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 2; line-clamp: 2; }
  .news-body p { font-size: 0.875rem; color: var(--muted); margin: 0; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 4; line-clamp: 4; }
  .news-body .more { font-weight: 700; font-size: 0.8125rem; color: var(--ink); display: inline-flex; align-items: center; gap: 8px; }
  .news-body .more::after { content: "→"; }

  /* ---------- COMPROMISO SOCIAL ---------- */
  .social { background: var(--paper-2); padding-block: var(--section-y); }
  .social-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-top: 40px;
  }
  .social-card {
    display: flex; flex-direction: column; gap: 14px;
  }
  .social-head { display: flex; align-items: center; gap: 14px; }
  .social-logo {
    width: 96px; height: 64px; border-radius: 10px; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    background: #fff; border: 1px solid var(--line);
    padding: 8px;
    position: relative;
  }
  .social-logo img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
  .social-name {
    font-family: var(--display); font-weight: 700; font-size: 1rem;
    color: var(--ink); line-height: 1.15; letter-spacing: -0.01em;
  }
  .social-desc {
    font-size: 0.875rem; line-height: 1.5; color: var(--muted); margin: 0;
  }

  /* Titulo de grupo (divide "causas que apoyamos" / "lo que hacemos nosotros") */
  .social-group-title {
    font-family: var(--display);
    font-size: 0.875rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--ink); margin: 0 0 var(--sp-5);
    display: flex; align-items: center; gap: var(--sp-3);
  }
  .social-group-title::before {
    content: ""; width: 22px; height: 2px; flex: 0 0 auto;
    background: var(--yellow); border-radius: 2px;
  }
  .social-group-title + .social-grid,
  .social-group-title + .social-own-grid { margin-top: 0; }
  .social-group-title.is-second { margin-top: var(--section-y-sm); }

  /* Iniciativas propias (escuelas): bloque distinto, 2 tarjetas a mitad */
  .social-own-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-cards); margin-top: 16px;
  }
  .social-own-card {
    display: flex; gap: 18px; align-items: flex-start;
  }
  .social-own-ic {
    flex: 0 0 auto; width: 52px; height: 52px; border-radius: 14px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--green-tint); color: var(--green);
  }
  .social-own-ic svg { width: 26px; height: 26px; }
  .social-own-tag {
    display: inline-block; font-size: 0.65625rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em; color: var(--green);
    margin-bottom: 6px;
  }
  .social-own-body h3 {
    font-family: var(--display); font-weight: 700; font-size: 1.125rem;
    letter-spacing: -0.015em; margin: 0 0 6px; color: var(--ink);
  }
  .social-own-body p { font-size: 0.875rem; line-height: 1.55; color: var(--muted); margin: 0; }
  .social-own-link {
    display: inline-flex; align-items: center; gap: 6px; margin-top: 12px;
    font-size: 0.8125rem; font-weight: 700; color: var(--green);
  }
  @media (max-width: 720px) { .social-own-grid { grid-template-columns: 1fr; } }

  @media (max-width: 1100px) {
    .social-grid { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 560px) {
    .social-grid { grid-template-columns: 1fr; }
  }

  /* ---------- CTA FINAL ---------- */
  .cta-final {
    background: var(--yellow);
    color: var(--ink);
    padding-block: var(--section-y-sm);
    position: relative; overflow: hidden;
  }
  .cta-final::before {
    content: ""; position: absolute; inset: 0;
    background-image:
      repeating-linear-gradient(135deg, transparent 0 28px, rgba(0,0,0,0.04) 28px 30px);
    pointer-events: none;
  }
  .cta-grid {
    display: grid; grid-template-columns: 1.3fr 0.7fr; gap: var(--gap-flow); align-items: center;
    position: relative;
  }
  .cta-grid h2 {
    font-family: var(--display); font-weight: 800;
    font-size: clamp(2.5rem, 5vw, 4.25rem);
    line-height: 0.98; letter-spacing: -0.03em; margin: 0 0 18px;
  }
  .cta-grid p { font-size: 1.125rem; line-height: 1.45; max-width: 50ch; margin: 0; }
  .cta-grid .actions { display: flex; flex-direction: column; gap: 10px; }
  .cta-grid .actions .btn { justify-content: center; padding: 18px 22px; font-size: 0.9375rem; }
  .cta-grid .actions .small { font-size: 0.8125rem; color: var(--ink-2); text-align: center; }
  .cta-grid .actions .small a { font-weight: 700; text-decoration: underline; }
  @media (max-width: 1100px) {
    .cta-grid { grid-template-columns: 1fr; }
  }

  /* ---------- FOOTER ---------- */
  footer.foot {
    background: var(--ink); color: #B8BCC2; padding-block: var(--sp-8) var(--sp-5);
  }
  .foot-news {
    display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap;
    padding-bottom: 40px; margin-bottom: 40px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  .foot-news-txt h5 { font-family: var(--display); font-weight: 700; color: #fff; font-size: 1.125rem; margin: 0 0 6px; letter-spacing: -0.01em; }
  .foot-news-txt p { font-size: 0.875rem; color: #B8BCC2; margin: 0; }
  .foot-news-form { display: flex; gap: 10px; flex: 0 1 440px; }
  .foot-news-form input {
    flex: 1; min-width: 0; padding: 12px 15px; font-size: 0.875rem;
    border: 1px solid rgba(255,255,255,0.15); border-radius: 10px;
    background: rgba(255,255,255,0.06); color: #fff;
  }
  .foot-news-form input::placeholder { color: #8A8E94; }
  @media (max-width: 560px) {
    /* newsletter en movil: input y boton en dos lineas */
    .foot-news-form { flex-basis: 100%; flex-direction: column; align-items: stretch; }
    .foot-news-form .btn { justify-content: center; }
  }

  .foot-grid {
    display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1.2fr; gap: 40px;
    padding-bottom: 48px; border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  .foot-grid h2 { font-family: var(--display); font-weight: 700; color: #fff; font-size: 0.875rem; margin: 0 0 18px; letter-spacing: 0.02em; }
  .foot-grid ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
  .foot-grid ul a { font-size: 0.875rem; color: #B8BCC2; }
  .foot-grid ul a:hover { color: var(--yellow); }
  .foot-claim { font-size: 0.875rem; line-height: 1.5; color: #B8BCC2; max-width: 32ch; margin: 18px 0 22px; }
  .foot-app {
    display: flex; gap: 8px; margin-bottom: 18px;
  }
  .foot-app .badge {
    background: var(--ink-2); border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px; padding: 8px 12px; font-size: 0.6875rem;
    display: flex; flex-direction: column; line-height: 1.2;
  }
  .foot-app .badge strong { color: #fff; font-size: 0.8125rem; font-weight: 700; }
  .foot-social { display: flex; gap: 8px; }
  .foot-social a {
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--ink-2); border: 1px solid rgba(255,255,255,0.1);
    display: inline-flex; align-items: center; justify-content: center; color: #fff;
  }
  .foot-social a:hover { background: var(--yellow); color: var(--ink); border-color: var(--yellow); }

  /* Redes sociales reutilizables sobre fondo claro (componente x-publica.social-links) */
  .e3-social { display: flex; gap: 8px; flex-wrap: wrap; }
  .e3-social a {
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--paper-2); border: 1px solid var(--line);
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--ink); transition: background .15s ease, color .15s ease, border-color .15s ease;
  }
  .e3-social a:hover { background: var(--yellow); color: var(--ink); border-color: var(--yellow); }

  /* Bloque "Síguenos" (columna de metodos de contacto): eyebrow + iconos */
  .cm-follow { margin-top: 14px; }
  .cm-follow .e3-social { margin-top: 14px; justify-content: center; }

  .foot-bottom {
    display: flex; justify-content: space-between; align-items: center;
    padding-top: 22px; font-size: 0.78125rem; color: #8A8E94;
  }
  .foot-bottom .links { display: flex; gap: 22px; }
  .foot-bottom a:hover { color: var(--yellow); }
  @media (max-width: 1100px) {
    .foot-grid { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 720px) {
    /* footer: que viva hacia abajo, sin scroll lateral */
    .foot-grid { grid-template-columns: 1fr 1fr; gap: 30px 24px; }
    .foot-news { padding-bottom: 28px; margin-bottom: 28px; }
    .foot-bottom { flex-direction: column; align-items: flex-start; gap: 12px; }
    .foot-bottom .links { flex-wrap: wrap; gap: 12px 18px; }
  }
  @media (max-width: 480px) {
    /* moviles estrechos: una sola columna, todo apilado */
    .foot-grid { grid-template-columns: 1fr; gap: 28px; }
  }

  /* ---------- ECOSISTEMA DEL GRUPO ---------- */
  .eco3 { background: var(--paper); padding-block: var(--section-y); }
  .eco3-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: var(--gap-cards); margin-top: 48px; }
  .eco3-card {
    display: flex; flex-direction: column;
    position: relative; overflow: hidden;
  }
  /* lift de eco3-card via .card:hover; aqui solo el extra del arrow */
  .eco3-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
  .eco3-tag { font-size: 0.65625rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; }
  .eco3-tag.grupo { background: var(--ink); color: var(--yellow); }
  .eco3-tag.marca { background: #E3F1FF; color: var(--blue-deep); }
  .eco3-tag.proyecto { background: var(--state-soon-bg); color: var(--state-soon-fg); }
  .eco3-card.soon { border-style: dashed; }
  .eco3-card.soon h3 { color: var(--ink-3); }
  .eco3-arrow { width: 34px; height: 34px; border-radius: 50%; background: var(--paper-2); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; transition: background .18s ease, color .18s ease, transform .18s ease; }
  .eco3-card:hover .eco3-arrow { background: var(--yellow); transform: translate(2px,-2px); }
  .eco3-card h3 { font-family: var(--display); font-weight: 800; font-size: 1.5rem; letter-spacing: -0.02em; margin: 0 0 6px; line-height: 1; }
  .eco3-url { font-family: var(--body); font-weight: 700; font-size: 0.78125rem; color: var(--muted); letter-spacing: 0.02em; margin-bottom: 14px; }
  .eco3-card p { font-size: 0.875rem; line-height: 1.55; color: var(--ink-3); margin: 0; flex: 1; }
  .eco3-card.self { background: var(--grad-ink); border-color: var(--ink); color: #fff; }
  .eco3-card.self h3 { color: #fff; }
  .eco3-card.self h3 .acc { color: var(--yellow); }
  .eco3-card.self p { color: rgba(255,255,255,0.74); }
  .eco3-card.self .eco3-url { color: rgba(255,255,255,0.6); }
  .eco3-card.self .eco3-tag.grupo { background: var(--yellow); color: var(--ink); }
  .eco3-card.self .eco3-arrow { background: rgba(255,255,255,0.12); color: #fff; }

  /* ============ Microinteraccion en enlaces (Tier1-04) ============
     Subrayado que crece desde la izquierda en enlaces de texto (columnas del
     footer, enlaces legales del pie, migas de pan y enlaces naranja de
     servicios: .svc-link y a.text-orange). El subrayado usa
     currentColor, asi que adopta el color de hover de cada contexto
     (amarillo sobre oscuro, ink sobre claro). La flecha de .btn-arrow se
     anima aparte (ver arriba). Con prefers-reduced-motion el subrayado
     aparece sin animacion y la flecha no se desplaza. */
  .foot-grid ul a,
  .foot-bottom .links a,
  .breadcrumb a,
  .svc-link,
  a.text-orange,
  .sh-link,
  .tech-careers-link,
  .qf-actions a:not(.btn) { position: relative; transition: color 0.2s ease; }
  .foot-grid ul a::after,
  .foot-bottom .links a::after,
  .breadcrumb a::after,
  .svc-link::after,
  a.text-orange::after,
  .sh-link::after,
  .tech-careers-link::after,
  .qf-actions a:not(.btn)::after {
    content: ""; position: absolute; left: 0; bottom: -2px;
    width: 100%; height: 1.5px; background: currentColor;
    transform: scaleX(0); transform-origin: left;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .foot-grid ul a:hover::after,
  .foot-grid ul a:focus-visible::after,
  .foot-bottom .links a:hover::after,
  .foot-bottom .links a:focus-visible::after,
  .breadcrumb a:hover::after,
  .breadcrumb a:focus-visible::after,
  .svc-link:hover::after,
  .svc-link:focus-visible::after,
  a.text-orange:hover::after,
  a.text-orange:focus-visible::after,
  .sh-link:hover::after,
  .sh-link:focus-visible::after,
  .tech-careers-link:hover::after,
  .tech-careers-link:focus-visible::after,
  .qf-actions a:not(.btn):hover::after,
  .qf-actions a:not(.btn):focus-visible::after { transform: scaleX(1); }
  @media (prefers-reduced-motion: reduce) {
    .foot-grid ul a::after,
    .foot-bottom .links a::after,
    .breadcrumb a::after,
    .svc-link::after,
    a.text-orange::after,
    .sh-link::after,
    .tech-careers-link::after,
    .qf-actions a:not(.btn)::after { transition: none; }
    .btn-arrow::after { transition: none; }
    .btn-arrow:hover::after,
    .btn-arrow:focus-visible::after { transform: none; }
  }

  /* ============================================================
     Utilidades adicionales (para llegar a cero estilos inline).
     Espaciado snapeado a la escala --sp-*; resto = valores de
     componente concretos.
     ============================================================ */
  .mt-auto { margin-block-start: auto; }
  .mb-2 { margin-block-end: var(--sp-2); }     /* 8 */
  .gap-5 { gap: var(--sp-5); }                 /* 24 */
  .p-4 { padding: var(--sp-4); }               /* 16 */
  .fs-16 { font-size: 1rem; }
  .fs-20 { font-size: 1.25rem; }
  .fs-22 { font-size: 1.375rem; }
  .lh-relaxed { line-height: 1.6; }
  .text-yellow { color: var(--yellow); }
  .text-ink-3 { color: var(--ink-3); }
  .text-white-soft { color: rgba(255,255,255,0.78); }
  .bg-white-50 { background: rgba(255,255,255,0.5); }
  .bdr-dashed { border-style: dashed; }
  .underline { text-decoration: underline; }
  .mw-720 { max-width: 720px; }
  .mw-880 { max-width: 880px; }
  .cols-1 { grid-template-columns: 1fr; }
  .grid-auto-1 { display: grid; grid-template-columns: auto 1fr; }

  /* componentes concretos */
  .app-badge { border-radius: 8px; padding: 10px 14px; line-height: 1.2; }
  .app-badge.is-dark { background: var(--ink); }
  .app-badge.is-line { border: 1px solid var(--line); }
  .icon-box { width: 38px; height: 38px; border-radius: 9px; }
  .title-display { font-family: var(--display); font-weight: 700; letter-spacing: -0.02em; }
  .title-display.is-tight { letter-spacing: -0.025em; line-height: 1.05; }
  .h-clamp-38 { font-size: clamp(1.625rem, 3vw, 2.375rem); }
  /* .fast-card: regla redundante eliminada. El unico uso (alta.php) lleva .b2bp-step.fast-card,
     que ya aporta el degradado y border:0 (gana por especificidad); el padding lo daba .b2bp-step. */
  .bg-paper { background: var(--paper); }
  .p-card { padding: var(--pad-card); }
  .upload-label-sm { padding: 12px 14px; border: 1px dashed var(--muted-2); border-radius: 10px; cursor: pointer; font-size: 0.84375rem; }