/* ─────────────────────────────────────────────────────────────────────────────
   /consultoria-inteligencia-artificial/ · hoja propia (v2, 14-sep-2026)
   La v1 era una copia de compliance.css con el namespace cambiado, y Javier la
   rechazó con razón: la página parecía la de compliance con otras palabras. En la
   v2 se conserva de aquella SOLO el sistema común (tokens, tipografía, botones,
   hero con tarjeta, formulario, FAQ, testimonios y cierre), que es lo que hace que
   las dos páginas comerciales se vean de la misma casa. Todo lo demás son
   componentes propios de este servicio, y cada uno sale de lo que se entrega de
   verdad en un proyecto de consultoría: el informe de seis hojas, el reparto de
   las 10 h/mes, las dos firmas de cada proceso.
   Todo cuelga de .eia26.eia26 (clase doblada: el tema declara .wp-site-blocks h1
   con la misma especificidad y va después).
   ───────────────────────────────────────────────────────────────────────────── */
.eia26.eia26{box-sizing:border-box;font-family:var(--body);font-size:17px;line-height:1.7;color:var(--tinta);background:var(--blanco);-webkit-font-smoothing:antialiased}
.eia26.eia26{--navy:#0F415C; --navy-deep:#072A3D; --navy-night:#04121C;
  --rosa:#C1145C; --rosa-deep:#5E0A2D;
  --agua:#57B6B4; --agua-suave:#E9F5F4; --azul-claro:#DFF1F6;
  --blanco:#FFFFFF; --tinta:#1A2A33; --gris:#5C7080; --gris-suave:#F6F9FA;
  --linea:#D8E0E6;
  
  --display:'Plein','Arial Black','Helvetica Neue',sans-serif;
  --body:'Nunito','Open Sans',system-ui,sans-serif;
  --h1:46px; --h2:33px; --h3:22px; --cuerpo:17px; --legal:11.5px;
  --ancho:1400px; --ancho-texto:840px; --radio:14px;}
.eia26.eia26 *{box-sizing:border-box}
.eia26.eia26{scroll-behavior:smooth}
.eia26.eia26{margin:0;background:var(--blanco);color:var(--tinta);
  font-family:var(--body);font-size:var(--cuerpo);line-height:1.7;-webkit-font-smoothing:antialiased}
/* El tema declara h1..h4{color} y a{font-size;line-height;...} con selectores de un solo
   elemento. Su especificidad es mínima, pero cualquier declaración directa gana a la
   herencia, así que aquí se restaura lo que el prototipo obtenía heredando. */
.eia26.eia26 h1, .eia26.eia26 h2, .eia26.eia26 h3, .eia26.eia26 h4{font-family:var(--display);font-weight:700;margin:0;color:inherit}
.eia26.eia26 h1{font-size:clamp(2rem,4vw,var(--h1));line-height:1.1;letter-spacing:-.01em}
.eia26.eia26 h2{font-size:clamp(1.6rem,3.2vw,var(--h2));line-height:1.15;letter-spacing:-.01em;color:var(--navy)}
/* Un H2 mide lo mismo en toda la página: no hay excepciones por titular. Nota: a 33 px,
   «Gobernanza y Cumplimiento Normativo de la Inteligencia Artificial en tu empresa»
   necesita ~1230 px y la columna mide 1140, así que ese entra en dos líneas. */
.eia26.eia26 h3{font-size:var(--h3);line-height:1.2;letter-spacing:.04em;color:var(--navy)}
.eia26.eia26 h4{font-size:17px;line-height:1.3;letter-spacing:-.01em;color:var(--navy)}
.eia26.eia26 p{margin:0}
.eia26.eia26 a{color:inherit;font-family:inherit;font-size:inherit;font-weight:inherit;line-height:inherit;text-decoration:underline}
.eia26.eia26 a.btn{line-height:1.7}
.eia26.eia26 .env{width:min(100% - 2.5rem,var(--ancho));margin-inline:auto}
.eia26.eia26 .seccion{padding-block:clamp(3.4rem,6vw,5rem) clamp(3.8rem,6.6vw,5.6rem)}
.eia26.eia26 .suave{background:var(--gris-suave)}
.eia26.eia26 .eyebrow{font-family:var(--body);font-weight:800;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--rosa);margin:0 0 .9rem}
.eia26.eia26 .eyebrow--agua{color:var(--agua)}
.eia26.eia26 .lead{font-size:var(--cuerpo);color:var(--gris);margin-top:1rem}
.eia26.eia26 .oscura .lead{color:#B4C8D4}
.eia26.eia26 .oscura h2, .eia26.eia26 .oscura h3, .eia26.eia26 .oscura h4{color:var(--blanco)}
.eia26.eia26 :focus-visible{outline:3px solid var(--rosa);outline-offset:3px}
.eia26.eia26 .nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.97);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--linea)}
@media(max-width:900px){.eia26.eia26 .menu{display:none}}
.eia26.eia26 .btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-weight:800;font-size:15px;padding:.85rem 1.7rem;border:2px solid transparent;
  border-radius:999px;text-decoration:none;cursor:pointer;
  transition:background .2s ease,color .2s ease,transform .2s ease,box-shadow .2s ease}
.eia26.eia26 .btn:hover{transform:translateY(-2px)}
.eia26.eia26 .btn:active{transform:translateY(1px)}
.eia26.eia26 .btn--rosa{background:var(--rosa);color:var(--blanco);box-shadow:0 8px 20px rgba(193,20,92,.22)}
.eia26.eia26 .btn--rosa:hover{background:var(--rosa-deep)}
.eia26.eia26 .btn--verde{background:#57B6B4;color:#04121C}
.eia26.eia26 .btn--verde:hover{background:#48A2A0;color:#04121C}
.eia26.eia26 .btn--linea{border-color:var(--navy);color:var(--navy)}
.eia26.eia26 .btn--linea:hover{background:var(--navy);color:var(--blanco)}
.eia26.eia26 .hero .btn--linea, .eia26.eia26 .oscura .btn--linea{border-color:var(--blanco);color:var(--blanco)}
.eia26.eia26 .hero .btn--linea:hover, .eia26.eia26 .oscura .btn--linea:hover{background:var(--blanco);color:var(--navy)}
.eia26.eia26 .btn--ancho{width:100%}
/* El bloque del menú del sitio flota sobre el hero de cada página con un margin-bottom
   negativo (-152px, y -90px por debajo de 1024px, definido en el CSS de Gutenverse para
   .guten-u2OfSN). El hero reserva ese mismo espacio arriba para que el menú no lo pise.
   Si estos dos valores cambian en el bloque del menú, hay que cambiarlos también aquí. */
.eia26.eia26{--menu-solape:152px}
@media only screen and (max-width:1024px){.eia26.eia26{--menu-solape:90px}}
/* SOLO ESTRATEGIA · El hero va SIN foto, con el degradado de marca (navy → más oscuro).
   Dos motivos: (1) la única foto de stock que encajaba aquí ya se usa en la home y en
   /compliance-ia/, y repetirla hace que las tres páginas parezcan la misma; (2) el hero
   de compliance costaba 47 KB de WebFP + un recorte aparte para móvil, y la fase 1 de
   rendimiento del 8-sep dejó la web en 97/100 móvil. Un degradado no pesa nada y no
   necesita recorte móvil, así que abajo tampoco hay override de hero para móvil.
   El relieve lo pone el radial desplazado, no una imagen. */
.eia26.eia26 .hero{color:var(--blanco);
  padding-block:calc(clamp(2.4rem,4.5vw,3.8rem) + var(--menu-solape,152px)) clamp(2.4rem,4.5vw,3.8rem);
  /* La foto del hero (16-sep-2026, pedida por Javier: «igual que la lleva
     compliance»). Es la sesión de pizarra que ya ilustraba este servicio en
     /servicios-inteligencia-artificial-empresas/, así que quien llega desde ahí
     reconoce la página. Va DEBAJO de los degradados, no como <img>: es fondo, no
     contenido, y no debe entrar en el orden de lectura ni pedir un alt.
     El velo navy baja de opaco a .88 para que la foto se intuya sin pelearse con
     el texto: sobre la zona más clara de la pizarra, el blanco del titular sigue
     dando 7,5:1, muy por encima del 4,5 que pide la norma.
     El apilado es EL MISMO que el de /compliance-ia/, copiado tal cual y a
     petición de Javier (16-sep): las dos páginas de servicio se ven ahora como
     una pareja, no como dos diseños parecidos. Lleva un lineal en 96° que aquí
     hace de velo direccional; el sistema visual pide radiales para los FONDOS de
     marca, y ese sigue siendo el segundo, que es el que pone el color. */
  background:linear-gradient(96deg,rgba(4,18,28,.66) 0%,rgba(7,42,61,.82) 45%,rgba(15,65,92,.80) 100%),
             radial-gradient(78% 120% at 80% 28%,rgba(30,110,140,.85) 0%,rgba(11,46,66,.86) 55%,rgba(4,18,28,.78) 100%),
             url("hero.webp?v=1") right center/cover no-repeat,
             #04121C}
.eia26.eia26 .hero__grid{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(2rem,4vw,3.6rem);align-items:center}
@media(max-width:960px){.eia26.eia26 .hero__grid{grid-template-columns:1fr;gap:2.2rem}}
.eia26.eia26 .hero .eyebrow{display:flex;align-items:center;gap:.8rem;color:var(--blanco);opacity:.9}
.eia26.eia26 .hero .eyebrow::before{content:"";width:30px;height:2px;background:var(--blanco);flex:none}

.eia26.eia26 .hero h1 em{color:var(--agua);font-style:italic}
.eia26.eia26 .hero__sub{margin-top:1.1rem;color:#C7DAE3}
.eia26.eia26 .hero__cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.8rem}
.eia26.eia26 .hero__sellos{display:flex;gap:1.5rem;margin-top:1.9rem;flex-wrap:wrap;
  font-weight:800;font-size:14px;opacity:.95}
.eia26.eia26 .miga{font-size:12px;color:#8FA9B8}
.eia26.eia26 .miga a{text-decoration:none}
.eia26.eia26 .miga a:hover{color:var(--agua)}
.eia26.eia26 .miga--top{margin-bottom:1rem}
.eia26.eia26 .miga--top span{color:var(--agua)}
.eia26.eia26 .tarjeta{background:var(--blanco);color:var(--tinta);border-radius:18px;
  padding:clamp(1.4rem,2.4vw,2rem);box-shadow:0 24px 60px rgba(4,18,28,.35)}
.eia26.eia26 .tarjeta h2{font-family:var(--body);font-weight:800;font-size:22px;color:var(--navy);line-height:1.3}
.eia26.eia26 .tarjeta__sub{font-size:14px;color:var(--gris);margin-top:.3rem;line-height:1.5}
.eia26.eia26 .tarjeta form{margin-top:1.2rem;margin-bottom:1em}
.eia26.eia26 .campos{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
@media(max-width:560px){.eia26.eia26 .campos{grid-template-columns:1fr}}
.eia26.eia26 .campo{display:flex;flex-direction:column}
.eia26.eia26 .campo--full{grid-column:1/-1}
.eia26.eia26 input, .eia26.eia26 select, .eia26.eia26 textarea{font-family:var(--body);font-size:16px;padding:.78rem .85rem;
  background:#F1F5F8;border:1px solid #E3EAEF;border-radius:9px;color:var(--tinta);width:100%}
.eia26.eia26 input::placeholder, .eia26.eia26 textarea::placeholder{color:#8496A3}
.eia26.eia26 select:invalid{color:#8496A3}
.eia26.eia26 input:focus, .eia26.eia26 select:focus, .eia26.eia26 textarea:focus{border-color:var(--rosa);background:var(--blanco)}
.eia26.eia26 textarea{resize:vertical;min-height:74px}
.eia26.eia26 .check{display:grid;grid-template-columns:auto 1fr;gap:.55rem;align-items:start;
  font-size:14px;color:var(--gris);line-height:1.5}
.eia26.eia26 .check input{width:16px;height:16px;margin-top:.2rem;accent-color:var(--rosa)}
.eia26.eia26 .check a{color:var(--navy);font-weight:700}

/* Ajustes solo para táctil, sin tocar el diseño de escritorio (QA móvil 23-ago-26):
   1) Safari iOS hace zoom automático al enfocar un campo de menos de 16px, y descoloca
      la página entera en mitad del formulario que trae los leads. 16px lo evita.
   2) La casilla del RGPD se marca tocando su etiqueta, pero el área medía 22px de alto;
      44px es el mínimo cómodo para el dedo y es la casilla obligatoria.
   3) Las referencias de las tarjetas de «Qué te llevas» quedaban en 9,6px, ilegibles. */
@media(max-width:1024px){
  .eia26.eia26 input, .eia26.eia26 select, .eia26.eia26 textarea{font-size:16px}
  .eia26.eia26 .check{min-height:44px;align-items:center}
  .eia26.eia26 .check input{width:22px;height:22px;margin-top:0}
}
.eia26.eia26 .legal{font-size:var(--legal);color:var(--gris);line-height:1.45}
.eia26.eia26 .legal b{color:var(--navy)}
.eia26.eia26 .vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);
  white-space:nowrap;border:0}
.eia26.eia26 .intro{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.8rem,3.6vw,3.2rem);margin-top:1.8rem}
@media(max-width:860px){.eia26.eia26 .intro{grid-template-columns:1fr}}
.eia26.eia26 .intro p+p{margin-top:1rem}
.eia26.eia26 .intro .dest{color:var(--rosa);font-weight:700}

.eia26.eia26 .faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:2.2rem;align-items:start}
@media(max-width:820px){.eia26.eia26 .faq-grid{grid-template-columns:1fr}}
.eia26.eia26 .faq-grid details{background:#fff;border:1px solid #E7ECF0;border-radius:14px;
  overflow:hidden;transition:border-color .2s}
.eia26.eia26 .faq-grid details[open]{border-color:#C8D6E2}
.eia26.eia26 .faq-grid summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;
  align-items:flex-start;gap:16px;padding:20px 22px;margin:0}
.eia26.eia26 .faq-grid summary::-webkit-details-marker{display:none}
.eia26.eia26 .faq-grid .faq-q{font-weight:700;font-size:17px;color:#052434;line-height:1.4;transition:color .2s}
.eia26.eia26 .faq-grid details[open] .faq-q{color:var(--rosa)}
.eia26.eia26 .faq-grid .faq-icon{flex-shrink:0;width:22px;height:22px;color:#052434;margin-top:1px;
  transition:transform .25s,color .2s}
.eia26.eia26 .faq-grid details[open] .faq-icon{transform:rotate(-45deg);color:var(--rosa)}
.eia26.eia26 .faq-grid .faq-body{padding:0 22px 20px;font-size:14px;color:#505B6F;line-height:1.65}
.eia26.eia26 .faq-grid .faq-body p{margin:0}
.eia26.eia26 .chip{display:inline-block;background:var(--blanco);color:var(--navy);
  border:1px solid rgba(15,65,92,.2);font-size:12px;
  font-weight:800;letter-spacing:.12em;text-transform:uppercase;padding:.32rem .8rem;
  border-radius:6px;margin-bottom:.9rem}
.eia26.eia26 .testis{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:1.2rem;margin-top:2.2rem}
.eia26.eia26 .testi{background:var(--blanco);border:1px solid #E7ECF0;border-radius:14px;
  padding:26px 24px;position:relative;transition:border-color .2s ease,box-shadow .2s ease}
.eia26.eia26 .testi:hover{border-color:#C8D6E2;box-shadow:0 10px 28px rgba(5,36,52,.07)}
.eia26.eia26 .testi__cab{font-weight:800;font-size:14px;color:#052434;line-height:1.3}
.eia26.eia26 .testi__cab span{display:block;font-weight:400;font-size:13px;color:#505B6F;margin-top:.15rem}
.eia26.eia26 .testi__p{display:flex;align-items:center;gap:.9rem;padding-bottom:1rem;
  border-bottom:1px solid var(--linea)}
.eia26.eia26 .testi__av{width:52px;height:52px;border-radius:50%;flex:none;display:block}
.eia26.eia26 .testi>p{font-size:14px;color:#505B6F;line-height:1.65;margin-top:1rem}
/* La sección de cierre y el pie del sitio son los dos azules y quedaban pegados. En vez
   de fundir uno con otro, se separan con una franja en blanco: el margen inferior deja
   ver el fondo del contenedor, así el bloque del formulario se lee como una pieza aparte
   y el pie arranca limpio. */
.eia26.eia26 .cierre{color:var(--blanco);margin-bottom:76px;
  background:radial-gradient(110% 150% at 20% 10%,var(--navy) 0%,var(--navy-night) 100%)}
@media(max-width:1024px){.eia26.eia26 .cierre{margin-bottom:52px}}
.eia26.eia26 .cierre__in{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,3.6rem);align-items:center}
@media(max-width:900px){.eia26.eia26 .cierre__in{grid-template-columns:1fr;gap:2rem}}
.eia26.eia26 .cierre__in>div:not(.tarjeta) h2{color:var(--blanco)}
.eia26.eia26 .cierre .tarjeta h2{color:var(--navy)}
.eia26.eia26 .cierre__in>div:not(.tarjeta) p{margin-top:.8rem;color:#B4C8D4}
.eia26.eia26 .ruta4{list-style:none;padding:0;margin:1.8rem 0 0;display:grid;gap:2px;counter-reset:r}
.eia26.eia26 .ruta4 li{display:grid;grid-template-columns:44px 1fr;grid-template-rows:auto auto;
  gap:.1rem 1rem;padding:.85rem 1rem;border-radius:12px;position:relative;
  transition:background .22s ease}
.eia26.eia26 .ruta4 li:hover{background:rgba(87,182,180,.09)}
.eia26.eia26 .ruta4 li::after{content:"";position:absolute;left:calc(1rem + 21px);
  top:calc(.85rem + 44px);height:calc(100% - .85rem - 44px + .85rem + 2px);width:2px;
  background:rgba(87,182,180,.35)}
.eia26.eia26 .ruta4 li:last-child::after{display:none}
.eia26.eia26 .ruta4__n{grid-row:1 / span 2;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:rgba(87,182,180,.16);border:1.5px solid rgba(87,182,180,.5);color:var(--agua);
  font-family:var(--display);font-weight:700;font-size:16px;z-index:1;position:relative}
.eia26.eia26 .ruta4 li:last-child .ruta4__n{background:rgba(193,20,92,.2);border-color:rgba(193,20,92,.6);color:#F7A8C6}
.eia26.eia26 .ruta4__t{font-family:var(--display);font-weight:700;font-size:17px;color:#fff;line-height:1.3}
.eia26.eia26 .ruta4__d{font-size:14px;color:#93AEBC;line-height:1.4}
.eia26.eia26 .alcance{font-size:14px;color:var(--gris);line-height:1.6}
.eia26.eia26 .pie{background:var(--navy-night);color:#9FB8C6;font-size:14px;padding-block:3rem 1.5rem}
@media(max-width:860px){.eia26.eia26 .pie__cols{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.eia26.eia26 .pie__cols{grid-template-columns:1fr}}
.eia26.eia26 .pie h4{font-family:var(--body);font-size:12px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--blanco);margin-bottom:.9rem;font-weight:800}
.eia26.eia26 .pie ul{list-style:none;padding:0;margin:0;display:grid;gap:.45rem}
.eia26.eia26 .pie a{text-decoration:none}
.eia26.eia26 .pie a:hover{color:var(--agua)}
@media (prefers-reduced-motion:reduce){.eia26.eia26{scroll-behavior:auto}.eia26.eia26 *{animation:none!important;transition:none!important}.eia26.eia26 .btn:hover, .eia26.eia26 .testi:hover, .eia26.eia26 .capa:hover .capa__bloque{transform:none}}
@media(max-width:1024px){
  /* Los antetítulos de sección ocupaban demasiado en pantalla estrecha; el del hero
     llegaba a partirse en dos líneas. Más pequeños y con menos tracking. */
  .eia26.eia26 .eyebrow{font-size:12px;letter-spacing:.10em}
}
/* Son cuatro sellos, y en móvil la fila partía dejando los puntos separadores al principio
   de la segunda línea. Ahí el punto sobra: separa igual el hueco. */
@media(max-width:620px){
  .eia26.eia26 .hero__sellos{gap:.55rem 1.1rem;font-size:12px}
  .eia26.eia26 .hero__sellos span[aria-hidden]{display:none}
}

/* ─────────────────────────────────────────────────────────────────────────────
   FORMULARIO REAL DE GUTENVERSE (form propio de esta página; el id va en el PHP)
   El marcado lo genera el plugin, así que aquí se le da la apariencia de la
   maqueta sin tocar su HTML: rejilla de dos columnas, etiquetas ocultas a la
   vista pero legibles por lector de pantalla, y el botón con el estilo de marca.
   ───────────────────────────────────────────────────────────────────────────── */
.eia26.eia26 .form-slot{margin-top:1.2rem;margin-bottom:1em}
.eia26.eia26 .guten-form-builder{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin:0}

/* Los campos anchos ocupan la fila entera; el resto se emparejan de dos en dos. */
.eia26.eia26 .guten-form-input-textarea,
.eia26.eia26 .guten-form-input-gdpr,
.eia26.eia26 .iacta-capa-basica,
.eia26.eia26 .guten-submit-wrapper{grid-column:1/-1}
@media(max-width:560px){.eia26.eia26 .guten-form-builder{grid-template-columns:1fr}}

/* El diseño usa placeholders, así que la etiqueta se oculta a la vista pero
   sigue existiendo para quien navega con lector de pantalla. Y fuera el
   «Input Helper», que es texto de relleno del plugin. */
.eia26.eia26 .guten-form-input .label-wrapper{position:absolute;width:1px;height:1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.eia26.eia26 .input-helper{display:none}
.eia26.eia26 .validation-error{display:none;font-size:14px;color:var(--rosa);margin-top:.35rem}
.eia26.eia26 .guten-form-input.invalid .validation-error{display:block}

/* Los inputs heredan el estilo de la maqueta; se neutraliza lo que trae el plugin. */
.eia26.eia26 .guten-form-input .main-wrapper{position:relative}
.eia26.eia26 .gutenverse-input{font-family:var(--body);font-size:16px;padding:.78rem .85rem;
  background:#F1F5F8;border:1px solid #E3EAEF;border-radius:9px;color:var(--tinta);width:100%;
  line-height:1.45;margin:0}
.eia26.eia26 .gutenverse-input:focus{border-color:var(--rosa);background:var(--blanco);outline:none}
.eia26.eia26 textarea.gutenverse-input{resize:vertical;min-height:74px}
/* Gutenverse inyecta un <style> en el cuerpo con Arial para el área de texto, y
   por ir después ganaba a la regla de arriba: el comentario salía en otra letra
   que el resto del formulario. Se le añade la clase del contenedor para superarlo. */
.eia26.eia26 .guten-form-input-textarea .main-wrapper .gutenverse-input,
.eia26.eia26 .guten-form-input-textarea .main-wrapper .gutenverse-input::placeholder{
  font-family:var(--body)}

/* Los dos desplegables (tamaño de empresa y plan de interés) no son <select>
   nativos: Choices.js los oculta y pinta sus propios divs con la hoja del plugin.
   Sin esto quedaban con el aspecto de fábrica al lado del resto de campos —fondo
   blanco frente a #F1F5F8, esquina de 2,5 px frente a 9, 43 px de alto frente a
   50 y el texto en un gris más claro—, así que se replica el mismo tratamiento. */
.eia26.eia26 .choices{margin:0;width:100%}
/* La hoja de Choices carga DESPUÉS de esta y empata en especificidad (tres clases
   contra dos clases y un atributo), así que sus paddings ganaban por orden de
   aparición y el campo salía 18 px más bajo. Se añade el atributo para desempatar. */
.eia26.eia26 .choices[data-type*="select-one"] .choices__inner{background:#F1F5F8;
  border:1px solid #E3EAEF;border-radius:9px;padding:.78rem 1.9rem .78rem .85rem;
  min-height:0;font-size:16px;line-height:1.45}
.eia26.eia26 .choices[data-type*="select-one"].is-open .choices__inner,
.eia26.eia26 .choices[data-type*="select-one"].is-focused .choices__inner{border-color:var(--rosa);
  background:var(--blanco);border-radius:9px}
/* En bloque, no en línea: como inline-block el navegador le reservaba debajo el
   hueco del descendente de la línea base y el campo salía 6 px más alto. */
.eia26.eia26 .choices__list--single{padding:0;display:block}
/* En una línea: «Tamaño de tu empresa» se partía en dos y estiraba el campo. */
.eia26.eia26 .choices__list--single .choices__item{font-family:var(--body);color:var(--tinta);
  font-size:16px;line-height:1.45;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Mientras no se elige nada, el mismo gris que los placeholders de los demás campos. */
.eia26.eia26 .choices__list--single .choices__placeholder{color:#8496A3;opacity:1}
.eia26.eia26 .choices[data-type*="select-one"]::after{border-top-color:#8496A3;right:14px}
.eia26.eia26 .choices[data-type*="select-one"].is-open::after{border-bottom-color:#8496A3;
  border-top-color:transparent}
.eia26.eia26 .choices__list--dropdown{border:1px solid #E3EAEF;border-radius:9px;margin-top:5px;
  box-shadow:0 12px 28px rgba(4,18,28,.13);overflow:hidden}
.eia26.eia26 .choices__list--dropdown .choices__item{font-family:var(--body);font-size:16px;
  color:var(--tinta);padding:.6rem .85rem}
.eia26.eia26 .choices__list--dropdown .choices__item--selectable.is-highlighted{
  background:#F1F5F8;color:var(--navy)}
.eia26.eia26 .choices__list--dropdown .choices__item--selectable::after{display:none}

/* La casilla opcional, con el mismo tratamiento que el resto de la página. */
.eia26.eia26 .guten-gdpr-wrapper{display:grid;grid-template-columns:auto 1fr;gap:.55rem;
  align-items:center;font-size:14px;color:var(--gris);line-height:1.5}
.eia26.eia26 .gutenverse-input-gdpr{width:22px;height:22px;accent-color:var(--rosa);margin:0}
.eia26.eia26 .guten-gdpr-label{font-size:14px;color:var(--gris)}

/* La 1.ª capa de protección de datos, con el tamaño del texto legal. */
.eia26.eia26 .iacta-capa-basica{font-size:var(--legal);line-height:1.45;color:var(--gris);margin:0}
.eia26.eia26 .iacta-capa-basica a{color:var(--gris);text-decoration:underline}

/* El botón de envío, idéntico al resto de botones rosas de ancho completo. */
.eia26.eia26 .guten-submit-wrapper button{display:inline-flex;align-items:center;
  justify-content:center;width:100%;font-family:var(--body);font-weight:800;font-size:15px;
  padding:.85rem 1.7rem;border:2px solid transparent;border-radius:999px;cursor:pointer;
  background:var(--rosa);color:var(--blanco);box-shadow:0 8px 20px rgba(193,20,92,.22);
  transition:background .2s ease,transform .2s ease}
.eia26.eia26 .guten-submit-wrapper button:hover{background:var(--rosa-deep);transform:translateY(-2px)}
.eia26.eia26 .guten-submit-wrapper button:active{transform:translateY(1px)}

/* Sobre el fondo oscuro del cierre, el texto legal necesita aclararse. */
.eia26.eia26 .cierre .tarjeta .iacta-capa-basica,
.eia26.eia26 .cierre .tarjeta .guten-gdpr-label{color:var(--gris)}

@media(max-width:1024px){
  .eia26.eia26 .gutenverse-input{font-size:16px}
  .eia26.eia26 .guten-gdpr-wrapper{min-height:44px}
  /* 16 px también en los desplegables: por debajo, iOS hace zoom al abrirlos.
     El primer selector lleva el atributo porque la regla base también lo lleva y
     una media query no rompe empates de especificidad. */
  .eia26.eia26 .choices[data-type*="select-one"] .choices__inner,
  .eia26.eia26 .choices__list--single .choices__item,
  .eia26.eia26 .choices__list--dropdown .choices__item{font-size:16px}
}

/* ═════════════════════════════════════════════════════════════════════════════

/* ═════════════════════════════════════════════════════════════════════════════
   COMPONENTES PROPIOS DE ESTA PÁGINA (nada de esto existe en /compliance-ia/)
   ═════════════════════════════════════════════════════════════════════════════ */

/* ── Secciones oscuras: el degradado de marca va en la hoja, no inline ─────── */
.eia26.eia26 .oscura{background:radial-gradient(110% 150% at 18% 8%,var(--navy) 0%,var(--navy-night) 100%);color:var(--blanco)}

/* Por debajo de 860 px la geometría no cabe: la constelación pasa a lista y el
   núcleo va el primero, que es el orden en que se lee de verdad. */

/* ═════════════════════════════════════════════════════════════════════════════
   v4 · 15-sep-2026 · Javier pide seguir la guía de la casa y cambia cinco
   secciones, con dos capturas suyas delante.

   LA GUÍA, MEDIDA EN PRODUCCIÓN (no de memoria, 15-sep):
     · El MENÚ del sitio va a 1140 px (max-width del bloque 2201) y el contenido
       de las páginas a 1400 px, que es `--container` del sistema iv4 (W33). Son
       dos anchos distintos a propósito. El HERO es el único sitio donde se ven
       juntos, porque el menú flota encima: por eso ahí el contenido se estrecha
       a 1140 y alinea con el logo y los enlaces. En el resto manda 1400.
     · Escala de W33, un tamaño por ROL y no por sección:
       eyebrow 18 · chip/miga/micro 12 (nunca por debajo de 11, W28) ·
       lead y texto de sección 17/1.65 · título de tarjeta 22/1.2 ·
       título junto a icono 17/1.35 · descripción 14/1.65 · h1 46 · h2 33.
   ═════════════════════════════════════════════════════════════════════════════ */

/* ── El hero alinea con el menú; el resto de la página, a 1400 ─────────────── */
.eia26.eia26 .hero .env{width:min(100% - 2.5rem,1140px)}

/* ── Rótulo de opción, para que Javier sepa qué está mirando ──────────────── */
.eia26.eia26 .opcion__lab{margin:2rem 0 1rem;font-size:12px;font-weight:700;color:var(--gris);
  letter-spacing:.04em;border-top:1px dashed var(--linea);padding-top:1rem}
.eia26.eia26 .opcion__lab b{display:inline-block;background:var(--navy);color:var(--blanco);
  border-radius:6px;padding:.2rem .55rem;margin-right:.5rem;letter-spacing:.06em}

/* ═════════════════════════════════════════════════════════════════════════════
   v5 · 15-sep-2026 · antetítulo según la regla escrita, y tres secciones más
   ═════════════════════════════════════════════════════════════════════════════ */

/* ── El antetítulo, como manda W33 ─────────────────────────────────────────── */
/* «Estos pretítulos siempre son más pequeños, lo pone en algún lado de las
   instrucciones»: está en el playbook, tabla de escala W33 —
   «Etiqueta / eyebrow · 18 px escritorio · 12 px móvil · Plein 700,
   letter-spacing .05em (móvil .04em), mayúsculas, rosa». Aquí estaba en Nunito
   800 con .14em de tracking, que a 18 px ocupa un 35 % más de ancho y parece
   mucho mayor. El tamaño era correcto; lo que fallaba era la familia y el
   espaciado. */
/* 25-sep: 18 → 12 px en escritorio por decisión de Javier («demasiado grandes»); W33 actualizada. */
.eia26.eia26 .eyebrow{font-family:var(--display);font-weight:700;font-size:12px;
  letter-spacing:.05em;text-transform:uppercase;color:var(--rosa);margin:0 0 .9rem}
@media(max-width:1024px){.eia26.eia26 .eyebrow{font-size:12px;letter-spacing:.04em}}

/* El rosa sobre azul lo prohíbe el sistema visual («el rosa NUNCA escribe sobre
   azules»; sobre navy escribe el verde marca). Aquí además no llegaba a 4,5:1.
   Va en blanco con un candado delante, que es lo que lo distingue del verde de
   «versión vigente». */

/* La opacidad al 50 % dejaba esta fila en 4,1:1 y 2,7:1 sobre el panel. El
   «apagado» se hace con color, no con opacidad, que también apaga el contraste. */

.eia26.eia26 .auto{background:var(--agua-suave);border-block:1px solid rgba(87,182,180,.5)}
.eia26.eia26 .auto__in{display:grid;grid-template-columns:1.25fr auto;gap:2.2rem;align-items:center}
@media(max-width:820px){.eia26.eia26 .auto__in{grid-template-columns:1fr;gap:1.6rem}}
.eia26.eia26 .auto h2{color:var(--navy)}
.eia26.eia26 .auto p{margin-top:.8rem;color:#3F5C68}
.eia26.eia26 .auto{background:var(--agua-suave);border-block:1px solid rgba(87,182,180,.45);
  background-image:radial-gradient(700px 320px at 88% 10%,rgba(87,182,180,.28),transparent 65%)}
.eia26.eia26 .auto__in{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,4vw,3.4rem);align-items:center}
@media(max-width:900px){.eia26.eia26 .auto__in{grid-template-columns:1fr;gap:2rem}}
.eia26.eia26 .auto__badge{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--rosa);background:var(--blanco);
  border:1px solid rgba(193,20,92,.3);border-radius:999px;
  padding:.35rem .85rem;margin-bottom:1rem}
.eia26.eia26 .auto h2{color:var(--navy)}
.eia26.eia26 .auto p{margin-top:.9rem;color:#3D5966}
.eia26.eia26 .auto p b{color:var(--navy)}
.eia26.eia26 .auto__cta{display:flex;align-items:center;gap:1.1rem;flex-wrap:wrap;margin-top:1.7rem}
.eia26.eia26 .auto__nota{font-size:14px;font-weight:700;color:#41707A}
.eia26.eia26 .mock{background:#fff;border-radius:18px;border:1px solid rgba(15,65,92,.1);
  box-shadow:0 22px 50px rgba(5,36,52,.14);padding:1.5rem 1.6rem;transform:rotate(-1.1deg);
  transition:transform .3s ease}
.eia26.eia26 .mock:hover{transform:rotate(0deg)}
.eia26.eia26 .mock__top{display:flex;justify-content:space-between;align-items:center;
  padding-bottom:.9rem;border-bottom:1px solid var(--linea)}
.eia26.eia26 .mock__t{font-family:var(--display);font-weight:700;font-size:14px;color:var(--navy)}
.eia26.eia26 .mock__f{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:#5f6b76;background:#F1F5F8;border-radius:6px;padding:.22rem .5rem}
.eia26.eia26 .mock__tit{display:flex;align-items:center;gap:1rem;padding:1.2rem 0}
.eia26.eia26 .mock__tit b{font-family:var(--display);font-weight:700;font-size:3.2rem;color:var(--rosa);line-height:1}
.eia26.eia26 .mock__tit span{font-size:14px;color:var(--gris);line-height:1.4}
.eia26.eia26 .mock__filas{display:grid;gap:.55rem}
.eia26.eia26 .mock__fila{display:flex;justify-content:space-between;align-items:center;gap:1rem;
  font-size:14px;color:var(--navy);background:#F7FAFB;border-radius:9px;padding:.6rem .8rem}
.eia26.eia26 .sem{width:11px;height:11px;border-radius:50%;flex:none}
.eia26.eia26 .sem--rojo{background:#D64560}
.eia26.eia26 .sem--ambar{background:#E6A33C}
.eia26.eia26 .sem--verde{background:#57B6B4}
.eia26.eia26 .mock__pie{margin-top:1.1rem;font-size:12px;color:#5f6b76;text-align:center}
/* ═════════════════════════════════════════════════════════════════════════════
   v6 · 15-sep-2026 · tres ajustes de Javier
   ═════════════════════════════════════════════════════════════════════════════ */

/* ── 1 · Intro: sin botones, sin líneas, cifras al ancho del título ────────── */
/* La rejilla reproduce la referencia que pasó: celdas redondeadas en cuadrícula,
   unas con foto y otras vacías con trama, el sello en el centro y dos píldoras
   con flecha. Las fotos son de posts del blog, provisionales. */
.eia26.eia26 .intro2__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
  gap:clamp(2rem,5vw,4rem);align-items:center}
.eia26.eia26 .intro2__txt>p:not(.eyebrow){margin-top:1rem;color:var(--gris);font-size:17px;line-height:1.65}
/* Sin línea separadora y en cuatro columnas iguales, para que la fila mida
   exactamente lo que mide el titular de encima. */
.eia26.eia26 .cifras4{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;margin:2.4rem 0 0}
.eia26.eia26 .cifras4 div{display:grid;gap:.2rem}
.eia26.eia26 .cifras4 dt{font-family:var(--display);font-weight:700;font-size:2.2rem;line-height:1;
  color:var(--navy);font-variant-numeric:tabular-nums}
.eia26.eia26 .cifras4 dd{margin:0;font-size:12px;font-weight:700;color:var(--gris);line-height:1.35}
.eia26.eia26 .rej{position:relative;padding:1.5rem clamp(1rem,3vw,2.2rem)}
.eia26.eia26 .rej__g{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.eia26.eia26 .rej__g>*{aspect-ratio:1;border-radius:18px;margin:0;overflow:hidden}
.eia26.eia26 .rej__g i{border:1px dashed #CBD8E0;
  background:repeating-linear-gradient(-45deg,transparent,transparent 5px,rgba(15,65,92,.045) 5px,rgba(15,65,92,.045) 10px)}
.eia26.eia26 .rej__f{box-shadow:0 12px 26px rgba(5,36,52,.16);transition:transform .3s ease}
.eia26.eia26 .rej__f:hover{transform:translateY(-4px) scale(1.03)}
.eia26.eia26 .rej__f img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1) contrast(1.04)}
.eia26.eia26 .rej__f:hover img{filter:none}
.eia26.eia26 .rej__c{display:grid;place-items:center;background:var(--blanco);border:1px solid var(--linea);
  font-family:var(--display);font-weight:700;font-size:14px;letter-spacing:.06em;color:var(--navy);
  box-shadow:0 14px 30px rgba(5,36,52,.14)}
.eia26.eia26 .rej__pil{position:absolute;z-index:2;background:var(--navy-night);color:var(--blanco);
  font-size:12px;font-weight:700;padding:.5rem .9rem;border-radius:999px;white-space:nowrap;
  box-shadow:0 10px 24px rgba(4,18,28,.25)}
.eia26.eia26 .rej__pil::after{content:"";position:absolute;width:0;height:0;border:6px solid transparent;top:50%;margin-top:-6px}
.eia26.eia26 .rej__pil--a{left:0;top:19%}
.eia26.eia26 .rej__pil--a::after{right:-9px;border-left-color:var(--navy-night)}
.eia26.eia26 .rej__pil--b{right:0;bottom:19%}
.eia26.eia26 .rej__pil--b::after{left:-9px;border-right-color:var(--navy-night)}

/* La banda del diseño legal: sin línea de separación y sin punto final. */
.eia26.eia26 .legal2{margin-top:clamp(3rem,6vw,5rem);text-align:center}
.eia26.eia26 .legal2__k{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--gris)}
.eia26.eia26 .legal2__f{font-family:var(--display);font-weight:700;color:var(--navy);
  font-size:clamp(2rem,5.5vw,4.2rem);line-height:1.05;letter-spacing:-.02em;margin-top:.8rem}
.eia26.eia26 .legal2__f em{font-style:italic;color:var(--rosa)}
.eia26.eia26 .legal2__s{max-width:52ch;margin:1.2rem auto 0;font-size:17px;line-height:1.65;color:var(--gris)}
@media(max-width:1000px){
  .eia26.eia26 .intro2__grid{grid-template-columns:1fr}
  .eia26.eia26 .rej{padding:1.5rem 0}
}
@media(max-width:700px){
  /* Cinco columnas cuadradas no caben en 390 px. Fuera las celdas de trama, que
     son decorado: quedan las seis fotos y el sello en tres columnas. */
  .eia26.eia26 .rej__g{grid-template-columns:repeat(3,1fr);gap:8px}
  .eia26.eia26 .rej__g i{display:none}
  /* Seis fotos más el sello son siete celdas: en tres columnas la séptima se queda
     sola en su fila. Se cae una foto y se adelanta otra, y quedan dos filas llenas
     con el sello justo en el centro. */
  .eia26.eia26 .rej__g .rej__f:nth-of-type(4){order:-1}
  .eia26.eia26 .rej__g .rej__f:nth-of-type(6){display:none}
  .eia26.eia26 .rej__pil{position:static;display:inline-block;margin:0 0 .8rem}
  .eia26.eia26 .rej__pil--b{margin:.8rem 0 0}
  .eia26.eia26 .rej__pil::after{display:none}
  .eia26.eia26 .cifras4{grid-template-columns:repeat(2,1fr);gap:1.4rem}
}

/* ── 2 · El proceso: el diseño de la página actual, mejorado ───────────────── */
/* Cuatro pasos en fila con el icono arriba y una línea discontinua uniéndolos,
   igual que hoy en /consultoria-inteligencia-artificial/. Lo que cambia: los
   textos (ahora dicen lo que se hace de verdad), el alineado a la izquierda en
   vez de centrado —se lee mejor y respeta W25— y una entrada muy corta. */
.eia26.eia26 .pasos{list-style:none;margin:2.6rem 0 0;padding:0;position:relative;
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.2rem,3vw,2.4rem)}
/* Un tramo por paso, del borde de un icono al siguiente. El 12,5 % de antes daba
   por hecho que el icono iba centrado en su columna, y va pegado a la izquierda:
   la línea empezaba 127 px por delante del primer icono y se pasaba 98 del último.
   Medido en el navegador, no a ojo. */
.eia26.eia26 .paso:not(:last-child)::before{content:"";position:absolute;
  left:64px;right:calc(8px - clamp(1.2rem,3vw,2.4rem));top:27px;height:2px;
  background:repeating-linear-gradient(90deg,#C6D4DD 0 6px,transparent 6px 12px)}
.eia26.eia26 .paso{position:relative}
.eia26.eia26 .paso__i{position:relative;z-index:1;display:grid;place-items:center;width:56px;height:56px;
  border-radius:16px;background:var(--blanco);border:1px solid var(--linea);color:var(--navy);
  box-shadow:0 8px 20px rgba(5,36,52,.07);transition:border-color .25s ease,color .25s ease,transform .25s ease}
.eia26.eia26 .paso__i svg{width:26px;height:26px}
.eia26.eia26 .paso:hover .paso__i{border-color:var(--agua);color:var(--agua);transform:translateY(-3px)}
.eia26.eia26 .paso h3{font-size:17px;line-height:1.35;color:var(--navy);margin-top:1.1rem;letter-spacing:0}
.eia26.eia26 .paso p{font-size:14px;line-height:1.65;color:var(--gris);margin-top:.5rem}
.eia26.eia26 .pasos__pie{margin-top:2.4rem;font-size:14px;line-height:1.65;color:var(--gris);max-width:70ch}
@media(max-width:900px){
  .eia26.eia26 .pasos{grid-template-columns:1fr 1fr;gap:2rem 1.4rem}
  .eia26.eia26 .paso:not(:last-child)::before{display:none}
}
@media(max-width:560px){.eia26.eia26 .pasos{grid-template-columns:1fr}}

/* ═════════════════════════════════════════════════════════════════════════════
   v7 · 15-sep-2026 · la ronda larga de Javier
   Fuera: las dos firmas (sección entera) y la cifra «2 firmas en cada proceso».
   Nuevo: rejilla como la referencia (marco degradado, estrellas del logo,
   píldoras pegadas), dos opciones de «punto de partida», tres opciones más de
   «proceso», la red con trece nodos, los casos con foto grande y navegación, y
   tres opciones de «cómo se contrata».
   ═════════════════════════════════════════════════════════════════════════════ */

/* ── Rótulo de opción sobre fondo oscuro ──────────────────────────────────── */
.eia26.eia26 .opcion__lab--osc{color:#9FB8C6;border-top-color:rgba(255,255,255,.22)}
.eia26.eia26 .opcion__lab--osc b{background:var(--agua);color:var(--navy-night)}

/* ── 1 · Intro: tres cifras y la rejilla de la referencia ─────────────────── */
/* Tres columnas, no cuatro: se va «2 · firmas en cada proceso». La fila sigue
   midiendo exactamente lo que el titular porque el grid ocupa el 100 % de la
   columna de texto, no un ancho propio. */
.eia26.eia26 .cifras4{grid-template-columns:repeat(3,auto);justify-content:space-between}
@media(max-width:700px){
  .eia26.eia26 .cifras4{grid-template-columns:repeat(3,auto);gap:.7rem}
  .eia26.eia26 .cifras4 dt{font-size:1.5rem}
  .eia26.eia26 .cifras4 dd{font-size:11.5px}
}

/* La referencia tiene un marco de transparencia: las celdas de trama se apagan
   hacia fuera, y las esquinas casi desaparecen. Se resuelve por posición en la
   cuadrícula, que es fija (5 × 5), no por una máscara: así no depende del
   soporte de `mask` ni afecta a las fotos. */
.eia26.eia26 .rej{padding:0}
.eia26.eia26 .rej__g>i{opacity:.5}
.eia26.eia26 .rej__g>i:nth-child(7),
.eia26.eia26 .rej__g>i:nth-child(19){opacity:1}
.eia26.eia26 .rej__g>i:nth-child(1),
.eia26.eia26 .rej__g>i:nth-child(5),
.eia26.eia26 .rej__g>i:nth-child(21),
.eia26.eia26 .rej__g>i:nth-child(25){opacity:.2}
.eia26.eia26 .rej__g>i:nth-child(2),
.eia26.eia26 .rej__g>i:nth-child(4),
.eia26.eia26 .rej__g>i:nth-child(22),
.eia26.eia26 .rej__g>i:nth-child(24){opacity:.32}
/* El sello del centro: las dos estrellas del logotipo, en navy sobre blanco. */
.eia26.eia26 .rej__c{padding:22%}
.eia26.eia26 .rej__c svg{width:100%;height:100%;color:var(--navy)}
/* Las píldoras, pegadas a las fotos como en la referencia: el borde interior de
   cada una cae justo en el límite de la columna de fotos (40 % y 60 %), y la
   punta de la flecha toca la celda. Fondo: navy con degradado a más oscuro
   —nunca negro— y la flecha del color del extremo por el que sale. */
.eia26.eia26 .rej__pil{background:linear-gradient(90deg,var(--navy),var(--navy-night));
  box-shadow:0 12px 26px rgba(4,18,28,.3)}
.eia26.eia26 .rej__pil--a{left:auto;right:61%;top:26%}
.eia26.eia26 .rej__pil--b{left:61%;right:auto;bottom:26%;
  background:linear-gradient(90deg,var(--navy-night),var(--navy))}
@media(max-width:1000px){.eia26.eia26 .rej{padding:0}}
@media(max-width:700px){
  .eia26.eia26 .rej__pil{background:linear-gradient(90deg,var(--navy),var(--navy-night))}
}

/* ── El punto de partida · Opción A: la línea de flotación ────────────────── */
.eia26.eia26 .flot__grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,4rem);align-items:center;margin-top:1.4rem}

@media(max-width:900px){.eia26.eia26 .flot__grid{grid-template-columns:1fr}}

/* ── El punto de partida · Opción B: los cimientos ────────────────────────── */
.eia26.eia26 .cim__cab{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(1.4rem,4vw,3rem);
  align-items:end;margin-top:1.4rem}
.eia26.eia26 .cim{list-style:none;margin:2.4rem auto 0;padding:0;display:grid;gap:.55rem;
  max-width:820px}
.eia26.eia26 .cim__p{position:relative;display:grid;
  grid-template-columns:44px 44px minmax(0,1fr) auto;gap:1rem;align-items:center;
  border-radius:12px;padding:.95rem 1.1rem;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  transition:transform .25s ease,border-color .25s ease,background .25s ease}
.eia26.eia26 .cim__p:hover{transform:translateX(4px);border-color:var(--agua)}
/* Cada planta es un poco más ancha que la de arriba: los cimientos se ven. */
.eia26.eia26 .cim__p:nth-child(1){width:84%;margin-inline:auto}
.eia26.eia26 .cim__p:nth-child(2){width:88%;margin-inline:auto}
.eia26.eia26 .cim__p:nth-child(3){width:92%;margin-inline:auto}
.eia26.eia26 .cim__p:nth-child(4){width:96%;margin-inline:auto}
.eia26.eia26 .cim__lv{font-family:var(--display);font-weight:700;font-size:14px;color:#8FA9B8;
  letter-spacing:.06em}
.eia26.eia26 .cim__i{display:grid;place-items:center;width:44px;height:44px;border-radius:11px;
  background:rgba(87,182,180,.16);color:var(--agua)}
.eia26.eia26 .cim__i svg{width:21px;height:21px}
.eia26.eia26 .cim__p b{font-size:17px;line-height:1.3;color:var(--blanco)}
.eia26.eia26 .cim__p em{font-style:normal;font-size:14px;line-height:1.45;color:#B4C8D4;text-align:right}
.eia26.eia26 .cim__p--off{border-style:dashed;border-color:rgba(255,255,255,.24);background:transparent}
.eia26.eia26 .cim__p--off .cim__i{background:rgba(255,255,255,.07);color:#8FA9B8}
.eia26.eia26 .cim__p--off b{color:#9FB8C6}
.eia26.eia26 .cim__p--base{background:rgba(193,20,92,.16);border-color:rgba(193,20,92,.5);
  padding-bottom:1.6rem}
.eia26.eia26 .cim__aqui{position:absolute;left:1.1rem;bottom:-.75rem;font-size:11.5px;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;color:var(--blanco);background:var(--rosa);
  border-radius:999px;padding:.3rem .8rem}
@media(max-width:820px){
  .eia26.eia26 .cim__cab{grid-template-columns:1fr;align-items:start;gap:1rem}
  .eia26.eia26 .cim__p{grid-template-columns:38px 40px minmax(0,1fr);width:100% !important}
  .eia26.eia26 .cim__p em{grid-column:2/-1;text-align:left}
}

/* ── El proceso · Opción B: los seis meses a escala ───────────────────────── */

/* ── El proceso · Opción C: el raíl con entregables ───────────────────────── */

/* ── El proceso · Opción D: el flujo ──────────────────────────────────────── */

/* La flecha entre tarjetas se dibuja con bordes: no hace falta ningún icono. */

/* ── Con qué trabajamos: la red ───────────────────────────────────────────── */
/* Trece nodos, no cuatro: a la izquierda dónde están hoy los datos, a la derecha
   dónde se construye y abajo —dentro de la misma red— lo que sale. El núcleo
   sigue siendo la documentación del cliente, que es lo que separa el mensaje de
   esta casa del de cualquier integrador. */
.eia26.eia26 .red{position:relative;margin-top:2.6rem;aspect-ratio:1000/700;max-width:1000px;
  margin-inline:auto}
.eia26.eia26 .red__hilos{position:absolute;inset:0;width:100%;height:100%}
.eia26.eia26 .red__lat{position:absolute;top:0;width:25%;height:68%;display:grid;
  grid-template-rows:repeat(5,1fr);align-content:stretch;gap:0}
.eia26.eia26 .red__lat--i{left:0;justify-items:start}
.eia26.eia26 .red__lat--d{right:0;justify-items:end}
.eia26.eia26 .red__et{position:absolute;top:-2.1rem;font-size:11.5px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--agua);margin:0;white-space:nowrap}
.eia26.eia26 .red__lat--i .red__et{left:0}
.eia26.eia26 .red__lat--d .red__et{right:0}
.eia26.eia26 .chipn{align-self:center;width:100%;display:inline-flex;align-items:center;gap:.6rem;
  font-size:13px;font-weight:700;line-height:1.25;color:var(--blanco);
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);
  border-radius:999px;padding:.55rem .9rem;transition:border-color .25s ease,background .25s ease}
.eia26.eia26 .chipn:hover{border-color:var(--agua);background:rgba(87,182,180,.14)}
.eia26.eia26 .chipn svg{flex:none;width:18px;height:18px;color:var(--agua)}
.eia26.eia26 .chipn img{flex:none;width:24px;height:24px;background:var(--blanco);
  border-radius:7px;padding:3px}
.eia26.eia26 .red__nuc{position:absolute;left:50%;top:34%;transform:translate(-50%,-50%);
  width:26%;min-width:190px;display:grid;justify-items:center;gap:.25rem;text-align:center;
  background:linear-gradient(160deg,rgba(87,182,180,.2),rgba(87,182,180,.06));
  border:1px solid var(--agua);border-radius:18px;padding:1.3rem 1.1rem;
  box-shadow:0 0 0 8px rgba(87,182,180,.07)}
.eia26.eia26 .red__nuc svg{width:30px;height:30px;color:var(--agua)}
.eia26.eia26 .red__nuc b{font-family:var(--display);font-weight:700;font-size:17px;line-height:1.2;
  color:var(--blanco)}
.eia26.eia26 .red__nuc span{font-size:12px;color:#9FB8C6;line-height:1.3}
.eia26.eia26 .red__sal{position:absolute;left:0;right:0;bottom:0;height:24%;
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.8rem,2vw,1.4rem);align-items:stretch}
.eia26.eia26 .sal{display:grid;justify-items:center;align-content:center;gap:.3rem;text-align:center;
  background:rgba(255,255,255,.06);border:1px solid rgba(87,182,180,.4);border-radius:14px;
  padding:1rem .9rem;transition:border-color .25s ease,transform .25s ease}
.eia26.eia26 .sal:hover{border-color:var(--agua);transform:translateY(-3px)}
.eia26.eia26 .sal__i{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;
  background:rgba(87,182,180,.16);color:var(--agua);margin-bottom:.2rem}
.eia26.eia26 .sal__i svg{width:19px;height:19px}
.eia26.eia26 .sal b{font-family:var(--display);font-weight:700;font-size:17px;line-height:1.2;
  color:var(--blanco)}
.eia26.eia26 .sal span{font-size:13px;line-height:1.4;color:#B4C8D4}
@media(max-width:1000px){
  .eia26.eia26 .red{aspect-ratio:auto;display:grid;gap:1rem;margin-top:2.4rem}
  .eia26.eia26 .red__hilos{display:none}
  .eia26.eia26 .red__lat,.eia26.eia26 .red__nuc,.eia26.eia26 .red__sal{position:static;
    transform:none;width:auto;height:auto;min-width:0}
  .eia26.eia26 .red__lat{display:flex;flex-wrap:wrap;gap:.5rem;padding-top:1.9rem;position:relative}
  .eia26.eia26 .red__lat--d{justify-items:start}
  .eia26.eia26 .chipn{width:auto}
  .eia26.eia26 .red__et{top:0}
  .eia26.eia26 .red__lat--d .red__et{right:auto;left:0}
  .eia26.eia26 .red__nuc{order:-1}
  .eia26.eia26 .red__sal{grid-template-columns:1fr;margin-top:.6rem}
  .eia26.eia26 .sal{grid-template-columns:auto 1fr;justify-items:start;text-align:left;
    align-items:center;gap:.1rem 1rem}
  .eia26.eia26 .sal__i{grid-row:1/3;margin-bottom:0}
}

/* ── Casos: la ficha a la izquierda y la foto grande a la derecha ─────────── */
.eia26.eia26 .caso__cab{display:grid;grid-template-columns:1.35fr 1fr;gap:2rem;align-items:end;
  margin-bottom:2rem}
.eia26.eia26 .caso__cab>p{font-size:17px;line-height:1.65;color:var(--gris)}

@keyframes eiaEntra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

@keyframes eiaFoto{from{opacity:0;transform:scale(1.03)}to{opacity:1;transform:none}}

@media(max-width:900px){
  .eia26.eia26 .caso__cab{grid-template-columns:1fr;align-items:start;gap:1rem}
  
  
  
}

/* ── Cómo se contrata · Opción A: el recorrido ────────────────────────────── */

/* ── Cómo se contrata · Opción B: la ficha de servicio ────────────────────── */

/* El `position:relative` que levanta el texto sobre el fondo no puede alcanzar al
   propio fondo: lo sacaba del absoluto y la cabecera crecía a 1.000 px. */

/* ── Cómo se contrata · Opción C: el alcance ──────────────────────────────── */

/* ── El antetítulo sobre azul: verde marca, no rosa ───────────────────────── */
/* La regla de la v5 redeclara `.eyebrow{color:rosa}` DESPUÉS de `.eyebrow--agua`
   y con la misma especificidad, así que la modificadora perdía y el antetítulo
   salía rosa sobre navy. Lo prohíbe el sistema visual y además queda en 1,7:1.
   Viene arrastrándose desde la v5; se corrige aquí, que es lo último que lee el
   navegador. */
.eia26.eia26 .eyebrow--agua{color:var(--agua)}

/* ═════════════════════════════════════════════════════════════════════════════
   v8 · 15-sep-2026 · la ronda de Javier sobre la v7
   ═════════════════════════════════════════════════════════════════════════════ */

/* ── Punto de partida · versión 1: los cimientos van dentro de la rejilla ──── */
.eia26.eia26 .flot__grid>.cim{margin:0;max-width:none}

/* ── Punto de partida · versión 2: el plano de obra ───────────────────────── */
/* La misma idea, dibujada como una sección de obra: el edificio en trazo
   discontinuo porque aún no existe, la cota cero, y debajo los cuatro estratos
   con su profundidad. Cuanto más hondo, más oscuro y más ancho. */

/* ── La red, ahora con seis nodos por lado ────────────────────────────────── */
.eia26.eia26 .red{aspect-ratio:1000/760}
.eia26.eia26 .red__lat{grid-template-rows:repeat(6,1fr)}
.eia26.eia26 .red__nuc{top:34%}
.eia26.eia26 .red__sal{height:24%}
@media(max-width:1000px){.eia26.eia26 .red{aspect-ratio:auto}}

/* ── Con qué trabajamos · diseño B: el recorrido en cuatro tramos ─────────── */

/* ── Con qué trabajamos · diseño C: el panel de conexiones ────────────────── */

@keyframes eiaPulso{0%{left:0;opacity:0}12%{opacity:1}88%{opacity:1}100%{left:100%;opacity:0}}

/* ── Casos: un solo bloque, sin líneas y sin flechas ──────────────────────── */
/* «Deberían estar en el mismo bloque, no en bloques separados»: un contenedor
   con `overflow:hidden`, el texto a la izquierda y la foto a sangre contra el
   borde derecho, sin hueco entre las dos. Los rótulos son el único mando: las
   flechas redondas fuera. */

@keyframes eiaEntra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

@keyframes eiaFoto{from{opacity:0;transform:scale(1.03)}to{opacity:1;transform:none}}

/* ── Cómo se contrata: el patrón de /compliance-ia/, con el precio delante ── */
/* Clonado de compliance.css con el namespace cambiado, no compartido: esa página
   recibe tráfico de pago y no se toca desde aquí (W81). */
.eia26.eia26 .servicios{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:2.4rem;
  align-items:stretch}
.eia26.eia26 .plan{border:1px solid var(--linea);border-radius:var(--radio);padding:2rem 1.85rem;
  display:flex;flex-direction:column;background:var(--blanco)}
.eia26.eia26 .plan__cab{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem}
.eia26.eia26 .plan__meta{text-align:right;flex:none;max-width:46%}
.eia26.eia26 .plan__meta b{display:block;font-family:var(--display);font-weight:700;font-size:1.45rem;
  line-height:1;color:var(--navy)}
.eia26.eia26 .plan__meta span{display:block;font-size:12px;color:var(--gris);line-height:1.4;
  margin-top:.25rem}
.eia26.eia26 .plan--ancla{background:radial-gradient(120% 140% at 20% 8%,var(--navy) 0%,var(--navy-night) 100%);
  border-color:transparent;color:var(--blanco)}
.eia26.eia26 .plan--ancla h3{color:var(--blanco)}
.eia26.eia26 .plan--ancla .plan__meta b{color:var(--agua);font-size:17px}
.eia26.eia26 .plan--ancla .plan__meta span{color:#9FB8C6}
.eia26.eia26 .plan__tag{align-self:flex-start;font-size:12px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--navy);background:var(--gris-suave);
  border:1px solid var(--linea);border-radius:999px;padding:.35rem .8rem;line-height:1.3}
.eia26.eia26 .plan--ancla .plan__tag{background:transparent;color:var(--agua);border-color:var(--agua)}
.eia26.eia26 .plan h3{margin-top:1.1rem;font-size:26px;line-height:1.15;letter-spacing:-.01em}
.eia26.eia26 .plan__para{margin-top:.95rem;font-size:17px;color:var(--gris);line-height:1.6}
.eia26.eia26 .plan__para b{color:var(--navy);font-weight:800}
.eia26.eia26 .plan--ancla .plan__para{color:#C1D5DF}
.eia26.eia26 .plan--ancla .plan__para b{color:var(--agua)}
.eia26.eia26 .plan__lista{list-style:none;margin:1.4rem 0 0;padding:0;display:grid;gap:.65rem;
  align-content:start}
.eia26.eia26 .plan__lista li{display:grid;grid-template-columns:auto 1fr;gap:.6rem;font-size:14px;
  line-height:1.55;color:var(--tinta)}
.eia26.eia26 .plan--ancla .plan__lista li{color:#C7DAE3}
.eia26.eia26 .tick{color:var(--agua);font-weight:800}
.eia26.eia26 .plan__cta{margin-top:auto;padding-top:1.6rem}
.eia26.eia26 .btn--ancho{width:100%}
.eia26.eia26 .plan__pie{margin-top:.85rem;font-size:12px;line-height:1.5;color:var(--gris)}
.eia26.eia26 .plan--ancla .plan__pie{color:#8FA9B8}
/* Las dos tarjetas miden lo mismo aunque el texto no: si no, la de la derecha
   arranca su lista una línea más abajo y se nota. */
.eia26.eia26 .plan__para{min-height:7.8rem}
.eia26.eia26 .plan__lista{min-height:13.2rem}
/* En una línea, como pidió Javier: sin tope de ancho y un punto más pequeña,
   para que quepa entera en los 1.400 de la columna. */
.eia26.eia26 .servicios__pie{margin-top:1.6rem;font-size:13.5px;line-height:1.6;color:var(--gris)}
@media(max-width:1180px){.eia26.eia26 .servicios__pie{font-size:14px;line-height:1.65}}
@media(max-width:940px){
  .eia26.eia26 .servicios{grid-template-columns:1fr}
  .eia26.eia26 .plan__para,.eia26.eia26 .plan__lista{min-height:0}
}
@media(max-width:560px){
  .eia26.eia26 .plan__cab{flex-direction:column;align-items:flex-start;gap:.7rem}
  .eia26.eia26 .plan__meta{text-align:left;max-width:100%}
}

/* ═════════════════════════════════════════════════════════════════════════════
   v9 · 15-sep-2026 · la ronda corta sobre la v8
   ═════════════════════════════════════════════════════════════════════════════ */

/* ── La regla, como comentario y no como titular ──────────────────────────── */
/* Iba en Plein a 2 rem con un tope de 24 caracteres, y por eso se partía en tres
   líneas cortas. Ahora es una frase entrecomillada, más pequeña, que llega hasta
   el final de su columna. */
.eia26.eia26 .flot__cita{margin-top:1.9rem;font-family:var(--body);font-size:19px;
  line-height:1.6;font-style:italic;color:#C1D5DF;padding-left:1.1rem;
  border-left:3px solid var(--rosa)}

/* ── La etiqueta de la planta baja, en la esquina de arriba a la izquierda ── */
.eia26.eia26 .cim__p--base{padding-bottom:.95rem;padding-top:1.35rem}
.eia26.eia26 .cim__aqui{left:-.7rem;top:-.7rem;bottom:auto}
@media(max-width:820px){.eia26.eia26 .cim__aqui{left:0}}

/* ── Los dos rótulos, por fuera de las píldoras ───────────────────────────── */
/* Antes iban encima de cada columna, alineados con el borde de las tarjetas. Van
   en vertical por el lado de fuera: el diagrama mide 1.000 px dentro de una
   columna de 1.400, así que hay 200 px de margen a cada lado donde caben sin
   empujar nada. */
/* En horizontal, no girados: el sitio era el bueno, la dirección no. El
   diagrama mide 1.000 px como mucho; por debajo de 1.360 de ventana ya no queda
   margen fuera para meterlos, y entonces vuelven encima de su columna. */
.eia26.eia26 .red__et{white-space:normal;line-height:1.35}
@media(min-width:1360px){
  .eia26.eia26 .red__et{top:50%;bottom:auto;width:150px;transform:translateY(-50%)}
  .eia26.eia26 .red__lat--i .red__et{left:-10.6rem;right:auto;text-align:right}
  .eia26.eia26 .red__lat--d .red__et{right:-10.6rem;left:auto;text-align:left}
}

/* ── El flujo de la red: los puntos que entran hacia el núcleo ────────────── */
/* La misma idea que el panel de conexiones, aquí sobre los propios hilos. Lo
   pinta SMIL sobre cada trazado; con «reducir movimiento» no se dibujan. */
@media(prefers-reduced-motion:reduce){.eia26.eia26 .red__flujo{display:none}}

@media(max-width:1000px){
  .eia26.eia26 .red__et{writing-mode:horizontal-tb;top:0;transform:none}
  .eia26.eia26 .red__lat--i .red__et{left:0;transform:none}
  .eia26.eia26 .red__lat--d .red__et{right:auto;left:0;transform:none}
}

/* ═════════════════════════════════════════════════════════════════════════════
   v10 · 15-sep-2026 · los casos en blanco, con las pestañas arriba
   ═════════════════════════════════════════════════════════════════════════════ */

/* Las pestañas: iguales en las dos opciones. Arriba, no debajo, y la activa se
   rellena en navy para que se vea desde lejos cuál estás leyendo. */
.eia26.eia26 .ca__tabs{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.6rem}
.eia26.eia26 .ca__tabs button{font-family:var(--body);font-size:13px;
  font-weight:800;color:var(--navy);background:var(--blanco);border:1px solid var(--linea);
  border-radius:999px;padding:.6rem 1.1rem;cursor:pointer;
  transition:background .2s ease,color .2s ease,border-color .2s ease}
.eia26.eia26 .ca__tabs button:hover{border-color:var(--navy)}
.eia26.eia26 .ca__tabs button.is-on{background:var(--navy);
  border-color:var(--navy);color:var(--blanco)}

/* ── Opción A: la foto a la izquierda y la historia a la derecha, sobre blanco ─ */
.eia26.eia26 .ca__p{display:none;animation:eiaEntra .4s ease both}
.eia26.eia26 .ca__p.is-on{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1.6rem,3.4vw,3rem);align-items:center;background:var(--blanco);
  border-radius:18px;padding:clamp(1.2rem,2.4vw,1.6rem);box-shadow:0 18px 44px rgba(5,36,52,.08)}
@keyframes eiaEntra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.eia26.eia26 .ca__p{animation:none}}
.eia26.eia26 .ca__fo{margin:0;border-radius:14px;overflow:hidden;aspect-ratio:4/3}
.eia26.eia26 .ca__fo img{width:100%;height:100%;object-fit:cover;display:block}
.eia26.eia26 .ca__txt{padding-right:clamp(0rem,1.6vw,1.4rem)}
.eia26.eia26 .ca__k{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:#1F6E6C;margin-bottom:.9rem}
.eia26.eia26 .ca__p h3{font-size:clamp(1.3rem,2.4vw,1.75rem);line-height:1.2;letter-spacing:-.01em}
.eia26.eia26 .ca__txt>p{margin-top:.9rem;font-size:17px;line-height:1.65;color:var(--gris)}
.eia26.eia26 .ca__d{list-style:none;margin:1.6rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.9rem 2.2rem}
.eia26.eia26 .ca__d li{display:grid;gap:.15rem;min-width:0}
.eia26.eia26 .ca__d b{font-family:var(--display);font-weight:700;font-size:1.6rem;line-height:1;
  color:var(--navy);font-variant-numeric:tabular-nums}
.eia26.eia26 .ca__d span{font-size:12px;font-weight:700;color:var(--gris);line-height:1.35}
@media(max-width:860px){
  .eia26.eia26 .ca__p.is-on{grid-template-columns:1fr}
  .eia26.eia26 .ca__txt{padding-right:0}
}

/* ── Opción B: las cifras primero, a todo el ancho, y debajo historia y foto ── */


/* ── La parte legal, en banda propia debajo de los dos planes ─────────────── */
/* Es la diferenciación de la casa y estaba enterrada en dos viñetas. Va en una
   banda con el verde marca sobre navy, que es lo que el sistema visual permite
   escribir encima del azul. */
.eia26.eia26 .legal3{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.3rem;
  align-items:start;margin-top:1.6rem;padding:1.5rem 1.6rem;border-radius:14px;
  background:var(--agua-suave);border:1px solid var(--agua)}
.eia26.eia26 .legal3__i{display:grid;place-items:center;width:46px;height:46px;border-radius:12px;
  background:var(--blanco);color:#1F6E6C;border:1px solid var(--agua)}
.eia26.eia26 .legal3__i svg{width:24px;height:24px}
.eia26.eia26 .legal3 b{display:block;font-family:var(--display);font-weight:700;font-size:19px;
  line-height:1.25;color:var(--navy)}
.eia26.eia26 .legal3 p{margin-top:.5rem;font-size:15px;line-height:1.65;color:#3D5966;max-width:88ch}
@media(max-width:620px){
  .eia26.eia26 .legal3{grid-template-columns:1fr;gap:.9rem;padding:1.2rem 1.2rem}
}

/* ── Punto de partida · versión 2: bloques blancos, mismo ancho y número ──── */
.eia26.eia26 .cim--blanco .cim__p{width:100% !important;background:var(--blanco);
  border-color:transparent;box-shadow:0 14px 34px rgba(4,18,28,.28)}
.eia26.eia26 .cim--blanco .cim__p:hover{border-color:var(--agua)}
.eia26.eia26 .cim--blanco .cim__p b{color:var(--navy)}
.eia26.eia26 .cim--blanco .cim__p em{color:var(--gris)}
.eia26.eia26 .cim--blanco .cim__lv{display:grid;place-items:center;width:30px;height:30px;
  border-radius:50%;background:var(--navy);color:var(--blanco);font-size:13px;letter-spacing:0}
.eia26.eia26 .cim--blanco .cim__i{background:var(--agua-suave);color:#1F6E6C}
.eia26.eia26 .cim--blanco .cim__p--off{background:rgba(255,255,255,.14);border:1px dashed rgba(255,255,255,.4);
  box-shadow:none}
.eia26.eia26 .cim--blanco .cim__p--off b{color:var(--blanco)}
.eia26.eia26 .cim--blanco .cim__p--off em{color:#B4C8D4}
.eia26.eia26 .cim--blanco .cim__p--off .cim__lv{background:rgba(255,255,255,.2);color:var(--blanco)}
.eia26.eia26 .cim--blanco .cim__p--off .cim__i{background:rgba(255,255,255,.14);color:var(--blanco)}
.eia26.eia26 .cim--blanco .cim__p--base{background:var(--blanco);border:2px solid var(--rosa)}
.eia26.eia26 .cim--blanco .cim__p--base .cim__lv{background:var(--rosa)}

/* ═════════════════════════════════════════════════════════════════════════════
   v14 · 15-sep-2026 · la red corregida y a 1.400, y el punto de partida más bajo
   ═════════════════════════════════════════════════════════════════════════════ */

/* ── La red ocupa toda la columna ─────────────────────────────────────────── */
/* A 1.000 px iba apretada y los rótulos tenían que salirse fuera. A 1.400 caben
   dentro, encima de su columna, y los hilos respiran. */
.eia26.eia26 .red{max-width:none;aspect-ratio:1400/700;margin-top:3.2rem}
.eia26.eia26 .red__lat{width:21.4%}
.eia26.eia26 .red__lat--d{grid-template-rows:repeat(5,1fr)}
.eia26.eia26 .red__nuc{width:20%;min-width:200px}
.eia26.eia26 .red__et{top:-2.2rem;bottom:auto;width:auto;transform:none}
.eia26.eia26 .red__lat--i .red__et{left:0;right:auto;text-align:left}
.eia26.eia26 .red__lat--d .red__et{right:0;left:auto;text-align:right}
@media(min-width:1360px){
  .eia26.eia26 .red__et{top:-2.2rem;width:auto;transform:none}
  .eia26.eia26 .red__lat--i .red__et{left:0;text-align:left}
  .eia26.eia26 .red__lat--d .red__et{right:0;text-align:right}
}
/* El orquestador, sobre el hilo que baja a las automatizaciones. Va aquí y no en
   la columna de la derecha porque no es un sitio donde se construya un asistente:
   es lo que conecta las piezas y dispara los avisos. */
.eia26.eia26 .red__orq{position:absolute;left:50%;top:59.1%;transform:translate(-50%,-50%);
  display:inline-flex;align-items:center;gap:.5rem;white-space:nowrap;
  background:#0B3247;border:1px solid var(--agua);border-radius:999px;padding:.45rem .9rem;
  font-size:13px;font-weight:700;color:var(--blanco);z-index:2}
.eia26.eia26 .red__orq img{width:22px;height:22px;background:var(--blanco);border-radius:6px;padding:2px}
.eia26.eia26 .red__orq em{font-style:normal;font-size:12px;font-weight:700;color:var(--agua)}
@media(max-width:1000px){
  .eia26.eia26 .red{aspect-ratio:auto;margin-top:2.4rem}
  .eia26.eia26 .red__orq{position:static;transform:none;align-self:start}
  .eia26.eia26 .red__lat--d{grid-template-rows:none}
}

/* ── Punto de partida: rectángulos más bajos ──────────────────────────────── */
.eia26.eia26 .cim__p{padding-block:.6rem;gap:.85rem}
.eia26.eia26 .cim__i{width:38px;height:38px;border-radius:10px}
.eia26.eia26 .cim__i svg{width:19px;height:19px}
.eia26.eia26 .cim{gap:.45rem}
.eia26.eia26 .cim--blanco .cim__lv{width:27px;height:27px;font-size:12px}
.eia26.eia26 .cim__p--base{padding-top:.95rem;padding-bottom:.6rem}

/* ── La red en móvil vertical ─────────────────────────────────────────────── */
/* Las reglas de la v14 iban después del @media de 1.000 y con la misma
   especificidad, así que en el móvil el rótulo volvía a colocarse en negativo y
   se montaba encima de la primera píldora. Y las píldoras, siendo elementos
   flexibles, se encogían hasta partir el texto en tres líneas. Este bloque va al
   final de la hoja a propósito: es lo último que lee el navegador. */
@media(max-width:1000px){
  .eia26.eia26 .red__et{position:static;top:auto;left:auto;right:auto;width:auto;
    transform:none;text-align:left;margin:0 0 .3rem}
  .eia26.eia26 .red__lat--d .red__et{text-align:left}
  /* El ancho del 21,4 % de la v14 también iba después del @media y se aplicaba
     en el móvil: la columna medía 75 px de los 350 y las píldoras se partían. */
  .eia26.eia26 .red__lat{width:auto;padding-top:0;display:flex;flex-direction:column;
    gap:.5rem;grid-template-rows:none}
  .eia26.eia26 .red__nuc{width:auto;min-width:0}
  .eia26.eia26 .chipn{width:100%;flex:none}
  .eia26.eia26 .red__orq{align-self:flex-start;width:auto}
}

/* ═════════════════════════════════════════════════════════════════════════════
   v15 · 15-sep-2026 · el hero a 1.400 y la red como lo que es: un centro con
   conexiones en los dos sentidos, no una cadena de montaje
   ═════════════════════════════════════════════════════════════════════════════ */

/* El hero pasa a medir lo mismo que el resto de la página. */
.eia26.eia26 .hero .env{width:min(100% - 2.5rem,var(--ancho))}

.eia26.eia26 .red{aspect-ratio:1400/760}
.eia26.eia26 .red__lat{height:62%}
.eia26.eia26 .red__lat--d{grid-template-rows:repeat(6,1fr)}
.eia26.eia26 .red__nuc{top:31%}
.eia26.eia26 .red__sal{height:26%;grid-template-rows:auto 1fr}
.eia26.eia26 .red__et--sal{position:static;grid-column:1/-1;margin:.5rem 0 0;text-align:center}
/* Las píldoras pequeñas: el degradado del sistema visual también es radial. */
.eia26.eia26 .rej__pil{background:radial-gradient(140% 220% at 0% 50%,var(--navy) 0%,var(--navy-night) 100%)}
.eia26.eia26 .rej__pil--b{background:radial-gradient(140% 220% at 100% 50%,var(--navy) 0%,var(--navy-night) 100%)}
@media(max-width:1000px){
  .eia26.eia26 .red{aspect-ratio:auto}
  .eia26.eia26 .red__lat{height:auto}
  .eia26.eia26 .red__sal{height:auto;grid-template-rows:none}
  .eia26.eia26 .red__et--sal{text-align:left}
}

/* ── Las líneas, siempre por debajo de píldoras y rótulos ─────────────────── */
/* Iban al mismo nivel que las columnas y se apoyaban solo en el orden del
   marcado. Con el z-index dicho se acaba la lotería. */
.eia26.eia26 .red__hilos{z-index:0}
.eia26.eia26 .red__lat,.eia26.eia26 .red__nuc,.eia26.eia26 .red__sal{z-index:2}
.eia26.eia26 .red__et{z-index:3}

/* ── La etiqueta de cada plan, un punto más pequeña ───────────────────────── */
/* 11 px es el suelo de la casa (W28): por debajo no se baja. */
.eia26.eia26 .plan__tag{font-size:11px;letter-spacing:.08em;padding:.3rem .7rem}

/* ── «Empezamos aquí», debajo del bloque y no encima del número ───────────── */
.eia26.eia26 .cim__aqui{top:auto;bottom:-.7rem;left:-.7rem}
.eia26.eia26 .cim__p--base{padding-top:.6rem;padding-bottom:.95rem}
@media(max-width:820px){.eia26.eia26 .cim__aqui{left:0}}

/* ── El paso del orden, en rosa ───────────────────────────────────────────── */
/* Es el que sostiene el argumento de la página, así que va marcado. El rosa
   sobre blanco sí escribe; la prohibición del sistema visual es sobre azules. */
.eia26.eia26 .paso--rosa .paso__i{border-color:var(--rosa);color:var(--rosa)}
.eia26.eia26 .paso--rosa:hover .paso__i{border-color:var(--rosa);color:var(--blanco);background:var(--rosa)}
.eia26.eia26 .paso--rosa h3{color:var(--rosa)}

/* La frase de la banda legal, en dos líneas. */
.eia26.eia26 .legal2__s{max-width:58ch}

/* ── Las cifras de cada caso, en cuatro columnas iguales ──────────────────── */
/* En fila flexible cada panel las colocaba en un sitio distinto y al cambiar de
   pestaña bailaban. En rejilla caen siempre en la misma posición. */
.eia26.eia26 .ca__d{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem 1.4rem;align-items:start}
.eia26.eia26 .ca__d b{font-size:1.45rem}
@media(max-width:1180px){.eia26.eia26 .ca__d{grid-template-columns:repeat(2,1fr)}}
@media(max-width:860px){.eia26.eia26 .ca__d{grid-template-columns:repeat(4,1fr)}}
@media(max-width:620px){.eia26.eia26 .ca__d{grid-template-columns:repeat(2,1fr)}}

/* ═════════════════════════════════════════════════════════════════════════════
   v20 · 16-sep-2026 · los cambios de la auditoría SEO que tocan la página
   ═════════════════════════════════════════════════════════════════════════════ */

/* ── Ancla por herramienta ────────────────────────────────────────────────── */
/* Cada píldora de la derecha tiene su id para que el post de esa herramienta
   enlace a la suya. Al llegar desde fuera se centra el diagrama, en vez de dejar
   la píldora pegada al borde de arriba con el dibujo cortado, y se enciende un
   momento para que se vea a cuál has venido. */
.eia26.eia26 .chipn[id]{scroll-margin-block:42vh}
.eia26.eia26 .chipn:target{border-color:var(--agua);background:rgba(87,182,180,.2);
  box-shadow:0 0 0 4px rgba(87,182,180,.15)}

/* ── El bloque local ──────────────────────────────────────────────────────── */
/* Burgos y Castilla y León en la propia página. La ficha de Google ya sale
   primera en los cuatro paquetes locales; lo que faltaba era que la página lo
   dijera y que el marcado lo declarara. */
.eia26.eia26 .nap{margin-top:1.8rem;padding-top:1.4rem;
  border-top:1px solid rgba(255,255,255,.18);font-size:14px;line-height:1.6;color:#C7DAE3}
.eia26.eia26 .nap b{color:var(--blanco)}
.eia26.eia26 .nap a{color:var(--agua);font-weight:700;text-decoration:none}
.eia26.eia26 .nap a:hover{text-decoration:underline}
.eia26.eia26 .nap span{display:block;margin-top:.35rem;color:#9FB8C6;font-size:13px}

/* ── Las secciones ancladas, por debajo de la cabecera ────────────────────── */
/* La cabecera va pegada arriba y mide 85 px. Sin esto, al pulsar «Ver precios»
   del hero la sección aterriza en top:0 y sus primeros 85 px —el antetítulo,
   «CÓMO SE CONTRATA»— se quedan tapados detrás de la cabecera: se llega a la
   sección y parece que has llegado a la mitad. Medido el 16-sep en las ocho.
   Las píldoras de herramienta ya tenían su propio margen (42vh, arriba) y por
   eso esas sí funcionaban; las secciones no lo tenían y nadie lo había mirado.
   100 y no 85: los 15 de más son el aire que separa la cabecera del rótulo. */
.eia26.eia26 section[id]{scroll-margin-top:100px}

/* ══════════════ MÓVIL · los tres arreglos del 16-sep ══════════════════════ */

/* ── 1 · «Tu documentación», en medio y con doble flecha ──────────────────── */
/* Estaba arriba del todo por un `order:-1` de la v14, que en su momento tenía
   sentido cuando la red no se leía en columna. Pero el orden del HTML ya es el
   bueno —dónde vive la información · tu documentación · con qué se trabaja— y
   en vertical es justo lo que cuenta la entradilla: en el centro está vuestra
   documentación y lo demás se conecta con ella. Basta con dejar de moverla.
   Las flechas son de dos puntas porque el flujo va en los dos sentidos: la
   herramienta lee de la documentación y también escribe en ella. */
@media(max-width:1000px){
  /* `position:relative` hace que vuelvan a contar el `left:50%` y el `transform`
     del centrado de escritorio, y la caja se salía 139 px por la derecha. Se
     necesita relative para colgar de ella las flechas, así que se anulan los dos. */
  .eia26.eia26 .red__nuc{order:0;position:relative;left:auto;top:auto;transform:none;
    margin-block:2.6rem}
  .eia26.eia26 .red__nuc::before,
  .eia26.eia26 .red__nuc::after{
    content:"";position:absolute;left:50%;transform:translateX(-50%);
    width:15px;height:30px;opacity:.85;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 30' fill='none' stroke='%2357B6B4' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.5 3v24'/%3E%3Cpath d='M3 7.5 7.5 3 12 7.5'/%3E%3Cpath d='M3 22.5 7.5 27 12 22.5'/%3E%3C/svg%3E") center/contain no-repeat;
  }
  .eia26.eia26 .red__nuc::before{top:-2.05rem}
  .eia26.eia26 .red__nuc::after{bottom:-2.05rem}
}

/* ── 2 · Los cinco bloques del punto de partida, mucho más bajos ──────────── */
/* En vertical cada bloque son dos filas y la altura la manda el icono. Bajando
   el icono, los cuerpos y el aire, los cinco pasan de ~385 px a ~285: casi una
   pantalla de móvil menos de scroll para llegar a lo siguiente. */
@media(max-width:640px){
  .eia26.eia26 .cim{gap:.3rem}
  .eia26.eia26 .cim__p{padding:.4rem .7rem;gap:.55rem;
    grid-template-columns:27px 28px minmax(0,1fr)}
  .eia26.eia26 .cim__i{width:28px;height:28px;border-radius:8px}
  .eia26.eia26 .cim__i svg{width:15px;height:15px}
  .eia26.eia26 .cim--blanco .cim__lv{width:23px;height:23px;font-size:11.5px}
  .eia26.eia26 .cim__p b{font-size:14.5px;line-height:1.25}
  .eia26.eia26 .cim__p em{font-size:12px;line-height:1.3;margin-top:.08rem}
  /* La insignia «Empezamos aquí» cuelga por debajo del bloque 0, y al recortar
     el aire se puso encima de «Repositorio común y versión vigente». Este
     bloque se queda con el hueco de abajo que necesita la insignia: es el
     único de los cinco que lo lleva. */
  .eia26.eia26 .cim__p--base{padding-top:.5rem;padding-bottom:1.75rem}

/* ── 3 · Las tres tarjetas de resultado, compactas y con su rótulo ────────── */
/* Asistentes, avisos y documentos largos. Primero se ocultaron en móvil porque
   alargaban la sección justo antes de los precios; Javier prefiere conservarlas
   como ejemplos de resultado, así que se quedan abajo, con el mismo rótulo que
   las otras dos columnas y con el cuerpo más apretado para que no estorben. */
  .eia26.eia26 .red__sal{margin-top:1.6rem;gap:.5rem}
  .eia26.eia26 .sal{padding:.6rem .8rem;gap:.15rem .7rem}
  .eia26.eia26 .sal__i{width:30px;height:30px;border-radius:9px}
  .eia26.eia26 .sal__i svg{width:16px;height:16px}
  .eia26.eia26 .sal b{font-size:14.5px;line-height:1.25}
  .eia26.eia26 .sal span{font-size:12.5px;line-height:1.35}
}

/* ── El rótulo de las tres tarjetas, DEBAJO ────────────────────────────────── */
/* Primero fue encima y centrado, y ahí quedaba mal: las líneas de puntos que
   bajan del núcleo pasan justo por ese punto, y aunque se le pusiera un fondo
   para despegarlo, el rótulo partía en dos el dibujo. Javier lo vio y tiene
   razón (16-sep). El diagrama vuelve a como estaba —núcleo, líneas, tarjetas— y
   la frase se lee al final, que es donde cierra: primero se ve lo que sale, y
   luego se dice qué es. El verde ya lo traía de `.red__et`: es el color que
   escribe sobre azul. */
.eia26.eia26 .red__sal{grid-template-rows:1fr auto}
.eia26.eia26 .red__et--sal{margin:.9rem 0 0;align-self:end}
@media(max-width:1000px){
  .eia26.eia26 .red__et--sal{margin:.8rem 0 0}
}

/* ── La foto del hero en móvil ─────────────────────────────────────────────── */
/* Con `cover`, una foto apaisada dentro de un hero alto y estrecho se amplía
   tanto que solo se ve un trozo borroso. Igual que en compliance: un recorte
   vertical propio (hero-movil.webp, 400x448), pegado arriba y a ancho completo,
   y un degradado que lo funde con el navy antes de llegar al formulario. */
@media(max-width:700px){
  .eia26.eia26 .hero{
    background:
      linear-gradient(180deg,rgba(4,18,28,0) 0%,rgba(4,18,28,.18) 13%,rgba(4,18,28,.78) 23%,rgba(4,18,28,.97) 28%,#04121C 33%),
      linear-gradient(96deg,rgba(4,18,28,.70) 0%,rgba(7,42,61,.78) 60%,rgba(15,65,92,.76) 100%),
      url("hero-movil.webp?v=1") center top/100% auto no-repeat,
      #04121C;}
}