/*
Theme Name:      GQ Child Theme
Theme URI:       https://guadronquijano.com
Description:     Núcleo optimizado para proyectos de Guadrón Quijano S.A.S. de C.V.
Author:          Guadrón Quijano S.A.S. de C.V.
Author URI:      https://guadronquijano.com
Template:        Divi
Version:         1.0.0
Text Domain:     gqchild
License:         GNU General Public License v2 or later
License URI:     http://www.gnu.org/licenses/gpl-2.0.html
Tags:            lightweight, modular, optimized, clean
*/

/* =========================================================
   GQ CHILD THEME — SISTEMA BASE
   Proyecto: AKTIVA
   Stack: Divi (módulo código) + CSS custom + Mobile First
   Tipografías: Outfit (títulos) · Figtree (cuerpo)
========================================================= */


/* ---------------------------------------------------------
   1. VARIABLES CSS — DESIGN TOKENS
   Paleta extraída del brandbook oficial de AKTIVA
   (Cobra Branding Studio, 2021)
--------------------------------------------------------- */
:root {

  /* — Colores de marca — */
  --color-primary:        #0060A1; /* Azul principal — Pantone 3553 */
  --color-primary-dark:   #00365A; /* Azul oscuro    — Pantone 3025 */
  --color-primary-light:  #B9E3F2; /* Azul claro     — Pantone 635  */
  --color-gray:           #565E66; /* Gris           — Pantone 7545 */
  --color-black:          #000000;
  --color-white:          #FFFFFF;

  /* — Superficie y fondo — */
  --color-bg:             #FAFAF8; /* Blanco hueso — casi blanco, toque cálido */
  --color-bg-soft:        #F2F5F7; /* Secciones alternas */
  --color-bg-dark:        #00365A; /* Fondos oscuros (CTAs, footer) */
  --color-surface:        #EAF4FA; /* Cards, chips, badges */

  /* — Texto — */
  --color-text-primary:   #0D0D0B; /* Negro suavizado — no 100% negro */
  --color-text-body:      #2A2E31;
  --color-text-muted:     #565E66;
  --color-text-faint:     #9AA1A8;
  --color-text-inverse:   #FAFAF8; /* Hueso en inverso */

  /* — Bordes — */
  --color-border:         #D6E4EE;
  --color-border-strong:  #0060A1;

  /* — Tipografías — */
  --font-primary:         'Outfit', sans-serif;   /* Títulos, jerarquía */
  --font-body:            'Figtree', sans-serif;  /* Cuerpo, UI, labels */

  /* — Pesos tipográficos — máximo 500 —
     La marca comunica tecnología humana, no fuerza.
     Bold y semibold se eliminan del sistema visual.   */
  --fw-light:             300;
  --fw-regular:           400;
  --fw-medium:            500;
  --fw-semibold:          500; /* Alias — máximo permitido */
  --fw-bold:              500; /* Alias — máximo permitido */

  /* — Tipografía fluida (clamp) —
     Escala: 320px mínimo → 1440px máximo
     Formato: clamp(min, valor-fluido, max)        */
  --text-xs:    clamp(0.70rem,  0.65rem + 0.25vw,  0.80rem);  /* 11–13px */
  --text-sm:    clamp(0.813rem, 0.77rem + 0.22vw,  0.938rem); /* 13–15px */
  --text-base:  clamp(0.938rem, 0.88rem + 0.29vw,  1.063rem); /* 15–17px */
  --text-md:    clamp(1.063rem, 0.97rem + 0.46vw,  1.25rem);  /* 17–20px */
  --text-lg:    clamp(1.25rem,  1.09rem + 0.80vw,  1.625rem); /* 20–26px */
  --text-xl:    clamp(1.5rem,   1.25rem + 1.25vw,  2.125rem); /* 24–34px */
  --text-2xl:   clamp(1.875rem, 1.5rem  + 1.88vw,  2.75rem);  /* 30–44px */
  --text-3xl:   clamp(2.25rem,  1.75rem + 2.50vw,  3.5rem);   /* 36–56px */
  --text-4xl:   clamp(2.75rem,  2.0rem  + 3.75vw,  4.5rem);   /* 44–72px */
  --text-hero:  clamp(3.5rem,   2.5rem  + 5.00vw,  6.0rem);   /* 56–96px */

  /* — Espaciado fluido — */
  --space-1:    clamp(0.25rem,  0.20rem + 0.25vw,  0.375rem); /* 4–6px  */
  --space-2:    clamp(0.5rem,   0.42rem + 0.42vw,  0.75rem);  /* 8–12px */
  --space-3:    clamp(0.75rem,  0.62rem + 0.63vw,  1.125rem); /* 12–18px */
  --space-4:    clamp(1rem,     0.83rem + 0.83vw,  1.5rem);   /* 16–24px */
  --space-5:    clamp(1.25rem,  1.0rem  + 1.25vw,  2.0rem);   /* 20–32px */
  --space-6:    clamp(1.5rem,   1.17rem + 1.67vw,  2.5rem);   /* 24–40px */
  --space-8:    clamp(2rem,     1.5rem  + 2.50vw,  3.5rem);   /* 32–56px */
  --space-10:   clamp(2.5rem,   1.83rem + 3.33vw,  4.5rem);   /* 40–72px */
  --space-12:   clamp(3rem,     2.17rem + 4.17vw,  5.5rem);   /* 48–88px */
  --space-16:   clamp(4rem,     2.83rem + 5.83vw,  7.5rem);   /* 64–120px*/
  --space-20:   clamp(5rem,     3.5rem  + 7.50vw,  9.5rem);   /* 80–152px*/

  /* — Radios de borde — */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  20px;
  --radius-pill:9999px;

  /* — Sombras — */
  --shadow-sm:  0 1px 3px rgba(0, 96, 161, 0.08);
  --shadow-md:  0 4px 16px rgba(0, 96, 161, 0.12);
  --shadow-lg:  0 8px 32px rgba(0, 96, 161, 0.16);

  /* — Transiciones — */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;

  /* — Z-index — */
  --z-base:     0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;
}


/* ---------------------------------------------------------
   2. RESET & BASE STYLES
   Opinado, ligero, sin librerías externas
--------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--fw-regular);
  line-height: 1.65;
  color: var(--color-text-body);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-primary-dark);
}

ul,
ol {
  list-style: none;
}

button {
  font-family: var(--font-body);
  cursor: pointer;
  border: none;
  background: none;
}

input,
textarea,
select {
  font-family: var(--font-body);
  font-size: var(--text-base);
}

/* Divi reset selectivo — anula interferencias comunes */
#page-container,
.et_pb_section,
.et_pb_row,
.et_pb_column,
.et_pb_code {
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}


/* ---------------------------------------------------------
   3. TIPOGRAFÍA FLUIDA
   Outfit para jerarquía · Figtree para cuerpo
   Peso máximo: 500 — tecnología humana, no fuerza
--------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-primary);
  font-weight: var(--fw-regular);  /* 400 — elegante, no agresivo */
  line-height: 1.15;
  color: var(--color-text-primary);
  letter-spacing: -0.02em;
}

h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl);  }
h5 { font-size: var(--text-lg);  }
h6 { font-size: var(--text-md);  }

p {
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--color-text-body);
  max-width: 68ch; /* Legibilidad óptima */
}

/* Clases de texto utilitarias */
.text-xs    { font-size: var(--text-xs);   }
.text-sm    { font-size: var(--text-sm);   }
.text-base  { font-size: var(--text-base); }
.text-md    { font-size: var(--text-md);   }
.text-lg    { font-size: var(--text-lg);   }
.text-xl    { font-size: var(--text-xl);   }
.text-2xl   { font-size: var(--text-2xl);  }
.text-3xl   { font-size: var(--text-3xl);  }
.text-4xl   { font-size: var(--text-4xl);  }
.text-hero  {
  font-size: var(--text-hero);
  font-family: var(--font-primary);
  font-weight: var(--fw-medium); /* 500 — máximo del sistema */
  line-height: 1.05;
  letter-spacing: -0.03em;
}

/* Pesos */
.fw-light    { font-weight: var(--fw-light);    }
.fw-regular  { font-weight: var(--fw-regular);  }
.fw-medium   { font-weight: var(--fw-medium);   }
.fw-semibold { font-weight: var(--fw-semibold); }
.fw-bold     { font-weight: var(--fw-bold);     }

/* Familias */
.font-primary { font-family: var(--font-primary); }
.font-body    { font-family: var(--font-body);    }

/* Colores de texto */
.text-primary  { color: var(--color-primary);      }
.text-dark     { color: var(--color-primary-dark); }
.text-muted    { color: var(--color-text-muted);   }
.text-faint    { color: var(--color-text-faint);   }
.text-inverse  { color: var(--color-text-inverse); }
.text-body     { color: var(--color-text-body);    }

/* Alineación */
.text-left    { text-align: left;   }
.text-center  { text-align: center; }
.text-right   { text-align: right;  }

/* Eyebrow — etiqueta pequeña sobre títulos */
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary);
}


/* ---------------------------------------------------------
   4. LAYOUT — CONTAINERS & GRID
   Mobile first · max-width progresivo
--------------------------------------------------------- */

/* Container principal */
.container {
  width: 100%;
  padding-inline: var(--space-5);
  margin-inline: auto;
}

@media (min-width: 640px) {
  .container { max-width: 640px; }
}
@media (min-width: 768px) {
  .container { max-width: 768px; padding-inline: var(--space-6); }
}
@media (min-width: 1024px) {
  .container { max-width: 1024px; }
}
@media (min-width: 1280px) {
  .container { max-width: 1280px; padding-inline: var(--space-8); }
}
@media (min-width: 1440px) {
  .container { max-width: 1440px; }
}

/* Container angosto — para texto editorial */
.container-narrow {
  width: 100%;
  max-width: 720px;
  padding-inline: var(--space-5);
  margin-inline: auto;
}

/* Container wide — para secciones full-bleed con contenido interno */
.container-wide {
  width: 100%;
  max-width: 1600px;
  padding-inline: var(--space-5);
  margin-inline: auto;
}

/* Section wrapper — espaciado vertical de secciones */
.section {
  padding-block: var(--space-16);
}

.section-sm {
  padding-block: var(--space-10);
}

.section-lg {
  padding-block: var(--space-20);
}

/* Grid base */
.grid {
  display: grid;
  gap: var(--space-6);
}

.grid-2 {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}

.grid-3 {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}

.grid-4 {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr 1fr;
}

@media (min-width: 768px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

/* Flex utilities */
.flex            { display: flex; }
.flex-col        { flex-direction: column; }
.flex-wrap       { flex-wrap: wrap; }
.items-center    { align-items: center; }
.items-start     { align-items: flex-start; }
.items-end       { align-items: flex-end; }
.justify-between { justify-content: space-between; }
.justify-center  { justify-content: center; }
.justify-end     { justify-content: flex-end; }
.gap-2   { gap: var(--space-2); }
.gap-3   { gap: var(--space-3); }
.gap-4   { gap: var(--space-4); }
.gap-5   { gap: var(--space-5); }
.gap-6   { gap: var(--space-6); }
.gap-8   { gap: var(--space-8); }

/* Colores de fondo de sección */
.bg-white   { background-color: var(--color-bg);       }
.bg-soft    { background-color: var(--color-bg-soft);  }
.bg-dark    { background-color: var(--color-bg-dark);  }
.bg-primary { background-color: var(--color-primary);  }
.bg-surface { background-color: var(--color-surface);  }


/* ---------------------------------------------------------
   5. PATCH DE ACCESIBILIDAD Y CONTRASTE (LIGHTHOUSE)
   Ajustes específicos para componentes del home
--------------------------------------------------------- */

/* Boletín / Newsletter */
.ak-newsletter__privacy {
  color: var(--color-text-muted); /* Pasa de 'faint' a 'muted' (#565E66) para contrastar correctamente sobre fondo claro (#FAFAF8) */
}

/* Estructura del Footer (Fondo oscuro #00365A) */
.ak-footer {
  color: var(--color-text-inverse); /* Asegura texto base blanco hueso legible */
}

/* Encabezados de sedes de contacto en el Footer */
.ak-footer .ak-contact-label {
  color: var(--color-primary-light); /* Azul hielo brillante, contraste perfecto (7.7:1) sobre el fondo oscuro */
  font-weight: var(--fw-medium);
}

/* Texto de derechos reservados */
.ak-footer .ak-copyright {
  color: var(--color-text-inverse);
  opacity: 0.85; /* Se mantiene dentro del umbral accesible de legibilidad */
}

/* Enlaces legales (Privacidad / Términos) */
.ak-footer .ak-legal-link {
  color: var(--color-text-inverse);
  opacity: 0.85;
  text-decoration: none;
  transition: color var(--transition-fast), opacity var(--transition-fast);
}

.ak-footer .ak-legal-link:hover {
  color: var(--color-primary-light);
  opacity: 1;
}