/* Process AI Academy · landing de una sola página · TEMA CLARO (decisión del 2026-11-07: «como es académico, fondo blanco»).
   Identidad: Process AI (púrpura #6A4DFF, púrpura oscuro #3B1FA8, tinta #09090F, Satoshi + Inter, logo para fondo claro).
   Estructura inspirada en la organización de secciones de una academia de referencia; textos y diseño propios. */

:root {
  --blanco: #ffffff;
  --morado: #6a4dff;
  --morado-b: #8b5cff;
  --morado-o: #3b1fa8;
  --lavanda: #a98bff;
  --lila: #f4f1ff;          /* fondo alterno suave */
  --lila-2: #ebe6ff;
  --tinta: #09090f;
  --tinta-2: #4b5563;
  --tinta-3: #6b7280;
  --linea: #e6e4f0;
  --oscuro: #0d0d18;        /* solo para el marco del video y la ventana de ejemplo */
  --sombra: 0 24px 60px rgba(59, 31, 168, .10);
  --resplandor: 0 10px 30px rgba(106, 77, 255, .35);
  --display: "Satoshi", "Inter", system-ui, sans-serif;
  --texto: "Inter", system-ui, sans-serif;
  --r-sm: 8px; --r-md: 12px; --r-lg: 20px;
  --ancho: 1200px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body { margin: 0; background: var(--blanco); color: var(--tinta); font: 400 16px/1.6 var(--texto); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
code { font: 500 .92em ui-monospace, Consolas, monospace; color: var(--lavanda); }
.acento { color: var(--morado); }
.etiqueta { display: inline-block; font: 600 12px/16px var(--texto); letter-spacing: .08em; text-transform: uppercase; color: var(--morado-o); background: var(--lila); border: 1px solid var(--lila-2); padding: 7px 14px; border-radius: 999px; margin: 0 0 22px; }
.centro { text-align: center; }

/* ---------- Revelado al hacer scroll (con red de seguridad) ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); animation: rescate 0s 6s forwards; }
.reveal.visible { opacity: 1; transform: none; animation: none; }
.reveal[data-split] { opacity: 1; transform: none; }
.sin-js .reveal { opacity: 1; transform: none; }
@keyframes rescate { to { opacity: 1; transform: none; } }

/* ---------- Botones ---------- */
.btn { display: inline-flex; align-items: center; gap: 12px; padding: 14px 16px 14px 24px; border-radius: 999px; font: 500 15px/20px var(--texto); border: 0; transition: transform .25s, box-shadow .25s, background .25s; white-space: nowrap; }
.btn:hover { transform: translateY(-2px); }
.btn--primario { background: var(--morado); color: #fff; box-shadow: var(--resplandor); }
.btn--primario:hover { box-shadow: 0 14px 40px rgba(106,77,255,.5); }
.btn--oscuro { background: var(--tinta); color: #fff; }
.btn--sm { padding: 10px 12px 10px 18px; font-size: 14px; }
.btn--grande { padding: 18px 20px 18px 30px; font-size: 17px; }
.btn__flecha { width: 30px; height: 30px; border-radius: 50%; background: #fff; display: inline-grid; place-items: center; flex: none; }
.btn--sm .btn__flecha { width: 26px; height: 26px; }
.btn__flecha::before { content: ""; width: 14px; height: 14px; background: var(--morado); -webkit-mask: var(--i-flecha) center/contain no-repeat; mask: var(--i-flecha) center/contain no-repeat; transition: transform .25s; }
.btn--oscuro .btn__flecha { background: var(--morado); }
.btn--oscuro .btn__flecha::before { background: #fff; }
.btn:hover .btn__flecha::before { transform: translateX(3px); }

/* ---------- Iconos (trazo lineal, estilo Lucide) ---------- */
:root {
  --i-flecha: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  --i-web: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='3'/%3E%3Cpath d='M3 9h18'/%3E%3C/svg%3E");
  --i-flujo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='6' height='6' rx='1.5'/%3E%3Crect x='15' y='15' width='6' height='6' rx='1.5'/%3E%3Cpath d='M9 6h4a3 3 0 0 1 3 3v6'/%3E%3C/svg%3E");
  --i-chispa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8z'/%3E%3Cpath d='M19 16v4M17 18h4'/%3E%3C/svg%3E");
  --i-chat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a8 8 0 0 1-11.6 7.1L4 20l1-4.6A8 8 0 1 1 21 12z'/%3E%3C/svg%3E");
  --i-panel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20V10M10 20V4M16 20v-7M22 20H2'/%3E%3C/svg%3E");
  --i-enlace: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7 0l3-3a5 5 0 0 0-7-7l-1 1'/%3E%3Cpath d='M14 11a5 5 0 0 0-7 0l-3 3a5 5 0 0 0 7 7l1-1'/%3E%3C/svg%3E");
  --i-copiar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='8' width='13' height='13' rx='2'/%3E%3Cpath d='M16 8V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h3'/%3E%3C/svg%3E");
  --i-globo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18'/%3E%3C/svg%3E");
  --i-lista: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6h12M9 12h12M9 18h12M4 6h.01M4 12h.01M4 18h.01'/%3E%3C/svg%3E");
  --i-descarga: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12M7 10l5 5 5-5M4 21h16'/%3E%3C/svg%3E");
  --i-reloj: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
  --i-mas: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
}
.ic { display: inline-block; width: 20px; height: 20px; background: currentColor; flex: none; -webkit-mask: var(--m) center/contain no-repeat; mask: var(--m) center/contain no-repeat; }
.ic--web { --m: var(--i-web); } .ic--flujo { --m: var(--i-flujo); } .ic--chispa { --m: var(--i-chispa); } .ic--chat { --m: var(--i-chat); }
.ic--panel { --m: var(--i-panel); } .ic--enlace { --m: var(--i-enlace); } .ic--copiar { --m: var(--i-copiar); } .ic--globo { --m: var(--i-globo); }
.ic--lista { --m: var(--i-lista); } .ic--descarga { --m: var(--i-descarga); } .ic--reloj { --m: var(--i-reloj); }

/* ---------- 1 · Navegación ---------- */
.nav { position: fixed; inset: 0 0 auto; z-index: 50; transition: background .3s, border-color .3s, box-shadow .3s; border-bottom: 1px solid transparent; }
.nav.solida { background: rgba(255,255,255,.82); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-color: var(--linea); }
.nav__in { max-width: var(--ancho); margin: 0 auto; padding: 16px 24px; display: flex; align-items: center; gap: 28px; }
.marca { display: flex; align-items: center; gap: 10px; }
.marca img { height: 34px; width: auto; }
.marca__academy { font: 500 15px var(--display); color: var(--tinta-2); padding-left: 10px; border-left: 1px solid #d7d4e6; letter-spacing: .02em; }
.nav__links { display: flex; gap: 26px; margin-left: auto; font-size: 14px; color: var(--tinta-2); }
.nav__links a:hover { color: var(--morado); }
.nav__menu { display: none; margin-left: auto; width: 44px; height: 44px; border-radius: 12px; background: var(--lila); border: 1px solid var(--lila-2); position: relative; }
.nav__menu span { position: absolute; left: 12px; right: 12px; height: 2px; background: var(--tinta); border-radius: 2px; transition: transform .3s; }
.nav__menu span:first-child { top: 17px; } .nav__menu span:last-child { top: 25px; }
.nav__menu[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.nav__menu[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }
.nav__movil { display: grid; gap: 6px; padding: 8px 24px 24px; background: rgba(255,255,255,.97); backdrop-filter: blur(16px); border-bottom: 1px solid var(--linea); }
.nav__movil[hidden] { display: none; }
.nav__movil a:not(.btn) { padding: 14px 4px; border-bottom: 1px solid var(--linea); font: 500 18px var(--display); }
.nav__movil .btn { justify-content: center; margin-top: 12px; padding: 16px; }

/* ---------- 2 · Hero ---------- */
.hero { position: relative; padding: 140px 24px 96px; overflow: hidden; text-align: center;
  background: radial-gradient(55% 45% at 50% 0%, rgba(106,77,255,.16), transparent 70%), radial-gradient(35% 40% at 92% 40%, rgba(169,139,255,.18), transparent 70%), radial-gradient(35% 40% at 6% 55%, rgba(139,92,255,.12), transparent 70%), var(--blanco); }
.hero::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(59,31,168,.12) 1px, transparent 1px); background-size: 26px 26px; -webkit-mask: radial-gradient(60% 55% at 50% 30%, #000, transparent 75%); mask: radial-gradient(60% 55% at 50% 30%, #000, transparent 75%); pointer-events: none; }
.hero__luz { position: absolute; inset: -20%; background: radial-gradient(28% 28% at 50% 50%, rgba(169,139,255,.18), transparent 70%); animation: luz 14s ease-in-out infinite alternate; pointer-events: none; }
@keyframes luz { from { transform: translate(-12%, -6%); } to { transform: translate(12%, 8%); } }
.hero__ondas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hero__ondas path { fill: none; stroke: rgba(106,77,255,.16); stroke-width: 1.4; animation: onda 9s ease-in-out infinite alternate; }
.hero__ondas path:nth-child(2) { animation-delay: -2s; stroke: rgba(139,92,255,.24); }
.hero__ondas path:nth-child(3) { animation-delay: -4s; }
.hero__ondas path:nth-child(4) { stroke: rgba(106,77,255,.1); animation-delay: -1s; }
.hero__ondas path:nth-child(5) { stroke: rgba(169,139,255,.14); animation-delay: -3s; }
@keyframes onda { from { transform: translateY(-14px); } to { transform: translateY(14px); } }
.hero__in { position: relative; max-width: 980px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
.hero__titulo { font: 700 clamp(40px, 6.4vw, 76px)/1.02 var(--display); letter-spacing: -.03em; margin: 0 0 20px; }
.hero__sub { font-size: clamp(17px, 2vw, 20px); color: var(--tinta-2); margin: 0 0 40px; max-width: 640px; }
.hero__sub strong { color: var(--tinta); font-weight: 600; }

.video { width: 100%; max-width: 920px; margin-bottom: 40px; }
.video__marco { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-lg); overflow: hidden; background: linear-gradient(135deg, #1a1638, #0d0d18); border: 6px solid #fff; box-shadow: 0 40px 90px rgba(59,31,168,.22), 0 0 0 1px var(--linea); color: #fff; }
.video__marco video, .video__marco iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.video__vacio { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 6px;
  background: radial-gradient(60% 60% at 50% 45%, rgba(106,77,255,.3), transparent 70%), repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 48px), repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 48px); }
.video__play { width: 88px; height: 88px; border-radius: 50%; border: 0; background: var(--morado); display: grid; place-items: center; margin-bottom: 14px; animation: latido 2.4s ease-in-out infinite; }
.video__play span { width: 0; height: 0; border-left: 24px solid #fff; border-top: 15px solid transparent; border-bottom: 15px solid transparent; margin-left: 6px; }
@keyframes latido { 0%, 100% { box-shadow: 0 0 0 0 rgba(106,77,255,.55); } 50% { box-shadow: 0 0 0 18px rgba(106,77,255,0); } }
.video__nota { margin: 0; font: 500 18px var(--display); }
.video__nota-sub { margin: 0; font-size: 13px; color: #b9b4d6; }

/* ---------- 3 · Franja ---------- */
.franja { padding: 52px 0 60px; border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); background: var(--blanco); text-align: center; overflow: hidden; }
.franja__titulo { margin: 0 0 26px; color: var(--tinta-3); font-size: 15px; }
.franja__titulo strong { color: var(--tinta); font-weight: 600; }
.marquesina { overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquesina__pista { display: flex; gap: 14px; width: max-content; animation: marquesina 38s linear infinite; }
.marquesina:hover .marquesina__pista { animation-play-state: paused; }
@keyframes marquesina { to { transform: translateX(-50%); } }
.pildora { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: 16px; background: #fff; border: 1px solid var(--linea); box-shadow: 0 6px 18px rgba(59,31,168,.05); font: 500 15px var(--texto); white-space: nowrap; }
.pildora .ic { color: var(--morado); }

/* ---------- Secciones ---------- */
.sec { position: relative; padding: 110px 24px; }
.sec__in { max-width: var(--ancho); margin: 0 auto; }
.sec--papel { background: var(--blanco); }
.sec--tinta { background: radial-gradient(50% 50% at 10% 0%, rgba(106,77,255,.08), transparent 70%), var(--lila); }
.titulo-sec { font: 700 clamp(32px, 4.4vw, 52px)/1.04 var(--display); letter-spacing: -.025em; margin: 0 0 18px; }
.sec__sub { font-size: 17px; color: var(--tinta-2); margin: 0 0 32px; max-width: 560px; }
.sec__sub strong { color: var(--tinta); font-weight: 600; }

/* ---------- 4 · Programas (tarjetas de cursos) ---------- */
.programas__cab { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: end; margin-bottom: 44px; }
.programas__cab .sec__sub { margin: 0; }
.cursos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.curso { border-radius: 24px; background: #fff; border: 1px solid var(--linea); box-shadow: var(--sombra); overflow: hidden; display: flex; flex-direction: column; transition: transform .3s, box-shadow .3s; }
.curso--activo { grid-column: 1 / -1; display: grid; grid-template-columns: 1.1fr 1fr; border-color: rgba(106,77,255,.35); box-shadow: 0 30px 70px rgba(106,77,255,.16); }
.curso--activo:hover { transform: translateY(-4px); box-shadow: 0 40px 80px rgba(106,77,255,.22); }
.curso__portada { position: relative; min-height: 340px; display: grid; place-items: center; background: radial-gradient(70% 70% at 50% 40%, rgba(106,77,255,.18), transparent 70%), repeating-linear-gradient(135deg, #f7f5ff 0 14px, #f1edff 14px 28px); border-right: 1px solid var(--linea); }
.curso__portada-nota { display: grid; justify-items: center; gap: 4px; padding: 22px 30px; border: 2px dashed rgba(106,77,255,.4); border-radius: 18px; background: rgba(255,255,255,.75); font: 500 18px var(--display); color: var(--morado-o); text-align: center; }
.curso__portada-nota small { font: 400 13px var(--texto); color: var(--tinta-3); }
.curso__cuerpo { padding: 32px 34px 34px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; flex: 1; }
.curso__estado { font: 600 12px var(--texto); letter-spacing: .06em; text-transform: uppercase; color: #15803d; background: #e8f7ee; padding: 6px 12px; border-radius: 999px; }
.curso h3 { font: 700 30px/1.1 var(--display); letter-spacing: -.02em; margin: 10px 0 4px; }
.curso p { margin: 0; color: var(--tinta-2); }
.curso__aprende-tit { margin-top: 14px !important; font: 600 13px var(--texto) !important; color: var(--tinta) !important; }
.curso__aprende { list-style: none; padding: 0; margin: 4px 0 6px; display: grid; gap: 8px; }
.curso__aprende li { position: relative; padding-left: 28px; font-size: 15px; color: var(--tinta-2); }
.curso__aprende li::before { content: ""; position: absolute; left: 0; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--morado) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12l4 4 8-8'/%3E%3C/svg%3E") center/11px no-repeat; }
.curso__datos { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 18px; }
.curso__datos span { font: 500 13px var(--texto); color: var(--morado-o); background: var(--lila); border: 1px solid var(--lila-2); padding: 6px 12px; border-radius: 999px; }
/* Bloqueados: blanco y negro, con candado */
.curso--bloqueado { filter: grayscale(1); opacity: .78; cursor: not-allowed; }
.curso--bloqueado:hover { opacity: .9; }
.curso--bloqueado .curso__portada { min-height: 170px; border-right: 0; border-bottom: 1px solid var(--linea); }
.curso__portada--bloq > .ic { width: 64px; height: 64px; color: var(--morado); opacity: .35; }
.curso__candado { position: absolute; top: 16px; right: 16px; width: 42px; height: 42px; border-radius: 50%; background: var(--tinta); color: #fff; display: grid; place-items: center; }
.curso__candado svg { width: 20px; height: 20px; }
.curso__estado--bloq { display: inline-flex; align-items: center; gap: 6px; color: var(--tinta-2); background: #ececf1; }
.curso__estado--bloq svg { width: 13px; height: 13px; }
.curso--bloqueado h3 { font-size: 23px; }
.curso--bloqueado .curso__cuerpo { padding: 24px 26px 28px; }
.curso--bloqueado .curso__aprende li::before { background-color: #6b7280; }

/* ---------- 5 · Resultados ---------- */
.resultados__cab { margin-bottom: 44px; }
.testimonios { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.testimonio { position: relative; padding: 26px; border-radius: 22px; background: #fff; border: 1px solid var(--linea); box-shadow: var(--sombra); display: grid; gap: 18px; }
.testimonio__etq { justify-self: start; font: 500 11px var(--texto); letter-spacing: .08em; text-transform: uppercase; color: var(--morado-o); padding: 5px 10px; border: 1px dashed var(--lavanda); border-radius: 999px; }
.testimonio__cita { display: grid; gap: 9px; }
.testimonio__cita i { height: 10px; border-radius: 5px; background: #eeecf6; } .testimonio__cita i.corta { width: 60%; }
.testimonio__autor { display: flex; gap: 12px; align-items: center; }
.testimonio__autor b { display: block; font: 500 15px var(--display); } .testimonio__autor small { color: var(--tinta-3); font-size: 13px; }
.avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--morado), var(--lavanda)); flex: none; }
.testimonio__captura { height: 130px; border-radius: 14px; border: 1px dashed #d5d1e8; display: grid; place-items: center; color: var(--tinta-3); font-size: 13px; background: #faf9ff; }
.resultados__nota { text-align: center; color: var(--tinta-3); font-size: 13px; margin: 26px 0 30px; }

/* ---------- 6 · Quiénes somos (equipo de Process AI) ---------- */
.nosotros { border-top: 1px solid var(--linea); }
.nosotros__cab { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: end; margin-bottom: 44px; }
.nosotros__cab .sec__sub { margin: 0; }
.equipo { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
.miembro { margin: 0; border-radius: 22px; background: #fff; border: 1px solid var(--linea); box-shadow: var(--sombra); overflow: hidden; display: flex; flex-direction: column; transition: transform .3s, box-shadow .3s; }
.miembro:hover { transform: translateY(-4px); box-shadow: 0 30px 60px rgba(59,31,168,.16); }
.miembro__foto { aspect-ratio: 4 / 5; overflow: hidden; background: var(--lila); }
.miembro__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.miembro:hover .miembro__foto img { transform: scale(1.04); }
.miembro figcaption { padding: 16px 16px 20px; display: grid; gap: 4px; }
.miembro__rol { font: 600 11px var(--texto); letter-spacing: .08em; text-transform: uppercase; color: var(--morado); }
.miembro b { font: 700 18px/1.2 var(--display); }
.miembro small { color: var(--tinta-2); font-size: 13.5px; line-height: 1.5; }

/* ---------- 9 · Preguntas ---------- */
.faq { display: grid; grid-template-columns: .8fr 1.2fr; gap: 64px; align-items: start; }
.faq__cab { position: sticky; top: 110px; }
.faq__lista details { border-top: 1px solid var(--linea); }
.faq__lista details:last-child { border-bottom: 1px solid var(--linea); }
.faq__lista summary { list-style: none; cursor: pointer; padding: 22px 44px 22px 0; font: 500 18px var(--display); position: relative; }
.faq__lista summary::-webkit-details-marker { display: none; }
.faq__lista summary::after { content: ""; position: absolute; right: 4px; top: 50%; width: 22px; height: 22px; margin-top: -11px; background: var(--morado); -webkit-mask: var(--i-mas) center/contain no-repeat; mask: var(--i-mas) center/contain no-repeat; transition: transform .3s; }
.faq__lista details[open] summary::after { transform: rotate(45deg); }
.faq__lista p { margin: 0 0 22px; color: var(--tinta-2); max-width: 620px; }

/* ---------- 10 · Pie ---------- */
.pie { background: var(--lila); border-top: 1px solid var(--linea); padding: 48px 24px 40px; }
.pie__in { max-width: var(--ancho); margin: 0 auto; display: grid; gap: 14px; justify-items: start; }
.pie__lema { margin: 0; color: var(--tinta-2); }
.pie__contacto { margin: 6px 0 0; color: var(--tinta-2); font-size: 14px; }
.pie__contacto a, .faq__lista a[href^="mailto:"] { color: var(--morado, #6a4dff); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.pie__links { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 14px; color: var(--tinta-2); }
.pie__links a:hover { color: var(--morado); }
.pie__legal { margin: 8px 0 0; color: var(--tinta-3); font-size: 12px; }

/* ---------- Celular ---------- */
@media (max-width: 960px) {
  .nav__links, .nav__cta { display: none; }
  .nav__menu { display: block; }
  .programas__cab, .nosotros__cab, .faq { grid-template-columns: 1fr; gap: 20px; }
  .cursos { grid-template-columns: 1fr; }
  .curso--activo { grid-template-columns: 1fr; }
  .curso__portada { min-height: 220px; border-right: 0; border-bottom: 1px solid var(--linea); }
  .equipo { grid-template-columns: repeat(3, 1fr); }
  .testimonios { grid-template-columns: 1fr; }
  .faq__cab { position: static; }
}
@media (max-width: 600px) {
  .sec { padding: 80px 20px; }
  .hero { padding: 116px 18px 72px; }
  .marca img { height: 28px; }
  .equipo { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px; margin: 0 -20px; padding: 4px 20px 18px; }
  .miembro { flex: 0 0 72%; scroll-snap-align: start; }
  .curso__cuerpo { padding: 24px 22px 26px; }
  .curso h3 { font-size: 26px; }
  .video__play { width: 56px; height: 56px; margin-bottom: 6px; }
  .video__play span { border-left-width: 16px; border-top-width: 10px; border-bottom-width: 10px; margin-left: 4px; }
  .video__nota { font-size: 15px; }
  .video__nota-sub { display: none; }
  .video__marco { border-width: 4px; }
}

/* Movimiento reducido: solo se apagan los efectos intrusivos (las ondas y la luz que se mueve). */
@media (prefers-reduced-motion: reduce) {
  .hero__luz, .hero__ondas path { animation: none; }
}

/* Portada real del curso (2026-11-08): se muestra completa, sin recortes */
.curso__portada--img { background: #fff; padding: 0; }
.curso__portada--img img { display: block; width: 100%; height: 100%; object-fit: contain; position: absolute; inset: 0; }
@media (max-width: 960px) { .curso__portada--img { min-height: 0; aspect-ratio: 16 / 9; } }
@media (min-width: 961px) { .curso--activo:has(.curso__portada--img) { grid-template-columns: 1.5fr 1fr; } }

/* ===== Curso disponible destacado: degradado morado fuerte (2026-11-08) ===== */
.cursos .curso--activo { position: relative; isolation: isolate; border: 0; color: #fff;
  background: radial-gradient(60% 80% at 100% 0%, rgba(169,139,255,.55), transparent 60%), radial-gradient(50% 70% at 0% 100%, rgba(40,16,140,.55), transparent 60%), linear-gradient(135deg, #7d5fff 0%, #6a4dff 42%, #3b1fa8 100%);
  box-shadow: 0 40px 90px rgba(106,77,255,.40), 0 0 0 1px rgba(255,255,255,.18) inset; }
.cursos .curso--activo:hover { box-shadow: 0 50px 110px rgba(106,77,255,.50), 0 0 0 1px rgba(255,255,255,.24) inset; }
.cursos .curso--activo .curso__portada--img { background: transparent; border: 0; }
.cursos .curso--activo .curso__portada--img img { inset: 22px; width: calc(100% - 44px); height: calc(100% - 44px); background: #fff; border-radius: 18px; object-fit: contain; box-shadow: 0 24px 60px rgba(20,8,80,.35); }
.cursos .curso--activo h3 { color: #fff; }
.cursos .curso--activo p { color: rgba(255,255,255,.84); }
.cursos .curso--activo .curso__aprende-tit { color: #fff !important; }
.cursos .curso--activo .curso__aprende li { color: rgba(255,255,255,.92); }
.cursos .curso--activo .curso__aprende li::before { background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236A4DFF' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12l4 4 8-8'/%3E%3C/svg%3E") center/11px no-repeat; }
.cursos .curso--activo .curso__datos span { color: #fff; background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.30); }
.cursos .curso--activo .curso__estado { color: #15803d; background: #dcfce7; }
.cursos .curso--activo .btn--primario { background: #fff; color: #3b1fa8; box-shadow: 0 16px 40px rgba(20,8,80,.35); }
.cursos .curso--activo .btn--primario .btn__flecha { background: #6a4dff; color: #fff; }
@media (max-width: 960px) { .cursos .curso--activo .curso__portada--img img { inset: 14px; width: calc(100% - 28px); height: calc(100% - 28px); border-radius: 14px; } }
.cursos .curso--activo .btn--primario .btn__flecha::before { background: #fff; }