/* ============================================================
   CORPORATIVO.CSS — estrato multinacional
   ARKTA GROUP · fit-out, construcción y facilities
   ------------------------------------------------------------
   Este archivo se carga DESPUÉS de tokens/global/bloques y es el
   único sitio donde vive lo que la plantilla local no traía:

     1 · Barra de región e idioma (multi-país)
     2 · Enrutador inteligente del Hero (Single Entry Point)
     3 · Barra de credenciales / KPIs de grupo
     4 · Pilares de la Value Equation corporativa
     5 · Portfolio B2B: filtros + ficha Desafío→Solución→Impacto
     6 · Diagrama de arquitectura headless + matriz RBAC
     7 · Formulario inteligente con enrutado a CRM
     8 · Portales de audiencia del pie

   Se respeta el sistema de la casa: mismos tokens, misma geometría
   de burbuja, misma regla de «solo la acción lleva color».
   No se toca global.css ni bloques.css.
   ============================================================ */

:root {
  /* Acento técnico secundario. NO compite con --cta: nunca se usa en
     un botón. Solo tiñe superficies de dato: diagramas, chips de
     estado, celdas de matriz y etiquetas de sistema. */
  --tech:        #1d4e6b;
  --tech-soft:   rgba(29, 78, 107, 0.075);
  --tech-ring:   rgba(29, 78, 107, 0.22);
  --tech-ink:    #143c53;

  /* Semáforo de gobernanza (matriz RBAC y estados de lead). */
  --ok:      #1f5c3d;
  --ok-soft: rgba(31, 92, 61, 0.10);
  --warn:      #8a6212;
  --warn-soft: rgba(138, 98, 18, 0.10);
  --no:      #7a3030;
  --no-soft: rgba(122, 48, 48, 0.08);

  --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas,
          'Liberation Mono', monospace;
}


/* ============================================================
   0 · UTILIDADES TRANSVERSALES
   ============================================================ */

/* Salto al contenido: primer requisito de WCAG 2.1 AA (2.4.1). */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  padding: 14px var(--sp-6);
  background: var(--bg-dark); color: var(--text-on-dark);
  border-radius: 0 0 var(--radius-md) 0;
  font: var(--fw-semibold) var(--fs-small)/1 var(--font-sans);
}
.skip-link:focus { left: 0; }

/* Rótulo de sistema: nombra el objeto técnico (CRM, evento, SLA). */
.tag-sys {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px 5px 9px;
  border-radius: var(--radius-round);
  background: var(--tech-soft);
  box-shadow: inset 0 0 0 1px var(--tech-ring);
  color: var(--tech-ink);
  font: var(--fw-semibold) var(--fs-micro)/1 var(--font-sans);
  letter-spacing: 0.04em;
  font-family: var(--mono);
  white-space: nowrap;
}
.tag-sys::before {
  content: ''; width: 6px; height: 6px; border-radius: var(--radius-round);
  background: var(--tech); flex: none;
}
.section--dark .tag-sys {
  background: rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
  color: var(--text-on-dark);
}
.section--dark .tag-sys::before { background: var(--gold-bright); }

.medida { max-width: var(--measure); }

/* Cifra grande con su pie: se repite en KPIs, impacto y arquitectura. */
.cifra {
  display: block;
  font: var(--fw-bold) clamp(1.9rem, 1.2rem + 2.4vw, 2.75rem)/1 var(--font-serif);
  font-variation-settings: var(--wonk-display);
  letter-spacing: var(--ls-serif);
  color: var(--text-heading);
  font-variant-numeric: tabular-nums;
}
.cifra--sm { font-size: clamp(1.5rem, 1.1rem + 1.3vw, 2rem); }
.section--dark .cifra { color: var(--text-on-dark); }
.cifra__pie {
  display: block; margin-top: var(--sp-3);
  font: var(--fw-medium) var(--fs-small)/1.45 var(--font-sans);
  color: var(--text-muted);
}
.section--dark .cifra__pie { color: var(--text-on-dark-muted); }


/* ============================================================
   1 · BARRA DE REGIÓN E IDIOMA
   Vive dentro de la cápsula de cabecera, en una segunda línea que
   solo aparece en escritorio. En móvil el selector se pliega en el
   propio menú para no robar altura al primer pliegue.
   ============================================================ */
.regionbar {
  display: flex; align-items: center; gap: var(--sp-4);
  flex-wrap: wrap;
  padding: 10px var(--container-pad);
  margin: var(--marco-gap) var(--marco) 0;
  border-radius: var(--radius-round);
  background: rgba(255, 255, 255, 0.055);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10);
  color: var(--text-on-dark-muted);
  font: var(--fw-medium) var(--fs-micro)/1.4 var(--font-sans);
}
.regionbar__geo { display: inline-flex; align-items: center; gap: 8px; }
.regionbar__geo b { color: var(--text-on-dark); font-weight: var(--fw-semibold); }
.regionbar__sep { flex: 1 1 auto; }
.regionbar__grupo { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.regionbar label { color: var(--text-on-dark-muted); }
.regionbar select {
  appearance: none;
  padding: 6px 30px 6px 12px;
  border: 0;
  border-radius: var(--radius-round);
  background: rgba(255, 255, 255, 0.10) var(--icon-caret) no-repeat right 10px center / 12px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  color: var(--text-on-dark);
  font: var(--fw-semibold) var(--fs-micro)/1 var(--font-sans);
  cursor: pointer;
}
.regionbar select:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; }
.regionbar select option { color: #14231c; background: #fff; }
@media (max-width: 900px) { .regionbar { display: none; } }

:root {
  --icon-caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f2f5f0' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}


/* ============================================================
   2 · ENRUTADOR INTELIGENTE  (Single Entry Point)
   Dos clics como máximo entre la portada y el destino. El bloque
   ocupa la mitad derecha del Hero, donde antes iba la foto suelta.
   ============================================================ */
.router {
  position: relative;
  padding: clamp(20px, 2.4vw, 30px);
  border-radius: var(--radius-panel-in);
  background: var(--bg-card);
  box-shadow: var(--shadow-float), inset 0 0 0 1px var(--border);
}
.router__cab {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-4); flex-wrap: wrap;
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--rule);
}
.router__titulo {
  font: var(--fw-semibold) var(--fs-h3)/1.25 var(--font-serif);
  font-variation-settings: var(--wonk-sub);
  color: var(--text-heading);
}
.router__paso {
  font: var(--fw-semibold) var(--fs-micro)/1 var(--font-sans);
  letter-spacing: var(--ls-wide); text-transform: uppercase;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.router__pantalla { display: none; padding-top: var(--sp-6); }
.router__pantalla.is-activa { display: block; animation: router-in 280ms var(--ease) both; }
@keyframes router-in { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) {
  .router__pantalla.is-activa { animation: none; }
}

.router__pregunta {
  margin-bottom: var(--sp-5);
  font: var(--fw-medium) var(--fs-body)/1.5 var(--font-sans);
  color: var(--text-body);
}

/* --- Las cinco puertas --- */
.puertas { display: grid; gap: 10px; }
.puerta {
  display: grid;
  grid-template-columns: 40px 1fr 20px;
  align-items: center; gap: var(--sp-4);
  width: 100%;
  min-height: var(--tap-min);
  padding: 13px 16px;
  text-align: left;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--bg-1);
  box-shadow: inset 0 0 0 1px var(--border);
  color: var(--text-heading);
  font-family: var(--font-sans);
  cursor: pointer;
  transition: box-shadow 180ms var(--ease), transform 180ms var(--ease),
              background 180ms var(--ease);
}
.puerta:hover {
  transform: translateY(-2px);
  background: var(--bg-card);
  box-shadow: inset 0 0 0 1px var(--cta-ring), var(--shadow-sm);
}
.puerta:focus-visible { outline: 3px solid var(--cta); outline-offset: 2px; }
.puerta[aria-pressed="true"] {
  background: var(--cta-soft);
  box-shadow: inset 0 0 0 2px var(--cta);
}
.puerta__icono {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: var(--radius-round);
  background: var(--accent-soft);
  color: var(--text-heading);
}
.puerta__icono svg { width: 20px; height: 20px; }
.puerta__t {
  display: block;
  font: var(--fw-semibold) var(--fs-body)/1.25 var(--font-sans);
}
.puerta__s {
  display: block; margin-top: 3px;
  font: var(--fw-body) var(--fs-small)/1.4 var(--font-sans);
  color: var(--text-muted);
}
.puerta__chev { color: var(--text-muted); }
.puerta__chev svg { width: 18px; height: 18px; display: block; }

/* --- Segundo clic: cualificación --- */
.router__volver {
  display: inline-flex; align-items: center; gap: 6px;
  margin-bottom: var(--sp-5);
  padding: 6px 12px 6px 8px;
  border: 0; border-radius: var(--radius-round);
  background: var(--accent-soft);
  color: var(--text-body);
  font: var(--fw-semibold) var(--fs-small)/1 var(--font-sans);
  cursor: pointer;
}
.router__volver:hover { background: var(--accent-halo); }
.router__volver svg { width: 15px; height: 15px; }

.opciones { display: grid; gap: 8px; }
.opcion {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4);
  min-height: 52px;
  padding: 11px 16px;
  border: 0; border-radius: var(--radius-md);
  background: var(--bg-1);
  box-shadow: inset 0 0 0 1px var(--border);
  color: var(--text-heading);
  text-align: left;
  font: var(--fw-medium) var(--fs-small)/1.35 var(--font-sans);
  cursor: pointer;
  transition: box-shadow 160ms var(--ease), background 160ms var(--ease);
}
.opcion:hover { background: var(--bg-card); box-shadow: inset 0 0 0 1px var(--cta-ring); }
.opcion:focus-visible { outline: 3px solid var(--cta); outline-offset: 2px; }
.opcion__pista {
  font: var(--fw-semibold) var(--fs-micro)/1 var(--font-sans);
  font-family: var(--mono);
  color: var(--text-muted); white-space: nowrap;
}

/* --- Resolución: a dónde va el lead y con qué SLA --- */
.resol { padding-top: var(--sp-2); }
.resol__eco {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: var(--sp-5);
}
.eco {
  padding: 6px 12px;
  border-radius: var(--radius-round);
  background: var(--accent-soft);
  font: var(--fw-semibold) var(--fs-micro)/1.3 var(--font-sans);
  color: var(--text-body);
}
.resol__h {
  font: var(--fw-semibold) var(--fs-h3)/1.28 var(--font-serif);
  font-variation-settings: var(--wonk-sub);
  color: var(--text-heading);
}
.resol__p {
  margin-top: var(--sp-4);
  font: var(--fw-body) var(--fs-small)/1.6 var(--font-sans);
  color: var(--text-body);
}
.resol__ruta {
  display: grid; gap: 10px;
  margin: var(--sp-5) 0;
  padding: var(--sp-5);
  border-radius: var(--radius-md);
  background: var(--tech-soft);
  box-shadow: inset 0 0 0 1px var(--tech-ring);
}
.resol__ruta dt {
  font: var(--fw-semibold) var(--fs-micro)/1.3 var(--font-sans);
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--tech-ink);
}
.resol__ruta dd {
  margin: 0 0 var(--sp-3);
  font-family: var(--mono);
  font-size: var(--fs-small); line-height: 1.5;
  color: var(--text-body);
  overflow-wrap: anywhere;
}
.resol__ruta dd:last-child { margin-bottom: 0; }
.resol .cta-group { margin-top: var(--sp-5); }
.resol__nota {
  margin-top: var(--sp-4);
  font: var(--fw-body) var(--fs-micro)/1.55 var(--font-sans);
  color: var(--text-muted);
}

/* El Hero pasa a dos columnas: promesa modular | enrutador. */
.hero--router .hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  align-items: center;
  gap: clamp(28px, 4vw, 64px);
}
@media (max-width: 979px) {
  .hero--router .hero__grid { grid-template-columns: 1fr; }
}


/* ============================================================
   3 · BARRA DE CREDENCIALES DE GRUPO
   ============================================================ */
.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px;
  border-radius: var(--radius-panel-in);
  overflow: hidden;
  background: var(--border-solid);
  box-shadow: inset 0 0 0 1px var(--border);
}
.kpi { padding: clamp(20px, 2.4vw, 30px); background: var(--bg-1); }
.kpi .cifra__pie { color: var(--text-muted); }

.acredit {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: var(--sp-8);
}
.acredit__i {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  border-radius: var(--radius-round);
  background: var(--bg-card);
  box-shadow: inset 0 0 0 1px var(--border-strong);
  font: var(--fw-semibold) var(--fs-micro)/1 var(--font-sans);
  color: var(--text-body);
}
.acredit__i svg { width: 14px; height: 14px; color: var(--cta); flex: none; }


/* ============================================================
   4 · PILARES DE LA VALUE EQUATION
   ============================================================ */
.pilares {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: var(--sp-6);
}
.pilar {
  display: flex; flex-direction: column;
  padding: clamp(22px, 2.4vw, 30px);
  border-radius: var(--radius-card);
  background: var(--bg-card);
  box-shadow: var(--shadow-card), inset 0 0 0 1px var(--border);
}
.pilar__k {
  font: var(--fw-semibold) var(--fs-micro)/1 var(--font-sans);
  letter-spacing: var(--ls-wide); text-transform: uppercase;
  color: var(--text-muted);
}
.pilar h3 { margin-top: var(--sp-4); }
.pilar p { margin-top: var(--sp-4); color: var(--text-body); }
.pilar__dato {
  margin-top: auto; padding-top: var(--sp-5);
  border-top: 1px solid var(--rule);
}
.pilar__dato .cifra { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.85rem); }


/* ============================================================
   5 · PORTFOLIO B2B
   ============================================================ */
.filtros {
  display: grid; gap: var(--sp-5);
  padding: clamp(18px, 2vw, 26px);
  margin-bottom: var(--sp-10);
  border-radius: var(--radius-card);
  background: var(--bg-card);
  box-shadow: inset 0 0 0 1px var(--border), var(--shadow-sm);
}
.filtros__fila { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.filtros__et {
  min-width: 128px;
  font: var(--fw-semibold) var(--fs-micro)/1.3 var(--font-sans);
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-muted);
}
.filtros__chips { display: flex; gap: 7px; flex-wrap: wrap; }
.chip {
  min-height: 38px;
  padding: 8px 15px;
  border: 0; border-radius: var(--radius-round);
  background: var(--bg-2);
  box-shadow: inset 0 0 0 1px var(--border);
  color: var(--text-body);
  font: var(--fw-semibold) var(--fs-small)/1.2 var(--font-sans);
  cursor: pointer;
  transition: background 150ms var(--ease), box-shadow 150ms var(--ease), color 150ms var(--ease);
}
.chip:hover { background: var(--bg-3); }
.chip:focus-visible { outline: 3px solid var(--cta); outline-offset: 2px; }
.chip[aria-pressed="true"] {
  background: var(--cta); color: var(--cta-contrast);
  box-shadow: inset 0 0 0 1px var(--cta);
}
.filtros__pie {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); flex-wrap: wrap;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--rule);
  font: var(--fw-medium) var(--fs-small)/1.4 var(--font-sans);
  color: var(--text-muted);
}
.filtros__pie b { color: var(--text-heading); font-variant-numeric: tabular-nums; }
.filtros__reset {
  border: 0; background: none; padding: 6px 0;
  color: var(--cta);
  font: var(--fw-semibold) var(--fs-small)/1 var(--font-sans);
  text-decoration: underline; text-underline-offset: 3px;
  cursor: pointer;
}

.casos { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: var(--sp-6); }
.caso {
  display: flex; flex-direction: column;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--bg-card);
  box-shadow: var(--shadow-card), inset 0 0 0 1px var(--border);
}
.caso[hidden] { display: none; }
.caso__foto { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--bg-3); }
.caso__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.caso__sector {
  position: absolute; left: 14px; top: 14px;
  padding: 6px 13px;
  border-radius: var(--radius-round);
  background: rgba(18, 41, 31, 0.86);
  color: var(--text-on-dark);
  font: var(--fw-semibold) var(--fs-micro)/1 var(--font-sans);
  letter-spacing: 0.05em; text-transform: uppercase;
  backdrop-filter: blur(6px);
}
.caso__cuerpo { display: flex; flex-direction: column; flex: 1; padding: clamp(20px, 2.2vw, 28px); }
.caso__meta {
  display: flex; gap: var(--sp-4); flex-wrap: wrap;
  font: var(--fw-medium) var(--fs-micro)/1.4 var(--font-sans);
  color: var(--text-muted);
}
.caso__meta span { display: inline-flex; align-items: center; gap: 5px; }
.caso__meta svg { width: 13px; height: 13px; flex: none; }
.caso h3 { margin-top: var(--sp-4); font-size: var(--fs-h3); }

/* Las tres bandas del framework. El filete de la izquierda las
   diferencia sin meter tres colores nuevos en la página. */
.dsi { margin-top: var(--sp-5); display: grid; gap: var(--sp-4); }
.dsi__b { padding-left: var(--sp-5); border-left: 2px solid var(--border-strong); }
.dsi__b--i { border-left-color: var(--cta); }
.dsi__k {
  display: block;
  font: var(--fw-bold) var(--fs-micro)/1 var(--font-sans);
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-muted);
}
.dsi__b--i .dsi__k { color: var(--cta); }
.dsi__b p { margin-top: 7px; font-size: var(--fs-small); line-height: 1.6; color: var(--text-body); }

.impacto { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 7px; }
.impacto li {
  display: grid; grid-template-columns: 16px 1fr; gap: 9px;
  font-size: var(--fs-small); line-height: 1.5; color: var(--text-body);
}
.impacto li svg { width: 16px; height: 16px; margin-top: 3px; color: var(--cta); }
.impacto b { color: var(--text-heading); font-variant-numeric: tabular-nums; }

.caso__pie {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: auto; padding-top: var(--sp-5);
  border-top: 1px solid var(--rule);
}
.cert {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px;
  border-radius: var(--radius-round);
  background: var(--gold-soft);
  box-shadow: inset 0 0 0 1px var(--gold-ring);
  color: var(--gold-ink);
  font: var(--fw-semibold) var(--fs-micro)/1 var(--font-sans);
}
.cert svg { width: 12px; height: 12px; }

.casos__vacio {
  padding: var(--sp-14) var(--sp-6);
  text-align: center;
  border-radius: var(--radius-card);
  background: var(--bg-2);
  box-shadow: inset 0 0 0 1px var(--border);
  color: var(--text-muted);
}
.casos__vacio[hidden] { display: none; }


/* ============================================================
   6 · ARQUITECTURA HEADLESS + RBAC
   ============================================================ */
.arq { display: grid; gap: var(--sp-6); }
.arq__capa {
  display: grid;
  grid-template-columns: minmax(160px, 200px) 1fr;
  gap: var(--sp-6);
  align-items: start;
  padding: clamp(18px, 2vw, 26px);
  border-radius: var(--radius-card);
  background: rgba(255, 255, 255, 0.045);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.11);
}
@media (max-width: 767px) { .arq__capa { grid-template-columns: 1fr; gap: var(--sp-5); } }
.arq__nombre {
  font: var(--fw-semibold) var(--fs-body)/1.3 var(--font-sans);
  color: var(--text-on-dark);
}
.arq__nombre small {
  display: block; margin-top: 6px;
  font: var(--fw-medium) var(--fs-micro)/1.5 var(--font-sans);
  font-family: var(--mono);
  color: var(--text-on-dark-muted);
}
.arq__cajas { display: flex; flex-wrap: wrap; gap: 8px; }
.arq__caja {
  padding: 9px 14px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  color: var(--text-on-dark);
  font: var(--fw-medium) var(--fs-small)/1.3 var(--font-sans);
}
.arq__caja b { font-weight: var(--fw-semibold); }
.arq__caja--clave {
  background: rgba(216, 184, 120, 0.14);
  box-shadow: inset 0 0 0 1px rgba(216, 184, 120, 0.36);
}
.arq__flecha {
  display: grid; place-items: center;
  color: var(--text-on-dark-muted);
}
.arq__flecha svg { width: 22px; height: 22px; }
.arq__nota {
  margin-top: var(--sp-3);
  font: var(--fw-body) var(--fs-small)/1.6 var(--font-sans);
  color: var(--text-on-dark-muted);
  max-width: 62ch;
}

/* Matriz de permisos. En móvil cada fila se convierte en ficha. */
.tabla-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabla-corp {
  width: 100%; min-width: 620px;
  border-collapse: collapse;
  font: var(--fw-body) var(--fs-small)/1.5 var(--font-sans);
}
.tabla-corp caption {
  text-align: left; padding-bottom: var(--sp-4);
  font: var(--fw-medium) var(--fs-small)/1.55 var(--font-sans);
  color: var(--text-muted);
}
.tabla-corp th, .tabla-corp td {
  padding: 12px 14px; text-align: left;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
.tabla-corp thead th {
  font: var(--fw-semibold) var(--fs-micro)/1.3 var(--font-sans);
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid var(--rule-strong);
}
.tabla-corp tbody th {
  font-weight: var(--fw-semibold); color: var(--text-heading);
}
.tabla-corp td { color: var(--text-body); }
.perm {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: var(--radius-round);
  font: var(--fw-semibold) var(--fs-micro)/1.3 var(--font-sans);
}
.perm--si { background: var(--ok-soft); color: var(--ok); }
.perm--rev { background: var(--warn-soft); color: var(--warn); }
.perm--no { background: var(--no-soft); color: var(--no); }


/* ============================================================
   7 · FORMULARIO INTELIGENTE
   ============================================================ */
.form-int {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(24px, 3vw, 48px);
  align-items: start;
}
@media (max-width: 899px) { .form-int { grid-template-columns: 1fr; } }

.campo { display: grid; gap: 7px; margin-bottom: var(--sp-5); }
.campo > label {
  font: var(--fw-semibold) var(--fs-small)/1.35 var(--font-sans);
  color: var(--text-heading);
}
.campo > label .req { color: var(--no); }
.campo__ayuda {
  font: var(--fw-body) var(--fs-micro)/1.5 var(--font-sans);
  color: var(--text-muted);
}
.campo input, .campo select, .campo textarea {
  width: 100%;
  min-height: 52px;
  padding: 13px 15px;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--bg-card);
  box-shadow: inset 0 0 0 1px var(--border-strong);
  color: var(--text-heading);
  font: var(--fw-body) var(--fs-body)/1.4 var(--font-sans);
}
.campo textarea { min-height: 112px; resize: vertical; line-height: 1.6; }
.campo select {
  appearance: none;
  padding-right: 42px;
  background-image: var(--icon-caret-oscuro);
  background-repeat: no-repeat;
  background-position: right 15px center;
  background-size: 15px;
  cursor: pointer;
}
.campo input:focus-visible, .campo select:focus-visible, .campo textarea:focus-visible {
  outline: 3px solid var(--cta); outline-offset: 1px;
  box-shadow: inset 0 0 0 1px var(--cta);
}
.campo input[aria-invalid="true"], .campo select[aria-invalid="true"] {
  box-shadow: inset 0 0 0 2px var(--no);
}
.campo__error {
  display: none;
  font: var(--fw-semibold) var(--fs-micro)/1.4 var(--font-sans);
  color: var(--no);
}
.campo.is-mal .campo__error { display: block; }

:root {
  --icon-caret-oscuro: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314231c' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

.campos-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
@media (max-width: 599px) { .campos-2 { grid-template-columns: 1fr; } }
.campos-2 .campo { margin-bottom: 0; }

.consent {
  display: grid; grid-template-columns: 22px 1fr; gap: var(--sp-4);
  align-items: start;
  margin: var(--sp-6) 0;
}
.consent input { width: 22px; height: 22px; margin-top: 2px; accent-color: var(--cta); }
.consent label { font: var(--fw-body) var(--fs-small)/1.6 var(--font-sans); color: var(--text-body); }
.consent a { color: var(--cta); text-underline-offset: 3px; }

/* Panel vivo: qué está pasando con el lead mientras se rellena. */
.enrutado {
  position: sticky; top: calc(var(--header-h) + 30px);
  padding: clamp(20px, 2.4vw, 28px);
  border-radius: var(--radius-card);
  background: var(--bg-dark);
  color: var(--text-on-dark);
  box-shadow: var(--shadow-float);
}
@media (max-width: 899px) { .enrutado { position: static; } }
.enrutado h3 { color: var(--text-on-dark); font-size: var(--fs-h3); }
.enrutado__p {
  margin-top: var(--sp-4);
  font: var(--fw-body) var(--fs-small)/1.6 var(--font-sans);
  color: var(--text-on-dark-muted);
}
.enrutado__lista { list-style: none; margin: var(--sp-6) 0 0; padding: 0; display: grid; gap: 0; }
.enrutado__lista li {
  display: grid; grid-template-columns: 1fr auto; gap: var(--sp-4);
  align-items: baseline;
  padding: 12px 0;
  border-bottom: 1px solid var(--rule-dark);
  font: var(--fw-medium) var(--fs-small)/1.4 var(--font-sans);
  color: var(--text-on-dark-muted);
}
.enrutado__lista li:last-child { border-bottom: 0; }
.enrutado__v {
  font-family: var(--mono);
  font-weight: var(--fw-semibold);
  color: var(--text-on-dark);
  text-align: right;
}
.enrutado__v--alto { color: var(--gold-bright); }
.enrutado__barra {
  margin-top: var(--sp-6);
  height: 8px; border-radius: var(--radius-round);
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}
.enrutado__barra i {
  display: block; height: 100%; width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, #2f8a5a, var(--gold-bright));
  transition: width 320ms var(--ease);
}
.enrutado__pie {
  margin-top: var(--sp-4);
  font: var(--fw-medium) var(--fs-micro)/1.5 var(--font-sans);
  color: var(--text-on-dark-muted);
}


/* ============================================================
   8 · PORTALES DE AUDIENCIA (pie)
   ============================================================ */
.portales {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--sp-4);
  margin-bottom: var(--sp-12);
  padding-bottom: var(--sp-12);
  border-bottom: 1px solid var(--rule-dark);
}
.portal {
  display: block;
  padding: var(--sp-6);
  border-radius: var(--radius-card);
  background: rgba(255, 255, 255, 0.045);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10);
  color: var(--text-on-dark);
  text-decoration: none;
  transition: background 180ms var(--ease), transform 180ms var(--ease);
}
.portal:hover { background: rgba(255, 255, 255, 0.09); transform: translateY(-2px); text-decoration: none; }
.portal:focus-visible { outline: 3px solid var(--gold-bright); outline-offset: 3px; }
.portal b { display: block; font: var(--fw-semibold) var(--fs-body)/1.3 var(--font-sans); }
.portal span {
  display: block; margin-top: 7px;
  font: var(--fw-body) var(--fs-small)/1.5 var(--font-sans);
  color: var(--text-on-dark-muted);
}

/* El pie multinacional crece a cinco columnas. */
@media (min-width: 1100px) {
  body .site-footer__grid { grid-template-columns: 1.5fr 1fr 1fr 1.25fr 1.1fr; }
}


/* ============================================================
   9 · AJUSTES DE ACCESIBILIDAD TRANSVERSALES  (WCAG 2.1 AA)
   ============================================================ */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--cta);
  outline-offset: 2px;
  border-radius: 4px;
}
.section--dark :where(a, button, summary):focus-visible,
.site-footer :where(a, button):focus-visible { outline-color: var(--gold-bright); }

/* 1.4.12 · el usuario puede forzar espaciado de texto sin romper nada:
   ningún contenedor de esta hoja fija altura, todos crecen. */

@media (prefers-contrast: more) {
  :root { --border: rgba(20, 35, 28, 0.34); --rule: rgba(20, 35, 28, 0.34); }
}


/* ============================================================
   10 · CAPA DE MOVIMIENTO PARA LAS PIEZAS NUEVAS
   Mismo contrato que `tokens.css` §I1: el estado oculto vive
   detrás de `html.js-anim` Y dentro de `prefers-reduced-motion:
   no-preference`. Sin JavaScript, o con menos movimiento pedido,
   no queda nada invisible.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  html.js-anim body :is(.kpi, .pilar, .caso, .arq__capa, .portal) {
    opacity: 0;
    translate: 0 var(--mo-alza);
  }
  html.js-anim body :is(.kpi, .pilar, .caso, .arq__capa, .portal).rv-in {
    opacity: 1;
    translate: none;
    transition:
      opacity var(--mo-larga) var(--mo-salida) var(--mo-desfase, 0ms),
      translate var(--mo-larga) var(--mo-salida) var(--mo-desfase, 0ms);
  }
  html.js-anim body :is(.kpis, .pilares, .casos, .portales) > *:nth-child(2) { --mo-desfase: var(--mo-escalon); }
  html.js-anim body :is(.kpis, .pilares, .casos, .portales) > *:nth-child(3) { --mo-desfase: calc(var(--mo-escalon) * 2); }
  html.js-anim body :is(.kpis, .pilares, .casos, .portales) > *:nth-child(4) { --mo-desfase: calc(var(--mo-escalon) * 3); }
  html.js-anim body :is(.casos, .portales) > *:nth-child(5) { --mo-desfase: calc(var(--mo-escalon) * 4); }
  html.js-anim body .casos > *:nth-child(6) { --mo-desfase: calc(var(--mo-escalon) * 5); }
}


/* ============================================================
   11 · PÁGINA DE DOCUMENTO  (dossier de arquitectura)
   Ancho de lectura de documento, no de landing. Las tablas
   pueden desbordar el ancho de texto y llevan su propio scroll.
   ============================================================ */
.doc { max-width: 78ch; margin-inline: auto; }
.doc > .tabla-wrap,
.doc > .doc__ancho { max-width: none; }
.doc h2 {
  margin-top: var(--sp-16);
  padding-top: var(--sp-8);
  border-top: 2px solid var(--rule-strong);
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem);
}
.doc h2:first-of-type { margin-top: var(--sp-10); }
.doc h3 { margin-top: var(--sp-12); font-size: var(--fs-h3); }
.doc h4 {
  margin-top: var(--sp-8);
  font: var(--fw-semibold) var(--fs-body)/1.35 var(--font-sans);
  color: var(--text-heading);
}
.doc p { margin-top: var(--sp-5); color: var(--text-body); }
.doc ul, .doc ol { margin: var(--sp-5) 0 0; padding-left: 1.35em; color: var(--text-body); }
.doc li { margin-bottom: var(--sp-3); line-height: var(--lh-body); }
.doc code {
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--tech-soft);
  box-shadow: inset 0 0 0 1px var(--tech-ring);
  font-family: var(--mono);
  font-size: 0.9em;
  color: var(--tech-ink);
}
.doc pre {
  margin-top: var(--sp-5);
  padding: var(--sp-6);
  border-radius: var(--radius-md);
  background: var(--bg-dark);
  color: var(--text-on-dark);
  overflow-x: auto;
  font-family: var(--mono);
  font-size: var(--fs-small);
  line-height: 1.65;
}
.doc pre code { background: none; box-shadow: none; color: inherit; padding: 0; }
.doc .tabla-wrap { margin-top: var(--sp-6); }

.doc__resumen {
  margin: var(--sp-8) 0 0;
  padding: clamp(20px, 2.4vw, 30px);
  border-radius: var(--radius-card);
  background: var(--bg-card);
  box-shadow: inset 0 0 0 1px var(--border), var(--shadow-sm);
}
.doc__resumen p:first-child { margin-top: 0; }

.doc__nota {
  margin-top: var(--sp-6);
  padding: var(--sp-5) var(--sp-6);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--gold);
  background: var(--gold-soft);
}
.doc__nota p { margin-top: var(--sp-3); }
.doc__nota p:first-child { margin-top: 0; }
.doc__nota b { color: var(--text-heading); }

/* Índice del documento */
.doc__toc {
  margin: var(--sp-10) 0 0;
  padding: var(--sp-6) var(--sp-8);
  border-radius: var(--radius-card);
  background: var(--bg-2);
  box-shadow: inset 0 0 0 1px var(--border);
}
.doc__toc h2 {
  margin: 0 0 var(--sp-4);
  padding: 0;
  border: 0;
  font: var(--fw-semibold) var(--fs-micro)/1 var(--font-sans);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}
.doc__toc ol { margin: 0; padding-left: 1.3em; }
.doc__toc a { color: var(--text-heading); text-underline-offset: 3px; }


/* ############################################################
   12 · REDISEÑO CORPORATIVO — edición «Acero y Cobre»
   Encargo del 25 de agosto de 2026: «otra paleta, otro diseño, algo
   más profesional y corporativo, manteniendo la temática».

   Este estrato se carga el último y gana por especificidad a la capa
   «burbuja» de `tokens.css`. No se toca `global.css` ni `bloques.css`,
   y el esqueleto de 12 bloques, su orden y sus textos siguen intactos:
   lo que cambia es la carrocería.

   QUÉ CAMBIA Y POR QUÉ
   1. PALETA. El verde botella + crema + oro era el traje de la web
      residencial de origen. Un grupo de fit-out que firma penalizaciones
      en 14 países se lee mejor en gris acero y azul técnico, con el
      cobre reservado a los sellos de certificación. Todos los pares de
      contraste se han recalculado: el peor queda en 4,92:1 (AA).
   2. GEOMETRÍA. Fuera la burbuja: los paneles flotantes con radio de
      38 px y la cápsula de cabecera eran el acabado de un catálogo de
      reformas. Los bloques pasan a sangre completa y los radios bajan a
      3-8 px. Precisión, no simpatía.
   3. CABECERA. La cápsula flotante obligaba a un logotipo de 200 px de
      ancho con una línea de 5,6 px ilegible, y a que dos entradas del
      menú rompiesen a dos líneas. Barra plana de 76 px, logotipo nuevo
      más estrecho, menú a una línea y CTA corto.
   4. HERO. Ya no es media pantalla de rejilla vacía: es una fotografía
      de recepción corporativa a sangre bajo velo de tinta, con el
      enrutador encima como tarjeta de papel. Es también el LCP, y por
      eso lleva `fetchpriority="high"`.
   5. PROYECTOS. Se corrige el fallo que rompía los textos (ver 12.7) y
      las seis fichas dejan de ser columnas de 330 px: pasan a filas
      editoriales a ancho completo con la foto alternando de lado.
   ############################################################ */


/* ============================================================
   12.1 · PALETA — «Acero y Cobre»
   60 gris acero / 30 tinta / 10 azul técnico. El cobre no es un
   sexto color: ocupa exactamente el hueco que tenía el oro (sellos
   de certificación y cuño de garantía), ni un sitio más.
   ============================================================ */
:root {
  /* Papel y superficies */
  --page:        #0B1620;
  --page-2:      #0D1A24;
  --bg-1:        #F7F8F9;
  --bg-2:        #ECEFF2;
  --bg-3:        #E3E8EC;
  --bg-card:     #FFFFFF;
  --bg-dark:     #0D1A24;
  --bg-dark-2:   #17293A;

  --rgb-bg-1:    247, 248, 249;
  --rgb-bg-2:    236, 239, 242;
  --rgb-bg-card: 255, 255, 255;
  --rgb-bg-dark: 13, 26, 36;

  /* Tinta */
  --text-heading:       #0C1922;   /* 16,8:1 sobre --bg-1 */
  --text-body:          #48555F;   /* 7,2:1 */
  --text-muted:         #57646F;   /* 5,7:1 · 4,9:1 sobre --bg-3 */
  --text-faint:         #57646F;
  --text-on-dark:       #EAF0F5;   /* 15,4:1 sobre --bg-dark */
  --text-on-dark-muted: #A3B6C4;   /* 8,4:1 */

  /* Filetes */
  --border:        rgba(12, 25, 34, 0.12);
  --border-solid:  #DDE3E8;
  --border-strong: #C3CCD4;
  --border-dark:   rgba(234, 240, 245, 0.16);
  --ghost-number:  #E1E6EB;
  --rule:          rgba(12, 25, 34, 0.13);
  --rule-strong:   rgba(12, 25, 34, 0.26);
  --rule-dark:     rgba(234, 240, 245, 0.18);

  /* Estructura */
  --accent:            #0C1922;
  --accent-600:        #22323D;
  --accent-soft:       rgba(12, 25, 34, 0.05);
  --accent-softer:     rgba(12, 25, 34, 0.026);
  --accent-ring:       rgba(20, 86, 143, 0.24);
  --accent-fade:       rgba(12, 25, 34, 0);
  --accent-halo:       rgba(12, 25, 34, 0.07);
  --accent-halo-strong:rgba(219, 168, 106, 0.20);

  /* El único color saturado: el del botón */
  --cta:          #14568F;   /* blanco encima: 7,6:1 */
  --cta-hover:    #0F4272;   /* 10,3:1 */
  --cta-contrast: #FFFFFF;
  --cta-soft:     rgba(20, 86, 143, 0.09);
  --cta-ring:     rgba(20, 86, 143, 0.28);
  --cta-fade:     rgba(20, 86, 143, 0);
  --cta-glow:     rgba(12, 40, 68, 0.26);
  --cta-glow-strong: rgba(12, 40, 68, 0.36);

  /* Cobre — donde antes iba el oro */
  --gold:        #9A5A1E;
  --gold-bright: #DBA86A;
  --gold-soft:   rgba(154, 90, 30, 0.09);
  --gold-ring:   rgba(154, 90, 30, 0.28);
  --gold-ink:    #7A4415;
  --star:        #9A5A1E;

  /* Texturas */
  --noise-opacity: 0.022;
  --noise-opacity-dark: 0.040;
  --grid-line:      rgba(12, 25, 34, 0.045);
  --grid-line-fine: rgba(12, 25, 34, 0.05);

  --marca-agua: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23dba86a' stroke-opacity='0.5' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 27V9l12-4 12 4v18'/%3E%3Cpath d='M4 27h24'/%3E%3Cpath d='M12 27v-8h8v8'/%3E%3C/svg%3E");

  /* Cristal de la cabecera */
  --glass-bg:        rgba(255, 255, 255, 0.90);
  --glass-bg-stuck:  rgba(255, 255, 255, 0.96);
  --glass-bg-strong: rgba(255, 255, 255, 0.97);
  --glass-border:    rgba(12, 25, 34, 0.10);

  /* Sombras: mucho más contenidas. Una web corporativa no levita. */
  --shadow-xs:    0 1px 1px rgba(12, 25, 34, 0.04);
  --shadow-sm:    0 1px 2px rgba(12, 25, 34, 0.05);
  --shadow-card:  0 1px 3px rgba(12, 25, 34, 0.06);
  --shadow-hover: 0 10px 26px -14px rgba(12, 25, 34, 0.22);
  --shadow-float: 0 24px 54px -28px rgba(12, 25, 34, 0.32);
  --shadow-glass: 0 1px 0 rgba(12, 25, 34, 0.07);
  --shadow-panel: none;

  /* Geometría: 3-8 px. Ni un círculo, ni una cápsula. */
  --radius-panel:    0px;
  --radius-panel-in: 6px;
  --radius-xl:       8px;
  --radius-card:     6px;
  --radius-md:       5px;
  --radius-sm:       4px;
  --radius-btn:      4px;
  --radius-pill:     4px;
  --radius-round:    4px;

  --header-h: 76px;
  --measure-h1: 17ch;
}

/* Los degradados heredados llevaban el verde codificado. */
:root {
  --grad-hero:
    linear-gradient(180deg, var(--bg-1) 0%, var(--bg-1) 62%, var(--bg-2) 100%);
  --grad-cta:
    linear-gradient(168deg, var(--bg-2) 0%, var(--bg-1) 58%, var(--bg-2) 100%);
  --grad-dark:
    linear-gradient(158deg, #10202C 0%, var(--bg-dark) 52%, #091420 100%);
  --grad-magnet:
    linear-gradient(150deg, var(--bg-card) 0%, var(--bg-1) 100%);
  --grad-burbuja: none;
}


/* ============================================================
   12.2 · FUERA LA BURBUJA — la página vuelve a sangre
   ============================================================ */
html, html body { background-color: var(--bg-1); }
html body::before,
html body::after { display: none !important; }

body > .section,
body > .section.section--dark,
body > .section.section--bg1,
body > .section.section--bg2,
body > .section.section--grad,
body > .site-footer {
  margin: 0;
  border-radius: 0;
  box-shadow: none;
}
body > .section:first-of-type { margin-top: 0; }

/* La cabecera deja de ser cápsula flotante: barra plana con filete. */
body .site-header,
body .site-header.is-stuck {
  top: 0;
  margin: 0;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  box-shadow: none;
}
body .site-header.is-stuck { box-shadow: 0 1px 0 rgba(12, 25, 34, 0.06); }

/* Barra fija de móvil: a sangre, sin marco. */
@media (max-width: 767px) {
  body .sticky-cta {
    left: 0; right: 0;
    bottom: env(safe-area-inset-bottom, 0px);
  }
  body .sticky-cta a { border-radius: var(--radius-btn); }
  body > .site-footer { margin-bottom: 0; }
}

/* La palabra marcada del H1: filete grueso por debajo, no cápsula.
   Es la marca de un rotulador sobre un documento, que es lo que
   hace un director de proyecto con un contrato. */
body .mark {
  padding: 0 0 0.04em;
  margin-inline: 0;
  border-radius: 0;
  background: none;
  box-shadow: inset 0 -0.14em 0 var(--cta-ring);
}
body .hero .mark { box-shadow: inset 0 -0.14em 0 rgba(219, 168, 106, 0.55); }

/* Se deshacen las cápsulas y los redondos de la capa «burbuja». */
body .btn,
body .btn--compact,
body .sticky-cta a,
body .chip,
body .mockup__titulo,
body .dolor__etiqueta,
body .magnet__sello,
body .sello,
body .comparador__etq,
body .comparador__tirador,
body .opinion__foto,
body .paso__nodo,
body .faq__chevron,
body .servicio__icono-caja,
body .magnet__check,
body .puerta__icono,
body .puerta__chev,
body .caso__sector,
body .cert,
body .acredit__i,
body .tag-sys { border-radius: var(--radius-sm); }

body .garantia__grid,
body .magnet,
body .cta-final__caja,
body .comparador,
body .router,
body .filtros,
body .caso,
body .servicio,
body .kpi { border-radius: var(--radius-panel-in); }

/* El punto vivo del rótulo: cuadrado de 1 px de radio. `docs/09` §3
   prohíbe los círculos, y aquí ya no hay ninguna razón para saltárselo. */
body .rotulo-vivo__punto { border-radius: 1px; }


/* ============================================================
   12.3 · CABECERA — proporciones
   El problema no era el alto: era que 200 px de logotipo + 5 anclas
   + un CTA de 30 caracteres no caben en 1200 px. Se estrecha el
   logotipo (marca + nombre, sin la línea de 5,6 px que nadie podía
   leer), el menú va a una línea y el CTA baja a dos palabras.
   ============================================================ */
body .site-header__inner { gap: var(--sp-6); }
body .site-header__logo { height: 34px; }

@media (min-width: 940px) {
  body .site-nav { gap: clamp(18px, 2vw, 30px); margin-inline: auto; }
}
body .site-nav a {
  white-space: nowrap;
  font-size: 0.9375rem;
  font-weight: var(--fw-medium);
  letter-spacing: -0.005em;
  padding: 8px 0;
  color: var(--text-body);
}
body .site-nav a::after { bottom: 0; height: 2px; background: var(--cta); }
body .site-nav a:hover { color: var(--cta); }

body .site-header .btn--primary {
  min-height: 44px;
  padding-inline: var(--sp-5);
  box-shadow: none;
  font-size: var(--fs-small);
}
body .site-header .btn--primary:hover { box-shadow: none; transform: none; }

/* Barra de región: filete inferior propio y tipografía más pequeña. */
body .regionbar {
  border-bottom: 1px solid rgba(234, 240, 245, 0.10);
  font-size: 0.75rem;
}


/* ============================================================
   12.4 · HERO — fotografía, no rejilla
   La mitad izquierda era texto sobre una cuadrícula vacía y el H1
   rompía a cinco líneas. Ahora el bloque entero es una recepción
   corporativa velada en tinta, el titular va en blanco sobre ella y
   el enrutador se apoya encima como una tarjeta de papel. La foto
   es el LCP declarado.
   ============================================================ */
.hero--foto {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--bg-dark);
  padding-top: clamp(56px, 6vw, 92px);
  padding-bottom: clamp(56px, 6vw, 96px);
}
.hero--foto::before { content: none; }

.hero__fondo {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.hero__fondo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 46%;
  display: block;
}
/* Doble velo: uno plano que garantiza el contraste del texto en el
   peor píxel de la foto, y uno direccional que abre la esquina
   inferior derecha, donde no hay texto. */
.hero__fondo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(102deg,
      rgba(9, 20, 29, 0.955) 0%,
      rgba(9, 20, 29, 0.900) 34%,
      rgba(9, 20, 29, 0.760) 62%,
      rgba(9, 20, 29, 0.640) 100%),
    linear-gradient(180deg,
      rgba(9, 20, 29, 0.45) 0%,
      rgba(9, 20, 29, 0) 38%,
      rgba(9, 20, 29, 0.30) 100%);
}
@media (max-width: 979px) {
  .hero__fondo::after {
    background: linear-gradient(180deg,
      rgba(9, 20, 29, 0.90) 0%,
      rgba(9, 20, 29, 0.94) 56%,
      rgba(9, 20, 29, 0.97) 100%);
  }
}

.hero--foto .hero__grid {
  align-items: center;
  gap: clamp(36px, 4.5vw, 72px);
}
@media (min-width: 1000px) {
  .hero--foto .hero__grid {
    grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
    min-height: min(660px, calc(92svh - var(--header-h)));
  }
}
.hero--foto h1 {
  color: var(--text-on-dark);
  max-width: 15ch;
  letter-spacing: -0.022em;
}
.hero--foto .hero__lead {
  color: #C9D6E0;
  max-width: 48ch;
}
.hero--foto .rotulo-vivo {
  color: var(--text-on-dark-muted);
  border-bottom-color: rgba(234, 240, 245, 0.22);
}
.hero--foto .rotulo-vivo b { color: var(--text-on-dark); }
.hero--foto .rotulo-vivo__punto { background: var(--gold-bright); }

/* La microcopia de penalización pasa de párrafo suelto a nota con
   filete de cobre: es el dato que sostiene toda la promesa. */
.hero--foto .risk {
  margin-top: var(--sp-6);
  padding: 12px 0 12px 16px;
  border-left: 2px solid var(--gold-bright);
  color: #BFCEDA;
  max-width: 46ch;
}

/* Pie de credenciales del hero: sustituye al vacío que dejaba la
   rejilla, y da al primer pliegue tres cifras verificables. */
.hero__zocalo {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(20px, 3vw, 48px);
  margin-top: clamp(32px, 3.6vw, 52px);
  padding-top: var(--sp-6);
  border-top: 1px solid rgba(234, 240, 245, 0.18);
}
.hero__zocalo div { min-width: 0; }
.hero__zocalo b {
  display: block;
  font: var(--fw-semibold) clamp(1.375rem, 1.1rem + 1.1vw, 1.75rem)/1.1 var(--font-serif);
  color: var(--text-on-dark);
  font-variant-numeric: tabular-nums;
}
.hero__zocalo span {
  display: block;
  margin-top: 5px;
  font: var(--fw-medium) var(--fs-micro)/1.45 var(--font-sans);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-on-dark-muted);
}
@media (min-width: 1000px) { .hero__zocalo { display: none; } }

/* El enrutador, encima de la foto, es papel opaco. */
.hero--foto .router {
  background: var(--bg-card);
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}


/* ============================================================
   12.5 · ENRUTADOR — acabado de instrumento
   ============================================================ */
.router__cab { border-bottom: 1px solid var(--border); }
.puerta {
  border-radius: var(--radius-sm);
  transition: background 150ms var(--ease), box-shadow 150ms var(--ease);
}
.puerta:hover {
  background: var(--cta-soft);
  box-shadow: inset 0 0 0 1px var(--cta-ring);
}
.puerta__icono { background: var(--bg-2); color: var(--text-heading); }
.puerta:hover .puerta__icono { background: var(--cta); color: #fff; }


/* ============================================================
   12.6 · BLOQUES CLAROS — menos caja, más filete
   «No todo tan cuadriculado»: las tarjetas dejan de ser cajas con
   sombra flotante y pasan a superficies con un filete de 1 px. El
   ritmo lo llevan los filetes y el aire, no los contornos.
   ============================================================ */
.kpis { gap: 0; }
.kpi {
  border-radius: 0;
  background: none;
  box-shadow: none;
  border-left: 1px solid var(--rule);
  padding: var(--sp-2) 0 var(--sp-2) clamp(20px, 2.2vw, 32px);
}
.kpi:first-child { border-left: 0; padding-left: 0; }
@media (max-width: 720px) {
  .kpi { border-left: 0; border-top: 1px solid var(--rule); padding: var(--sp-5) 0 0; }
  .kpi:first-child { border-top: 0; padding-top: 0; }
}

.acredit__i {
  background: var(--bg-card);
  box-shadow: inset 0 0 0 1px var(--border);
  color: var(--text-body);
}
.acredit__i svg { color: var(--cta); }

.servicio { box-shadow: inset 0 0 0 1px var(--border); }
.servicio:hover { box-shadow: inset 0 0 0 1px var(--border-strong), var(--shadow-hover); }
body .servicio__icono-caja { background: var(--accent); }

.marcas__fila img { filter: grayscale(1) contrast(0.9); opacity: 0.55; }


/* ============================================================
   12.7 · PROYECTOS — el fallo y el rediseño

   EL FALLO. `.impacto li` era una rejilla de dos columnas
   (`16px 1fr`) con TRES hijos: el <svg>, el <b> y el texto suelto.
   Un nodo de texto suelto dentro de una rejilla es un ítem anónimo,
   así que caía en la segunda fila, columna 1: dentro de una pista de
   16 px de ancho. Resultado: el impacto de negocio de las seis fichas
   se leía en vertical, una letra por línea. Se resuelve sacando el
   icono del flujo, que además es indiferente al marcado.

   EL REDISEÑO. Seis fichas en columnas de 330 px obligaban a partir
   párrafos de 40 palabras en renglones de seis. Pasan a filas a ancho
   completo con la fotografía alternando de lado.
   ============================================================ */
.impacto li {
  display: block;
  position: relative;
  padding-left: 26px;
}
.impacto li svg {
  position: absolute;
  left: 0;
  top: 3px;
  margin-top: 0;
}

.casos { grid-template-columns: 1fr; gap: clamp(20px, 2.4vw, 32px); }
.caso {
  display: grid;
  grid-template-columns: 1fr;
  background: var(--bg-card);
  box-shadow: inset 0 0 0 1px var(--border);
  overflow: hidden;
}
@media (min-width: 900px) {
  .caso { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); }
  /* Las fichas pares invierten el lado de la foto Y el reparto de las
     columnas: si solo se reordena la foto, el texto se queda en la
     pista estrecha y vuelve el problema que veníamos a arreglar. */
  .caso:nth-of-type(even) { grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr); }
  .caso:nth-of-type(even) .caso__foto { order: 2; }
  .caso__foto { aspect-ratio: auto; min-height: 100%; }
}
.caso__foto { background: var(--bg-3); }
@media (max-width: 899px) { .caso__foto { aspect-ratio: 16 / 10; } }

.caso__sector {
  left: 0; top: 18px;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--bg-dark);
  backdrop-filter: none;
  letter-spacing: 0.09em;
}
.caso__cuerpo { padding: clamp(24px, 2.6vw, 40px); }
.caso__meta {
  gap: var(--sp-5);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--rule);
}
.caso__meta svg { color: var(--text-muted); }
.caso h3 {
  margin-top: var(--sp-5);
  font-size: clamp(1.3125rem, 1.15rem + 0.7vw, 1.625rem);
  letter-spacing: var(--ls-serif);
  max-width: 26ch;
}

.dsi { margin-top: var(--sp-6); gap: var(--sp-6) clamp(24px, 2.6vw, 40px); }
@media (min-width: 1100px) {
  .dsi { grid-template-columns: 1fr 1fr; }
  .dsi__b--i { grid-column: 1 / -1; }
}
.dsi__b { padding-left: var(--sp-4); border-left-width: 1px; border-left-color: var(--border-strong); }
.dsi__b--i {
  padding: var(--sp-5) var(--sp-5) var(--sp-5) var(--sp-6);
  border-left: 2px solid var(--cta);
  background: var(--bg-1);
}
.dsi__b p { font-size: var(--fs-body); line-height: 1.62; }

.impacto { gap: 10px; }
@media (min-width: 700px) { .impacto { grid-template-columns: 1fr 1fr; gap: 10px var(--sp-6); } }
.impacto li { font-size: var(--fs-small); }

.caso__pie { margin-top: var(--sp-6); padding-top: var(--sp-5); }
.tag-sys { border-radius: var(--radius-sm); }

/* Filtros: banda de herramienta, no tarjeta flotante. */
.filtros {
  background: var(--bg-card);
  box-shadow: inset 0 0 0 1px var(--border);
  margin-bottom: clamp(28px, 3vw, 44px);
}
.chip { min-height: 36px; padding: 7px 14px; font-weight: var(--fw-medium); }
.chip[aria-pressed="true"] { font-weight: var(--fw-semibold); }
.filtros__et { min-width: 104px; letter-spacing: 0.09em; }


/* ============================================================
   12.8 · BLOQUES OSCUROS Y PIE
   ============================================================ */
.section--dark { background: var(--grad-dark); }
.site-footer { background: var(--bg-dark); }
.section--dark .btn--primary { box-shadow: none; }

/* El cuño de garantía: marco de cobre sobre tinta. */
.sello, .magnet__sello { letter-spacing: 0.09em; }


/* ============================================================
   12.9 · BOTONES — rectos, sin halo
   ============================================================ */
.btn { letter-spacing: -0.005em; }
.btn--primary { box-shadow: var(--shadow-sm); }
.btn--primary:hover { box-shadow: var(--shadow-hover); transform: translateY(-1px); }
.btn--secondary { backdrop-filter: none; }


/* ============================================================
   12.10 · FORMULARIO Y CAMPOS
   ============================================================ */
.campo input, .campo select, .campo textarea { border-radius: var(--radius-sm); }
.campo input:focus, .campo select:focus, .campo textarea:focus { border-color: var(--cta); }


/* ============================================================
   12.11 · FLECOS DEL CAMBIO DE PALETA
   Piezas que daban por hecho que por debajo del papel había verde.
   ============================================================ */

/* La barra de región vivía sobre el verde de la ventana con un fondo
   translúcido del 5,5 %. Con la página a sangre sobre papel claro se
   quedaba en nada: pasa a barra de utilidad opaca en tinta. */
body .regionbar {
  margin: 0;
  padding: 9px var(--container-pad);
  border-radius: 0;
  background: var(--bg-dark);
  box-shadow: none;
}
body .regionbar select {
  border-radius: var(--radius-sm);
  background-color: rgba(255, 255, 255, 0.09);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.20);
}
body .regionbar select option { color: #0C1922; background: #fff; }

/* La animación del rotulador seguía pintando la cápsula de acento
   por detrás de la palabra marcada del H1: se convierte en el mismo
   filete grueso del resto de la web. */
@media (prefers-reduced-motion: no-preference) {
  body .hero h1 .mark::before {
    inset: auto 0 0 0;
    height: 0.14em;
    border-radius: 0;
    background: rgba(219, 168, 106, 0.55);
    box-shadow: none;
  }
}

/* Titulares: reparto de líneas equilibrado. Con el H1 a 15ch el
   navegador dejaba «En 14 países.» solo en la quinta línea. */
h1, h2, .hero--foto h1 { text-wrap: balance; }
.hero--foto h1 { max-width: 17ch; }
.lead, .section__head p { text-wrap: pretty; }

/* --- La palabra marcada: un subrayado a ras de línea base, no una
       cápsula flotando por debajo de los descendentes. --- */
body .mark {
  position: relative;
  z-index: 0;
  padding: 0;
  margin-inline: 0;
  background: none;
  box-shadow: none;
}
body .mark::before,
body .hero h1 .mark::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0.15em;
  top: auto;
  height: 0.075em;
  z-index: -1;
  border-radius: 0;
  background: var(--cta-ring);
  box-shadow: none;
}
body .hero .mark::before { background: rgba(219, 168, 106, 0.85); }

/* --- El H1 del Hero: cuatro líneas, no cinco. --- */
.hero--foto h1 {
  font-size: clamp(2.25rem, 1.45rem + 3.2vw, 3.5rem);
  max-width: 19ch;
  line-height: 1.08;
}


/* ============================================================
   12.12 · AJUSTES FINOS DEL PORTFOLIO Y DE LOS RÓTULOS TÉCNICOS
   ============================================================ */

/* El chip de dato de sistema iba en monoespaciada CON 0,04 em de
   interletrado añadido: en una mono eso es el doble de aire del que
   ya trae de serie, y «GMP 8,4 M €» se leía deletreado. */
.tag-sys { letter-spacing: 0; padding: 5px 10px 5px 9px; }
.tag-sys::before { border-radius: 1px; }

/* El azul técnico de los rótulos de sistema estaba a un paso del
   azul del botón. Se retira a grafito para que el único color
   saturado siga siendo el del CTA. */
:root {
  --tech:      #3E4E5A;
  --tech-soft: rgba(62, 78, 90, 0.07);
  --tech-ring: rgba(62, 78, 90, 0.24);
  --tech-ink:  #33434E;
}

/* En las fichas pares la foto está a la derecha: el marbete de sector
   se va con ella al canto exterior. */
@media (min-width: 900px) {
  .caso:nth-of-type(even) .caso__sector {
    left: auto;
    right: 0;
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  }
}


/* ============================================================
   12.13 · MATRIZ DE PERMISOS SOBRE BLOQUE OSCURO
   La tabla RBAC vive dentro de `#plataforma`, que es un bloque
   oscuro, pero pintaba con los tokens de papel: los nombres de rol
   salían en tinta sobre tinta. Venía de origen; se corrige aquí.
   ============================================================ */
.section--dark .tabla-corp caption,
.section--dark .tabla-corp thead th { color: var(--text-on-dark-muted); }
.section--dark .tabla-corp tbody th { color: var(--text-on-dark); }
.section--dark .tabla-corp td { color: #C6D4DE; }
.section--dark .tabla-corp th,
.section--dark .tabla-corp td { border-bottom-color: rgba(234, 240, 245, 0.14); }
.section--dark .tabla-corp thead th { border-bottom-color: rgba(234, 240, 245, 0.28); }

/* Los tres estados del permiso, recalculados sobre tinta: todos por
   encima de 4,5:1 contra `--bg-dark`. */
.section--dark .perm { border-radius: var(--radius-sm); }
.section--dark .perm--si  { background: rgba(126, 196, 154, 0.14); color: #8FD3AC; }
.section--dark .perm--rev { background: rgba(219, 168, 106, 0.15); color: #E3B87F; }
.section--dark .perm--no  { background: rgba(226, 138, 138, 0.13); color: #E9A0A0; }

/* El resto de la paleta de estado, también en versión papel. */
:root {
  --ok:        #1B6340;
  --ok-soft:   rgba(27, 99, 64, 0.10);
  --warn:      #7E5A10;
  --warn-soft: rgba(126, 90, 16, 0.10);
  --no:        #8A2F2F;
  --no-soft:   rgba(138, 47, 47, 0.09);
}


/* ============================================================
   12.14 · LOS DEGRADADOS QUE LLEVABAN EL VERDE ESCRITO A MANO
   `tokens.css` pinta seis fondos con rgba() literales del verde y del
   oro de la web de origen. Como no son tokens, la paleta nueva no los
   alcanza: se repintan uno a uno en azul técnico y cobre.
   ============================================================ */
body #garantia {
  background-image:
    radial-gradient(820px 480px at 10% 2%,  rgba(219, 168, 106, 0.13), transparent 62%),
    radial-gradient(760px 520px at 96% 98%, rgba(31, 96, 158, 0.34), transparent 64%),
    linear-gradient(180deg,
      rgba(var(--rgb-bg-dark), 0.972) 0%,
      rgba(var(--rgb-bg-dark), 0.958) 45%,
      rgba(var(--rgb-bg-dark), 0.940) 100%),
    url("../img/amb/fondo-oscuro.webp?v=20260825a");
}
body #cta-final {
  background-image:
    radial-gradient(880px 480px at 12% 0%, rgba(20, 86, 143, 0.09), transparent 60%),
    linear-gradient(180deg,
      rgba(var(--rgb-bg-1), 0.945) 0%,
      rgba(var(--rgb-bg-2), 0.900) 100%),
    url("../img/amb/amb-cocina-03.webp?v=20260825a");
  background-size: auto, auto, cover;
  background-position: center, center, center 55%;
  background-repeat: no-repeat;
}
body #faqs {
  background-image:
    linear-gradient(180deg,
      rgba(var(--rgb-bg-1), 0.992) 0%,
      rgba(var(--rgb-bg-1), 0.988) 62%,
      rgba(var(--rgb-bg-1), 0.994) 100%),
    url("../img/amb/amb-salon-01.webp?v=20260825a");
}
body .cta-final .cta-final__caja {
  box-shadow: var(--shadow-float), inset 0 0 0 1px var(--border);
}
body main > .section:first-of-type:not(.hero) {
  background-image:
    radial-gradient(900px 520px at 12% 0%, rgba(20, 86, 143, 0.06), transparent 62%),
    radial-gradient(700px 420px at 92% 4%, rgba(154, 90, 30, 0.045), transparent 60%);
}
body .legal .volver:hover { background: var(--cta-soft); }
@media (min-width: 900px) {
  .prueba .opinion:first-child {
    background-image:
      radial-gradient(120% 90% at 4% 100%, rgba(20, 86, 143, 0.05), transparent 62%),
      radial-gradient(90% 70% at 96% 0%, rgba(154, 90, 30, 0.045), transparent 60%);
  }
}
/* El marbete de sector del portfolio llevaba el verde tinta escrito. */
.caso__sector { background: var(--bg-dark); }

/* Los dos CTA del cierre iban a `flex: 1 1 0`, es decir, a mitad y
   mitad del ancho de la tarjeta. Con la etiqueta larga del primero
   («Abrir expediente con un Account Manager») eso obligaba a partir
   el botón en dos líneas. Se les deja tomar su ancho natural. */
.cta-final .cta-group--par > .btn { flex: 0 1 auto; }
.cta-final .cta-group--par { flex-wrap: wrap; justify-content: center; }


/* ============================================================
   12.15 · PIE — reparto de las cinco columnas
   Las pistas iban en `fr` puro. El mínimo automático de una pista
   `fr` es su contenido mínimo, y las columnas de contacto llevan
   direcciones de correo que no parten: se quedaban con el ancho que
   pedían y estrangulaban la columna de marca a 108 px, con la ficha
   de empresa saliendo a palabra por línea y el logotipo recortado.
   ============================================================ */
@media (min-width: 1100px) {
  body .site-footer__grid {
    grid-template-columns:
      minmax(0, 1.75fr) minmax(0, 0.85fr) minmax(0, 0.95fr)
      minmax(0, 1.35fr) minmax(0, 1.25fr);
    gap: var(--sp-8);
  }
  body .site-footer__grid > * + * { padding-left: var(--sp-8); }
}
body .site-footer__grid a,
body .site-footer__grid p { overflow-wrap: break-word; }
body .site-footer__logo { height: 30px; width: auto; max-width: 100%; }

/* Las tres direcciones de correo del pie marcaban el ancho mínimo de
   su columna y se comían el filete de separación. */
@media (min-width: 1100px) {
  body .site-footer__grid {
    grid-template-columns:
      minmax(0, 1.7fr) minmax(0, 0.8fr) minmax(0, 0.9fr)
      minmax(0, 1.5fr) minmax(0, 1.15fr);
  }
}
body .site-footer__datos a { font-size: var(--fs-small); }


/* ============================================================
   12.16 · LA CABECERA NO CABE ENTRE 940 Y 1060 px
   `bloques.css` saca el menú de anclas a partir de 940 px. Con el
   logotipo, cinco entradas y el botón, a 940 px hacen falta ~890 px
   de contenido dentro de un contenedor de 860: el CTA se salía de la
   ventana. El menú entra ahora a 1060 px, que es donde de verdad cabe.
   ============================================================ */
@media (max-width: 1059px) {
  body .site-nav { display: none; }
}
@media (min-width: 1060px) and (max-width: 1199px) {
  body .site-nav { gap: 18px; }
  body .site-nav a { font-size: 0.875rem; }
  body .site-header .btn--primary { padding-inline: var(--sp-4); }
}

/* Los logotipos de cuenta global, al 55 % sobre papel gris, se leían
   como una mancha. Suben a 70 % y conservan el gris de la regla de
   «los logos van en tinta». */
.marcas__fila img { opacity: 0.7; }