/* Imagina.Edu — presentación scrollytelling */
:root {
  --navy: #0F1E5E;
  --navy-profundo: #08113A;
  --cian: #0FB0E3;
  --indigo: #4F63DB;
  --violeta: #7B4FE0;
  --destello: #E8B84A;
  --paper: #F3F5FB;
  /* Bienestar y desarrollo humano */
  --salmon: #F8A28B;
  --salmon-rgb: 248,162,139;
  --salmon-suave: #FFCDBE;
  --degradado: linear-gradient(90deg, #4F63DB, #0FB0E3);
  --texto: #F3F5FB;
  --texto-suave: #B9C3E6;
  --linea: rgba(143, 165, 255, 0.18);
  --vidrio: rgba(15, 30, 94, 0.45);
  --vidrio-borde: rgba(120, 150, 255, 0.22);
  --f-titulo: 'Fraunces', Georgia, serif;
  --f-texto: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ancho: 1200px;
  --gutter: clamp(16px, 4vw, 48px);
  --radio: 20px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; }
body {
  margin: 0;
  background: var(--navy-profundo);
  color: var(--texto);
  font-family: var(--f-texto);
  font-size: clamp(16px, 1.05vw + 10px, 18px);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img, video, canvas, svg { display: block; max-width: 100%; }
h1, h2, h3 { font-family: var(--f-titulo); font-weight: 600; line-height: 1.08; margin: 0; letter-spacing: -0.01em; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--cian); outline-offset: 3px; border-radius: 6px; }

.saltar { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--paper); color: var(--navy); padding: 8px 14px; border-radius: 8px; font-weight: 600; }
.saltar:focus { top: 12px; }

/* Barra de progreso */
.progreso { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 60; background: rgba(255,255,255,0.06); }
.progreso span { display: block; height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(0); background: var(--degradado); box-shadow: 0 0 12px rgba(15,176,227,0.7); }

/* Fondo canvas */
#fondo-canvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
body::before {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(60vmax 50vmax at 85% 10%, rgba(79,99,219,0.22), transparent 60%),
    radial-gradient(50vmax 40vmax at 5% 70%, rgba(15,176,227,0.14), transparent 60%),
    radial-gradient(40vmax 40vmax at 60% 110%, rgba(123,79,224,0.18), transparent 60%);
}
main, .pie, .cabecera { position: relative; z-index: 1; }

/* Cabecera */
.cabecera {
  position: fixed; top: 3px; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 10px var(--gutter);
  transition: background .35s, backdrop-filter .35s, box-shadow .35s;
}
.cabecera.es-solida { background: rgba(8,17,58,0.72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--linea); }
.cabecera__marca img { height: 42px; width: auto; }
.cabecera__nav { display: flex; gap: 4px; }
.cabecera__nav a { text-decoration: none; font-size: 0.85rem; color: var(--texto-suave); padding: 6px 12px; border-radius: 999px; transition: color .2s, background .2s; }
.cabecera__nav a:hover, .cabecera__nav a.activo { color: var(--texto); background: rgba(79,99,219,0.22); }
@media (max-width: 960px) { .cabecera__nav { display: none; } }
.cabecera__acciones { display: flex; align-items: center; gap: 14px; }
.cabecera__ingresar { text-decoration: none; font-size: 0.85rem; color: var(--texto-suave); padding: 6px 4px; transition: color .2s; }
.cabecera__ingresar:hover, .cabecera__ingresar:focus-visible { color: var(--texto); text-decoration: underline; }

/* Botones */
.btn {
  position: relative; display: inline-flex; align-items: center; gap: 10px;
  font: 600 1rem/1 var(--f-texto); color: #fff; text-decoration: none;
  padding: 16px 28px; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--degradado);
  box-shadow: 0 10px 30px -8px rgba(15,176,227,0.6), inset 0 1px 0 rgba(255,255,255,0.25);
  transition: transform .25s, box-shadow .25s;
  overflow: hidden; isolation: isolate;
}
.btn::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.35) 50%, transparent 70%); transform: translateX(-120%); transition: transform .7s; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -10px rgba(15,176,227,0.8), inset 0 1px 0 rgba(255,255,255,0.25); }
.btn:hover::after { transform: translateX(120%); }
.btn--mini { padding: 10px 18px; font-size: 0.85rem; }
.btn svg { width: 18px; height: 18px; }

/* Utilidades */
.contenedor { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 var(--gutter); }
.seccion { padding: clamp(80px, 12vw, 160px) 0; }
.etiqueta {
  display: inline-flex; align-items: center; gap: 8px;
  font: 600 0.78rem/1 var(--f-texto); letter-spacing: 0.14em; text-transform: uppercase; color: var(--cian);
}
.etiqueta::before { content: ''; width: 24px; height: 2px; background: var(--degradado); border-radius: 2px; }
.titulo-seccion { font-size: clamp(2.1rem, 4.6vw, 3.8rem); margin-top: 16px; }
.lead { color: var(--texto-suave); font-size: clamp(1.05rem, 1.3vw, 1.25rem); max-width: 60ch; margin-top: 18px; }
.grad { background: var(--degradado); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tarjeta {
  position: relative; background: var(--vidrio); border: 1px solid var(--vidrio-borde); border-radius: var(--radio);
  padding: clamp(22px, 2.4vw, 32px); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 20px 50px -30px rgba(0,0,0,0.6);
}
.tarjeta h3 { font-size: clamp(1.25rem, 1.6vw, 1.5rem); }
.tarjeta p { color: var(--texto-suave); margin-top: 10px; }
.chip { display: inline-flex; align-items: center; gap: 6px; font: 600 0.72rem/1 var(--f-texto); letter-spacing: .06em; text-transform: uppercase; padding: 6px 10px; border-radius: 999px; white-space: nowrap; }
.chip--ok { color: #7EE3C4; background: rgba(46,196,150,0.14); border: 1px solid rgba(46,196,150,0.35); }
.chip--pronto { color: var(--destello); background: rgba(232,184,74,0.12); border: 1px solid rgba(232,184,74,0.35); }
.chip::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.icono { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: linear-gradient(135deg, rgba(79,99,219,0.35), rgba(15,176,227,0.25)); border: 1px solid var(--vidrio-borde); color: #CFE9FF; }
.icono svg { width: 26px; height: 26px; }

/* HERO */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: grid; place-items: center; overflow: hidden; padding: 110px 0 80px; }
.hero__video { position: absolute; inset: 0; z-index: 0; }
.hero__video video { width: 100%; height: 100%; object-fit: cover; opacity: 0.55; }
.hero__video::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,17,58,0.55) 0%, rgba(8,17,58,0.35) 45%, var(--navy-profundo) 100%), radial-gradient(70% 60% at 50% 45%, transparent, rgba(8,17,58,0.6)); }
.hero__inner { position: relative; z-index: 1; text-align: center; display: flex; flex-direction: column; align-items: center; }
.hero__marca { display: flex; flex-direction: column; align-items: center; margin-bottom: clamp(30px, 4.5vh, 52px); }
.hero__logo { width: clamp(260px, 40vw, 540px); height: auto; filter: drop-shadow(0 14px 50px rgba(15,176,227,0.38)) drop-shadow(0 0 90px rgba(79,99,219,0.25)); }
.hero__leyenda { display: flex; align-items: center; justify-content: center; gap: clamp(12px, 1.6vw, 22px); margin-top: clamp(14px, 2vw, 22px); max-width: 100%; }
.hero__leyenda-txt { font: 500 clamp(0.74rem, 0.55vw + 0.55rem, 1rem)/1.6 var(--f-texto); letter-spacing: 0.32em; text-transform: uppercase; color: #EAF0FF; margin-right: -0.32em; text-shadow: 0 0 24px rgba(15,176,227,0.35); }
.hero__raya { flex: none; width: clamp(28px, 5vw, 72px); height: 1px; background: var(--degradado); transform-origin: 100% 50%; }
.hero__raya:last-child { background: linear-gradient(90deg, #0FB0E3, #4F63DB); transform-origin: 0 50%; }
.hero__titulo { font-size: clamp(2.2rem, 5.6vw, 4.8rem); font-weight: 600; max-width: 16ch; line-height: 1.04; }
.hero__titulo .palabra { display: inline-block; white-space: nowrap; }
.hero__titulo .palabra > span { display: inline-block; }
.hero__sub { color: var(--texto-suave); font-size: clamp(1.05rem, 1.6vw, 1.35rem); max-width: 56ch; margin: 26px auto 0; }
.hero__acciones { margin-top: 38px; display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; align-items: center; }
.hero__lema { font-family: var(--f-titulo); font-style: italic; color: var(--texto-suave); }
.hero__lema b { color: var(--destello); font-weight: 600; font-style: normal; }
.hero__scroll { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 0.72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--texto-suave); }
.hero__scroll i { width: 22px; height: 36px; border: 1.5px solid rgba(185,195,230,0.5); border-radius: 12px; position: relative; }
.hero__scroll i::after { content: ''; position: absolute; left: 50%; top: 7px; width: 3px; height: 7px; margin-left: -1.5px; border-radius: 2px; background: var(--cian); animation: rueda 1.8s infinite; }
@keyframes rueda { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(12px); } }
.hero__anillo { position: absolute; z-index: 0; width: min(120vmin, 1100px); aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(79,99,219,0.18); left: 50%; top: 50%; translate: -50% -50%; pointer-events: none; }
.hero__anillo::before, .hero__anillo::after { content: ''; position: absolute; inset: 12%; border-radius: 50%; border: 1px dashed rgba(15,176,227,0.16); }
.hero__anillo::after { inset: 26%; border-style: solid; border-color: rgba(123,79,224,0.14); }

/* PROBLEMA */
.problema__grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(32px, 6vw, 90px); align-items: center; min-height: 70vh; }
@media (min-width: 821px) {
  .problema { padding: 0; }
  .problema__grid { min-height: 100vh; min-height: 100svh; padding-top: 90px; padding-bottom: 30px; }
  .problema__item.tarjeta { padding-top: 20px; padding-bottom: 20px; }
}
.problema__lista { display: grid; gap: 14px; counter-reset: p; }
.problema__item { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start; }
.problema__item::before { counter-increment: p; content: counter(p, decimal-leading-zero); font: 600 1.6rem/1 var(--f-titulo); color: transparent; -webkit-text-stroke: 1px rgba(15,176,227,0.7); padding-top: 4px; }
.problema__item h3 { font-size: 1.3rem; }

/* PILARES */
/* 5 pilares: 3 arriba + 2 abajo más anchos (rejilla de 6) */
.pilares__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; margin-top: 56px; perspective: 1200px; }
.pilares__grid > .pilar { grid-column: span 2; }
.pilares__grid > .pilar:nth-child(4):nth-last-child(2), .pilares__grid > .pilar:nth-child(5):last-child { grid-column: span 3; }
.pilar[data-id="bienestar"] { --acento: var(--salmon); background: linear-gradient(150deg, rgba(var(--salmon-rgb),.15), rgba(15,30,94,.45) 60%); border-color: rgba(var(--salmon-rgb),.32); }
.pilar[data-id="bienestar"]::before { background: linear-gradient(160deg, var(--salmon), rgba(var(--salmon-rgb),.35) 40%, transparent 70%); }
.pilar[data-id="bienestar"]::after { background: radial-gradient(var(--salmon-suave), transparent 70%); opacity: .2; }
.pilar[data-id="bienestar"] .icono { background: linear-gradient(135deg, rgba(var(--salmon-rgb),.38), rgba(var(--salmon-rgb),.14)); border-color: rgba(var(--salmon-rgb),.45); color: var(--salmon-suave); }
.pilar__enlace { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; font-weight: 600; font-size: .92rem; color: var(--salmon); text-decoration: none; }
.pilar__enlace:hover, .pilar__enlace:focus-visible { color: var(--salmon-suave); }
.pilar__enlace svg { width: 16px; height: 16px; transition: transform .25s; }
.pilar__enlace:hover svg, .pilar__enlace:focus-visible svg { transform: translateX(4px); }
.pilar { display: flex; flex-direction: column; gap: 16px; min-height: 100%; overflow: hidden; transition: border-color .3s, transform .3s; transform-style: preserve-3d; }
.pilar::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: linear-gradient(160deg, var(--acento, var(--cian)), transparent 50%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: .7; pointer-events: none; }
.pilar::after { content: ''; position: absolute; width: 220px; height: 220px; right: -80px; top: -80px; border-radius: 50%; background: radial-gradient(var(--acento, var(--cian)), transparent 70%); opacity: .18; pointer-events: none; }
.pilar[data-id="plataforma"] { --acento: #4F63DB; }
.pilar[data-id="odet"] { --acento: #0FB0E3; }
.pilar[data-id="familias"] { --acento: #7B4FE0; }
.pilar[data-id="confianza"] { --acento: #E8B84A; }
.pilar p { margin-top: 0; }
.pilar ul { display: grid; gap: 8px; margin-top: auto; padding-top: 8px; border-top: 1px solid var(--linea); }
.pilar li { display: flex; gap: 10px; font-size: 0.92rem; color: var(--texto); padding-top: 6px; }
.pilar li::before { content: ''; flex: none; width: 6px; height: 6px; margin-top: .55em; border-radius: 50%; background: var(--acento); box-shadow: 0 0 10px var(--acento); }

/* RECORRIDO */
.recorrido { padding-bottom: 0; }
.recorrido__pin { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: 100px 0 60px; overflow: hidden; }
.recorrido__cabeza { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; }
.recorrido__cabeza > div { flex: 1 1 520px; max-width: 820px; }
.recorrido__contador { flex: none; font: 600 clamp(2.4rem, 5vw, 4rem)/1 var(--f-titulo); color: var(--texto-suave); font-variant-numeric: tabular-nums; }
.recorrido__contador b { color: var(--texto); }
.recorrido__ventana { margin-top: 48px; position: relative; }
.recorrido__linea { position: absolute; left: var(--pl); right: var(--gutter); top: 11px; height: 2px; background: var(--linea); }
.recorrido__linea span { position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(0); background: var(--degradado); box-shadow: 0 0 14px rgba(15,176,227,.8); }
.recorrido__pista { --pl: max(var(--gutter), calc((100vw - var(--ancho)) / 2 + var(--gutter))); position: relative; display: flex; gap: 24px; width: max-content; padding: 0 var(--gutter) 0 var(--pl); }
.etapa { width: min(360px, 78vw); flex: none; position: relative; padding-top: 44px; opacity: .35; transition: opacity .5s; }
.etapa.activa { opacity: 1; }
.etapa__punto { position: absolute; top: 2px; left: 0; width: 20px; height: 20px; border-radius: 50%; background: var(--navy-profundo); border: 2px solid rgba(143,165,255,.4); transition: all .4s; }
.etapa.activa .etapa__punto { border-color: var(--cian); background: var(--cian); box-shadow: 0 0 0 6px rgba(15,176,227,.18), 0 0 20px var(--cian); }
.etapa[data-estado="en_camino"].activa .etapa__punto { border-color: var(--destello); background: var(--destello); box-shadow: 0 0 0 6px rgba(232,184,74,.15), 0 0 20px var(--destello); }
.etapa__num { font: 600 0.78rem/1 var(--f-texto); letter-spacing: .14em; text-transform: uppercase; color: var(--cian); }
.etapa .tarjeta { margin-top: 14px; min-height: 230px; display: flex; flex-direction: column; gap: 6px; }
.etapa .tarjeta h3 { margin-top: 8px; }
.etapa .chip { align-self: flex-start; margin-top: auto; }

/* ODET */
.odet__grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(32px, 6vw, 80px); align-items: start; }
.odet__fijo { position: sticky; top: 110px; }
.odet__nucleo { position: relative; width: min(340px, 70vw); aspect-ratio: 1; margin: 48px 0 0; display: grid; place-items: center; }
.odet__nucleo .orbe { width: 42%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #BFF0FF, var(--cian) 30%, var(--indigo) 65%, var(--violeta)); box-shadow: 0 0 60px rgba(15,176,227,.6), 0 0 140px rgba(79,99,219,.45); display: grid; place-items: center; font: 700 clamp(1.4rem, 3vw, 2rem)/1 var(--f-titulo); color: #fff; letter-spacing: .04em; animation: latido 4s ease-in-out infinite; }
.odet__nucleo .orbita { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(15,176,227,.28); animation: girar 24s linear infinite; }
.odet__nucleo .orbita:nth-child(2) { inset: 13%; border-color: rgba(123,79,224,.35); animation-duration: 16s; animation-direction: reverse; }
.odet__nucleo .orbita::before { content: ''; position: absolute; top: -5px; left: 50%; width: 10px; height: 10px; border-radius: 50%; background: var(--cian); box-shadow: 0 0 16px var(--cian); }
.odet__nucleo .orbita:nth-child(2)::before { background: var(--destello); box-shadow: 0 0 16px var(--destello); top: auto; bottom: -5px; }
@keyframes girar { to { transform: rotate(360deg); } }
@keyframes latido { 50% { transform: scale(1.05); box-shadow: 0 0 80px rgba(15,176,227,.75), 0 0 180px rgba(79,99,219,.5); } }
.odet__caps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.cap { display: flex; flex-direction: column; gap: 4px; }
.cap .icono { margin-bottom: 10px; width: 44px; height: 44px; border-radius: 12px; }
.cap .icono svg { width: 22px; height: 22px; }
.cap h3 { font-size: 1.15rem; }
.cap p { font-size: 0.95rem; margin-top: 4px; }

/* TALLERES (bienestar y desarrollo humano) */
.talleres { position: relative; overflow: hidden; }
.talleres__halo { position: absolute; z-index: 0; left: 50%; top: 4%; width: min(1100px, 140vw); aspect-ratio: 1.6; translate: -50% 0; pointer-events: none;
  background: radial-gradient(48% 48% at 40% 42%, rgba(var(--salmon-rgb),.22), transparent 70%), radial-gradient(40% 45% at 70% 58%, rgba(255,205,190,.10), transparent 70%); filter: blur(20px); }
.talleres .contenedor { position: relative; z-index: 1; }
.talleres__cabeza { text-align: center; display: flex; flex-direction: column; align-items: center; }
.talleres__cabeza .lead { margin-left: auto; margin-right: auto; }
.talleres .etiqueta { color: var(--salmon); }
.talleres .etiqueta::before { background: linear-gradient(90deg, var(--salmon), var(--salmon-suave)); }
.talleres .titulo-seccion { text-shadow: 0 0 40px rgba(var(--salmon-rgb),.25); }
.talleres .titulo-seccion::after { content: ''; display: block; width: 72px; height: 2px; margin: 22px auto 0; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--salmon), transparent); }
.talleres__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 56px; align-items: stretch; }
/* Bloques: familia cálida alrededor del salmón (salmón, durazno, rosa) */
.taller { --tono: var(--salmon); --tono-rgb: var(--salmon-rgb);
  position: relative; display: flex; flex-direction: column; gap: 14px; overflow: hidden;
  padding: clamp(24px, 2.6vw, 34px); border-radius: 26px;
  background: linear-gradient(170deg, rgba(var(--tono-rgb), .12), rgba(15,30,94,.55) 38%, rgba(8,17,58,.6));
  border: 1px solid rgba(var(--tono-rgb), .3);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 30px 60px -36px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.06); }
.taller[data-tono="bachillerato"] { --tono: #FFC48C; --tono-rgb: 255,196,140; }
.taller[data-tono="familias"] { --tono: #F79CB8; --tono-rgb: 247,156,184; }
.taller::after { content: ''; position: absolute; width: 240px; height: 240px; right: -90px; top: -90px; border-radius: 50%; background: radial-gradient(rgba(var(--tono-rgb), .35), transparent 70%); pointer-events: none; }
.taller__cabeza { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.taller__icono { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; color: var(--tono); background: rgba(var(--tono-rgb), .14); border: 1px solid rgba(var(--tono-rgb), .4); box-shadow: 0 0 30px -6px rgba(var(--tono-rgb), .55); }
.taller__icono svg { width: 26px; height: 26px; }
.taller__cantidad { font-size: .85rem; color: var(--texto-suave); text-align: right; line-height: 1.1; }
.taller__cantidad b { display: block; font: 600 2.1rem/1 var(--f-titulo); color: var(--tono); }
.taller__badges { display: flex; flex-wrap: wrap; gap: 8px; }
.taller__badge { font: 600 .72rem/1 var(--f-texto); letter-spacing: .08em; text-transform: uppercase; padding: 7px 11px; border-radius: 999px; color: var(--tono); background: rgba(var(--tono-rgb), .14); border: 1px solid rgba(var(--tono-rgb), .4); }
.taller__badge--suave { color: var(--texto); background: rgba(243,245,251,.06); border-color: rgba(243,245,251,.16); letter-spacing: .03em; text-transform: none; font-weight: 500; font-size: .8rem; }
.taller h3 { font-size: clamp(1.4rem, 1.9vw, 1.75rem); margin-top: 4px; }
.taller__desc { color: var(--texto-suave); font-size: .97rem; }
.taller__ejes { display: grid; gap: 12px; margin-top: auto; padding-top: 18px; border-top: 1px solid rgba(var(--tono-rgb), .22); position: relative; }
.eje { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; }
.eje__num { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font: 600 .95rem/1 var(--f-titulo); color: var(--navy-profundo); background: var(--tono); box-shadow: 0 0 16px -2px rgba(var(--tono-rgb), .7); }
.eje h4 { font: 600 1rem/1.25 var(--f-texto); color: var(--texto); margin: 3px 0 0; }
.eje p { color: var(--texto-suave); font-size: .9rem; margin-top: 3px; }

/* ROLES */
.roles__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 56px; }
.rol { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start; }
.rol h3 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 1.2rem; }
.rol p { margin-top: 6px; }

/* CONFIANZA */
.confianza__marco { position: relative; border-radius: 32px; padding: clamp(32px, 6vw, 72px); background: linear-gradient(160deg, rgba(15,30,94,.75), rgba(8,17,58,.6)); border: 1px solid var(--vidrio-borde); overflow: hidden; }
.confianza__marco::before { content: ''; position: absolute; inset: auto -20% -60% auto; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(rgba(15,176,227,.25), transparent 65%); pointer-events: none; }
.confianza__escudo { position: absolute; right: clamp(20px, 5vw, 70px); top: clamp(20px, 5vw, 60px); width: clamp(70px, 10vw, 130px); color: rgba(15,176,227,.5); }
.confianza__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 48px; position: relative; }
.confianza__grid .tarjeta { background: rgba(8,17,58,.5); }
.confianza__grid h3 { display: flex; gap: 10px; align-items: center; font-size: 1.15rem; }
.confianza__grid h3 svg { width: 20px; height: 20px; color: var(--cian); flex: none; }

/* CIFRAS */
.cifras__cabeza { text-align: center; display: flex; flex-direction: column; align-items: center; margin-bottom: clamp(40px, 5vw, 64px); }
.cifras__cabeza .lead { margin-left: auto; margin-right: auto; }
.cifras__grid { display: grid; grid-template-columns: repeat(var(--n, 4), 1fr); gap: 0; border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
.cifra { padding: clamp(28px, 4vw, 48px) clamp(12px, 2vw, 28px); text-align: center; position: relative; }
.cifra + .cifra::before { content: ''; position: absolute; left: 0; top: 20%; bottom: 20%; width: 1px; background: var(--linea); }
.cifra__valor { font: 600 clamp(2.6rem, 6vw, 5rem)/1 var(--f-titulo); font-variant-numeric: tabular-nums; }
.cifra__etiqueta { color: var(--texto); margin-top: 12px; font-size: 0.95rem; font-weight: 500; }
.cifra__detalle { color: var(--texto-suave); margin: 10px auto 0; font-size: 0.82rem; line-height: 1.5; max-width: 32ch; opacity: .85; }

/* EN CAMINO */
.encamino__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 56px; }
.pronto { border-style: dashed; border-color: rgba(232,184,74,.35); }
.pronto .chip { margin-bottom: 14px; }
.pronto h3 { font-size: 1.15rem; }

/* CIERRE */
.cierre { text-align: center; padding-bottom: clamp(100px, 14vw, 180px); overflow: hidden; }
.cierre__inner { display: flex; flex-direction: column; align-items: center; }
.cierre__titulo { font-size: clamp(2.4rem, 6.5vw, 5.4rem); max-width: 16ch; }
.cierre .lead { margin-left: auto; margin-right: auto; }
.cierre .btn { margin-top: 40px; font-size: 1.1rem; padding: 20px 36px; }
.cierre__nota { margin-top: 22px; color: var(--texto-suave); font-size: 0.9rem; max-width: 60ch; }
.cierre__halo { width: min(520px, 90vw); aspect-ratio: 2 / 1; margin: 0 auto -40px; background: radial-gradient(50% 100% at 50% 100%, rgba(15,176,227,.35), transparent 70%); filter: blur(10px); }

/* PIE */
.pie { border-top: 1px solid var(--linea); padding: 32px var(--gutter); display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; color: var(--texto-suave); font-size: 0.88rem; max-width: var(--ancho); margin: 0 auto; }
.pie img { height: 36px; width: auto; }

/* Estado inicial de animación (solo si hay JS + movimiento) */
.anim [data-rev] { opacity: 0; }

/* Responsive */
@media (max-width: 1080px) {
  .pilares__grid { grid-template-columns: repeat(2, 1fr); }
  .pilares__grid > .pilar, .pilares__grid > .pilar:nth-child(4):nth-last-child(2) { grid-column: auto; }
  .pilares__grid > .pilar:nth-child(odd):last-child { grid-column: 1 / -1; }
  .talleres__grid { grid-template-columns: 1fr; max-width: 720px; margin-left: auto; margin-right: auto; }
  .roles__grid, .encamino__grid, .confianza__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 820px) {
  .problema__grid, .odet__grid { grid-template-columns: 1fr; min-height: 0; }
  .odet__fijo { position: static; }
  .odet__nucleo { margin: 32px auto 8px; width: min(260px, 64vw); }
  .cifras__grid { grid-template-columns: repeat(2, 1fr); }
  .cifra:nth-child(3)::before { display: none; }
  .cifra:nth-child(n+3) { border-top: 1px solid var(--linea); }
  /* Recorrido vertical en móvil */
  .recorrido__pin { min-height: 0; padding: 0; overflow: visible; }
  .recorrido__ventana { margin-top: 40px; }
  .recorrido__linea { left: 9px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .recorrido__linea span { transform-origin: 50% 0; transform: scaleY(0); }
  .recorrido__pista { flex-direction: column; width: auto; padding: 0; gap: 20px; }
  .etapa { width: auto; padding: 0 0 0 40px; }
  .etapa .tarjeta { min-height: 0; }
  .recorrido__contador { display: none; }
}
@media (max-width: 600px) {
  .pilares__grid, .roles__grid, .encamino__grid, .confianza__grid, .odet__caps { grid-template-columns: 1fr; }
  .cabecera__marca img { height: 34px; }
  .hero__scroll { display: none; }
  .hero__leyenda { flex-direction: column; gap: 12px; }
  .hero__leyenda-txt { font-size: 0.7rem; letter-spacing: 0.18em; margin-right: -0.18em; text-align: center; text-wrap: balance; }
  .hero__raya:first-child { display: none; }
  .hero__raya:last-child { width: 56px; background: var(--degradado); transform-origin: 50% 50%; }
  .rol { grid-template-columns: 1fr; gap: 12px; }
  .confianza__escudo { opacity: .35; }
  .cifras__grid { grid-template-columns: 1fr; }
  .cifra + .cifra::before { display: none; }
  .cifra + .cifra { border-top: 1px solid var(--linea); }
  .cifra { padding: 28px 8px; }
  .taller { border-radius: 22px; }
}

/* Movimiento reducido: todo visible, sin animaciones pesadas */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .anim [data-rev] { opacity: 1 !important; }
  .etapa { opacity: 1; }
  .recorrido__linea span { transform: none !important; }
}