/* Iteración 1 · homologación visual (2026-11-01). Se enlaza al final del <head> de cada página, después de todo
   el CSS existente. Solo ajusta valores, no cambia la identidad (Work Sans, azules, naranja como acento).
   Fuente: D:\Proyectos\instrucciones-md\pm-digital-iteracion-1-homologacion-comercial-y-visual.md */

/* Ritmo vertical: sección normal 64–88 px en escritorio y 44–64 px en móvil; compacta 40–56 px */
.sec { padding-block: clamp(2.75rem, 2.2rem + 3.6vw, 5.5rem); }
.sec.tight { padding-block: clamp(2.25rem, 1.8rem + 2.2vw, 3.5rem); }

/* Fotos y capturas: radio contenido en vez de grandes cajas redondeadas; tarjetas 16 px */
.frame { border-radius: 12px; }
.cv { border-radius: 12px; }
.pcard .cv, .case-feature .cf-media > .cv, .case-feature .cf-media > .mk { border-radius: 0; }
.pcard { border-radius: 16px; }

/* ---- Títulos: UNA regla por nivel editorial (tokens). H1 interior y bajada de hero por clase, sin depender de <main> ni de hermanos ----
   H1: 30 px móvil · fluido en tablet · 48 px escritorio. Bajada de hero: 17 → 21 px. H2: se conserva la escala existente por nivel (sección 40 px, compacto .sm 32 px; ver docs/matriz-titulos-por-url-iteracion12.md). */
:root {
  --h1-int: clamp(1.875rem, 1.2rem + 2.7vw, 3rem);
  --lead-hero: clamp(1.0625rem, .98rem + .5vw, 1.3125rem);
}
:root h1.h1-int { font-size: var(--h1-int); line-height: 1.1; letter-spacing: -.03em; max-width: 24ch; }
:root .lead-hero { font-size: var(--lead-hero); line-height: 1.45; }

/* Antetítulos: una sola escala (sin íconos decorativos); en bandas oscuras, celeste de alto contraste */
.kicker { font-size: .8125rem; font-weight: 600; letter-spacing: .01em; }
.closing .kicker, .home-contact .kicker { color: var(--on-deep-link, #9CC4FF); }

/* Cierre: último canal ocupa el ancho completo cuando quedan 3 */
.channels > .channel:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* ======================================================================================================
   Iteración 2 · refinamiento (2026-11-01). Fuente: instrucciones-md/pm-digital-iteracion-2-refinamiento-comercial-visual.md
   ====================================================================================================== */

/* Home · hero «Plataformas»: composición con solo los dos productos disponibles */
@media (min-width: 901px) {
  .pcollage.pcollage-dos { grid-template-rows: minmax(0, 1fr); aspect-ratio: 16 / 10; }
  .pcollage.pcollage-dos .pc-tile.t1 { grid-column: 1; grid-row: 1; }
  .pcollage.pcollage-dos .pc-tile.t3 { grid-column: 2; grid-row: 1; }
}

/* Home · plataformas: Dynamic Fleet y Sender como productos; las soluciones con IA, en segundo nivel y sin funcionalidades */
.pl-prox { margin-top: 1.25rem; padding: 1rem 1.25rem; border: 1px dashed var(--line-soft); border-radius: 14px;
  display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 2rem; }
.pl-prox-t { font-size: .8125rem; font-weight: 600; color: var(--muted); }
.pl-prox-l { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .75rem 2rem; }
.pl-prox-l li { display: flex; align-items: center; gap: .625rem; }
.pl-prox-l .mi { font-size: 1.25rem; color: var(--muted); }
.pl-prox-l b { display: block; font-size: .9375rem; font-weight: 600; color: var(--ink); line-height: 1.25; }
.pl-prox-l small { display: block; font-size: .75rem; color: var(--muted); }

/* Servicios (índice): Integración y Soporte como bloques horizontales compactos (el de Soporte, invertido) */
.area-h { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.area-h .scards { grid-template-columns: minmax(0, 1fr); }
.area-inv .scards { order: -1; }
@media (max-width: 860px) {
  .area-h { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  .area-inv .scards { order: 0; }
}
/* Servicios (índice): Desarrollo en 4 + 3 con la segunda fila centrada; 2 columnas en tablet y 1 en móvil */
#desarrollo .scards { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }
#desarrollo .scard { flex: 0 1 calc((100% - 3rem) / 4); min-width: 0; }
@media (max-width: 1100px) { #desarrollo .scard { flex-basis: calc((100% - 1rem) / 2); } }
@media (max-width: 640px) { #desarrollo .scard { flex-basis: 100%; } }

/* Plataformas (índice): hero con dos paneles 50/50; uno debajo del otro en móvil */
.pl2-visual { min-width: 0; }
.pl2-grid.pl2-grid-dos { grid-template-rows: auto; }
.pl2-grid-dos .pl2-tile { aspect-ratio: 4 / 5; }
.pl2-prox { margin: .875rem 0 0; font-size: .8125rem; color: var(--muted); }
@media (max-width: 640px) {
  .pl2-grid.pl2-grid-dos { grid-template-columns: minmax(0, 1fr); }
  .pl2-grid-dos .pl2-tile { aspect-ratio: 16 / 9; }
}

/* Proyectos: descripciones de tarjeta de máximo 3 líneas (altura homogénea) */
.pj-d { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Home · móvil: más compacta por edición y espaciado (no se oculta ninguna sección) */
@media (max-width: 640px) {
  .sv-intro { gap: 1rem; margin-bottom: 1.25rem; }
  .sv-visual { aspect-ratio: 16 / 9; }
  ul:has(> .sv-card) { gap: .75rem; }
  .sv-card { padding: 1.125rem 1.25rem; gap: .625rem; }
  .pl-head { margin-bottom: 1.25rem; }
  .pl-card .pl-media { aspect-ratio: 16 / 8; }
  .pl-b { padding: 1.125rem 1.25rem; }
  .pl-prox { padding: .875rem 1rem; gap: .5rem 1.25rem; }
  .pq2-top { gap: 1.25rem; margin-bottom: 1rem; }
  .pq2-media { max-height: 13rem; }
  .sec.pq2-sec, .sec.tm-sec { padding-block: 2.25rem; }
  .faq summary { min-height: 3rem; padding: .625rem 0; }
  .hc-form textarea { min-height: 5.5rem; }
}

/* Servicios y Plataformas · móvil: tarjetas compactas (ícono junto al título) y paneles del hero más bajos */
@media (max-width: 640px) {
  .scards { gap: .625rem; }
  .scard { padding: 1rem 1.125rem; display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); align-items: center; column-gap: .75rem; row-gap: .5rem; }
  .scard > .mi { grid-column: 1; grid-row: 1; justify-self: start; }
  .scard > h3 { grid-column: 2; grid-row: 1; margin: 0; }
  .scard > p, .scard > a, .scard > div { grid-column: 1 / -1; }
  .pl2-grid-dos .pl2-tile { aspect-ratio: 5 / 2; }
  .pl2-hero-in { gap: 1rem; }
}

/* Home · servicios: con 5 tarjetas, la segunda fila (2) queda centrada */
@media (min-width: 1000px) {
  .sv-card.sv-4 { grid-column: 2 / span 2; }
  .sv-card.sv-5 { grid-column: 4 / span 2; }
}

/* ======================================================================================================
   Iteración 3 · cubierta gráfica para las tarjetas de proyecto SIN captura (se reemplaza cuando exista la captura real).
   No simula interfaces: fondo pálido, logo centrado y grande, acento azul/naranja y categoría discreta.
   ====================================================================================================== */
.pj-espacio { background: linear-gradient(135deg, #F1F5FB 0%, #E4ECF8 100%); border: 0; overflow: hidden; }
.pj-espacio::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
  background: linear-gradient(90deg, var(--accent, #0A5CC9) 0 72%, #FF9A1F 72% 100%); }
.pj-espacio .pj-logo { width: min(16rem, 60%); border: 1px solid rgba(10, 92, 201, .12); box-shadow: none; }
.pj-espacio .pj-logo img { max-height: 3.5rem; }
.pj-cover-cat { position: absolute; top: .875rem; left: 1rem; z-index: 1; font-size: .6875rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); line-height: 1.3; }
:root[data-mode="dark"] .pj-espacio { background: linear-gradient(135deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .03)); }
:root[data-mode="contrast"] .pj-espacio { background: var(--bg); border: 2px solid var(--ink); }
:root[data-mode="contrast"] .pj-espacio::after { display: none; }

/* ======================================================================================================
   Iteración 4 · Central Telefónica con IA como tercera plataforma disponible (2026-11-01).
   ====================================================================================================== */
/* Home · sección Plataformas: tres tarjetas principales en escritorio, una por fila en móvil */
@media (min-width: 1000px) { .pl-grid.pl-grid-tres { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pl-card .pl-media > img { object-fit: cover; }

/* Home · hero «Plataformas»: composición de tres productos (Dynamic Fleet alto a la izquierda; Sender y Central a la derecha) */
@media (min-width: 901px) {
  .pcollage.pcollage-tres { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); aspect-ratio: 16 / 11; }
  .pcollage.pcollage-tres .pc-tile.t1 { grid-column: 1; grid-row: 1 / 3; }
  .pcollage.pcollage-tres .pc-tile.t3 { grid-column: 2; grid-row: 1; }
  .pcollage.pcollage-tres .pc-tile.t2 { grid-column: 2; grid-row: 2; }
}

/* Plataformas (índice): hero con tres paneles y bloque de producto con fotografía */
.pl2-grid.pl2-grid-tres { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); aspect-ratio: 5 / 4; }
.pl2-grid-tres .pl2-tile { aspect-ratio: auto; height: 100%; }
.pl2-grid-tres .pl2-tile:first-child { grid-row: 1 / 3; }
.pl2-media.pl2-foto img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 25%; border-radius: 12px; }
@media (max-width: 640px) {
  .pl2-grid.pl2-grid-tres { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; aspect-ratio: auto; }
  .pl2-grid-tres .pl2-tile { aspect-ratio: 5 / 2; height: auto; }
  .pl2-grid-tres .pl2-tile:first-child { grid-row: auto; }
}

/* ==========================================================================
   BARRIDO DE CONSISTENCIA VISUAL UI (v1) — solo CSS, sin cambios de contenido
   Escalas de ícono S/M/L, radios, bordes, sin sombras en tarjetas, botones y chips.
   ========================================================================== */
:root {
  --ui-icon-s: 2.25rem; --ui-icon-m: 2.75rem; --ui-icon-l: 3rem;
  --ui-icon-glyph-s: 1.125rem; --ui-icon-glyph-m: 1.375rem; --ui-icon-glyph-l: 1.5rem;
  --ui-r-media: 12px; --ui-r-compact: 14px; --ui-r-card: 18px; --ui-r-panel: 24px;
  --ui-border: 1px solid var(--line-soft, #E8E8ED);
  --ui-icon-bg: #E8F1FC; --ui-icon-fg: #005DCA;
}

/* ---- Círculos de ícono: 3 escalas ---- */
.cc-acc-ico { width: var(--ui-icon-s); height: var(--ui-icon-s); }
.cc-acc-ico .mi { font-size: var(--ui-icon-glyph-s); }
.sd-fun-ico, .px-ico, .cc-t-ico, .cc-cap-ico, .dw-ico, .dw-evo-ico, .if-ico, .if-ico-claro, .in-sol-ico, .in-ben-ico,
.sw-cap-ico, .sw-card-ico, .sw-sol-ico, .cc-grupo-ico, .cc-resp-ico {
  width: var(--ui-icon-m); height: var(--ui-icon-m); flex-shrink: 0;
}
.sd-fun-ico .mi, .px-ico .mi, .cc-t-ico .mi, .cc-cap-ico .mi, .dw-ico .mi, .dw-evo-ico .mi, .if-ico .mi, .if-ico-claro .mi,
.in-sol-ico .mi, .in-ben-ico .mi, .sw-cap-ico .mi, .sw-card-ico .mi, .sw-sol-ico .mi, .cc-grupo-ico .mi, .cc-resp-ico .mi {
  font-size: var(--ui-icon-glyph-m);
}
.sd-paso-ico, .sv-ico, .cc-paso-ico, .sd-app-ico, .ns-nodo, .sw-nodo, .in-et-ico {
  width: var(--ui-icon-l); height: var(--ui-icon-l); flex-shrink: 0;
}
.sd-paso-ico .mi, .sv-ico .mi, .cc-paso-ico .mi, .sd-app-ico .mi, .ns-nodo .mi, .sw-nodo .mi, .in-et-ico .mi {
  font-size: var(--ui-icon-glyph-l);
}
/* Sin halos ni sombras en círculos */
.sv-ico, .sw-nodo, .sw-cap-ico, .in-et-ico, .ns-nodo { box-shadow: none; }

/* Color sobre fondo claro: círculo #E8F1FC + ícono #005DCA (el modo oscuro y alto contraste conservan lo suyo) */
:root:not([data-mode="dark"]):not([data-mode="contrast"]) :is(.sd-fun-ico, .px-ico, .cc-t-ico, .cc-cap-ico, .in-sol-ico, .in-ben-ico,
  .sw-card-ico, .sw-sol-ico, .if-ico, .if-ico-claro, .cc-acc-ico, .cc-resp-ico, .sv-ico) {
  background: var(--ui-icon-bg); color: var(--ui-icon-fg); border: 0;
}
:root:not([data-mode="dark"]):not([data-mode="contrast"]) :is(.sd-fun-ico, .px-ico, .cc-t-ico, .cc-cap-ico, .in-sol-ico, .in-ben-ico,
  .sw-card-ico, .sw-sol-ico, .if-ico, .if-ico-claro, .cc-acc-ico, .cc-resp-ico, .sv-ico) .mi { color: var(--ui-icon-fg); }

/* Home · Servicios: sin círculos de colores ni halo; el color del servicio solo como filete superior */
.sv-card { border-top: 3px solid var(--sv, var(--accent)); }
.sv-card:hover { border-color: color-mix(in srgb, var(--accent) 35%, transparent); border-top-color: var(--sv, var(--accent)); }

/* ---- Radios ---- */
.scard, .pcard, .pl-card, .sd-fun, .px-plat, .fl-rubro, .dw-sol-item, .cc-paso, .cc-grupo, .logo-strip, .sv-card { border-radius: var(--ui-r-card); }
.feat, .sit, .callout, .hero-note, .cc-qa-item, .cc-uso, .cc-fl-paso, .cc-benef-item, .cc-tarjeta { border-radius: var(--ui-r-compact); }
.hc-form, .pd-slide { border-radius: var(--ui-r-panel); }
.ht-frame.ht-foto, .ns-foto, .ns-cita, .fl-foto, .cc-escena-foto, figure.cc-foto, .pj-media, .pk-media { border-radius: var(--ui-r-media); }
.ns-logo, .pj-logo { border-radius: 10px; }

/* ---- Sin sombras en tarjetas de contenido ---- */
.pj-marca, .scard, .pcard, .pl-card, .feat, .sit, .sd-fun, .px-plat, .fl-rubro, .dw-sol-item, .cc-paso, .cc-grupo, .cc-tarjeta,
.cc-qa-item, .cc-uso, .cc-benef-item, .sv-card, .logo-strip { box-shadow: none; }

/* ---- Botones ---- */
.btn-cta { font-weight: 500; box-shadow: none; }
:root:not([data-mode="dark"]):not([data-mode="contrast"]) .btn-cta { background: #005DCA; color: #FFFFFF; }
:root:not([data-mode="dark"]):not([data-mode="contrast"]) .btn-cta:hover { background: #0C4AA2; color: #FFFFFF; }
.btn-primary { box-shadow: none; }
.btn-secondary { color: #005DCA; }
.btn-secondary:hover { background: #005DCA; color: #FFFFFF; }
button.btn-primary, .ct-enviar, .btn-primary.btn-lg { min-height: 46px; padding-inline: 22px; font-size: 1.0625rem; font-weight: 500; }

/* ---- Chips y badges ---- */
.sv-sello { min-height: 30px; font-size: .8125rem; }
.pj-mas { min-height: 30px; font-size: .8125rem; }

/* ---- Barrido UI · segunda pasada (lo que dejó la medición) ---- */
.cc-t-ico { width: var(--ui-icon-m); height: var(--ui-icon-m); }
.cc-t-ico .mi { font-size: var(--ui-icon-glyph-m); }
.sw-nodo { width: var(--ui-icon-l); height: var(--ui-icon-l); }
/* tarjetas estándar (18) y compactas (14) de Central */
.cc-paso, .cc-grupo, .cc-resp-dest, .tl { border-radius: var(--ui-r-card); }
.cc-qa-item, .cc-uso, .cc-fl-paso, .cc-benef-item, .cc-tarjeta, .cc-apoyo { border-radius: var(--ui-r-compact); }
/* paneles grandes (24) */
.sd-cierre-card, form.form, .ns-cierre, .sd-seq, .dw-tec-area, .pq2-panel, .sw-cierre, .px-intra, .px-destacado, .sd-win, .px-mapa, .px-c-fila { border-radius: var(--ui-r-panel); }
/* imágenes y capturas (12) */
.px-vis.px-vis-img, .pq2-media, .pl2-media.pl2-cap, .pl2-media.pl2-foto, .cc-escena-foto, .cw-foto, .pj-marca { border-radius: var(--ui-r-media); }
.pj-media, .pk-media { border-radius: var(--ui-r-media); }
/* botones: una sola altura */
button.btn.btn-primary, a.btn.btn-primary { min-height: 46px; padding-inline: 22px; font-size: 1.0625rem; font-weight: 500; }
/* e-commerce: tarjetas de solución sin sombra */
.ec-sol .ec-sol-list li { box-shadow: none; border-radius: var(--ui-r-card); }

/* Fotos reales en lugar del placeholder: la <img class="ph"> hereda el relleno del recuadro; se anula para que llene el marco */
img.ph { padding: 0; min-height: 0; border: 0; background: none; display: block; width: 100%; height: 100%; object-fit: cover; }
.photo-card img.ph { position: absolute; inset: 0; z-index: -2; }
.frame > img.ph, .cw-foto > img.ph, .fl-rubro-img > img.ph, .ht-frame > img.ph { position: absolute; inset: 0; }
/* Fotos reales: más degradado bajo el texto de las tarjetas (legibilidad) y recorte de la franja del collage de origen */
.photo-card:has(img.ph)::before { background: linear-gradient(180deg, transparent 15%, rgba(7, 26, 54, .6) 50%, rgba(7, 26, 54, .94) 100%); }
img.ph[src*="/ind-salud."], img.ph[src*="/ind-sector-publico."], img.ph[src*="/svc-prontus-redaccion."],
img.ph[src*="/desarrollo-web-cierre."], img.ph[src*="/fleet-rubro-tecnicos."] { transform: scale(1.04); transform-origin: 50% 100%; }
/* Fotos editoriales en móvil: sin crecer de más */
@media (max-width: 640px) {
  .frame:has(> img.ph), .cw-foto:has(> img.ph) { max-height: 22rem; }
}

/* ==========================================================================
   HOMOLOGACIÓN GRÁFICA INTEGRAL — tokens de sistema, footer, tipografía y formulario de contacto
   ========================================================================== */
:root {
  /* Superficies: blanco = contenido base · gris claro (--alt) = secciones de apoyo/tarjetas · azul corporativo = bloques de énfasis · azul profundo = cierre y footer */
  --sup-base: #FFFFFF; --sup-apoyo: #F5F5F7; --sup-corporativa: #005DCA; --sup-profunda: #02214C;
  --pie-profundo: #02214C;
  /* Espaciado (escala 4/8) */
  --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem;
}

/* Footer: azul profundo sólido (sin degradado); el modo oscuro y alto contraste conservan sus reglas propias */
.foot { background: var(--pie-profundo); }

/* Tipografía: pesos consistentes en títulos de tarjeta (600) y antetítulo único (13 px) */
main h3:not([class]), main h4:not([class]), .foot h3:not([class]), .foot h4:not([class]) { font-weight: 600; }
.kicker { font-size: .8125rem; }

/* Formulario de contacto compacto: cabe en 1366×768 sin quitar campos ni validaciones */
.ct-form { padding: clamp(1.25rem, 2vw, 1.75rem); gap: .75rem; }
.ct-form .ct-form-t { margin-bottom: 0; font-size: clamp(1.375rem, 1.1rem + .8vw, 1.625rem); }
.ct-form .field { gap: .25rem; }
.ct-form .field label { font-size: .875rem; font-weight: 500; }
.ct-form input:not([type="hidden"]), .ct-form select { min-height: 2.75rem; }
.ct-form textarea { min-height: 4.75rem; }
.ct-form .ct-enviar { min-height: 46px; }
.ct-form .ct-aviso { margin: 0; }
@media (min-width: 761px) {
  .ct-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1rem; row-gap: .75rem; align-items: start; }
  .ct-form > .ct-form-t, .ct-form > .fgrid, .ct-form > .field:has(#f-msg), .ct-form > .form-alert, .ct-form > .ct-enviar, .ct-form > .ct-aviso { grid-column: 1 / -1; }
  .ct-form > .field:has(#f-ayuda) { grid-column: 1; grid-row: 3; }
  .ct-form > .field:has(#f-tel) { grid-column: 2; grid-row: 3; }
  .ct-form > .field:has(#f-msg) { grid-row: 4; }
}
.ct-grid { row-gap: 0; }

/* ==========================================================================
   ITERACIÓN 7 — correcciones quirúrgicas (cada regla viene de un defecto medido; ver docs/decisiones/0016)
   ========================================================================== */
:root {
  /* Título de tarjeta estándar: 17 px móvil / 18 px escritorio (antes 16–22 px según la familia) */
  --t-card: clamp(1.0625rem, .98rem + .3vw, 1.125rem);
}
:is(.pcard-b, .scard, .feat, .sd-fun-cab, .px-cab, .pk-b, .sv-top, .ns-etapa-cab, .cc-qa-cab, .cc-fl-paso, .cc-benef-item, .cc-tarjeta,
    .ec-sol-cab, .ec-tec-tx, .sw-sol-cab, .sw-paso-tx, .sw-cap-cab, .cc-grupo-cab, .if-sop-cab, .in-sol-cab, .pq2-tx) :is(h3, h4),
h3:is(.dw-sol-t, .dw-evo-t, .px-sub, .sd-seq-t, .in-ben-t) { font-size: var(--t-card); font-weight: 600; line-height: 1.28; }

/* Etiquetas de diagrama: nunca menores de 12 px; mismo peso */
.dg-hero .dg-tx { font-size: clamp(.75rem, calc(var(--dg-u) * 22), .9375rem); font-weight: 600; }
.dg-fleet .dg-tx { font-size: clamp(.75rem, calc(var(--dg-u) * 22), .9375rem); }
.dg-central .dg-tx { font-size: clamp(.75rem, calc(var(--dg-u) * 25), .9375rem); }
.dg:is(.dg-sol, .dg-mw, .dg-ec, .dg-infra, .dg-capas) .dg-tx { font-size: clamp(.75rem, calc(var(--dg-u) * 25), .9375rem); }

/* ==========================================================================
   ITERACIÓN 8 — pulido pre-publicación (componentes compartidos)
   ========================================================================== */
/* Azul profundo único: el antiguo --pie-fondo (#024594) era una variante accidental del mismo rol que --sup-profunda */
:root { --pie-fondo: var(--sup-profunda); }

/* ---- Barra secundaria de producto/servicio: un solo componente (referencia: Central Telefónica) ---- */
.localnav { background: var(--sup-profunda); border-bottom: 0; }
.localnav .wrap > b { color: #FFFFFF; font-size: 1rem; min-width: 0; flex: 0 1 auto; }
.localnav .wrap > nav { flex: 1 1 auto; justify-content: flex-end; gap: .25rem; }
.localnav nav a:not(.btn) { display: inline-flex; align-items: center; position: relative; min-height: 2.75rem; padding-inline: .875rem; font-size: .875rem; font-weight: 500; color: rgba(255, 255, 255, .82); white-space: nowrap; }
.localnav nav a:hover { color: #FFFFFF; }
.localnav nav a::after { content: ""; position: absolute; left: .875rem; right: .875rem; bottom: .5rem; height: 2px; border-radius: 2px; background: var(--naranjo, #FD9426); transform: scaleX(0); transition: transform .25s var(--ease); }
.localnav nav a.activo { color: #FFFFFF; font-weight: 600; }
.localnav nav a.activo::after { transform: scaleX(1); }
.localnav nav a:focus-visible { outline: 3px solid #FFFFFF; outline-offset: -3px; border-radius: .5rem; }
:root[data-mode="contrast"] .localnav { background: #000000; }
@media (max-width: 40rem) {
  .localnav .wrap > b { max-width: 40%; flex: 0 0 auto; }
  .localnav .wrap > nav { overflow-x: auto; scrollbar-width: none; justify-content: flex-start; flex: 1 1 0; min-width: 0; }
  .localnav .wrap > nav::-webkit-scrollbar { display: none; }
  .localnav nav a:not(.btn) { flex: none; padding-inline: .75rem; }
  .localnav nav a::after { left: .75rem; right: .75rem; }
}
/* las secciones enlazadas no quedan bajo el header + la barra */
body:has(.localnav) main [id] { scroll-margin-top: calc(var(--nav-h, 4rem) + 3.25rem + 1rem); }

/* ---- Cierre de página (.closing): variante clara, para no quedar azul profundo pegado al footer azul profundo ---- */
.closing { background: var(--bg, #FFFFFF); color: var(--body, #3A3A3C); border-top: 1px solid var(--line-soft, #E8E8ED); }
.closing .h2 { color: var(--ink, #1D1D1F); }
.closing .lead { color: var(--body, #3A3A3C); }
.closing .kicker { color: var(--accent-text, #0058C0); }
.closing .btn-light { background: var(--btn, #005DCA); color: #FFFFFF; border-color: transparent; }
.closing .btn-light:hover { background: var(--btn-hover, #0C4AA2); }
.closing .channel { background: var(--alt, #F5F5F7); border: 1px solid var(--line-soft, #E8E8ED); color: var(--body, #3A3A3C); box-shadow: none; }
.closing .channel b { color: var(--ink, #1D1D1F); }
.closing .channel .mi { background: #E8F1FC; color: #005DCA; }
.closing .channel:hover { border-color: #005DCA; }

/* ---- Plataformas: más aire entre un producto y el siguiente (Sender → Central) ---- */
.pl2-prod { padding-block: clamp(3rem, 5.5vw, 5rem); }

/* ---- Sender · «Tres pasos»: pendiente (neutro), activo (azul con anillo) y completado (azul); el ícono siempre visible ---- */
.sd-paso-ico .mi { color: inherit; }
@keyframes sdPaso1 { 0%, 4% { background: #E8F1FC; color: #005DCA; box-shadow: none; } 8%, 30% { background: #005DCA; color: #FFFFFF; box-shadow: 0 0 0 4px #CFE3FF; } 34%, 88% { background: #005DCA; color: #FFFFFF; box-shadow: none; } 96%, 100% { background: #E8F1FC; color: #005DCA; box-shadow: none; } }
@keyframes sdPaso2 { 0%, 34% { background: #E8F1FC; color: #005DCA; box-shadow: none; } 38%, 60% { background: #005DCA; color: #FFFFFF; box-shadow: 0 0 0 4px #CFE3FF; } 64%, 88% { background: #005DCA; color: #FFFFFF; box-shadow: none; } 96%, 100% { background: #E8F1FC; color: #005DCA; box-shadow: none; } }
@keyframes sdPaso3 { 0%, 64% { background: #E8F1FC; color: #005DCA; box-shadow: none; } 68%, 88% { background: #005DCA; color: #FFFFFF; box-shadow: 0 0 0 4px #CFE3FF; } 96%, 100% { background: #E8F1FC; color: #005DCA; box-shadow: none; } }

/* ---- Diagramas: colores por función (clases dg-c-*, asignadas por aplicar_iteracion8.py) ---- */
.dg-n.dg-c-base, .dg-n.dg-c-proceso { --c: #005DCA; }
.dg-n.dg-c-acento { --c: #E8710A; }
.dg-n.dg-c-campo { --c: #1E8E3E; }
.dg-n.dg-c-sistema, .dg-n.dg-c-web { --c: #38B6F2; }
.dg-n.dg-c-commerce { --c: #FD9426; }
.dg-n.dg-c-cms { --c: #5FD38A; }
.dg-n:is(.dg-c-sistema, .dg-c-web, .dg-c-cms, .dg-c-commerce) .dg-disco { color: #02214C; }
/* Botón flotante único «Habla con un ejecutivo»: más compacto en móvil (sin la línea secundaria) */
@media (max-width: 640px) {
  .ch-btn .ch-btn-tx small { display: none; }
  .ch-btn { padding-right: 1rem; }
}

/* ==========================================================================
   ITERACIÓN 9
   ========================================================================== */
/* ---- Footer: identidad → «Síguenos» + redes → navegación; títulos de columna distintos de los enlaces; sin viñetas ---- */
.foot-follow { margin-top: .5rem; margin-bottom: -.5rem; font-size: .875rem; font-weight: 600; color: #FFFFFF; }
.foot-col h2 { margin-bottom: .25rem; font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #9CC9FF; }
.foot-list { gap: .625rem; }
.foot-list li { padding-left: 0; }
.foot-list li::before { content: none; }
.foot-list a { font-size: .9375rem; color: rgba(255, 255, 255, .88); }
.foot-list a:hover { color: #FFFFFF; text-decoration: underline; text-underline-offset: .2em; }
.foot-list a:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 3px; border-radius: 4px; }

/* ---- Central: color por función (voz, ia, datos, acción). Cada color significa algo; los íconos de acciones homogéneas siguen monocromos ---- */
.cc-paso-ico.cc-ico-voz { background: #38B6F2; }
.cc-paso-ico.cc-ico-ia { background: #8AB4F8; }
.cc-paso-ico.cc-ico-datos { background: #5FD38A; }
.cc-paso-ico.cc-ico-accion { background: #FD9426; }
:root:not([data-mode="dark"]):not([data-mode="contrast"]) .cc-t-ico.cc-ico-voz { background: #E8F1FC; color: #005DCA; }
:root:not([data-mode="dark"]):not([data-mode="contrast"]) .cc-t-ico.cc-ico-datos { background: #E3F6EA; color: #1E7A43; }
:root:not([data-mode="dark"]):not([data-mode="contrast"]) .cc-t-ico.cc-ico-accion { background: #FFF1E0; color: #B45309; }
:root:not([data-mode="dark"]):not([data-mode="contrast"]) .cc-t-ico.cc-ico-voz .mi { color: #005DCA; }
:root:not([data-mode="dark"]):not([data-mode="contrast"]) .cc-t-ico.cc-ico-datos .mi { color: #1E7A43; }
:root:not([data-mode="dark"]):not([data-mode="contrast"]) .cc-t-ico.cc-ico-accion .mi { color: #B45309; }
.cc-lista--datos .mi { color: #38B6F2; }
.cc-lista--proceso .mi { color: #8AB4F8; }

/* ==========================================================================
   ITERACIÓN 10 — color por concepto (un token por concepto; el mismo en diagramas, listas, módulos y menús)
   claro (-)  /  sobre fondo oscuro (-d)
   ========================================================================== */
:root {
  --c-erp: #1967D2;        --c-erp-d: #6C8CFF;
  --c-crm: #C2185B;        --c-crm-d: #F9A8D4;
  --c-comercio: #E8710A;   --c-comercio-d: #FD9426;
  --c-inventario: #6D4FB8; --c-inventario-d: #B39DDB;
  --c-pagos: #0E9488;      --c-pagos-d: #2DD4BF;
  --c-logistica: #267B3D;  --c-logistica-d: #5FD38A;
  --c-facturacion: #B45309; --c-facturacion-d: #FBBF24;
  --c-externo: #546E7A;    --c-externo-d: #90A4AE;
  /* familias funcionales de Dynamic Fleet */
  --f-plan: #005DCA; --f-terreno: #1E8E3E; --f-gestion: #E8710A;
}
.dg-n.dg-c-erp { --c: var(--c-erp); }
.dg-n.dg-c-crm { --c: var(--c-crm); }
.dg-n.dg-c-comercio { --c: var(--c-comercio); }
.dg-n.dg-c-inventario { --c: var(--c-inventario); }
.dg-n.dg-c-pagos { --c: var(--c-pagos); }
.dg-n.dg-c-logistica { --c: var(--c-logistica); }
.dg-n.dg-c-facturacion { --c: var(--c-facturacion); }
.dg-n.dg-c-externo { --c: var(--c-externo); }
.dg-n.dg-c-gestion { --c: var(--f-gestion); }
/* sobre fondo oscuro: variante clara + glifo oscuro */
:is(.dg-central, .dg-fleet-int) .dg-n.dg-c-erp { --c: var(--c-erp-d); }
:is(.dg-central, .dg-fleet-int) .dg-n.dg-c-crm { --c: var(--c-crm-d); }
:is(.dg-central, .dg-fleet-int) .dg-n.dg-c-comercio { --c: var(--c-comercio-d); }
:is(.dg-central, .dg-fleet-int) .dg-n.dg-c-inventario { --c: var(--c-inventario-d); }
:is(.dg-central, .dg-fleet-int) .dg-n.dg-c-pagos { --c: var(--c-pagos-d); }
:is(.dg-central, .dg-fleet-int) .dg-n.dg-c-logistica { --c: var(--c-logistica-d); }
:is(.dg-central, .dg-fleet-int) .dg-n.dg-c-facturacion { --c: var(--c-facturacion-d); }
:is(.dg-central, .dg-fleet-int) .dg-n.dg-c-externo { --c: var(--c-externo-d); }
:is(.dg-central, .dg-fleet-int) .dg-n:is(.dg-c-erp, .dg-c-crm, .dg-c-comercio, .dg-c-inventario, .dg-c-pagos, .dg-c-logistica, .dg-c-facturacion, .dg-c-externo) .dg-disco { color: #02214C; }

/* E-commerce · lista lateral: mismo color que su nodo */
.ec-mods li.ec-c-erp { --c: var(--c-erp); }
.ec-mods li.ec-c-inventario { --c: var(--c-inventario); }
.ec-mods li.ec-c-pagos { --c: var(--c-pagos); }
.ec-mods li.ec-c-logistica { --c: var(--c-logistica); }

/* Fleet · módulos por familia: planificar (azul), terreno (verde), análisis y gestión (naranja) */
:root:not([data-mode="dark"]):not([data-mode="contrast"]) .sd-fun--terreno .sd-fun-ico { background: #E3F6EA; color: #1E7A43; }
:root:not([data-mode="dark"]):not([data-mode="contrast"]) .sd-fun--terreno .sd-fun-ico .mi { color: #1E7A43; }
:root:not([data-mode="dark"]):not([data-mode="contrast"]) .sd-fun--gestion .sd-fun-ico { background: #FFF1E0; color: #B45309; }
:root:not([data-mode="dark"]):not([data-mode="contrast"]) .sd-fun--gestion .sd-fun-ico .mi { color: #B45309; }

/* Central · «Ejemplos de sistemas»: punto del color del concepto (el mismo del diagrama) */
.cc-chips li[class^="cc-chip-"] { display: inline-flex; align-items: center; gap: .5rem; }
.cc-chips li[class^="cc-chip-"]::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--chip-c); flex: none; }
.cc-chip-erp { --chip-c: var(--c-erp-d); } .cc-chip-crm { --chip-c: var(--c-crm-d); } .cc-chip-comercio { --chip-c: var(--c-comercio-d); }
.cc-chip-logistica { --chip-c: var(--c-logistica-d); } .cc-chip-externo { --chip-c: var(--c-externo-d); }

/* ---- Footer: sin subrayado al pasar; el texto pasa a blanco; viñeta discreta ---- */
.foot-list a:hover, .foot-list a:focus-visible { color: #FFFFFF; text-decoration: none; }
.foot-list a:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 3px; border-radius: 4px; }
.foot-list li { position: relative; padding-left: 1rem; }
.foot-list li::before { content: ""; position: absolute; left: 0; top: .6em; width: 4px; height: 4px; border-radius: 50%; background: rgba(255, 255, 255, .45); transition: background .2s; }
.foot-list li:hover::before, .foot-list li:focus-within::before { background: #FFFFFF; }
.foot-col h2 { font-size: .875rem; margin-bottom: .5rem; }

/* ==========================================================================
   ITERACIÓN 11
   ========================================================================== */
/* ---- Migas de pan: el último elemento que repite el kicker o el título se oculta solo en lo visual (sigue disponible para lectores de pantalla y en el JSON-LD) ---- */
.crumbs li.crumb-dup, .crumbs-bar.crumbs-solo { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---- Hero de Servicios: imagen más baja (4:3, tope 26 rem) en lugar del marco alto ---- */
.frame.frame-hero-bajo { aspect-ratio: 4 / 3; max-height: 26rem; }
img.ph[src*="/svc-hero-servicios."], img.ph[src*="/clientes-heroe."], img.ph[src*="/ind-educacion."] { transform: scale(1.04); transform-origin: 50% 100%; }

/* ---- Central: conceptos extra de procesos y de íconos de tarjeta ---- */
:root {
  --c-solicitud: #0891B2;  --c-solicitud-d: #22D3EE;
  --c-incidencia: #C62828; --c-incidencia-d: #FF8A80;
  --c-oportunidad: #B45309; --c-oportunidad-d: #FBBF24;
  --c-derivacion: #6D4FB8; --c-derivacion-d: #B39DDB;
}
.dg-central .dg-n.dg-c-solicitud { --c: var(--c-solicitud-d); }
.dg-central .dg-n.dg-c-incidencia { --c: var(--c-incidencia-d); }
.dg-central .dg-n.dg-c-oportunidad { --c: var(--c-oportunidad-d); }
.dg-central .dg-n.dg-c-derivacion { --c: var(--c-derivacion-d); }
.dg-central .dg-n:is(.dg-c-solicitud, .dg-c-incidencia, .dg-c-oportunidad, .dg-c-derivacion) .dg-disco { color: #02214C; }
.cc-lista--proceso .cc-p-solicitud .mi { color: var(--c-solicitud-d); }
.cc-lista--proceso .cc-p-incidencia .mi { color: var(--c-incidencia-d); }
.cc-lista--proceso .cc-p-oportunidad .mi { color: var(--c-oportunidad-d); }
.cc-lista--proceso .cc-p-derivacion .mi { color: var(--c-derivacion-d); }
:root:not([data-mode="dark"]):not([data-mode="contrast"]) .cc-t-ico.cc-ico-comercio { background: #FFF1E0; color: #B45309; }
:root:not([data-mode="dark"]):not([data-mode="contrast"]) .cc-t-ico.cc-ico-comercio .mi { color: #B45309; }
:root:not([data-mode="dark"]):not([data-mode="contrast"]) .cc-t-ico.cc-ico-crm { background: #FCE4EC; color: #C2185B; }
:root:not([data-mode="dark"]):not([data-mode="contrast"]) .cc-t-ico.cc-ico-crm .mi { color: #C2185B; }
:root:not([data-mode="dark"]):not([data-mode="contrast"]) .cc-t-ico.cc-ico-logistica { background: #E3F6EA; color: #1E7A43; }
:root:not([data-mode="dark"]):not([data-mode="contrast"]) .cc-t-ico.cc-ico-logistica .mi { color: #1E7A43; }
:root:not([data-mode="dark"]):not([data-mode="contrast"]) .cc-t-ico.cc-ico-erp { background: #E8F1FC; color: #1967D2; }
:root:not([data-mode="dark"]):not([data-mode="contrast"]) .cc-t-ico.cc-ico-erp .mi { color: #1967D2; }
:root:not([data-mode="dark"]):not([data-mode="contrast"]) .cc-t-ico.cc-ico-inventario { background: #EFE9FB; color: #6D4FB8; }
:root:not([data-mode="dark"]):not([data-mode="contrast"]) .cc-t-ico.cc-ico-inventario .mi { color: #6D4FB8; }