@charset "utf-8";
/* ============================================================================
   ACEFAP. Plataforma de cursos y certificaciones
   Design system v3.3 · marca real #282560 / #2AC3EF · claro y oscuro
   Motivo recurrente: EL ARCO (de la referencia "Learn.")

   REGLA DE TEMA: ningún color se define SÓLO dentro de un bloque de tema.
   :root trae la paleta clara completa; los bloques de tema redefinen tokens.
   ========================================================================== */

/* --- 1. TOKENS INVARIANTES (marca y categorías) ----------------------------- */
:root {
  --ind-900: #14132e;
  --ind-700: #282560;           /* MARCA */
  --ind-600: #33306f;
  --ind-500: #4a4696;
  --ind-300: #a8a5d4;
  --ind-100: #e5e4f4;

  --cia-500: #2ac3ef;           /* MARCA , relleno, nunca texto sobre claro */
  --cia-600: #12a5ce;
  --cia-700: #0a6b87;

  --cat-1: #f59e0b;  --cat-2: #f2607a;  --cat-3: #10b981;
  --cat-4: #8b5cf6;  --cat-5: #2ac3ef;  --cat-6: #3b82f6;

  /* Variantes sólidas para rellenos que llevan icono BLANCO encima.
     Los vivos de arriba no alcanzan 3:1 con blanco (ámbar 2.15, cian 2.07,
     verde 2.54); estos sí. Los vivos se conservan para puntos y acentos. */
  --cat-1-solid: #d97706;  --cat-2-solid: #e14e6a;  --cat-3-solid: #059669;
  --cat-4-solid: #8b5cf6;  --cat-5-solid: #0e8fb8;  --cat-6-solid: #3b82f6;

  /* Tinta para icono o texto SOBRE el tinte claro de su categoria.
     El color vivo ahi no pasa de 2.2:1; estas variantes superan 4.5:1. */
  --cat-1-ink: #9a5b06;  --cat-2-ink: #a32741;  --cat-3-ink: #056348;
  --cat-4-ink: #5b2bc4;  --cat-5-ink: #0a6b87;  --cat-6-ink: #1d4ed8;

  --ok: #0e9f6e;  --err: #dc2626;

  /* Forma y ritmo */
  --r-1: 8px; --r-2: 14px; --r-3: 22px; --r-full: 999px;
  --arch: var(--r-full) var(--r-full) var(--r-3) var(--r-3);
  --wrap: 76rem;
  --gut: clamp(1.15rem, 4vw, 2.5rem);
  --sec: clamp(3.75rem, 7.5vw, 7rem);
  --ease: cubic-bezier(.22,.68,.24,1);
  --dur: 200ms;

  --f-dis: "Outfit", "Segoe UI", system-ui, sans-serif;
  --f-ui: "Inter", ui-sans-serif, system-ui, "Segoe UI", Roboto, Arial, sans-serif;

  --t--1: clamp(.75rem, .74rem + .05vw, .8125rem);
  --t-0:  clamp(.9375rem, .92rem + .09vw, 1rem);
  --t-1:  clamp(1.0625rem, 1.03rem + .16vw, 1.1875rem);
  --t-2:  clamp(1.25rem, 1.2rem + .25vw, 1.4375rem);
  --t-3:  clamp(1.5rem, 1.38rem + .55vw, 1.9375rem);
  --t-4:  clamp(1.875rem, 1.6rem + 1.25vw, 2.75rem);
  --t-5:  clamp(2.375rem, 1.75rem + 2.8vw, 4.125rem);
}

/* --- 2. TEMA CLARO (base completa) ------------------------------------------ */
:root {
  color-scheme: light;
  --bg: #ffffff;
  --bg-2: #f7f8fc;
  --bg-3: #eef0fa;
  --card: #ffffff;
  --hdr-bg: rgba(255,255,255,.86);

  --ink:   #14132e;
  --ink-2: #4a4869;
  --ink-3: #6f6d90;
  --line:  #e7e8f2;
  --line-2:#d7d9ea;

  --deep: #282560;
  --deep-ink: #ffffff;
  --deep-ink-2: #c9c7e6;
  --brand: #282560;
  --tint: #f1f0fa;

  --ok-txt: #0a7350;   --ok-bg: #e6f6ef;
  --warn-txt: #b45309; --warn-bg: #fef6e7;
  --cia-txt: #0a6b87;  --cia-bg: #e7f8fd;

  --sh-1: 0 1px 2px rgba(20,19,46,.06), 0 1px 3px rgba(20,19,46,.04);
  --sh-2: 0 4px 12px rgba(20,19,46,.05), 0 14px 34px rgba(20,19,46,.07);
  --sh-3: 0 8px 20px rgba(20,19,46,.07), 0 24px 56px rgba(20,19,46,.10);
  --sh-brand: 0 6px 16px rgba(40,37,96,.24);

  --btn-p-bg: #282560;
  --btn-p-hover: #33306f;
  --logo-filter: none;
  --logo-strip: grayscale(1) opacity(.62);
  --logo-strip-hover: grayscale(0) opacity(1);
}

/* --- 3. TEMA OSCURO --------------------------------------------------------- */
/* Los mismos tokens, no un invertido automático. El bloque va guardado para que
   una elección explícita de tema claro gane sobre la preferencia del sistema. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0f1020;  --bg-2: #16172e;  --bg-3: #1e2040;  --card: #191b34;
    --hdr-bg: rgba(15,16,32,.86);
    --ink: #eceaf6;  --ink-2: #b3b0d0;  --ink-3: #8b88ab;
    --line: #292b4d;  --line-2: #3a3d6b;
    --deep: #221f52;  --deep-ink: #f4f3fb;  --deep-ink-2: #bcb9dd;
    --brand: #a8a5d4;  --tint: #24264d;
    --ok-txt: #56d9a4;   --ok-bg: #0f3323;
    --warn-txt: #f0b25c; --warn-bg: #352712;
    --cia-txt: #7fdcf5;  --cia-bg: #0d2e3b;
    --sh-1: 0 1px 2px rgba(0,0,0,.45);
    --sh-2: 0 4px 12px rgba(0,0,0,.4), 0 14px 34px rgba(0,0,0,.45);
    --sh-3: 0 8px 20px rgba(0,0,0,.45), 0 24px 56px rgba(0,0,0,.55);
    --sh-brand: 0 6px 18px rgba(0,0,0,.5);
    --btn-p-bg: #4a4696;
    --btn-p-hover: #5b57ad;
    --logo-filter: brightness(0) invert(1);
  --logo-strip: brightness(0) invert(1) opacity(.62);
  --logo-strip-hover: brightness(0) invert(1) opacity(1);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0f1020;  --bg-2: #16172e;  --bg-3: #1e2040;  --card: #191b34;
  --hdr-bg: rgba(15,16,32,.86);
  --ink: #eceaf6;  --ink-2: #b3b0d0;  --ink-3: #8b88ab;
  --line: #292b4d;  --line-2: #3a3d6b;
  --deep: #221f52;  --deep-ink: #f4f3fb;  --deep-ink-2: #bcb9dd;
  --brand: #a8a5d4;  --tint: #24264d;
  --ok-txt: #56d9a4;   --ok-bg: #0f3323;
  --warn-txt: #f0b25c; --warn-bg: #352712;
  --cia-txt: #7fdcf5;  --cia-bg: #0d2e3b;
  --sh-1: 0 1px 2px rgba(0,0,0,.45);
  --sh-2: 0 4px 12px rgba(0,0,0,.4), 0 14px 34px rgba(0,0,0,.45);
  --sh-3: 0 8px 20px rgba(0,0,0,.45), 0 24px 56px rgba(0,0,0,.55);
  --sh-brand: 0 6px 18px rgba(0,0,0,.5);
  --btn-p-bg: #4a4696;
  --btn-p-hover: #5b57ad;
  --logo-filter: brightness(0) invert(1);
  --logo-strip: brightness(0) invert(1) opacity(.62);
  --logo-strip-hover: brightness(0) invert(1) opacity(1);
}

/* Tinte de categoría derivado del fondo: se adapta solo a cada tema */
:root {
  --cat-1-bg: color-mix(in oklab, var(--cat-1) 15%, var(--bg));
  --cat-2-bg: color-mix(in oklab, var(--cat-2) 15%, var(--bg));
  --cat-3-bg: color-mix(in oklab, var(--cat-3) 15%, var(--bg));
  --cat-4-bg: color-mix(in oklab, var(--cat-4) 15%, var(--bg));
  --cat-5-bg: color-mix(in oklab, var(--cat-5) 15%, var(--bg));
  --cat-6-bg: color-mix(in oklab, var(--cat-6) 15%, var(--bg));
}

@media (prefers-contrast: more) {
  :root { --line: color-mix(in oklab, var(--ink) 34%, var(--bg)); --ink-3: var(--ink-2) }
}

/* --- 4. BASE ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box }
* { margin: 0 }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; interpolate-size: allow-keywords }
body {
  font-family: var(--f-ui); font-size: var(--t-0); line-height: 1.62;
  color: var(--ink); background: var(--bg);
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img, svg { display: block; max-width: 100% }
img { block-size: auto }   /* sin esto, el atributo height del HTML gana sobre aspect-ratio */
ul { list-style: none; padding: 0 }
a { color: inherit; text-decoration: none }
button, input, select, textarea { font: inherit; color: inherit }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 4px }
::selection { background: var(--tint); color: var(--ink) }

h1,h2,h3,h4 { font-family: var(--f-dis); font-weight: 700; line-height: 1.12; letter-spacing: -.02em; text-wrap: balance; color: var(--ink) }
h1 { font-size: var(--t-5); letter-spacing: -.032em; line-height: 1.04 }
h2 { font-size: var(--t-4); letter-spacing: -.028em; line-height: 1.08 }
h3 { font-size: var(--t-3); letter-spacing: -.022em }
h4 { font-size: var(--t-2); letter-spacing: -.018em }
p { text-wrap: pretty }
.lead { font-size: var(--t-1); line-height: 1.6; color: var(--ink-2); max-inline-size: 54ch }
.num { font-family: var(--f-dis); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; letter-spacing: -.03em }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap }
.skip {
  position: absolute; inset-inline-start: 1rem; inset-block-start: -5rem; z-index: 999;
  background: var(--ind-700); color: #fff; padding: .75rem 1.25rem; border-radius: var(--r-1);
  font-weight: 600; transition: inset-block-start 160ms var(--ease);
}
.skip:focus { inset-block-start: 1rem }

/* --- 5. LAYOUT -------------------------------------------------------------- */
.wrap { inline-size: min(100% - var(--gut)*2, var(--wrap)); margin-inline: auto }
.sec { padding-block: var(--sec); position: relative; background: var(--bg) }
.sec--tint { background: var(--bg-2) }
.sec--deep { background: var(--deep); color: var(--deep-ink) }
.sec--deep h1, .sec--deep h2, .sec--deep h3, .sec--deep h4 { color: var(--deep-ink) }

/* Migas de pan. Componente compartido: sin esto un <ol> cae al estilo por
   defecto del navegador, con numeros visibles y sangria. */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin-block-end: 1.4rem; padding: 0; list-style: none; font-size: .8125rem }
.crumbs li { display: inline-flex; align-items: center; color: var(--ink-3) }
.crumbs a { color: var(--ink-2); transition: color var(--dur) var(--ease) }
.crumbs a:hover { color: var(--brand) }
.crumbs [aria-current="page"] { color: var(--ink); font-weight: 600 }
.crumbs svg { color: var(--ink-3) }

.head { max-inline-size: 46ch; margin-inline: auto; text-align: center; margin-block-end: clamp(2.25rem,4.5vw,3.5rem) }
.head--row { display: flex; align-items: end; justify-content: space-between; gap: 2rem; max-inline-size: none; text-align: start; flex-wrap: wrap }
.head p { color: var(--ink-2); margin-block-start: .75rem }
.sec--deep .head p { color: var(--deep-ink-2) }
.head .eyebrow { justify-content: center }

/* Eyebrow con icono. Sustituye la barra que se leía como guion largo */
.eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: var(--t--1); font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: var(--brand); margin-block-end: .9rem;
}
.eyebrow__ic {
  display: grid; place-items: center; inline-size: 24px; block-size: 24px;
  border-radius: 8px; background: var(--ec-bg, var(--tint)); color: var(--ec, var(--brand));
  flex: 0 0 auto;
}
.sec--deep .eyebrow, .capture .eyebrow { color: var(--cia-500) }
.sec--deep .eyebrow__ic, .capture .eyebrow__ic { background: rgba(255,255,255,.13); color: var(--cia-500) }

/* --- 6. BOTONES ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-block-size: 48px; padding-inline: 1.5rem;
  font-size: .9375rem; font-weight: 600; letter-spacing: -.005em;
  border: 0; border-radius: var(--r-full); cursor: pointer; white-space: nowrap;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn:hover { transform: translateY(-1px) }
.btn:active { transform: translateY(0) }
.btn--p { background: var(--btn-p-bg); color: #fff; box-shadow: var(--sh-brand) }
.btn--p:hover { background: var(--btn-p-hover) }
.btn--s { background: var(--card); color: var(--brand); box-shadow: inset 0 0 0 1.5px var(--line-2) }
.btn--s:hover { box-shadow: inset 0 0 0 1.5px var(--brand) }
.btn--c { background: var(--cia-500); color: var(--ind-900); box-shadow: 0 6px 16px rgba(42,195,239,.3) }
.btn--c:hover { background: var(--cia-600); color: #fff }
.btn--sm { min-block-size: 40px; padding-inline: 1.1rem; font-size: .875rem }
.btn--lg { min-block-size: 56px; padding-inline: 2rem; font-size: 1.0625rem }
.sec--deep .btn--s { background: rgba(255,255,255,.1); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.32) }
.sec--deep .btn--s:hover { background: rgba(255,255,255,.18) }
.arrow { transition: translate var(--dur) var(--ease) }
.btn:hover .arrow { translate: 3px 0 }

/* --- 7. PÍLDORAS ------------------------------------------------------------ */
.tag {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .3rem .7rem; border-radius: var(--r-full);
  font-size: .75rem; font-weight: 600;
  background: var(--bg-3); color: var(--brand);
}
.tag--ok { background: var(--ok-bg); color: var(--ok-txt) }
.tag--warn { background: var(--warn-bg); color: var(--warn-txt) }
.tag--cia { background: var(--cia-bg); color: var(--cia-txt) }
.tag--demo { background: var(--bg-3); color: var(--ink-2); font-weight: 500 }
.tag i { inline-size: 6px; block-size: 6px; border-radius: 50%; background: currentColor; flex: 0 0 auto }

/* --- 8. HEADER -------------------------------------------------------------- */
.hdr {
  position: sticky; inset-block-start: 0; z-index: 100;
  background: var(--hdr-bg); backdrop-filter: blur(16px) saturate(1.6);
  border-block-end: 1px solid transparent;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.hdr[data-stuck="true"] { border-block-end-color: var(--line); box-shadow: 0 1px 20px rgba(20,19,46,.06) }
@media (prefers-reduced-transparency: reduce) { .hdr { background: var(--bg); backdrop-filter: none } }
/* position: relative es lo que permite anclar el mega al header y no al item */
.hdr__in { display: flex; align-items: center; gap: clamp(.75rem,2vw,1.75rem); min-block-size: 76px }
.brand { display: flex; align-items: center; gap: .6rem; flex: 0 0 auto }
.brand img { block-size: 42px; width: auto; filter: var(--logo-filter) }

.nav { display: flex; align-items: center; gap: .35rem; margin-inline-start: .5rem }
.nav__a {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .55rem .75rem; border-radius: var(--r-1);
  font-size: .9375rem; font-weight: 500; color: var(--ink-2); background: none; border: 0; cursor: pointer;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.nav__a:hover, .nav__a[aria-expanded="true"] { color: var(--brand); background: var(--tint) }
.nav__a svg { transition: rotate var(--dur) var(--ease) }
.nav__a[aria-expanded="true"] svg { rotate: 180deg }

.hdr__acts { display: flex; align-items: center; gap: .5rem; margin-inline-start: auto }
.icon-btn {
  display: inline-grid; place-items: center; inline-size: 44px; block-size: 44px;
  border-radius: var(--r-full); background: none; border: 0; cursor: pointer; color: var(--ink-2); position: relative;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.icon-btn:hover { background: var(--bg-2); color: var(--brand) }
.icon-btn__n {
  position: absolute; inset-block-start: 6px; inset-inline-end: 5px;
  min-inline-size: 17px; block-size: 17px; padding-inline: 4px; border-radius: var(--r-full);
  background: var(--cia-500); color: var(--ind-900);
  font-size: .625rem; font-weight: 700; display: grid; place-items: center;
}

/* Mega-menú anclado al HEADER. Antes iba centrado sobre el item "Cursos",
   que vive pegado a la izquierda: por eso salía chueco y se desbordaba. */
.nav__item { position: static }
.mega {
  position: absolute; inset-block-start: 100%; inset-inline: 0;
  background: var(--card); border-block: 1px solid var(--line); box-shadow: var(--sh-3);
  display: none; padding-block: 1.75rem; z-index: 10;
}
.nav__a[aria-expanded="true"] + .mega { display: block }
.mega__in { inline-size: min(100% - var(--gut)*2, var(--wrap)); margin-inline: auto }
/* Cinco grupos tematicos, uno por columna, en vez de 19 sueltos en rejilla plana */
.mega__grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 1.75rem 1.5rem }
@media (max-width: 81.99rem) { .mega__grid { grid-template-columns: repeat(3,1fr) } }
.mega__col { display: grid; gap: .15rem; align-content: start }
.mega__h {
  font-family: var(--f-ui); font-size: .6875rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3); margin-block-end: .5rem;
  padding-block-end: .5rem; border-block-end: 1px solid var(--line);
}
.mega__grid a {
  display: flex; align-items: center; gap: .65rem; padding: .55rem .6rem; border-radius: var(--r-2);
  font-size: .875rem; font-weight: 500; color: var(--ink-2); line-height: 1.25;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.mega__grid a:hover { background: var(--bg-2); color: var(--ink) }
.mega__ic { display: grid; place-items: center; inline-size: 32px; block-size: 32px; border-radius: 10px; flex: 0 0 auto; background: var(--mc-bg); color: var(--mc) }
.mega__foot { margin-block-start: 1.25rem; padding-block-start: 1.15rem; border-block-start: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap }
.mega__foot span:not([class]) { font-size: .875rem; color: var(--ink-3) }

.burger { display: none }
@media (max-width: 63.99rem) {
  .burger { display: inline-grid; place-items: center; inline-size: 44px; block-size: 44px; border-radius: var(--r-1); background: none; border: 1px solid var(--line-2); cursor: pointer; order: 9; color: var(--ink) }
  .hdr__acts { order: 8; margin-inline-start: auto }
  .nav {
    position: absolute; inset-block-start: 100%; inset-inline: 0;
    flex-direction: column; align-items: stretch; gap: 0; margin: 0;
    padding: .75rem var(--gut) 1.75rem; background: var(--bg);
    border-block-end: 1px solid var(--line); box-shadow: var(--sh-2); display: none;
    max-block-size: calc(100dvh - 76px); overflow-y: auto;
  }
  .hdr[data-open="true"] .nav { display: flex }
  .nav__a { padding: .9rem .25rem; font-size: 1.0625rem; border-block-end: 1px solid var(--line) }
  .mega { position: static; display: block !important; box-shadow: none; border: 0; padding-block: .5rem 1rem; background: none }
  .mega__in { inline-size: auto }
  .mega__grid { grid-template-columns: 1fr 1fr; gap: .1rem }
  .mega__grid a { padding: .5rem .25rem; font-size: .8125rem }
  .mega__ic { inline-size: 26px; block-size: 26px; border-radius: 8px }
  .mega__foot { display: none }
  .hdr__acts .btn { display: none }
}

/* --- 9. HERO ---------------------------------------------------------------- */
.hero { position: relative; padding-block: clamp(2.75rem,6vw,5rem) clamp(3.25rem,6vw,5rem); overflow: clip;
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 62%, var(--bg-2) 100%) }
.hero::before, .hero::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; z-index: 0 }
.hero::before { inline-size: 34rem; block-size: 34rem; inset-block-start: -14rem; inset-inline-start: -12rem; background: radial-gradient(circle, color-mix(in oklab, var(--cia-500) 18%, transparent), transparent 68%) }
.hero::after { inline-size: 30rem; block-size: 30rem; inset-block-start: 2rem; inset-inline-end: -12rem; background: radial-gradient(circle, color-mix(in oklab, var(--cat-4) 16%, transparent), transparent 68%) }
.hero .wrap { position: relative; z-index: 1 }
.hero__top { text-align: center; max-inline-size: 54rem; margin-inline: auto }
.hero h1 .hl { color: var(--brand); position: relative; white-space: nowrap }
.hero h1 .hl::after {
  content: ""; position: absolute; inset-inline: -.06em; inset-block-end: .04em; block-size: .3em;
  background: linear-gradient(90deg, color-mix(in oklab, var(--cia-500) 45%, transparent), color-mix(in oklab, var(--cia-500) 18%, transparent));
  border-radius: var(--r-full); z-index: -1;
}
.hero .lead { margin: 1.15rem auto 0; text-align: center; max-inline-size: 52ch }

.search {
  display: flex; align-items: center; gap: .4rem; margin: 1.9rem auto 0;
  max-inline-size: 34rem; padding: .4rem .4rem .4rem 1.15rem;
  background: var(--card); border-radius: var(--r-full);
  box-shadow: var(--sh-2), inset 0 0 0 1px var(--line);
}
.search svg { flex: 0 0 auto; color: var(--ink-3) }
.search input { flex: 1; min-inline-size: 0; border: 0; background: none; padding: .7rem .5rem; font-size: .9375rem }
.search input::placeholder { color: var(--ink-3) }
.search input:focus:not(:focus-visible) { outline: 0 }

.fork { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; margin-block-start: 1.15rem }
.fork__hint { display: block; text-align: center; font-size: .8125rem; color: var(--ink-3); margin-block-start: .85rem }

.arches { display: grid; grid-template-columns: repeat(4,1fr); gap: clamp(.65rem,1.6vw,1.25rem); align-items: stretch; margin-block-start: clamp(2.5rem,5vw,3.75rem) }
.arch { position: relative; border-radius: var(--arch); overflow: hidden; aspect-ratio: 4/5 }
.arch img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: center 22%; transition: scale 500ms var(--ease) }
.arch:hover img { scale: 1.05 }
/* Sin escalonado: los cuatro arcos alineados. El desfase se leia como descuadre. */
.arch::after { content: ""; position: absolute; inset-block-end: 0; inset-inline: 0; block-size: 55%; background: linear-gradient(to top, rgba(12,11,30,.88), transparent) }
.arch__cap { position: absolute; inset-block-end: 0; inset-inline: 0; padding: .9rem .85rem; z-index: 2; color: #fff }
.arch__cap b { display: block; font-family: var(--f-dis); font-size: .875rem; font-weight: 600; line-height: 1.2 }
.arch__cap span:not([class]) { display: block; font-size: .6875rem; color: #d8d9ef; line-height: 1.35; margin-block-start: .15rem }
@media (max-width: 47.99rem) { .arches { grid-template-columns: repeat(2,1fr) } }

/* --- 10. CIFRAS ------------------------------------------------------------- */
.stats { position: relative; z-index: 3 }   /* el espacio lo pone el padding de la seccion: un margen aqui se colapsa fuera y abre una franja blanca */
/* Una sola tarjeta continua con separadores internos. Antes eran cuatro tarjetas
   en rejilla de 4 columnas, la misma que los arcos, y se leian como pie de foto. */
.stats__grid { display: flex; flex-wrap: wrap; background: var(--card); border-radius: var(--r-3); box-shadow: var(--sh-2); border: 1px solid var(--line); overflow: hidden }
.stat { flex: 1 1 15rem; display: flex; align-items: center; gap: .85rem; padding: 1.25rem 1.35rem; border-inline-start: 1px solid var(--line) }
.stat:first-child { border-inline-start: 0 }
@media (max-width: 61.99rem) { .stat { flex: 1 1 45% } .stat:nth-child(3) { border-inline-start: 0 } }
@media (max-width: 33.99rem) { .stat { flex: 1 1 100%; border-inline-start: 0; border-block-start: 1px solid var(--line) } .stat:first-child { border-block-start: 0 } }
.stat__ic { display: grid; place-items: center; inline-size: 44px; block-size: 44px; border-radius: var(--r-2); flex: 0 0 auto }
.stat .num { font-size: 1.625rem; color: var(--ink) }
.stat span:not([class]) { display: block; font-size: .8125rem; color: var(--ink-2); line-height: 1.3 }

/* --- 11. VINCULACIÓN -------------------------------------------------------- */
.logos { display: flex; align-items: center; justify-content: center; gap: clamp(1.25rem,3.5vw,2.75rem); flex-wrap: wrap }
.logos span { font-family: var(--f-dis); font-weight: 700; font-size: 1.0625rem; color: var(--ink-3); letter-spacing: -.01em }
.logos img { block-size: clamp(24px, 3.2vw, 34px); inline-size: auto; filter: var(--logo-strip); transition: filter var(--dur) var(--ease) }
.logos a:hover img, .logos img:hover { filter: var(--logo-strip-hover) }
.vinc { text-align: center; margin-block-end: 1.6rem }
.vinc h2 { font-size: var(--t-2) }
.vinc p { font-size: .8125rem; color: var(--ink-3); margin-block-start: .4rem }

/* --- 12. CATEGORÍAS --------------------------------------------------------- */
.cats { display: grid; grid-template-columns: repeat(6,1fr); gap: clamp(.6rem,1.4vw,1rem) }
@media (max-width: 71.99rem) { .cats { grid-template-columns: repeat(4,1fr) } }
@media (max-width: 47.99rem) { .cats { grid-template-columns: repeat(2,1fr) } }
.cat {
  display: grid; gap: .7rem; justify-items: center; text-align: center;
  padding: 1.4rem .85rem 1.15rem; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--r-3);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.cat:hover { transform: translateY(-4px); box-shadow: var(--sh-2); border-color: transparent }
.cat__ic { display: grid; place-items: center; inline-size: 52px; block-size: 52px; border-radius: 18px 18px 16px 16px; color: #fff }
.cat b { font-family: var(--f-dis); font-size: .9375rem; font-weight: 600; letter-spacing: -.012em; line-height: 1.25 }
.cat span:not([class]) { font-size: .75rem; color: var(--ink-3) }

/* --- 13. TARJETA DE CURSO --------------------------------------------------- */
.courses { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(1rem,1.9vw,1.5rem) }
@media (max-width: 63.99rem) { .courses { grid-template-columns: repeat(2,1fr) } }
@media (max-width: 41.99rem) { .courses { grid-template-columns: 1fr } }

.card {
  position: relative;
  display: flex; flex-direction: column; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--r-3); overflow: hidden;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
/* Enlace extendido: el ancla del titulo cubre la tarjeta entera, asi toda la
   superficie es clicable sin duplicar enlaces en el arbol de accesibilidad. */
.card__t a::after { content: ""; position: absolute; inset: 0; z-index: 1 }
/* Lo que debe seguir siendo clicable por separado se levanta por encima. */
.card__who a, .card__foot a, .card__foot button { position: relative; z-index: 2 }
/* Decorativos: no deben interceptar el clic del enlace extendido. */
.card__mode, .card__chip { pointer-events: none }
.card:focus-within { box-shadow: var(--sh-3) }
.card__t a:focus-visible { outline: 0 }
.card:has(.card__t a:focus-visible) { outline: 2px solid var(--brand); outline-offset: 3px }
.card:hover { transform: translateY(-5px); box-shadow: var(--sh-3); border-color: transparent }
.card__media { position: relative; aspect-ratio: 16/9; overflow: hidden; background: var(--bg-3) }
.card__media img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: scale 600ms var(--ease) }
.card:hover .card__media img { scale: 1.05 }
/* Velo superior: mantiene legible la píldora de modalidad sobre cualquier foto */
.card__media::after { content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; block-size: 48%; background: linear-gradient(to bottom, rgba(12,11,30,.52), transparent); pointer-events: none }
.card__mode {
  position: absolute; z-index: 2; inset-block-start: .7rem; inset-inline-start: .7rem;
  background: rgba(255,255,255,.95); backdrop-filter: blur(6px);
  padding: .3rem .65rem; border-radius: var(--r-full);
  font-size: .6875rem; font-weight: 700; color: #282560; white-space: nowrap;
  display: inline-flex; align-items: center; gap: .3rem;
}
.card__fav { position: absolute; z-index: 2; inset-block-start: .7rem; inset-inline-end: .7rem; inline-size: 32px; block-size: 32px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.95); border: 0; cursor: pointer; color: #4a4869 }
.card__fav:hover { color: var(--cat-2) }
/* Chip de categoría sobre la foto */
.card__chip { position: absolute; z-index: 2; inset-block-end: .7rem; inset-inline-start: .7rem; inline-size: 34px; block-size: 34px; display: grid; place-items: center; border-radius: 11px; color: #fff; box-shadow: 0 2px 10px rgba(12,11,30,.4) }
.card__body { padding: 1.05rem 1.1rem 1.15rem; display: flex; flex-direction: column; gap: .6rem; flex: 1 }
.card__cat { display: inline-flex; align-items: center; gap: .35rem; font-size: .75rem; font-weight: 600; color: var(--ink-2) }
.card__cat i { inline-size: 7px; block-size: 7px; border-radius: 50% }
.card__t { font-family: var(--f-dis); font-size: 1.0625rem; font-weight: 600; line-height: 1.28; letter-spacing: -.015em }
/* El recorte a dos lineas vive en el span interior, no en el h3 ni en el enlace:
   un overflow:hidden entre el ::after y la tarjeta recortaria el enlace extendido. */
.card__t > a { display: block; color: inherit }
.card__t > a > span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden }
.card__who { display: flex; align-items: center; gap: .55rem }
.card__who img { inline-size: 30px; block-size: 30px; border-radius: 50%; object-fit: cover; object-position: center 22%; flex: 0 0 auto }
.card__who b { font-size: .8125rem; font-weight: 600; display: block; line-height: 1.25 }
.card__who span:not([class]) { font-size: .6875rem; color: var(--ink-3); display: block; line-height: 1.25 }
.card__meta { display: flex; align-items: center; gap: .85rem; font-size: .75rem; color: var(--ink-2); flex-wrap: wrap }
.card__meta span { display: inline-flex; align-items: center; gap: .28rem }
.card__meta b { font-weight: 600; color: var(--ink) }
.card__badges { display: flex; gap: .4rem; flex-wrap: wrap }
.card__foot { margin-block-start: auto; padding-block-start: .9rem; border-block-start: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: .75rem }
.price { display: flex; align-items: baseline; gap: .45rem }
.price .num { font-size: 1.375rem; color: var(--brand) }
.price s { font-size: .8125rem; color: var(--ink-3); font-variant-numeric: tabular-nums }

/* --- 14. SPLIT CON ARCO ----------------------------------------------------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,4.5rem); align-items: center }
@media (max-width: 55.99rem) { .split { grid-template-columns: 1fr } .split--flip > *:first-child { order: 2 } }
.figure { position: relative; justify-self: center; inline-size: min(100%, 24rem) }
.figure__blob { position: absolute; inset: 6% -4% -6% 4%; border-radius: var(--arch); z-index: 0 }
.figure img { position: relative; z-index: 1; inline-size: 100%; block-size: auto; max-block-size: 30rem; border-radius: var(--arch); object-fit: cover; aspect-ratio: 4/5 }
.figure__chip { position: absolute; z-index: 2; background: var(--card); border-radius: var(--r-2); box-shadow: var(--sh-3); padding: .7rem .85rem; display: flex; align-items: center; gap: .6rem }
.figure__chip b { font-family: var(--f-dis); font-size: .9375rem; font-weight: 700; display: block; line-height: 1.15 }
.figure__chip span:not([class]) { font-size: .6875rem; color: var(--ink-2); display: block }
@media (max-width: 47.99rem) { .figure__chip { inset-inline-start: auto !important; inset-inline-end: .75rem !important } }
.metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 1.35rem 2rem; margin-block: 1.75rem }
.metrics > div { padding-inline-start: .9rem; border-inline-start: 3px solid var(--cia-500) }
.metrics .num { font-size: 1.875rem; display: block; color: var(--brand) }
.metrics span { font-size: .8125rem; color: var(--ink-2) }

/* --- 15. CERTIFICACIÓN ------------------------------------------------------ */
.sec--deep { position: relative; overflow: clip }
.sec--deep::before { content: ""; position: absolute; inset-block-start: -30%; inset-inline-end: -10%; inline-size: 40rem; block-size: 40rem; border-radius: 50%; background: radial-gradient(circle, color-mix(in oklab, var(--cia-500) 22%, transparent), transparent 65%); pointer-events: none }
.certs { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(.85rem,1.8vw,1.25rem) }
@media (max-width: 55.99rem) { .certs { grid-template-columns: 1fr } }
.cert { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.15); border-radius: var(--r-3); padding: 1.5rem 1.35rem; display: grid; gap: .6rem; align-content: start }
.cert__ic { display: grid; place-items: center; inline-size: 46px; block-size: 46px; border-radius: var(--r-2); background: var(--cia-500); color: var(--ind-900) }
.cert h4 { font-size: 1.125rem }
.cert p { font-size: .875rem; color: var(--deep-ink-2) }
.verify { margin-block-start: clamp(1.5rem,3vw,2.25rem); background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.15); border-radius: var(--r-3); padding: clamp(1.15rem,2.4vw,1.6rem); display: flex; gap: 1.25rem; align-items: center; flex-wrap: wrap; justify-content: space-between }
.verify b { font-family: var(--f-dis); font-size: 1.125rem; display: block }
.verify__f { display: flex; gap: .5rem; flex: 1 1 22rem; min-inline-size: 0 }
.verify input { flex: 1; min-inline-size: 0; min-block-size: 48px; padding-inline: 1rem; border-radius: var(--r-full); border: 1px solid rgba(255,255,255,.26); background: rgba(255,255,255,.09); color: #fff; font-size: .9375rem }
.verify input::placeholder { color: #b7b5d6 }

/* --- 16. FORMULARIO B2B ----------------------------------------------------- */
.quote { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-3); box-shadow: var(--sh-2); padding: clamp(1.25rem,2.6vw,1.75rem); display: grid; gap: .75rem; margin-block-start: 1.6rem }
.field { display: grid; gap: .3rem }
.field label { font-size: .75rem; font-weight: 600; color: var(--ink-2) }
.field input, .field select {
  min-block-size: 46px; padding-inline: .9rem; border-radius: var(--r-2);
  border: 1px solid var(--line-2); background: var(--bg); font-size: .9375rem; inline-size: 100%;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.field input:focus-visible, .field select:focus-visible { outline: 0; border-color: var(--brand); box-shadow: 0 0 0 3px var(--tint) }
.field:has(:user-invalid) input { border-color: var(--err) }
.f2 { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem }
@media (max-width: 33.99rem) { .f2 { grid-template-columns: 1fr } }
.checks { display: flex; gap: .5rem; flex-wrap: wrap; margin-block: 1.15rem }

/* --- 17. CLAUSTRO ----------------------------------------------------------- */
.teachers { display: grid; grid-template-columns: repeat(4,1fr); gap: clamp(.85rem,1.8vw,1.25rem) }
@media (max-width: 63.99rem) { .teachers { grid-template-columns: repeat(2,1fr) } }
@media (max-width: 33.99rem) { .teachers { grid-template-columns: 1fr } }
.teacher { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-3); overflow: hidden; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease) }
.teacher:hover { transform: translateY(-4px); box-shadow: var(--sh-2) }
.teacher__ph { position: relative; aspect-ratio: 1; overflow: hidden }
.teacher__ph img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: center 20% }
.teacher__b { padding: 1rem 1.05rem 1.15rem; display: grid; gap: .45rem }
.teacher__b b { font-family: var(--f-dis); font-size: 1rem; font-weight: 600; line-height: 1.25; letter-spacing: -.015em }
.teacher__b > span:not([class]) { font-size: .8125rem; color: var(--ink-2) }
.teacher .tag { font-size: .6875rem; padding: .25rem .55rem }
.teacher__act { display: flex; align-items: center; gap: .4rem; margin-block-start: .5rem; padding-block-start: .75rem; border-block-start: 1px solid var(--line) }
.ibtn {
  display: grid; place-items: center; inline-size: 40px; block-size: 40px;
  border-radius: 50%; background: var(--bg-3); color: var(--ink-2); flex: 0 0 auto;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.ibtn:hover { background: var(--btn-p-bg); color: #fff }
.ibtn--wa:hover { background: #1da851; color: #fff }
.ibtn--txt {
  inline-size: auto; block-size: 40px; padding-inline: .85rem; border-radius: var(--r-full);
  background: transparent; color: var(--brand); font-size: .8125rem; font-weight: 600;
  display: inline-flex; align-items: center; gap: .3rem; margin-inline-start: auto;
}
.ibtn--txt:hover { background: var(--tint); color: var(--brand) }


/* --- 18. TESTIMONIOS -------------------------------------------------------- */
.quotes { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(.85rem,1.8vw,1.25rem) }
@media (max-width: 63.99rem) { .quotes { grid-template-columns: 1fr } }
.qt { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-3); padding: 1.5rem 1.4rem; display: grid; gap: .9rem; align-content: start }
.qt__stars { color: var(--cat-1); font-size: .875rem; letter-spacing: .1em }
.qt p { font-size: .9375rem; color: var(--ink-2); line-height: 1.65 }
.qt__who { display: flex; align-items: center; gap: .65rem; padding-block-start: .9rem; border-block-start: 1px solid var(--line) }
.qt__who .qt__mono { color: var(--brand) }   /* gana a .qt__who span, que si no impone el color tenue */
.qt__mono { display: grid; place-items: center; inline-size: 38px; block-size: 38px; border-radius: 50%; font-family: var(--f-dis); font-weight: 700; flex: 0 0 auto; background: var(--tint); color: var(--brand) }
.qt__who b { font-size: .875rem; font-weight: 600; display: block; line-height: 1.25 }
.qt__who span { font-size: .75rem; color: var(--ink-3); display: block }

/* --- 19. FAQ ---------------------------------------------------------------- */
.faq { display: grid; gap: .6rem; max-inline-size: 52rem; margin-inline: auto }
.faq details { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-2); transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease) }
.faq details[open] { border-color: var(--line-2); box-shadow: var(--sh-1) }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.25rem; cursor: pointer; list-style: none; font-family: var(--f-dis); font-size: 1.0625rem; font-weight: 600; letter-spacing: -.015em }
.faq summary::-webkit-details-marker { display: none }
.faq summary::after {
  content: "+"; display: grid; place-items: center;
  inline-size: 26px; block-size: 26px; flex: 0 0 auto; border-radius: 50%;
  background: var(--tint); color: var(--brand);
  font-family: var(--f-ui); font-size: 1.05rem; font-weight: 500; line-height: 1;
  transition: rotate var(--dur) var(--ease);
}
.faq details[open] summary::after { rotate: 45deg }
.faq__a { padding: 0 1.25rem 1.25rem; font-size: .9375rem; color: var(--ink-2); max-inline-size: 68ch }
.faq__a a { color: var(--brand); text-decoration: underline }

/* --- 20. BANDA DE CAPTURA --------------------------------------------------- */
.capture {
  background: var(--deep); color: var(--deep-ink); border-radius: var(--r-3);
  padding: clamp(2.25rem,5vw,3.5rem) clamp(1.5rem,4vw,3rem) clamp(3.25rem,6vw,4.5rem);
  text-align: center; position: relative; overflow: clip;
  clip-path: polygon(0 0,100% 0,100% 100%,50% calc(100% - 26px),0 100%);
}
.capture::before { content: ""; position: absolute; inset-block-start: -50%; inset-inline-start: -10%; inline-size: 30rem; block-size: 30rem; border-radius: 50%; background: radial-gradient(circle, color-mix(in oklab, var(--cia-500) 26%, transparent), transparent 65%); pointer-events: none }
.capture > * { position: relative }
.capture h2 { color: var(--deep-ink) }
.capture p { color: var(--deep-ink-2); max-inline-size: 46ch; margin: .85rem auto 0 }
.capture__f { display: flex; gap: .5rem; max-inline-size: 30rem; margin: 1.6rem auto 0; flex-wrap: wrap }
.capture__f input { flex: 1 1 14rem; min-inline-size: 0; min-block-size: 52px; padding-inline: 1.25rem; border-radius: var(--r-full); border: 1px solid rgba(255,255,255,.26); background: rgba(255,255,255,.1); color: #fff; font-size: .9375rem }
.capture__f input::placeholder { color: #b7b5d6 }

/* --- 21. FOOTER Y PREFERENCIAS ---------------------------------------------- */
.ftr { background: var(--bg-2); border-block-start: 1px solid var(--line); padding-block: clamp(3rem,6vw,4.5rem) 0 }
.ftr__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: clamp(1.75rem,3vw,2.5rem) }
@media (max-width: 63.99rem) { .ftr__grid { grid-template-columns: 1fr 1fr } }
@media (max-width: 33.99rem) { .ftr__grid { grid-template-columns: 1fr } }
.ftr h5 { font-family: var(--f-dis); font-size: .9375rem; font-weight: 600; letter-spacing: -.01em; margin-block-end: .9rem }
.ftr ul { display: grid; gap: .55rem }
.ftr a { font-size: .875rem; color: var(--ink-2); transition: color var(--dur) var(--ease) }
.ftr a:hover { color: var(--brand) }
.ftr img { filter: var(--logo-filter) }
.ftr p { color: var(--ink-2) }

/* Franja de preferencias: tema, idioma y moneda */
.prefs { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; margin-block-start: clamp(2rem,4vw,3rem); padding-block: 1.35rem; border-block-start: 1px solid var(--line) }
.pref { display: flex; align-items: center; gap: .65rem; flex-wrap: wrap }
.pref__lbl { font-size: .75rem; font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: .07em }
.seg { display: inline-flex; background: var(--bg-3); border-radius: var(--r-full); padding: 3px; gap: 2px }
.seg button {
  min-block-size: 34px; padding-inline: .85rem; border: 0; background: none; cursor: pointer;
  border-radius: var(--r-full); font-size: .8125rem; font-weight: 600; color: var(--ink-2);
  display: inline-flex; align-items: center; gap: .35rem;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.seg button:hover:not([disabled]) { color: var(--ink) }
.seg button[aria-pressed="true"] { background: var(--card); color: var(--brand); box-shadow: var(--sh-1) }
.seg button[disabled] { opacity: .62; cursor: not-allowed }
.pref__note { font-size: .6875rem; color: var(--ink-3) }
.ftr__legal { display: flex; flex-wrap: wrap; gap: .75rem 2rem; align-items: center; justify-content: space-between; padding-block: 1.5rem; border-block-start: 1px solid var(--line); font-size: .8125rem; color: var(--ink-3) }
.socials { display: flex; gap: .4rem }
.socials a { display: grid; place-items: center; inline-size: 38px; block-size: 38px; border-radius: 50%; background: var(--card); border: 1px solid var(--line); color: var(--ink-2) }
.socials a:hover { background: var(--btn-p-bg); color: #fff; border-color: var(--btn-p-bg) }

/* Franja única de aviso de datos demo */
.demo-note { display: flex; align-items: center; justify-content: center; gap: .5rem; flex-wrap: wrap; text-align: center; font-size: .8125rem; color: var(--ink-2); background: var(--bg-3); border-radius: var(--r-2); padding: .8rem 1.15rem; margin-block-start: 1.75rem }

/* --- 22. MOTION, capa estrictamente aditiva ------------------------------- */
/* Nunca se anima opacity desde 0: si el navegador no soporta scroll timelines,
   el visitante vería una página en blanco. Sólo desplazamiento. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .rv { animation: rv linear both; animation-timeline: view(); animation-range: entry 12% entry 88% }
    @keyframes rv { from { translate: 0 18px } to { translate: 0 0 } }
    .rv:nth-child(2n) { animation-range: entry 16% entry 94% }
    .rv:nth-child(3n) { animation-range: entry 20% entry 100% }
  }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important }
}
@media print { .hdr, .capture, .socials, .prefs { display: none !important } .sec { padding-block: 1rem } }