/* «Vitrina» (28-10-2026): vidrio oscuro por defecto y el Inicio con EVA y sus videos arriba. Se carga al final:
   deshacer el cambio es quitar este archivo.
   Paleta (segunda versión, 28-10 noche): la identidad del sitio es la de la IA, cian y magenta vivos, y la Escuela queda
   en su escudo. Radix Colors 3.0 (radix-ui.com/colors), paleta probada con contraste medido: neutros Slate; acento Cyan
   (lo de EVA, enlaces, bordes) y Pink (el magenta); Purple sólo como puente del degradado. Paso 9 = color sólido, paso
   11 = texto legible sobre el fondo, paso 3 = fondo tenue. Sin burdeo, rojo, verde ni azul intermedio fuera del escudo. */
:root { --cian: #107d98; --magenta: #c2298a; }                                                                   /* claro: cyan 11, pink 11 */
:root[data-estilo="vidrio"][data-tema="oscuro"] {
  --fondo: #111113; --panel: rgba(24,25,27,.62); --nav: rgba(33,34,37,.5); --suave: rgba(255,255,255,.04);   /* slate 1, 2, 3 */
  --borde: rgba(255,255,255,.09); --linea: rgba(255,255,255,.07); --texto: #edeef0; --texto-2: #b0b4ba;      /* slate 12, 11 */
  --lateral: rgba(17,17,19,.82); --lateral-2: #b0b4ba; --lateral-texto: #edeef0; --lateral-activo: rgba(76,204,230,.08);
  --cian: #4ccce6; --magenta: #ff8dcc;                                                                         /* cyan 11, pink 11 */
  --rojo: #4ccce6; --rojo-suave: #082c36; --rojo-texto: #fff;                                                   /* cyan 11 y 3 */
  --sombra: 0 18px 40px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.06);
  --brillo: rgba(76,204,230,.55); --brillo-2: rgba(255,141,204,.16);                                            /* filo de luz */
  --lab-luz: #4ccce6; --lab-eva: #4ccce6;
}
/* Claro: blanco y gris de Slate, sin burdeo; el menú es vidrio claro. */
:root[data-estilo="vidrio"][data-tema="claro"] {
  --fondo: #f0f0f3; --panel: rgba(255,255,255,.74); --nav: rgba(255,255,255,.6); --texto: #1c2024; --texto-2: #60646c;   /* slate 3, 12, 11 */
  --lateral: rgba(252,252,253,.86); --lateral-texto: #1c2024; --lateral-2: #60646c; --lateral-activo: rgba(16,125,152,.08);
  --rojo: #107d98; --rojo-suave: #def7f9; --rojo-texto: #fff;                                                   /* cyan 11 y 3 */
  --brillo: rgba(0,162,199,.45); --brillo-2: rgba(214,64,159,.12);
}
:root[data-estilo="vidrio"][data-tema="claro"] .lateral { border-right-color: rgba(0,0,0,.08); }
:root[data-tema="claro"] .menu a[aria-current="page"] { color: #1c2024; }

/* ---------- Barra lateral: más vidrio y un aliento de la paleta detrás (30-10-2026) ----------
   El fondo se hace más translúcido para que el desenfoque se note, y detrás respiran dos manchas muy
   tenues de la paleta: cian arriba, magenta abajo. El elemento activo lleva el mismo degradado, apagado. */
:root[data-estilo="vidrio"][data-tema="oscuro"] .lateral {
  background-color: rgba(15,15,18,.5);
  background-image:
    radial-gradient(440px 340px at -60px -50px, rgba(0,162,199,.26), transparent 70%),
    radial-gradient(300px 260px at 50% 112%, rgba(142,78,198,.16), transparent 72%),
    radial-gradient(440px 380px at 112% 104%, rgba(214,64,159,.2), transparent 70%),
    var(--grano);
  border-right-color: rgba(255,255,255,.1);
}
:root[data-estilo="vidrio"][data-tema="claro"] .lateral {
  background-color: rgba(252,252,253,.55);
  background-image:
    radial-gradient(440px 340px at -60px -50px, rgba(0,162,199,.14), transparent 70%),
    radial-gradient(440px 380px at 112% 104%, rgba(214,64,159,.11), transparent 70%),
    var(--grano);
}
:root[data-tema="oscuro"] .menu a[aria-current="page"] { background: linear-gradient(100deg, rgba(0,162,199,.18), rgba(214,64,159,.12)); }
:root[data-tema="claro"] .menu a[aria-current="page"] { background: linear-gradient(100deg, rgba(0,162,199,.12), rgba(214,64,159,.08)); }
.menu a[aria-current="page"]::before, :root[data-tema="oscuro"] .menu a[aria-current="page"]::before {
  background: linear-gradient(180deg, #00a2c7, #d6409f); }
.nota-lat { border-top-color: rgba(127,127,127,.22); }
/* Los rótulos de los videos toman el cian de EVA. */
.reel-eti, .reel-texto a { color: var(--cian); }

/* ---------- Acento: el degradado cian → magenta ----------
   Va sólo en lo que se pulsa o avanza: botón principal, barras, marca del menú, días y el número de «Sigues en».
   Sobre el paso 9 de Radix el texto va en blanco, como recomienda la paleta. */
:root { --grad: linear-gradient(90deg, #00a2c7 0%, #8e4ec6 55%, #d6409f 100%); }                               /* cyan, purple, pink 9 */
.btn.lleno, .escaparate .btn.lleno { background: var(--grad); background-size: 140% 100%; color: #fff; border-color: transparent;
  box-shadow: 0 8px 24px rgba(214,64,159,.22), inset 0 1px 0 rgba(255,255,255,.22); transition: background-position .5s, transform var(--m-agil-t) var(--m-agil); }
.btn.lleno:hover { background-position: 100% 0; }
.pista b, .barra b, .pasos-mod i.ok::after, .pasos-mod i.va::after { background: var(--grad); background-size: 300px 100%; }
.menu-ind, :root[data-tema="oscuro"] .menu-ind { background: linear-gradient(180deg, #00a2c7, #d6409f); }
.dias-sem i.on { background: var(--grad); background-size: 220px 100%; color: #fff; border-color: transparent; }
.dias-sem i.on:nth-child(2) { background-position: -30px 0; } .dias-sem i.on:nth-child(3) { background-position: -60px 0; }
.dias-sem i.on:nth-child(4) { background-position: -90px 0; } .dias-sem i.on:nth-child(5) { background-position: -120px 0; }
.dias-sem i.on:nth-child(6) { background-position: -150px 0; } .dias-sem i.on:nth-child(7) { background-position: -180px 0; }
.sigues .num { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.selector { border-color: var(--rojo); color: var(--rojo); }

/* ---------- Menú en verbos ---------- */
.menu .menu-grupo { padding: 12px 12px 2px; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--lateral-2); opacity: .6; }
.menu .menu-grupo:empty { padding: 6px 0 0; }
.menu a.menu-eva { color: var(--cian); }
@media (max-height: 820px) { .menu .menu-grupo { padding-top: 8px; } }

/* ---------- EVA flotante: más chico, para que no tape las tarjetas ---------- */
.eva-fab { width: 50px; height: 50px; right: 20px; bottom: 20px; }
.eva-fab .eva-iso { width: 20px; height: 36px; }
@media (max-width: 860px) { .eva-fab { width: 44px; height: 44px; right: 12px; bottom: calc(76px + env(safe-area-inset-bottom)); } .eva-fab .eva-iso { width: 18px; height: 32px; } }

/* ---------- Línea de EVA bajo el título de cada sección ---------- */
.eva-linea { margin: 8px 0 0 !important; font-size: 14px; color: var(--texto-2); display: flex; gap: 10px; align-items: baseline; }
.eva-linea .mono { font-size: 11px; font-weight: 600; letter-spacing: .12em; color: var(--cian); flex: none; }

/* ---------- Inicio: la vitrina ---------- */
.escaparate { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 28px; align-items: center;
  padding: 30px; margin-bottom: 18px; border-radius: 26px; overflow: hidden; border: 1px solid rgba(255,255,255,.09); background: #111113; color: #edeef0; }
.vit-fondo { position: absolute; inset: -40px; z-index: -1; display: grid; grid-template-columns: repeat(4, 1fr); transform: scale(1.1);
  filter: blur(42px) saturate(140%) brightness(.45); }
.vit-fondo img { width: 100%; height: 100%; object-fit: cover; }
.vit-texto { padding: 32px 32px 28px; border-radius: 20px; border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  -webkit-backdrop-filter: blur(26px) saturate(160%); backdrop-filter: blur(26px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 30px 60px rgba(0,0,0,.35); }
.vit-eti { font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: #4ccce6; }
.escaparate h1 { margin: 14px 0 12px; font-size: clamp(30px, 3.1vw, 44px); line-height: 1.08; letter-spacing: -.02em; }
.escaparate p { margin: 0 0 24px; color: #b0b4ba; font-size: 16px; max-width: 470px; }
.vit-acc { display: flex; flex-wrap: wrap; gap: 10px; }
.vit-acc .btn { height: 46px; padding: 0 20px; font-size: 15px; }
.vit-eva { display: inline-flex; align-items: center; gap: 8px; border: 1px solid #12677e !important; color: #4ccce6 !important; background: rgba(8,44,54,.6) !important; font-weight: 600; }   /* cyan 7, 11, 3 */
.vit-reels { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.vit-reel:nth-child(odd) { transform: translateY(18px); }
.vit-reel:nth-child(odd):hover { transform: translateY(14px); }
.vit-reel::after { display: none; }
.vit-reel .reel-play { top: auto; left: auto; right: 8px; bottom: 8px; translate: none; width: 32px; height: 32px; }

/* ---------- Inicio: tres cajas y los cursos ---------- */
.tablero-v { display: grid; gap: 16px; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1.2fr); align-items: start; }
.tablero-v > .caja { grid-column: auto; grid-row: auto; }
.tablero-v .sigues { align-self: stretch; }
.tablero-v .sigues .num { font-size: 46px; }
.eti-v { display: block; font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--texto-2); }
.eti-v.cian { color: var(--cian); }
.delega .eti-v.cian { color: var(--magenta); }
.tablero-v .dato-semana { align-self: stretch; padding: 20px 22px; }
.tablero-v .dato-semana .n { margin-top: 8px; }
.tablero-v .dato-semana .l { margin-top: 10px; }
.delega { align-self: stretch; padding: 20px 22px; display: flex; flex-direction: column; gap: 10px; }
.delega h2 { margin: 0; font-size: 18px; line-height: 1.3; }
.veredictos { display: flex; gap: 8px; flex-wrap: wrap; }
/* Las pastillas van con `.veredictos .ver`, nunca `.ver` a secas: «ver» también es la clase de estado con que se
   muestran la bienvenida y los avisos, y el `border-radius: 999px` suelto recortaba en óvalo el velo desenfocado. */
.veredictos .ver { font: 500 13px 'IBM Plex Mono', monospace; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--borde); background: none; cursor: pointer;
  transition: background .2s, transform var(--m-agil-t) var(--m-agil); }
.veredictos .ver:hover { transform: translateY(-1px); }
.veredictos .ver.no { color: #ff8dcc; border-color: #833869; } .veredictos .ver.no[aria-pressed="true"] { background: #37172f; }   /* pink 11, 7, 3 */
.veredictos .ver.dep { color: #d19dff; border-color: #664282; } .veredictos .ver.dep[aria-pressed="true"] { background: #301c3b; }   /* purple 11, 7, 3 */
.veredictos .ver.si { color: #4ccce6; border-color: #12677e; } .veredictos .ver.si[aria-pressed="true"] { background: #082c36; }   /* cyan 11, 7, 3 */
:root[data-tema="claro"] .veredictos .ver.no { color: #c2298a; } :root[data-tema="claro"] .veredictos .ver.dep { color: #8145b5; } :root[data-tema="claro"] .veredictos .ver.si { color: #107d98; }
.del-eva { margin: auto 0 0; font-size: 13px; color: var(--texto-2); }
.del-eva b { color: var(--cian); font-weight: 600; }
.del-eva a { color: var(--cian); font-weight: 600; text-decoration: none; white-space: nowrap; }
.tablero-v .avance { grid-column: 1 / -1; }
.tablero-v .barras { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.tablero-v .barras li { display: block; }
.tablero-v .barras li[hidden] { display: none; }
.tablero-v .barras a { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; padding-bottom: 12px;
  border-radius: 14px; overflow: hidden; border: 1px solid var(--borde); background: var(--suave); color: inherit; text-decoration: none;
  transition: transform var(--m-agil-t) var(--m-agil), border-color .2s; }
.tablero-v .barras a:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.2); }
.tablero-v .barras img { grid-column: 1 / -1; width: 100%; aspect-ratio: 16 / 8; object-fit: cover; display: block; border-bottom: 2px solid var(--c); background: #0b0b0c; }
.tablero-v .barras .cur-n { position: absolute; left: 10px; top: 8px; color: #fff; font-size: 13px; font-weight: 600; text-shadow: 0 1px 6px rgba(0,0,0,.7); }
.tablero-v .barras .t { grid-column: 1 / -1; padding: 0 12px; font-size: 13px; font-weight: 600; line-height: 1.3; white-space: normal; min-height: 34px; }
.tablero-v .barras .pista { margin-left: 12px; height: 6px; }
.tablero-v .barras .v { padding-right: 12px; font-size: 11px; }

@media (max-width: 1180px) {
  .escaparate { grid-template-columns: 1fr; }
  .tablero-v { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tablero-v .delega { grid-column: 1 / -1; }
  .tablero-v .avance { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  .escaparate { padding: 14px; gap: 16px; border-radius: 22px; }
  .vit-texto { padding: 22px 18px; }
  .escaparate p { font-size: 15px; margin-bottom: 18px; }
  .vit-reels { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; scrollbar-width: none; }
  .vit-reel { flex: 0 0 38%; scroll-snap-align: start; transform: none !important; }
  .tablero-v { grid-template-columns: 1fr; }
  .tablero-v .barras { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .eva-linea { font-size: 13px; }
}

/* Restos del rojo anterior escritos a mano en index.html: pasan al acento nuevo. */
:root[data-estilo="vidrio"] .btn.lleno { box-shadow: 0 8px 24px rgba(214,64,159,.22), inset 0 1px 0 rgba(255,255,255,.22); }
:root[data-estilo="vidrio"][data-tema="oscuro"] .btn.suave { background: #082c36; color: #4ccce6; }   /* cyan 3 y 11 */
:root[data-estilo="vidrio"][data-tema="oscuro"] .dato .ic { background: #082c36; }
.pantalla .barra b { background: var(--grad); }

/* Indicadores que eran verdes y ámbar («En línea», «Vista», «A tiempo», «Va lento»): pasan al cian y al magenta. */
:root[data-estilo="vidrio"][data-tema="oscuro"] { --verde: #4ccce6; --ambar: #ff8dcc; }   /* cyan 11, pink 11 */
:root[data-estilo="vidrio"][data-tema="claro"] { --verde: #107d98; --ambar: #c2298a; }
.estado.ok { background: color-mix(in srgb, var(--verde) 14%, transparent); }
.estado.lento { background: color-mix(in srgb, var(--ambar) 14%, transparent); }
.mini .visto { color: #06070b; }

/* Bienvenida: la letra chica bajo los botones y su revelación cuando se dice SÍ sin dudar. */
.sn-letra { margin: 14px 0 0; font-size: 10px; color: var(--texto-2); opacity: .55; letter-spacing: .02em; }
.bv-letra blockquote { margin: 6px 0 14px; padding: 16px 18px; border-radius: 14px; border: 1px solid rgba(255,141,204,.3); background: rgba(55,23,47,.45);
  font-size: 17px; line-height: 1.5; color: var(--texto); text-align: left; }
:root[data-tema="claro"] .bv-letra blockquote { background: #fee9f5; border-color: rgba(194,41,138,.3); }
.bv-letra .fin-sub { color: var(--magenta) !important; font-weight: 600; }

/* Bienvenidas para comparar (bienvenidas.js): galletas y curso recomendado. */
.gal, .rec { padding: 18px 6px 6px; text-align: center; }
.gal-t { margin: 0 0 6px; font-size: 22px; font-weight: 600; line-height: 1.3; }
.gal-s { margin: 0 auto 22px; max-width: 420px; color: var(--texto-2); font-size: 14px; }
.gal-bot { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.gal-bot .btn.lleno { height: 54px; padding: 0 44px; font-size: 17px; }
.gal-conf { border: 0; background: none; padding: 4px; font-size: 11px; color: var(--texto-2); opacity: .6; text-decoration: underline; cursor: pointer; }
.gal-opc { list-style: none; margin: 8px 0 20px; padding: 0; display: grid; gap: 8px; text-align: left; }
.gal-opc li { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--borde); background: var(--suave); font-size: 14px; }
.gal-sw { flex: none; width: 44px; height: 26px; border-radius: 999px; border: 0; padding: 3px; background: rgba(255,255,255,.14); cursor: pointer; transition: background .2s; }
.gal-sw i { display: block; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .2s; }
.gal-sw[aria-checked="true"] { background: var(--grad); }
.gal-sw[aria-checked="true"] i { transform: translateX(18px); }
.gal-sw[disabled] { opacity: .5; cursor: not-allowed; }
:root[data-tema="claro"] .gal-sw { background: rgba(0,0,0,.14); }
.gal-lista { list-style: none; margin: 8px auto 6px; padding: 0; display: grid; gap: 6px; max-width: 360px; text-align: left; }
.gal-lista li { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; border: 1px solid rgba(255,141,204,.3); background: rgba(55,23,47,.4); font-size: 14px; }
.gal-lista li .icono { color: var(--magenta); }
:root[data-tema="claro"] .gal-lista li { background: #fee9f5; }
.rec-eti { margin: 0 0 12px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--cian); }
.rec-card { display: grid; grid-template-columns: 180px 1fr; gap: 16px; align-items: center; text-align: left; padding: 12px; border-radius: 16px; border: 1px solid var(--borde); background: var(--suave); margin: 0 auto 20px; max-width: 540px; }
.rec-card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 10px; display: block; }
.rec-card > div { display: grid; gap: 4px; }
.rec-card .mono { font-size: 11px; color: var(--texto-2); }
.rec-card b { font-size: 18px; line-height: 1.25; }
.rec-est { color: #ffca16; letter-spacing: .1em; } .rec-est em { color: var(--texto); font-style: normal; letter-spacing: 0; font-weight: 600; margin-left: 4px; }
.rec-dato { font-size: 13px; color: var(--magenta); font-weight: 500; }
/* Términos: la caja de letra chica con barra de desplazamiento, para que se vea lo ilegible sin serlo del todo. */
.term-caja { max-height: 150px; overflow: auto; text-align: left; margin: 0 auto 20px; max-width: 460px; padding: 14px 16px; border-radius: 12px;
  border: 1px solid var(--borde); background: var(--suave); font-size: 11px; line-height: 1.6; color: var(--texto-2); }
.term-caja p { margin: 0 0 10px; } .term-caja p:last-child { margin: 0; } .term-caja b { color: var(--texto); }

/* Urgencia: el contador grande que corre y la pastilla de los cupos inventados. */
.urg-cupos { display: inline-block; margin: 0 0 10px; padding: 4px 12px; border-radius: 999px; font-size: 11px; color: var(--magenta);
  border: 1px solid rgba(255,141,204,.35); background: rgba(55,23,47,.4); }
:root[data-tema="claro"] .urg-cupos { background: #fee9f5; border-color: rgba(194,41,138,.3); }
.urg-reloj { margin: 2px 0 18px; font-size: 56px; font-weight: 600; letter-spacing: .04em; color: var(--magenta); font-variant-numeric: tabular-nums; }

/* Cámara: un lente dibujado con CSS y la luz REC que parpadea. */
.cam-lente { display: grid; place-items: center; width: 74px; height: 74px; margin: 0 auto 14px; border-radius: 50%; border: 1px solid var(--borde);
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.22), rgba(10,10,14,.55) 70%); position: relative; }
.cam-lente i { width: 26px; height: 26px; border-radius: 50%; background: #0a0a0c; border: 4px solid #232a3d; }
.cam-rec { position: absolute; top: 7px; right: 5px; width: 8px; height: 8px; border-radius: 50%; background: #ff5d5d; animation: bv-rec 1.1s steps(2, jump-none) infinite; }
@keyframes bv-rec { to { opacity: .15; } }

/* El botón grande de cada trampa «respira», como insisten los de verdad. */
.bv-insiste { animation: bv-insiste 2.4s ease-in-out 1.4s infinite; }
@keyframes bv-insiste { 0%, 100% { transform: none; } 50% { transform: scale(1.04); } }
@media (prefers-reduced-motion: reduce) { .bv-insiste, .cam-rec { animation: none; } }

@media (max-width: 860px) { .rec-card { grid-template-columns: 1fr; } .gal-t { font-size: 19px; } .urg-reloj { font-size: 44px; } }

/* ---------- Mis cursos: EVA ACADEMY destacado (recursos.js → destacadoAcademy) ---------- */
.destacado { position: relative; isolation: isolate; display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 34px; align-items: center;
  padding: 26px; margin-bottom: 30px; border-radius: 24px; overflow: hidden; border: 1px solid rgba(255,255,255,.1); background: #111113; color: #edeef0; }
.dest-fondo { position: absolute; inset: -60px; z-index: -1; filter: blur(60px) saturate(150%) brightness(.4); }
.dest-fondo img { width: 100%; height: 100%; object-fit: cover; }
.dest-portada { display: block; aspect-ratio: 9 / 16; border-radius: 16px; overflow: hidden; border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 30px 60px rgba(0,0,0,.45); transition: transform var(--m-agil-t) var(--m-agil); }
.dest-portada:hover { transform: translateY(-3px) rotate(-.6deg); }
.dest-portada img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dest-texto { padding: 30px 30px 26px; border-radius: 20px; border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  -webkit-backdrop-filter: blur(26px) saturate(160%); backdrop-filter: blur(26px) saturate(160%); }
.dest-eti { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #4ccce6; }
.destacado h2 { margin: 10px 0 10px; font-size: clamp(26px, 2.6vw, 38px); line-height: 1.1; letter-spacing: -.02em; }
.destacado p { margin: 0 0 16px; color: #b0b4ba; font-size: 15px; max-width: 620px; }
.dest-chips { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.dest-chips li { font: 500 12px 'IBM Plex Mono', monospace; padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); color: #edeef0; }
.dest-acc { display: flex; flex-wrap: wrap; gap: 10px; }
.dest-acc .btn { height: 46px; padding: 0 20px; font-size: 15px; }
.dest-sec { border: 1px solid #12677e !important; color: #4ccce6 !important; background: rgba(8,44,54,.55) !important; font-weight: 600; }
.cat-sub { margin: 0 0 14px; font-size: 18px; }
@media (max-width: 860px) {
  .destacado { grid-template-columns: 1fr; padding: 16px; gap: 16px; justify-items: center; }
  .dest-portada { width: 42%; }
  .dest-texto { padding: 22px 18px; width: 100%; }
}

/* ---------- EVA en modo pausa (eva-ui.js + arbol-eva.js) ----------
   Al abrir EVA, el sitio queda detrás de un vidrio oscuro y desenfocado, quieto; EVA aparece al centro y guía una
   decisión paso a paso. Se cierra con la X, con Esc o tocando el vidrio. */
.eva-velo { position: fixed; inset: 0; z-index: 27; background: rgba(8,9,12,.55);
  -webkit-backdrop-filter: blur(14px) saturate(120%); backdrop-filter: blur(14px) saturate(120%); animation: velo .35s ease both; }
:root[data-tema="claro"] .eva-velo { background: rgba(240,240,243,.5); }
.eva-velo[hidden] { display: none; }
@keyframes velo { from { opacity: 0; } }
:root.eva-pausa .app *, :root.eva-pausa .cabecera * { animation-play-state: paused !important; }
:root.eva-pausa .eva-fab { z-index: 30; }
.eva-panel { z-index: 29; left: 50%; right: auto; top: 50%; bottom: auto; transform: translate(-50%, -50%); width: min(560px, calc(100vw - 32px));
  max-height: min(720px, calc(100vh - 48px)); transform-origin: center; border-radius: 22px;
  box-shadow: 0 40px 90px rgba(0,0,0,.5), 0 0 0 1px rgba(76,204,230,.12); }
:root[data-tema="oscuro"] .eva-panel { background: rgba(24,25,27,.86); }
.eva-pest { grid-template-columns: repeat(3, 1fr); }
/* Árbol de decisión */
.arb { padding-bottom: 14px; }
.arb-migas { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0 0 12px; font-size: 12px; }
.arb-migas button { border: 0; background: none; padding: 2px 4px; color: var(--cian); font-size: 12px; cursor: pointer; border-radius: 6px; }
.arb-migas button:hover { background: var(--suave); }
.arb-migas span { color: var(--texto-2); }
.arb-paso { margin: 14px 0 4px; font-size: 11px; letter-spacing: .14em; color: var(--texto-2); }
.arb-q { margin: 0 0 16px; font-size: 21px; line-height: 1.3; font-weight: 600; letter-spacing: -.01em; }
.arb-ops { display: grid; gap: 8px; }
.arb-ops button { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: 14px; text-align: left;
  border: 1px solid var(--borde); background: var(--suave); color: var(--texto); font-size: 15px; font-weight: 500; cursor: pointer;
  transition: border-color .2s, transform var(--m-agil-t) var(--m-agil), background .2s; }
.arb-ops button:hover, .arb-ops button:focus-visible { border-color: var(--cian); background: color-mix(in srgb, var(--cian) 8%, transparent); transform: translateX(3px); }
.arb-ops button span { color: var(--cian); font-size: 20px; }
.arb-fin { display: grid; gap: 8px; margin-top: 8px; }
.arb-fin h3 { margin: 0 0 4px; font-size: 22px; letter-spacing: -.01em; }
.arb-ver { justify-self: start; font: 600 12px "IBM Plex Mono", monospace; padding: 4px 12px; border-radius: 999px; border: 1px solid; }
.arb-ver.no { color: #ff8dcc; border-color: #833869; background: #37172f; }
.arb-ver.dep { color: #d19dff; border-color: #664282; background: #301c3b; }
.arb-ver.si { color: #4ccce6; border-color: #12677e; background: #082c36; }
:root[data-tema="claro"] .arb-ver.no { color: #c2298a; background: #fee9f5; }
:root[data-tema="claro"] .arb-ver.dep { color: #8145b5; background: #f7edfe; }
:root[data-tema="claro"] .arb-ver.si { color: #107d98; background: #def7f9; }
.arb-revisa { margin: 0 0 6px; padding-left: 18px; display: grid; gap: 4px; font-size: 14px; }
.arb-revisa li::marker { color: var(--cian); }
.arb-reini { justify-self: start; border: 0; background: none; padding: 6px 0; color: var(--texto-2); font-size: 13px; cursor: pointer; }
.arb-reini:hover { color: var(--cian); }
@media (max-width: 860px) {
  .eva-panel { top: auto; bottom: 0; left: 0; right: 0; transform: none; width: 100%; max-height: 88vh; border-radius: 22px 22px 0 0; }
  .arb-q { font-size: 19px; }
}

/* ---------- Inicio: cada tarjeta con su imagen de cabecera ---------- */
.con-cab { overflow: hidden; }
.cab-img { margin: -20px -22px 14px; height: 110px; overflow: hidden; border-bottom: 1px solid var(--borde); background: #0b0b0c; }
.cab-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--m-normal-t) var(--m-normal); }
.con-cab:hover .cab-img img { transform: scale(1.04); }
.sigues.con-cab .cab-img { grid-column: 1 / -1; margin: -22px -24px 12px; }
.semana.con-cab .cab-img { margin: 0 0 4px; height: 90px; }
.tablero-v .dato-semana.con-cab { display: block; }

/* ---------- Docentes en blanco: plano de la sección (docentes-blanco.js) ---------- */
.doc-plano { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.doc-bloque { position: relative; min-height: 180px; padding: 22px 24px; border-radius: 18px; border: 1.5px dashed rgba(76,204,230,.35);
  background: repeating-linear-gradient(135deg, rgba(255,255,255,.015) 0 12px, transparent 12px 24px); display: flex; flex-direction: column; gap: 6px; }
:root[data-tema="claro"] .doc-bloque { border-color: rgba(16,125,152,.35); background: repeating-linear-gradient(135deg, rgba(0,0,0,.02) 0 12px, transparent 12px 24px); }
.doc-bloque.ancho { grid-column: 1 / -1; min-height: 200px; }
.doc-n { font-size: 12px; color: var(--cian); letter-spacing: .1em; }
.doc-bloque h2 { margin: 0; font-size: 19px; }
.doc-bloque p { margin: 0; color: var(--texto-2); font-size: 14px; max-width: 520px; }
.doc-lineas { margin-top: auto; display: grid; gap: 8px; padding-top: 16px; }
.doc-lineas i { display: block; height: 8px; border-radius: 4px; background: rgba(255,255,255,.06); }
:root[data-tema="claro"] .doc-lineas i { background: rgba(0,0,0,.06); }
.doc-lineas i:nth-child(2) { width: 80%; } .doc-lineas i:nth-child(3) { width: 55%; }
@media (max-width: 860px) { .doc-plano { grid-template-columns: 1fr; } .doc-bloque.ancho { grid-column: auto; } .cab-img { height: 96px; } }
.sigues.con-cab .num { grid-row: 2 / 4; } .sigues.con-cab .eti { grid-row: 2; grid-column: 1; } .sigues.con-cab h2 { grid-row: 3; grid-column: 1; }

/* ---------- Inicio: portada «Artículo 55» ---------- */
.portada55 { position: relative; isolation: isolate; min-height: calc(100vh - 110px); margin-bottom: 18px; border-radius: 26px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.09); background: #0b0b0c; color: #edeef0; display: flex; align-items: center; }
.p55-fondo { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }
.portada55::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(11,11,12,.92) 0%, rgba(11,11,12,.7) 40%, transparent 70%); }
.p55-texto { position: relative; padding: 56px 64px 88px; max-width: 760px; display: flex; flex-direction: column; gap: 18px; }
.p55-eti { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: #4ccce6; }
.portada55 blockquote { margin: 0; font: 300 clamp(28px, 3.2vw, 48px)/1.18 'IBM Plex Sans', sans-serif; letter-spacing: -.02em; }
.portada55 blockquote b { font-weight: 600; }
.p55-linea { display: block; height: 1px; width: 120px; background: var(--grad); }
.p55-eva { display: flex; gap: 14px; align-items: flex-start; padding: 16px 20px; border-radius: 16px; max-width: 600px;
  border: 1px solid rgba(76,204,230,.22); background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); }
.p55-eva b { font-size: 11px; letter-spacing: .14em; color: #4ccce6; padding-top: 4px; }
.p55-eva p { margin: 0; font-size: 18px; line-height: 1.45; }
.p55-acc { display: flex; flex-wrap: wrap; gap: 12px; }
.p55-acc .btn { height: 48px; padding: 0 22px; font-size: 15px; display: inline-flex; align-items: center; gap: 8px; }
.p55-sec { border: 1px solid #12677e !important; color: #4ccce6 !important; background: rgba(8,44,54,.55) !important; font-weight: 600; text-decoration: none; }
.p55-baja { position: absolute; left: 64px; bottom: 26px; font-size: 12px; color: #8b8d98; letter-spacing: .08em; text-decoration: none; }
.p55-baja:hover { color: #4ccce6; }

/* Dos portadas que se alternan (30-10-2026): el artículo 55 y el curso nuevo de automatización.
   Cada cara trae su propio velo oscuro (::before) porque al deslizarse crea su propia pila de capas. */
.portada55::before { display: none; }
.portada55 .cara { position: absolute; inset: 0; display: flex; align-items: center; opacity: 0; transform: translateX(72px);
  transition: opacity .3s ease, transform var(--m-agil-t, .4s) var(--m-agil, cubic-bezier(.3,1.3,.5,1)); pointer-events: none; }
.portada55 .cara.activa { opacity: 1; transform: none; pointer-events: auto; }
.portada55 .cara::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(11,11,12,.92) 0%, rgba(11,11,12,.7) 40%, transparent 70%); }
.portada55 .cara .p55-texto, .portada55 .cara .p55-baja { z-index: 1; }
.pa-t { margin: 0; font: 300 clamp(26px, 3vw, 44px)/1.16 'IBM Plex Sans', sans-serif; letter-spacing: -.02em; }
.pa-t b { font-weight: 600; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pa-vidrio { position: relative; overflow: hidden; padding: 16px 20px; border-radius: 16px; max-width: 600px;
  border: 1px solid rgba(255,141,204,.22); background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); }
.pa-vidrio p { margin: 0; font-size: 18px; line-height: 1.45; }
/* El destello: una banda de luz barre el vidrio cada vez que esta cara entra. */
.pa-vidrio::after { content: ''; position: absolute; top: -40%; bottom: -40%; left: -90px; width: 64px;
  transform: skewX(-18deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent); }
.cara-auto.activa .pa-vidrio::after { animation: pa-flash 1.1s ease .5s both; }
@keyframes pa-flash { to { left: calc(100% + 90px); } }
.pa-pronto { display: inline-flex; align-items: center; height: 48px; padding: 0 16px; border-radius: 999px;
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #ff8dcc; border: 1px solid rgba(255,141,204,.4); }
/* Flechas a los lados, visibles desde el inicio: la portada se cambia con ellas (o con las del teclado). */
.p55-flecha { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 46px; height: 46px;
  display: grid; place-items: center; border-radius: 50%; cursor: pointer; color: #edeef0;
  border: 1px solid rgba(255,255,255,.22); background: rgba(20,20,25,.35);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); transition: background .2s, border-color .2s, transform .2s; }
.p55-flecha.izq { left: 18px; } .p55-flecha.der { right: 18px; }
.p55-flecha:hover { background: rgba(20,20,25,.6); border-color: rgba(255,255,255,.45); transform: translateY(-50%) scale(1.08); }
.p55-puntos { position: absolute; left: 50%; transform: translateX(-50%); bottom: 22px; display: flex; gap: 8px; z-index: 2; }
.p55-puntos button { width: 10px; height: 10px; border-radius: 50%; border: 1px solid rgba(255,255,255,.55); background: none;
  cursor: pointer; padding: 0; transition: transform .2s; }
.p55-puntos button:hover { transform: scale(1.25); }
.p55-puntos button[aria-current="true"] { background: var(--grad); border-color: transparent; }
@media (prefers-reduced-motion: reduce) { .portada55 .cara { transition: none; } .cara-auto.activa .pa-vidrio::after { animation: none; } }
@media (max-width: 860px) {
  .portada55 { min-height: calc(100vh - 150px); align-items: flex-end; border-radius: 22px; }
  .p55-fondo { object-position: 78% 0; height: 36%; }
  .portada55::before { background: linear-gradient(180deg, transparent 14%, rgba(11,11,12,.9) 32%, #0b0b0c 38%); }
  .p55-texto { padding: 0 20px 64px; gap: 14px; }
  .p55-eva p { font-size: 16px; }
  .p55-baja { left: 20px; right: 20px; bottom: 20px; }
}
@media (max-width: 860px) {
  .portada55 { display: block; min-height: 0; }
  .p55-fondo { position: relative; inset: auto; z-index: 0; height: auto; aspect-ratio: 16 / 10; object-position: 75% 50%;
    -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent); mask-image: linear-gradient(180deg, #000 70%, transparent); }
  .portada55::before { display: none; }
  .p55-texto { padding: 4px 20px 64px; }
  /* En el teléfono las caras no se superponen: la inactiva se oculta y los puntos van sobre la imagen. */
  .portada55 .cara { position: static; display: none; opacity: 1; transform: none; pointer-events: auto; }
  .portada55 .cara.activa { display: block; }
  .portada55 .cara::before { display: none; }
  .p55-puntos { top: 14px; right: 14px; bottom: auto; left: auto; transform: none; }
  .pa-vidrio p { font-size: 16px; }
  .p55-flecha { width: 38px; height: 38px; top: 96px; transform: none; }
  .p55-flecha:hover { transform: scale(1.08); }
  .p55-flecha.izq { left: 12px; } .p55-flecha.der { right: 12px; }
}

/* «Mis cursos»: tarjeta ancha del curso nuevo de automatización (en preparación). */
.destacado-auto { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(260px, .85fr); padding: 0; overflow: hidden;
  margin: 0 0 18px; align-items: stretch; }
.da-cuerpo { padding: 26px 30px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.da-eti { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--magenta); }
.destacado-auto h2 { margin: 0; font-size: 26px; line-height: 1.2; letter-spacing: -.01em; }
.destacado-auto h2 b { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.da-cuerpo > p { margin: 0; color: var(--texto-2); max-width: 62ch; }
.da-img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 45%; min-height: 230px; }
.da-acc { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 4px; }
@media (max-width: 860px) {
  .destacado-auto { grid-template-columns: 1fr; }
  .da-img { order: -1; min-height: 0; aspect-ratio: 16 / 9; }
  .da-cuerpo { padding: 18px; }
  .destacado-auto h2 { font-size: 21px; }
}
/* En el teléfono, con EVA abierta, su botón redondo se esconde: tapaba el panel (que tiene su propia X). */
@media (max-width: 860px) { :root.eva-pausa .eva-fab { opacity: 0; pointer-events: none; } }

/* ---------- Ficha del curso (ficha-curso.js) ---------- */
.ficha-velo { position: fixed; inset: 0; z-index: 36; display: grid; place-items: center; padding: 24px; overflow: auto;
  background: rgba(8,9,12,.6); -webkit-backdrop-filter: blur(16px) saturate(120%); backdrop-filter: blur(16px) saturate(120%); animation: velo .3s ease both; }
:root[data-tema="claro"] .ficha-velo { background: rgba(240,240,243,.55); }
.ficha-velo.saliendo { animation: velo .22s ease reverse both; }
.ficha { position: relative; width: min(720px, 100%); border-radius: 24px; overflow: hidden; color: var(--texto);
  background: rgba(24,25,27,.82); border: 1px solid rgba(255,255,255,.1);
  -webkit-backdrop-filter: blur(28px) saturate(160%); backdrop-filter: blur(28px) saturate(160%);
  box-shadow: 0 40px 100px rgba(0,0,0,.55), 0 0 0 1px color-mix(in srgb, var(--c) 25%, transparent); }
:root[data-tema="claro"] .ficha { background: rgba(255,255,255,.9); border-color: rgba(0,0,0,.08); }
.ficha-img { position: relative; aspect-ratio: 16 / 8; overflow: hidden; background: #0b0b0c; }
.ficha-img img { width: 100%; height: 100%; object-fit: cover; display: block; animation: ficha-zoom 1.2s cubic-bezier(.2,.9,.25,1) both; }
@keyframes ficha-zoom { from { transform: scale(1.08); } }
.ficha-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(24,25,27,.6) 70%, rgba(24,25,27,.98)); }
:root[data-tema="claro"] .ficha-img::after { background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.55)); }
.ficha-sobre { position: absolute; left: 30px; right: 30px; bottom: 18px; z-index: 1; color: #fff; }
.ficha-eti { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: color-mix(in srgb, var(--c) 55%, #fff); }
.ficha-sobre h2 { margin: 6px 0 0; font-size: clamp(26px, 3vw, 38px); line-height: 1.1; letter-spacing: -.02em; text-shadow: 0 2px 18px rgba(0,0,0,.5); }
.ficha-cerrar { position: absolute; top: 14px; right: 14px; z-index: 2; width: 40px; height: 40px; border-radius: 50%; font-size: 24px; line-height: 1;
  color: #fff; background: rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.3); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); cursor: pointer; }
.ficha-cuerpo { padding: 18px 30px 28px; }
.ficha-desc { margin: 0 0 18px; font-size: 16px; line-height: 1.55; color: var(--texto-2); max-width: 600px; }
.ficha-acc { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 22px; }
.ficha-acc .btn { height: 48px; padding: 0 24px; font-size: 15px; }
.ficha-estado { font-size: 12px; color: var(--texto-2); }
.ficha-sub { margin: 0 0 8px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--texto-2); }
.ficha-mods { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ficha-mods button { width: 100%; display: grid; grid-template-columns: 38px minmax(0, 1fr) 80px 34px; align-items: center; gap: 12px; padding: 12px 14px;
  border-radius: 12px; border: 1px solid var(--borde); background: var(--suave); color: var(--texto); text-align: left; cursor: pointer;
  transition: border-color .2s, transform var(--m-agil-t) var(--m-agil); }
.ficha-mods button:hover, .ficha-mods button:focus-visible { border-color: var(--c); transform: translateX(3px); }
.fm-n { font-size: 13px; color: color-mix(in srgb, var(--c) 70%, #fff); }
:root[data-tema="claro"] .fm-n { color: var(--c); }
.fm-t { font-size: 15px; font-weight: 500; }
.fm-av { height: 5px; border-radius: 3px; background: rgba(255,255,255,.1); overflow: hidden; }
:root[data-tema="claro"] .fm-av { background: rgba(0,0,0,.08); }
.fm-av b { display: block; height: 100%; background: var(--grad); background-size: 200px 100%; }
.fm-ok { font-size: 12px; color: var(--texto-2); text-align: right; }
@media (max-width: 860px) {
  .ficha-velo { padding: 0; place-items: end center; }
  .ficha { border-radius: 22px 22px 0 0; max-height: 92vh; overflow: auto; }
  .ficha-sobre { left: 20px; right: 20px; }
  .ficha-cuerpo { padding: 14px 20px 26px; }
  .ficha-mods button { grid-template-columns: 34px minmax(0, 1fr) 30px; }
  .fm-av { display: none; }
}