/* T6.33.1: banda horizontal de claims/métricas sobre fondo oscuro (usada
   en /insights y /equipo). Canon derivado de la banda de /equipo — la
   más consistente. La <section> conserva su background (permite variar
   #08151d, #0f2a38 según página); esta clase gestiona layout, tipografía
   y separadores. La banda de /servicios ("Vendemos resultados, no horas
   de código") NO usa esta clase: es una sección hero de métricas
   destacadas con grid 4 columnas y H2 propio — patrón distinto. */
.dl-claims-bar{
  max-width:1240px;margin:0 auto;padding:48px 32px;
  display:flex;align-items:center;justify-content:center;
  gap:48px;flex-wrap:wrap;text-align:center;color:#fff
}
.dl-claims-bar__item{text-align:left}
.dl-claims-bar__num{font-family:'Kanit',sans-serif;font-size:1.6rem;font-weight:700;line-height:1;color:#fff}
.dl-claims-bar__label{display:block;margin-top:6px;font-size:.86rem;color:rgb(169,190,203);font-weight:300}
.dl-claims-bar__sep{width:1px;height:40px;background:rgba(255,255,255,.14);flex:0 0 1px}

/* === Fix menú: quitar cajas (borde residual del maquetador) === */
header nav a{border-top:0 !important;border-left:0 !important;border-right:0 !important;outline:0 !important}

/* === T6.3: ocultar marcadores "[ captura ]" y "[ captura de producto ]" mientras no haya screenshot real === */
.dl-captura-placeholder{display:none !important}

/* === T6.23 pto.4: kicker global — pequeña etiqueta de sección uppercase
   que precede a un titular. Los HTMLs exportados llevan el mismo bloque
   de estilos inline (font-size:.78rem letter-spacing:.18em uppercase),
   así que basta con un selector por atributo para aplicar el ajuste sin
   tocar 29 sitios: +margin-bottom para pegarlo al titular y +1pt de
   tamaño (0.78 → 0.82). La regla nueva .dl-kicker es la forma canónica
   para markup nuevo. */
.dl-kicker{
  display:inline-block;
  font-family:'Kanit',sans-serif;font-weight:600;
  font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;
  color:#22577A;margin-bottom:14px
}
.dl-kicker--muted{color:#8a98a4}
.dl-kicker--accent{color:#22a37c}
/* T6.24: variante para fondos oscuros (hero, footer). Contraste AA sobre #061a23 = 12.6:1. */
.dl-kicker--onDark{color:#fff}
/* Selector por atributo para los kickers que quedan como estilo inline
   en los dc/*.html exportados. Aplica el offset y sube el tamaño; el
   color inline se respeta (dark blue / verde acento / gris muted). */
span[style*="letter-spacing: 0.18em"][style*="text-transform: uppercase"]{
  display:inline-block;
  font-size:.82rem !important;
  margin-bottom:14px !important
}

/* === T6.22: chips y CTA de tarjeta de producto (usados en /productos) ==== */
.dl-chip{
  display:inline-flex;align-items:center;
  padding:4px 10px;border-radius:999px;
  background:#f4f7fa;border:1px solid #d7e2ea;color:#22577A;
  font-family:'Kanit',sans-serif;font-weight:500;font-size:.76rem;letter-spacing:normal;
  white-space:nowrap
}
/* T6.22.2: chip discreto que sustituye al badge "PRODUCTO" verde sobre la
   captura. Va junto al título en sentence case. */
.dl-chip--soft{background:#eef7f2;border-color:#c8e6d5;color:#0a7050;font-size:.72rem;padding:3px 9px}
/* T6.23.3: variantes de color para chips de categoría (Insights).
   Mismos ratios AA que los pills equivalentes (>=4.5:1). */
.dl-chip--warn{background:#fdf1d5;border-color:#f2d38a;color:#854f0b}
.dl-chip--info{background:#dfeef8;border-color:#b5d6eb;color:#0a3e63}
.dl-chip--ok  {background:#dcf5ea;border-color:#b6e5cc;color:#0a7050}
/* T6.25 pto.2: chip uniforme para "Capacidades técnicas de desarrollo".
   Blanco + borde #d7e2ea + texto #0f2a38. AA sobre banda #eef4f8:
   14.5:1. Ligeramente más grande que el .dl-chip base porque estos son
   pills navegables visualmente, no metadatos. */
.dl-cap-chip{
  display:inline-flex;align-items:center;
  padding:9px 16px;border-radius:8px;
  background:#fff;border:1px solid #d7e2ea;color:#0f2a38;
  font-family:'Kanit',sans-serif;font-weight:500;font-size:.9rem;letter-spacing:normal;
  white-space:nowrap
}
/* T6.23.3: dentro del header de una card de Insights, el .dl-mock vive
   suelto (sin .dl-mock-card externa); reset del min-height y borde. */
.insight-header .dl-mock{min-height:0;background:#fff;border:1px solid #d7e2ea;border-radius:12px;overflow:hidden;flex:1;min-width:0}
.insight-header .dl-mock__head{padding:5px 9px}
.insight-header .dl-mock__label{font-size:.66rem}
.insight-header .dl-mock__tag{font-size:.6rem}
.insight-header .dl-mock__tag.mono{font-size:.58rem}
.insight-header .dl-mock__body{padding:6px 9px;gap:3px}
.insight-header .dl-mock__row{padding:4px 8px;font-size:.72rem}
.insight-header .dl-mock__pill{padding:1px 7px;font-size:.58rem}
.dl-card-cta:hover,.dl-card-cta:focus-visible{color:#0f5b41;text-decoration:underline;text-underline-offset:3px}
.dl-card-cta:focus-visible{outline:2px solid #22577A;outline-offset:3px;border-radius:3px}

/* === T6.22.2: marco de navegador para capturas de producto ============
   Contexto: las capturas de software (dashboard MDM, mapa Fleet, panel
   Domain Maps) se estaban mostrando al ras dentro de la card, y las
   claras (fondo blanco) se fundían con la card blanca. El frame las
   enmarca en un "chrome" coherente con los mockups T6.21.2: barra azul
   marino #0f2a38 con URL en mono #9fb8c6, viewport debajo con borde
   #d7e2ea. Reusable en /productos, home y páginas de casos. */
.dl-browser-frame{
  border:1px solid #d7e2ea;border-radius:12px;overflow:hidden;
  background:#fff;display:flex;flex-direction:column
}
.dl-browser-frame__bar{
  background:#0f2a38;color:#fff;
  padding:8px 12px;
  display:flex;align-items:center;gap:8px;
  border-bottom:1px solid #0a1e28
}
.dl-browser-frame__dots{display:inline-flex;gap:5px;align-items:center;flex:0 0 auto}
.dl-browser-frame__dots > span{width:8px;height:8px;border-radius:50%;background:#3a4a56}
.dl-browser-frame__url{
  font-family:ui-monospace,'SF Mono',Menlo,monospace;
  font-size:.72rem;color:#9fb8c6;letter-spacing:.01em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  flex:1;min-width:0
}
.dl-browser-frame__viewport{position:relative;overflow:hidden;background:#f4f7fa;flex:1}
.dl-browser-frame__viewport img{width:100%;height:100%;object-fit:cover;display:block}
/* Variante compacta para home (contenedores de 140 px de alto). */
.dl-browser-frame--sm .dl-browser-frame__bar{padding:5px 10px}
.dl-browser-frame--sm .dl-browser-frame__url{font-size:.62rem}
.dl-browser-frame--sm .dl-browser-frame__dots > span{width:6px;height:6px}

/* === T6.22.3: marco para fotos de campo (no ventanas de navegador) =====
   Misma anatomía que .dl-browser-frame pero SIN 3 puntos y con un pie
   contextual en mono #9fb8c6 dentro del bar. Se usa para Movecon y TRAMO
   en /productos → "Sector público · sistemas críticos". */
.dl-photo-frame{
  border:1px solid #d7e2ea;border-radius:12px;overflow:hidden;
  background:#fff;display:flex;flex-direction:column
}
/* T6.22.4: pie contextual en Kanit sentence case (no es una URL de
   navegador — usar mono aquí sonaba a "código" y no a "foto de campo").
   La URL de .dl-browser-frame sí queda en mono porque es convención de
   navegador real. */
.dl-photo-frame__caption{
  background:#0f2a38;color:#9fb8c6;
  padding:8px 12px;
  font-family:'Kanit',sans-serif;font-weight:400;
  font-size:.78rem;letter-spacing:normal;text-transform:none;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  border-bottom:1px solid #0a1e28
}
.dl-photo-frame__viewport{position:relative;overflow:hidden;background:#f4f7fa;flex:1}
.dl-photo-frame__viewport img{width:100%;height:100%;object-fit:cover;display:block}
/* T6.23.1: variante compacta (contenedores de 140 px de alto en home). */
.dl-photo-frame--sm .dl-photo-frame__caption{padding:5px 10px;font-size:.66rem}

/* === T6.3: hover/foco en franja de certificaciones (home) === */
.dl-cert-link:hover,.dl-cert-link:focus-visible{color:#57CC99 !important;text-decoration:underline;text-underline-offset:4px}
.dl-cert-link:focus-visible{outline:2px solid #22577A;outline-offset:3px;border-radius:3px}

/* === T6.21: Micro-mockups estilo "producto Domain Logic" (regla 7) =========
   Cabecera azul marino #0f2a38 + cuerpo blanco. Kanit sentence case para
   toda la UI, mono SOLO para valores. Contraste AA (>=4.5:1) en textos.
   Reemplaza el estilo oscuro anterior (T6.5) con textura de rejilla + glow. */

.dl-mock-card{display:flex;flex-direction:column;background:#fff;border:1px solid #d7e2ea;border-radius:16px;overflow:hidden;transition:transform .25s ease, border-color .25s ease}
.dl-mock-card:hover{transform:translateY(-3px);border-color:#22577A}
.dl-mock-card__body{padding:22px 24px 26px;display:flex;flex-direction:column;flex:1}
/* Paso 01/03 · Aportación — mono para código, permitido por Regla 7 */
.dl-mock-card__step{font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:.72rem;letter-spacing:.12em;color:#5a6b78;font-weight:500;text-transform:uppercase;margin-bottom:10px;display:block}
.dl-mock-card__title{font-family:'Kanit',sans-serif;font-weight:600;font-size:1.06rem;color:#0b1a23;line-height:1.3;margin-bottom:7px}
.dl-mock-card__desc{color:#5a6b78;font-size:.92rem;font-weight:300;line-height:1.55;flex:1}
/* T6.25 pto.1: el bloque "Ejemplo:" (último hijo del card__body) se ancla al
   pie y, además, respeta un min-height que cubre el caso "3 líneas": así los
   tops de "Ejemplo" quedan nivelados por fila incluso cuando el texto es
   más corto en unas cards que en otras. */
.dl-mock-card__body > div:last-child{margin-top:auto;min-height:92px;box-sizing:border-box}

/* ─── Contenedor: sin borde/radius propio — la card externa (.dl-mock-card)
   ya define el borde y el recorte con overflow:hidden. Aquí solo layout. ─ */
/* T6.26.1: marco exterior unificado a 12px + border sutil + overflow para que
   la cabecera azul marino y el body #eef4f8 respeten las esquinas redondeadas
   en TODOS los mockups (antes solo lo hacían los mocks dentro de .ventaja-
   diagrama e .insight-header; el resto — p.ej. los 3 mocks de "Esto es lo
   que automatizamos por ti" en home — se veían con esquinas cuadradas). */
.dl-mock{position:relative;display:flex;flex-direction:column;padding:0;background:#fff;border:1px solid #d7e2ea;border-radius:12px;overflow:hidden;color:#0b1a23;font-family:'Kanit',sans-serif;font-size:.86rem;line-height:1.45;min-height:240px}
.dl-mock--sm{margin-bottom:18px;min-height:0}
.dl-mock--sm .dl-mock__head{padding:8px 12px}
.dl-mock--sm .dl-mock__body{gap:6px;padding:10px 12px}
.dl-mock--sm .dl-mock__label{font-size:.78rem}
.dl-mock--sm .dl-mock__tag{font-size:.7rem}
.dl-mock--sm .dl-mock__row{padding:6px 9px;font-size:.74rem}
.dl-mock--sm .dl-mock__row-id{font-size:.66rem}
.dl-mock--sm .dl-mock__pill{padding:1px 7px;font-size:.62rem}
.dl-mock--sm .dl-mock__field{padding:6px 9px;gap:2px}
.dl-mock--sm .dl-mock__field-label{font-size:.64rem}
.dl-mock--sm .dl-mock__field-value{font-size:.72rem}
.dl-mock--sm .dl-mock__step{padding:5px 9px;font-size:.72rem;gap:7px}
.dl-mock--sm .dl-mock__step-num{width:18px;height:18px;font-size:.62rem;flex:0 0 18px;border-radius:5px}

/* ─── Cabecera: barra azul marino con label + meta ────────────────────── */
.dl-mock__head{display:flex;align-items:center;justify-content:space-between;gap:8px;background:#0f2a38;color:#fff;padding:10px 14px;border-bottom:1px solid #0a1e28}
.dl-mock__label{font-family:'Kanit',sans-serif;font-weight:500;font-size:.86rem;color:#fff;letter-spacing:normal;text-transform:none;line-height:1.2}
.dl-mock__tag{font-family:'Kanit',sans-serif;font-weight:400;font-size:.76rem;color:#9fb8c6;letter-spacing:normal;text-transform:none;line-height:1.2}
.dl-mock__tag.mono{font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:.74rem;letter-spacing:.01em}

/* ─── Cuerpo blanco ───────────────────────────────────────────────────── */
/* T6.21.1: el body llena el espacio vertical restante para que la cabecera
   quede al ras del top y los títulos de las 3 cards de cada fila arranquen
   a la misma altura (el mock más pequeño crece hasta min-height del .dl-mock).
   T6.21.2: fondo azul-gris suave para dar textura de "vista de app real". */
.dl-mock__body{display:flex;flex-direction:column;gap:8px;padding:12px 14px;background:#eef4f8;color:#0b1a23;flex:1}
.dl-mock .mono{font-family:ui-monospace,'SF Mono',Menlo,monospace;letter-spacing:.01em}

/* Filas de datos — T6.21.2: sobre body #eef4f8, las filas quedan blancas
   sin borde (contraste por color, no por línea). */
.dl-mock__row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 11px;background:#fff;border-radius:8px;color:#0b1a23;font-size:.82rem}
.dl-mock__row-main{display:flex;align-items:center;gap:9px;min-width:0;flex:1}
.dl-mock__row-main > span:not(.dl-mock__row-id){min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.dl-mock__row-id{font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:.74rem;color:#5a6b78;flex:0 0 auto;white-space:nowrap}

/* Pills de estado — colores AA sobre fondo blanco */
.dl-mock__pill{display:inline-flex;align-items:center;padding:2px 9px;border-radius:999px;font-family:'Kanit',sans-serif;font-size:.7rem;font-weight:500;letter-spacing:normal;text-transform:none;white-space:nowrap}
.dl-mock__pill--ok    {background:#dcf5ea;color:#0a7050;border:1px solid #b6e5cc}
.dl-mock__pill--warn  {background:#fdf1d5;color:#854f0b;border:1px solid #f2d38a}
.dl-mock__pill--info  {background:#dfeef8;color:#0a3e63;border:1px solid #b5d6eb}
.dl-mock__pill--muted {background:#fff;color:#5a6b78;border:1px solid #d7e2ea}
.dl-mock__pill--danger{background:#fbe2dd;color:#7a1e11;border:1px solid #f2b8ab}

/* Search bar — T6.21.2: blanca sin borde sobre body azul-gris. */
.dl-mock__search{display:flex;align-items:center;gap:9px;padding:9px 12px;background:#fff;border-radius:8px;color:#0b1a23;font-size:.84rem}
.dl-mock__search::before{content:"";display:inline-block;width:12px;height:12px;border:1.5px solid #5a6b78;border-radius:50%;position:relative;flex:0 0 12px}
.dl-mock__search::after{content:"";display:inline-block;width:5px;height:1.5px;background:#5a6b78;position:absolute;transform:translate(-2px,7px) rotate(45deg);border-radius:1px}
.dl-mock__search-input{flex:1;color:#0b1a23;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dl-mock__search-input .caret{display:inline-block;width:1px;height:.9em;background:#22a37c;margin-left:2px;vertical-align:text-bottom;animation:dl-caret 1s steps(1) infinite}
@keyframes dl-caret{50%{opacity:0}}

/* Result card tipo "ficha" (verde suave) */
.dl-mock__card{background:#eef7f2;border:1px solid #c8e6d5;border-radius:8px;padding:10px 12px}
.dl-mock__card-title{font-family:'Kanit',sans-serif;font-size:.86rem;font-weight:500;color:#0b1a23;margin-bottom:6px;display:flex;align-items:center;gap:8px}
.dl-mock__card-meta{font-family:'Kanit',sans-serif;font-size:.76rem;color:#22a37c;letter-spacing:normal;font-weight:400;line-height:1.4}

/* Form field mockup — T6.21.2: blanco sin borde sobre body azul-gris. */
.dl-mock__field{display:flex;flex-direction:column;gap:4px;padding:8px 11px;background:#fff;border-radius:8px}
.dl-mock__field-label{font-family:'Kanit',sans-serif;font-size:.72rem;font-weight:500;color:#5a6b78;letter-spacing:normal;text-transform:none}
.dl-mock__field-value{font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:.82rem;color:#0b1a23;letter-spacing:.01em}

/* Botones */
.dl-mock__btn{display:inline-block;padding:6px 12px;background:#0a7050;color:#fff;font-family:'Kanit',sans-serif;font-size:.74rem;font-weight:600;border-radius:6px}
.dl-mock__btn--ghost{background:transparent;color:#22577A;border:1px solid #dfe6ec}

/* Paso de flujo — T6.21.2: blanco sin borde sobre body azul-gris. */
.dl-mock__step{display:flex;align-items:center;gap:9px;padding:7px 10px;background:#fff;border-radius:8px;font-family:'Kanit',sans-serif;font-size:.82rem;color:#0b1a23}
.dl-mock__step-num{font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:.7rem;width:22px;height:22px;border-radius:6px;background:#eef7f2;color:#085041;border:1px solid #c8e6d5;display:grid;place-items:center;flex:0 0 22px;font-weight:600}
.dl-mock__step-arrow{color:#8fa3b3;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:.9rem;padding:0 2px}

/* Ok/fail markers */
.dl-mock__check::before{content:"✓";display:inline-block;color:#22a37c;font-weight:700;margin-right:6px;font-family:ui-monospace,'SF Mono',Menlo,monospace}
.dl-mock__cross::before{content:"✗";display:inline-block;color:#c0392b;font-weight:700;margin-right:6px;font-family:ui-monospace,'SF Mono',Menlo,monospace}

/* Mini gráfica de barras */
.dl-mock__bars{display:flex;align-items:flex-end;gap:5px;height:52px}
.dl-mock__bar{flex:1;background:linear-gradient(180deg,#57CC99,#22a37c);border-radius:2px}

/* T6.21.2 — señales de vida ─────────────────────────────────────────────
   Micro-elementos que dan "sensación de app funcionando" sin añadir datos
   ni cambiar el layout. Todos con contraste AA sobre body #eef4f8/fila #fff. */

/* Barra de progreso multi-paso (OCR → Validación → ERP). */
.dl-mock__progress{display:flex;flex-direction:column;gap:5px;padding:8px 11px;background:#fff;border-radius:8px}
.dl-mock__progress-track{display:flex;gap:2px}
.dl-mock__progress-seg{flex:1;height:5px;border-radius:3px;background:#d7e2ea}
.dl-mock__progress-seg--done{background:#0a7050}
.dl-mock__progress-seg--active{background:#22a37c}
.dl-mock__progress-labels{display:flex;justify-content:space-between;font-family:'Kanit',sans-serif;font-size:.66rem;color:#5a6b78;letter-spacing:.01em}
.dl-mock__progress-labels > span[data-done]{color:#0a7050;font-weight:500}
.dl-mock__progress-labels > span[data-active]{color:#0a7050;font-weight:600}

/* Punto de estado (verde o ámbar) inline. */
.dl-mock__dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#22a37c;flex:0 0 7px;box-shadow:0 0 0 3px rgba(34,163,124,.16)}
.dl-mock__dot--warn{background:#f0a020;box-shadow:0 0 0 3px rgba(240,160,32,.18)}
.dl-mock__dot--muted{background:#8fa3b3;box-shadow:0 0 0 3px rgba(143,163,179,.18)}

/* Hora / timestamp al final de un step (mono, valor). */
.dl-mock__step-time{margin-left:auto;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:.7rem;color:#5a6b78}

/* Mini-barra ámbar inline (para acompañar un pill de warn). */
.dl-mock__meter{display:inline-block;height:5px;width:36px;background:#f2d38a;border-radius:3px;position:relative;vertical-align:middle;margin-left:6px;overflow:hidden}
.dl-mock__meter::after{content:"";position:absolute;inset:0 auto 0 0;width:70%;background:#c98410;border-radius:3px}

/* Detalle de estado en la cabecera (punto verde + "en cola: N"). */
.dl-mock__head-status{display:inline-flex;align-items:center;gap:6px;font-family:'Kanit',sans-serif;font-size:.72rem;color:#9fb8c6;font-weight:400;letter-spacing:normal}
.dl-mock__head-status::before{content:"";width:6px;height:6px;border-radius:50%;background:#57CC99;display:inline-block;box-shadow:0 0 0 2px rgba(87,204,153,.28);animation:dl-live 1.6s ease-in-out infinite}
@keyframes dl-live{0%,100%{opacity:.55}50%{opacity:1}}

/* Grid responsive */
@media(max-width:900px){
  .dl-mock-grid-3{grid-template-columns:repeat(2,1fr) !important}
  .dl-mock-grid-4{grid-template-columns:repeat(2,1fr) !important}
  .dl-mock-grid-6{grid-template-columns:repeat(2,1fr) !important}
  /* T6.21.1: al bajar a 2 columnas, el min-height desktop deja huecos raros
     en cards con poco contenido (fila 2 en desktop se convierte en fila 3 en
     tablet). Dejamos que el mock adopte su altura natural en <=900px. */
  .dl-mock{min-height:0}
}
@media(max-width:560px){
  .dl-mock-grid-3,.dl-mock-grid-4,.dl-mock-grid-6{grid-template-columns:1fr !important}
}

/* === T6.4: /contacto — labels ocultas visualmente pero disponibles para lectores de pantalla.
       Los asteriscos de campo obligatorio se integran en el placeholder (Tu nombre *).
       Sin esta regla, el <label> renderiza con color heredado (invisible sobre fondo blanco)
       pero el ::after del asterisco sí se ve, dejándolo huérfano flotando sobre el input. === */
.fluent_form_1 .ff-el-input--label{
  position:absolute !important;
  width:1px !important;height:1px !important;
  padding:0 !important;margin:-1px !important;
  overflow:hidden !important;clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;border:0 !important;
}

/* === Media fluida === */
img,svg,video,iframe{max-width:100%}

/* === Botón hamburguesa === */
.dl-burger{display:none;background:none;border:0;cursor:pointer;flex-direction:column;gap:5px;padding:8px;margin-left:auto;z-index:120}
.dl-burger span{display:block;width:26px;height:2px;background:#dce7ee;border-radius:2px;transition:.3s}
body.dl-nav-open .dl-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.dl-nav-open .dl-burger span:nth-child(2){opacity:0}
body.dl-nav-open .dl-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* === Responsive === */
@media(max-width:820px){
  header nav{display:none !important}
  body.dl-nav-open header nav{
    display:flex !important;flex-direction:column;align-items:flex-start;gap:16px;
    position:fixed;top:60px;left:0;right:0;background:#0B1A23;
    padding:22px 24px;border-bottom:1px solid rgba(255,255,255,.1);
    box-shadow:0 14px 34px rgba(0,0,0,.45);max-height:85vh;overflow:auto}
  body.dl-nav-open header nav a{font-size:1.08rem !important;padding:6px 0 !important}
  .dl-burger{display:flex}
  /* reflow general */
  [style*="grid-template-columns"]{grid-template-columns:1fr !important}
  [style*="max-width: 1240px"]{max-width:100% !important}
  [style*="padding: 0px 32px"]{padding-left:18px !important;padding-right:18px !important}
  [style*="padding: 0 32px"]{padding-left:18px !important;padding-right:18px !important}
  h1{font-size:2.05rem !important;line-height:1.15 !important}
  h2{font-size:1.6rem !important}
}
@media(max-width:520px){
  h1{font-size:1.75rem !important}
}

/* === Cards de certificación clicables === */
a.cert-card:hover .scp0{transform:translateY(-4px);box-shadow:0 12px 28px rgba(11,26,35,.10);border-color:#22577a}
a.cert-card:focus-visible{outline:2px solid #22577a;outline-offset:2px;border-radius:16px}

/* === Coherencia visual cards certificación === */
a.cert-card{height:100%;display:flex;flex-direction:column}
a.cert-card > .scp0{display:flex !important;flex-direction:column;height:100%;padding:28px 22px !important}
.cert-frame{height:96px;display:flex;align-items:center;justify-content:center;margin:0 0 16px}
.cert-frame img{max-height:84px;max-width:170px;width:auto;height:auto;object-fit:contain}
.cert-frame-ens{max-height:96px !important;max-width:84px !important}
.cert-cta{display:block;margin-top:auto;padding-top:14px;font-size:.82rem;color:#22577a;font-weight:500;letter-spacing:.01em}
/* La card ENS no es <a> aún (en este punto sí, pero contingencia) */
.scp0:has(.cert-frame){display:flex;flex-direction:column;height:100%;padding:28px 22px}

/* === T6.7: Banda "Confían en nuestra ingeniería" (home)
   Normalización de peso visual: mismo gris (grayscale + opacidad común) y
   tamaño compensado por peso — trazo fino (GC, Paradores) más grande que
   sólidos (DGT, Inetum) para que ninguno domine.
   T6.13: Telefónica retirado — regla .cliente-logo--telefonica queda como
   fallback restaurable si se descomenta la celda en home.html. === */
.cliente-cell{background:#fff;padding:22px 22px;display:flex;align-items:center;justify-content:center;gap:14px;min-height:120px;transition:background .25s ease}
.cliente-cell:hover{background:#f7fafc}
.cliente-logo{width:auto;height:auto;object-fit:contain;filter:grayscale(1) brightness(.98);opacity:.55;transition:opacity .25s ease, filter .25s ease}
.cliente-cell:hover .cliente-logo{opacity:.95}
/* T6.23 pto.2: tamaños +~8-10% para que la franja lea como conjunto sólido */
.cliente-logo--gc        {max-height:86px;max-width:88px}
.cliente-logo--dgt       {max-height:52px;max-width:160px}
.cliente-logo--inetum    {max-height:38px;max-width:160px}
.cliente-logo--telefonica{max-height:44px;max-width:180px}
.cliente-logo--paradores {max-height:70px;max-width:170px}
/* T6.23 pto.1: lockup provisional GC recibe el MISMO gris que los otros
   logos — se rebaja weight del título y se sustituye #3c4a55 por gris
   claro para no destacar sobre PNGs procesados. Se sustituirá cuando
   llegue el asset oficial. */
.cliente-cell--lockup{padding:20px 18px}
.cliente-lockup{display:flex;flex-direction:column;line-height:1.15;color:#5a6b78;filter:grayscale(1);opacity:.55;transition:opacity .25s ease}
.cliente-cell--lockup:hover .cliente-lockup{opacity:.95}
.cliente-lockup__title{font-family:'Kanit',sans-serif;font-weight:500;font-size:.92rem;letter-spacing:.005em;color:#5a6b78}
.cliente-lockup__sub{font-family:'Kanit',sans-serif;font-weight:400;font-size:.68rem;color:#8a98a4;margin-top:2px;letter-spacing:.02em}
@media(max-width:1100px){
  .cliente-row{grid-template-columns:repeat(3,1fr) !important}
  .cliente-lockup__title{font-size:.88rem}
  .cliente-lockup__sub{font-size:.66rem}
}
@media(max-width:820px){
  .cliente-row{grid-template-columns:repeat(2,1fr) !important}
  .cliente-cell--lockup{flex-direction:column;gap:8px;text-align:center}
}
@media(max-width:520px){
  .cliente-row{grid-template-columns:1fr !important}
}

/* Logo de cliente sobre fondo oscuro (productos) — mismo tratamiento
   grayscale para consistencia; se refuerza en hover */
.cliente-logo-dark{height:28px;width:auto;max-width:110px;object-fit:contain;filter:grayscale(1) brightness(1.15);opacity:.75;display:inline-block;vertical-align:middle;transition:opacity .25s ease}
.cliente-logo-dark:hover,.scp1:hover .cliente-logo-dark{opacity:1}

/* === Cards de casos en /casos/ === */
a.caso-card:hover{transform:translateY(-4px);box-shadow:0 14px 36px rgba(11,26,35,.10);border-color:#22577A}
@media(max-width:820px){.casos-grid{grid-template-columns:1fr !important}}

/* === Sectores (grid 3x2 estilo Indra) === */
/* T6.23 pto.5: sectores en piel clara (tinte #eef4f8 + borde #d7e2ea +
   título azul marino). Párrafos limitados a 1,5 líneas con line-clamp
   para que 6 tarjetas se lean como conjunto. Chip de prueba abajo. */
.sector-card{background:#eef4f8;color:#0b1a23;padding:24px 24px 22px;border-radius:14px;border:1px solid #d7e2ea;display:flex;flex-direction:column;gap:8px;transition:transform .25s ease, border-color .25s ease}
.sector-card:hover{transform:translateY(-2px);border-color:#22577A}
.sector-name{font-family:Kanit,sans-serif;font-weight:600;font-size:1.15rem;color:#0f2a38;line-height:1.2;margin:0}
.sector-desc{font-size:.92rem;color:#5a6b78;font-weight:300;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:0}
.sector-chip{margin-top:auto;padding-top:10px}
.sector-chip > span{display:inline-flex;align-items:center;padding:3px 9px;border-radius:999px;background:#fff;border:1px solid #d7e2ea;color:#22577A;font-family:'Kanit',sans-serif;font-size:.72rem;font-weight:500;letter-spacing:normal;white-space:nowrap}

/* T6.23 pto.6: diagrama ACL — los .dl-mock viven sueltos (sin .dl-mock-card
   externa), así que necesitan borde y fondo propios, y sin min-height. */
.ventaja-diagrama .dl-mock{min-height:0;background:#fff;border:1px solid #d7e2ea;border-radius:12px;overflow:hidden}
@media(max-width:900px){.sectores-grid{grid-template-columns:repeat(2,1fr) !important}}
@media(max-width:560px){.sectores-grid{grid-template-columns:1fr !important}}

/* === T6.11.1: Insights — cabecera con mini-panel enmarcado (tag + panel derecha).
   Plan B en móvil: por debajo de 560 px se oculta el panel y la cabecera se
   reduce a 48 px con sólo tag y color. Antes sobrio que recargado. === */
@media(max-width:560px){
  .insight-panel{display:none !important}
  .insight-header{height:48px !important;padding:12px 14px !important;align-items:center !important}
}

/* === Casos destacados en home === */
.caso-home-card{background:#fff;border:1px solid #e3eaf0;border-radius:18px;overflow:hidden;text-decoration:none;color:inherit;display:flex;flex-direction:column;transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease}
.caso-home-card:hover{transform:translateY(-4px);box-shadow:0 14px 36px rgba(11,26,35,.10);border-color:#22577A}
.caso-home-logo{background:#0f2a38;padding:24px 28px;display:flex;align-items:center;justify-content:center;gap:14px;min-height:140px}

/* T6.10: lockup dark para la tarjeta TRAMO (monograma + texto Kanit).
   Pendiente de sustituir por el asset oficial de GC con texto cuando exista. */
/* T6.23.2: lockup en columna centrada (icono arriba + texto abajo) también
   en desktop. Antes iba en fila y el icono caía a la izquierda del centro
   respecto al ancho total de la card. Ahora el bloque queda simétrico
   (mismo eje óptico que el logo de Paradores en la card hermana). */
.caso-home-logo--lockup,.caso-card-logo--lockup{flex-direction:column;gap:8px;padding-left:22px;padding-right:22px;text-align:center}
.caso-home-logo--lockup .caso-lockup,.caso-card-logo--lockup .caso-lockup{text-align:center}
.caso-logo-mono{width:auto;height:auto;opacity:.85;filter:none}
.caso-home-logo--lockup .caso-logo-mono,.caso-card-logo--lockup .caso-logo-mono{max-height:64px;max-width:56px}
.caso-lockup{color:#cfe0eb;text-align:left;line-height:1.2;flex:0 1 auto}
.caso-lockup__title{font-family:'Kanit',sans-serif;font-weight:600;font-size:1.02rem;color:#EAF3F8;letter-spacing:.005em}
.caso-lockup__sub{font-family:'Kanit',sans-serif;font-weight:400;font-size:.78rem;color:#a9becb;margin-top:3px;letter-spacing:.02em}
@media(max-width:520px){
  .caso-home-logo--lockup,.caso-card-logo--lockup{flex-direction:column;gap:10px;text-align:center}
  .caso-lockup{text-align:center}
}
.caso-home-body{padding:28px 26px;display:flex;flex-direction:column;flex:1}
.caso-home-badge{font-size:.72rem;text-transform:uppercase;letter-spacing:.16em;color:#22577A;font-weight:600}
.caso-home-title{font-family:Kanit,sans-serif;font-weight:600;font-size:1.22rem;color:#0b1a23;margin:10px 0 12px;line-height:1.25}
.caso-home-desc{color:#5a6b78;font-size:.94rem;font-weight:300;line-height:1.55;flex:1;margin-bottom:18px}
.caso-home-cta{font-size:.84rem;color:#22577A;font-weight:500}
@media(max-width:900px){.casos-home-grid{grid-template-columns:1fr !important}}

/* === Header transparente + blur (Vercel/Linear/Anthropic) === */
.dl-header-transparent{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(11,26,35,0);backdrop-filter:blur(0);-webkit-backdrop-filter:blur(0);border-bottom:1px solid rgba(255,255,255,0);transition:background .3s ease, backdrop-filter .3s ease, border-color .3s ease, -webkit-backdrop-filter .3s ease, transform .28s cubic-bezier(.4,0,.2,1)}
.dl-header-transparent.scrolled{background:rgba(11,26,35,.72);backdrop-filter:blur(16px) saturate(1.25);-webkit-backdrop-filter:blur(16px) saturate(1.25);border-bottom-color:rgba(255,255,255,.08)}

/* T6.19 ================================================================
   Bug preexistente del export: el wrapper <div data-dc-tpl="6"> lleva
   overflow-x: hidden inline, lo que rompe position: sticky del <header>
   descendiente en todas las páginas menos la home (que usa fixed). Sin
   arreglarlo el backdrop-blur al scrollear no se ve porque el header se
   pierde en cuanto scrolleas. Movemos el overflow-x al body y neutralizamos
   el del wrapper interior — así el sticky se pega correctamente en todas
   las páginas y no hay scroll horizontal.
   ==================================================================== */
/* overflow-x:hidden en body crea implícitamente overflow-y:auto → body pasa
   a ser scroll container y rompe sticky del <header>. `overflow-x:clip` (CSS
   Overflow 3) recorta horizontalmente sin crear scroll container. */
html, body { overflow-x: clip; }
@supports not (overflow-x: clip) { html, body { overflow-x: hidden; } }

/* DEUDA TÉCNICA · Sprint 2 ───────────────────────────────────────────────
   El header sticky de las páginas no-home vive dentro de un wrapper del
   export (data-dc-tpl="6" > sc-host > data-dc-tpl="0") cuya altura coincide
   con la del propio header — el containing block no tiene espacio para que
   position:sticky se pegue. Como refactorizar los dc/*.html está fuera de
   scope pre-lanzamiento, forzamos position:fixed !important. El offset
   compensatorio se calcula en runtime desde JS (header.offsetHeight) y se
   aplica como custom property --dl-header-h en <html>. Ver /js/dl-fixes.js.
   ─────────────────────────────────────────────────────────────────────── */
body:not(.home) > #dc-root header:not(.dl-header-transparent){
  position: fixed !important;
  top: 0; left: 0; right: 0;
  z-index: 100;
}
body:not(.home) #dc-root > .sc-host{ padding-top: var(--dl-header-h, 0px); }
/* Anchors internos (#certificaciones, etc.) no quedan tapados por el header
   fijo — scroll-margin-top lo compensa a nivel de destino. */
html { scroll-padding-top: var(--dl-header-h, 0px); }
:target { scroll-margin-top: calc(var(--dl-header-h, 0px) + 16px); }

/* DEUDA TÉCNICA · Sprint 2 ───────────────────────────────────────────────
   La barra superior teléfono/email (data-dc-tpl="1") no cabe en <=560px:
   los enlaces se solapan con el email. Layout export sin responsive real.
   Mientras se rediseña, la ocultamos en móvil — la info sigue accesible en
   el footer y en el menú hamburguesa. Solo aplica a páginas con el header
   sticky del export (no a la home, que usa .dl-header-transparent).
   ─────────────────────────────────────────────────────────────────────── */
@media (max-width: 560px) {
  body:has(header[data-dc-tpl="13"]) #dc-root [data-dc-tpl="1"] { display: none; }
}
#dc-root > div > div[data-dc-tpl],
#dc-root > .sc-host > div[data-dc-tpl] { overflow-x: visible !important; }

/* Estado global del scroll: el JS marca body.dl-scrolled y body.dl-header-hidden.
   Se aplica a cualquier <header> del sitio — el de la home
   (.dl-header-transparent) y el sticky de las demás páginas (data-dc-tpl con
   background inline), sin tener que tocar cada dc/*.html. Se usa transición
   suave y fallback sólido cuando el navegador no soporta backdrop-filter. */
body.dl-scrolled > header,
body.dl-scrolled #dc-root header{
  background:rgba(11,26,35,.72) !important;
  backdrop-filter:blur(16px) saturate(1.25);
  -webkit-backdrop-filter:blur(16px) saturate(1.25);
  border-bottom:1px solid rgba(255,255,255,.08);
}
header{transition:background .3s ease, backdrop-filter .3s ease, border-color .3s ease, -webkit-backdrop-filter .3s ease, transform .28s cubic-bezier(.4,0,.2,1)}

@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .dl-header-transparent.scrolled,
  body.dl-scrolled > header,
  body.dl-scrolled #dc-root header{background:rgba(11,26,35,.96) !important}
}

/* Hide-on-scroll en móvil: el JS conmuta body.dl-header-hidden solo en <=820px. */
body.dl-header-hidden > header,
body.dl-header-hidden #dc-root header,
.dl-header-transparent.dl-header-hidden{transform:translateY(-100%)}
.dl-nav-link{color:rgba(255,255,255,.85);text-decoration:none;font-size:.95rem;font-weight:400;transition:color .2s;letter-spacing:.005em}
.dl-nav-link:hover{color:#57CC99}
.dl-cta-header{display:inline-flex;align-items:center;gap:8px;background:#57CC99;color:#06231a;text-decoration:none;font-weight:600;font-size:.92rem;padding:10px 20px;border-radius:8px;transition:transform .2s ease, box-shadow .2s ease}
.dl-cta-header:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(87,204,153,.28)}
/* Hero con header transparente: padding-top compensa la altura del header fixed (78px) */
.dl-hero-with-header > div:not([style*="position: absolute"]){padding-top:110px !important}
@media(max-width:900px){
  .dl-header-transparent nav{display:none}
}

/* T6.27.1: kicker con altura predecible para poder alinear paneles laterales.
   Vence al selector legacy span[style*="letter-spacing: 0.18em"][style*="text-
   transform: uppercase"] (líneas 27-31) que fuerza display:inline-block +
   margin-bottom:14px !important a todos los kickers inline. Con display:block
   e inline-block el kicker heredaba line-height del wrapper (1.65 en Kanit),
   dando altura efectiva variable entre secciones. Con !important + line-height:1
   + margin-bottom:0 el kicker ocupa exactamente su font-size (.82rem tras el
   override legacy), independiente del wrapper. */
.dl-kicker-block{display:block !important;line-height:1 !important;margin-bottom:0 !important}

/* T6.27.1: baja el .dl-panel para que su top coincida con el top del H2
   hermano de la columna adyacente (el kicker queda por encima, pegado al H2).
   Offset = altura del kicker (.82rem tras el override legacy) + margin-top
   del H2 (14px) ≈ 27.12px. Requiere .dl-kicker-block en el kicker. */
.dl-panel--h1-align{margin-top:calc(.82rem + 14px)}

/* T6.27: chip claro para heros oscuros — fondo blanco, texto #0f2a38, sin
   borde. Sobre la banda azul marino del hero de TRAMO/Paradores, los chips
   rgba blanco al 5% con borde 14% se perdían visualmente. Este variante da
   contraste AA para los metadatos (Cliente/Sector/En producción/Ámbito). */
.dl-hero-chip{
  display:inline-flex;align-items:center;
  padding:8px 16px;border-radius:999px;
  background:#fff;color:#0f2a38;
  font-family:'Kanit',sans-serif;font-weight:500;font-size:.88rem;letter-spacing:normal;
  white-space:nowrap
}

/* T6.27: panel v2 para contenido textual (listas de puntos, no mockup de app).
   Anatomía coherente con .dl-mock — head azul marino con label en Kanit +
   body #eef4f8 con filas blancas sin borde. Reutilizable; en T6.27 se usa
   en "Antes — el día a día" (TRAMO) y "El problema — qué resolver" (Paradores). */
.dl-panel{background:#fff;border:1px solid #d7e2ea;border-radius:16px;overflow:hidden}
.dl-panel__head{background:#0f2a38;color:#fff;padding:12px 20px;font-family:'Kanit',sans-serif;font-weight:500;font-size:.95rem;line-height:1.2}
.dl-panel__body{background:#eef4f8;padding:18px;display:flex;flex-direction:column;gap:10px}
.dl-panel__intro{color:#3c4a55;font-size:1rem;font-weight:300;line-height:1.55;padding:0 4px 4px}
.dl-panel__row{background:#fff;border-radius:10px;padding:13px 15px;display:flex;gap:12px;align-items:flex-start;color:#3c4a55;font-size:.98rem;font-weight:300;line-height:1.5}

/* T6.26.3: mini-tile azul marino con abreviatura mono, sustituye iconos
   genéricos de librerías en cards conceptuales (regla 7). Diseñado para
   fondos oscuros (section #08151d): fondo #0f2a38 con border verde
   acento sutil, texto mono verde. Mismo lenguaje visual que la cabecera
   de los mockups .dl-mock__head. */
.dl-mini-tile{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;flex:0 0 38px;
  background:#0f2a38;border:1px solid rgba(87,204,153,.32);border-radius:8px;
  font-family:ui-monospace,'SF Mono',Menlo,monospace;
  font-size:.68rem;font-weight:700;color:#57CC99;letter-spacing:.06em
}

/* ===== 2026-11-12 Reposicionamiento: plataformas SaaS ===== */
.dl-stack{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:22px;backdrop-filter:blur(8px);display:flex;flex-direction:column;gap:10px;animation:.7s ease .15s both dl-rise}
.dl-stack__head{display:flex;align-items:center;gap:8px;font-size:.74rem;text-transform:uppercase;letter-spacing:.16em;color:#57CC99;font-weight:600;margin-bottom:4px}
.dl-stack__live{width:8px;height:8px;border-radius:50%;background:#57CC99;display:inline-block;animation:1.2s ease-in-out infinite dl-pulse}
.dl-stack__layer{display:flex;flex-direction:column;gap:2px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:11px;padding:12px 16px}
.dl-stack__layer--accent{background:rgba(87,204,153,.12);border-color:rgba(87,204,153,.4)}
.dl-stack__k{font-weight:600;font-size:.98rem;color:#fff}
.dl-stack__v{font-size:.84rem;color:#9fb4c4}
.dl-stack__foot{font-size:.8rem;color:#8faaba;text-align:center;margin-top:4px}
.dl-cap-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#e3eaf0;border:1px solid #e3eaf0;border-radius:16px;overflow:hidden}
.dl-cap{background:#fff;padding:28px 26px 30px;transition:background .2s}
.dl-cap:hover{background:#f7fafc}
.dl-cap__tag{display:inline-block;font-size:.7rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#22577A;background:#eef4f8;border-radius:999px;padding:4px 11px;margin-bottom:14px}
.dl-cap__t{font-family:Kanit,sans-serif;font-weight:600;font-size:1.2rem;color:#0B1A23;margin-bottom:8px;line-height:1.25}
.dl-cap__d{color:#5a6b78;font-size:.95rem;font-weight:300;line-height:1.6}
.dl-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.dl-step{border:1px solid #e3eaf0;border-radius:16px;padding:24px 22px;background:#f7fafc}
.dl-step__n{font-family:Kanit,sans-serif;font-weight:700;font-size:1.5rem;color:#57CC99}
.dl-step__t{font-family:Kanit,sans-serif;font-weight:600;font-size:1.08rem;color:#0B1A23;margin:8px 0 6px}
.dl-step__d{color:#5a6b78;font-size:.92rem;font-weight:300;line-height:1.55}
.dl-sov{margin-top:28px;display:grid;grid-template-columns:1.3fr 1fr;gap:32px;align-items:center;background:linear-gradient(160deg,#0B1A23 0%,#0F2A38 100%);color:#fff;border-radius:18px;padding:34px 36px}
.dl-sov__t{font-family:Kanit,sans-serif;font-weight:600;font-size:1.6rem;margin:10px 0 10px;line-height:1.2}
.dl-sov__d{color:#c3d6e1;font-weight:300;line-height:1.6}
.dl-sov__chips{display:flex;flex-wrap:wrap;gap:8px}
.dl-sov__chips span{border:1px solid rgba(87,204,153,.45);background:rgba(87,204,153,.1);color:#eafbf2;border-radius:999px;padding:7px 14px;font-size:.86rem;font-weight:500}
@media(max-width:1000px){.dl-steps{grid-template-columns:repeat(2,1fr)}.dl-cap-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){.dl-prod-grid{grid-template-columns:1fr !important}.dl-sov{grid-template-columns:1fr;padding:28px 24px}}
@media(max-width:620px){.dl-steps,.dl-cap-grid{grid-template-columns:1fr}}
@media(max-width:1100px) and (min-width:901px){.casos-home-grid{grid-template-columns:repeat(2,1fr) !important}}

@media(max-width:600px){.dl-cta-header{display:none !important}}
@media(max-width:520px){.cliente-row{grid-template-columns:repeat(2,1fr) !important}.cliente-cell{min-height:96px;padding:16px 12px}}
@media(max-width:1100px) and (min-width:821px){.casos-grid{grid-template-columns:repeat(2,1fr) !important}}