/* =========================================================================
   AZAHAR DATA INSIGHTS — CLASES GLOBALES azh-*
   Versión: 3.0 (julio 2026)

   Sistema reutilizable que todas las páginas consumen. Cambiar aquí =
   cambiar en toda la web.

   CAMBIO v3.0 RESPECTO A v2.5:
   Este fichero deja de pegarse en Bricks > Settings > Custom Code y pasa a
   vivir en el child theme, encolado desde functions.php. El campo Custom
   Code de Bricks debe quedar VACÍO tras desplegar esto.

   FILOSOFÍA:
   - Textos pequeños transversales (breadcrumb, eyebrow, label de card,
     label de meta) en PX hardcoded — NO escalan con la base del Theme Style.
   - Body y headings heredan del Theme Style "Azahar Global" (rem).
   - Variables de color canónicas: --color-{tono}-accent / --color-{tono}-light.
     Declaradas en el Style Manager de Bricks. Nunca redeclarar en :root.
   ========================================================================= */


/* === 0. TOKENS DE SISTEMA ===
   Consumidos por .azh-section y .azh-cta-section vía var(). */

:root {
  --section-spacing: 120px;
  --section-spacing-sm: 80px;
}

/* === 1. LAYOUT DE SECCIÓN === */

.azh-section {
  padding-block: var(--section-spacing-sm, 80px);
  padding-inline: 40px;
}

.azh-section--dark {
  background: var(--azahar-oxford, #05254c);
  color: var(--azahar-white, #ffffff);
}

/* Fondo azul muy claro para bloques tipo "impacto" */
.azh-section--soft {
  background: var(--azahar-bg-soft, #ecf4fe);
}


/* === 2. WRAPPERS INTERNOS (4 anchos) === */

.azh-section__inner {
  margin: 0 auto;
  max-width: 1200px;
}

/* Variante estrecha: hero de servicio, CTA section, bloques con menos contenido */
.azh-section__inner--narrow {
  max-width: 1100px;
}

/* Variante para prosa larga: páginas legales, contenido editorial */
.azh-section__inner--prose {
  max-width: 920px;
}

/* Header dentro de section: eyebrow + H2 + intro corto */
.azh-section__header {
  max-width: 820px;
  margin-bottom: 56px;
}


/* === 3. TIPOGRAFÍA === */

/* Eyebrow: rótulo uppercase encima del H2 de cada bloque.
   - 17px hardcoded (no escala con Theme Style)
   - oxford-50 sobre fondo claro
   - accent-color sobre fondo oscuro (.azh-section--dark) */
.azh-eyebrow {
  display: inline-block;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--azahar-oxford-50, rgba(5, 37, 76, 0.5));
  margin: 0 0 16px;
}

.azh-section--dark .azh-eyebrow {
  color: var(--accent-color, #0eafa7);
}

/* Títulos de sección y de card: heredan tipografía del Theme Style,
   solo aplicamos color y márgenes consistentes. */
.azh-title-section {
  color: var(--azahar-oxford, #05254c);
  letter-spacing: -0.01em;
  margin: 0 0 24px;
}

.azh-title-card {
  color: var(--azahar-oxford, #05254c);
  margin: 0 0 16px;
}

.azh-text-body {
  color: var(--azahar-oxford-70, rgba(5, 37, 76, 0.7));
  margin: 0;
}

.azh-text-lead {
  color: var(--azahar-oxford-90, rgba(5, 37, 76, 0.9));
  margin: 0;
}

/* Sobre fondo oscuro, los títulos y textos cambian de color */
.azh-section--dark .azh-title-section,
.azh-section--dark .azh-title-card {
  color: var(--azahar-white, #ffffff);
}

.azh-section--dark .azh-text-body {
  color: rgba(255, 255, 255, 0.85);
}

.azh-section--dark .azh-text-lead {
  color: rgba(255, 255, 255, 0.95);
}


/* === 4. BREADCRUMB === */

.azh-breadcrumb {
  margin: 0 auto;
  max-width: 1200px;
  padding: 32px 40px 0;
}

.azh-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 17px;
  letter-spacing: 0.02em;
  color: var(--azahar-oxford-50, rgba(5, 37, 76, 0.5));
  list-style: none;
  padding: 0;
  margin: 0;
}

.azh-breadcrumb__list a {
  color: var(--azahar-oxford-70, rgba(5, 37, 76, 0.7));
  text-decoration: none;
  transition: color 0.2s ease;
}

.azh-breadcrumb__list a:hover {
  color: var(--azahar-link, #83c200);
}

.azh-breadcrumb__separator {
  opacity: 0.4;
}

@media (max-width: 767px) {
  .azh-breadcrumb {
    padding-inline: 24px;
  }
}


/* === 5. CTA SECTION (¿Hablamos? + botón Contactar) === */

.azh-cta-section {
  padding-block: var(--section-spacing-sm, 80px);
  padding-inline: 40px;
  background: var(--azahar-white, #ffffff);
}

.azh-cta-section__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 80px 72px;
  background: linear-gradient(
    135deg,
    var(--accent-light, #c6faf8) 0%,
    var(--azahar-white, #ffffff) 70%
  );
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 48px;
  align-items: center;
}

.azh-cta-section__text h2 {
  color: var(--azahar-oxford, #05254c);
  margin: 0 0 20px;
  line-height: 1.15;
}

.azh-cta-section__text p {
  color: var(--azahar-oxford-90, rgba(5, 37, 76, 0.9));
  margin: 0;
}

.azh-cta-section__button {
  display: flex;
  justify-content: flex-end;
}

@media (max-width: 991px) {
  .azh-cta-section__inner {
    grid-template-columns: 1fr;
    padding: 64px 56px;
    gap: 32px;
  }
  .azh-cta-section__button {
    justify-content: flex-start;
  }
}

@media (max-width: 767px) {
  .azh-cta-section {
    padding-inline: 24px;
  }
  .azh-cta-section__inner {
    padding: 56px 32px;
  }
}


/* === 6. ITEM CARD (barra accent superior 120×8px) === */
/* Usado en: bloque "Por qué contratar" de servicios, bloque "Solución" de casos */

.azh-item-card {
  position: relative;
  padding-top: 24px;
}

.azh-item-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 120px;
  height: 8px;
  background: linear-gradient(
    90deg,
    var(--accent-color, #0eafa7) 0%,
    var(--accent-light, #c6faf8) 100%
  );
}

.azh-item-card__title {
  color: var(--azahar-oxford, #05254c);
  margin: 0 0 16px;
}

.azh-item-card__text {
  color: var(--azahar-oxford-70, rgba(5, 37, 76, 0.7));
  margin: 0;
}


/* === 7. LIST ITEM (barra accent lateral 14×2px) === */
/* Usado en: bloque "Valor diferencial de Azahar" de casos. Replicable en sectores, sobre-nosotros, home. */

.azh-list-item {
  position: relative;
  padding-left: 28px;
}

.azh-list-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 14px;
  width: 14px;
  height: 2px;
  background: var(--accent-color, #0eafa7);
}

.azh-list-item__title {
  color: var(--azahar-oxford, #05254c);
  margin: 0 0 8px;
}

.azh-list-item__text {
  color: var(--azahar-oxford-70, rgba(5, 37, 76, 0.7));
  margin: 0;
}


/* === 8. CARD GRID + CARD (cards interactivas con hover accent) === */
/* Usado en: "Servicios aplicados" de casos. Replicable en hubs, listados, recursos. */

.azh-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.azh-card-grid--2 {
  grid-template-columns: repeat(2, 1fr);
}

.azh-card-grid--4 {
  grid-template-columns: repeat(4, 1fr);
}

.azh-card {
  display: block;
  padding: 32px 24px;
  background: var(--azahar-white, #ffffff);
  box-shadow: 0 0 0 1px var(--azahar-oxford-15, rgba(5, 37, 76, 0.15)) inset;
  text-decoration: none;
  transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.azh-card:hover {
  background: linear-gradient(
    135deg,
    var(--accent-light, #c6faf8) 0%,
    var(--azahar-white, #ffffff) 70%
  );
  box-shadow: 0 0 0 1px var(--accent-color, #0eafa7) inset;
  transform: translateY(-2px);
  text-decoration: none;
}

.azh-card__label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-color, #0eafa7);
  margin: 0 0 12px;
}

.azh-card__title {
  color: var(--azahar-oxford, #05254c);
  margin: 0 0 12px;
}

.azh-card__arrow {
  color: var(--accent-color, #0eafa7);
}

@media (max-width: 991px) {
  .azh-card-grid,
  .azh-card-grid--2,
  .azh-card-grid--4 {
    grid-template-columns: 1fr;
  }
}


/* === 9. CALLOUT (border-left accent + texto cursiva) === */
/* Usado en: bloque de confidencialidad de casos. Replicable en cualquier nota destacada. */

.azh-callout {
  padding: 8px 0 8px 24px;
  border-left: 3px solid var(--accent-color, #0eafa7);
}

.azh-callout__text {
  margin: 0;
  color: var(--azahar-oxford-70, rgba(5, 37, 76, 0.7));
  font-style: italic;
}


/* Variante standalone: callout que vive entre dos secciones sin estar
   dentro de .azh-section. Padding asimétrico: más arriba (respiro tras
   sección con fondo de color) que abajo (se funde con el padding-block
   de la siguiente sección). Combinar siempre con .azh-section__inner. */
.azh-callout--standalone {
  padding-block: 40px 24px;
  padding-inline: 40px;
}

@media (max-width: 767px) {
  .azh-callout--standalone {
    padding-inline: 24px;
  }
}


/* === 10. ICONOS ACCENT-AWARE === */
/* SVGs cargados via <img> quedan en sandbox y currentColor no hereda.
   Solución: filter CSS calculado (Barrett Sonntag) por acento.
   - .azh-icon img: consume var(--accent-filter) para teñir al color acento.
   - .azh-icon--on-dark img: blanco (brightness(0) invert(100%)) para
     iconos sobre fondo Oxford Blue. */

.azh-icon img {
  filter: var(--accent-filter);
  display: block;
  width: 100%;
  height: 100%;
}

.azh-icon.azh-icon--on-dark img {
  filter: brightness(0) saturate(100%) invert(100%);
}


/* === 12. RESPONSIVE GLOBAL DE SECCIÓN === */

@media (max-width: 767px) {
  .azh-section {
    padding-inline: 24px;
  }
}


/* === 13. MODIFICADORES DE COLOR (8 acentos) === */
/* 
   Se aplican al wrapper raíz de cualquier página (.servicio-page,
   .caso-page, .legal-page, etc.) y definen --accent-color, --accent-light
   y --accent-filter que el resto de clases consumen.

   --accent-filter: cadena CSS filter calculada con Barrett Sonntag
   (losses <1.5) que tiñe un SVG negro al color acento. Usada por
   .azh-icon img para teñir iconos <img> accent-aware.
*/

.azh-accent--turquesa {
  --accent-color: var(--color-turquesa-accent, #0eafa7);
  --accent-light: var(--color-turquesa-light, #c6faf8);
  --accent-filter: brightness(0) saturate(100%) invert(56%) sepia(72%) saturate(1763%) hue-rotate(141deg) brightness(95%) contrast(101%);
}

.azh-accent--rosa {
  --accent-color: var(--color-rosa-accent, #ff61c4);
  --accent-light: var(--color-rosa-light, #ffebf8);
  --accent-filter: brightness(0) saturate(100%) invert(53%) sepia(95%) saturate(2339%) hue-rotate(298deg) brightness(101%) contrast(102%);
}

.azh-accent--morado {
  --accent-color: var(--color-morado-accent, #a25aff);
  --accent-light: var(--color-morado-light, #e8d6ff);
  --accent-filter: brightness(0) saturate(100%) invert(41%) sepia(96%) saturate(3642%) hue-rotate(254deg) brightness(101%) contrast(101%);
}

.azh-accent--naranja {
  --accent-color: var(--color-naranja-accent, #f59b00);
  --accent-light: var(--color-naranja-light, #ffe9c2);
  --accent-filter: brightness(0) saturate(100%) invert(63%) sepia(89%) saturate(1425%) hue-rotate(7deg) brightness(103%) contrast(106%);
}

.azh-accent--rojo {
  --accent-color: var(--color-rojo-accent, #e00000);
  --accent-light: var(--color-rojo-light, #ffc2c2);
  --accent-filter: brightness(0) saturate(100%) invert(12%) sepia(98%) saturate(7087%) hue-rotate(2deg) brightness(97%) contrast(112%);
}

.azh-accent--celeste {
  --accent-color: var(--color-celeste-accent, #0b9fd5);
  --accent-light: var(--color-celeste-light, #d8f3fd);
  --accent-filter: brightness(0) saturate(100%) invert(51%) sepia(93%) saturate(1290%) hue-rotate(161deg) brightness(91%) contrast(101%);
}

.azh-accent--lavanda {
  --accent-color: var(--color-lavanda-accent, #d000f5);
  --accent-light: var(--color-lavanda-light, #fcebff);
  --accent-filter: brightness(0) saturate(100%) invert(18%) sepia(100%) saturate(7500%) hue-rotate(284deg) brightness(95%) contrast(119%);
}

.azh-accent--lima {
  --accent-color: var(--color-lima-accent, #68b800);
  --accent-light: var(--color-lima-light, #edffd6);
  --accent-filter: brightness(0) saturate(100%) invert(58%) sepia(96%) saturate(458%) hue-rotate(43deg) brightness(99%) contrast(106%);
}

/* === 14. CONTENEDOR DE PÁGINA OPCIONAL ===
   Aplicar .azh-page-content a un wrapper cuando ESE bloque deba limitarse
   a 1400px y centrarse. NO se aplica automáticamente al body.
   Procede del style.css del child theme (v1.8); vive aquí por coherencia
   con el resto de utilidades de layout. */

.azh-page-content {
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 3rem;
  padding-right: 3rem;
  padding-top: 2rem;
  padding-bottom: 2rem;
}

@media (min-width: 769px) and (max-width: 1024px) {
  .azh-page-content { padding-left: 2.5rem; padding-right: 2.5rem; }
}

@media (min-width: 1440px) {
  .azh-page-content { padding-left: 4rem; padding-right: 4rem; }
}

@media (min-width: 1920px) {
  .azh-page-content { max-width: 1600px; padding-left: 5rem; padding-right: 5rem; }
}

@media (max-width: 768px) {
  .azh-page-content {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }
}


/* === 15. HEADER STICKY ===
   Procede del bloque 3 del Custom Code de Bricks.
   Usa !important porque Bricks aplica sus propios estilos en el editor.
   El breakpoint 782px es el estándar de WordPress para el admin bar. */

#brx-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
}

body.admin-bar #brx-header { top: 32px !important; }

@media (max-width: 782px) {
  body.admin-bar #brx-header { top: 46px !important; }
}


/* === 16. FOOTER — VISTA MÓVIL REDUCIDA ===
   Procede del bloque 4 del Custom Code de Bricks, reescrito con clases.
   Antes eran seis selectores #brxe-* frágiles; ahora se resuelve con las
   dos clases globales que ya llevan esos elementos:
     .nav-titles-footer  = títulos de columna (SECTORES, INSIGHTS, ...)
     .nav-menu-footer    = menús de enlaces de cada columna

   PENDIENTE (sesión de footer): las tres reglas comentadas abajo siguen
   ancladas a IDs porque sus elementos aún no tienen clase aplicada.
   Las clases footer-grid, footer-contact-row y footer-legal-nav ya están
   creadas en Bricks; falta asignarlas y descomentar. */

@media (max-width: 767px) {
  .nav-titles-footer,
  .nav-menu-footer { display: none !important; }

  /* .footer-grid {
       grid-template-columns: 1fr !important;
       gap: 0 !important;
     }
     .footer-contact-row {
       flex-direction: column !important;
       gap: 32px !important;
       column-gap: 0 !important;
     }
     .footer-legal-nav ul.brx-menu {
       flex-direction: column !important;
       align-items: flex-start !important;
       gap: 8px !important;
     } */

  #brxe-fwheno {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }

  #brxe-ogihjx {
    flex-direction: column !important;
    gap: 32px !important;
    column-gap: 0 !important;
  }

  #brxe-bnowkv ul.brx-menu {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }
}


/* === 17. HEADER — CTA OCULTA EN MÓVIL ===
   Procede del bloque 5 del Custom Code de Bricks. El botón CONTACTO se
   solapaba con el logo en el header móvil, y el menú hamburguesa ya da
   acceso a la navegación. Se reescribe con la clase .header-cta, ya
   aplicada al botón, en vez del ID #brxe-mytzdj, que cambia si se
   reconstruye el header.

   PENDIENTE: "Contacto" no existe como ítem del menú de WordPress, solo
   como este botón. Al ocultarlo en móvil, el único acceso a contacto
   desde el teléfono es el pie de página. Añadir Contacto al menú
   principal resolvería el fleco. */
@media (max-width: 767px) {
  .header-cta { display: none !important; }
}


/* === 18. NAVEGACIÓN — MENÚ PRINCIPAL, DROPDOWNS Y MEGAMENÚ ===
   Procede del _cssCustom del elemento nav-menu del header (fxqdru).
   Al vivir aquí, el elemento de Bricks queda sin CSS propio y el estilo
   es versionable. Los selectores usan .brxe-nav-menu (clase, no ID), así
   que son estables aunque se recree el elemento. */

/* Underline animado en menú principal */
.brxe-nav-menu > ul > li > a {
  position: relative;
  transition: color 0.3s ease;
}

.brxe-nav-menu > ul > li > a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: #0eafa7;
  transition: width 0.3s ease;
}

.brxe-nav-menu > ul > li > a:hover::after { width: 100%; }

/* Estado activo (página actual) */
.brxe-nav-menu .current-menu-item > a,
.brxe-nav-menu .current-menu-parent > a {
  color: #0eafa7;
  font-weight: 600;
}

.brxe-nav-menu .current-menu-item > a::after,
.brxe-nav-menu .current-menu-parent > a::after { width: 100%; }

/* Dropdown estándar (1 columna): Sobre nosotros, Sectores, Insights */
.brxe-nav-menu .sub-menu {
  background: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  padding: 12px 16px;
  margin-top: 8px;
  min-width: 220px;
}

.brxe-nav-menu .sub-menu li { margin-bottom: 4px; }
.brxe-nav-menu .sub-menu li:last-child { margin-bottom: 0; }

.brxe-nav-menu .sub-menu a {
  padding: 8px 12px;
  display: block;
  color: #05254c;
  font-size: 15px;
  line-height: 1.4;
  transition: all 0.2s ease;
  border-radius: 4px;
}

.brxe-nav-menu .sub-menu a:hover {
  color: #0eafa7;
  background-color: rgba(14, 175, 167, 0.08);
}

/* Megamenú multi-columna: solo para items con clase .mega-menu (Servicios) */
.brxe-nav-menu .mega-menu > .sub-menu {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  min-width: 720px;
  padding: 24px 32px;
}

.brxe-nav-menu .mega-menu > .sub-menu > li { margin-bottom: 0; }

/* Headers de sección del megamenú (títulos no clicables) */
.brxe-nav-menu .mega-menu .menu-item-header {
  font-size: 12px;
  font-weight: 600;
  color: #6c757d;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding: 0 12px 8px 12px;
  margin-bottom: 8px;
  border-bottom: 2px solid #e0e0e0;
  pointer-events: none;
}

/* Items dentro de cada columna del megamenú */
.brxe-nav-menu .mega-menu .sub-menu .sub-menu {
  position: static;
  box-shadow: none;
  border: none;
  padding: 0;
  margin: 0;
  min-width: auto;
}

.brxe-nav-menu .mega-menu .sub-menu .sub-menu li { margin-bottom: 2px; }

.brxe-nav-menu .mega-menu .sub-menu .sub-menu a {
  font-size: 14px;
  padding: 6px 12px;
}

@media (max-width: 991px) {
  .brxe-nav-menu .mega-menu > .sub-menu {
    grid-template-columns: 1fr;
    min-width: auto;
    padding: 16px;
  }
}