/* Veriductiva — sistema visual v1.1 (D-B74). Generado desde el Design System. */
/* Veriductiva — generated from tokens.json */
:root, [data-theme="claro"] {
  --marino: #262a5b;
  --turquesa: #0b7584;
  --turquesa-claro: #5ec4d0;
  --anotacion: #4b4f78;
  --gris: #636363;
  --texto-sobre-marino: #c9cbe3;
  --linea: #b7bad3;
  --divisor: #d9dbea;
  --trazo-sobre-marino: #5a5f96;
  --velo: #eeeff5;
  --blanco: #ffffff;
  --banda-grafico: #8fd3db;
  --zona-grafico: #d7eef1;
  --motivo: #343a72;
}
:root {
  --espacio-1: 4px;
  --espacio-2: 8px;
  --espacio-3: 12px;
  --espacio-4: 16px;
  --espacio-6: 24px;
  --espacio-8: 32px;
  --espacio-12: 48px;
  --espacio-20: 80px;
  --radio-tarjeta: 6px;
  --radio-control: 4px;
  --linea-reposo: 1px;
  --linea-activa: 2px;
  --ancho-lectura: 72ch;
  --ancho-contenido: 1120px;
  --font-sans: "Lexend", system-ui, sans-serif;
}


/* Veriductiva — estilos de componentes. Sólo tokens; ningún valor de color literal. */
.vd, .vd * { box-sizing: border-box; }
.vd { font-family: var(--font-sans); font-weight: 300; color: var(--marino); }

/* Foco [derivado]: sólido, 2 px, marino sobre claro / turquesa-claro sobre marino */
.vd :focus-visible, .vd:focus-visible { outline: var(--linea-activa) solid var(--marino); outline-offset: 2px; }
.vd-sobre-marino :focus-visible, .vd-sobre-marino:focus-visible { outline-color: var(--turquesa-claro); }

/* Rótulo de contexto */
.vd-rotulo { display: block; margin: 0 0 var(--espacio-2); font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--turquesa); }
.vd-rotulo.vd-sobre-marino { color: var(--turquesa-claro); }

/* Botón */
.vd-boton { display: inline-flex; align-items: center; justify-content: center; gap: var(--espacio-2); min-height: 44px; padding: var(--espacio-3) var(--espacio-4); border-radius: var(--radio-control); border: var(--linea-reposo) solid var(--linea); background: var(--blanco); color: var(--marino); font-family: var(--font-sans); font-size: 16px; line-height: 20px; font-weight: 500; text-decoration: none; cursor: pointer; }
.vd-boton:hover { border-color: var(--marino); }
.vd-boton-principal { background: var(--turquesa); border-color: var(--turquesa); color: var(--blanco); }
.vd-boton-principal:hover { border-color: var(--marino); }
.vd-boton.vd-sobre-marino { background: transparent; border-color: var(--trazo-sobre-marino); color: var(--blanco); }
.vd-boton.vd-sobre-marino:hover { border-color: var(--texto-sobre-marino); }
.vd-boton-principal.vd-sobre-marino { background: var(--turquesa-claro); border-color: var(--turquesa-claro); color: var(--marino); }
.vd-boton[disabled] { cursor: not-allowed; background: var(--velo); border-color: var(--linea); color: var(--gris); }

/* Tarjeta */
.vd-tarjeta { position: relative; background: var(--velo); border-radius: var(--radio-tarjeta); padding: var(--espacio-6); }
.vd-tarjeta-borde { background: var(--blanco); border: var(--linea-reposo) solid var(--linea); }
.vd-tarjeta-rotulo-borde { position: absolute; top: 0; left: var(--espacio-6); transform: translateY(-50%); margin: 0; padding: 0 var(--espacio-2); background: var(--blanco); }
.vd-tarjeta-titulo { margin: 0 0 var(--espacio-2); font-size: 19px; line-height: 26px; font-weight: 500; color: var(--marino); }
.vd-tarjeta-cuerpo { margin: 0; font-size: 16px; line-height: 26px; font-weight: 300; color: var(--anotacion); }
.vd-icono { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radio-control); border: var(--linea-reposo) solid var(--linea); color: var(--marino); margin-bottom: var(--espacio-4); }

/* Cifra */
.vd-cifra { font-variant-numeric: tabular-nums; }
.vd-cifra-valor { display: block; font-size: 34px; line-height: 40px; font-weight: 500; color: var(--marino); }
.vd-cifra-heroe .vd-cifra-valor { font-size: 56px; line-height: 60px; }
.vd-cifra-destacada .vd-cifra-valor { color: var(--turquesa); }
.vd-cifra-unidad { font-size: 0.5em; margin-left: 0.15em; }
.vd-cifra-etiqueta { display: block; margin-top: var(--espacio-1); font-size: 16px; line-height: 24px; font-weight: 300; color: var(--anotacion); }
.vd-sobre-marino .vd-cifra-valor { color: var(--blanco); }
.vd-sobre-marino.vd-cifra-destacada .vd-cifra-valor { color: var(--turquesa-claro); }
.vd-sobre-marino .vd-cifra-etiqueta { color: var(--texto-sobre-marino); }

/* Fuente / nota al pie */
.vd-fuente { display: block; margin-top: var(--espacio-2); font-size: 12px; line-height: 18px; font-weight: 300; color: var(--gris); }
.vd-sobre-marino .vd-fuente, .vd-fuente.vd-sobre-marino { color: var(--texto-sobre-marino); }

/* Opción */
.vd-opciones { display: flex; flex-direction: column; gap: var(--espacio-3); margin: 0; padding: 0; border: 0; }
.vd-opcion { position: relative; display: block; width: 100%; text-align: left; padding: var(--espacio-4); border: var(--linea-reposo) solid var(--linea); border-radius: var(--radio-tarjeta); background: var(--blanco); color: var(--marino); font-family: var(--font-sans); font-size: 16px; line-height: 24px; font-weight: 300; cursor: pointer; }
.vd-opcion:hover { border-color: var(--anotacion); }
.vd-opcion[aria-checked="true"] { border: var(--linea-activa) solid var(--marino); padding: calc(var(--espacio-4) - 1px); }
.vd-opcion-marca { position: absolute; width: 8px; height: 8px; border-color: var(--marino); border-style: solid; border-width: 0; }
.vd-opcion-marca-a { top: 4px; left: 4px; border-top-width: 2px; border-left-width: 2px; }
.vd-opcion-marca-b { bottom: 4px; right: 4px; border-bottom-width: 2px; border-right-width: 2px; }

/* Cota (avance) */
.vd-cota { display: flex; align-items: center; gap: var(--espacio-3); }
.vd-cota svg { flex: 1; height: 16px; overflow: visible; }
.vd-cota-linea { stroke: var(--linea); stroke-width: 1; }
.vd-cota-hecho { stroke: var(--turquesa); stroke-width: 2; }
.vd-cota-marca { stroke: var(--anotacion); stroke-width: 1; }
.vd-cota-punto { fill: var(--turquesa); }
.vd-cota-texto { font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--anotacion); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Tabla */
.vd-tabla { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 22px; font-variant-numeric: tabular-nums; }
.vd-tabla caption { caption-side: bottom; text-align: left; padding-top: var(--espacio-2); font-size: 12px; line-height: 18px; color: var(--gris); }
.vd-tabla th { background: var(--marino); color: var(--blanco); font-weight: 500; text-align: left; padding: var(--espacio-3) var(--espacio-4); }
.vd-tabla td { padding: var(--espacio-3) var(--espacio-4); border-bottom: var(--linea-reposo) solid var(--divisor); color: var(--marino); font-weight: 300; }
.vd-tabla tbody th { background: transparent; color: var(--marino); font-weight: 500; border-bottom: var(--linea-reposo) solid var(--divisor); }
.vd-tabla .vd-num { text-align: right; }

/* Plano marino */
.vd-plano { background: var(--marino); color: var(--blanco); padding: var(--espacio-12) var(--espacio-4); }
.vd-plano-interior { max-width: var(--ancho-contenido); margin: 0 auto; }
.vd-plano-titulo { margin: 0; max-width: 20ch; font-size: 48px; line-height: 56px; font-weight: 500; color: var(--blanco); }
.vd-plano-subtitulo { margin: var(--espacio-4) 0 0; max-width: var(--ancho-lectura); font-size: 18px; line-height: 28px; font-weight: 300; color: var(--texto-sobre-marino); }
.vd-plano-acciones { margin-top: var(--espacio-8); display: flex; flex-wrap: wrap; gap: var(--espacio-3); }
@media (max-width: 600px) { .vd-plano-titulo { font-size: 36px; line-height: 44px; } }
@media (min-width: 900px) { .vd-plano { padding: var(--espacio-20) var(--espacio-8); } }


/* Página veriductiva.com. Sólo tokens; los valores en px replican el diseño aprobado. */
:root{color-scheme:light}
html{scroll-behavior:smooth}
body{margin:0;background:var(--blanco);color:var(--marino);font-family:var(--font-sans)}
img{max-width:100%}
a{color:var(--blanco);text-decoration:none}a:hover{color:var(--turquesa-claro)}
a:focus-visible,button:focus-visible{outline:2px solid var(--turquesa-claro);outline-offset:2px}
.claro a:focus-visible{outline-color:var(--marino)}
.solo-lectores{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.bloque{display:block}
.tenue{color:var(--texto-sobre-marino)}
.acciones{margin-top:32px;display:flex;flex-wrap:wrap;gap:12px}
.pagina{background:var(--blanco);color:var(--marino);font-family:var(--font-sans);font-weight:300}

/* Cabecera e inicio */
.heroe{background:var(--marino);color:var(--blanco);min-height:760px;display:flex;flex-direction:column}
.cabecera{width:100%;max-width:1280px;margin:0 auto;box-sizing:border-box;padding:20px 32px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px;border-bottom:1px solid var(--trazo-sobre-marino)}
.marca{display:block;line-height:0}
.marca-logo{width:132px;height:auto;display:block}
.nav{display:flex;flex-wrap:wrap;align-items:center;gap:8px 28px;font-size:15px;line-height:22px;font-weight:500}
.idiomas{display:flex;gap:6px;padding-left:20px;border-left:1px solid var(--trazo-sobre-marino);font-size:12px;letter-spacing:0.08em}
.idioma-actual{color:var(--blanco)}
.heroe-cuerpo{flex-grow:1;width:100%;max-width:1280px;margin:0 auto;box-sizing:border-box;padding:48px 32px 56px;display:flex;flex-wrap:wrap;align-items:center;gap:40px 48px}
.heroe-texto{flex:1 1 420px;min-width:0;max-width:560px;display:flex;flex-direction:column}
.heroe-titulo{margin:8px 0 0;font-size:48px;line-height:56px;font-weight:500;color:var(--blanco)}
.heroe-bajada{margin:20px 0 0;max-width:48ch;font-size:18px;line-height:28px;font-weight:300;color:var(--texto-sobre-marino)}
.heroe-figura{flex:1 1 520px;min-width:0;margin:0;display:flex;flex-direction:column;gap:12px}
.lienzo-figura{display:block;width:100%;height:520px;touch-action:pan-y}

/* Pies de figura y botones de texto */
.pie{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 24px;font-size:12px;line-height:18px;font-weight:300}
.pie-marino{color:var(--texto-sobre-marino)}
.pie-claro{color:var(--gris)}
.pie-marino .pie-texto{max-width:52ch}
.pie-claro .pie-texto{max-width:60ch}
.boton-texto{min-height:44px;padding:0 4px;background:transparent;border:0;color:var(--anotacion);font-family:var(--font-sans);font-size:12px;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;cursor:pointer}
.boton-texto:hover{color:var(--marino)}
.boton-texto-marino{color:var(--texto-sobre-marino)}
.boton-texto-marino:hover{color:var(--blanco)}
.boton-pausa{padding:0 12px}

/* Secciones claras */
.seccion{background:var(--blanco);padding:80px 32px}
.seccion-columna{max-width:1120px;margin:0 auto;display:flex;flex-direction:column;gap:48px}
.dos-columnas{display:flex;flex-wrap:wrap;gap:32px 64px}
.col-titulo{flex:1 1 380px;min-width:0}
.col-texto{flex:1 1 440px;min-width:0;display:flex;flex-direction:column;gap:16px;max-width:62ch}
.titulo-seccion{margin:8px 0 0;font-size:30px;line-height:38px;font-weight:500;color:var(--marino)}
.titulo-corto{max-width:22ch}
.parrafo{margin:0;font-size:16px;line-height:26px;color:var(--anotacion)}
.figura-linea{margin:0;display:flex;flex-direction:column;gap:8px}
.lienzo-linea{display:block;width:100%;height:360px}

/* Carrusel de soluciones */
.soluciones{background:var(--velo);padding:80px 0}
.soluciones-cabecera{max-width:1120px;margin:0 auto;padding:0 32px;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px 48px}
.soluciones-titulo{flex:1 1 520px;min-width:0;max-width:720px}
.controles{display:flex;align-items:center;gap:8px}
.contador{min-width:64px;font-size:12px;line-height:16px;font-weight:500;letter-spacing:0.08em;color:var(--anotacion);font-variant-numeric:tabular-nums}
.flecha{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--linea);border-radius:4px;background:var(--blanco);color:var(--marino);cursor:pointer}
.flecha:hover{border-color:var(--marino)}
.pista{margin-top:40px;display:flex;align-items:stretch;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:4px max(32px, calc((100% - 1056px) / 2)) 16px;scroll-padding-left:max(32px, calc((100% - 1056px) / 2));scrollbar-width:none}
.pista::-webkit-scrollbar{display:none}
.pista:focus-visible{outline:2px solid var(--marino);outline-offset:-2px}
.panel{flex:0 0 min(360px, 82vw);scroll-snap-align:start;display:flex;flex-direction:column;background:var(--blanco);border:1px solid var(--linea);border-radius:6px;overflow:hidden;transition:border-color .2s}
.panel:hover{border-color:var(--marino)}
.panel-grafico{height:112px;background:var(--marino);padding:10px 24px}
.panel-cuerpo{flex-grow:1;display:flex;flex-direction:column;padding:24px}
.panel-rotulo{font-size:12px;line-height:16px;font-weight:500;letter-spacing:0.08em;color:var(--gris)}
.panel-titulo{margin:8px 0 0;font-size:24px;line-height:32px;font-weight:500;color:var(--marino)}
.panel-lema{margin:4px 0 0;font-size:16px;line-height:24px;font-weight:500;color:var(--anotacion)}
.panel-promesa{margin:20px 0 0;font-size:18px;line-height:26px;font-weight:500;color:var(--marino)}
.panel-texto{margin:8px 0 0;font-size:15px;line-height:24px;color:var(--anotacion)}
.vinetas{margin:16px 0 0;padding:16px 0 0;border-top:1px solid var(--divisor);list-style:none;display:flex;flex-direction:column;gap:8px;font-size:15px;line-height:22px;color:var(--marino)}
.vinetas li{padding-left:18px;position:relative}
.vinetas li::before{content:"";position:absolute;left:0;top:10px;width:9px;height:1px;background:var(--marino)}

/* Contacto */
.contacto-fila{max-width:1120px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:32px 64px}
.contacto-texto{flex:1 1 480px;min-width:0;max-width:640px}
.contacto-bajada{margin:16px 0 0;font-size:16px;line-height:26px;color:var(--anotacion)}
.contacto-accion{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.nota{font-size:12px;line-height:18px;color:var(--gris)}

/* Pie de página */
.pie-pagina{background:var(--marino);color:var(--texto-sobre-marino);padding:48px 32px}
.pie-pagina-fila{max-width:1120px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px 48px}
.pie-pagina-marca{display:flex;flex-direction:column;gap:16px}
.pie-pagina-logo{width:160px;height:auto;display:block}
.pie-pagina-lema{margin:0;max-width:46ch;font-size:15px;line-height:22px;color:var(--texto-sobre-marino)}
.pie-pagina-enlaces{display:flex;flex-wrap:wrap;gap:8px 24px;font-size:12px;line-height:18px}

/* Página 404 */
.fondo-marino{background:var(--marino)}
.error{min-height:100vh;box-sizing:border-box;padding:48px max(16px, env(safe-area-inset-left, 0px));display:flex;flex-direction:column;justify-content:center;max-width:720px;margin:0 auto;color:var(--blanco)}
.error-logo{width:160px;height:auto;margin-bottom:48px}
.error-titulo{margin:8px 0 0;font-size:36px;line-height:44px;font-weight:500}
.error-texto{margin:8px 0 0;font-size:18px;line-height:28px;color:var(--texto-sobre-marino)}

@media (max-width: 600px){
  .heroe,.seccion,.soluciones,.pie-pagina{padding-left:max(16px, env(safe-area-inset-left, 0px));padding-right:max(16px, env(safe-area-inset-right, 0px))}
  .cabecera,.heroe-cuerpo,.error{padding-left:16px;padding-right:16px}
  .soluciones-cabecera{padding:0 16px}
  .pista{padding-left:16px;padding-right:16px;scroll-padding-left:16px}
  .heroe-titulo{font-size:36px;line-height:44px}
  .lienzo-figura{height:420px}
  .lienzo-linea{height:320px}
}

/* Color de los dibujos: plano marino como el inicio, con las reglas de la norma para fondos marino. Las líneas van en
   texto_sobre_marino (8,4:1) y la serie principal de cada dibujo (los seleccionados, la retroalimentación, el
   crecimiento, los vínculos) en turquesa_claro (6,6:1), a opacidad completa. */
.panel-grafico svg > g{stroke:var(--texto-sobre-marino)}
.acento{stroke:var(--turquesa-claro);opacity:1}

/* Dibujos de las tarjetas: las mismas líneas, con un movimiento sencillo que se repite.
   El desplazamiento de cada animación es múltiplo del patrón de guiones, para que el ciclo no salte. */
.fluye{stroke-dasharray:6 5;animation:fluir 1.6s linear infinite}
.fluye:nth-child(2n){animation-duration:2.1s}
.fluye:nth-child(3n){animation-delay:-.7s}
.fluye.sale{animation-duration:1.1s}
@keyframes fluir{to{stroke-dashoffset:-22}}
.enlace{animation:enlazar 1.8s linear infinite}
@keyframes enlazar{to{stroke-dashoffset:-10}}
.nodo{transform-box:fill-box;transform-origin:center;animation:latir 3.2s ease-in-out infinite}
.nodo:nth-of-type(2){animation-delay:-.6s}
.nodo:nth-of-type(3){animation-delay:-1.3s}
.nodo:nth-of-type(4){animation-delay:-2s}
.nodo:nth-of-type(5){animation-delay:-2.6s}
@keyframes latir{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
/* fractales de Equipos (tarjetas.js): cada nivel gira sobre su propio centro (el origen de su grupo) y los menores además laten */
.f0,.f1,.f2{transform-box:view-box;transform-origin:0 0;animation:orbitar 30s linear infinite}
.f1,.f2{animation-name:orbitar-latido}
@keyframes orbitar{to{transform:rotate(360deg)}}
@keyframes orbitar-latido{0%{transform:rotate(0) scale(1)}50%{transform:rotate(180deg) scale(1.3)}100%{transform:rotate(360deg) scale(1)}}
.crece{stroke-dasharray:1;stroke-dashoffset:1;animation:crecer 7s cubic-bezier(.3,.7,.3,1) infinite}
.crece:nth-child(n+9){animation-delay:.12s}
.crece:nth-child(n+17){animation-delay:.24s}
.crece:nth-child(n+25){animation-delay:.36s}
.crece:nth-child(n+33){animation-delay:.48s}
.crece:nth-child(n+41){animation-delay:.6s}
.crece:nth-child(n+49){animation-delay:.72s}
@keyframes crecer{0%{stroke-dashoffset:1}30%,85%{stroke-dashoffset:0}100%{stroke-dashoffset:1}}
@media (prefers-reduced-motion: reduce){
  .fluye,.enlace,.nodo,.crece,.f0,.f1,.f2{animation:none}
  .fluye{stroke-dasharray:none}
  .crece{stroke-dashoffset:0}
}