/* =========================================================================
   AZAHAR DATA INSIGHTS — CSS de página: servicio
   Extraído de plantillas/servicio.html.j2 (fase 2 del refactor CSS).
   Las clases globales azh-* NO se redefinen aquí: viven en azh-globals.css.
   Fuente de verdad: este fichero. La plantilla Jinja2 ya no lleva <style>.
   ========================================================================= */

/* =========================================================
     AZAHAR — PÁGINAS DE SERVICIOS (v2.5)
     Solo clases específicas del tipo "servicio".
     Las clases globales azh-* viven en azh-globals.css.
     ========================================================= */

  /* === WRAPPER RAÍZ === */
  /* .servicio-page ya está en Bricks Style Manager con box-sizing y color.
     NO redefinir aquí — causa diálogo CONFLICT en import. */
  .servicio-page * { box-sizing: border-box; }

  /* === HERO === */
  /* LONGHAND EXPLÍCITO: nunca shorthand padding con var() en Bricks. */
  .servicio-hero {
    padding-top: 80px;
    padding-right: 40px;
    padding-bottom: 120px;
    padding-left: 40px;
    max-width: 1100px;
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
  }
  .servicio-hero__stack { display: flex; flex-direction: column; gap: 48px; }
  .servicio-hero__title { color: var(--azahar-oxford, #05254c); margin: 0; letter-spacing: -0.02em; }
  .servicio-hero__tagline { color: var(--azahar-oxford-70, rgba(5, 37, 76, 0.7)); margin: -16px 0 0; }
  .servicio-hero__label { font-size: 17px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--azahar-oxford, #05254c); margin: 0; }
  .servicio-hero__paragraph { color: var(--azahar-oxford-90, rgba(5, 37, 76, 0.9)); margin: 0; }

  /* Bloque "Qué es" a dos columnas. La etiqueta ocupa la fila entera; si no,
     caería en la primera celda y descuadraría los párrafos.

     Tres clases, y no una, por especificidad: estas tres clases tienen
     settings guardados en el registro global de Bricks, que los emite como
     `.servicio-hero__what.brxe-div { display: flex }` y
     `.servicio-hero__paragraph.brxe-text-basic { max-width: 640px }` en un
     <style> inline posterior a esta hoja. Con un solo selector de clase
     pierde por especificidad Y por orden, y el bloque se queda apilado.
     De ahí también el `max-width: none`: no basta con no declararlo aquí.
     Cuando esos settings se vacíen (limpieza de clases globales pendiente),
     estos selectores pueden volver a una sola clase. */
  .servicio-page .servicio-hero__stack .servicio-hero__what { display: grid; grid-template-columns: 1fr 1fr; column-gap: 56px; row-gap: 20px; align-items: start; }
  .servicio-page .servicio-hero__stack .servicio-hero__label { grid-column: 1 / -1; }
  .servicio-page .servicio-hero__stack .servicio-hero__paragraph { max-width: none; }
  .servicio-hero__objectives { position: relative; padding: 40px 44px; background: linear-gradient(135deg, var(--accent-light) 0%, var(--azahar-white, #ffffff) 100%); margin-top: 16px; }
  .servicio-hero__objectives-title { color: var(--azahar-oxford, #05254c); margin: 0 0 24px; }
  .servicio-hero__objectives-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 16px; }
  .servicio-hero__objectives-list li { position: relative; padding-left: 22px; color: var(--azahar-oxford-90, rgba(5, 37, 76, 0.9)); }
  .servicio-hero__objectives-list li::before { content: ''; position: absolute; left: 0; top: 12px; width: 8px; height: 8px; background: var(--accent-color); }
  .servicio-hero__keypoints-wrapper { margin-top: 56px; }
  .servicio-hero__decorative { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 48px; max-width: 520px; }
  .servicio-hero__rect { height: 28px; background: linear-gradient(90deg, var(--accent-color) 0%, var(--accent-light) 50%, var(--azahar-white, #ffffff) 100%); }
  .servicio-hero__keypoints { position: relative; padding-left: 80px; }
  .servicio-hero__vertical-label { position: absolute; left: 0; top: 0; font-size: 17px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--azahar-oxford, #05254c); writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; }
  .servicio-hero__keypoints::before { content: ''; position: absolute; left: 48px; top: 0; bottom: 0; width: 1px; background: var(--azahar-oxford, #05254c); opacity: 0.6; }
  .servicio-hero__keypoints-list { display: grid; grid-template-columns: 1fr 1fr; gap: 44px 56px; }
  .servicio-hero__keypoint-block { display: flex; flex-direction: column; gap: 14px; }
  .servicio-hero__keypoint-title { color: var(--azahar-oxford, #05254c); margin: 0; }
  .servicio-hero__keypoint-items { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
  .servicio-hero__keypoint-items li { position: relative; padding-left: 20px; color: var(--azahar-oxford-90, rgba(5, 37, 76, 0.9)); }
  .servicio-hero__keypoint-items li::before { content: '\2022'; position: absolute; left: 4px; top: 0; color: var(--accent-color); font-weight: 700; }

  /* === PARA QUÉ SIRVE (fondo Oxford) === */
  .servicio-purpose__inner { display: grid; grid-template-columns: 1fr 2fr; gap: 80px; align-items: start; }
  .servicio-purpose__heading { color: var(--azahar-white, #ffffff); margin: 0; letter-spacing: -0.01em; }
  /* .servicio-purpose__aside agrupa heading + línea en la primera columna del
     grid. La línea NO puede ir dentro del <h2>: el conversor HTML->Bricks
     colapsa los elementos vacíos anidados en un heading a texto literal y la
     línea no se renderiza. Y como hermano suelto sería un tercer hijo del
     grid de 2 columnas, así que va envuelta. */
  .servicio-purpose__aside { display: block; }
  .servicio-purpose__heading-line { display: block; width: 64px; height: 3px; background: var(--accent-color); margin-top: 28px; }
  .servicio-purpose__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 26px; }
  .servicio-purpose__list li { position: relative; padding-left: 28px; color: rgba(255, 255, 255, 0.9); }
  .servicio-purpose__list li::before { content: ''; position: absolute; left: 0; top: 14px; width: 14px; height: 2px; background: var(--accent-color); }

  /* === POR QUÉ CONTRATAR === */
  .servicio-benefits__title { color: var(--azahar-oxford, #05254c); margin: 0 0 28px; letter-spacing: -0.01em; }
  .servicio-benefits__intro { color: var(--azahar-oxford-70, rgba(5, 37, 76, 0.7)); margin: 0; }
  .servicio-benefits__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px 56px; }
  .servicio-benefits__cta { margin-top: 56px; text-align: center; }

  /* === PROCESO D²I === */
  .servicio-process { background: var(--azahar-bg-soft, #ecf4fe); }
  .servicio-process__title { color: var(--azahar-oxford, #05254c); margin: 0 0 28px; letter-spacing: -0.01em; }
  .servicio-process__intro { color: var(--azahar-oxford-70, rgba(5, 37, 76, 0.7)); margin: 0; }
  .servicio-process__steps { display: flex; flex-direction: column; gap: 0; }
  .servicio-process__step { display: grid; grid-template-columns: 140px 1fr; gap: 56px; padding: 36px 0; align-items: start; }
  .servicio-process__step-number { color: var(--accent-color); letter-spacing: -0.02em; line-height: 1; }
  .servicio-process__step-content { padding-top: 8px; }
  .servicio-process__step-title { color: var(--azahar-oxford, #05254c); margin: 0 0 16px; }
  .servicio-process__step-text { color: var(--azahar-oxford-70, rgba(5, 37, 76, 0.7)); margin: 0; max-width: 760px; }
  .servicio-process__note { margin-top: 56px; padding: 32px 40px; background: var(--azahar-white, #ffffff); position: relative; }
  .servicio-process__note::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: linear-gradient(180deg, var(--accent-color) 0%, var(--accent-light) 100%); }
  .servicio-process__note p { color: var(--azahar-oxford-90, rgba(5, 37, 76, 0.9)); margin: 0; }
  .servicio-process__note a { color: var(--azahar-link, #83c200); text-decoration: none; font-weight: 600; }
  .servicio-process__note a:hover { color: var(--azahar-link-hover, #05254c); text-decoration: underline; }

  /* === CTA INTERMEDIO (bloque "¿Tienes un proyecto…?") === */
  /* Mismo patrón que el bloque homónimo de Sobre Nosotros, monocolor sobre el
     acento de la página. Aira la página entre el proceso y la zona de
     navegación (relacionados + casos + FAQ).
     Padding lateral explícito: la clase global azh-section no siempre aporta
     el padding-inline en producción, así que se fija aquí en longhand. */
  .servicio-cta-mid { background: var(--azahar-white, #ffffff); padding-top: 80px; padding-right: 40px; padding-bottom: 80px; padding-left: 40px; }
  .servicio-cta-mid__inner { max-width: 880px; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto; text-align: center; }
  .servicio-cta-mid__title { color: var(--azahar-oxford, #05254c); margin: 0 0 16px; letter-spacing: -0.01em; }
  .servicio-cta-mid__text { color: var(--azahar-oxford-70, rgba(5, 37, 76, 0.7)); margin: 0 0 32px; }

  /* === SEPARADOR MONOCOLOR (bandas en degradado del acento) === */
  /* Primo monocromático del mosaico multicolor de Sobre Nosotros: aquí todas
     las bandas son variantes del acento de la página (pleno → light → blanco),
     subordinadas al color del servicio. Decorativo. */
  .servicio-sep { width: 100%; }
  .servicio-sep__row { display: grid; }
  .servicio-sep__row--top { grid-template-columns: 1fr 1fr; height: 40px; }
  .servicio-sep__row--bottom { grid-template-columns: 1fr 1fr 1fr; height: 40px; }
  .servicio-sep__band { width: 100%; height: 100%; }
  .servicio-sep__band--a { background: linear-gradient(90deg, var(--accent-color) 0%, var(--azahar-white, #ffffff) 100%); }
  .servicio-sep__band--b { background: linear-gradient(90deg, var(--accent-light) 0%, var(--azahar-white, #ffffff) 100%); }
  .servicio-sep__band--c { background: linear-gradient(90deg, var(--accent-color) 0%, var(--accent-light) 70%, var(--azahar-white, #ffffff) 100%); }

  /* Bricks renderiza cada sección como flex column; sin width:100% el
     azh-section__inner se encoge a su contenido y el margin:0 auto lo
     descentra. Se fuerza el ancho completo en los inner de estas secciones. */
  .servicio-cta-mid > .azh-section__inner,
  .servicio-related > .azh-section__inner,
  .servicio-cases > .azh-section__inner,
  .servicio-faq > .azh-section__inner { width: 100%; }

  /* === SERVICIOS Y CASOS RELACIONADOS === */
  /* Reutilizan azh-card-grid + azh-card (globales). La etiqueta de rol de flujo
     (Antes / En paralelo / Después) va en el label de la tarjeta de servicio;
     el chip de sector, en la de caso.
     Padding lateral explícito en longhand: en producción la clase global
     azh-section no aporta el padding-inline, así que se fija aquí para que las
     tres secciones queden alineadas con el resto de la página (40px). */
  .servicio-related { background: var(--azahar-white, #ffffff); padding-top: 80px; padding-right: 40px; padding-bottom: 80px; padding-left: 40px; }
  .servicio-cases { background: var(--azahar-oxford, #05254c); padding-top: 80px; padding-right: 40px; padding-bottom: 80px; padding-left: 40px; }
  /* Casos sobre Oxford Blue: el H2 de la sección va en blanco explícito
     (Bricks aplica al heading su color Oxford Blue con especificidad propia,
     que gana a la herencia de azh-section--dark; por eso se fija aquí). */
  .servicio-cases .servicio-cases__title { color: var(--azahar-white, #ffffff); }
  .servicio-faq { padding-top: 80px; padding-right: 40px; padding-bottom: 80px; padding-left: 40px; }
  /* Casos sobre Oxford Blue: el título de sección hereda azh-section--dark
     (blanco); el chip de sector de cada tarjeta va en degradado del acento. */
  .servicio-cases__chip { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--azahar-oxford, #05254c); padding-top: 5px; padding-right: 12px; padding-bottom: 5px; padding-left: 12px; margin-bottom: 14px; background: linear-gradient(90deg, var(--accent-light) 0%, var(--azahar-white, #ffffff) 100%); }

  /* === FAQ (acordeón <details>/<summary>) === */
  /* Degradado del acento SOLO en la pregunta abierta (señala dónde estás);
     las cerradas, en blanco con línea fina. Cero JavaScript: <details> nativo. */
  .servicio-faq__list { display: flex; flex-direction: column; gap: 0; }
  .servicio-faq__item { border-top: 1px solid var(--azahar-oxford-10, rgba(5, 37, 76, 0.10)); }
  .servicio-faq__item:last-child { border-bottom: 1px solid var(--azahar-oxford-10, rgba(5, 37, 76, 0.10)); }
  .servicio-faq__q { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding-top: 22px; padding-right: 24px; padding-bottom: 22px; padding-left: 24px; background: var(--azahar-white, #ffffff); transition: background 0.2s ease; }
  .servicio-faq__q::-webkit-details-marker { display: none; }
  .servicio-faq__q-text { color: var(--azahar-oxford, #05254c); font-weight: 600; }
  .servicio-faq__q-icon { flex-shrink: 0; color: var(--azahar-oxford, #05254c); transition: transform 0.2s ease; line-height: 1; }
  .servicio-faq__item[open] > .servicio-faq__q { background: linear-gradient(90deg, var(--accent-light) 0%, var(--azahar-white, #ffffff) 70%); }
  .servicio-faq__item[open] > .servicio-faq__q .servicio-faq__q-icon { transform: rotate(180deg); }
  .servicio-faq__a { padding-top: 22px; padding-right: 24px; padding-bottom: 28px; padding-left: 24px; }
  .servicio-faq__a p { color: var(--azahar-oxford-90, rgba(5, 37, 76, 0.9)); margin: 0 0 14px; max-width: 760px; line-height: 1.65; }
  .servicio-faq__a p:last-child { margin-bottom: 0; }

  /* === RESPONSIVE ===
     Todos los selectores con prefijo .servicio-page para ganar especificidad.
     Breakpoints canónicos: 991px / 767px / 479px. */
  @media (max-width: 991px) {
    .servicio-page .servicio-hero { padding-bottom: 96px; }
    .servicio-page .servicio-hero__stack .servicio-hero__what { grid-template-columns: 1fr; }
    .servicio-page .servicio-hero__keypoints-list { grid-template-columns: 1fr; gap: 32px; }
    .servicio-page .servicio-purpose__inner { grid-template-columns: 1fr; gap: 40px; }
    .servicio-page .servicio-benefits__grid { grid-template-columns: 1fr; gap: 48px; }
    .servicio-page .servicio-process__step { grid-template-columns: 100px 1fr; gap: 32px; }
  }

  @media (max-width: 767px) {
    .servicio-page .servicio-hero { padding-left: 24px; padding-right: 24px; }
    .servicio-page .servicio-hero__keypoints { padding-left: 0; }
    .servicio-page .servicio-hero__vertical-label { position: static; writing-mode: horizontal-tb; transform: none; margin-bottom: 16px; display: block; }
    .servicio-page .servicio-hero__keypoints::before { display: none; }
    .servicio-page .servicio-hero__objectives { padding: 32px 28px; }
    .servicio-page .servicio-process__step { grid-template-columns: 1fr; gap: 16px; padding: 36px 0; }
    .servicio-page .servicio-process__note { padding: 28px 24px; }
    .servicio-page .servicio-faq__q { padding-left: 18px; padding-right: 18px; gap: 16px; }
    .servicio-page .servicio-faq__a { padding-left: 18px; padding-right: 18px; }
  }

  @media (max-width: 479px) {
    .servicio-page .servicio-hero__decorative { grid-template-columns: 1fr; }
  }