/* Landing de Data Analyst · portada «sala de datos» aprobada por Alex el 7 oct 2026.
   Estructura de Data Scientist: lanzamiento → portada → confianza → empresas → herramientas → roles →
   cuerpo en dos columnas con panel de inscripción fijo → cierre → pie. Generada por scripts/build-data-analyst.mjs. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

:root {
  --cyan: #00d4ff; --noche: #08131f; --panel: #0d1d2e; --hielo: #dbe6f0; --niebla: #9fb3c6; --oro: #f2c45a; --dorado: #e7be58;
  --tinta: #0b1b2b; --borde: rgba(219,230,240,.1); --claro: #f5f7fa; --linea-c: #dfe6ee; --tinta-c: #0b1b2b; --gris-c: #4a6175; --cian-c: #0a7a9c;
  --f: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif; --mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', monospace;
}
body { background: var(--claro); color: var(--hielo); font: 16px/1.55 var(--f); -webkit-font-smoothing: antialiased; }
::selection { background: var(--cyan); color: var(--tinta); }
.icon { width: 1.1em; height: 1.1em; flex: none; }
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: fixed; top: 12px; left: 12px; z-index: 50; padding: 12px 18px; background: #fff; color: var(--tinta); transform: translateY(-180%); }
.skip-link:focus { transform: none; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 24px; border-radius: 12px; font-weight: 600; text-decoration: none; transition: background-color .2s, box-shadow .2s; }
.btn-cta { background: var(--cyan); color: #02202a; }
.btn-cta:hover { background: #6ce6ff; }
.btn-l { color: #fff; box-shadow: inset 0 0 0 1px rgba(219,230,240,.35); }
.btn-l:hover { box-shadow: inset 0 0 0 1px #fff; }
.acciones { display: flex; flex-wrap: wrap; gap: 10px; }
.acciones .btn { min-height: 54px; }

/* Barra de lanzamiento */
.lanzamiento { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 22px; min-height: 40px; padding: 6px 16px; background: var(--tinta); color: #c9d6e3; font-size: 13px; }
.lanzamiento b { color: #fff; }
.l-punto { display: inline-flex; align-items: center; gap: 8px; }
.l-punto::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); }
.cuenta { display: inline-flex; gap: 8px; font: 600 14px var(--mono); color: #fff; font-variant-numeric: tabular-nums; }
.cuenta span { display: inline-flex; align-items: baseline; gap: 1px; }
.cuenta i { font-style: normal; font-size: 11px; color: var(--cyan); }
.lanzamiento a { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; color: var(--dorado); font-weight: 600; text-decoration: none; }
.lanzamiento a:hover { text-decoration: underline; }
.lanzamiento .icon { width: 14px; height: 14px; }

/* Portada */
.hero { position: relative; min-height: max(620px, calc(100svh - 106px)); overflow: hidden; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; background: #07121e; color: var(--hielo); }
.fondo { position: absolute; inset: 0; z-index: -3; overflow: hidden; background: radial-gradient(70% 40% at 66% 100%, rgba(0,212,255,.12) 0%, transparent 70%), linear-gradient(180deg, #040b13 0%, #061322 60%, #0a1b2c 100%); }
.pantalla { position: absolute; top: 11%; left: 38%; right: 2%; transition: translate .7s cubic-bezier(.16,1,.3,1); }
.pantalla::after { content: ""; position: absolute; inset: 0; border-radius: 1%; background: linear-gradient(115deg, rgba(255,255,255,.05) 0%, transparent 38%); pointer-events: none; }
.bruma { position: absolute; inset: 0; z-index: -2; pointer-events: none; background: linear-gradient(90deg, rgba(5,13,22,.96) 0%, rgba(5,13,22,.82) 32%, rgba(5,13,22,.12) 60%, rgba(5,13,22,.2)), linear-gradient(0deg, rgba(5,13,22,.92) 0%, transparent 22%); }
.gente { position: absolute; z-index: -1; right: 0; bottom: 0; height: 72%; aspect-ratio: 1920 / 1371; transition: translate .7s cubic-bezier(.16,1,.3,1); }
.gente > img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; transition: filter .5s; }
.gente[data-foco=roger] > .capa-jackelin, .gente[data-foco=jackelin] > .capa-roger { filter: brightness(.38) saturate(.55); }
.placa { position: absolute; bottom: 13%; display: grid; gap: 2px; padding: 10px 14px; border-radius: 12px; background: rgba(8,19,31,.88); font-size: 13px; line-height: 1.35; color: var(--niebla); max-width: 250px; transition: box-shadow .3s, opacity .3s; }
.placa strong { color: #fff; font-size: 15px; font-weight: 600; }
.placa em { font-style: normal; font-weight: 600; color: var(--hielo); transition: color .3s; }
.placa.activo { box-shadow: inset 0 0 0 1.5px var(--cyan); }
.placa.activo em { color: var(--cyan); }
.placa .actual { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; }
.placa .logo-bcp { height: 24px; width: auto; border-radius: 3px; }
.placa .logo-credicorp { height: 12px; width: auto; }
.p-jackelin { left: 20%; }
.p-roger { left: 64%; }
.gente[data-foco=jackelin] .p-roger, .gente[data-foco=roger] .p-jackelin { opacity: .35; }
.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: calc(16px + env(safe-area-inset-top)) clamp(16px, 4vw, 56px) 12px; }
.top .brand { display: inline-flex; align-items: center; min-height: 44px; }
.top .brand img { width: 92px; height: auto; }
.top nav { display: flex; gap: 24px; font-size: 14px; }
.top nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--niebla); text-decoration: none; }
.top nav a:hover, .top nav a[href="#inversion"] { color: #fff; }
.mini { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 10px; background: #fff; color: var(--noche); font-size: 14px; font-weight: 600; text-decoration: none; }
.contenido { align-self: center; display: grid; gap: 18px; max-width: 580px; padding: 16px clamp(16px, 4vw, 56px) 36px; }
.hero h1 { font-size: clamp(44px, 4.9vw, 74px); font-weight: 700; line-height: .95; letter-spacing: -.04em; color: #fff; }
.lead { font-size: clamp(19px, 1.7vw, 23px); line-height: 1.35; color: #fff; font-weight: 500; max-width: 30ch; }
.sub { font-size: 16px; color: var(--niebla); }
.cuando { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 14px; color: var(--niebla); }
.cuando b { color: #fff; font-weight: 600; }
.planes { border: 0; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; min-width: 0; }
.plan { position: relative; display: grid; gap: 2px; padding: 14px 16px 14px 44px; border-radius: 14px; background: var(--panel); box-shadow: inset 0 0 0 1px rgba(219,230,240,.14); cursor: pointer; transition: box-shadow .2s, background-color .2s; }
.plan input, .opcion input { position: absolute; opacity: 0; pointer-events: none; }
.plan::before { content: ""; position: absolute; left: 16px; top: 18px; width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(219,230,240,.45); }
.plan:has(input:checked) { background: #0f2c44; box-shadow: inset 0 0 0 2px var(--cyan); }
.plan:has(input:checked)::before { box-shadow: inset 0 0 0 5px var(--cyan); }
.plan:has(input:focus-visible), .opcion:has(input:focus-visible) { outline: 3px solid var(--cyan); outline-offset: 3px; }
.p-nombre { font-size: 14px; font-weight: 600; color: #fff; }
.insignia { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--oro); color: #1b1408; white-space: nowrap; }
.plan .insignia { position: absolute; top: -10px; right: 12px; }
.p-precio { font-size: clamp(30px, 2.6vw, 38px); font-weight: 700; letter-spacing: -.02em; color: #fff; line-height: 1.1; font-variant-numeric: tabular-nums; }
.p-precio small { font-size: 17px; font-weight: 500; color: var(--niebla); }
.oro { color: var(--oro); }
.p-nota { font-size: 13px; color: var(--niebla); }
.ahorro { color: var(--oro); font-weight: 600; }

/* Tablero de fondo */
.dash { display: block; width: 100%; height: auto; opacity: .9; }
.dash .p-bg { fill: #0d2539; }
.dash .junta { stroke: rgba(0,0,0,.45); stroke-width: 2; fill: none; }
.dash .bisel { fill: none; stroke: #1d3d58; stroke-width: 3; }
.dash .h-logo { font: 800 24px var(--f); fill: #fff; letter-spacing: .06em; }
.dash .h-t { font: 500 19px var(--f); fill: #9fb3c6; }
.dash .h-tab { font: 500 18px var(--f); fill: #6f8aa3; }
.dash .h-tab.on { fill: #fff; font-weight: 600; }
.dash .h-f { font: 600 18px var(--f); fill: #00d4ff; }
.dash .k-l { font: 500 18px var(--f); fill: #9fb3c6; }
.dash .k-v { font: 700 52px var(--f); fill: #fff; font-variant-numeric: tabular-nums; }
.dash .k-sub { font: 500 16px var(--f); fill: #6f8aa3; }
.dash .spark { fill: none; stroke: #00d4ff; stroke-width: 3; stroke-linejoin: round; }
.dash .spark-a { fill: rgba(0,212,255,.35); }
.dash .av-borde { fill: none; stroke: #0d2539; stroke-width: 3; }
.dash .p-t { font: 600 21px var(--f); fill: #dbe6f0; }
.dash .p-s { font: 500 16px var(--f); fill: #6f8aa3; }
.dash .eje { font: 500 15px var(--f); fill: #6f8aa3; }
.dash .grid { stroke: rgba(219,230,240,.08); stroke-width: 1.5; }
.dash .linea-acum { fill: none; stroke: #eaf3fa; stroke-width: 3.5; stroke-linejoin: round; }
.dash .hito { font: 700 18px var(--f); fill: #fff; }
.dash .arco { fill: none; stroke-width: 36; }
.dash .d-v { font: 700 42px var(--f); fill: #fff; }
.dash .d-s { font: 500 17px var(--f); fill: #9fb3c6; }
.dash .lg { font: 600 18px var(--f); fill: #dbe6f0; }
.dash .lg-s { font: 500 15px var(--f); fill: #7f9ab3; }
.dash .g-t { font: 600 15px var(--f); fill: #04111c; }
.dash .t-n { font: 500 15px var(--mono); fill: #6f8aa3; }
.dash .t-t { font: 500 16px var(--f); fill: #c9d6e3; }
.dash [data-m] { transition: opacity .6s; }
.dash[data-activo=sql] [data-m]:not([data-m~="sql"]), .dash[data-activo=python] [data-m]:not([data-m~="python"]), .dash[data-activo=power-bi] [data-m]:not([data-m~="power-bi"]) { opacity: .16; }
.dash .bar { transform-box: fill-box; transform-origin: bottom; }
.dash .gbar { transform-box: fill-box; transform-origin: left; }
@media (prefers-reduced-motion: no-preference) {
  .dash .bar { animation: crece 1s cubic-bezier(.16,1,.3,1) both; animation-delay: calc(.3s + var(--d, 0s)); }
  .dash .gbar { animation: ancho 1.1s cubic-bezier(.16,1,.3,1) .5s both; }
  .dash .linea-acum { stroke-dasharray: 900; animation: traza 1.8s cubic-bezier(.16,1,.3,1) .3s both; }
  .dash .arco { animation: aparece 1.2s ease-out .4s backwards; }
  .dash .rueda { animation: rueda 48s linear infinite; }
}
@keyframes crece { from { transform: scaleY(0); } }
@keyframes ancho { from { transform: scaleX(0); } }
@keyframes traza { from { stroke-dashoffset: 900; } }
@keyframes aparece { from { opacity: 0; } }
@keyframes rueda { to { transform: translateY(-576px); } }

/* Fila de confianza */
.confianza { background: #07121e; padding: 0 clamp(16px, 4vw, 56px); }
.c-marco { max-width: 1240px; margin: 0 auto; min-height: 66px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 32px; border-top: 1px solid rgba(219,230,240,.14); font-size: 15px; color: #c9d6e3; }
.c-marco b { color: #fff; font-weight: 600; }
.c-estrellas { display: inline-flex; gap: 4px; color: var(--dorado); }
.c-estrellas svg { width: 18px; height: 18px; }
.c-punto { display: inline-flex; align-items: center; gap: 10px; }
.c-punto::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #7fa6c4; }

/* Franjas blancas: empresas y herramientas */
.banda-blanca { background: #fff; color: var(--tinta-c); padding: 0 clamp(16px, 4vw, 56px); }
.banda-blanca + .banda-blanca .b-marco { border-top: 1px solid var(--linea-c); }
.b-marco { max-width: 1240px; margin: 0 auto; min-height: 52px; padding-block: 6px; display: flex; align-items: center; gap: 12px 40px; }
.b-titulo { flex: none; font: 600 14px/1.3 var(--f); color: #3d5266; margin: 0; white-space: nowrap; }
.technology-section .b-titulo { font-weight: 700; color: var(--tinta-c); }
.lista { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px 28px; }
.empresas img { flex: none; height: var(--h); width: auto; }
.pista-e, .grupo-e { display: contents; }
.copia { display: none; }
.carrusel { flex: 1; min-width: 0; overflow: hidden; }
@media (prefers-reduced-motion: no-preference) { .carrusel { -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); } }
.pista { display: flex; width: max-content; animation: gira 24s linear infinite; }
.carrusel:hover .pista { animation-play-state: paused; }
.grupo { display: flex; align-items: center; gap: 56px; padding-right: 56px; }
@keyframes gira { to { transform: translateX(-33.3333%); } }
.h-item { flex: none; display: inline-flex; align-items: center; gap: 8px; font: 500 16px var(--f); color: #3a4a5a; }
.h-ico { width: 24px; height: 24px; object-fit: contain; }
.h-marca { height: 22px; width: auto; }

/* Roles */
.roles-banda { background: #16263d; color: #dbe6f0; padding: clamp(40px, 5vw, 56px) clamp(16px, 4vw, 56px); }
.r-marco { max-width: 1240px; margin: 0 auto; display: grid; gap: 22px; }
.roles-banda h2 { font-size: clamp(26px, 2.6vw, 34px); font-weight: 700; letter-spacing: -.025em; color: #fff; }
.roles-banda ul { display: flex; flex-wrap: wrap; gap: 12px; }
.roles-banda li { display: inline-flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 24px; border-radius: 999px; background: #1e3350; box-shadow: inset 0 0 0 1px rgba(219,230,240,.18); font-size: 17px; color: #fff; }
.roles-banda li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #5ec8f2; }
.roles-banda p { font-size: 15px; color: #9fb3c6; }

/* Cuerpo claro en dos columnas */
.cuerpo { background: var(--claro); color: var(--tinta-c); padding: clamp(48px, 6vw, 80px) clamp(16px, 4vw, 56px); }
.c-grid { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: clamp(32px, 4vw, 56px); align-items: start; }
.c-main { display: grid; gap: clamp(56px, 7vw, 88px); min-width: 0; }
.bloque { display: grid; gap: 18px; }
.bloque h2 { font-size: clamp(30px, 3.4vw, 46px); font-weight: 700; line-height: 1.04; letter-spacing: -.035em; color: var(--tinta-c); text-wrap: balance; }
.bloque .intro { font-size: 18px; color: var(--gris-c); max-width: 60ch; }
.bloque h3 { font-size: 19px; font-weight: 700; color: var(--tinta-c); letter-spacing: -.01em; }
.bloque p { color: var(--gris-c); }
.nota { font-size: 14px; }
.recorrido { display: grid; }
.recorrido li { display: grid; grid-template-columns: 28px 1fr; gap: 14px; padding: 18px 0; border-top: 1px solid var(--linea-c); }
.vis svg { width: 26px; height: 26px; }
.para-quien { padding: 20px 22px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px var(--linea-c); display: grid; gap: 6px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips span { padding: 6px 14px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--linea-c); font-size: 14px; font-weight: 600; color: var(--tinta-c); }
.acordeon { display: grid; gap: 12px; }
.module { border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px var(--linea-c); }
.module summary { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; padding: 20px 22px; cursor: pointer; list-style: none; }
.module summary::-webkit-details-marker { display: none; }
.module summary::after { content: "+"; font: 400 26px/1 var(--mono); color: var(--cian-c); }
.module[open] summary::after { content: "−"; }
.module summary:focus-visible { outline: 3px solid var(--cian-c); outline-offset: 2px; border-radius: 16px; }
.m-num { font: 600 28px/1 var(--mono); }
.m-cab { display: grid; gap: 2px; }
.m-cab small { font-size: 13px; color: var(--gris-c); }
.m-cab b { font-size: 20px; color: var(--tinta-c); }
.session-list { margin: 0; padding: 0 22px 6px; display: grid; }
.session-list li { display: grid; grid-template-columns: 96px 1fr; gap: 12px; padding: 12px 0; border-top: 1px solid var(--linea-c); color: var(--tinta-c); font-size: 15px; }
.session-no { font-size: 13px; font-weight: 600; color: var(--gris-c); white-space: nowrap; }
.m-logras { margin: 0 22px 22px; padding: 16px 18px; border-radius: 12px; background: var(--claro); display: grid; gap: 4px; }
.m-logras b { font-size: 14px; color: var(--tinta-c); }
.m-ia { font-size: 14px; }
.project-section { padding: clamp(28px, 4vw, 44px); border-radius: 22px; background: var(--tinta); }
.project-section h2 { color: #fff; }
.project-section .intro, .project-section p { color: #b9c8d6; }
.ia-lista { display: grid; }
.ia-lista li { display: grid; grid-template-columns: 40px 1fr; gap: 12px; padding: 18px 0; border-top: 1px solid rgba(219,230,240,.14); }
.ia-lista span { font: 600 14px/1.7 var(--mono); color: var(--cyan); }
.project-section h3 { color: #fff; }
.equipo { display: grid; gap: 16px; }
.docente { display: grid; grid-template-columns: 150px 1fr; gap: 22px; align-items: start; padding: 18px; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1px var(--linea-c); }
.retrato { width: 150px; height: 188px; object-fit: cover; object-position: center top; border-radius: 12px; }
.docente > div { display: grid; gap: 6px; }
.bloque .d-rol { font-size: 13px; font-weight: 600; color: var(--cian-c); }
.docente h3 { font-size: 24px; }
.d-empresa img { height: 22px; width: auto; }
.d-empresa .logo-credicorp { height: 14px; }
.bloque .d-cargo { font-weight: 600; color: var(--tinta-c); }
.cert { display: grid; gap: 12px; }
.cert-img { display: block; border-radius: 14px; overflow: hidden; box-shadow: 0 1px 2px rgba(11,27,43,.08), 0 24px 48px -30px rgba(11,27,43,.45); transition: transform .3s cubic-bezier(.16,1,.3,1); }
.cert-img:hover { transform: translateY(-3px); }
.cert-img:focus-visible { outline: 3px solid var(--cian-c); outline-offset: 4px; }
.cert-img img { width: 100%; height: auto; }
.cert figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; font-size: 14px; color: var(--gris-c); }
.cert figcaption strong { color: var(--tinta-c); }
.cert figcaption a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--cian-c); text-underline-offset: 4px; }
.dos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.dos > div { padding: 20px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px var(--linea-c); display: grid; gap: 4px; }
.faq { display: grid; }
.faq details { border-top: 1px solid var(--linea-c); }
.faq summary { display: flex; justify-content: space-between; gap: 16px; padding: 20px 0; cursor: pointer; font-size: 18px; font-weight: 600; color: var(--tinta-c); list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 400 24px/1 var(--mono); color: var(--cian-c); }
.faq details[open] summary::after { content: "−"; }
.faq summary:focus-visible { outline: 3px solid var(--cian-c); outline-offset: 4px; }
.faq details p { padding: 0 0 20px; max-width: 68ch; }

/* Panel de inscripción */
.inscripcion { position: sticky; top: 20px; }
.i-card { display: grid; gap: 10px; padding: 20px 22px; border-radius: 20px; background: #fff; box-shadow: 0 1px 2px rgba(11,27,43,.06), 0 24px 48px -32px rgba(11,27,43,.35), inset 0 0 0 1px var(--linea-c); }
.i-et { font-size: 15px; font-weight: 600; color: var(--cian-c); }
.i-fecha { font-size: 26px; font-weight: 700; letter-spacing: -.03em; line-height: 1; color: var(--tinta-c); }
.i-fecha small { font-size: 15px; font-weight: 500; color: var(--gris-c); letter-spacing: 0; }
.i-horario { display: grid; gap: 2px; font-size: 14px; color: var(--tinta-c); }
.i-horario .i-mod { color: var(--tinta); font-weight: 600; }
.i-zona { font-size: 13px; color: var(--gris-c); }
.i-cuenta { font-size: 13px; color: var(--gris-c); display: flex; align-items: baseline; gap: 8px; }
.i-cuenta .cuenta { gap: 6px; font-size: 15px; color: var(--tinta-c); }
.i-cuenta .cuenta i { color: var(--cian-c); }
.opciones { border: 0; margin: 0; padding: 0; display: grid; gap: 10px; min-width: 0; }
.opciones legend { font-size: 15px; font-weight: 700; color: var(--tinta-c); margin-bottom: 8px; padding: 0; }
.opcion { position: relative; display: grid; gap: 1px; padding: 11px 46px 11px 14px; border-radius: 14px; cursor: pointer; box-shadow: inset 0 0 0 1px var(--linea-c); transition: box-shadow .2s, background-color .2s; }
.opcion::after { content: ""; position: absolute; right: 16px; top: 50%; width: 20px; height: 20px; margin-top: -10px; border-radius: 50%; box-shadow: inset 0 0 0 2px #b5c3d1; }
.opcion:has(input:checked) { background: #eefaff; box-shadow: inset 0 0 0 2px #00a6d6; }
.opcion:has(input:checked)::after { box-shadow: inset 0 0 0 6px #00a6d6; }
.o-nombre { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--tinta-c); }
.o-precio { font-size: 25px; font-weight: 700; letter-spacing: -.02em; color: var(--tinta-c); font-variant-numeric: tabular-nums; }
.o-precio small { font-size: 14px; font-weight: 500; color: var(--gris-c); letter-spacing: 0; }
.o-total { font-size: 13px; color: var(--gris-c); }
.o-ahorro { font-size: 13px; font-weight: 700; color: #7a5600; }
.i-compara { display: grid; gap: 6px; }
.i-compara span { display: block; width: var(--w); padding: 4px 10px; border-radius: 6px; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ic-contado { background: var(--dorado); color: #2a1f05; }
.ic-cuotas { background: #dbe6f0; color: var(--tinta-c); }
.i-cond { font-size: 14px; color: var(--gris-c); }
.i-cta { width: 100%; min-height: 52px; }
.i-nota { font-size: 13px; color: var(--gris-c); text-align: center; }
.i-brochure { justify-self: center; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 14px; font-weight: 600; color: var(--cian-c); text-underline-offset: 4px; }

/* Cierre y pie */
.final { background: radial-gradient(60% 90% at 85% 0%, rgba(0,212,255,.12), transparent 70%), var(--tinta); padding: clamp(56px, 7vw, 96px) clamp(16px, 4vw, 56px); }
.f-marco { max-width: 1240px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 24px; }
.final h2 { font-size: clamp(34px, 4.4vw, 60px); font-weight: 700; line-height: 1.02; letter-spacing: -.035em; color: #fff; max-width: 16ch; }
.final p { font-size: 18px; color: #b9c8d6; margin-top: 14px; max-width: 46ch; }
.pie-pagina { padding: 32px clamp(16px, 4vw, 56px) calc(32px + env(safe-area-inset-bottom)); background: #050d16; border-top: 1px solid rgba(219,230,240,.08); color: #7f9ab3; }
.pie-pagina .f-marco { display: grid; gap: 12px; align-items: start; }
.pie-enlaces { display: flex; flex-wrap: wrap; gap: 4px 20px; font-size: 14px; }
.pie-enlaces a { display: inline-flex; align-items: center; min-height: 44px; color: #c9d6e3; text-decoration: none; }
.pie-enlaces a:hover { color: #fff; }
.pie-pagina p { font-size: 13px; max-width: 90ch; }
.pie-pagina .brand img { width: 84px; height: auto; }

/* Barra fija en celular */
.mobile-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: none; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(5,13,22,.96); box-shadow: 0 -1px 0 var(--borde); transform: translateY(110%); visibility: hidden; transition: transform .3s cubic-bezier(.16,1,.3,1), visibility 0s .3s; }
.mobile-bar.visible { transform: none; visibility: visible; transition: transform .3s cubic-bezier(.16,1,.3,1); }
.mobile-bar div { display: grid; line-height: 1.2; }
.mobile-bar b { font-size: 20px; color: var(--oro); font-variant-numeric: tabular-nums; }
.mobile-bar span { font-size: 12px; color: var(--niebla); }
.mobile-bar .btn { min-height: 48px; padding: 0 18px; }

@media (prefers-reduced-motion: reduce) {
  .carrusel .pista { width: auto; }
  .carrusel .grupo { flex-wrap: wrap; gap: 10px 28px; padding-right: 0; }
  .carrusel .grupo[aria-hidden] { display: none; }
}
@media (min-width: 1100px) and (max-height: 820px) { .i-compara, .i-zona { display: none; } .i-card { gap: 8px; } }
@media (max-width: 1099px) { .c-grid { grid-template-columns: minmax(0, 1fr); } .inscripcion { position: static; order: -1; } .i-card { max-width: 560px; } }
@media (max-width: 999px) {
  .top nav { display: none; }
  .hero { min-height: 0; grid-template-rows: auto auto auto; }
  .fondo, .bruma { bottom: auto; height: 560px; }
  .bruma { background: linear-gradient(0deg, var(--noche) 0%, var(--noche) 5%, rgba(8,19,31,0) 38%); }
  .pantalla { top: 62px; left: -14%; right: -14%; }
  .gente { position: relative; grid-row: 2; right: auto; bottom: auto; height: auto; width: min(130vw, 820px); justify-self: center; }
  .contenido { grid-row: 3; max-width: none; padding-top: 4px; }
  .acciones .btn { flex: 1 1 200px; }
  .placa { bottom: 4%; padding: 8px 10px; max-width: 32%; font-size: 12px; }
  .placa strong { font-size: 14px; }
  .p-jackelin { left: 17%; }
  .p-roger { left: 52%; }
  .mobile-bar { display: flex; }
  .pie-pagina { padding-bottom: calc(104px + env(safe-area-inset-bottom)); }
  .lanzamiento .l-largo { display: none; }
  .b-marco { flex-direction: column; align-items: stretch; gap: 8px; padding-block: 10px; }
  .b-titulo { font-size: 13px; white-space: normal; }
  .lista { width: 100%; }
  .empresas .lista { display: block; overflow: hidden; }
  .empresas .pista-e { display: flex; width: max-content; }
  .empresas .grupo-e { display: flex; align-items: center; gap: 30px; padding-right: 30px; }
  .empresas img { height: calc(var(--h) * .9); }
  .confianza .c-largo { display: none; }
  .carrusel { width: 100%; flex: none; }
  .grupo { gap: 36px; padding-right: 36px; }
}
@media (max-width: 999px) and (prefers-reduced-motion: no-preference) {
  .empresas .copia { display: flex; }
  .empresas .pista-e { animation: gira 30s linear infinite; }
  .empresas .lista { -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
}
@media (max-width: 999px) and (prefers-reduced-motion: reduce) {
  .empresas .lista .grupo-e.copia { display: none; }
  .empresas .lista .pista-e { width: auto; }
  .empresas .lista .grupo-e { flex-wrap: wrap; gap: 12px 24px; padding-right: 0; }
}
@media (max-width: 480px) {
  .lanzamiento { padding: 5px 12px; gap: 2px 14px; line-height: 1.3; }
  .lanzamiento a { display: none; }
}
@media (max-width: 560px) {
  .planes { gap: 8px; }
  .plan { padding: 12px 12px 12px 36px; }
  .plan::before { left: 12px; top: 15px; width: 14px; height: 14px; }
  .plan .insignia { display: none; }
  .c-marco { padding-block: 14px; gap: 6px 18px; font-size: 14px; }
  .c-marco > span:nth-child(3) { flex-basis: 100%; text-align: center; }
  .roles-banda li { min-height: 44px; padding: 0 16px; font-size: 15px; }
  .docente { grid-template-columns: 96px 1fr; gap: 14px; }
  .retrato { width: 96px; height: 120px; }
  .dos { grid-template-columns: minmax(0, 1fr); }
  .session-list li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .module summary { padding: 16px; }
  .session-list { padding: 0 16px 6px; }
  .m-logras { margin: 0 16px 16px; }
}