/* ===================================================================
   NOESIS · A.I. Advisory — Componentes compartidos de las páginas de
   servicio (capacitación, asesoría, producto). Depende de
   brand-v2-web.css y brand-v2-layout.css.
   =================================================================== */

/* ---------- Contexto (intro de cada página, 2-3 párrafos) ---------- */
/* .context-inner se limita a 680px por legibilidad (una columna angosta
   se lee mejor); eso deja aire a la derecha en pantallas anchas. En vez
   de estirar el texto, llenamos ese aire con el mismo símbolo que ya
   marca la sección de Firma en el home — mismo lenguaje visual, cero
   elementos nuevos que mantener. */
.context{background:var(--noesis-mist);position:relative;overflow:hidden;}
.context-symbol{position:absolute;right:-90px;top:50%;transform:translateY(-50%);width:420px;height:420px;opacity:.05;pointer-events:none;}
.context-symbol svg{width:100%;height:100%;}
.context-inner{position:relative;max-width:680px;}
.context h2{font-size:24px;font-weight:300;line-height:1.4;margin-bottom:30px;max-width:26ch;text-wrap:balance;}
.context p{font-size:14.5px;color:#3a3a3a;line-height:1.75;margin-bottom:18px;max-width:60ch;}
.context p.lead{font-size:17px;color:var(--noesis-ink);line-height:1.6;margin-bottom:26px;max-width:52ch;}

/* ---------- Bloques de detalle: niveles / entregables / desarrollos ---------- */
.detail-list{border-top:1px solid var(--noesis-hairline);}
.detail-block{padding:56px 0;border-bottom:1px solid var(--noesis-hairline);display:grid;grid-template-columns:180px 1fr;gap:40px;}
.detail-block .d-num{font-size:12px;color:var(--noesis-gray-text);letter-spacing:.08em;padding-top:4px;}
.detail-block .d-scope{display:block;font-size:12px;color:var(--noesis-gray-text);margin-top:8px;}
.detail-block h3{font-size:22px;font-weight:400;margin-bottom:12px;}
.detail-block .d-desc{font-size:14.5px;color:#3a3a3a;line-height:1.7;margin-bottom:22px;max-width:62ch;}
.detail-block .d-label{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--noesis-gray-text);margin-bottom:12px;margin-top:24px;}
.detail-block ul{list-style:none;display:flex;flex-direction:column;gap:9px;max-width:62ch;}
.detail-block ul li{font-size:14px;color:#3a3a3a;line-height:1.6;padding-left:18px;position:relative;}
.detail-block ul li::before{content:"";position:absolute;left:0;top:.7em;width:6px;height:1px;background:var(--noesis-gray);}
.detail-block .d-result{font-size:14px;color:#3a3a3a;line-height:1.6;max-width:62ch;}
.detail-block .d-closing{font-size:13.5px;color:var(--noesis-gray-text);line-height:1.65;margin-top:24px;padding-top:24px;border-top:1px solid var(--noesis-hairline);max-width:62ch;}

/* ---------- Ofertas (Producto: Agentes / Chatbots / Automatizaciones / Integraciones) ---------- */
.offer-list{border-top:1px solid var(--noesis-hairline);}
.offer-block{padding:52px 0;border-bottom:1px solid var(--noesis-hairline);max-width:74ch;}
.offer-block h3{font-size:20px;font-weight:400;margin-bottom:14px;}
.offer-block > p{font-size:14.5px;color:#3a3a3a;line-height:1.7;margin-bottom:20px;}
.offer-block ul{list-style:none;display:flex;flex-direction:column;gap:9px;margin-bottom:20px;}
.offer-block ul li{font-size:14px;color:#3a3a3a;line-height:1.6;padding-left:18px;position:relative;}
.offer-block ul li::before{content:"";position:absolute;left:0;top:.7em;width:6px;height:1px;background:var(--noesis-gray);}
.offer-block .closing{font-size:13.5px;color:var(--noesis-gray-text);line-height:1.6;}

/* ---------- Cuadrícula de características (Producto: cómo entregamos) ---------- */
.section-head{max-width:640px;margin-bottom:56px;}
.section-head h2{font-size:clamp(22px,2.8vw,30px);font-weight:300;line-height:1.35;text-wrap:balance;}
.feature-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:48px 56px;}
.feature h3{font-size:17px;font-weight:400;margin-bottom:12px;}
.feature p{font-size:14px;color:#3a3a3a;line-height:1.7;margin-bottom:12px;}

/* ---------- Cómo trabajamos (pasos) ---------- */
.steps-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:44px 32px;}
.steps-grid--5{grid-template-columns:repeat(5,1fr);}
.step-num{display:block;font-size:11px;color:var(--noesis-gray-text);letter-spacing:.1em;margin-bottom:16px;}
.step h3{font-size:16px;font-weight:400;margin-bottom:10px;}
.step p{font-size:13.5px;color:#4a4a4a;line-height:1.6;}

/* ---------- ¿Para quién es? ---------- */
.fit-intro{font-size:15px;color:#3a3a3a;margin-bottom:28px;}
.fit-list{display:grid;grid-template-columns:repeat(2,1fr);gap:0 40px;}
.fit-item{display:flex;align-items:flex-start;gap:14px;font-size:14.5px;color:#3a3a3a;line-height:1.5;padding:16px 0;border-bottom:1px solid var(--noesis-hairline);}
.fit-item .mark{flex-shrink:0;width:19px;height:19px;margin-top:2px;color:var(--noesis-accent);}
.fit-item .mark svg{width:100%;height:100%;display:block;}

/* ---------- CTA final (clara, enlaza al contacto del home) ---------- */
.svc-cta{padding:120px 0 140px;text-align:center;}
.svc-cta .wrap{max-width:640px;}
.svc-cta h2{font-size:clamp(24px,3.4vw,36px);font-weight:300;line-height:1.35;margin:18px 0 36px;text-wrap:balance;}
.svc-cta p{font-size:14.5px;color:#4a4a4a;line-height:1.7;margin:-16px 0 30px;}

/* ---------- Footer claro (páginas internas) ---------- */
footer{padding:50px 0 60px;border-top:1px solid var(--noesis-hairline);}

/* La sección de niveles (capacitación) es la única página de servicio con
   dos secciones blancas seguidas (niveles → cómo trabajamos): sin cambio
   de fondo entre ellas, el espaciado estándar de 120px+120px se lee como
   un vacío. Se recorta solo esta transición; el resto del ritmo del
   sitio no se toca. */
#niveles{padding-bottom:64px;}
#niveles + section{padding-top:64px;}

@media (max-width:860px){
  .detail-block{grid-template-columns:1fr;gap:14px;}
  .steps-grid,.steps-grid--5{grid-template-columns:repeat(2,1fr);}
  .fit-list{grid-template-columns:1fr;}
  .feature-grid{grid-template-columns:1fr;gap:36px;}
  .context-symbol{display:none;}
}
@media (max-width:560px){
  .steps-grid,.steps-grid--5{grid-template-columns:1fr;}
}