/* ==========================================================================
   Abitmedia — Sistema de diseño: tokens
   --------------------------------------------------------------------------
   Un único lugar para color, tipografía, espacio, radios y sombras.
   El tema (claro/oscuro) y el tema de solución se resuelven aquí; el resto
   del CSS sólo consume variables.
   ========================================================================== */

:root {
  color-scheme: light;

  /* --- Marca corporativa (azul rey, tomado del logotipo de Abitmedia) ---- */
  --royal-50:  #EEF2FF;
  --royal-100: #DCE4FF;
  --royal-200: #BBC9FF;
  --royal-300: #8DA5FB;
  --royal-400: #5A7AF2;
  --royal-500: #2D53E6;
  --royal-600: #1240DC;   /* principal */
  --royal-700: #0F33B4;
  --royal-800: #0D2A90;
  --royal-900: #0A1F6B;
  --royal-950: #06153F;

  --color-primary:        var(--royal-600);
  --color-primary-hover:  var(--royal-700);
  --color-primary-light:  var(--royal-50);
  --color-primary-contrast: #FFFFFF;

  /* Header y footer conservan su identidad en ambos temas. */
  --color-header:        #0F37C4;
  --color-header-deep:   #0B2A9E;

  /* Superficie propia del header: base plana y color de la luz que lo recorre.
     Son tokens aparte de --color-header/--color-header-deep porque esos dos
     también alimentan el hero de la portada y la banda CTA, y ahí el azul
     debe seguir siendo el de siempre. */
  --header-base:  #05103B;
  --header-glow:  #051076;
  --color-header-text:   #FFFFFF;
  --color-header-muted:  rgba(255, 255, 255, .74);
  --color-header-line:   rgba(255, 255, 255, .16);
  --color-header-hover:  rgba(255, 255, 255, .12);

  --color-footer:        #071A4A;
  --color-footer-deep:   #050F30;
  --color-footer-text:   #FFFFFF;
  --color-footer-muted:  #B3C2E6;   /* ≥ 7:1 sobre #071A4A */
  --color-footer-line:   rgba(255, 255, 255, .14);

  /* --- Llamada a la acción comercial (amarilla) -------------------------- */
  --color-cta:        #FFD43B;
  --color-cta-hover:  #F5C31B;
  --color-cta-text:   #14224A;
  --color-cta-ring:   rgba(255, 212, 59, .45);

  /* Ámbar del CTA destacado, tomado de «Referencia CTA.jpg» (#F5B90F).
     Más saturado y dorado que el amarillo base. Se usa sólo en el CTA con
     tratamiento especial (header y hero), no en el resto de botones. */
  --cta-amber:     #F5B90F;
  --cta-amber-hi:  #FFD44E;   /* filo y brillo superior */
  --cta-amber-lo:  #DFA406;   /* asiento inferior */

  /* --- Superficies y texto ---------------------------------------------- */
  --color-background:   #F5F7FD;
  /* La banda alterna separa secciones consecutivas: necesita una diferencia
     perceptible, no un matiz. */
  --color-background-2: #E7EDFA;
  --color-surface:      #FFFFFF;
  --color-surface-2:    #F3F6FD;
  --color-surface-3:    #E9EFFB;
  --color-surface-invert: #0C1730;

  /* Tinta de la marca de agua del isotipo (.section--rings). En claro es
     blanco sobre la banda tintada; en oscuro no puede serlo —el blanco puro
     brillaría— ni puede ser --color-surface, que en oscuro coincide casi
     exactamente con el fondo de la banda y la haría desaparecer. */
  --rings-ink: #FFFFFF;
  /* Los anillos como motivo visible (no marca de agua): un velo del color de
     marca, lo bastante presente para llenar el hueco sin competir con el
     texto que tiene al lado. */
  --rings-art: color-mix(in srgb, var(--brand) 22%, transparent);

  --color-text:        #101C36;
  --color-text-strong: #060E22;
  --color-text-muted:  #56648A;   /* 5.4:1 sobre blanco */
  --color-text-invert: #FFFFFF;

  --color-border:       #DCE3F2;
  --color-border-strong:#C3CEE6;
  --color-ring:         rgba(18, 64, 220, .38);

  /* --- Estado ------------------------------------------------------------ */
  --color-success: #0E7C4A;
  --color-warning: #9A5B00;
  --color-warning-bg: #FFF4DC;
  --color-danger:  #B42318;

  /* --- Colores por solución (tomados de sus logotipos) ------------------- */
  /* Pagomedios — azul                                                       */
  --pagomedios:        #0A4C8F;
  --pagomedios-strong: #04386B;
  --pagomedios-soft:   #E7F0FA;
  --pagomedios-on:     #FFFFFF;
  /* FacturaSoft — morado                                                    */
  --facturasoft:        #5B12B0;
  --facturasoft-strong: #3D0A7C;
  --facturasoft-soft:   #F1E9FC;
  --facturasoft-on:     #FFFFFF;
  /* Ventrix CRM — celeste                                                   */
  --ventrix:        #0B84C8;
  --ventrix-strong: #06628F;
  --ventrix-soft:   #E4F4FD;
  --ventrix-on:     #FFFFFF;
  /* TiendaMaker — naranja                                                   */
  --tiendamaker:        #D95D00;
  --tiendamaker-strong: #A94800;
  --tiendamaker-soft:   #FEEEE0;
  --tiendamaker-on:     #FFFFFF;

  /* Marca activa por defecto = corporativa. Se reescribe con [data-solution] */
  --brand:        var(--color-primary);
  --brand-strong: var(--color-primary-hover);
  --brand-soft:   var(--color-primary-light);
  --brand-on:     #FFFFFF;

  /* --- Tipografía -------------------------------------------------------- */
  /* Tipografía del sitio. Los archivos locales se declaran en fonts.css.
     La pila de respaldo se usa mientras la fuente carga (font-display: swap)
     y si por cualquier motivo no llegara a estar disponible. */
  --font-sans: "IBM Plex Sans", Arial, Helvetica, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Escala fluida: mínimo en 360px, máximo en 1440px */
  --text-xs:   clamp(.75rem,  .72rem + .12vw,  .8125rem);
  --text-sm:   clamp(.8125rem, .79rem + .14vw,  .875rem);
  --text-base: clamp(.9375rem, .91rem + .18vw,  1.0625rem);
  --text-lg:   clamp(1.0625rem, 1.01rem + .28vw, 1.1875rem);
  --text-xl:   clamp(1.1875rem, 1.11rem + .38vw, 1.375rem);
  --text-2xl:  clamp(1.375rem, 1.24rem + .62vw, 1.75rem);
  --text-3xl:  clamp(1.625rem, 1.40rem + 1.02vw, 2.25rem);
  --text-4xl:  clamp(1.9375rem, 1.56rem + 1.66vw, 3rem);
  --text-5xl:  clamp(2.25rem, 1.68rem + 2.52vw, 3.75rem);

  --leading-tight: 1.14;
  --leading-snug:  1.3;
  --leading-normal:1.62;

  --tracking-tight: -.022em;
  --tracking-wide:  .08em;

  /* --- Espacio ----------------------------------------------------------- */
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.75rem;
  --space-8: 3.5rem;

  /* Ritmo vertical de sección: se comprime en pantallas de poca altura */
  --section-y: clamp(3rem, 1.6rem + 5.4vw, 6rem);
  --section-y-sm: clamp(2.25rem, 1.4rem + 3.4vw, 4rem);

  /* Alto mínimo del header.
     OJO: es un valor de ENTRADA, fijo. No confundir con --header-h, que es la
     altura real MEDIDA por JavaScript (valor de SALIDA). Si el header llegara
     a consumir --header-h para su propio tamaño se crea un bucle: cada
     medición incluye el borde inferior y el header crecería 1px por tick. */
  --header-min-h: 72px;

  /* Ancho de contenido y canaleta lateral */
  --container: 1200px;
  --container-narrow: 900px;
  --gutter: clamp(1rem, .55rem + 1.9vw, 2.5rem);

  /* --- Radios ------------------------------------------------------------ */
  --radius-sm: 8px;
  --radius:    12px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 28px;
  --radius-full: 999px;

  /* --- Sombras ----------------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(12, 23, 48, .06);
  --shadow-sm: 0 2px 6px rgba(12, 23, 48, .07);
  --shadow:    0 6px 18px rgba(12, 23, 48, .08);
  --shadow-md: 0 14px 34px rgba(12, 23, 48, .10);
  --shadow-lg: 0 26px 60px rgba(12, 23, 48, .14);
  --shadow-brand: 0 14px 32px rgba(18, 64, 220, .22);

  /* --- Movimiento -------------------------------------------------------- */
  --ease: cubic-bezier(.22, .68, .32, 1);
  --duration: .22s;

  /* --- Capas ------------------------------------------------------------- */
  --z-header: 100;
  --z-dropdown: 110;
  --z-overlay: 200;
  --z-modal: 210;
  --z-skip: 300;
}

/* ==========================================================================
   Modo oscuro
   - Se aplica por preferencia del sistema y, con prioridad, por [data-theme].
   - No es una inversión: las superficies, los bordes y las sombras se
     redefinen, y los colores de marca se aclaran para seguir siendo legibles.
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --color-primary:       #6E8CFF;
    --color-primary-hover: #8CA4FF;
    --color-primary-light: #16224A;
    --color-primary-contrast: #06132F;

    --color-header:      #0C2CA8;
    --color-header-deep: #081F7C;

    --color-footer:      #040C24;
    --color-footer-deep: #020717;
    --color-footer-muted:#A9B8DC;

    --color-cta:       #FFD64F;
    --color-cta-hover: #FFE383;
    --color-cta-text:  #16203F;

    --color-background:   #080E1E;
    --color-background-2: #111B33;
    --color-surface:      #121B31;
    --color-surface-2:    #17223C;
    --color-surface-3:    #1E2B49;
    --color-surface-invert: #E8EDF8;

    --rings-ink: rgba(255, 255, 255, .055);
    --rings-art: color-mix(in srgb, var(--brand) 34%, transparent);

    --color-text:        #E7ECF8;
    --color-text-strong: #FFFFFF;
    --color-text-muted:  #A2B0CE;   /* 7.1:1 sobre #121B31 */
    --color-text-invert: #08122A;

    --color-border:       #263250;
    --color-border-strong:#35446B;
    --color-ring:         rgba(140, 164, 255, .55);

    --color-success: #4ADE93;
    --color-warning: #F0C36B;
    --color-warning-bg: #2A2110;
    --color-danger:  #FF8F85;

    --pagomedios:        #55A2F0;
    --pagomedios-strong: #8AC1F7;
    --pagomedios-soft:   #10243C;
    --pagomedios-on:     #04182F;

    --facturasoft:        #B18AF5;
    --facturasoft-strong: #CBAEFA;
    --facturasoft-soft:   #21163A;
    --facturasoft-on:     #1B0B34;

    --ventrix:        #58C4F2;
    --ventrix-strong: #8FD9F7;
    --ventrix-soft:   #0E2738;
    --ventrix-on:     #04202E;

    --tiendamaker:        #FF9A4D;
    --tiendamaker-strong: #FFBA85;
    --tiendamaker-soft:   #2C1A0B;
    --tiendamaker-on:     #2A1400;

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, .45);
    --shadow:    0 8px 22px rgba(0, 0, 0, .5);
    --shadow-md: 0 16px 38px rgba(0, 0, 0, .55);
    --shadow-lg: 0 30px 66px rgba(0, 0, 0, .62);
    --shadow-brand: 0 14px 32px rgba(0, 0, 0, .5);
  }
}

/* Selección explícita del usuario: gana sobre la preferencia del sistema. */
:root[data-theme="dark"] {
  color-scheme: dark;

  --color-primary:       #6E8CFF;
  --color-primary-hover: #8CA4FF;
  --color-primary-light: #16224A;
  --color-primary-contrast: #06132F;

  --color-header:      #0C2CA8;
  --color-header-deep: #081F7C;

  --color-footer:      #040C24;
  --color-footer-deep: #020717;
  --color-footer-muted:#A9B8DC;

  --color-cta:       #FFD64F;
  --color-cta-hover: #FFE383;
  --color-cta-text:  #16203F;

  --color-background:   #080E1E;
  --color-background-2: #111B33;
  --color-surface:      #121B31;
  --color-surface-2:    #17223C;
  --color-surface-3:    #1E2B49;
  --color-surface-invert: #E8EDF8;

  --rings-ink: rgba(255, 255, 255, .055);
  --rings-art: color-mix(in srgb, var(--brand) 34%, transparent);

  --color-text:        #E7ECF8;
  --color-text-strong: #FFFFFF;
  --color-text-muted:  #A2B0CE;
  --color-text-invert: #08122A;

  --color-border:       #263250;
  --color-border-strong:#35446B;
  --color-ring:         rgba(140, 164, 255, .55);

  --color-success: #4ADE93;
  --color-warning: #F0C36B;
  --color-warning-bg: #2A2110;
  --color-danger:  #FF8F85;

  --pagomedios:        #55A2F0;
  --pagomedios-strong: #8AC1F7;
  --pagomedios-soft:   #10243C;
  --pagomedios-on:     #04182F;

  --facturasoft:        #B18AF5;
  --facturasoft-strong: #CBAEFA;
  --facturasoft-soft:   #21163A;
  --facturasoft-on:     #1B0B34;

  --ventrix:        #58C4F2;
  --ventrix-strong: #8FD9F7;
  --ventrix-soft:   #0E2738;
  --ventrix-on:     #04202E;

  --tiendamaker:        #FF9A4D;
  --tiendamaker-strong: #FFBA85;
  --tiendamaker-soft:   #2C1A0B;
  --tiendamaker-on:     #2A1400;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, .45);
  --shadow:    0 8px 22px rgba(0, 0, 0, .5);
  --shadow-md: 0 16px 38px rgba(0, 0, 0, .55);
  --shadow-lg: 0 30px 66px rgba(0, 0, 0, .62);
  --shadow-brand: 0 14px 32px rgba(0, 0, 0, .5);
}

/* ==========================================================================
   Tema por solución
   Cada mini landing declara <body data-solution="…"> y con eso los acentos,
   bordes, etiquetas e iconos del documento adoptan el color de esa marca.
   Los CTA comerciales siguen siendo amarillos: no se tocan aquí.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Color del hero de cada mini landing
   --------------------------------------------------------------------------
   Es un token propio, independiente de --brand: el hero necesita un tono con
   cuerpo suficiente para sostener texto blanco, mientras que --brand se usa en
   acentos sobre fondo claro y responde a otras necesidades de contraste.
   -------------------------------------------------------------------------- */
:root { --hero-color: var(--color-header-deep); }

/* --------------------------------------------------------------------------
   Alto de los heroes
   --------------------------------------------------------------------------
   Un único token para la portada y para las cabeceras de página interior, de
   modo que todas abren a la misma altura. Antes cada una traía su propio
   mínimo y, al apilarse la columna de la imagen, las mini landings crecían
   hasta 860 px mientras las páginas sin imagen se quedaban en 593.

   Baja por tramos porque al apilarse hay que repartir el alto entre texto e
   imagen; el tope de la imagen (--hero-media-h) se ajusta en el mismo punto.
   -------------------------------------------------------------------------- */
/* --hero-min-h        heroes de las páginas de SERVICIOS, que llevan
                       ilustración y aguantan —y necesitan— el alto completo.
   --hero-min-h-short  portada, las tres páginas de Empresa y Contacto. Son
                       cabeceras de sólo texto: con el alto completo abrían con
                       una franja azul medio vacía y empujaban el contenido por
                       debajo del pliegue. Se acorta ~30 % y el contenido real
                       entra en pantalla. */
:root {
  --hero-min-h:       38rem;
  --hero-min-h-short: 27rem;
  --hero-media-h:     23rem;
}
@media (max-width: 900px) {
  :root { --hero-min-h: 42rem; --hero-min-h-short: 25rem; --hero-media-h: 11rem; }
}
@media (max-width: 560px) {
  :root { --hero-min-h: 43.5rem; --hero-min-h-short: 23rem; --hero-media-h: 8rem; }
}

/* --------------------------------------------------------------------------
   Acento de página: azul rey corporativo por defecto; cada [data-solution] lo
   sustituye por el color de su marca en los bloques de aquí abajo.

   Tiene que declararse ANTES que ellos: `:root` y `[data-solution="…"]` pesan
   lo mismo en especificidad, así que si fuese al final ganaría por orden y
   todos los mini landings se quedarían con el azul.

   Hoy ningún componente lo usa —la palabra destacada de los títulos dejó de
   pintarse y las pestañas de «En detalle» toman --brand—, pero se conserva
   para cuando se quiera recuperar ese acento.
   -------------------------------------------------------------------------- */
:root { --page-accent: var(--color-primary); }

[data-solution="pagomedios"] {
  /* CTA de la mini landing: color propio del servicio. El del header
     NO cambia (queda ámbar): la regla está acotada a <main>. */
  /* #007AFF con texto blanco da 4,02:1, por debajo del 4,5:1 de AA. Al ser
     ahora un color plano no hay degradado donde compensarlo, así que se usa el
     azul inmediatamente más profundo que sí pasa (4,75:1). A simple vista es
     el mismo azul. */
  --cta-color:      #006EEA;
  --cta-color-deep: #0052B8;
  --cta-on:         #FFFFFF;   /* texto blanco */
  --hero-color: #1A2A9E;
  --page-accent: var(--pagomedios);
  --brand: var(--pagomedios);
  --brand-strong: var(--pagomedios-strong);
  --brand-soft: var(--pagomedios-soft);
  --brand-on: var(--pagomedios-on);
}
[data-solution="facturasoft"] {
  /* CTA de la mini landing: color propio del servicio. El del header
     NO cambia (queda ámbar): la regla está acotada a <main>. */
  /* Morado de marca. Con texto blanco da 6,1:1 y el tono profundo del hover,
     7,9:1: los dos pasan AA holgadamente. */
  --cta-color:      #7F30E6;
  --cta-color-deep: #6822C9;
  --cta-on:         #FFFFFF;   /* texto blanco */
  /* Halo hecho a mano: el morado aclarado con blanco se va al lila lavado y el
     botón perdía el halo. Se usa un violeta más saturado por arriba y el
     índigo profundo por abajo, que es el mismo recorrido que hace el azul
     original (claro → saturado → profundo). */
  --cta-halo-a:     #7F30E6;
  --cta-halo-b:     #A855F7;
  --cta-halo-c:     #4A1594;
  --hero-color: #5410A2;  /* sin cambios: es el morado que ya tenía */
  --page-accent: var(--facturasoft);
  --brand: var(--facturasoft);
  --brand-strong: var(--facturasoft-strong);
  --brand-soft: var(--facturasoft-soft);
  --brand-on: var(--facturasoft-on);
}
[data-solution="ventrix"] {
  /* CTA de la mini landing: color propio del servicio. El del header
     NO cambia (queda ámbar): la regla está acotada a <main>. */
  --cta-color:      #0069F0;
  --cta-color-deep: #0053C4;
  --cta-on:         #FFFFFF;   /* texto blanco */
  --hero-color: #0069F0;
  --page-accent: var(--ventrix);
  --brand: var(--ventrix);
  --brand-strong: var(--ventrix-strong);
  --brand-soft: var(--ventrix-soft);
  --brand-on: var(--ventrix-on);
}
[data-solution="tiendamaker"] {
  /* CTA de la mini landing: color propio del servicio. El del header
     NO cambia (queda ámbar): la regla está acotada a <main>. */
  --cta-color:      #FF9901;
  --cta-color-deep: #E08400;
  --cta-on:         var(--color-cta-text);   /* texto oscuro */
  --hero-color: #F56600;
  --page-accent: var(--tiendamaker);
  --brand: var(--tiendamaker);
  --brand-strong: var(--tiendamaker-strong);
  --brand-soft: var(--tiendamaker-soft);
  --brand-on: var(--tiendamaker-on);
}

/* Tonos puntuales: permiten pintar una tarjeta con el color de una solución
   dentro de una página que no pertenece a esa marca (portada, listados). */
.tone-pagomedios  { --brand: var(--pagomedios);  --brand-strong: var(--pagomedios-strong);  --brand-soft: var(--pagomedios-soft);  --brand-on: var(--pagomedios-on); }
.tone-facturasoft { --brand: var(--facturasoft); --brand-strong: var(--facturasoft-strong); --brand-soft: var(--facturasoft-soft); --brand-on: var(--facturasoft-on); }
.tone-ventrix     { --brand: var(--ventrix);     --brand-strong: var(--ventrix-strong);     --brand-soft: var(--ventrix-soft);     --brand-on: var(--ventrix-on); }
.tone-tiendamaker { --brand: var(--tiendamaker); --brand-strong: var(--tiendamaker-strong); --brand-soft: var(--tiendamaker-soft); --brand-on: var(--tiendamaker-on); }
.tone-brand,
.tone-neutral     { --brand: var(--color-primary); --brand-strong: var(--color-primary-hover); --brand-soft: var(--color-primary-light); --brand-on: #FFFFFF; }