/* ─────────────────────────────────────────────────────────────────────────
   VISORIA Simulator · la landing
   ─────────────────────────────────────────────────────────────────────────
   CUATRO REGLAS DE LA CASA QUE MANDAN SOBRE CUALQUIER GUSTO

   1. EL TEXTO VA JUSTIFICADO Y A TODO EL ANCHO DE SU COLUMNA. Nada de
      `max-width` en `ch` sobre un párrafo: deja la línea al sesenta por
      ciento y la página se ve a medio hacer. Esta página lo tenía —58ch en
      el hero y 62ch en las entradillas—, que es justo lo prohibido.

   2. COLORES Y TIPOGRAFÍAS NO SE ELIGEN. Azul noche de base, dorado de
      firma, Playfair en titulares, Source Sans en cuerpo, DM Mono en cifras
      y rótulos. El verde azulado `#2DD4BF` es el de la línea Simulator, el
      mismo que la herramienta ya usaba para «lo que el sistema contesta».

   3. EL FONDO NUNCA COMPITE CON EL TEXTO. El campo de estrellas vive detrás
      y lleva un velo encima. Una página es para leerla: si el adorno obliga
      a entrecerrar los ojos, el adorno sobra.

   4. SE HABLA EN POSITIVO. Nada se define por lo que no es.

   5. CADA FRANJA CON UN TRABAJO Y UNA FORMA DISTINTOS. Aquí decía «pocas
      franjas, y son tres», porque eran seis bandas de texto seguido y había
      que rodar cuatro pantallas para llegar al contacto. Lo que cansaba no
      era el número: era que las seis se veían iguales. Desde el 24 de
      septiembre de 2026 son cinco capítulos y cada uno tiene su forma
      (cifras, recorrido, capturas, fichas, columnas), así que la vista sabe
      dónde está sin leer. El detalle está al final del archivo.
   ───────────────────────────────────────────────────────────────────── */
:root{
  --navy:#070F1C; --navy-2:#101E33; --gold:#C8973A; --gold-soft:#E0B45E;
  --tinta:#E8ECF3; --muted:#9FB0C7; --linea:rgba(45,212,191,.20);
  --verde:#2DD4BF;
  --serif:'Playfair Display',Georgia,serif;
  --sans:'Source Sans 3',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'DM Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box}
body{margin:0;background:var(--navy);color:var(--tinta);font-family:var(--sans);
     font-weight:300;line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.envoltura{width:min(1180px,92vw);margin:0 auto}
a{color:var(--verde)}
/* El texto de la casa: justificado, con partición, al ancho de su columna. */
p{text-align:justify;-webkit-hyphens:auto;hyphens:auto;margin:0 0 16px}

/* ── El cielo ─────────────────────────────────────────────────────────── */
#espacio{position:fixed;inset:0;width:100%;height:100%;z-index:0;
  background:
    radial-gradient(1200px 700px at 78% 8%, rgba(45,212,191,.10), transparent 60%),
    radial-gradient(900px 600px at 12% 88%, rgba(200,151,58,.07), transparent 62%),
    var(--navy)}
.velo{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(7,15,28,.52) 0%,rgba(7,15,28,.78) 55%,rgba(7,15,28,.92) 100%)}
.capa{position:relative;z-index:2}

/* LA CABECERA VIAJA CON LA PAGINA.
   Ahora la pagina tiene cinco capitulos y se recorre largo: una cabecera que
   se queda arriba deja al visitante sin manera de volver al contacto sin
   rodar hasta el principio. Lleva un velo propio porque detras pasa el campo
   de estrellas, y sin el los rotulos se leen sobre puntos en movimiento. */
header{padding:14px 0;position:sticky;top:0;z-index:30;
  background:rgba(7,15,28,.90);backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);border-bottom:1px solid rgba(45,212,191,.12)}
.barra{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
/* EL LOCKUP DE LA CABECERA: logotipo y, debajo, el lema de la linea.
   Va como una sola pieza para que no se separen, igual que el logo de cierre
   de Intelligence. Y mide la TINTA del logotipo, no el archivo: con el 100 %
   el lema sale mas ancho que la firma y se lee al reves. */
/* ARRIBA EL LOGOTIPO MANDA SOLO, Y GRANDE.
   Es el mismo cuerpo que usan las webs de Intelligence y de Academy, para que
   las tres se reconozcan como la misma casa. Y sin lema: arriba el logotipo
   firma la página, y el lema, que es el remate, tiene su sitio en el cierre.
   Un remate al principio se lee como subtítulo y gasta la frase. */
/* UN SOLO TAMAÑO PARA CADA PIEZA, EN TODO SIMULATOR.
   Habia ocho medidas distintas para dos piezas: el logotipo completo iba
   a 88, 84, 76 y 66 px de alto segun la pantalla, y el lockup a 34, 32 y
   30. Nadie lo habia decidido asi: cada pantalla se ajusto por separado
   el dia que se hizo, y la marca acabo con cuatro tamaños.
   La regla sigue en pie y el numero cambio una vez, el 24 de septiembre de
   2026: el logotipo pasa de clamp(58px,7vw,78px) a clamp(50px,5.4vw,64px)
   porque la cabecera ahora viaja pegada arriba, y con 78 px de logotipo la
   barra medía 106 px fijos comiendose la pantalla en cada scroll. Con 64 mide
   93. El lockup se queda en clamp(26px,3.2vw,32px).
   Lo que no cambia es lo importante: UN SOLO NUMERO POR PIEZA, el mismo en la
   web, en el tablero y en la entrada. */
.barra img{height:clamp(50px,5.4vw,64px);width:auto;display:block}
.marca-lockup{display:inline-flex;flex-direction:column;align-items:flex-start;
  width:max-content;text-decoration:none}
/* El ancho, el cuerpo y el espaciado los fija `assets/lema.js` midiendo la
   tinta del logotipo: una medida escrita aqui vale para un lema, a un tamano y
   en una pantalla, y deja de valer en cuanto cambia cualquiera de los tres.
   Medido: «Decisiones que ensenar» a 8 px con .15em ocupaba 132 px dentro de
   114 de tinta. */
.marca-lockup .lema-bajo{display:block;margin-top:5px;font-family:var(--mono);
  font-weight:500;text-transform:uppercase;color:var(--verde);white-space:nowrap;
  text-align:center;overflow:visible}
.barra nav{display:flex;gap:clamp(14px,1.7vw,20px);flex-wrap:wrap}
/* 10 px y no 11. Lo pidio Fernando el 24 de septiembre de 2026 junto con
   quitar el boton dorado: con menos cuerpo los cinco rotulos ocupan menos y el
   grupo de la derecha se lee como una sola linea ordenada en vez de como cinco
   piezas apretadas. Es el mismo cuerpo del «Entrar con un codigo» que va al
   lado, que es lo que hace que los seis parezcan una fila y no dos cosas. */
.barra nav a{color:var(--muted);text-decoration:none;font-family:var(--mono);
             font-size:10px;letter-spacing:.14em;text-transform:uppercase}
.barra nav a:hover{color:var(--verde)}

/* ── El hero ──────────────────────────────────────────────────────────── */
.hero{display:grid;gap:clamp(26px,4vw,52px);align-items:center;grid-template-columns:1fr;
      padding:clamp(30px,5vw,66px) 0 clamp(28px,4vw,52px)}
/* EL HERO OCUPA EL ANCHO DE LA PAGINA.
   Compartia fila con un video de un robot. El robot ilustraba «tecnologia»,
   que es justo lo que esta pagina no necesita explicar: quien llega ya sabe
   que esto es software. Lo que hacia era robarle la mitad del ancho al texto
   -y al texto le hace falta, porque aqui es donde se dice que se aprende. */
.hero p{max-width:none}
.lema{display:block;font-family:var(--mono);font-size:12px;font-weight:500;
  letter-spacing:.26em;text-transform:uppercase;color:var(--verde);margin-bottom:18px}
.hero h1{font-family:var(--serif);font-weight:500;margin:0 0 20px;
         font-size:clamp(2.2rem,5.6vw,3.9rem);line-height:1.08;text-align:left}
.hero h1 em{font-style:normal;color:var(--verde)}
.hero p{font-size:clamp(1.02rem,1.5vw,1.2rem);color:#C7D3E4}
.acciones{display:flex;gap:14px;flex-wrap:wrap;margin-top:24px}
.boton{display:inline-block;padding:14px 28px;border-radius:3px;text-decoration:none;
       font-weight:600;font-size:1rem}
.boton.primario{background:var(--verde);color:#04121A}
.boton.secundario{border:1px solid var(--linea);color:var(--tinta)}

/* AQUI VIVIAN `.cabina` Y `.tesis`, Y SE FUERON EL 24 DE SEPTIEMBRE DE 2026.
   `.cabina` enmarcaba el video del robot, que salio de la pagina porque
   ilustraba «tecnologia», que es lo unico que aqui no hay que explicar.
   `.tesis` era la franja de paso con «la maquina calcula»; esa frase ahora es
   una seccion entera (`.dual`), porque es la posicion de la casa sobre la
   inteligencia artificial y una franja de dos renglones no la sostiene.
   Se borran en vez de dejarlas apagadas: una regla muerta con nombre bonito
   se reutiliza sin querer, y `.cabina` ya provoco una colision una vez. */

section{padding:0 0 clamp(36px,5vw,68px)}
h2{font-family:var(--serif);font-weight:500;font-size:clamp(1.45rem,3vw,2rem);margin:0 0 8px}
.sub{color:var(--muted);margin:0 0 26px}

.rejilla{display:grid;gap:18px;grid-template-columns:1fr}
@media(min-width:820px){.rejilla{grid-template-columns:repeat(3,1fr)}}
.tarjeta{border:1px solid var(--linea);border-radius:4px;padding:22px;
         background:linear-gradient(180deg,rgba(16,30,51,.86),rgba(7,15,28,.86))}
.tarjeta h3{font-family:var(--sans);font-weight:600;font-size:1.06rem;margin:0 0 8px}
.tarjeta p{margin:0;color:#B9C6D9;font-size:.96rem}
.rotulo{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.2em;
        text-transform:uppercase;color:var(--verde);margin-bottom:10px}

/* Los simuladores. Cada uno tendrá su propia página cuando haya qué contar;
   por ahora la tarjeta es la ficha, y las que están en construcción lo dicen
   en vez de prometerse como disponibles. */
.simuladores{display:grid;gap:clamp(20px,2.4vw,30px);grid-template-columns:1fr}
@media(min-width:760px){.simuladores{grid-template-columns:repeat(2,1fr)}}
/* TRES Y TRES, no cuatro y dos. Con seis simuladores y cuatro columnas la
   segunda fila quedaba coja. Y mas aire entre tarjetas: eran 18 px fijos y
   el conjunto se leia como un muro. */
@media(min-width:1060px){.simuladores{grid-template-columns:repeat(3,1fr)}}
.sim{border:1px solid var(--linea);border-radius:4px;padding:22px;display:flex;
     flex-direction:column;background:linear-gradient(180deg,rgba(16,30,51,.86),rgba(7,15,28,.86))}
.sim.proximo{border-style:dashed;opacity:.82}
/* El que ya se puede abrir, se abre. Una tarjeta que describe algo vivo y no
   lleva a ninguna parte obliga a preguntar por el enlace. */
a.sim{text-decoration:none;color:inherit;transition:border-color .15s}
a.sim:hover{border-color:var(--verde)}
/* EL ENLACE VA AL FONDO DE LA TARJETA, NO DEBAJO DEL PARRAFO.
   Con `margin-top:14px` cada «Ver el simulador» colgaba de donde terminara su
   texto, asi que los dos quedaban a alturas distintas y la fila se veia
   descuadrada. Con `auto`, el hueco sobrante se va arriba del enlace y los dos
   aterrizan en la misma linea, que ademas es la misma donde terminan las dos
   tarjetas que todavia no tienen enlace. */
.sim .ir{display:block;margin-top:auto;padding-top:16px;font-family:var(--mono);
         font-size:11px;letter-spacing:.16em;text-transform:uppercase;
         color:var(--verde)}
.sim .estado{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;
             text-transform:uppercase;color:var(--verde)}
.sim.proximo .estado{color:var(--gold-soft)}
.sim h3{font-family:var(--serif);font-weight:500;font-size:1.22rem;margin:8px 0 10px}
.sim p{margin:0;color:#B9C6D9;font-size:.93rem}

.fuentes{display:grid;gap:14px;grid-template-columns:1fr;margin-top:20px;padding:0;list-style:none}
@media(min-width:820px){.fuentes{grid-template-columns:repeat(3,1fr)}}
.fuentes li{border-left:2px solid var(--gold);padding-left:14px}
.fuentes b{display:block;font-family:var(--mono);font-size:.8rem;color:var(--gold-soft);
           letter-spacing:.04em;font-weight:500;margin-bottom:3px}
.fuentes span{color:#B9C6D9;font-size:.92rem}

.cierre-cta{border:1px solid var(--linea);border-radius:4px;padding:clamp(24px,4vw,38px);
  background:linear-gradient(135deg,rgba(45,212,191,.10),rgba(16,30,51,.88))}

footer{border-top:1px solid var(--linea);padding:38px 0 34px;text-align:center}
.f-firma{display:inline-flex;flex-direction:column;align-items:flex-start;width:max-content}
.f-firma img{height:clamp(58px,7vw,78px);width:auto;display:block;margin-bottom:12px}
/* El remate mide la TINTA del logotipo, no el archivo. */
.f-lema-cierre{display:flex;align-items:center;gap:8px;width:0;
  min-width:95.302%;margin-left:2.388%;
  font-family:var(--mono);font-size:8px;font-weight:500;letter-spacing:.15em;
  text-transform:uppercase;color:var(--gold-soft);white-space:nowrap}
.f-lema-cierre::before,.f-lema-cierre::after{content:"";height:1px;
  background:var(--gold);opacity:.6;flex:1 1 0;min-width:10px}
.f-lema-linea{display:block;font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.24em;text-transform:uppercase;color:var(--verde);margin:18px 0 0}

/* ── EL PIE DE LA CASA ─────────────────────────────────────────────────────
 *
 * El sistema de los cuatro planetas es VISORIA Group, y va al pie de todas las
 * webs de la casa. Es el mapa: dice de dónde viene esta página y qué más hay.
 *
 * PEQUEÑO Y AL FINAL, A PROPÓSITO. Arriba compite con el logotipo de la línea,
 * que es quien firma la página. Aquí abajo hace lo que tiene que hacer: situar.
 *
 * LA LÍNEA EN LA QUE SE ESTÁ VA ENCENDIDA y las otras tres, atenuadas. Un mapa
 * donde todo pesa igual no dice dónde está uno.
 *
 * Y LOS DATOS LEGALES VAN DEBAJO, con la razón social de verdad. «VISORIA
 * Group» es la marca paraguas; la sociedad registrada es VISORIA INTELLIGENCE
 * S.A.S, y quien busca a quién facturar necesita esa y no la otra.
 */
/* EL CIERRE, EN DOS MITADES.
   A la izquierda firma la línea: su logotipo con el lema debajo, como una sola
   pieza. A la derecha se sitúa en la casa: el sistema pequeño y la frase de
   pertenencia, en español e inglés, porque los programas a los que esto se
   vende se presentan en los dos idiomas.
   El sistema es un enlace: quien se pregunta qué son esos planetas los pulsa. */
.cierre-casa{display:grid;gap:clamp(24px,4vw,48px);align-items:center;
  grid-template-columns:1fr;text-align:left;margin-bottom:30px}
@media(min-width:820px){.cierre-casa{grid-template-columns:1fr auto}}
/* LA FIRMA DE PERTENENCIA.
 *
 * Arriba, el nombre de la línea a la izquierda y el sistema girando a la
 * derecha; debajo, ocupando ese mismo ancho, la línea de pertenencia.
 *
 * EL NOMBRE VA ESCRITO, Y NO ES EL LOGOTIPO. Lleva las tipografías de la casa
 * —Playfair en «VISORIA» y Source Sans espaciado en la bajada— pero **sin el
 * isotipo**, justamente para que no se confunda con la firma: el logotipo
 * completo, con su V, está arriba en la cabecera y en el cierre de la línea.
 * Aquí lo que se dice es de quién es esto, no quién lo firma.
 *
 * Y TODO EL BLOQUE ES UN ENLACE. El pie no explica la casa: la señala. Quien
 * se pregunte qué son esos planetas los pulsa y llega a la página que sí lo
 * explica. Poner las cuatro líneas con sus descriptores en el pie de cada
 * página era contar cuatro veces algo que se cuenta bien una. */
/* La caja de la firma mide lo que miden el lockup y el sistema juntos, y no
   lo que mide la pagina. Con el ancho de la pagina, la linea de pertenencia
   se centraba sobre la columna entera y quedaba 87 px a la derecha del
   conjunto en pantalla de movil -medido a 396 px-, mientras en escritorio
   parecia bien porque alli la columna ya se ajusta al contenido. */
.cierre-casa .pertenencia{display:inline-grid;gap:1px;text-decoration:none;
  width:max-content;max-width:100%}
@media(min-width:820px){.cierre-casa .pertenencia{justify-self:end;justify-items:end}}
.firma-linea{display:flex;align-items:center;gap:26px}
/* LA MARCA ESCRITA ES EL ARCHIVO, RECORTADO -no un texto que se le parece.
   `VISORIA_Simulator_lockup.svg` es el logotipo de la linea sin el isotipo:
   «VISORIA» arriba en blanco y «SIMULATOR» abajo en verde, tal cual, una
   sobre otra. Aqui estuvo compuesto a mano con Playfair y Source Sans en una
   sola linea; se parecia mucho, y por eso estaba mal. Proporcion 3,550:1,
   medida sobre la tinta: la altura manda y el ancho la sigue. */
/* EL LEMA DEL CIERRE.
 * Va de la V del isotipo a la A de VISORIA, llenando la tinta del logotipo:
 * el cuerpo y el espaciado los pone `lema.js` midiendo, porque el logotipo
 * cambia de tamaño con la ventana y cada línea tiene un lema de otro largo.
 * Aquí solo van familia, color y peso.
 * EL REPARTO ES EL DE ACADEMY: la primera parte en tinta plana y la segunda
 * en el degradado de la línea. Allí «Donde aprender» va en blanco y «nos
 * conecta» en el degradado naranja; aquí «Decisiones» en blanco y «que
 * enseñan» en el degradado verde. Mismo gesto en las dos marcas hermanas. */
.f-firma .lema-bajo{display:block;margin-top:7px;font-family:var(--sans);
  font-weight:600;text-transform:uppercase;color:var(--tinta);
  white-space:nowrap;overflow:visible;line-height:1.1}
.f-firma .lema-bajo b{font-weight:600;
  background:linear-gradient(96deg,#2DD4BF 0%,#5EEAD4 48%,#BBF7D0 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}

.firma-lockup{height:clamp(26px,3.2vw,32px);width:auto;display:block}
/* LA LINEA DE PERTENENCIA VA CENTRADA BAJO LO QUE ACOMPAÑA, y pequeña.
   Su caja abarca de la V del lockup al borde del sistema -medido, de 1332 a
   1543-, así que centrarla la deja justo entre las dos piezas y el conjunto
   se lee como un solo sello. Alineada a la derecha se colgaba del planeta y
   parecía un pie de foto suyo. */
/* Y VA EN EL DORADO DE INTELLIGENCE, NO EN GRIS.
   El sello dice de quien es esto, y de quien es esto es de la casa matriz.
   El verde firma la linea y el dorado firma la casa: con los dos colores en
   su sitio, el pie se lee sin tener que explicarlo. Es el mismo criterio con
   el que cada unidad compone su sello -isotipo fuera, nombre de la linea,
   el sistema girando a la derecha y debajo la pertenencia en dorado-. */
.de-group{display:block;width:100%;text-align:center;font-family:var(--mono);
  font-size:7px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold-soft);opacity:.78;transition:opacity .15s}
.pertenencia:hover .de-group{opacity:1}

.grupo{border-top:1px solid var(--linea);margin-top:34px;padding-top:30px}
.grupo-orbe{display:flex;justify-content:center;margin-bottom:6px}
.grupo-nombre{display:block;text-align:center;font-family:var(--mono);font-size:11px;
  font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-soft);
  margin-bottom:22px}
.grupo-lineas{display:grid;gap:16px;grid-template-columns:1fr;margin:0;padding:0;
  list-style:none;text-align:left}
@media(min-width:700px){.grupo-lineas{grid-template-columns:repeat(2,1fr);gap:16px 34px}}
@media(min-width:1000px){.grupo-lineas{grid-template-columns:repeat(4,1fr)}}
.grupo-lineas li{display:grid;grid-template-columns:12px 1fr;gap:11px;align-items:baseline;
  opacity:.62}
.grupo-lineas li.aqui{opacity:1}
.grupo-lineas .punto{width:9px;height:9px;border-radius:50%;display:block;
  transform:translateY(2px)}
.grupo-lineas b{display:block;font-family:var(--mono);font-size:11.5px;font-weight:500;
  letter-spacing:.13em;text-transform:uppercase;margin-bottom:3px}
.grupo-lineas span.que{color:var(--muted);font-size:.86rem;line-height:1.45}
.grupo-lineas a{text-decoration:none;color:inherit}
.grupo-lineas a:hover span.que{color:var(--tinta)}
.legal{margin-top:26px;text-align:center;color:var(--muted);font-size:.78rem;line-height:1.6}
.legal a{color:var(--muted)}

.f-pie{margin-top:20px;color:var(--muted);font-size:.84rem;text-align:center}
.f-pie a{color:var(--muted)}

/* ── Las fichas de cada simulador ─────────────────────────────────────────
   Comparten todo con la portada; solo cambian el arranque y una rejilla de
   cuatro. Vive aquí y no repetido en cada ficha: seis simuladores serían seis
   copias del mismo CSS separándose una de otra. */
.ficha-hero{padding:clamp(30px,5vw,62px) 0 clamp(26px,4vw,44px)}
.ficha-hero h1{font-family:var(--serif);font-weight:500;margin:0 0 18px;
  font-size:clamp(2rem,5vw,3.4rem);line-height:1.08;text-align:left}
.ficha-hero h1 em{font-style:normal;color:var(--verde)}
.ficha-hero .destacado{font-size:clamp(1.02rem,1.5vw,1.2rem);color:#C7D3E4}
@media(min-width:1060px){.rejilla.cuatro{grid-template-columns:repeat(4,1fr)}}

/* ARENA EN VERDE, COMO LA BAJADA DEL LOGOTIPO.
   En el logotipo «VISORIA» va en tinta y «SIMULATOR» en el verde de la linea.
   El nombre de cada simulador repite ese patron: la materia en tinta y
   «Arena» en verde. Asi los tres nombres -Trade Marketing Arena, DigitalMKT
   Arena, Sales Arena- se leen como una familia y no como tres productos
   sueltos que casualmente comparten palabra. */
.arena{color:var(--verde);font-weight:600}
h1 .arena,h2 .arena{font-weight:inherit}

/* QUE DESARROLLA. La lista de capacidades, en dos columnas anchas.
   Va justo despues de la tesis porque es la respuesta a la pregunta que se
   hace quien evalua el simulador para su programa: «y esto para que le sirve
   a mi gente». No es una rejilla de tarjetas: son frases, y las frases se
   leen mejor en columna que en caja. */
.capacidades{display:grid;gap:clamp(18px,2.6vw,28px);grid-template-columns:1fr;
  margin:clamp(18px,3vw,30px) 0 0;padding:0;list-style:none}
@media(min-width:780px){.capacidades{grid-template-columns:1fr 1fr}}
.capacidades li{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start}
.capacidades .marca{width:7px;height:7px;border-radius:50%;background:var(--verde);
  margin-top:.62em}
.capacidades b{display:block;font-family:var(--sans);font-weight:600;
  font-size:1.04rem;color:var(--tinta);margin-bottom:3px}
.capacidades .que{color:#B9C6D9;font-size:.96rem;line-height:1.55;display:block}

/* EL RESPALDO. El dato con su fuente, como en los estudios de la casa: aqui
   se vende evidencia, asi que la afirmacion de que un simulador ensena
   tambien tiene que venir con quien lo midio y sobre cuantos estudios. */
.respaldo{border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);
  padding:clamp(22px,3.4vw,34px) 0;margin:clamp(34px,5vw,54px) 0 0}
.respaldo .cifras{display:grid;gap:clamp(18px,2.6vw,30px);grid-template-columns:1fr;
  margin-top:22px}
@media(min-width:720px){.respaldo .cifras{grid-template-columns:1fr 1fr}}
.respaldo .cifra{display:block;font-family:var(--mono);font-size:clamp(1.5rem,3vw,2rem);
  color:var(--verde);line-height:1.1;margin-bottom:8px}
.respaldo .cifras .que{color:#B9C6D9;font-size:.95rem;display:block;line-height:1.55}
.respaldo .quien{display:block;font-family:var(--mono);font-size:11.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:10px}

/* EL COPYRIGHT, debajo de la identificacion legal y mas pequeno que ella.
   Lo pidio Fernando para las tres casas: «para que la gente no copie, que
   todos los derechos estan reservados, es algo claro». Va en Intelligence, en
   Academy y aqui, con la misma forma, porque quien responde por el contenido
   es la misma sociedad en los tres sitios. */
.copy{margin:6px 0 0;text-align:center;color:var(--muted);font-size:.72rem;
  opacity:.8}

/* ── Así se ve · las dos capturas de la plataforma ──────────────────────────
   Se añadió el 23 de septiembre de 2026. Estilos propios y con nombres que no
   existen en el resto de la hoja, a propósito: reutilizar `.tarjeta` habría
   hecho que un ajuste futuro de las tarjetas moviera estas imágenes sin que
   nadie lo pidiera. Un bloque nuevo con clases nuevas no pelea con nada.     */
.vistas{
  display:grid;gap:clamp(20px,3vw,34px);margin-top:clamp(18px,2.6vw,30px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));
}
.vista{margin:0}
.vista img{
  display:block;width:100%;height:auto;max-width:100%;
  border:1px solid var(--linea);border-radius:14px;
  /* El tablero es oscuro y la página también: sin la sombra, la captura se
     funde con el fondo y parece parte de la página en vez de una pantalla. */
  box-shadow:0 18px 44px rgba(0,0,0,.45);
  background:var(--navy-2);
}
.vista figcaption{
  margin-top:14px;color:var(--muted);
  font-size:clamp(.95rem,1.5vw,1.05rem);line-height:1.55;
}
.vista figcaption b{color:var(--tinta);font-weight:600}


/* ── EL PILOTO ─────────────────────────────────────────────────────────────
   La analogia que abre la pagina de par en par: nadie discute que un piloto
   ensaye antes de volar. Va suelta entre dos secciones, con aire de sobra a
   los lados y arriba, porque su trabajo es que el ojo se detenga: si la
   aprieta el contenido de al lado, se lee como un parrafo mas y pierde todo.

   Sin foto y sin caja: el campo de estrellas del fondo ya pone el ambiente, y
   una franja mas oscura la separa sin encerrarla. */
/* LA CABINA VA DETRAS DEL TEXTO, MUY BAJADA.
   Es una foto de un panel de instrumentos de verdad, y su trabajo aqui no es
   que se mire: es que se reconozca de reojo mientras se lee la frase. Por eso
   va al 22 % y con un velo encima. Una foto a plena luz detras de un texto
   obliga a elegir entre ver la foto o leer, y aqui lo que hay que leer es la
   frase.
   Se recorto la mitad inferior a proposito: ahi esta el panel, y fuera queda
   el rotulo de una marca ajena que asomaba por la ventana. */
.piloto{
  position:relative;isolation:isolate;
  margin:clamp(72px,9vw,128px) 0;
  padding:clamp(48px,6vw,86px) 0;
  background:
    linear-gradient(180deg,rgba(5,16,22,.97),rgba(5,16,22,.88) 30%,
      rgba(5,16,22,.88) 70%,rgba(5,16,22,.97)),
    url('cabina.jpg') center 62%/cover no-repeat,
    linear-gradient(180deg,transparent,rgba(5,16,22,.74) 14%,
    rgba(5,16,22,.74) 86%,transparent);
  border-top:1px solid rgba(45,212,191,.22);
  border-bottom:1px solid rgba(45,212,191,.22);
}
/* Sin ancho propio: hereda el de `.envoltura` y queda a plomo con el logo y
   el lema de arriba, que es lo que se veia desalineado. */
.piloto-caja{max-width:none}
.piloto-ojo{
  font-family:var(--mono);font-size:12px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--verde);opacity:.9;margin:0 0 clamp(20px,2.6vw,30px);
}
/* Las dos frases son el golpe, y se leen como un par: la misma medida, el
   mismo peso, y la segunda separada lo justo para que se note el giro. */
.piloto-frase{
  font-family:var(--serif);
  font-size:clamp(1.55rem,4.1vw,2.95rem);
  line-height:1.24;font-weight:300;margin:0;
  color:rgba(232,237,242,.72);
  text-wrap:balance;
  /* ALINEADA A LA IZQUIERDA, Y ESTO NO CONTRADICE LA REGLA DE LA CASA.
     El texto de la casa va justificado, y esta pagina lo hereda. Pero
     justificar funciona con parrafos de sesenta o setenta caracteres por
     linea; en un titular de cinco palabras el navegador estira los espacios
     hasta abrir rios blancos entre ellas. Se vio en la captura: «Ningun
     piloto despega sin haber» con huecos de dedo entre palabra y palabra.
     La regla del parrafo sigue valiendo abajo, en `.piloto-pie`. */
  text-align:left;
}
.piloto-frase b{color:#fff;font-weight:600}
.piloto-frase-b{margin-top:clamp(14px,1.8vw,22px)}
.piloto-frase-b b{color:var(--verde)}
.piloto-pie{
  margin:clamp(30px,3.6vw,46px) 0 0;
  /* DE LADO A LADO. Estaba a 72ch, que en esta pagina es como el 60 % del
     ancho y deja la mitad derecha en blanco. */
  font-size:clamp(1rem,1.5vw,1.14rem);
  line-height:1.72;color:rgba(169,187,212,.92);
  text-align:justify;-webkit-hyphens:auto;hyphens:auto;
}
.piloto-pie b{color:#fff}
@media(max-width:620px){
  .piloto-pie{text-align:left;hyphens:none}
}


/* ── LOS CAPITULOS ─────────────────────────────────────────────────────────
   La pagina tenia ocho titulos seguidos al mismo nivel -que desarrolla, por
   que ensena, como se juega, los roles, los efectos, la sala, asi se ve, los
   simuladores- y leidos de corrido no se sabe donde termina un asunto y
   empieza otro. Fernando lo dijo mirandola: «no se cómo partirlo».

   Tres capitulos, cada uno abierto por un filete con su numero y su nombre.
   El filete es el mismo recurso del remate de marca, en el verde de la linea,
   y hace el trabajo de una pagina en blanco en un libro: decir «aqui empieza
   otra cosa» sin gastar una frase en decirlo. */
/* LA MARCA DE CAPITULO SE TRATA COMO LA FRANJA DEL PILOTO, que es la que
   funciona: un filete que cruza la pagina entera de lado a lado, aire de
   sobra por encima, y el rotulo alineado con el resto del contenido. Antes
   el filete media lo que el texto y se leia como un adorno del titulo, no
   como el principio de otra cosa. */
.capitulo{
  position:relative;
  display:flex;align-items:center;gap:20px;
  margin:clamp(78px,9vw,130px) auto clamp(30px,3.6vw,46px);
  width:min(1180px,92vw);
  padding-top:clamp(34px,4vw,52px);
}
.capitulo::before{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:100vw;height:1px;
  background:linear-gradient(90deg,transparent,rgba(45,212,191,.34) 12%,
    rgba(45,212,191,.34) 88%,transparent);
}
.capitulo span{
  font-family:var(--mono);font-size:12px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--verde);white-space:nowrap;
}
.capitulo span b{color:var(--tinta);font-weight:500;margin-right:10px}
.capitulo i{display:none}


/* El remate de la franja del piloto, en el verde de la linea.
   NO SE LLAMA `.cabina`: ese nombre ya era del marco del video del robot, y
   al reutilizarlo esta frase salia con borde y esquinas redondeadas. Un
   nombre de clase que evoca bien puede estar cogido; se comprueba antes. */
.piloto-remate{color:var(--verde)}
/* LA MARCA ES LO QUE TIENE QUE QUEDARSE EN LA CABEZA. El resalte estaba en
   «es hora de cambiar de cabina», que es la idea; pero la idea ya la sostiene
   todo el bloque, y lo que hay que recordar al salir de aqui es quien lo
   hace. Va en el verde de la linea y un punto mas grande, sin gritar. */
.piloto-marca{color:var(--verde);font-weight:600;font-size:1.12em;
  letter-spacing:.005em;white-space:nowrap}


/* Los tres parrafos del piloto: el primero pega al titular, los siguientes
   respiran entre si, y el de cierre se separa mas porque cambia de tono -deja
   de contar y empieza a proponer-. */
.piloto-pie + .piloto-pie{margin-top:clamp(16px,1.9vw,24px)}
.piloto-cierre{margin-top:clamp(26px,3.2vw,40px)!important;color:rgba(232,237,242,.94)}
.piloto-cierre b{font-weight:600;color:#fff}
.piloto-cierre .piloto-marca{color:var(--verde)}


/* ── LAS BANDAS DE IMAGEN ──────────────────────────────────────────────────
   Una por capitulo, bajo el parrafo de entrada. No van de adorno: cada una
   muestra la escena que el capitulo describe, y llevan pie, porque una
   imagen sin pie en una pagina que vende evidencia es una imagen que nadie
   sabe por que esta ahi.

   Van en 21:9 para que no roben la pagina: son una franja, no un cuadro. Y
   con un velo oscuro encima, porque el sitio es oscuro y una foto a plena
   luz abre un agujero blanco en el recorrido. */
.banda{margin:clamp(26px,3.4vw,42px) 0 0;position:relative}
/* EL `height:auto` NO SOBRA, Y COSTO UNA MEDICION.
   El 24 de septiembre de 2026 esta foto salio de 1180x800 en vez de su 21:9.
   La causa: al `<img>` se le pusieron los atributos `width` y `height`, que el
   navegador traduce a `height:800px`, y `aspect-ratio` SOLO manda cuando una
   de las dos medidas es `auto`. Con las dos fijadas se ignora en silencio: el
   CSS estaba bien escrito y aun asi la imagen salia deformada.
   Los atributos se dejan puestos -reservan el sitio y evitan que la pagina
   salte al cargar- y la regla se blinda aqui, que es donde se lee. */
.banda img{
  /* 16:9 Y NO 21:9. La fotografia se preparo a 16:9 cuidando que quepan las
     cuatro personas, las manos y el documento del centro. Forzarla a 21:9
     la recortaba un cuarto por arriba y por abajo, que es justo lo que el
     encargo pedia conservar. Medido a 1280 px: la caja pedia 2,33 y la
     imagen trae 1,78. */
  width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block;
  border-radius:4px;border:1px solid var(--linea);
  filter:saturate(.9) brightness(.82);
}
.banda figcaption{
  margin-top:12px;color:var(--muted);font-size:clamp(.88rem,1.2vw,.96rem);
  line-height:1.55;
}
@media(max-width:620px){
  /* la banda ya va a 16:9 en todos los anchos */
}

/* ─────────────────────────────────────────────────────────────────────────
   LA REESTRUCTURACION DEL 24 DE SEPTIEMBRE DE 2026
   ─────────────────────────────────────────────────────────────────────────
   La pagina pasa de tres franjas a cinco capitulos, y eso contradice la nota
   que hay arriba del archivo («Y POCAS FRANJAS»). La nota tenia razon cuando
   se escribio: eran seis bandas de texto seguido y habia que rodar cuatro
   pantallas para llegar al contacto. Lo que se corrige no es el numero de
   secciones sino la causa: cada seccion ahora tiene un trabajo distinto y una
   forma distinta -cifras, recorrido, capturas, fichas, columnas-, asi que la
   vista sabe donde esta sin leer. Seis bandas iguales cansan; cinco capitulos
   con ritmo propio se recorren.

   Y EL ORDEN NO ES DECORATIVO: primero que es, luego por que existe, luego
   como funciona, luego verlo funcionando, luego la evidencia, luego escoger
   un simulador y al final pedir la demostracion. Quien llega decide en ese
   orden, no en otro.

   EL DORADO VUELVE A SER EL COLOR DE LA CONVERSION y el verde azulado se
   queda para datos, indicadores y enlaces. Estaban mezclados: el boton
   principal iba en verde, que es el color con el que la pagina pinta las
   cifras, y eso le quitaba al dorado su unico trabajo, que es firmar.
   ───────────────────────────────────────────────────────────────────── */

/* ── Cabecera: el logotipo a la izquierda y todo lo demas a la derecha ──── */
/* EL MENU VA PEGADO AL BORDE DERECHO, NO REPARTIDO A LO ANCHO.
   Con `justify-content:space-between` y tres bloques, el menu caia en el
   centro y quedaba a un palmo del logotipo: se leia como si formara parte de
   la firma. Metido en un solo grupo con `margin-left:auto`, el logotipo manda
   solo a la izquierda y la navegacion ocupa su esquina. */
.barra-derecha{display:flex;align-items:center;gap:clamp(16px,2vw,28px);
  margin-left:auto;flex-wrap:wrap;justify-content:flex-end}
/* EL AREA DE TOQUE, NO EL TAMANO DE LA LETRA. Medido: este enlace ocupaba
   16 px de alto y los tres de «para quien» 18, por debajo de los 24 que pide
   la norma (WCAG 2.5.8). El cuerpo se queda como esta; lo que crece es la
   zona que acepta el dedo. */
.entrar{color:var(--muted);text-decoration:none;font-family:var(--mono);font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;transition:color .15s;
  display:inline-flex;align-items:center;min-height:26px;padding:0 2px}
.entrar:hover{color:var(--verde)}
.boton.oro{background:var(--gold);color:#140C00;transition:background .15s}
.boton.oro:hover{background:var(--gold-soft)}
/* EL ANCHO DE LA BARRA, MEDIDO Y NO ESTIMADO.
   Sin el boton dorado la cuenta baja a 790 px de tinta: logotipo 143, cinco
   rotulos a 10 px 471, «Entrar con un codigo» 148, mas el hueco de 28. La
   envoltura da el 92 % del ancho de pantalla, asi que a 900 px de pantalla
   quedan 828 y todavia entra en un renglon; por debajo de eso el menu se
   retira y quedan el logotipo y la puerta de entrada.

   Antes de quitar el boton la cuenta era 849 y habia que comprimir el menu
   entre 960 y 1200 px para que cupiera. Ya no hace falta: el boton se llevo
   223 px y el menu puede ir a un solo tamano en toda la pagina.

   La puerta que se queda es «Entrar con un codigo» y no la demostracion,
   porque la cabecera viaja pegada arriba durante toda la sesion y quien llega
   a jugar la necesita a mano; quien compra decide debajo del titular y en el
   cierre, que es donde estan los dos botones dorados. */
@media(max-width:899px){.barra nav{display:none}header{padding:10px 0}}

/* ── Hero: el texto a la izquierda y EL PRODUCTO a la derecha ──────────── */
/* No hay fotografia aqui, y es la decision mas importante de la seccion.
   Quien evalua un simulador quiere ver el simulador; una foto de ejecutivos
   en una sala de juntas ocupa el mismo espacio y no contesta nada. Las dos
   pantallas van montadas una sobre otra con un desplazamiento corto: la de
   atras es el resultado, la de delante es la decision. Sin perspectiva ni
   maqueta en tres dimensiones, que envejecen mal y gritan «plantilla». */
.hero-texto{min-width:0}
/* ESTA LINEA VA EN LA LETRA DEL TITULAR, PEQUENA, Y NO EN MAYUSCULAS.
   Lo pidio Fernando el 24 de septiembre de 2026 y la razon es de oficio: en el
   primer golpe de vista habia tres familias tipograficas a la vez -el rotulo
   de arriba en mono, el titular en Playfair, el parrafo en Source Sans- y esta
   linea anadia una cuarta aparicion del mono justo debajo de los botones.
   Puesta en Playfair y en caja baja, se lee como el remate del titular, que es
   lo que es, y el hero baja de cuatro voces a tres.

   Y `hyphens:manual` se queda. La regla de la casa parte las palabras en los
   parrafos justificados, y esta bien; pero esta linea es un remate corto y
   partida daba «ESCUELAS DE NE-GOCIOS», que se lee como un error de imprenta.
   La particion es para el texto corrido. */
.hero-para{text-align:left;-webkit-hyphens:manual;hyphens:manual;color:var(--muted);
  font-family:var(--serif);font-weight:500;font-size:clamp(.95rem,1.45vw,1.12rem);
  line-height:1.5;letter-spacing:0;text-transform:none;
  margin:clamp(18px,2.2vw,26px) 0 0}
/* EL ALTO DE LA CAJA SE CALCULA, NO SE TANTEA, y depende de la proporcion de
   las capturas. Con paneles de 1071x456 (proporcion 2,349): la de atras ocupa
   el 86 % del ancho y por tanto 0,366 de alto; la de delante el 76 %, o sea
   0,324. Con la caja en 0,58 del ancho, la de delante arranca en 0,256 y las
   dos se solapan 0,110: suficiente para que se lean como una pila y no como
   dos imagenes sueltas. Si se cambian las capturas por otras de proporcion
   distinta, este numero se recalcula; era 100/62 con las de 1568x751. */
.hero-producto{position:relative;width:100%;aspect-ratio:100/58;min-width:0}
.hero-producto .pantalla{margin:0;position:absolute;border:1px solid rgba(45,212,191,.22);
  border-radius:4px;overflow:hidden;background:#050A12;
  box-shadow:0 26px 60px rgba(0,0,0,.55)}
.hero-producto .pantalla img{display:block;width:100%;height:auto}
.hero-producto .atras{top:0;right:0;width:86%}
.hero-producto .frente{bottom:0;left:0;width:76%}
@media(max-width:959px){
  .hero-producto{position:static;aspect-ratio:auto;display:grid;gap:14px}
  .hero-producto .pantalla{position:static;width:100%;box-shadow:0 14px 32px rgba(0,0,0,.45)}
}
@media(min-width:960px){
  .hero{grid-template-columns:minmax(0,46fr) minmax(0,54fr)}
}

/* ── La franja de cifras ───────────────────────────────────────────────── */
.franja{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,2.6vw,30px);
  border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);
  padding:clamp(20px,2.8vw,30px) 0;margin-bottom:clamp(34px,5vw,60px)}
@media(min-width:760px){.franja{grid-template-columns:repeat(4,1fr)}}
.franja b{display:block;font-family:var(--mono);font-weight:500;
  font-size:clamp(1.5rem,3.4vw,2.2rem);color:var(--verde);line-height:1.06}
.franja span{display:block;margin-top:7px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);line-height:1.5}

/* ── La pregunta incomoda: la cabina a un lado ─────────────────────────── */
.piloto-cuerpo{display:grid;gap:clamp(24px,3.4vw,44px);grid-template-columns:1fr;
  align-items:start;margin-top:clamp(28px,3.6vw,46px)}
@media(min-width:900px){.piloto-cuerpo{grid-template-columns:minmax(0,42fr) minmax(0,58fr)}}
.piloto-foto{margin:0;min-width:0}
.piloto-foto img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
  border:1px solid rgba(45,212,191,.18);border-radius:4px;
  filter:saturate(.94) contrast(1.04)}
.piloto-foto figcaption{margin-top:11px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);line-height:1.65}
.piloto-texto{min-width:0}
.piloto-texto .piloto-pie{margin-left:0;margin-right:0}

/* ── Que entrena: seis capacidades ─────────────────────────────────────── */
/* SIN CAJA Y SIN NUMERO. Sin caja porque la pagina ya tiene fichas para los
   simuladores y para el motor, y si todo es una ficha nada destaca: aqui
   basta una regla arriba, que es lo que separa sin encerrar. Sin numero
   porque un numero promete secuencia, y estas seis se ejercitan a la vez. */
.entrena{display:grid;gap:clamp(20px,2.6vw,34px) clamp(20px,2.6vw,38px);
  grid-template-columns:1fr;margin-top:clamp(18px,2.4vw,28px)}
@media(min-width:700px){.entrena{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.entrena{grid-template-columns:repeat(3,1fr)}}
.entrena article{border-top:2px solid var(--linea);padding-top:16px;min-width:0;
  transition:border-color .18s}
.entrena article:hover{border-top-color:var(--verde)}
.entrena h3{font-family:var(--sans);font-weight:600;font-size:1.04rem;color:var(--tinta);
  margin:0 0 7px}
.entrena p{margin:0;color:#B9C6D9;font-size:.95rem;line-height:1.56}

/* ── Como funciona: el recorrido de la ronda ───────────────────────────── */
/* La regla superior de cada paso se junta con la del siguiente, y los puntos
   quedan encima: en fila se lee como una linea de tiempo, y apilado en el
   telefono sigue siendo una lista de seis pasos numerados. Una sola forma
   que funciona en las dos pantallas, sin duplicar marcado. */
.recorrido{list-style:none;margin:clamp(24px,3.2vw,38px) 0 0;padding:0;
  display:grid;gap:clamp(4px,1vw,14px) clamp(14px,1.8vw,26px);grid-template-columns:1fr}
@media(min-width:560px){.recorrido{grid-template-columns:repeat(2,1fr)}}
@media(min-width:820px){.recorrido{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1100px){.recorrido{grid-template-columns:repeat(6,1fr)}}
.recorrido li{position:relative;border-top:1px solid var(--linea);
  padding:18px 0 20px;min-width:0}
.recorrido li::before{content:"";position:absolute;left:0;top:-4px;
  width:7px;height:7px;border-radius:50%;background:var(--verde)}
.recorrido .paso{display:block;font-family:var(--mono);font-size:10.5px;font-weight:500;
  letter-spacing:.2em;color:var(--gold-soft);margin-bottom:8px}
.recorrido b{display:block;font-weight:600;font-size:1.02rem;color:var(--tinta);
  margin-bottom:5px}
.recorrido li>span:not(.paso){display:block;color:#A9B8CC;font-size:.89rem;line-height:1.52}
.ciclo{text-align:center;font-family:var(--serif);font-weight:500;hyphens:manual;
  font-size:clamp(1.05rem,2.3vw,1.55rem);color:var(--tinta);line-height:1.4;
  margin:clamp(28px,3.6vw,44px) 0 0}
.ciclo i{font-style:normal;color:var(--verde);margin:0 4px}

/* ── El producto, sobre carbon ─────────────────────────────────────────── */
/* Es el unico cambio de superficie de la pagina, y tiene un trabajo: que la
   vista sepa, sin leer, que aqui empieza el producto. Va translucido y no
   opaco para que el campo de estrellas siga pasando por detras: una banda
   negra maciza corta la pagina en dos en vez de darle ritmo. */
.carbon{background:rgba(3,7,14,.86);border-top:1px solid rgba(45,212,191,.14);
  border-bottom:1px solid rgba(45,212,191,.14);
  padding:clamp(44px,6vw,82px) 0;margin:clamp(30px,4.6vw,62px) 0}
.ojo{text-align:left;font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:var(--gold-soft);margin:0 0 10px}
.vista-n{display:block;font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.2em;color:var(--gold-soft);margin-bottom:10px}

/* ── La sala de control ────────────────────────────────────────────────── */
/* La captura a la izquierda y el texto a la derecha, que es el orden en que
   se mira: primero se reconoce la pantalla, despues se lee que hace.
   El 24 de septiembre de 2026 este bloque iba sin imagen y se declaraba el
   hueco; ya hay captura del tablero en pie. */
.control{display:grid;gap:clamp(22px,3vw,40px);grid-template-columns:1fr;
  margin-top:clamp(34px,4.6vw,58px);border-top:1px solid var(--linea);
  padding-top:clamp(26px,3.4vw,42px);align-items:center}
@media(min-width:860px){.control{grid-template-columns:minmax(0,54fr) minmax(0,46fr)}}
.control-vista{margin:0;min-width:0}
/* `height:auto` OBLIGATORIO con los atributos width/height puestos: sin el,
   `aspect-ratio` no entra y la imagen sale deformada sin dar error. */
.control-vista img{display:block;width:100%;height:auto;border-radius:4px;
  border:1px solid rgba(45,212,191,.22);box-shadow:0 18px 44px rgba(0,0,0,.5)}
.control-texto{min-width:0}
.control h3{font-family:var(--serif);font-weight:500;margin:0 0 14px;
  font-size:clamp(1.2rem,2.6vw,1.7rem)}
.control-lista{list-style:none;margin:0;padding:0;display:grid;gap:0}
.control-lista li{color:#B9C6D9;font-size:.96rem;padding:9px 0 9px 18px;position:relative;
  border-bottom:1px solid rgba(45,212,191,.09)}
.control-lista li::before{content:"";position:absolute;left:0;top:1.02em;width:6px;height:6px;
  border-radius:50%;background:var(--verde)}
.control-cita{margin:clamp(18px,2.4vw,26px) 0 0;text-align:left;hyphens:manual;
  font-family:var(--serif);font-weight:500;font-size:clamp(1.02rem,1.9vw,1.2rem);
  line-height:1.42;color:var(--muted);
  border-left:2px solid var(--gold);padding-left:clamp(14px,1.8vw,20px)}
.control-cita b{color:var(--tinta);font-weight:500}

/* ── La maquina calcula / la decision sigue siendo humana ──────────────── */
.dual{margin:clamp(8px,1.6vw,18px) 0 0}
.dual-a,.dual-b{text-align:left;hyphens:manual;font-family:var(--serif);font-weight:500;
  line-height:1.08;margin:0}
.dual-a{font-size:clamp(1.25rem,3.2vw,2.1rem);color:var(--muted)}
.dual-b{font-size:clamp(1.85rem,5.2vw,3.4rem);color:var(--tinta);margin-top:6px}
.dual-b em{font-style:normal;color:var(--verde)}
.dual-pie{color:#B9C6D9;font-size:clamp(1rem,1.4vw,1.1rem);
  margin:clamp(18px,2.4vw,28px) 0 clamp(26px,3.2vw,38px)}

/* ── La evidencia: tres cifras, cada una con su fuente ─────────────────── */
/* EN DORADO Y NO EN VERDE. El verde azulado es el color con el que la pagina
   pinta los datos del simulador; estas cifras no salen del simulador, salen
   de la literatura, y el dorado es el color con el que la casa firma lo que
   respalda. Que se distingan a simple vista no es un capricho de color: es
   la diferencia entre «esto lo medimos nosotros» y «esto lo midio la
   investigacion publicada». */
.evidencia{display:grid;gap:clamp(20px,2.6vw,32px);grid-template-columns:1fr;
  margin-top:clamp(6px,1.4vw,16px)}
@media(min-width:900px){.evidencia{grid-template-columns:repeat(3,1fr)}}
.evidencia>div{border-top:2px solid var(--gold);padding-top:18px;min-width:0}
.evidencia .cifra{display:block;font-family:var(--mono);font-weight:500;line-height:1.06;
  font-size:clamp(1.45rem,3vw,2.05rem);color:var(--gold-soft);margin-bottom:9px}
.evidencia .rotulo{color:var(--tinta);margin-bottom:11px}
.evidencia .que{display:block;color:#B9C6D9;font-size:.93rem;line-height:1.55;
  text-align:justify;-webkit-hyphens:auto;hyphens:auto}
.evidencia .quien{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin-top:13px;line-height:1.6}
.matiz{margin:clamp(26px,3.2vw,40px) 0 0;color:var(--muted);font-size:.95rem;
  border-left:2px solid var(--linea);padding-left:clamp(14px,1.8vw,18px)}
.matiz b{color:var(--tinta);font-weight:600}

/* ── El catalogo, en dos alturas ───────────────────────────────────────── */
/* Los seis estaban en fichas iguales, y eso hacia que cuatro simuladores que
   todavia no se pueden comprar compitieran visualmente con los dos que si.
   Arriba lo disponible, grande y con sus temas a la vista; abajo lo que
   viene, pequeno y con su estado. La especificidad de `.simuladores.destacados`
   (0,2,0) gana sobre la de `.simuladores` (0,1,0), asi que la regla de tres
   columnas de mas arriba no vuelve a aplicarse aqui. */
.grupo-rotulo{text-align:left;font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.24em;text-transform:uppercase;color:var(--muted);
  margin:clamp(20px,2.6vw,30px) 0 clamp(14px,1.8vw,18px)}
.grupo-rotulo.segundo{margin-top:clamp(34px,4.4vw,54px);border-top:1px solid var(--linea);
  padding-top:clamp(24px,3vw,34px)}
@media(min-width:760px){.simuladores.destacados{grid-template-columns:repeat(2,1fr)}}
@media(min-width:640px){.simuladores.proximos{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.simuladores.proximos{grid-template-columns:repeat(4,1fr)}}
.destacados .sim{padding:clamp(24px,3vw,34px)}
.destacados .sim h3{font-size:clamp(1.28rem,2.6vw,1.65rem)}
.destacados .sim p{font-size:1rem}
.sim-temas{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.05em;
  color:var(--muted);line-height:1.8;margin-top:clamp(14px,1.8vw,18px)}
.proximos .sim{padding:18px}
.proximos .sim h3{font-size:1.02rem;margin:7px 0 8px}
.proximos .sim p{font-size:.88rem;line-height:1.5}

/* ── Para quien ────────────────────────────────────────────────────────── */
.publicos{display:grid;gap:clamp(22px,2.8vw,36px);grid-template-columns:1fr;
  margin-top:clamp(18px,2.4vw,28px)}
@media(min-width:820px){.publicos{grid-template-columns:repeat(3,1fr)}}
.publicos>div{border-top:1px solid var(--linea);padding-top:18px;min-width:0}
.publicos .rotulo{color:var(--verde);margin-bottom:13px}
.publicos ul{list-style:none;margin:0 0 18px;padding:0}
.publicos li{color:#B9C6D9;font-size:.96rem;padding:7px 0;
  border-bottom:1px solid rgba(45,212,191,.08)}
.publicos a{display:inline-flex;align-items:center;min-height:32px;
  font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:var(--verde)}
.publicos a:hover{color:var(--gold-soft)}

/* ── A la medida ───────────────────────────────────────────────────────── */
.medida{margin-top:clamp(34px,4.4vw,56px);border:1px solid var(--linea);border-radius:4px;
  padding:clamp(22px,3.4vw,38px);background:linear-gradient(180deg,rgba(16,30,51,.72),rgba(7,15,28,.72))}
.medida h3{font-family:var(--serif);font-weight:500;margin:0 0 11px;
  font-size:clamp(1.22rem,2.6vw,1.68rem)}
.medida p{margin:0;color:#B9C6D9}
.flujo{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:10px 0;
  margin:clamp(20px,2.6vw,30px) 0 0;padding:0}
.flujo li{display:flex;align-items:center;font-family:var(--mono);font-weight:500;
  font-size:clamp(10.5px,1.2vw,12px);letter-spacing:.16em;text-transform:uppercase;
  color:var(--tinta)}
.flujo li::after{content:"→";color:var(--verde);margin:0 clamp(10px,1.6vw,18px);opacity:.8}
.flujo li:last-child{color:var(--verde)}
.flujo li:last-child::after{content:"";margin:0}

/* ── El cierre ─────────────────────────────────────────────────────────── */
#hablemos .cierre-cta{text-align:center;
  background:linear-gradient(180deg,rgba(16,30,51,.70),rgba(7,15,28,.70))}
#hablemos .cierre-cta h2{font-size:clamp(1.65rem,4.2vw,2.85rem);line-height:1.16;
  margin:0 0 16px;hyphens:manual}
#hablemos .cierre-cta p{text-align:center;color:#C7D3E4;
  font-size:clamp(1rem,1.4vw,1.12rem);hyphens:manual}
#hablemos .acciones{justify-content:center}
#hablemos .lema{margin-bottom:14px}
.cta-pie{margin:clamp(20px,2.6vw,30px) 0 0;text-align:center;color:var(--muted);
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;line-height:2}
.cta-pie a{color:var(--verde);text-decoration:none}
.cta-pie a:hover{color:var(--gold-soft)}
.cta-pie .sep{margin:0 10px;opacity:.45}

/* ── El mapa del pie ───────────────────────────────────────────────────── */

/* EL DEDO PIDE 24 PX, Y VARIOS ENLACES MEDIAN 16 O 18.
   Medido el 25 de septiembre de 2026 a diez anchos: «Entrar con un codigo»
   salia de 16 px de alto, los tres de «para quien» de 18, y los del pie y la
   linea legal entre 18 y 21. La norma (WCAG 2.5.8) pide 24 como minimo.

   NO SE TOCA EL CUERPO DE LA LETRA: lo que crece es la zona que acepta el
   toque. Un rotulo en mono a 10 px puede seguir midiendo 10 px y tener 26 de
   area, y es lo correcto: agrandar la letra descuadraria la cabecera. */
.pie-mapa a,
.legal a,
.cta-pie a,
.publicos a,
.barra nav a,
.entrar{display:inline-flex;align-items:center;min-height:26px}

/* NADIE SE MUEVE SI NO QUIERE MOVIMIENTO. */
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
}
/* Y EL FOCO DEL TECLADO SE VE. Sin esto, recorrer la pagina con el tabulador
   es recorrerla a ciegas, que deja fuera a quien no usa raton. */
a:focus-visible,.boton:focus-visible{outline:2px solid var(--gold-soft);outline-offset:3px}

/* ── El telefono ───────────────────────────────────────────────────────── */
/* LA CABECERA PEGAJOSA SE QUEDA, PERO SIN EL MENU. Con los cinco rotulos el
   menu se parte en tres renglones y la cabecera se come un tercio de la
   pantalla del telefono: en vez de ayudar a recorrer, estorba. Abajo se
   quedan el logotipo y la unica llamada que importa, y la navegacion
   completa vive en el mapa del pie, que en el telefono es donde se busca. */
@media(max-width:700px){
  .barra{justify-content:space-between;gap:10px}
}
/* Y LOS TITULARES NO SE PARTEN A LA MITAD. El cierre lleva un <br> que a 380
   px deja un renglon de dos palabras y otro de ocho; en pantalla estrecha el
   salto se anula y el titular fluye. */
@media(max-width:620px){
  #hablemos .cierre-cta h2 br{display:none}
  .ciclo i{margin:0 2px}
}

/* EL ANCLA TIENE QUE PARAR DEBAJO DE LA CABECERA.
   Con la cabecera pegajosa, un salto a `#piloto` deja el titulo de la seccion
   escondido detras de ella: el visitante hace clic en el menu y aterriza en
   mitad de un parrafo. `scroll-margin-top` le dice al navegador donde parar,
   y son los 93 px que mide la cabecera mas aire. Se aplica a todo lo que
   tenga `id`, para que valga tambien para los anclajes que se anadan despues. */
[id]{scroll-margin-top:132px}
@media(max-width:959px){[id]{scroll-margin-top:96px}}

/* ── El cierre institucional ───────────────────────────────────────────── */
/* LO QUE ORDENA ES EL ESPACIO, NO LAS CAJAS. Aqui habia nueve enlaces
   apretados en tres columnas que se leian como un segundo menu. Un pie
   institucional no compite con la navegacion: acompana y cierra. Ni una caja
   ni un borde, salvo el filete finisimo del copyright.

   SE QUEDAN LAS REGLAS DEL PIE ANTERIOR -`.cierre-casa`, `.f-firma`,
   `.pertenencia`, `.firma-*`, `.de-group`-, y NO es descuido: las siguen
   usando `digitalmkt.html`, `trade-marketing.html` y el sitio de Group, que
   comparten esta hoja. Borrarlas aqui, como se intento primero, deja esas tres
   paginas con el pie desmontado y sin dar ningun error. Solo salio `.pie-mapa`,
   que era de esta pagina y de nadie mas. */
footer{border-top:1px solid var(--linea);text-align:left;
  padding:clamp(44px,6vw,80px) 0 clamp(28px,3.4vw,40px)}

.pie-marca{margin-bottom:clamp(38px,5vw,64px)}
.pie-marca img{height:clamp(52px,6vw,68px);width:auto;display:block;margin-bottom:16px}
.pie-lema{margin:0;font-family:var(--serif);font-weight:500;text-align:left;hyphens:manual;
  font-size:clamp(1.05rem,2.1vw,1.32rem);color:var(--tinta)}
.pie-grupo{margin:8px 0 0;text-align:left;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}

.pie-columnas{display:grid;gap:clamp(30px,4vw,48px);grid-template-columns:1fr;
  margin-bottom:clamp(38px,5vw,60px)}
@media(min-width:760px){.pie-columnas{grid-template-columns:repeat(3,1fr)}}
.pie-col{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
/* El titulo de columna es un H2 de verdad y no un span disfrazado: un lector
   de pantalla recorre el pie por encabezados, como recorre la pagina. */
.pie-tit{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.22em;
  text-transform:uppercase;color:var(--muted);margin:0 0 16px;line-height:1.5}
.pie-col a,.pie-col .pie-aqui,.pie-col .pie-sin{
  display:inline-flex;align-items:center;min-height:30px;
  font-size:.94rem;color:#B9C6D9;text-decoration:none;transition:color .15s}
.pie-col a:hover,.pie-col a:focus-visible{color:var(--verde)}
/* Donde se esta, marcado y sin enlace: un enlace a la propia pagina es un
   clic que no lleva a ninguna parte. */
.pie-col .pie-aqui{color:var(--verde)}
.pie-col .pie-sin{color:var(--muted);cursor:default}

.pie-legal{margin:0 0 clamp(26px,3.4vw,38px);text-align:left;hyphens:manual;
  color:var(--muted);font-size:.8rem;line-height:1.85}
.pie-legal a{color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.pie-legal a:hover{color:var(--verde)}

.pie-cierre{border-top:1px solid rgba(45,212,191,.10);padding-top:clamp(18px,2.4vw,26px);
  display:flex;flex-wrap:wrap;gap:10px clamp(18px,2.6vw,32px);
  align-items:center;justify-content:space-between}
.pie-cierre .copy{margin:0;text-align:left;color:var(--muted);font-size:.76rem;opacity:.8}
.pie-avisos{margin:0;display:flex;flex-wrap:wrap;gap:4px clamp(14px,2vw,24px)}
.pie-avisos a{display:inline-flex;align-items:center;min-height:28px;
  font-size:.76rem;color:var(--muted);text-decoration:none}
.pie-avisos a:hover,.pie-avisos a:focus-visible{color:var(--verde)}