/* ==========================================================================
   Página VITTA IA (plantilla templates/page-vitta-ia.html; patrones
   patterns/vitta-ia-*.php). Solo se carga en esa plantilla
   (vitta_enqueue_shared_styles()).

   Maqueta: C:\Vitta web\VITTA-maqueta-navegable.html, #/vitta-ia (1440px).
   Manda en composición y orden; el proyecto, en el sistema:
   - Satoshi en todo (la maqueta usa Manrope e IBM Plex Mono); su 800 pasa a
     700, el peso más alto que usa la web en titulares.
   - Colores solo de shared/tokens.css. Los de la maqueta que se salen van
     al token más cercano, o derivados de él con color-mix() como en
     bomba.css (lista completa en docs/vitta-ia-estado.md).
   - Filetes y bordes: la maqueta (#e1e5ea, 1,27:1; celeste al 25-45 % sobre
     navy) no llega a 3:1; aquí se suben, medido sobre píxeles.
   ========================================================================== */

/* ── Cabecera del sitio en navy, solo en esta página (como la maqueta) ──
   Copia de las reglas de bomba.css (body.page-template-page-bomba), con
   el selector de esta plantilla: decidido por Jorge en la tanda V1 copiarla
   y no compartirla todavía (deuda anotada en docs/vitta-ia-estado.md). */
body.page-template-page-vitta-ia .app-header {
  background: var(--navy);
  border-bottom: 1px solid color-mix(in srgb, var(--teal) 22%, var(--navy));
}
body.page-template-page-vitta-ia .app-header .app-header__logo img { filter: brightness(0) invert(1); }
body.page-template-page-vitta-ia .app-header .app-header__nav .wp-block-navigation-item__content {
  color: rgba(255, 255, 255, .7);
  background: none;
}
body.page-template-page-vitta-ia .app-header .app-header__nav .wp-block-navigation-item__content:hover { color: var(--white); }
body.page-template-page-vitta-ia .app-header .lang-switch__link { color: rgba(255, 255, 255, .75); }
body.page-template-page-vitta-ia .app-header .lang-switch__link:hover,
body.page-template-page-vitta-ia .app-header .lang-switch__link.is-current { color: var(--white); }
body.page-template-page-vitta-ia .app-header .lang-switch__link + .lang-switch__link { border-left-color: rgba(255, 255, 255, .35); }
body.page-template-page-vitta-ia .app-header .app-header__access .wp-block-button__link {
  border-color: rgba(255, 255, 255, .55);
  color: var(--white);
}
body.page-template-page-vitta-ia .app-header .app-header__access .wp-block-button__link:hover { background: rgba(255, 255, 255, .12); }
body.page-template-page-vitta-ia .app-header .app-header__nav .wp-block-navigation__responsive-container-open { color: var(--white); }
body.page-template-page-vitta-ia .app-header .app-header__nav .is-menu-open .wp-block-navigation-item__content { color: var(--white); }

/* ── Colores de la página (todos desde los tokens) ──────────────────────
   --navy-hondo  #171730 de la maqueta (fondo de «El conocimiento…»): la
                 misma mezcla que la banda de cifras de Bombas.
   --navy-tarjeta #1D1D3A (tarjetas sobre navy).
   --texto-claro #C6C8DC (texto secundario sobre navy): blanco al 80 %.
   --filete-claro #E1E5EA/#D5DAE1/#B9BFC7 (1,27-1,85:1) → navy al 55 %.
   --filete-oscuro celeste al 25-45 % sobre navy → celeste al 60 %. */
.vitta-ia-pagina__contenido {
  --navy-hondo: color-mix(in srgb, var(--navy) 66%, #000);
  --navy-tarjeta: color-mix(in srgb, var(--navy) 83%, #000);
  --texto: color-mix(in srgb, var(--navy) 85%, var(--white));
  --texto-suave: color-mix(in srgb, var(--navy) 72%, var(--white));
  --texto-claro: rgba(255, 255, 255, .8);
  --filete-claro: color-mix(in srgb, var(--navy) 55%, var(--white));
  --filete-oscuro: color-mix(in srgb, var(--teal) 60%, transparent);
  /* Flecha de la maqueta (trazo 1,5, 30×14), como máscara: toma el color
     del fondo del pseudoelemento. */
  --flecha: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 14' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath d='M2 7h28M25 2l5 5-5 5'/%3E%3C/svg%3E");
}

/* Las secciones van pegadas: sin el margen entre bloques del flujo. */
.vitta-ia-pagina__contenido > * { margin-block: 0; }
.vitta-ia-pagina__contenido p { color: inherit; }

/* ── Piezas comunes ───────────────────────────────────────────────────── */

/* Antetítulo con el paralelogramo delante. Celeste oscuro sobre blanco;
   celeste sobre navy (ver «El conocimiento…»). */
.vitta-ia-pagina .vitta-ia-antetitulo {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--teal-d);
}
.vitta-ia-antetitulo::before {
  content: '';
  flex: none;
  width: 22px;
  height: 9px;
  background: currentColor;
  transform: skewX(-32deg);
}

/* Rótulo pequeño en mayúsculas, sin paralelogramo. */
.vitta-ia-pagina .vitta-ia-rotulo {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--teal-d);
}

/* Etiqueta de estado («En desarrollo», «En validación»…): sobre navy. */
.vitta-ia-pagina .vitta-ia-estado {
  margin: 0;
  padding: 4px 8px;
  border: 1px solid var(--filete-oscuro);
  border-radius: 2px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--teal);
}

/* Chapa «FASE 1» (rellena) / «FASE 2» (con borde). */
.vitta-ia-pagina .vitta-ia-chapa {
  margin: 0;
  padding: 5px 10px;
  border-radius: 2px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .14em;
  white-space: nowrap;
  color: var(--navy);
  background: var(--teal);
}
.vitta-ia-pagina .vitta-ia-fase--fase2 .vitta-ia-chapa {
  padding: 4px 9px;
  border: 1px solid var(--filete-oscuro);
  background: none;
  color: var(--teal);
}

/* Trama celeste (el motivo de la marca, como en la home y Bombas). */
.vitta-ia-trama {
  background-color: var(--teal);
  background-image: url('/wp-content/themes/vitta-theme/assets/web/fondo-azulclaro.webp');
  background-repeat: repeat;
  color: var(--navy);
}

/* Secciones blancas con cabecera a dos columnas (titular | entrada). */
.vitta-ia-seccion {
  background: var(--white);
  color: var(--navy);
  padding: clamp(48px, 6vw, 88px) var(--space-4);
}
.vitta-ia-seccion__inner {
  max-width: 1312px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.vitta-ia-seccion__inner > *,
.vitta-ia-cabecera > *,
.vitta-ia-cabecera__titulo > * { margin-block: 0; }
.vitta-ia-cabecera { display: grid; gap: var(--space-5); }
.vitta-ia-cabecera__titulo { display: flex; flex-direction: column; gap: 14px; }
@media (min-width: 1024px) {
  .vitta-ia-cabecera {
    grid-template-columns: minmax(0, 700px) minmax(0, 500px);
    justify-content: space-between;
    align-items: end;
    gap: 48px;
  }
}
.vitta-ia-pagina .vitta-ia-titular {
  font-size: clamp(1.75rem, 2.95vw, 2.625rem);
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--navy);
  text-wrap: balance;
}
.vitta-ia-pagina .vitta-ia-cabecera__entrada {
  font-size: 16px;
  line-height: 1.68;
  color: var(--texto-suave);
}

/* Capturas de la aplicación: filete fino y NUNCA por encima de su ancho
   nativo. Tope explícito (--nativo), no width:auto: WordPress pone
   sizes="auto" a las diferidas y con eso Chromium toma como ancho natural
   el de la caja (lección de Bombas, «Control de calidad y trazabilidad»). */
.vitta-ia-img { margin: 0; }
.vitta-ia-img img {
  display: block;
  width: 100%;
  max-width: min(100%, var(--nativo, 100%));
  height: auto;
  border: 1px solid var(--filete-claro);
  border-radius: 4px;
}
.vitta-ia-img--esquema-pozo { --nativo: 1600px; }
.vitta-ia-pagina .vitta-ia-img figcaption {
  margin: 14px 0 0;
  text-align: left;
  font-size: 15px;
  line-height: 1.55;
  color: var(--texto-suave);
}
.vitta-ia-img figcaption strong {
  display: inline-block;
  margin-bottom: 5px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--teal-d);
}

/* ── 1. Portada (#intro) ──────────────────────────────────────────────── */
.vitta-ia-portada {
  background: var(--navy);
  color: var(--white);
  padding: clamp(48px, 6vw, 84px) var(--space-4) clamp(56px, 6vw, 88px);
}
.vitta-ia-portada__inner {
  max-width: 1312px;
  margin: 0 auto;
  display: grid;
  gap: var(--space-7);
}
@media (min-width: 1024px) {
  .vitta-ia-portada__inner {
    grid-template-columns: minmax(0, 730fr) minmax(0, 526fr);
    gap: clamp(40px, 3.9vw, 56px);
    align-items: center;
  }
}
.vitta-ia-portada__inner > *,
.vitta-ia-portada__texto > *,
.vitta-ia-portada__fases > * { margin-block: 0; }
.vitta-ia-portada__texto { display: flex; flex-direction: column; gap: var(--space-5); }

.vitta-ia-portada__marca { gap: 14px; align-items: center; }
.vitta-ia-portada__marca > * { margin: 0; }
.vitta-ia-portada__marca::before {
  content: '';
  flex: none;
  width: 22px;
  height: 9px;
  background: var(--teal);
  transform: skewX(-32deg);
}
.vitta-ia-portada__logo { margin: 0; color: var(--teal); }
.vitta-ia-portada__logo-svg,
.vitta-ia-portada__logo img { display: block; height: 28px; width: auto; }

.vitta-ia-pagina .vitta-ia-portada__titular {
  font-size: clamp(2rem, 3.75vw, 3.375rem);
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--white);
}
.vitta-ia-portada__titular mark { background: none; }
.vitta-ia-pagina .vitta-ia-portada__parrafo {
  font-size: clamp(16px, 1.3vw, 18.5px);
  line-height: 1.64;
  color: var(--texto-claro);
}
.vitta-ia-pagina .vitta-ia-portada__aplica { font-size: 16px; line-height: 1.6; color: var(--teal); }

.vitta-ia-portada__cifra {
  gap: 22px;
  align-items: center;
  padding-top: 20px;
  border-top: 1px solid var(--filete-oscuro);
}
.vitta-ia-portada__cifra > * { margin: 0; }
.vitta-ia-pagina .vitta-ia-portada__cifra-valor {
  flex: none;
  font-size: clamp(34px, 3.1vw, 44px);
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: var(--teal);
}
.vitta-ia-pagina .vitta-ia-portada__cifra-pie { font-size: 15.5px; line-height: 1.5; color: var(--texto-claro); }
.vitta-ia-portada__cifra-pie strong { color: var(--white); font-weight: 700; }
@media (max-width: 479px) {
  .vitta-ia-portada__cifra { flex-wrap: wrap !important; gap: 10px; }
}

/* Tarjetas de fase: pulsables enteras (el ::after del enlace cubre la
   tarjeta); la flecha la pinta el párrafo (↓ fase 1, → fase 2, como en
   la maqueta). */
.vitta-ia-portada__fases { display: flex; flex-direction: column; gap: var(--space-4); }
.vitta-ia-pagina .vitta-ia-portada__rotulo {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--teal);
}
.vitta-ia-fase {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(22px, 2vw, 28px) clamp(20px, 2.1vw, 30px);
  background: var(--navy-tarjeta);
  border: 1px solid var(--filete-oscuro);
  border-radius: 4px;
  color: var(--white);
}
.vitta-ia-fase:hover { border-color: var(--teal); }
.vitta-ia-fase > * { margin-block: 0; }
.vitta-ia-fase__cabeza { gap: 12px; align-items: center; }
.vitta-ia-fase__cabeza > * { margin: 0; }
.vitta-ia-pagina .vitta-ia-fase__titulo {
  font-size: clamp(22px, 1.8vw, 26px);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--white);
}
.vitta-ia-pagina .vitta-ia-fase__texto { font-size: 15.5px; line-height: 1.58; color: var(--texto-claro); }
.vitta-ia-pagina .vitta-ia-fase__enlace {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--teal);
}
.vitta-ia-fase__enlace a { color: inherit; text-decoration: none; }
.vitta-ia-fase__enlace a::after { content: ''; position: absolute; inset: 0; }
.vitta-ia-fase:hover .vitta-ia-fase__enlace a,
.vitta-ia-fase__enlace a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.vitta-ia-fase__enlace a:focus-visible { outline: none; }
.vitta-ia-fase:has(a:focus-visible) { outline: 2px solid var(--teal); outline-offset: 3px; }
.vitta-ia-fase__enlace::after { content: '\2193'; font-size: 1.2em; line-height: 1; }
.vitta-ia-fase--fase2 .vitta-ia-fase__enlace::after { content: '\2192'; }

/* ── 2. «Por qué existe VITTA IA» ────────────────────────────────────── */

/* Tres pasos unidos por flechas: en fila desde 900px, en columna (con la
   flecha girada) por debajo. */
.vitta-ia-pasos { display: grid; gap: 36px; }
@media (min-width: 900px) { .vitta-ia-pasos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px; } }
.vitta-ia-paso {
  position: relative;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px 26px;
  background: var(--bg);
  border: 1px solid var(--filete-claro);
  border-radius: 4px;
}
.vitta-ia-paso > * { margin: 0; }
.vitta-ia-paso + .vitta-ia-paso::before {
  content: '';
  position: absolute;
  left: 26px;
  top: -26px;
  width: 30px;
  height: 14px;
  background: var(--filete-claro);
  -webkit-mask: var(--flecha) center / contain no-repeat;
  mask: var(--flecha) center / contain no-repeat;
  transform: rotate(90deg);
  transform-origin: 0 50%;
  translate: 7px -14px;
}
@media (min-width: 900px) {
  .vitta-ia-paso + .vitta-ia-paso::before {
    left: -37px;
    top: calc(50% - 7px);
    transform: none;
    translate: none;
  }
}
.vitta-ia-pagina .vitta-ia-paso__num { font-size: 12px; font-weight: 700; letter-spacing: .14em; color: var(--teal-d); }
.vitta-ia-pagina .vitta-ia-paso__titulo { font-size: 18px; line-height: 1.25; font-weight: 700; color: var(--navy); }
.vitta-ia-pagina .vitta-ia-paso__texto { font-size: 14.5px; line-height: 1.55; color: var(--texto-suave); }
.vitta-ia-paso--navy { background: var(--navy); border-color: var(--navy); }
.vitta-ia-pagina .vitta-ia-paso--navy .vitta-ia-paso__num { color: var(--teal); }
.vitta-ia-pagina .vitta-ia-paso--navy .vitta-ia-paso__titulo { color: var(--white); }
.vitta-ia-pagina .vitta-ia-paso--navy .vitta-ia-paso__texto { color: var(--texto-claro); }

/* Recuadro «Condiciones extremas» sobre la trama. */
.vitta-ia-extremas {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px clamp(20px, 2.3vw, 32px);
  border-radius: 4px;
}
.vitta-ia-extremas > * { margin: 0; }
@media (min-width: 700px) { .vitta-ia-extremas { flex-direction: row; align-items: center; gap: 28px; } }
.vitta-ia-pagina .vitta-ia-extremas__rotulo {
  flex: none;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--navy);
}
.vitta-ia-pagina .vitta-ia-extremas__texto { font-size: clamp(16px, 1.2vw, 17px); line-height: 1.55; font-weight: 700; color: var(--navy); }

/* ── 3. «La secuencia» ───────────────────────────────────────────────── */
.vitta-ia-secuencia {
  background: var(--bg);
  border-block: 1px solid var(--filete-claro);
  padding: clamp(36px, 4vw, 56px) var(--space-4);
}
.vitta-ia-secuencia__inner { max-width: 1312px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }
.vitta-ia-secuencia__inner > * { margin: 0; }
.vitta-ia-secuencia__fila { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-5); }
.vitta-ia-secuencia__fila > * { margin: 0; }
.vitta-ia-secuencia__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.vitta-ia-secuencia__lista > li {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 20px;
  border: 1px solid var(--filete-claro);
  background: var(--white);
  color: var(--navy);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .12em;
  white-space: nowrap;
}
.vitta-ia-secuencia__lista > li:first-child { background: var(--navy); border-color: var(--navy); color: var(--teal); font-weight: 700; }
.vitta-ia-secuencia__lista > li:last-child { background: var(--teal); border-color: var(--teal); color: var(--navy); font-weight: 700; }
.vitta-ia-secuencia__lista > li + li { margin-top: 34px; }
.vitta-ia-secuencia__lista > li + li::before {
  content: '';
  position: absolute;
  left: 20px;
  top: -32px; /* girada sobre (7,7): ocupa de top a top+30, entre las dos cápsulas */
  width: 30px;
  height: 14px;
  background: var(--filete-claro);
  -webkit-mask: var(--flecha) center / contain no-repeat;
  mask: var(--flecha) center / contain no-repeat;
  transform: rotate(90deg);
  transform-origin: 7px 7px;
}
/* En una fila cuando caben los seis (≈970px de cápsulas y flechas). */
@media (min-width: 1100px) {
  .vitta-ia-secuencia__fila { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
  .vitta-ia-secuencia__lista { flex-direction: row; align-items: center; }
  .vitta-ia-secuencia__lista > li + li { margin: 0 0 0 34px; }
  .vitta-ia-secuencia__lista > li + li::before { left: -32px; top: calc(50% - 7px); transform: none; }
}
.vitta-ia-pagina .vitta-ia-secuencia__final { font-size: 13.5px; line-height: 1.5; color: var(--texto-suave); }

/* ── 4. «El conocimiento detrás de VITTA IA» ─────────────────────────── */
.vitta-ia-conocimiento {
  background: var(--navy-hondo);
  color: var(--white);
  padding: clamp(48px, 6vw, 88px) var(--space-4);
}
.vitta-ia-conocimiento__inner {
  max-width: 1312px;
  margin: 0 auto;
  display: grid;
  gap: var(--space-7);
}
@media (min-width: 1024px) {
  .vitta-ia-conocimiento__inner { grid-template-columns: minmax(0, 520px) minmax(0, 1fr); gap: clamp(48px, 5vw, 72px); align-items: center; }
}
.vitta-ia-conocimiento__inner > *,
.vitta-ia-conocimiento__cifra > *,
.vitta-ia-conocimiento__texto > * { margin-block: 0; }
.vitta-ia-conocimiento__cifra { display: flex; flex-direction: column; gap: var(--space-4); }
.vitta-ia-conocimiento__texto { display: flex; flex-direction: column; gap: 18px; }
.vitta-ia-pagina .vitta-ia-conocimiento .vitta-ia-antetitulo { color: var(--teal); }
.vitta-ia-pagina .vitta-ia-conocimiento__valor {
  font-size: clamp(64px, 7.2vw, 104px);
  line-height: .95;
  font-weight: 700;
  letter-spacing: -0.03em;
  white-space: nowrap;
  color: var(--teal);
}
.vitta-ia-pagina .vitta-ia-conocimiento__pie { font-size: clamp(18px, 1.4vw, 20px); line-height: 1.4; font-weight: 700; color: var(--white); }
.vitta-ia-pagina .vitta-ia-conocimiento__titular {
  font-size: clamp(1.625rem, 2.5vw, 2.25rem);
  line-height: 1.14;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--white);
  text-wrap: balance;
}
.vitta-ia-pagina .vitta-ia-conocimiento__parrafo { font-size: clamp(16px, 1.15vw, 16.5px); line-height: 1.66; color: var(--texto-claro); }
/* Tres rótulos: las líneas entre celdas salen del hueco de 1px de la
   rejilla sobre el fondo del filete (como los pasos de Bombas). */
.vitta-ia-conocimiento__rotulos {
  list-style: none;
  margin: 6px 0 0 !important;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--filete-oscuro);
  border: 1px solid var(--filete-oscuro);
  border-radius: 4px;
  overflow: hidden;
}
@media (min-width: 600px) { .vitta-ia-conocimiento__rotulos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.vitta-ia-conocimiento__rotulos > li {
  margin: 0;
  padding: 16px 18px;
  background: var(--navy-hondo);
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--white);
}

/* ── 5. «Cómo se organiza VITTA IA»: tabla de las dos fases ──────────── */
.vitta-ia-tabla { margin: 0; overflow: visible; }
.vitta-ia-tabla table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--filete-claro);
  border-radius: 4px;
  overflow: hidden;
}
.vitta-ia-pagina .vitta-ia-tabla :is(th, td) {
  border: 0;
  padding: 0;
  text-align: left;
  vertical-align: top;
  font-size: 16px;
  line-height: 1.5;
  color: var(--navy);
}
/* Cabecera: la celda vacía de la esquina en gris; las dos fases, pulsables
   enteras (el enlace llena la celda). */
.vitta-ia-tabla thead td { width: 240px; background: var(--bg); }
.vitta-ia-tabla thead th:nth-child(2) {
  background-color: var(--teal);
  background-image: url('/wp-content/themes/vitta-theme/assets/web/fondo-azulclaro.webp');
  background-repeat: repeat;
}
.vitta-ia-tabla thead th:nth-child(3) { background: var(--navy); }
.vitta-ia-tabla thead a {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  height: 100%;
  padding: 22px 28px;
  font-size: 22px;
  line-height: 1.2;
  font-weight: 700;
  text-decoration: none;
  color: var(--navy);
}
.vitta-ia-tabla thead th:nth-child(3) a { color: var(--white); }
.vitta-ia-tabla thead a:hover span,
.vitta-ia-tabla thead a:hover { text-decoration: underline; text-underline-offset: 3px; }
.vitta-ia-tabla thead a:focus-visible { outline: 2px solid var(--navy); outline-offset: -4px; }
.vitta-ia-tabla thead th:nth-child(3) a:focus-visible { outline-color: var(--teal); }
.vitta-ia-tabla thead strong {
  padding: 5px 10px;
  border-radius: 2px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .14em;
  white-space: nowrap;
  color: var(--teal);
  background: var(--navy);
}
.vitta-ia-tabla thead th:nth-child(3) strong {
  padding: 4px 9px;
  border: 1px solid var(--filete-oscuro);
  background: none;
}
/* Cuerpo: rótulo de fila en gris, celdas con filete a la izquierda. */
.vitta-ia-pagina .vitta-ia-tabla tbody th {
  padding: 20px 24px;
  background: var(--bg);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--teal-d);
}
.vitta-ia-pagina .vitta-ia-tabla tbody td { padding: 18px 28px; border-left: 1px solid var(--filete-claro); }
.vitta-ia-pagina .vitta-ia-tabla tbody tr > * { border-top: 1px solid var(--filete-claro); }
/* Estado: etiqueta con borde (formato «Color del texto» del editor). */
.vitta-ia-pagina .vitta-ia-tabla mark {
  display: inline-block;
  padding: 4px 8px;
  border: 1px solid color-mix(in srgb, var(--teal-d) 80%, transparent);
  border-radius: 2px;
  background: none;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
  /* El formato del editor pone has-navy-color, que lleva !important. */
  color: var(--teal-d) !important;
}
/* Por debajo de 900px: sin la columna de rótulos. Cada fila pone su rótulo
   a todo el ancho y debajo las dos fases, alineadas con la cabecera. */
@media (max-width: 899px) {
  .vitta-ia-tabla table { display: block; }
  .vitta-ia-tabla :is(thead, tbody) { display: block; }
  .vitta-ia-tabla tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vitta-ia-tabla thead td { display: none; }
  .vitta-ia-tabla thead a { padding: 16px; font-size: 18px; }
  .vitta-ia-pagina .vitta-ia-tabla tbody th { grid-column: 1 / -1; padding: 10px 16px; }
  .vitta-ia-pagina .vitta-ia-tabla tbody td { padding: 14px 16px; font-size: 15px; border-top: 0; }
  .vitta-ia-pagina .vitta-ia-tabla tbody td:nth-of-type(1) { border-left: 0; }
}

/* ==========================================================================
   Grupo fase1 (patterns/vitta-ia-fase1.php)
   ========================================================================== */

/* Variantes de las piezas comunes sobre fondo claro (portadilla sobre la
   trama). Chapa «FASE 1» en navy con letra celeste, como en la maqueta. El
   estado va en navy: el celeste oscuro de la maqueta (#1F6E78) sobre la
   trama no llega a 4,5:1. */
.vitta-ia-pagina .vitta-ia-chapa--oscura { background: var(--navy); color: var(--teal); }
.vitta-ia-pagina .vitta-ia-estado--claro {
  border-color: color-mix(in srgb, var(--navy) 70%, transparent);
  color: var(--navy);
}
/* Rótulo gris de la maqueta (#8A8A9E, 3,07-3,38:1) → texto suave de la
   página (navy al 72 %), el mismo gris de las etiquetas de Bombas. */
.vitta-ia-pagina .vitta-ia-rotulo--gris { font-weight: 500; letter-spacing: .14em; color: var(--texto-suave); }

/* ── Portadilla de la fase 1 (#fase1), sobre la trama ─────────────────── */
.vitta-ia-portadilla { padding: clamp(40px, 4.5vw, 64px) var(--space-4); }
.vitta-ia-portadilla__inner {
  max-width: 1312px;
  margin: 0 auto;
  display: grid;
  gap: var(--space-5);
  align-items: center;
}
.vitta-ia-portadilla__inner > *,
.vitta-ia-portadilla__titulo > * { margin-block: 0; }
@media (min-width: 1024px) {
  .vitta-ia-portadilla__inner {
    grid-template-columns: 230px minmax(0, 520px) minmax(0, 1fr);
    gap: clamp(32px, 3.4vw, 48px);
  }
}
/* «01» grande: navy al 20 %, como la maqueta. Es decorativo -- repite
   «FASE 1» -- y va con aria-hidden (filtro de render_block_core/paragraph
   en functions.php), así que queda fuera de la regla de 4,5:1 (criterio en
   docs/vitta-ia-estado.md). */
.vitta-ia-pagina .vitta-ia-portadilla__num {
  font-size: clamp(88px, 11.7vw, 168px);
  line-height: .9;
  font-weight: 700;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--navy) 20%, transparent);
}
.vitta-ia-portadilla__titulo { display: flex; flex-direction: column; gap: 14px; }
.vitta-ia-portadilla__marca { gap: 12px; align-items: center; }
.vitta-ia-portadilla__marca > * { margin: 0; }
.vitta-ia-pagina .vitta-ia-portadilla__titular {
  font-size: clamp(2.25rem, 3.9vw, 3.5rem);
  line-height: 1.04;
  font-weight: 700;
  letter-spacing: -0.028em;
  color: var(--navy);
}
.vitta-ia-pagina .vitta-ia-portadilla__subtitulo { font-size: clamp(18px, 1.4vw, 20px); line-height: 1.35; font-weight: 700; color: var(--navy); }
.vitta-ia-pagina .vitta-ia-portadilla__entrada { font-size: clamp(16px, 1.15vw, 16.5px); line-height: 1.66; color: var(--navy); }

/* ── El analizador ────────────────────────────────────────────────────── */
.vitta-ia-analizador .vitta-ia-seccion__inner { gap: 36px; }

/* Pasado / Presente / Futuro: tres tarjetas, la central en navy. */
.vitta-ia-tiempos { display: grid; gap: 20px; }
@media (min-width: 900px) { .vitta-ia-tiempos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.vitta-ia-tiempo {
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(24px, 2.2vw, 32px) clamp(22px, 2.2vw, 32px) clamp(26px, 2.4vw, 34px);
  background: var(--bg);
  border: 1px solid var(--filete-claro);
  border-radius: 4px;
}
.vitta-ia-tiempo > * { margin: 0; }
.vitta-ia-pagina .vitta-ia-tiempo__palabra { font-size: clamp(26px, 2.1vw, 30px); line-height: 1; font-weight: 700; letter-spacing: .02em; color: var(--teal-d); }
.vitta-ia-pagina .vitta-ia-tiempo__titulo { font-size: clamp(20px, 1.55vw, 22px); line-height: 1.22; font-weight: 700; letter-spacing: -0.015em; color: var(--navy); }
.vitta-ia-pagina .vitta-ia-tiempo__texto { font-size: 15.5px; line-height: 1.62; color: var(--texto-suave); }
.vitta-ia-tiempo--navy { background: var(--navy); border-color: var(--navy); }
.vitta-ia-pagina .vitta-ia-tiempo--navy .vitta-ia-tiempo__palabra { color: var(--teal); }
.vitta-ia-pagina .vitta-ia-tiempo--navy .vitta-ia-tiempo__titulo { color: var(--white); }
.vitta-ia-pagina .vitta-ia-tiempo--navy .vitta-ia-tiempo__texto { color: var(--texto-claro); }

.vitta-ia-pagina .vitta-ia-analizador__nota { max-width: 1000px; font-size: 16px; line-height: 1.6; color: var(--texto-suave); }

/* Apartados con cabecera titular | rótulo (catorce bloques, capturas). */
.vitta-ia-apartado { display: flex; flex-direction: column; gap: var(--space-4); padding-top: 12px; }
.vitta-ia-apartado > * { margin: 0; }
.vitta-ia-apartado__cabeza { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 24px; }
.vitta-ia-apartado__cabeza > * { margin: 0; }
.vitta-ia-pagina .vitta-ia-apartado__titulo { font-size: clamp(22px, 1.8vw, 26px); line-height: 1.2; font-weight: 700; letter-spacing: -0.018em; color: var(--navy); }

/* Los catorce bloques: rejilla con filetes de 1px (el hueco de la rejilla
   sobre el fondo del filete) y la celda navy «Todo es transversal», que
   ocupa dos columnas donde hay cuatro. */
.vitta-ia-expediente {
  display: grid;
  gap: 1px;
  background: var(--filete-claro);
  border: 1px solid var(--filete-claro);
  border-radius: 4px;
  overflow: hidden;
}
@media (min-width: 560px) { .vitta-ia-expediente { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .vitta-ia-expediente { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.vitta-ia-expediente__bloque {
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px 22px;
  background: var(--white);
}
.vitta-ia-expediente__bloque > * { margin: 0; }
.vitta-ia-pagina .vitta-ia-expediente__codigo { font-size: 12px; font-weight: 700; letter-spacing: .06em; font-variant-numeric: tabular-nums; color: var(--teal-d); }
.vitta-ia-pagina .vitta-ia-expediente__titulo { font-size: 16px; line-height: 1.3; font-weight: 700; color: var(--navy); }
.vitta-ia-pagina .vitta-ia-expediente__linea { font-size: 13.5px; line-height: 1.5; color: var(--texto-suave); }
.vitta-ia-expediente__bloque--transversal { justify-content: center; gap: 8px; padding: 22px 26px; background: var(--navy); }
@media (min-width: 560px) { .vitta-ia-expediente__bloque--transversal { grid-column: span 2; } }
.vitta-ia-pagina .vitta-ia-expediente__rotulo { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--teal); }
.vitta-ia-pagina .vitta-ia-expediente__texto { font-size: 16.5px; line-height: 1.5; font-weight: 700; color: var(--white); }

/* Así lo ve el técnico: rótulo + párrafo, dos capturas en fila desde
   1024px (las curvas a su ancho fijo de 450px, la matriz en el resto) y la
   de las proyecciones a todo el ancho. */
.vitta-ia-capturas { gap: 22px; }
.vitta-ia-capturas__intro { display: flex; flex-direction: column; gap: 10px; }
.vitta-ia-capturas__intro > * { margin: 0; }
.vitta-ia-capturas__intro + .vitta-ia-img,
.vitta-ia-capturas__par + .vitta-ia-capturas__intro { margin-top: 14px !important; }
.vitta-ia-pagina .vitta-ia-capturas__texto { max-width: 940px; font-size: clamp(16px, 1.15vw, 16.5px); line-height: 1.64; color: var(--texto-suave); }
.vitta-ia-capturas__par { display: flex; flex-direction: column; gap: 32px; }
.vitta-ia-capturas__par > * { margin: 0; }
@media (min-width: 1024px) {
  .vitta-ia-capturas__par { flex-direction: row; align-items: center; }
  .vitta-ia-capturas__par .vitta-ia-img--curvas-estado { flex: none; width: 450px; }
  .vitta-ia-capturas__par .vitta-ia-img--matriz-recurrencia { flex: 1; min-width: 0; }
}
/* Las curvas son muy altas (1100×1717): también apiladas, como mucho a
   450px de ancho, el de la maqueta; si no, a 800px medirían 1200px de alto. */
.vitta-ia-img--curvas-estado { --nativo: 1100px; width: 100%; max-width: 450px; }
.vitta-ia-img--matriz-recurrencia { --nativo: 1600px; }
.vitta-ia-img--proyecciones { --nativo: 1600px; }

/* Cuatro principios en navy: líneas entre celdas por el hueco de 1px. */
.vitta-ia-principios {
  display: grid;
  gap: 1px;
  background: var(--filete-oscuro);
  border: 1px solid var(--navy);
  border-radius: 4px;
  overflow: hidden;
}
@media (min-width: 600px) { .vitta-ia-principios { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .vitta-ia-principios { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.vitta-ia-principio { margin: 0 !important; display: flex; flex-direction: column; gap: 8px; padding: 24px 26px; background: var(--navy); }
.vitta-ia-principio > * { margin: 0; }
.vitta-ia-pagina .vitta-ia-principio__titulo { font-size: 16.5px; line-height: 1.35; font-weight: 700; color: var(--white); }
.vitta-ia-pagina .vitta-ia-principio__texto { font-size: 14px; line-height: 1.55; color: var(--texto-claro); }

/* ==========================================================================
   Grupo fase2 (patterns/vitta-ia-fase2.php)
   ========================================================================== */

/* Chapa «FASE 2» con borde, como en la tarjeta de la portada. */
.vitta-ia-pagina .vitta-ia-chapa--borde {
  padding: 4px 9px;
  border: 1px solid var(--filete-oscuro);
  background: none;
  color: var(--teal);
}

/* ── Portadilla de la fase 2 (#fase2): Cover con la chapa ─────────────────
   Misma rejilla que la de la fase 1 (.vitta-ia-portadilla__inner). Fondo
   como en la maqueta: su chapa perforada clara en gris y oscurecida, bajo el velo navy del
   propio bloque (90 %, editable) que vira a celeste oscuro por la derecha
   (en la maqueta, degradado a 104° de navy al 96 % a #1F6E78 al 62 %). */
/* Fondo común de los dos Cover con la chapa (esta portadilla y el cierre
   de alarmas): .vitta-ia-fondo-chapa. */
.vitta-ia-fondo-chapa.wp-block-cover { min-height: 0; color: var(--white); }
.vitta-ia-fondo-chapa .wp-block-cover__image-background { filter: grayscale(1) contrast(1.06) brightness(.55); }
.vitta-ia-fondo-chapa .wp-block-cover__background {
  background-image: linear-gradient(104deg, transparent 40%, color-mix(in srgb, var(--teal-d) 55%, transparent) 74%, color-mix(in srgb, var(--teal-d) 75%, transparent) 100%);
}
.vitta-ia-fondo-chapa .wp-block-cover__inner-container { width: 100%; color: inherit; }
.vitta-ia-portadilla.vitta-ia-fondo-chapa { padding: clamp(40px, 4.5vw, 64px) var(--space-4); }
/* «02» grande: celeste al 28 %, como la maqueta. Decorativo (repite «FASE
   2», aria-hidden): fuera de la regla de 4,5:1. */
.vitta-ia-pagina .vitta-ia-fondo-chapa .vitta-ia-portadilla__num { color: color-mix(in srgb, var(--teal) 28%, transparent); }
.vitta-ia-pagina .vitta-ia-fondo-chapa .vitta-ia-portadilla__titular { color: var(--white); }
.vitta-ia-pagina .vitta-ia-fondo-chapa .vitta-ia-portadilla__subtitulo { color: var(--teal); }
/* #D2D6E4 de la maqueta → el texto secundario sobre navy de la página. */
.vitta-ia-pagina .vitta-ia-fondo-chapa .vitta-ia-portadilla__entrada { color: var(--texto-claro); }

/* ── La monitorización (navy) ─────────────────────────────────────────── */
.vitta-ia-monitorizacion {
  background: var(--navy);
  color: var(--white);
  padding: clamp(48px, 5vw, 72px) var(--space-4) clamp(56px, 6.7vw, 96px);
}
.vitta-ia-monitorizacion .vitta-ia-seccion__inner { gap: 36px; }

/* Captura sobre navy: filete celeste y pie en claro. */
.vitta-ia-img--monitorizacion { --nativo: 1595px; }
.vitta-ia-monitorizacion .vitta-ia-img img { border-color: var(--filete-oscuro); }
.vitta-ia-pagina .vitta-ia-monitorizacion .vitta-ia-img figcaption { color: var(--texto-claro); }
.vitta-ia-monitorizacion .vitta-ia-img figcaption strong { color: var(--teal); }

/* Tres tarjetas: líneas entre celdas por el hueco de 1px de la rejilla; en
   cada una, la marca celeste a la izquierda y un filete bajo el texto,
   como en la maqueta. */
.vitta-ia-ventajas {
  display: grid;
  gap: 1px;
  background: var(--filete-oscuro);
  border: 1px solid var(--filete-oscuro);
  border-radius: 4px;
  overflow: hidden;
}
@media (min-width: 900px) { .vitta-ia-ventajas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.vitta-ia-ventaja {
  position: relative;
  margin: 0 !important;
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  align-content: start;
  column-gap: 16px;
  row-gap: 5px;
  padding: 42px 26px 43px;
  background: var(--navy);
}
.vitta-ia-ventaja::before {
  content: '';
  grid-column: 1;
  grid-row: 1;
  width: 16px;
  height: 7px;
  margin-top: 8px;
  background: var(--teal);
  transform: skewX(-32deg);
}
.vitta-ia-ventaja::after {
  content: '';
  position: absolute;
  left: 26px;
  right: 26px;
  bottom: 24px;
  border-bottom: 1px solid var(--filete-oscuro);
}
.vitta-ia-ventaja > * { grid-column: 2; margin: 0; }
.vitta-ia-pagina .vitta-ia-ventaja__titulo { font-size: 17px; line-height: 1.35; font-weight: 700; color: var(--white); }
.vitta-ia-pagina .vitta-ia-ventaja__texto { font-size: 14.5px; line-height: 1.58; color: var(--texto-claro); }

/* Qué sigue en continuo: rótulo y etiquetas en una sola línea de texto que
   se parte y vuelve al margen, como en la maqueta (flujo en línea, no
   flex: así la lista sigue siendo lista y no hace falta display:contents). */
.vitta-ia-continuo { margin-bottom: -10px; }
.vitta-ia-continuo > * { margin: 0; }
.vitta-ia-pagina .vitta-ia-continuo__rotulo {
  display: inline-block;
  margin: 0 18px 10px 0;
  vertical-align: middle;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--teal);
}
.vitta-ia-continuo__lista { display: inline; list-style: none; margin: 0; padding: 0; }
.vitta-ia-continuo__lista > li {
  display: inline-block;
  margin: 0 12px 10px 0;
  padding: 6px 11px;
  vertical-align: middle;
  border: 1px solid var(--filete-oscuro);
  border-radius: 2px;
  background: color-mix(in srgb, var(--teal) 10%, var(--navy));
  font-size: 13px;
  line-height: 1.4;
  color: var(--white);
}

/* ==========================================================================
   Grupo alarmas (patterns/vitta-ia-alarmas.php)
   ========================================================================== */

/* Marcadores de la maqueta («[ Datos de demostración ]»): rótulo pequeño,
   gris sobre blanco, celeste sobre navy. */
.vitta-ia-pagina .vitta-ia-marcador {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--texto-suave);
}

/* Cabeceras sobre navy (De la medida…, Escenarios). */
.vitta-ia-pagina :is(.vitta-ia-proyeccion, .vitta-ia-escenarios) .vitta-ia-antetitulo { color: var(--teal); }
.vitta-ia-pagina :is(.vitta-ia-proyeccion, .vitta-ia-escenarios) .vitta-ia-titular { color: var(--white); }
.vitta-ia-pagina :is(.vitta-ia-proyeccion, .vitta-ia-escenarios) .vitta-ia-cabecera__entrada { color: var(--texto-claro); }

/* ── 1. Alarmas interpretadas (#alarmas) ─────────────────────────────── */

/* Las seis preguntas: rótulo y lista ORDENADA en una banda gris; el número
   (01-06) lo pone el CSS, como el índice de Bombas. */
.vitta-ia-preguntas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  padding: 18px 24px;
  background: var(--bg);
  border: 1px solid var(--filete-claro);
  border-radius: 4px;
}
.vitta-ia-preguntas > * { margin: 0; }
.vitta-ia-preguntas__lista {
  counter-reset: pregunta;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
}
.vitta-ia-preguntas__lista > li {
  counter-increment: pregunta;
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 700;
  color: var(--navy);
}
.vitta-ia-preguntas__lista > li::before {
  content: counter(pregunta, decimal-leading-zero);
  font-size: 11.5px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--teal-d);
}

/* Comparación: tradicional (360px) | VITTA IA, desde 1024px. */
.vitta-ia-comparacion { display: grid; gap: 32px; }
@media (min-width: 1024px) { .vitta-ia-comparacion { grid-template-columns: 360px minmax(0, 1fr); gap: 24px; } }
.vitta-ia-comparacion__columna { margin: 0 !important; display: flex; flex-direction: column; gap: 14px; }
.vitta-ia-comparacion__columna > * { margin: 0; }
.vitta-ia-comparacion__caja {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 26px;
  background: var(--bg);
  border: 1px solid var(--filete-claro);
  border-radius: 4px;
}
.vitta-ia-comparacion__caja > * { margin: 0; }
.vitta-ia-pagina .vitta-ia-comparacion__texto { font-size: 15px; line-height: 1.6; color: var(--texto-suave); }
.vitta-ia-comparacion__cabeza { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
.vitta-ia-comparacion__cabeza > * { margin: 0; }

/* La alarma del sistema tradicional: icono de aviso (círculo rojo claro +
   triángulo rojo, decorativos: el texto ya dice «Alarma») y dos líneas.
   Sin borde izquierdo, como en la maqueta. */
.vitta-ia-aviso {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-height: 34px;
  justify-content: center;
  padding: 16px 18px 16px 66px;
  background: var(--white);
  border: 1px solid var(--filete-claro);
  border-left: 0;
  border-radius: 3px;
}
.vitta-ia-aviso > * { margin: 0; }
.vitta-ia-aviso::before,
.vitta-ia-aviso::after { content: ''; position: absolute; top: 50%; }
.vitta-ia-aviso::before {
  left: 18px;
  width: 34px;
  height: 34px;
  margin-top: -17px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--red) 12%, var(--white));
}
.vitta-ia-aviso::after {
  left: 26px;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  background: var(--red);
  -webkit-mask: var(--aviso) center / contain no-repeat;
  mask: var(--aviso) center / contain no-repeat;
}
.vitta-ia-pagina__contenido {
  --aviso: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3Cpath d='M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z'/%3E%3C/svg%3E");
}
.vitta-ia-pagina .vitta-ia-aviso__titulo { font-size: 15px; line-height: 1.35; font-weight: 700; color: var(--red); }
.vitta-ia-pagina .vitta-ia-aviso__pozo { font-size: 11px; line-height: 1.4; letter-spacing: .04em; color: var(--texto-suave); }

/* VITTA IA ante la misma alarma: filas rótulo | texto, apiladas por
   debajo de 600px. */
.vitta-ia-diagnostico {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  padding: 10px clamp(20px, 2.1vw, 30px) 14px;
  background: var(--white);
  border: 1px solid var(--navy);
  border-radius: 4px;
}
.vitta-ia-diagnostico__fila {
  margin: 0 !important;
  display: grid;
  gap: 4px;
  padding: 14px 0;
  border-bottom: 1px solid var(--filete-claro);
}
.vitta-ia-diagnostico__fila:last-child { border-bottom: 0; }
.vitta-ia-diagnostico__fila > * { margin: 0; }
@media (min-width: 600px) { .vitta-ia-diagnostico__fila { grid-template-columns: 170px minmax(0, 1fr); gap: 20px; } }
.vitta-ia-pagina .vitta-ia-diagnostico__rotulo {
  padding-top: 3px;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--teal-d);
}
.vitta-ia-pagina .vitta-ia-diagnostico__texto { font-size: 14.5px; line-height: 1.55; color: var(--navy); }
/* «[ dato pendiente ]»: formato «Color del texto» del editor (has-teal-
   color, que lleva !important); el celeste sobre blanco no llega a 4,5:1. */
.vitta-ia-pagina .vitta-ia-diagnostico__texto mark {
  background: none;
  font-size: 12px;
  white-space: nowrap;
  color: var(--teal-d) !important;
}

/* Cada señal, con su pregunta: rejilla con filetes de 1px. Rótulo en
   ámbar (#A9611A de la maqueta = --ambar-d). */
.vitta-ia-senales { display: flex; flex-direction: column; gap: 14px; }
.vitta-ia-senales > * { margin: 0; }
.vitta-ia-senales__rejilla {
  display: grid;
  gap: 1px;
  background: var(--filete-claro);
  border: 1px solid var(--filete-claro);
  border-radius: 4px;
  overflow: hidden;
}
@media (min-width: 560px) { .vitta-ia-senales__rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .vitta-ia-senales__rejilla { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.vitta-ia-senal { margin: 0 !important; display: flex; flex-direction: column; gap: 7px; padding: 20px 22px; background: var(--white); }
.vitta-ia-senal > * { margin: 0; }
.vitta-ia-pagina .vitta-ia-senal__nombre { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ambar-d); }
.vitta-ia-pagina .vitta-ia-senal__pregunta { font-size: 15px; line-height: 1.45; font-weight: 700; color: var(--navy); }
.vitta-ia-pagina .vitta-ia-senales__cierre { font-size: 16px; line-height: 1.6; font-weight: 700; color: var(--navy); }

/* ── 2. De la medida a la decisión (navy) ─────────────────────────────── */
.vitta-ia-proyeccion { background: var(--navy); color: var(--white); }
.vitta-ia-proyeccion .vitta-ia-seccion__inner { gap: 26px; }
.vitta-ia-proyeccion__caja {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: clamp(22px, 2.3vw, 30px) clamp(20px, 2.4vw, 34px) 26px;
  background: var(--navy-tarjeta);
  border: 1px solid var(--filete-oscuro);
  border-radius: 4px;
}
.vitta-ia-proyeccion__caja > *,
.vitta-ia-proyeccion__cabeza > * { margin: 0; }
.vitta-ia-proyeccion__cabeza { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; }
.vitta-ia-pagina .vitta-ia-proyeccion__titulo { font-size: clamp(20px, 1.7vw, 24px); line-height: 1.2; font-weight: 700; letter-spacing: -0.018em; color: var(--white); }
.vitta-ia-pagina .vitta-ia-proyeccion .vitta-ia-marcador { color: var(--teal); }
.vitta-ia-pagina .vitta-ia-proyeccion__pie { font-size: 15px; line-height: 1.6; color: var(--texto-claro); }

/* ── 3. Escenarios cuantificados (navy hondo) ─────────────────────────── */
.vitta-ia-escenarios { background: var(--navy-hondo); color: var(--white); }
.vitta-ia-escenarios__rejilla { display: grid; gap: 20px; }
@media (min-width: 900px) { .vitta-ia-escenarios__rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.vitta-ia-escenario {
  --muestra: var(--teal);
  --valor: var(--teal);
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 26px 28px;
  background: var(--navy);
  border: 1px solid var(--teal);
  border-radius: 4px;
}
.vitta-ia-escenario > * { margin: 0; }
/* Muestra gris de la maqueta (#A8AAC4) = el texto secundario sobre navy;
   borde celeste al 25 % → el filete de la página. */
.vitta-ia-escenario--esperar { --muestra: var(--texto-claro); --valor: var(--texto-claro); border-color: var(--filete-oscuro); }
/* «No actuar»: muestra y valores en ámbar (#D3945A = --ambar); borde
   #A9611A al 55 % de la maqueta → --ambar al 70 %. */
.vitta-ia-escenario--no-actuar { --muestra: var(--ambar); --valor: var(--ambar); border-color: color-mix(in srgb, var(--ambar) 70%, transparent); }
.vitta-ia-pagina .vitta-ia-escenario__titulo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 19px;
  line-height: 1.3;
  font-weight: 700;
  color: var(--white);
}
.vitta-ia-escenario__titulo::before {
  content: '';
  flex: none;
  width: 16px;
  height: 8px;
  background: var(--muestra);
  transform: skewX(-32deg);
}
.vitta-ia-pagina .vitta-ia-escenario__texto { font-size: 14.5px; line-height: 1.6; color: var(--texto-claro); }
/* Cifras: tabla clave | valor, filete ENTRE filas (no encima de la
   primera), como en la maqueta. */
.vitta-ia-escenario__cifras { margin-top: auto !important; }
.vitta-ia-escenario__cifras table { width: 100%; border-collapse: collapse; }
.vitta-ia-pagina .vitta-ia-escenario__cifras :is(th, td) {
  padding: 11px 0;
  border: 0;
  border-top: 1px solid var(--filete-oscuro);
  vertical-align: baseline;
  line-height: 1.4;
}
.vitta-ia-pagina .vitta-ia-escenario__cifras tr:first-child > * { border-top: 0; }
.vitta-ia-pagina .vitta-ia-escenario__cifras th {
  text-align: left;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .08em;
  color: var(--texto-claro);
}
.vitta-ia-pagina .vitta-ia-escenario__cifras td {
  padding-left: 12px;
  text-align: right;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 500;
  color: var(--valor);
}

/* ── 4. Alcance y estado del desarrollo (blanco) ──────────────────────── */
.vitta-ia-alcance .vitta-ia-seccion__inner { gap: 26px; }
.vitta-ia-alcance__rejilla { display: grid; gap: 20px; }
@media (min-width: 600px) { .vitta-ia-alcance__rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .vitta-ia-alcance__rejilla { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.vitta-ia-alcance__tarjeta {
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 11px;
  padding: 28px;
  background: var(--bg);
  border: 1px solid var(--filete-claro);
  border-radius: 4px;
}
.vitta-ia-alcance__tarjeta > * { margin: 0; }
.vitta-ia-pagina .vitta-ia-alcance__titulo { font-size: 19px; line-height: 1.25; font-weight: 700; color: var(--navy); }
.vitta-ia-pagina .vitta-ia-alcance__texto { font-size: 14.5px; line-height: 1.62; color: var(--texto-suave); }
.vitta-ia-pagina .vitta-ia-alcance__etiqueta {
  padding: 4px 9px;
  border: 1px solid var(--filete-oscuro);
  border-radius: 2px;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--teal);
}
.vitta-ia-alcance__tarjeta--navy { background: var(--navy); border-color: var(--navy); }
.vitta-ia-pagina .vitta-ia-alcance__tarjeta--navy .vitta-ia-alcance__titulo { color: var(--white); }
.vitta-ia-pagina .vitta-ia-alcance__tarjeta--navy .vitta-ia-alcance__texto { color: var(--texto-claro); }
/* Sobre la trama, como la portadilla de la fase 1: etiqueta con borde
   navy al 70 % (en la maqueta, al 40 %). */
.vitta-ia-alcance__tarjeta--trama {
  background-color: var(--teal);
  background-image: url('/wp-content/themes/vitta-theme/assets/web/fondo-azulclaro.webp');
  background-repeat: repeat;
  border-color: var(--teal);
}
.vitta-ia-pagina .vitta-ia-alcance__tarjeta--trama .vitta-ia-alcance__texto { color: var(--navy); }
.vitta-ia-pagina .vitta-ia-alcance__tarjeta--trama .vitta-ia-alcance__etiqueta {
  border-color: color-mix(in srgb, var(--navy) 70%, transparent);
  color: var(--navy);
}

/* ── 5. Cierre (Cover con la chapa: .vitta-ia-fondo-chapa) ────────────── */
.vitta-ia-cierre.wp-block-cover { padding: clamp(56px, 6.1vw, 88px) var(--space-4); }
.vitta-ia-cierre__inner {
  max-width: 1312px;
  margin: 0 auto;
  display: grid;
  gap: 32px;
  align-items: center;
}
@media (min-width: 1024px) {
  .vitta-ia-cierre__inner { grid-template-columns: minmax(0, 820px) 360px; justify-content: space-between; gap: 64px; }
}
.vitta-ia-cierre__inner > *,
.vitta-ia-cierre__objetivo > *,
.vitta-ia-cierre__accion > * { margin: 0; }
.vitta-ia-cierre__objetivo { display: flex; flex-direction: column; gap: 18px; }
.vitta-ia-cierre__accion { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.vitta-ia-pagina .vitta-ia-cierre .vitta-ia-antetitulo { color: var(--teal); }
.vitta-ia-pagina .vitta-ia-cierre__frase {
  font-size: clamp(1.625rem, 2.5vw, 2.25rem);
  line-height: 1.22;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--white);
  text-wrap: balance;
}
.vitta-ia-pagina .vitta-ia-cierre__texto { font-size: 16px; line-height: 1.6; color: var(--texto-claro); }
/* «Solicitar pre-análisis» → /pre-analisis/ (en la maqueta, «Solicitar
   información», sin destino). Hover: celeste algo más claro; foco: filete
   blanco, visible sobre el velo navy de la chapa. */
.vitta-ia-cierre__boton .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  min-height: 52px;
  padding: 0 28px;
  border: 0;
  border-radius: 3px;
  background: var(--teal);
  color: var(--navy);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
}
.vitta-ia-cierre__boton .wp-block-button__link:hover { background: color-mix(in srgb, var(--teal) 80%, var(--white)); }
.vitta-ia-cierre__boton .wp-block-button__link:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }

/* Gráfica de «De la medida a la decisión»: dos SVG en línea (functions.php,
   vitta_grafica_proyeccion_svg()). Escritorio desde 900px (el corte de las
   rejillas de la página), como mucho a 880px de ancho: rótulos de 11
   unidades ≈ 13,8px (12,9 a 900); por debajo, la composición móvil, como
   mucho a 340px: rótulos de 14 unidades ≈ 12,3px a 390 y 13,2 en el tope.
   La que no toca, display:none: así no se lee dos veces. Colores solo de
   tokens; texto ≥4,5:1 y series, ejes y HOY ≥3:1 sobre el fondo del
   recuadro (la rejilla, de fondo, no). */
.vitta-ia-grafica { margin: 0 !important; }
.vitta-ia-grafica__svg { display: block; width: 100%; height: auto; margin-inline: auto; overflow: visible; }
.vitta-ia-grafica__svg--escritorio { display: none; max-width: 880px; }
.vitta-ia-grafica__svg--movil { max-width: 340px; }
@media (min-width: 900px) {
  .vitta-ia-grafica__svg--escritorio { display: block; }
  .vitta-ia-grafica__svg--movil { display: none; }
}
.vitta-ia-grafica__svg path { fill: none; }
/* Rejilla: celeste al 16 %, como la maqueta (1,42:1). Es de fondo, no
   informa (los ejes no tienen valores): fuera del mínimo de 3:1, que es
   para series, ejes y la línea HOY (criterio en docs/vitta-ia-estado.md). */
.vitta-ia-grafica__rejilla { stroke: color-mix(in srgb, var(--teal) 16%, transparent); stroke-width: 1; }
.vitta-ia-grafica__eje { stroke: var(--filete-oscuro); stroke-width: 1; }
.vitta-ia-grafica__ref { stroke: var(--filete-oscuro); stroke-width: 1.2; stroke-dasharray: 5 5; }
.vitta-ia-grafica__hist { stroke: var(--white); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
/* Proyección inicial: #8A8CA8 de la maqueta → blanco al 55 %. */
.vitta-ia-grafica__ini { stroke: color-mix(in srgb, var(--white) 55%, transparent); stroke-width: 2; stroke-dasharray: 6 6; stroke-linecap: round; }
.vitta-ia-grafica__ajust { stroke: var(--ambar); stroke-width: 2.6; stroke-dasharray: 8 5; stroke-linecap: round; }
.vitta-ia-grafica__med { fill: var(--teal); }
.vitta-ia-grafica__svg path.vitta-ia-grafica__muestra { stroke-dasharray: none; }
.vitta-ia-grafica__svg path.vitta-ia-grafica__muestra.vitta-ia-grafica__ini { stroke-dasharray: 5 3; }
.vitta-ia-grafica__svg path.vitta-ia-grafica__muestra.vitta-ia-grafica__ajust { stroke-dasharray: 6 3; }
.vitta-ia-grafica__analisis { fill: var(--navy-tarjeta); stroke: var(--white); stroke-width: 2.4; }
/* HOY: blanco al 35 % en la maqueta (3,17:1) → al 45 %. */
.vitta-ia-grafica__hoy { stroke: color-mix(in srgb, var(--white) 45%, transparent); stroke-width: 1; }
.vitta-ia-grafica__t { font-family: inherit; }
.vitta-ia-grafica__t--celeste,
.vitta-ia-grafica__t--blanco,
.vitta-ia-grafica__t--ambar { font-weight: 500; letter-spacing: .08em; }
.vitta-ia-grafica__t--celeste { fill: var(--teal); }
.vitta-ia-grafica__t--blanco { fill: var(--white); }
.vitta-ia-grafica__t--ambar { fill: var(--ambar); }
.vitta-ia-grafica__t--suave { fill: var(--texto-claro); }