/* ═══════════════════════════════════════════════════════════════
   Diplomado FMSJS · Cohorte 23
   Sistema de diseño Campus FUNDMSJS · familia Premium (Diplomados = azul)
   Titulares: Syne · Interfaz y lectura: General Sans
   Regla de forma: ningún bloque de color de borde a borde ni con esquinas rectas.
   ═══════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Syne';
  src: url('assets/fonts/syne-latin.woff2') format('woff2');
  font-weight: 400 800;
  font-display: swap;
}
/* Ningún número va en Syne: dentro de los titulares, cifras y signos usan Google Sans */
@font-face {
  font-family: 'Syne';
  src: url('assets/fonts/google-sans-flex-latin.woff2') format('woff2');
  font-weight: 400 800;
  font-display: swap;
  unicode-range: U+0030-0039, U+0025, U+002B, U+00D7;
}
@font-face {
  font-family: 'Google Sans Flex';
  src: url('assets/fonts/google-sans-flex-latin.woff2') format('woff2');
  font-weight: 300 700;
  font-display: swap;
}

:root {
  /* Color · Campus Premium */
  --ink: #0B3555;
  --navy: #004068;
  --blue: #2F6F9F;
  --azufre: #5980A6;
  --sky: #A9C2D9;
  --sky-soft: #E9EFF4;
  --pink: #C42A78;
  --pink-solid: #B52B77;
  --pink-metric: #D92F86;
  --pink-soft: #FDEEF6;
  --green: #1F7B57;
  --mint: #9CE0B8;
  --paper: #F7FAFB;
  --white: #FFFFFF;
  --text: var(--ink);
  --muted: #4A6378;
  --line: rgba(47, 111, 159, .16);
  --line-strong: rgba(47, 111, 159, .32);

  /* Tipografía */
  --f-display: 'Syne', 'Archivo', system-ui, sans-serif;
  --f-ui: 'Google Sans Flex', 'Google Sans', 'General Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Forma */
  --r-s: 12px;
  --r-m: 22px;
  --r-l: 34px;
  --r-xl: 38px;
  --r-panel: clamp(32px, 4vw, 56px);
  --r-pill: 999px;

  /* Elevación (teñida de ink, nunca negra) */
  --sh-cta: 0 18px 40px -24px rgba(11, 53, 85, .68);
  --sh-card: 0 20px 44px -24px rgba(0, 64, 104, .34);
  --sh-panel: 0 24px 58px -34px rgba(11, 53, 85, .58);

  /* Movimiento */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-in: cubic-bezier(.16, 1, .3, 1);
  --ease-smooth: cubic-bezier(.65, 0, .35, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --t-fast: 240ms;
  --t-scene: 640ms;

  --wrap: 1240px;
  --gutter: clamp(16px, 4vw, 40px);
}

/* Resorte real (rebote amortiguado) donde el navegador soporta linear() */
@supports (transition-timing-function: linear(0, 1)) {
  :root {
    --spring: linear(0, .009, .035 2.1%, .141, .281 6.7%, .723 12.9%, .938 16.7%, 1.017, 1.077, 1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%, 1.051 39.6%, 1.017 43.1%, .991, .977 51%, .974 53.8%, .975 57.1%, .997 69.8%, 1.003 76.9%, 1.004 83.8%, 1);
  }
}

/* ── Base ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--f-ui);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text);
  background-color: var(--paper);
  background-image:
    linear-gradient(rgba(47, 111, 159, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(47, 111, 159, .045) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
p { margin: 0 0 1em; }
h1, h2, h3 { margin: 0; }
ul, ol { margin: 0; padding: 0; }
button { font: inherit; color: inherit; }
svg { display: block; }
:focus-visible { outline: 3px solid var(--pink); outline-offset: 4px; border-radius: 8px; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--ink); color: var(--white); padding: 10px 18px; border-radius: var(--r-pill); text-decoration: none; transition: top var(--t-fast) var(--ease); }
.skip-link:focus { top: 12px; }

.wrap { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; }

/* ── Tipografía editorial ─────────────────────────── */
.display { font-family: var(--f-display); font-weight: 700; text-transform: uppercase; letter-spacing: -.015em; line-height: .98; color: var(--ink); text-wrap: balance; }
.display .bold { font-weight: 700; }
.display .light { font-family: var(--f-ui); font-weight: 300; letter-spacing: -.02em; }
.display .outline { display: inline-block; max-width: 100%; border: 1.5px solid currentColor; border-radius: var(--r-pill); padding: .02em .32em .06em; color: var(--pink); line-height: 1; margin-top: .08em; }
.h2 { font-size: clamp(2rem, 5.2vw, 4rem); margin-bottom: clamp(24px, 4vw, 48px); }
.h3 { font-family: var(--f-display); font-weight: 700; text-transform: uppercase; font-size: 1.05rem; letter-spacing: .01em; margin-bottom: .75em; }
.eyebrow, .micro { font-family: var(--f-ui); font-size: .75rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--blue); }
.eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--pink); flex: none; animation: dot-pulse 2.4s var(--ease-smooth) infinite; }
@keyframes dot-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(47, 111, 159, .35); } 50% { box-shadow: 0 0 0 6px rgba(47, 111, 159, 0); } }
.eyebrow--light, .micro--light { color: var(--sky); }
.eyebrow--light .dot { background: var(--sky); }
.micro { margin-bottom: .6em; }
.muted { color: var(--muted); }
.note { font-size: .875rem; color: var(--muted); margin-top: 18px; }
.note--light { color: rgba(255, 255, 255, .72); }

/* ── Botones (patrón Campus Free: rótulo con énfasis + flecha en círculo) ── */
.btn {
  --bg: var(--ink); --fg: var(--white); --bg-hover: var(--blue); --bg-press: var(--pink-solid); --arrow-bg: rgba(255, 255, 255, .16);
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: space-between; gap: 14px;
  min-height: 56px; padding: 7px 8px 7px 26px;
  border-radius: var(--r-pill); border: 1.5px solid transparent;
  background: var(--bg); color: var(--fg);
  font-family: var(--f-ui); text-decoration: none; cursor: pointer;
  box-shadow: var(--sh-cta);
  transition: background-color 320ms var(--ease), color 320ms var(--ease), border-color 320ms var(--ease), transform 420ms var(--spring), box-shadow 320ms var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.btn__label { display: inline-flex; align-items: baseline; gap: .32em; font-family: var(--f-display); font-size: .82rem; font-weight: 500; letter-spacing: .085em; text-transform: uppercase; line-height: 1.15; white-space: nowrap; }
.btn__label > span { font-family: var(--f-ui); font-weight: 300; letter-spacing: .12em; }
.btn__label strong { font-weight: 800; }
.btn__arrow {
  position: relative; display: grid; place-items: center; flex: none;
  width: 40px; height: 40px; border-radius: 50%; background: var(--arrow-bg);
  transition: background-color 320ms var(--ease), transform 480ms var(--spring);
}
.btn__arrow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform 480ms var(--spring); }
.btn:hover { background: var(--bg-hover); transform: translateY(-3px); box-shadow: 0 24px 44px -24px rgba(11, 53, 85, .8); }
.btn:hover .btn__arrow { background: var(--white); color: var(--bg-hover); transform: rotate(-45deg); }
.btn:active { transform: translateY(0) scale(.97); transition-duration: 120ms; }
.btn.is-clicked { --bg: var(--bg-press); --bg-hover: var(--bg-press); background: var(--bg-press); }
.btn.is-clicked .btn__arrow { color: var(--bg-press); background: var(--white); transform: rotate(0deg) scale(1.08); }
.btn__ripple { position: absolute; z-index: -1; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: rgba(255, 255, 255, .45); pointer-events: none; animation: ripple 700ms var(--ease) forwards; }
@keyframes ripple { to { transform: scale(40); opacity: 0; } }
.btn--accent { --bg: var(--pink); --bg-hover: var(--pink-solid); --bg-press: var(--ink); box-shadow: var(--sh-cta); }
.btn--ghost { --bg: transparent; --fg: var(--ink); --bg-hover: var(--white); --bg-press: var(--ink); padding: 7px 26px; border-color: var(--line-strong); box-shadow: none; }
.btn--ghost:hover { border-color: var(--ink); color: var(--ink); }
.btn--ghost.is-clicked { color: var(--white); border-color: var(--ink); }
.btn--ghost .btn__ripple { background: rgba(196, 42, 120, .25); }
.btn--sm { min-height: 46px; padding-left: 20px; }
.btn--sm .btn__arrow { width: 32px; height: 32px; }
.btn--sm .btn__label { font-size: .76rem; }
.btn[disabled] { opacity: .6; cursor: progress; }

/* ── Chips ────────────────────────────────────────── */
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; min-height: 32px; padding: 4px 14px; border: 1px solid var(--line-strong); border-radius: var(--r-pill); font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); background: rgba(255, 255, 255, .7); transition: transform 360ms var(--spring), background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.chip:hover { transform: translateY(-2px); background: var(--white); }
.chip--quiet { color: var(--ink); letter-spacing: .04em; }
.chips--light .chip { color: var(--white); border-color: rgba(255, 255, 255, .32); background: rgba(255, 255, 255, .06); text-transform: none; letter-spacing: 0; font-weight: 500; font-size: .875rem; }
.chips--light .chip:hover { background: rgba(255, 255, 255, .14); }

/* ── Aviso de revisión ────────────────────────────── */
.draft-bar { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 10px var(--gutter) 0; padding: 8px 12px 8px 20px; border-radius: var(--r-pill); background: var(--sky-soft); border: 1px solid rgba(169, 194, 217, .9); font-size: .82rem; color: var(--ink); text-align: center; }
.draft-bar p { margin: 0; }
.draft-bar__close { border: 0; background: rgba(255, 255, 255, .7); width: 28px; height: 28px; flex: none; font-size: 1.1rem; line-height: 1; cursor: pointer; border-radius: 50%; transition: background-color var(--t-fast) var(--ease), transform 360ms var(--spring); }
.draft-bar__close:hover { background: var(--white); transform: rotate(90deg); }
.draft-bar[hidden] { display: none; }

/* ── Navegación animada ───────────────────────────── */
.nav { position: sticky; top: 12px; z-index: 50; padding: 0 var(--gutter); margin-top: 12px; animation: nav-in 900ms var(--ease) both; }
@keyframes nav-in { from { transform: translateY(-40px); opacity: 0; } }
.nav__pill {
  max-width: var(--wrap); margin: 0 auto;
  display: flex; align-items: center; gap: 20px;
  padding: 8px 8px 8px 18px;
  background: rgba(255, 255, 255, .78);
  -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  transition: padding 420ms var(--ease), box-shadow 420ms var(--ease), max-width 600ms var(--ease), background-color 420ms var(--ease);
}
.nav.is-scrolled .nav__pill { padding: 5px 6px 5px 14px; box-shadow: var(--sh-card); background: rgba(255, 255, 255, .9); max-width: 1120px; }
.nav__brand { display: block; flex: none; transition: transform 420ms var(--spring); }
.nav__brand img { height: 44px; width: auto; transition: height 420ms var(--ease); }
.nav.is-scrolled .nav__brand img { height: 36px; }
.nav__brand:hover { transform: scale(1.04); }
.nav__links { position: relative; display: flex; gap: 6px; margin-left: auto; }
.nav__links a { position: relative; z-index: 1; padding: 8px 14px; border: 1px solid var(--line-strong); border-radius: var(--r-pill); text-decoration: none; font-size: .88rem; font-weight: 500; color: var(--ink); transition: color 320ms var(--ease), background-color 320ms var(--ease), border-color 320ms var(--ease), transform 420ms var(--spring); }
.nav__links a:hover { color: var(--pink); border-color: var(--pink); background: var(--pink-soft); transform: translateY(-1px); }
.nav__links a.is-active { border-color: transparent; background: transparent; }
.nav__links a.is-clicked, .nav__links a:active { color: var(--white); background: var(--pink); border-color: var(--pink); }
.nav__links a.is-active { color: var(--white); }
.nav__indicator { position: absolute; z-index: 0; top: 0; left: 0; height: 100%; width: 0; border-radius: var(--r-pill); background: var(--ink); box-shadow: 0 9px 22px -13px rgba(0, 64, 104, .72); opacity: 0; transition: transform 560ms var(--spring), width 560ms var(--spring), opacity 300ms var(--ease); pointer-events: none; }
.nav__links.has-active .nav__indicator { opacity: 1; }
.nav__toggle { display: none; }

/* ── Hero ─────────────────────────────────────────── */
.hero { position: relative; isolation: isolate; padding: clamp(40px, 6vw, 80px) 0 0; }
.hero::before { content: ''; position: absolute; z-index: -1; inset: -140px 0 -80px; pointer-events: none; background: radial-gradient(70% 55% at 85% 32%, rgba(169, 194, 217, .34), transparent 70%), radial-gradient(55% 50% at 5% 40%, rgba(89, 128, 166, .12), transparent 70%); -webkit-mask-image: linear-gradient(to bottom, transparent, #000 26%, #000 74%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 26%, #000 74%, transparent); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.hero__copy { container-type: inline-size; min-width: 0; }
.hero__title { font-size: 3rem; font-size: clamp(1.75rem, 7.4cqi, 5rem); margin-bottom: 22px; }
.hero__title span { display: block; }
.hero__title .outline { display: inline-block; font-size: .56em; padding: .1em .45em .14em; margin-top: .22em; }
.hero__sub { font-family: var(--f-display); font-weight: 600; font-size: clamp(1rem, 1.6vw, 1.2rem); color: var(--blue); margin-bottom: 14px; }
.hero__lead { font-size: clamp(1.02rem, 1.4vw, 1.15rem); max-width: 56ch; color: #23435E; }
.hero__copy .chips { margin: 22px 0 28px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__media { position: relative; }
.hero__photo { margin: 0; border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--sh-panel); aspect-ratio: 4 / 5; background: var(--sky); }
.hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 40% center; transition: transform 1.6s var(--ease); }
.hero__media:hover .hero__photo img { transform: scale(1.04); }
.now-card { position: absolute; left: clamp(-56px, -4vw, -20px); bottom: 28px; width: min(300px, 82%); padding: 20px 22px; border-radius: var(--r-m); background: rgba(255, 255, 255, .9); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid var(--line); box-shadow: var(--sh-card); animation: levitate 5.6s ease-in-out infinite; }
@keyframes levitate { 0%, 100% { transform: translate3d(0, -2px, 0); } 50% { transform: translate3d(0, -9px, 0); } }
.now-card .micro { margin-bottom: 4px; color: var(--pink); }
.now-card__date { font-family: var(--f-display); font-weight: 700; text-transform: uppercase; font-size: 1.3rem; line-height: 1; margin-bottom: 8px; }
.now-card__date span { font-size: 2.6rem; color: var(--ink); margin-right: 4px; }
.now-card__what { font-size: .86rem; color: var(--muted); margin-bottom: 14px; }
.now-card__meter { height: 6px; border-radius: var(--r-pill); background: rgba(47, 111, 159, .14); overflow: hidden; margin-bottom: 8px; }
.now-card__meter span { display: block; height: 100%; width: 0; background: var(--pink); border-radius: inherit; transition: width 1.2s var(--ease-in); }
.now-card__close { font-size: .8rem; font-weight: 600; color: var(--ink); margin: 0; }

.lazo { position: absolute; pointer-events: none; user-select: none; }
.lazo--hero { width: 74px; right: -18px; top: -40px; transform: rotate(180deg); animation: lazo-sway 7s ease-in-out infinite; }
@keyframes lazo-sway { 0%, 100% { translate: 0 0; } 50% { translate: 0 6px; } }

/* Bento de cifras */
.bento { list-style: none; display: grid; grid-template-columns: 1.4fr repeat(3, 1fr) 1.2fr; gap: 12px; margin: clamp(36px, 5vw, 64px) 0 28px; }
.bento__cell { display: flex; flex-direction: column; justify-content: space-between; gap: 18px; min-height: 150px; padding: 22px; border-radius: var(--r-m); background: rgba(255, 255, 255, .86); border: 1px solid var(--line); transition: transform 480ms var(--spring), box-shadow var(--t-fast) var(--ease); }
.bento__cell:hover { transform: translateY(-5px); box-shadow: var(--sh-card); }
.bento__cell strong { font-family: var(--f-display); font-size: clamp(2.2rem, 3.8vw, 3.2rem); line-height: 1; color: var(--ink); }
.bento__cell > span { font-size: .9rem; color: var(--muted); }
.bento__cell--metric { background: var(--pink-metric); border-color: transparent; border-radius: var(--r-s) var(--r-m) var(--r-s) var(--r-m); animation: levitate 3s ease-in-out infinite; box-shadow: 0 16px 28px -18px rgba(11, 53, 85, .6); }
.bento__cell--metric strong, .bento__cell--metric > span { color: var(--white); }
.bento__cell--ink { background: var(--ink); border-color: transparent; }
.bento__cell--ink strong { color: var(--white); }
.bento__cell--ink > span { color: var(--sky); }

.brand-stripe { height: 8px; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--ink), var(--blue) 30%, var(--sky) 52%, #C9D3DC 74%, var(--azufre)); background-size: 200% 100%; animation: stripe-flow 9s linear infinite; }
@keyframes stripe-flow { to { background-position: -200% 0; } }

/* ── Secciones ────────────────────────────────────── */
.section { position: relative; padding: clamp(72px, 10vw, 128px) 0; }
/* Paneles curvos: el color nunca toca los bordes de la pantalla */
.section--panel, .section--ink { margin-inline: var(--gutter); border-radius: var(--r-panel); }
.section--panel { background: linear-gradient(180deg, rgba(169, 194, 217, .2), rgba(255, 255, 255, .55)); border: 1px solid rgba(169, 194, 217, .5); }
.section--ink { background: radial-gradient(90% 70% at 100% 0%, rgba(47, 111, 159, .55), transparent 60%), var(--ink); color: var(--white); box-shadow: var(--sh-panel); }
.section--panel > .wrap, .section--ink > .wrap { width: min(var(--wrap), 100% - 2 * clamp(16px, 4vw, 56px)); }
.section--ink .display { color: var(--white); }
.section--ink .display .outline { color: var(--sky); }
.section__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .7fr); gap: 24px 48px; align-items: end; margin-bottom: clamp(28px, 4vw, 48px); }
.section__head .h2 { margin-bottom: 0; }
.section__intro { color: var(--muted); font-size: 1.05rem; margin: 0; max-width: 46ch; }
.card { padding: 26px; border-radius: var(--r-l); background: rgba(255, 255, 255, .9); border: 1px solid var(--line); box-shadow: var(--sh-card); transition: transform 480ms var(--spring); }
.card:hover { transform: translateY(-4px); }
.center-cta { display: flex; justify-content: center; margin-top: clamp(32px, 4vw, 48px); }

/* ── 02 · Tarjetas 3D (efecto 3D Card) ─────────────── */
.cards3d { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.card3d { perspective: 1000px; }
.card3d__body {
  position: relative; display: flex; flex-direction: column; gap: 10px; height: 100%;
  padding: 16px 16px 22px; border-radius: var(--r-l);
  background: rgba(255, 255, 255, .92); border: 1px solid var(--line); box-shadow: var(--sh-card);
  transform-style: preserve-3d; transition: transform 700ms var(--ease), box-shadow 400ms var(--ease);
  will-change: transform;
}
.card3d.is-hover .card3d__body { transition: transform 120ms linear, box-shadow 400ms var(--ease); box-shadow: 0 40px 70px -36px rgba(11, 53, 85, .55); }
.card3d__body > * { transform: translateZ(0); transition: transform 700ms var(--ease); }
.card3d.is-hover .card3d__body > * { transform: translateZ(var(--z, 20px)); }
.card3d__img { margin: 0 0 6px; border-radius: var(--r-m); overflow: hidden; aspect-ratio: 4 / 3.4; background: var(--sky-soft); }
.card3d__img img { width: 100%; height: 100%; object-fit: cover; }
.card3d__chip { position: absolute; top: 28px; left: 28px; z-index: 2; padding: 5px 12px; border-radius: var(--r-pill); background: var(--white); color: var(--pink); font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; box-shadow: 0 10px 22px -12px rgba(11, 53, 85, .5); }
.card3d h3 { font-family: var(--f-display); text-transform: uppercase; font-size: 1.3rem; line-height: 1.05; padding: 0 6px; }
.card3d p { color: var(--muted); font-size: .94rem; margin: 0; padding: 0 6px; flex: 1; }
.card3d__link { align-self: flex-start; margin: 6px 6px 0; padding: 8px 16px; border-radius: var(--r-pill); background: var(--ink); color: var(--white); font-size: .8rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; transition: background-color var(--t-fast) var(--ease); }
.card3d__link:hover { background: var(--pink); }
.card3d__link span { display: inline-block; transition: transform 360ms var(--spring); }
.card3d__link:hover span { transform: translateX(4px); }

/* ── 03 · Propósito ───────────────────────────────── */
.purpose { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 16px; }
.purpose__panel { position: relative; padding: clamp(28px, 4vw, 48px); padding-top: clamp(64px, 6vw, 88px); border-radius: var(--r-xl); background: var(--blue); color: var(--white); box-shadow: var(--sh-panel); min-height: 340px; display: flex; flex-direction: column; justify-content: flex-end; }
.purpose__text { font-size: clamp(1.15rem, 1.9vw, 1.45rem); line-height: 1.45; margin: 0; position: relative; }
/* Lazo rosa anclado al borde superior, completo y visible (igual que en el hero) */
.lazo--panel { width: 70px; top: -34px; right: 40px; transform: rotate(180deg); animation: lazo-sway 7s ease-in-out infinite; filter: drop-shadow(0 10px 14px rgba(11, 53, 85, .25)); }
.profiles { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.profile { padding: 24px; border-radius: var(--r-m); background: rgba(255, 255, 255, .9); border: 1px solid var(--line); transition: transform 480ms var(--spring), box-shadow var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
.profile:hover { transform: translateY(-5px); box-shadow: var(--sh-card); border-color: var(--line-strong); }
.profile__n { display: inline-grid; place-items: center; width: 40px; height: 28px; border-radius: var(--r-s) var(--r-pill) var(--r-pill) var(--r-s); background: var(--pink-soft); color: var(--pink); font-weight: 700; font-size: .8rem; margin-bottom: 14px; }
.profile h3 { font-family: var(--f-display); font-size: 1.05rem; text-transform: uppercase; line-height: 1.15; margin-bottom: 8px; }
.profile p { margin: 0; color: var(--muted); font-size: .95rem; }

/* ── 04 · Módulos (acordeón) ──────────────────────── */
.modules { display: grid; gap: 12px; }
.module { border-radius: var(--r-l); background: rgba(255, 255, 255, .94); border: 1px solid var(--line); overflow: hidden; transition: border-color var(--t-fast) var(--ease), box-shadow 500ms var(--ease), transform 480ms var(--spring); }
.module:hover { transform: translateY(-2px); }
.module.is-open { border-color: transparent; box-shadow: var(--sh-panel); }
.module__h { font: inherit; }
.module__head { width: 100%; display: grid; grid-template-columns: 64px minmax(0, 1fr) auto 44px; align-items: center; gap: 16px; padding: 18px 18px 18px 26px; background: transparent; border: 0; text-align: left; cursor: pointer; transition: background-color 420ms var(--ease), color 420ms var(--ease); }
.module__head:hover { background: var(--sky-soft); }
.module.is-open .module__head { background: var(--blue); color: var(--white); }
.module__n { font-family: var(--f-display); font-weight: 700; font-size: 1.6rem; color: var(--pink); transition: color 420ms var(--ease); }
.module.is-open .module__n { color: var(--sky); }
.module__title { font-family: var(--f-display); font-weight: 700; font-size: clamp(1.05rem, 2.2vw, 1.6rem); text-transform: uppercase; line-height: 1.1; }
.module__hours { padding: 4px 14px; border-radius: var(--r-pill); border: 1px solid var(--line-strong); font-weight: 600; font-size: .85rem; white-space: nowrap; }
.module.is-open .module__hours { border-color: rgba(255, 255, 255, .5); }
.module__icon { position: relative; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-strong); justify-self: end; flex: none; transition: transform 520ms var(--spring), background-color 320ms var(--ease); }
.module__icon::before, .module__icon::after { content: ''; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; background: currentColor; border-radius: 2px; transform: translate(-50%, -50%); }
.module__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.module.is-open .module__icon { border-color: rgba(255, 255, 255, .5); transform: rotate(135deg); }
.module__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 620ms var(--ease-smooth); }
.module__panel > .module__inner { overflow: hidden; min-height: 0; }
.module.is-open .module__panel { grid-template-rows: 1fr; }
.module .module__inner { display: grid; grid-template-columns: 1.3fr 1fr .9fr; gap: 28px; padding: 0 26px; opacity: 0; transform: translateY(-8px); transition: opacity 400ms var(--ease), transform 500ms var(--ease), padding 620ms var(--ease-smooth); }
.module.is-open .module__inner { padding: 26px 26px 30px; opacity: 1; transform: none; transition-delay: 120ms; }
.module__col p:last-child { margin-bottom: 0; }
.sessions, .seminars { padding-left: 1.3em; display: grid; gap: 8px; font-size: .95rem; }
.sessions li::marker { color: var(--pink); font-weight: 700; }
.seminars li::marker { color: var(--blue); }
.module__evidence { padding: 18px 20px; border-radius: var(--r-s) var(--r-m) var(--r-s) var(--r-m); background: rgba(169, 194, 217, .24); align-self: start; }
.module__evidence p:not(.micro) { font-weight: 500; }

/* ── 05 · Hoja de ruta animada ────────────────────── */
.rail { margin: 0 0 32px; padding: clamp(22px, 3vw, 32px); border-radius: var(--r-xl); background: rgba(255, 255, 255, .92); border: 1px solid var(--line); box-shadow: var(--sh-card); }
.rail__track { list-style: none; position: relative; display: flex; gap: 6px; }
.rail__track > li { flex: var(--w) 1 0; min-width: 0; transition: flex-grow 900ms var(--ease); }
.rail.is-js .rail__track > li.is-active { flex-grow: calc(var(--w) + 2.4); }
.rail__seg {
  --c: var(--ink);
  position: relative; overflow: hidden; width: 100%; min-height: 72px; padding: 10px 12px;
  display: flex; align-items: flex-end; border: 0; border-radius: var(--r-s) var(--r-m) var(--r-s) var(--r-m);
  background: var(--c); color: var(--white); font-size: .82rem; font-weight: 600; line-height: 1.2; text-align: left; cursor: pointer;
  transition: transform 640ms var(--spring), box-shadow 500ms var(--ease), filter 500ms var(--ease);
}
.rail__seg--0 { --c: var(--pink); }
.rail__seg--1 { --c: var(--ink); }
.rail__seg--2 { --c: var(--navy); }
.rail__seg--3 { --c: var(--blue); }
.rail__seg--4 { --c: var(--azufre); }
.rail__seg--5 { --c: #6F8AA3; }
.rail__label { position: relative; z-index: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rail__seg--0 .rail__label { writing-mode: vertical-rl; transform: rotate(180deg); font-size: .72rem; }
.rail.is-js li.is-active .rail__seg--0 .rail__label { writing-mode: horizontal-tb; transform: none; font-size: .82rem; }
/* Flujo: un brillo recorre la etapa activa */
.rail__seg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .38) 50%, transparent 80%); transform: translateX(-110%); }
.rail.is-js li.is-active .rail__seg { transform: translateY(-8px); box-shadow: 0 22px 34px -18px var(--c); }
.rail.is-js li.is-active .rail__seg::after { animation: seg-shine 1.8s var(--ease-smooth) infinite; }
.rail.is-js li:not(.is-active) .rail__seg { filter: saturate(.75) brightness(1.05); }
.rail__seg:hover { transform: translateY(-4px); }
@keyframes seg-shine { to { transform: translateX(110%); } }
.rail__line { position: relative; height: 4px; margin: 18px 4px 0; border-radius: var(--r-pill); background: rgba(47, 111, 159, .14); }
.rail__fill { position: absolute; left: 0; top: 0; bottom: 0; width: var(--p, 2%); border-radius: inherit; background: linear-gradient(90deg, var(--pink), var(--blue)); transition: width 900ms var(--ease); }
.rail__cursor { position: absolute; top: 50%; left: var(--p, 2%); width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: var(--white); border: 4px solid var(--pink); box-shadow: 0 0 0 6px rgba(196, 42, 120, .16); transition: left 900ms var(--spring); }
.rail__cursor::after { content: ''; position: absolute; inset: -10px; border-radius: 50%; border: 2px solid rgba(196, 42, 120, .4); animation: cursor-ping 1.6s var(--ease) infinite; }
@keyframes cursor-ping { from { transform: scale(.6); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
.rail__months { display: grid; grid-template-columns: repeat(6, 1fr); margin-top: 12px; font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.rail__months span { border-left: 1px solid var(--line-strong); padding-left: 8px; }
.rail__detail { position: relative; display: grid; grid-template-columns: minmax(0, 1.4fr) auto minmax(0, 1fr); gap: 20px 32px; align-items: center; margin-top: 22px; padding: 22px 70px 22px 24px; border-radius: var(--r-l); background: var(--sky-soft); }
.rail__detail [data-r] { transition: opacity 320ms var(--ease), transform 420ms var(--ease), filter 320ms var(--ease); }
.rail__detail.is-swapping [data-r] { opacity: 0; transform: translateY(8px); }
.rail__detail-main .micro { margin-bottom: 4px; color: var(--pink); }
.rail__detail-title { font-family: var(--f-display); font-weight: 700; text-transform: uppercase; font-size: clamp(1.2rem, 2.2vw, 1.6rem); line-height: 1.1; margin-bottom: 6px; }
.rail__detail-text { margin: 0; color: var(--muted); font-size: .94rem; }
.rail__stats { display: flex; gap: 10px; margin: 0; }
.rail__stats div { min-width: 74px; padding: 10px 12px; border-radius: var(--r-m); background: var(--white); text-align: center; }
.rail__stats dt { font-size: .7rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.rail__stats dd { margin: 0; font-family: var(--f-display); font-weight: 700; font-size: 1.6rem; line-height: 1.1; color: var(--ink); }
.rail__product { display: grid; gap: 2px; margin: 0; font-weight: 500; font-size: .94rem; }
.rail__product .micro { margin: 0; }
.rail__play { position: absolute; top: 50%; right: 18px; translate: 0 -50%; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--white); cursor: pointer; display: grid; place-items: center; transition: transform 420ms var(--spring), background-color var(--t-fast) var(--ease); }
.rail__play:hover { transform: scale(1.08); }
.rail__play-icon { width: 12px; height: 14px; border-left: 4px solid var(--ink); border-right: 4px solid var(--ink); }
.rail__play[aria-pressed="false"] .rail__play-icon { width: 0; height: 0; border-style: solid; border-width: 7px 0 7px 12px; border-color: transparent transparent transparent var(--ink); margin-left: 3px; }

.schedule { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 16px; }
.schedule__day { font-family: var(--f-display); font-weight: 700; text-transform: uppercase; font-size: 1.4rem; line-height: 1.1; margin-bottom: 4px; }
.schedule__time { font-size: 1.25rem; font-weight: 600; color: var(--pink); margin-bottom: 10px; }
.schedule__card p:last-child { margin: 0; }
.hours { display: flex; align-items: center; gap: 24px; }
.donut { --a: 26.67%; --b: 36.67%; --c: 90%; flex: none; width: 150px; height: 150px; border-radius: 50%; position: relative; background: conic-gradient(var(--ink) 0 var(--a), var(--blue) var(--a) var(--b), var(--sky) var(--b) var(--c), var(--pink) var(--c) 100%); transition: transform 700ms var(--spring); }
.hours:hover .donut { transform: rotate(18deg) scale(1.04); }
.donut::after { content: ''; position: absolute; inset: 22px; border-radius: 50%; background: var(--white); }
.donut__center { position: absolute; inset: 0; z-index: 1; display: grid; place-content: center; text-align: center; font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.donut__center strong { display: block; font-family: var(--f-display); font-size: 1.5rem; letter-spacing: 0; color: var(--ink); line-height: 1; }
.legend { list-style: none; display: grid; gap: 10px; font-size: .92rem; }
.legend li { display: flex; align-items: center; gap: 10px; }
.legend strong { min-width: 3.2em; }
.sw { width: 14px; height: 14px; border-radius: 4px; flex: none; }
.sw--ink { background: var(--ink); } .sw--blue { background: var(--blue); } .sw--sky { background: var(--sky); } .sw--pink { background: var(--pink); }

/* ── 06 · Metodología ─────────────────────────────── */
.method { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 24px; align-items: stretch; }
.steps { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.step { padding: 24px; border-radius: var(--r-m); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); transition: transform 480ms var(--spring), background-color var(--t-fast) var(--ease); }
.step:hover { transform: translateY(-4px); background: rgba(255, 255, 255, .1); }
.step__n { display: block; font-family: var(--f-display); font-weight: 700; color: var(--sky); margin-bottom: 12px; }
.step h3 { font-family: var(--f-display); text-transform: uppercase; font-size: 1.3rem; margin-bottom: 8px; }
.step p { margin: 0; color: rgba(255, 255, 255, .8); }
.method__photo { margin: 0; border-radius: var(--r-xl); overflow: hidden; min-height: 320px; }
.method__photo img { width: 100%; height: 100%; object-fit: cover; }
.eval { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 24px; }
.eval > div { padding: 28px; border-radius: var(--r-l); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); }
.bars { list-style: none; display: grid; gap: 14px; }
.bars li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) 3.2em; align-items: center; gap: 14px; font-size: .92rem; }
.bars__track { height: 10px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .12); overflow: hidden; }
.bars__track span { display: block; height: 100%; width: 0; max-width: 100%; border-radius: inherit; background: var(--pink); transition: width 1.2s var(--ease); }
.bars.is-in .bars__track span { width: calc(var(--v) * 2.4); }
.bars strong { text-align: right; }

/* ── 07 · Equipo ──────────────────────────────────── */
.team { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.person { position: relative; padding: 26px; border-radius: var(--r-m); background: rgba(255, 255, 255, .92); border: 1px solid var(--line); transition: transform 480ms var(--spring), box-shadow var(--t-fast) var(--ease); }
.person:hover { transform: translateY(-5px); box-shadow: var(--sh-card); }
.person__avatar { display: grid; place-items: center; width: 72px; height: 72px; margin-bottom: 18px; border-radius: 50%; border: 2px solid var(--blue); outline: 2px solid var(--sky); outline-offset: 4px; font-family: var(--f-display); font-weight: 700; font-size: 1.2rem; color: var(--blue); background: var(--white); transition: outline-offset 480ms var(--spring); }
.person:hover .person__avatar { outline-offset: 8px; }
.person h3 { font-family: var(--f-display); text-transform: uppercase; font-size: 1.05rem; line-height: 1.15; margin-bottom: 4px; }
.person p { color: var(--muted); font-size: .95rem; margin-bottom: 14px; }
.tag { display: inline-block; padding: 3px 12px; border-radius: var(--r-pill); background: rgba(47, 111, 159, .1); color: var(--blue); font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }

/* ── 08 · Alianza ─────────────────────────────────── */
.ally { position: relative; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 72px); align-items: center; padding: clamp(32px, 5vw, 72px); border-radius: var(--r-panel); background: radial-gradient(80% 90% at 0% 100%, rgba(169, 194, 217, .35), transparent 60%), var(--blue); color: var(--white); box-shadow: var(--sh-panel); }
.ally .display { color: var(--white); }
.ally .display .outline { color: var(--white); }
.ally__logos { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: clamp(28px, 4vw, 44px); border-radius: var(--r-l); background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .2); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.ally__logo { display: block; height: auto; transition: transform 600ms var(--spring); }
.ally__logo:hover { transform: translateY(-4px) scale(1.03); }
.ally__logo--fmsjs { width: min(100%, 280px); }
.ally__logo--uny { width: min(100%, 300px); }
.ally__plus { font-family: var(--f-display); font-size: 2.2rem; line-height: 1; font-weight: 700; color: var(--sky); animation: plus-beat 2.4s var(--ease-smooth) infinite; }
@keyframes plus-beat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }
.ally .h2 { font-size: clamp(1.8rem, 3.6vw, 3rem); }
.ally__lead { font-size: 1.08rem; color: rgba(255, 255, 255, .88); max-width: 60ch; }
.ally__points { list-style: none; display: grid; gap: 10px; margin-top: 18px; }
.ally__points li { display: grid; gap: 2px; padding: 14px 18px; border-radius: var(--r-m); background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); transition: transform 480ms var(--spring), background-color var(--t-fast) var(--ease); }
.ally__points li:hover { transform: translateX(6px); background: rgba(255, 255, 255, .16); }
.ally__points strong { font-family: var(--f-display); text-transform: uppercase; font-size: .95rem; }
.ally__points span { color: rgba(255, 255, 255, .8); font-size: .92rem; }
.ally__copy .eyebrow .dot { background: var(--sky); }
.lazo--ally { width: 64px; bottom: -30px; left: 14%; }

/* ── 09 · Certificado que se compone con el scroll ── */
.reveal-cert { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.reveal-cert__steps { list-style: none; display: grid; gap: 0; }
.cert-step { min-height: 62vh; display: flex; flex-direction: column; justify-content: center; padding: 24px 0; opacity: .35; transition: opacity 600ms var(--ease), transform 600ms var(--ease); transform: translateX(-6px); }
.cert-step.is-active { opacity: 1; transform: none; }
.cert-step:first-child { min-height: 46vh; justify-content: flex-start; }
.cert-step__n { font-family: var(--f-display); font-weight: 700; color: var(--pink); font-size: 1rem; margin-bottom: 8px; }
.cert-step h3 { font-family: var(--f-display); text-transform: uppercase; font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1; margin-bottom: 12px; }
.cert-step p { max-width: 46ch; color: var(--muted); font-size: 1.05rem; }
.notice { padding: 14px 18px; border-radius: var(--r-m); background: var(--pink-soft); color: var(--ink) !important; font-size: .95rem !important; }
.reveal-cert__sticky { position: sticky; top: 120px; padding-bottom: 40px; }
.cert {
  --tint: rgba(169, 194, 217, .22);
  position: relative; aspect-ratio: 1.414 / 1; padding: clamp(22px, 3.4vw, 42px); border-radius: var(--r-l);
  background: linear-gradient(140deg, var(--tint), transparent 55%), var(--white);
  box-shadow: var(--sh-panel); display: flex; flex-direction: column; overflow: hidden;
  transition: background-color 700ms var(--ease), transform 900ms var(--spring);
}
.cert[data-step="2"] { --tint: rgba(156, 224, 184, .26); }
.cert[data-step="3"] { --tint: rgba(120, 138, 156, .16); }
.cert[data-step="4"] { --tint: rgba(47, 111, 159, .16); transform: rotate(-1.2deg); }
.cert__frame { position: absolute; inset: 12px; border: 1.5px solid rgba(47, 111, 159, .32); border-radius: 22px; pointer-events: none; clip-path: inset(0 100% 100% 0 round 22px); transition: clip-path 1.2s var(--ease); }
.cert.is-in .cert__frame { clip-path: inset(0 0 0 0 round 22px); }
.cert__part { opacity: 0; transform: translateY(14px); transition: opacity 600ms var(--ease), transform 700ms var(--spring); }
.cert[data-step="1"] .cert__part[data-from="1"],
.cert[data-step="2"] .cert__part:is([data-from="1"], [data-from="2"]),
.cert[data-step="3"] .cert__part:is([data-from="1"], [data-from="2"], [data-from="3"]),
.cert[data-step="4"] .cert__part { opacity: 1; transform: none; filter: none; }
.cert__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: auto; padding-bottom: 12px; }
.cert__top img { height: clamp(34px, 4vw, 52px); width: auto; }
.cert__partner { height: clamp(34px, 4.2vw, 54px); width: auto; padding-left: 14px; border-left: 2px solid var(--line-strong); }
.cert__kicker { font-size: .7rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--pink); margin-bottom: 6px; }
.cert__body { font-family: var(--f-display); font-weight: 700; text-transform: uppercase; font-size: clamp(.82rem, 1.4vw, 1.08rem); line-height: 1.15; color: var(--ink); margin-bottom: 6px; max-width: 30ch; }
.cert__hours { color: var(--muted); font-size: clamp(.72rem, 1vw, .85rem); margin-bottom: 14px; }
.cert__label { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0; }
.cert__name { min-height: 1.3em; margin: 0 0 12px; font-family: var(--f-display); font-weight: 700; font-size: clamp(1.2rem, 2.6vw, 2rem); color: var(--ink); border-bottom: 1px solid var(--line-strong); }
.cert__caret { display: inline-block; width: 2px; height: .9em; margin-left: 3px; background: var(--pink); vertical-align: -.08em; opacity: 0; }
.cert[data-step="4"] .cert__caret { animation: caret 900ms steps(1) infinite; }
@keyframes caret { 50% { opacity: 1; } }
.cert__signs { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; max-width: 78%; }
.cert__sign { display: grid; gap: 2px; }
.cert__sign span { border-top: 1px solid var(--line-strong); padding-top: 4px; font-size: clamp(.58rem, .9vw, .72rem); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.cert__sig { width: 100%; height: auto; max-height: 52px; }
.cert__sig path { fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 520; stroke-dashoffset: 520; transition: stroke-dashoffset 2.2s var(--ease-smooth) .9s; }
.cert__sig path + path { stroke-width: 1.4; stroke: var(--blue); transition-delay: 2.6s; transition-duration: 1s; }
.cert__sig--b path { transition-delay: 1.6s; }
.cert__sig--b path + path { transition-delay: 3.1s; }
.cert[data-step="4"] .cert__sig path { stroke-dashoffset: 0; }
.cert__seal { position: absolute; right: clamp(20px, 3vw, 36px); bottom: clamp(44px, 6vw, 64px); width: clamp(58px, 7vw, 84px); aspect-ratio: 1; border-radius: 50%; background: var(--pink); display: grid; place-items: center; box-shadow: var(--sh-card); }
.cert[data-step="3"] .cert__seal, .cert[data-step="4"] .cert__seal { animation: seal-pop 900ms var(--spring); }
@keyframes seal-pop { from { transform: scale(.2) rotate(-40deg); } }
.cert__seal img { width: 56%; }
.cert__code { position: absolute; left: clamp(22px, 3.4vw, 42px); bottom: clamp(16px, 2vw, 24px); margin: 0; font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.allies { display: grid; gap: 10px; margin-top: 24px; }

/* ── 10 · Voces: galería en movimiento + tarjeta trasera con rebote ── */
.section--voices { overflow: hidden; }
.voices { position: relative; padding: 120px 0 96px; margin-bottom: -56px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.voices__track { list-style: none; display: flex; gap: 22px; width: max-content; padding: 0 22px; animation: marquee var(--marquee-dur, 60s) linear infinite; }
.voices:hover .voices__track, .voices:focus-within .voices__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.voice { position: relative; width: clamp(280px, 26vw, 360px); flex: none; outline: none; }
.voice__card { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; height: 100%; min-height: 250px; padding: 28px; border-radius: var(--r-l); background: var(--white); border: 1px solid var(--line); box-shadow: 0 10px 30px -22px rgba(11, 53, 85, .5); transition: transform 600ms var(--spring), box-shadow 400ms var(--ease), border-color 300ms var(--ease); }
.voice:nth-child(3n + 1) .voice__card { border-radius: var(--r-s) var(--r-l) var(--r-l) var(--r-l); }
.voice blockquote { margin: 0; font-size: 1.06rem; line-height: 1.5; color: var(--ink); }
.voice__who { display: flex; align-items: center; gap: 12px; margin: 0; font-size: .85rem; color: var(--muted); }
.voice__who strong { display: block; color: var(--ink); font-size: .95rem; }
.voice__avatar { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid var(--pink); color: var(--pink); font-family: var(--f-display); font-weight: 700; transition: background-color 300ms var(--ease), color 300ms var(--ease); }
.voice__back {
  position: absolute; z-index: 1; inset: 0; display: flex; flex-direction: column; justify-content: flex-start; gap: 4px;
  padding: 20px 24px; border-radius: var(--r-l); background: var(--ink); color: var(--white);
  transform: translate(0, 0) rotate(0deg) scale(.94); opacity: 0;
  transition: transform 700ms var(--spring), opacity 260ms var(--ease);
}
.voice__back .micro { color: var(--sky); margin: 0; }
.voice__back p { margin: 0; font-size: .92rem; line-height: 1.4; }
.voice__back .voice__meta { margin-top: 4px; font-size: .78rem; color: var(--sky); font-weight: 600; letter-spacing: .04em; }
.voice:is(:hover, :focus-visible) .voice__card { transform: translateY(14px) scale(1.02); border-color: var(--line-strong); box-shadow: 0 34px 50px -30px rgba(11, 53, 85, .6); }
.voice:is(:hover, :focus-visible) .voice__back { transform: translate(18px, -96px) rotate(3deg) scale(1); opacity: 1; }
.voice:is(:hover, :focus-visible) .voice__avatar { background: var(--pink); color: var(--white); }
.voice:focus-visible .voice__card { outline: 3px solid var(--pink); outline-offset: 4px; }

/* ── 11 · Inversión ───────────────────────────────── */
.prices { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 16px; }
.price { position: relative; padding: 30px; border-radius: var(--r-l); background: var(--white); border: 1px solid var(--line); transition: transform 520ms var(--spring), box-shadow 400ms var(--ease); }
.price:hover { transform: translateY(-6px); box-shadow: var(--sh-card); }
.price h3 { font-size: 1rem; font-weight: 600; margin-bottom: 18px; color: var(--muted); }
.price__amount { font-family: var(--f-display); font-weight: 700; font-size: clamp(2.6rem, 4.4vw, 3.6rem); line-height: 1; color: var(--ink); margin-bottom: 10px; }
.price__amount span { font-size: .4em; vertical-align: .9em; margin-right: 4px; color: var(--blue); }
.price .muted { margin: 0; }
.price--featured { border: 2px solid var(--pink); background: linear-gradient(160deg, var(--pink-soft), var(--white) 55%); box-shadow: var(--sh-card); }
.price__badge { position: absolute; top: -14px; left: 24px; padding: 4px 14px; border-radius: var(--r-pill); background: var(--pink); color: var(--white); font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; animation: levitate 2.8s ease-in-out infinite; box-shadow: 0 12px 22px -14px rgba(217, 47, 134, .9); }
.pay { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.pay__card { padding: 26px; border-radius: var(--r-l); background: var(--sky-soft); border: 1px solid rgba(169, 194, 217, .6); transition: transform 480ms var(--spring); }
.pay__card:hover { transform: translateY(-4px); }
.pay__card p { margin: 0; color: var(--muted); }

/* ── 12 · FAQ (despliegue suave) ──────────────────── */
.faq-wrap { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.faq-wrap__head { position: sticky; top: 120px; }
.faq-wrap__head .section__intro { margin-bottom: 24px; }
.faq-wrap .h2 { font-size: clamp(1.8rem, 3.1vw, 2.75rem); }
.faq { display: grid; gap: 12px; }
.faq__item { border-radius: var(--r-m); background: rgba(255, 255, 255, .92); border: 1px solid var(--line); transition: background-color 500ms var(--ease), border-color 500ms var(--ease), box-shadow 600ms var(--ease), transform 500ms var(--spring); }
.faq__item:hover { border-color: var(--line-strong); }
.faq__item.is-open { background: var(--white); border-color: rgba(47, 111, 159, .38); box-shadow: var(--sh-card); transform: translateY(-2px); }
.faq__item h3 { font: inherit; }
.faq__q { width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 18px 18px 18px 22px; background: none; border: 0; cursor: pointer; text-align: left; color: var(--ink); }
.faq__n { font-family: var(--f-display); font-weight: 700; font-size: .85rem; color: var(--blue); transition: color 400ms var(--ease); }
.faq__text { font-weight: 600; font-size: 1.05rem; transition: transform 500ms var(--spring), color 400ms var(--ease); }
.faq__q:hover .faq__text { transform: translateX(4px); }
.faq__item.is-open .faq__n, .faq__item.is-open .faq__text { color: var(--pink); }
.faq__icon { position: relative; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line-strong); transition: transform 650ms var(--spring), background-color 450ms var(--ease), border-color 450ms var(--ease); }
.faq__icon::before, .faq__icon::after { content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; border-radius: 2px; background: var(--ink); transform: translate(-50%, -50%); transition: background-color 450ms var(--ease); }
.faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq__item.is-open .faq__icon { transform: rotate(135deg); background: var(--pink); border-color: var(--pink); }
.faq__item.is-open .faq__icon::before, .faq__item.is-open .faq__icon::after { background: var(--white); }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 700ms var(--ease-smooth); }
.faq__inner { overflow: hidden; min-height: 0; }
.faq__inner p { margin: 0; padding: 0 22px 0 calc(22px + 2.2em); color: var(--muted); opacity: 0; transform: translateY(-10px); transition: opacity 450ms var(--ease), transform 600ms var(--ease), padding 700ms var(--ease-smooth); }
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__item.is-open .faq__inner p { padding-bottom: 22px; opacity: 1; transform: none; transition-delay: 150ms; }

/* ── 13 · Preinscripción + footer sobre la nebulosa ── */
.finale { position: relative; isolation: isolate; overflow: hidden; padding-bottom: 16px; }
.nebula { position: absolute; inset: 0; z-index: -1; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%); mask-image: linear-gradient(to bottom, transparent, #000 22%); opacity: 0; transform: scale(1.5); transition: opacity 2s cubic-bezier(.25, .1, .25, 1), transform 2s cubic-bezier(.25, .1, .25, 1); }
.nebula.is-on { opacity: 1; transform: scale(1); }
.section--reg { padding-bottom: clamp(56px, 8vw, 96px); }
.reg { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.reg .h2 { font-size: clamp(2rem, 4.2vw, 3.4rem); }
.reg__copy p { color: #23435E; font-size: 1.05rem; }
.reg__contact { list-style: none; display: grid; gap: 10px; margin-top: 28px; }
.reg__contact a { display: inline-flex; align-items: center; min-height: 48px; padding: 8px 20px; border-radius: var(--r-pill); border: 1px solid var(--line-strong); background: rgba(255, 255, 255, .7); text-decoration: none; font-weight: 500; transition: background-color var(--t-fast) var(--ease), transform 420ms var(--spring); }
.reg__contact a:hover { background: var(--white); transform: translateX(4px); }

.form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 14px; padding: clamp(22px, 3vw, 36px); border-radius: var(--r-xl); background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--ink); box-shadow: 0 30px 70px -30px rgba(11, 53, 85, .55); }
.field { grid-column: 1 / -1; display: grid; gap: 6px; }
.field--half { grid-column: span 1; }
.field label { font-size: .88rem; font-weight: 600; }
.hint { font-weight: 400; color: var(--muted); font-size: .8rem; }
.field input, .field select, .field textarea { width: 100%; min-height: 50px; padding: 12px 16px; border-radius: var(--r-s); border: 1.5px solid var(--line-strong); background: var(--paper); color: var(--ink); font: inherit; font-size: 1rem; transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }
.field textarea { resize: vertical; min-height: 92px; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--blue); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: none; border-color: var(--pink); background: var(--white); box-shadow: 0 0 0 4px rgba(196, 42, 120, .18); }
.field.has-error input, .field.has-error select { border-color: var(--pink); background: #FDF3F8; }
.field__error { margin: 0; font-size: .82rem; color: var(--pink-solid); font-weight: 500; }
.field__error:empty { display: none; }
.field--check { grid-template-columns: 24px 1fr; align-items: start; column-gap: 12px; }
.field--check input { width: 22px; height: 22px; min-height: 0; margin: 2px 0 0; accent-color: var(--pink); }
.field--check label { font-weight: 400; font-size: .9rem; }
.field--check .field__error { grid-column: 2; }
.field--hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__submit { grid-column: 1 / -1; width: 100%; }
.form__status { grid-column: 1 / -1; }
.form__status:empty { display: none; }
.status { padding: 16px 18px; border-radius: var(--r-m); font-size: .95rem; animation: status-in 600ms var(--spring); }
@keyframes status-in { from { transform: translateY(10px) scale(.98); opacity: 0; } }
.status p { margin: 0 0 8px; }
.status p:last-child { margin: 0; }
.status--ok { background: rgba(31, 123, 87, .1); border: 1px solid rgba(31, 123, 87, .35); color: #15573D; }
.status--warn { background: var(--sky-soft); border: 1px solid rgba(169, 194, 217, .9); color: var(--ink); }
.status a { font-weight: 600; }

.footer { position: relative; padding: 0 var(--gutter); }
.footer__panel { max-width: calc(var(--wrap) + 80px); margin: 0 auto; padding: clamp(32px, 5vw, 56px); border-radius: var(--r-panel); background: rgba(11, 53, 85, .78); -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2); border: 1px solid rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .85); box-shadow: 0 30px 80px -40px rgba(11, 53, 85, .9); }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; padding-bottom: 28px; }
.footer__brand { display: flex; align-items: center; gap: 24px; }
.footer__brand img { width: clamp(120px, 12vw, 160px); height: auto; flex: none; }
.footer__brand p { margin: 0 0 6px; }
.footer__list { list-style: none; display: grid; gap: 8px; }
.footer__list a { text-decoration: none; transition: color var(--t-fast) var(--ease); }
.footer__list a:hover { color: var(--sky); }
.privacy { border-top: 1px solid rgba(255, 255, 255, .14); padding-top: 18px; margin-bottom: 18px; font-size: .88rem; }
.privacy summary { cursor: pointer; font-weight: 600; color: var(--white); }
.privacy p { margin-top: 10px; max-width: 80ch; }
.footer__legal { font-size: .8rem; color: rgba(255, 255, 255, .6); margin: 0; }

/* ── Dock móvil (Campus Free) ─────────────────────── */
.dock { display: none; }

/* Aparición al hacer scroll */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity var(--t-scene) var(--ease-in), transform var(--t-scene) var(--ease-in); }
.reveal.is-visible { opacity: 1; transform: none; }


/* ── Ajustes v3 ───────────────────────────────────── */
mark { background: none; color: inherit; }
.lt { font-family: var(--f-ui); font-weight: 300; letter-spacing: -.01em; }

/* Botones de inscripción que levitan */
.btn--levitate { animation: btn-float 3.2s ease-in-out infinite; }
.btn--levitate:hover { animation-play-state: paused; }
@keyframes btn-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }

/* Enviar: solo la palabra, letras abiertas con ola al pasar el cursor */
.form__submit { display: grid; grid-template-columns: 40px minmax(0, 1fr) 40px; justify-items: center; padding: 7px 8px; }
.form__submit .btn__arrow { grid-column: 3; }
.btn__label--send { grid-column: 2; gap: 0; font-family: var(--f-ui); font-size: 1rem; font-weight: 600; letter-spacing: .5em; margin-right: -.5em; }
.btn__label--send i { display: inline-block; font-style: normal; }
.form__submit:hover .btn__label--send i { animation: letter-wave 700ms var(--spring) calc(var(--i) * 55ms) both; }
@keyframes letter-wave { 0% { transform: translateY(0); } 40% { transform: translateY(-7px); } 100% { transform: translateY(0); } }

/* Intros más grandes con palabras subrayadas */
.section__intro { font-size: clamp(1.06rem, 1.45vw, 1.22rem); line-height: 1.55; }
.section__intro--big { max-width: 32ch; font-size: clamp(1.3rem, 2.3vw, 1.85rem); line-height: 1.35; font-weight: 300; color: var(--ink); letter-spacing: -.01em; }
.hl { position: relative; z-index: 0; padding: 0 .06em; font-weight: 600; color: var(--ink); white-space: nowrap; }
.hl__pen { position: absolute; z-index: -1; left: -.12em; right: -.12em; bottom: -.26em; width: calc(100% + .24em); height: .5em; overflow: visible; pointer-events: none; }
.hl__pen path { fill: none; stroke: var(--pink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s cubic-bezier(.45, .05, .25, 1) .1s; }
.hl__pen path + path { stroke-width: 1.2; opacity: .55; transition-delay: .65s; transition-duration: .8s; }
.is-inview .hl__pen path, .hl.is-drawn .hl__pen path { stroke-dashoffset: 0; }
.hl--ring { color: var(--pink); }
.hl--ring::after { content: ''; position: absolute; z-index: -1; inset: -.1em -.34em -.06em; border: 1.5px solid currentColor; border-radius: var(--r-pill); clip-path: inset(0 100% 0 0 round 999px); transition: clip-path 1.1s var(--ease) .2s; }
.is-inview .hl--ring::after, .hl--ring.is-drawn::after { clip-path: inset(0 0 0 0 round 999px); }
.section__intro--big .hl { font-weight: 700; }

/* 03 · Propósito que se revela con el scroll */
.purpose__text .w { opacity: .18; transition: opacity 260ms linear; }
.purpose__text .w.is-lit { opacity: 1; }
.purpose__meter { position: relative; height: 4px; margin-top: 22px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .2); overflow: hidden; }
.purpose__meter span { position: absolute; inset: 0; transform-origin: left; transform: scaleX(var(--pm, 1)); border-radius: inherit; background: linear-gradient(90deg, var(--sky), var(--white)); }
.pq .purpose__panel { clip-path: circle(calc(14% + var(--pa, 1) * 130%) at 24% 82%); }
.pq .profile { --rot: -5deg; opacity: var(--pk, 1); transform: translateY(calc((1 - var(--pk, 1)) * 90px)) rotate(calc((1 - var(--pk, 1)) * var(--rot))) scale(calc(.9 + var(--pk, 1) * .1)); transition: box-shadow var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), translate 480ms var(--spring); }
.pq .profile:nth-child(even) { --rot: 6deg; }
.pq .profile:hover { transform: translateY(calc((1 - var(--pk, 1)) * 90px)) rotate(calc((1 - var(--pk, 1)) * var(--rot))) scale(calc(.9 + var(--pk, 1) * .1)); translate: 0 -5px; }
.pq .h2 .outline { clip-path: inset(0 calc((1 - var(--ph, 1)) * 100%) 0 0 round 999px); }
.pq.is-scrolly { height: 270vh; padding: 0; }
.pq.is-scrolly .pq__sticky { position: sticky; top: 0; min-height: 100vh; display: flex; align-items: center; padding: 110px 0 48px; }
.pq.is-scrolly .pq__sticky > .wrap { width: min(var(--wrap), 100% - 2 * var(--gutter)); }

/* ── Ajustes v5 · coherencia con el sistema Campus ── */
:root {
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --mist: #E9EEF2;
}
.hl--ring { margin-inline: .3em; }
/* El énfasis con contorno es una sola frase en un renglón (regla del sistema) */
@media (min-width: 768px) { .display .outline { white-space: nowrap; } }
@media (max-width: 767px) { .display .outline { border-radius: 22px; } }
@media (min-width: 1024px) { .met .section__head { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); } }
.met .h2 { font-size: clamp(2rem, 4.2vw, 3.3rem); }

/* Difuminados de contraste: solo grises y azules, con bordes que se funden */
.section { isolation: isolate; }
:is(#claves, #calendario, #testimonios, #inversion, #faq, #para-quien)::before {
  content: ''; position: absolute; z-index: -1; inset: -120px 0; pointer-events: none;
  background:
    radial-gradient(36% 30% at 8% 42%, rgba(11, 53, 85, .07), transparent 72%),
    radial-gradient(32% 28% at 94% 62%, rgba(120, 138, 156, .12), transparent 72%),
    radial-gradient(40% 26% at 70% 34%, rgba(169, 194, 217, .2), transparent 72%);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
}
:is(#calendario, #inversion, #para-quien)::before {
  background:
    radial-gradient(36% 30% at 94% 40%, rgba(11, 53, 85, .07), transparent 72%),
    radial-gradient(32% 28% at 6% 64%, rgba(120, 138, 156, .12), transparent 72%),
    radial-gradient(40% 26% at 30% 34%, rgba(169, 194, 217, .18), transparent 72%);
}
#para-quien::before { inset: 0; }

/* Navegación que se contrae hasta el anagrama y se expande al pasar el cursor */
.nav__mark { display: none; }
@media (min-width: 1024px) {
  .nav__pill, .nav.is-scrolled .nav__pill {
    max-width: none; width: min(var(--wrap), 100%); height: 62px;
    margin-left: max(0px, calc((100% - var(--wrap)) / 2)); margin-right: auto;
    overflow: clip; overflow-clip-margin: 14px;
    transition: width 820ms var(--ease), padding 620ms var(--ease), height 520ms var(--ease), box-shadow 420ms var(--ease), background-color 420ms var(--ease), border-color 420ms var(--ease);
  }
  .nav.is-scrolled .nav__pill { height: 58px; }
  .nav__pill > * { flex-shrink: 0; }
  .nav__pill > :not(.nav__brand) { transition: opacity 360ms var(--ease) 200ms; }
  .nav__brand { display: grid; align-items: center; }
  .nav__brand > img { grid-area: 1 / 1; }
  .nav__logo { max-width: 160px; transition: opacity 360ms var(--ease) 160ms, max-width 700ms var(--ease) !important; }
  .nav__mark { display: block; width: 34px; height: auto; opacity: 0; transform: scale(.3) rotate(-120deg); transition: opacity 300ms var(--ease), transform 700ms var(--spring); }
  .nav.is-collapsed .nav__pill { width: 58px; padding: 5px 0 5px 12px; border-color: var(--line-strong); transition-delay: 260ms; animation: nav-breathe 3.6s ease-in-out infinite; }
  .nav.is-collapsed .nav__pill > :not(.nav__brand) { opacity: 0; pointer-events: none; transition: opacity 180ms var(--ease) 120ms; }
  .nav.is-collapsed .nav__logo { opacity: 0; max-width: 0; transition: opacity 160ms var(--ease) 120ms, max-width 600ms var(--ease) 200ms !important; }
  .nav.is-collapsed .nav__mark { opacity: 1; transform: none; transition-delay: 380ms; }
  .nav.is-collapsed .nav__pill:is(:hover, :focus-within) { width: min(var(--wrap), 100%); padding: 5px 6px 5px 14px; border-color: var(--line); transition-delay: 0s; animation: none; }
  .nav.is-collapsed .nav__pill:is(:hover, :focus-within) > :not(.nav__brand) { opacity: 1; pointer-events: auto; transition-delay: 260ms; }
  .nav.is-collapsed .nav__pill:is(:hover, :focus-within) .nav__logo { opacity: 1; max-width: 160px; transition: opacity 360ms var(--ease) 200ms, max-width 700ms var(--ease) !important; }
  .nav.is-collapsed .nav__pill:is(:hover, :focus-within) .nav__mark { opacity: 0; transform: scale(.3) rotate(120deg); transition-delay: 0s; }
}
@keyframes nav-breathe { 0%, 100% { box-shadow: 0 14px 30px -18px rgba(11, 53, 85, .55), 0 0 0 0 rgba(47, 111, 159, .22); } 50% { box-shadow: 0 14px 30px -18px rgba(11, 53, 85, .55), 0 0 0 8px rgba(47, 111, 159, 0); } }


/* Texto que se escribe solo (opacidad y desplazamiento; sin desenfoque) */
.tw .tw-w { white-space: nowrap; }
.tw .ch { display: inline-block; opacity: 0; transform: translateY(.28em); transition: opacity 520ms var(--ease), transform 640ms var(--ease); }
.tw .ch.on { opacity: 1; transform: none; }
.tw .ch.cur { position: relative; }
.tw .ch.cur::after { content: ''; position: absolute; right: -.12em; top: .12em; bottom: .08em; width: 2px; border-radius: 2px; background: var(--blue); animation: caret 800ms steps(1) infinite; }
.tw.is-done .ch.cur::after { animation: caret 800ms steps(1) 4 forwards; }
.section__intro--light { color: rgba(255, 255, 255, .84); }
.section__intro--light .hl, .section__intro--light .hl--ring { color: var(--white); }
.section__intro--light .hl__pen path { stroke: var(--sky); }

/* Aparición ordenada */
.js-fly [data-fly] { opacity: 0; transform: translate3d(0, 56px, 0); transition: opacity 900ms var(--ease-in), transform 1100ms var(--ease-in); }
.js-fly [data-fly].is-flown { opacity: 1; transform: none; }

/* 06 · Metodología: bento ordenado */
.mbento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-areas: "photo photo live sem" "photo photo prod proj" "eval eval lines lines"; gap: 16px; }
.mb { position: relative; margin: 0; border-radius: var(--r-l); transition-property: opacity, transform, translate, box-shadow, border-color, background-color; }
.mb:nth-child(1) { grid-area: photo; }
.mb:nth-child(2) { grid-area: live; }
.mb:nth-child(3) { grid-area: sem; }
.mb:nth-child(4) { grid-area: prod; }
.mb:nth-child(5) { grid-area: proj; }
.mb:nth-child(6) { grid-area: eval; }
.mb:nth-child(7) { grid-area: lines; }
article.mb { display: flex; flex-direction: column; min-height: 240px; padding: 26px; }
article.mb h3 { margin-top: auto; margin-bottom: 8px; font-family: var(--f-display); text-transform: uppercase; font-size: clamp(1.4rem, 2vw, 1.75rem); line-height: 1; }
article.mb p { margin: 0; font-size: .96rem; }
.mb.is-flown:hover, html:not(.js-fly) .mb:hover { translate: 0 -4px; box-shadow: 0 26px 48px -30px rgba(11, 53, 85, .55); transition: translate 480ms var(--spring), box-shadow 400ms var(--ease), opacity 900ms var(--ease-in), transform 1100ms var(--ease-in); }
.mb__n { align-self: flex-start; justify-self: start; display: inline-grid; place-items: center; min-width: 44px; height: 30px; padding: 0 10px; border-radius: 12px 20px 20px 12px; font-family: var(--f-ui); font-weight: 600; font-size: .85rem; letter-spacing: .04em; background: var(--sky-soft); color: var(--blue); }
.mb--navy { background: linear-gradient(160deg, var(--navy), var(--ink)); color: var(--white); box-shadow: var(--sh-panel); }
.mb--blue { background: linear-gradient(160deg, var(--azufre), var(--blue)); color: var(--white); box-shadow: var(--sh-card); }
.mb--navy p, .mb--blue p { color: rgba(255, 255, 255, .84); }
.mb--navy .mb__n, .mb--blue .mb__n { background: rgba(255, 255, 255, .14); color: var(--white); }
.mb--white { background: rgba(255, 255, 255, .94); border: 1px solid var(--line); color: var(--ink); }
.mb--white p { color: var(--muted); }
.mb--white:hover { border-color: var(--line-strong); background: var(--white); }
.mb--photo { overflow: hidden; min-height: 496px; box-shadow: var(--sh-panel); }
.mb--photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(calc(1.12 - var(--mz, 0) * .1)); transition: transform 200ms linear; }
.mb--photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(11, 53, 85, .78), rgba(11, 53, 85, 0) 55%); }
.mb--photo figcaption { position: absolute; z-index: 1; left: 24px; right: 24px; bottom: 22px; display: grid; gap: 4px; color: var(--white); font-size: .95rem; }
.mb--photo figcaption strong { font-family: var(--f-ui); font-weight: 600; font-size: clamp(1.4rem, 2.2vw, 1.9rem); line-height: 1.1; }
.mb__chip { justify-self: start; margin-bottom: 8px; padding: 6px 14px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .92); color: var(--ink); font-size: .76rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.mb--eval { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); gap: 20px 32px; align-items: center; padding: 28px; background: rgba(255, 255, 255, .94); border: 1px solid var(--line); box-shadow: var(--sh-card); }
.mb--eval .h3 { font-size: clamp(1.3rem, 2vw, 1.6rem); line-height: 1.05; }
.mb--eval .note { margin: 0; }
.ebars { list-style: none; display: grid; gap: 14px; }
.ebars li { display: grid; grid-template-columns: 4.2rem minmax(0, 1fr); grid-template-areas: "pct label" "pct track"; column-gap: 14px; row-gap: 6px; align-items: center; }
.ebars__pct { grid-area: pct; font-family: var(--f-ui); font-weight: 600; font-size: 1.9rem; line-height: 1; color: var(--ink); letter-spacing: -.02em; }
.ebars__label { grid-area: label; font-size: .9rem; color: var(--muted); }
.ebars__track { grid-area: track; height: 8px; border-radius: var(--r-pill); background: rgba(47, 111, 159, .12); overflow: hidden; }
.ebars__track i { display: block; height: 100%; width: calc(var(--v) * 2.4%); border-radius: inherit; background: linear-gradient(90deg, var(--ink), var(--azufre)); transform-origin: left; transform: scaleX(0); transition: transform 1.6s var(--ease) .4s; }
.ebars li:nth-child(2) i { transition-delay: .55s; }
.ebars li:nth-child(3) i { transition-delay: .7s; }
.ebars li:nth-child(4) i { transition-delay: .85s; }
.mb--eval.is-flown .ebars__track i, html:not(.js-fly) .ebars__track i { transform: scaleX(1); }
.mb--lines { padding: 28px; background: radial-gradient(80% 90% at 100% 0%, rgba(89, 128, 166, .55), transparent 60%), linear-gradient(160deg, var(--navy), var(--ink)); color: var(--white); box-shadow: var(--sh-panel); }
.mb--lines .h3 { font-size: clamp(1.3rem, 2vw, 1.6rem); margin-bottom: 4px; }
.mb--lines > p { color: rgba(255, 255, 255, .78); font-size: .94rem; margin-bottom: 16px; }

/* 07 · Equipo: panel oscuro que se abre como un portal, tarjetas con textura */
.portal { padding: clamp(36px, 5vw, 64px) 0; }
.portal__frame {
  position: relative; isolation: isolate; overflow: hidden;
  margin-inline: var(--gutter); padding: clamp(72px, 9vw, 120px) 0 clamp(80px, 9vw, 128px);
  border-radius: var(--r-panel); color: var(--white);
  background: radial-gradient(70% 55% at 88% 0%, rgba(89, 128, 166, .5), transparent 62%), radial-gradient(60% 50% at 0% 100%, rgba(169, 194, 217, .16), transparent 62%), linear-gradient(165deg, #0B3555, #072A45 72%);
  clip-path: inset(calc((1 - var(--pe, 1)) * 12%) calc((1 - var(--pe, 1)) * 20%) round calc(var(--r-panel) + (1 - var(--pe, 1)) * 160px));
  box-shadow: 0 50px 100px -60px rgba(11, 53, 85, .8);
}
.portal__frame::after { content: ''; position: absolute; inset: 0; z-index: -1; background-image: var(--grain); opacity: .09; mix-blend-mode: overlay; pointer-events: none; }
.portal__glow { position: absolute; z-index: -1; width: 55%; aspect-ratio: 1; left: 30%; top: 20%; border-radius: 50%; background: radial-gradient(circle, rgba(89, 128, 166, .42), rgba(148, 166, 184, .14) 45%, transparent 70%); filter: blur(30px); animation: glow-drift 22s ease-in-out infinite alternate; pointer-events: none; }
@keyframes glow-drift { 0% { transform: translate(-30%, -10%) scale(1); } 50% { transform: translate(20%, 15%) scale(1.15); } 100% { transform: translate(-10%, 30%) scale(.95); } }
.portal__inner { transform: scale(calc(.9 + var(--pe, 1) * .1)); opacity: calc(.25 + var(--pe, 1) * .75); }
.portal .display { color: var(--white); }
.portal .display .outline { color: var(--white); }
.team2 { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: clamp(36px, 4vw, 52px) clamp(18px, 2.4vw, 32px); padding-top: 8px; }
.tc { position: relative; padding-bottom: 30px; perspective: 1000px; }
.tc__hit { position: relative; z-index: 3; display: block; width: 100%; aspect-ratio: 4 / 3.15; padding: 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; border-radius: 26px; transition: transform 900ms var(--spring); }
.tc__art { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; background: radial-gradient(90% 80% at 15% 0%, rgba(255, 255, 255, .28), transparent 60%), linear-gradient(155deg, var(--a), var(--b)); box-shadow: 0 30px 50px -28px rgba(0, 0, 0, .6); }
.tc__art::before { content: ''; position: absolute; width: 70%; aspect-ratio: 1; right: -18%; bottom: -30%; border-radius: 50%; background: radial-gradient(circle, rgba(169, 194, 217, .32), transparent 68%); animation: sheen 14s ease-in-out infinite alternate; }
.tc:nth-child(even) .tc__art::before { animation-duration: 18s; animation-direction: alternate-reverse; }
.tc__art::after { content: ''; position: absolute; inset: 0; background-image: var(--grain); background-size: 180px; mix-blend-mode: overlay; opacity: .18; }
@keyframes sheen { to { transform: translate(-60%, -45%); } }
.tc__panel { position: absolute; z-index: 2; left: 8%; right: 8%; top: 50%; transform: translateY(-50%); display: block; padding: 14px 16px 10px; border-radius: 16px; background: rgba(255, 255, 255, .97); color: var(--ink); box-shadow: 0 24px 40px -20px rgba(0, 0, 0, .55); transition: transform 800ms var(--spring); }
.tc__who { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font-size: .78rem; line-height: 1.3; color: var(--muted); }
.tc__who strong { display: block; font-size: .92rem; color: var(--ink); }
.tc__ini { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(155deg, var(--a), var(--b)); color: var(--white); font-family: var(--f-ui); font-weight: 600; font-size: .78rem; }
.tc__rows { display: grid; }
.tc__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 0; border-top: 1px solid rgba(11, 53, 85, .08); font-size: .78rem; }
.tc__row > span { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.tc__row > span::before { content: ''; width: 11px; height: 11px; border-radius: 50%; border: 1.5px dashed var(--a); flex: none; }
.tc__row em { font-style: normal; color: var(--muted); text-align: right; }
.tc__cta { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; padding-top: 8px; border-top: 1px solid rgba(11, 53, 85, .08); font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--blue); }
.tc__cta i { position: relative; width: 24px; height: 24px; border-radius: 50%; background: var(--ink); transition: transform 520ms var(--spring), background-color 300ms var(--ease); }
.tc__cta i::before, .tc__cta i::after { content: ''; position: absolute; left: 50%; top: 50%; width: 10px; height: 1.5px; background: var(--white); transform: translate(-50%, -50%); }
.tc__cta i::after { transform: translate(-50%, -50%) rotate(90deg); }
.tc__cta-close { display: none; }
.tc.is-open .tc__cta-open { display: none; }
.tc.is-open .tc__cta-close { display: inline; }
.tc.is-open .tc__cta i { transform: rotate(135deg); background: var(--blue); }
.tc__more { position: relative; z-index: 2; display: grid; grid-template-rows: 0fr; margin: -22px 3.5% 0; border-radius: 0 0 22px 22px; background: var(--white); color: var(--ink); box-shadow: 0 20px 34px -22px rgba(0, 0, 0, .6); transition: grid-template-rows 700ms var(--ease-smooth); }
.tc__more-in { overflow: hidden; min-height: 0; padding: 0 20px; opacity: 0; transition: opacity 400ms var(--ease), padding 700ms var(--ease-smooth); }
.tc__more-in p { margin: 0 0 10px; font-size: .9rem; color: var(--muted); }
.tc__form { display: grid; gap: 2px; color: var(--ink) !important; font-weight: 600; }
.tc__form span { font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); }
.tc.is-open .tc__more { grid-template-rows: 1fr; }
.tc.is-open .tc__more-in { padding: 38px 20px 12px; opacity: 1; transition-delay: 0s, 0s; transition-duration: 500ms, 700ms; }
.tc__sheet { position: absolute; left: 6%; right: 6%; bottom: 12px; height: 70px; border-radius: 0 0 22px 22px; z-index: 1; background: linear-gradient(155deg, var(--a), var(--b)); filter: brightness(.86); box-shadow: 0 16px 26px -16px rgba(0, 0, 0, .6); transition: transform 800ms var(--spring), opacity 600ms var(--ease); }
.tc__sheet--2 { left: 12%; right: 12%; bottom: 0; z-index: 0; filter: brightness(.7); }
.tc:hover .tc__hit { transform: rotateX(6deg) translateY(-5px); }
.tc:hover .tc__panel { transform: translateY(-56%); }
.tc:hover .tc__sheet--1 { transform: translateY(10px); }
.tc:hover .tc__sheet--2 { transform: translateY(20px); }
.tc.is-open .tc__hit { transform: none; }
.tc.is-open .tc__panel { transform: translateY(-50%); }
.js-fly .tc[data-fly] { transform: translateY(70px) scale(.95); }
.js-fly .tc[data-fly] .tc__sheet { transform: translateY(-60px); opacity: 0; }
.js-fly .tc[data-fly].is-flown { transform: none; }
.js-fly .tc[data-fly].is-flown .tc__sheet { transform: none; opacity: 1; transition-delay: .6s; }
.js-fly .tc[data-fly].is-flown .tc__sheet--2 { transition-delay: .75s; }
.js-fly .tc[data-fly].is-flown:hover .tc__sheet--1 { transform: translateY(10px); transition-delay: 0s; }
.js-fly .tc[data-fly].is-flown:hover .tc__sheet--2 { transform: translateY(20px); transition-delay: 0s; }

/* 08 · Alianza: bento de logos sobre cielo blanco → azul */
.ally3 {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-areas: "head head head fm fm fm" "head head head un un un" "pts pts pts pts pts pts";
  gap: 16px; padding: clamp(40px, 5.5vw, 80px) clamp(24px, 4.5vw, 64px) clamp(48px, 6vw, 88px);
  border-radius: var(--r-panel);
  background: radial-gradient(60% 60% at 100% 0%, rgba(169, 194, 217, .38), transparent 70%), linear-gradient(180deg, #FFFFFF 0%, #EFF3F7 55%, #DCE5EC 100%);
  border: 1px solid rgba(169, 194, 217, .55);
  box-shadow: var(--sh-panel);
}
.ally3__head { grid-area: head; align-self: center; padding-right: clamp(0px, 2vw, 24px); }
.ally3 .h2 { font-size: clamp(1.7rem, 2.6vw, 2.35rem); }
.ally3__lead { font-size: clamp(1.04rem, 1.35vw, 1.16rem); line-height: 1.6; color: #23435E; margin: 0; max-width: 46ch; }
.ab { position: relative; margin: 0; border-radius: var(--r-l); }
.ab--fmsjs, .ab--uny { display: grid; grid-template-rows: 1fr auto; gap: 18px; min-height: 230px; padding: clamp(24px, 3vw, 36px); overflow: hidden; }
.ab--fmsjs { grid-area: fm; background: var(--white); border: 1px solid var(--line); box-shadow: var(--sh-card); }
.ab--uny { grid-area: un; background: radial-gradient(70% 90% at 0% 0%, rgba(89, 128, 166, .55), transparent 60%), linear-gradient(160deg, var(--navy), var(--ink)); color: var(--white); box-shadow: var(--sh-panel); }
.ab--fmsjs img, .ab--uny img { align-self: center; justify-self: center; width: auto; height: auto; max-width: 78%; max-height: 130px; transition: transform 700ms var(--spring); }
.ab--uny img { max-height: 150px; }
.ab--fmsjs:hover img, .ab--uny:hover img { transform: scale(1.04); }
.ab figcaption { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; padding-top: 14px; border-top: 1px solid var(--line); font-size: .88rem; color: var(--muted); }
.ab--uny figcaption { border-top-color: rgba(255, 255, 255, .2); color: rgba(255, 255, 255, .8); }
.ab figcaption strong { font-family: var(--f-display); font-weight: 700; text-transform: uppercase; font-size: .9rem; letter-spacing: .02em; color: var(--ink); }
.ab--uny figcaption strong { color: var(--white); }
.ab-points { grid-area: pts; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ab--point { display: grid; align-content: start; gap: 8px; padding: 24px; background: rgba(255, 255, 255, .86); border: 1px solid var(--line); transition-property: opacity, transform, translate, box-shadow, background-color; }
.ab--point.is-flown:hover, html:not(.js-fly) .ab--point:hover { translate: 0 -4px; background: var(--white); box-shadow: var(--sh-card); transition: translate 480ms var(--spring), box-shadow 400ms var(--ease), background-color 300ms var(--ease), opacity 900ms var(--ease-in), transform 1100ms var(--ease-in); }
.ab--point strong { font-family: var(--f-display); text-transform: uppercase; font-size: 1.05rem; line-height: 1.1; margin-top: 6px; }
.ab--point > span:last-child { color: var(--muted); font-size: .94rem; }
.lazo--ally-top { width: 58px; top: -44px; right: 34%; transform: rotate(180deg); translate: 0 calc((1 - var(--pd, 1)) * -60px); animation: lazo-sway 7s ease-in-out infinite; }
.lazo--ally-corner { width: 62px; right: 6%; bottom: -52px; translate: 0 calc((1 - var(--pd, 1)) * 80px); }

/* 10 · Voces: cabecera con jerarquía clara */
.voices__head { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 24px clamp(32px, 5vw, 80px); align-items: end; }
.voices__head .h2 { margin: 0; }
.vstat { padding-left: clamp(20px, 3vw, 36px); border-left: 1px solid var(--line-strong); }
.vstat__kicker { margin: 0 0 4px; font-size: .78rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--blue); }
.vstat__num { margin: 0 0 10px; font-family: var(--f-ui); font-weight: 600; font-size: clamp(3.4rem, 6.4vw, 5.6rem); line-height: .9; letter-spacing: -.035em; color: var(--ink); }
.vstat__label { margin: 0 0 18px; max-width: 30ch; font-size: clamp(1.06rem, 1.4vw, 1.2rem); line-height: 1.5; color: #23435E; }
.voices__hint { display: flex; align-items: center; gap: 10px; margin: 0; font-size: .88rem; color: var(--muted); }
.voices__hint span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line-strong); color: var(--blue); animation: lazo-sway 2.4s ease-in-out infinite; }

/* 11 · Inversión: portafolio 3D, cada tarjeta se superpone a la anterior */
.stack { list-style: none; display: grid; perspective: 1600px; perspective-origin: 50% 0; }
.sc {
  --i: 0;
  position: sticky; top: calc(100px + var(--i) * 24px);
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(20px, 3vw, 44px); align-items: stretch;
  min-height: min(620px, calc(100vh - 150px)); margin-bottom: 14vh; padding: clamp(28px, 4vw, 52px);
  border-radius: var(--r-panel); overflow: hidden; isolation: isolate;
  transform-origin: 50% 0; transform: scale(var(--ss, 1)) rotateX(var(--sr, 0deg));
  box-shadow: 0 -10px 40px -30px rgba(11, 53, 85, .35), 0 50px 90px -50px rgba(11, 53, 85, .6);
  will-change: transform;
}
.sc:last-child { margin-bottom: 0; }
.sc::after { content: ''; position: absolute; inset: 0; z-index: 5; border-radius: inherit; background: var(--ink); opacity: var(--so, 0); pointer-events: none; }
.sc__copy { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 14px; }
.sc__badge { margin: 0; padding: 6px 16px; border-radius: var(--r-pill); border: 1.5px solid currentColor; font-size: .76rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.sc__amount { display: flex; align-items: flex-start; gap: .08em; margin: 4px 0 0; font-family: var(--f-display); font-weight: 800; font-size: clamp(4.4rem, 8.4vw, 7.6rem); line-height: .82; letter-spacing: -.04em; }
.sc__amount small { font-family: var(--f-ui); font-weight: 300; font-size: .24em; letter-spacing: .04em; margin-top: .3em; }
.sc__amount--text { display: block; font-size: clamp(2.6rem, 6vw, 5rem); line-height: .95; text-transform: uppercase; letter-spacing: -.02em; }
.sc__amount--text .lt { display: block; font-size: .6em; letter-spacing: -.02em; }
.sc__lead { margin: 0; font-size: clamp(1.05rem, 1.5vw, 1.3rem); font-weight: 300; max-width: 34ch; }
.sc__lead strong { font-weight: 700; }
.sc__list { list-style: none; display: grid; gap: 8px; margin: 2px 0 10px; font-size: .98rem; }
.sc__list li { display: flex; align-items: center; gap: 10px; }
.sc__list li::before { content: ''; flex: none; width: 18px; height: 18px; border-radius: 50%; background: currentColor; -webkit-mask: radial-gradient(circle, #000 0 3px, transparent 3.5px), linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: radial-gradient(circle, #000 0 3px, transparent 3.5px) exclude, linear-gradient(#000 0 0); opacity: .7; }
.sc__facts { display: grid; gap: 12px; margin: 6px 0 0; }
.sc__facts div { padding: 14px 18px; border-radius: var(--r-m); background: rgba(255, 255, 255, .7); border: 1px solid rgba(47, 111, 159, .18); }
.sc__facts dt { font-family: var(--f-display); font-weight: 700; text-transform: uppercase; font-size: .9rem; margin-bottom: 2px; }
.sc__facts dd { margin: 0; color: var(--muted); font-size: .95rem; }
.sc__media { position: relative; z-index: 1; margin: 0; border-radius: calc(var(--r-panel) - 12px); overflow: hidden; min-height: 280px; }
.sc__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: transform 1.4s var(--ease); }
.sc:hover .sc__media img { transform: scale(1.02); }
.sc__no { position: absolute; z-index: 2; top: clamp(18px, 2.4vw, 30px); right: clamp(18px, 2.4vw, 30px); display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--white); color: var(--ink); font-family: var(--f-display); font-weight: 800; font-size: .9rem; box-shadow: 0 12px 24px -12px rgba(11, 53, 85, .6); }
.sc--pink { color: var(--white); background: radial-gradient(70% 80% at 0% 0%, rgba(255, 255, 255, .18), transparent 60%), linear-gradient(140deg, #D92F86, #B52B77 55%, #8E1F5E); }
.sc--white { color: var(--ink); background: radial-gradient(60% 70% at 100% 100%, rgba(169, 194, 217, .35), transparent 60%), var(--white); border: 1px solid var(--line); }
.sc--white .sc__badge { color: var(--blue); }
.sc--ink { color: var(--white); background: radial-gradient(70% 80% at 100% 0%, rgba(47, 111, 159, .7), transparent 60%), var(--ink); }
.sc--ink .sc__amount small, .sc--ink .sc__badge { color: var(--sky); }
.sc--sky { color: var(--ink); background: radial-gradient(60% 70% at 0% 100%, rgba(120, 138, 156, .16), transparent 60%), linear-gradient(160deg, #DEE6ED, #F1F5F8); border: 1px solid rgba(169, 194, 217, .8); }
.sc--sky .sc__badge { color: var(--pink); }
.btn--light { --bg: var(--white); --fg: var(--pink-solid); --bg-hover: var(--ink); --bg-press: var(--ink); --arrow-bg: rgba(196, 42, 120, .12); box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .5); }
.btn--light:hover, .btn--light.is-clicked { color: var(--white); }

/* 10 · Voces: la tarjeta trasera asoma en todas y se despliega al pasar el cursor o tocar */
.voice__back { opacity: 1; transform: translate(12px, -18px) rotate(2.5deg) scale(.95); animation: back-bob 6s ease-in-out infinite; }
.voice:nth-child(even) .voice__back { transform: translate(-12px, -14px) rotate(-2.5deg) scale(.95); animation-delay: -3s; }
.voice:nth-child(3n) .voice__back { background: linear-gradient(150deg, var(--blue), var(--navy)); animation-delay: -1.5s; }
@keyframes back-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }
.voice:is(:hover, :focus-visible, .is-open) .voice__back { transform: translate(18px, -100px) rotate(3deg) scale(1); animation-play-state: paused; }
.voice:nth-child(even):is(:hover, :focus-visible, .is-open) .voice__back { transform: translate(-14px, -100px) rotate(-3deg) scale(1); }
.voice.is-open .voice__card { transform: translateY(14px) scale(1.02); border-color: var(--line-strong); box-shadow: 0 34px 50px -30px rgba(11, 53, 85, .6); }
.voice.is-open .voice__avatar { background: var(--pink); color: var(--white); }
.voices:has(.voice.is-open) .voices__track { animation-play-state: paused; }


/* ── Responsive ───────────────────────────────────── */
@media (max-width: 1180px) {
  .nav__links { gap: 4px; }
  .nav__links a { padding: 7px 10px; font-size: .82rem; }
  .bento { grid-template-columns: repeat(3, 1fr); }
  .bento__cell--metric { grid-column: span 2; }
  .schedule { grid-template-columns: 1fr 1fr; }
  .hours { grid-column: 1 / -1; }
  .cards3d { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rail__detail { grid-template-columns: minmax(0, 1fr) auto; }
  .rail__product { grid-column: 1 / -1; }
}

@media (max-width: 1023px) {
  .nav__links { position: absolute; left: var(--gutter); right: var(--gutter); top: calc(100% + 8px); flex-direction: column; gap: 2px; padding: 10px; border-radius: var(--r-m); background: var(--white); border: 1px solid var(--line); box-shadow: var(--sh-panel); opacity: 0; visibility: hidden; transform: translateY(-8px) scale(.98); transform-origin: top; transition: opacity var(--t-fast) var(--ease), transform 420ms var(--spring), visibility 0s linear var(--t-fast); }
  .nav__links.is-open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .nav__links a { padding: 14px 16px; font-size: 1rem; border-color: transparent; }
  .nav__links a.is-active { color: var(--pink); background: var(--pink-soft); }
  .nav__indicator { display: none; }
  .nav__cta { margin-left: auto; }
  .nav__toggle { display: inline-grid; place-content: center; gap: 6px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--white); cursor: pointer; flex: none; transition: transform 420ms var(--spring); }
  .nav__toggle:active { transform: scale(.92); }
  .nav__toggle span { display: block; width: 18px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform 420ms var(--spring); }
  .nav__toggle[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
  .nav__toggle[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }
  .hero__grid, .purpose, .method, .reg, .eval, .ally, .reveal-cert, .faq-wrap { grid-template-columns: minmax(0, 1fr); }
  .hero__photo { aspect-ratio: 16 / 11; }
  .now-card { left: 16px; bottom: -36px; }
  .hero__media { margin-bottom: 36px; }
  .section__head { grid-template-columns: minmax(0, 1fr); }
  .module .module__inner { grid-template-columns: 1fr 1fr; }
  .module__evidence { grid-column: 1 / -1; }
  .team, .prices, .pay { grid-template-columns: 1fr 1fr; }
  .method__photo { max-height: 360px; }
  .faq-wrap__head { position: static; }
  /* Certificado: queda fijo arriba y los pasos pasan por debajo */
  .reveal-cert__sticky { order: -1; top: 76px; z-index: 3; padding-bottom: 12px; }
  .cert { max-width: 560px; margin-inline: auto; }
  .cert-step, .cert-step:first-child { min-height: 52vh; }
  .reveal-cert__steps { padding-bottom: min(70vw, 380px); }
}

@media (max-width: 767px) {
  body { font-size: .98rem; }
  .draft-bar { border-radius: var(--r-m); text-align: left; }
  .nav { top: 8px; margin-top: 8px; }
  .nav__pill { gap: 10px; padding: 6px 6px 6px 12px; }
  .nav__brand img, .nav.is-scrolled .nav__brand img { height: 34px; }
  .nav__cta { display: none; }
  .nav__toggle { margin-left: auto; }
  .hero__title .outline { font-size: .6em; }
  .hero__actions .btn { width: 100%; }
  .hero__actions .btn--ghost { justify-content: center; }
  .bento { grid-template-columns: 1fr 1fr; gap: 10px; }
  .bento__cell { min-height: 120px; padding: 18px; }
  .bento__cell--metric { grid-column: 1 / -1; }
  .cards3d { grid-template-columns: minmax(0, 1fr); }
  .profiles, .steps, .team, .prices, .pay, .schedule { grid-template-columns: minmax(0, 1fr); }
  .person { display: grid; grid-template-columns: 64px 1fr; column-gap: 16px; align-items: center; padding: 20px; }
  .person__avatar { width: 56px; height: 56px; margin: 0; grid-row: span 3; font-size: 1rem; }
  .person p { margin-bottom: 8px; }
  .person .tag { justify-self: start; }
  .hours { flex-direction: column; align-items: flex-start; }
  .module__head { grid-template-columns: 40px minmax(0, 1fr) 40px; gap: 10px; padding: 14px 12px 14px 16px; }
  .module__n { font-size: 1.15rem; }
  .module__hours { grid-column: 2; grid-row: 2; justify-self: start; font-size: .75rem; padding: 2px 10px; }
  .module__icon { grid-column: 3; grid-row: 1 / span 2; width: 40px; height: 40px; }
  .module .module__inner { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .module.is-open .module__inner { padding: 20px 18px 22px; }
  /* Hoja de ruta vertical en móvil */
  .rail__track { flex-direction: column; }
  .rail__track > li, .rail.is-js .rail__track > li.is-active { flex: none; }
  .rail__seg { min-height: 0; padding: 12px 14px; }
  .rail__seg--0 .rail__label { writing-mode: horizontal-tb; transform: none; font-size: .82rem; }
  .rail.is-js li.is-active .rail__seg { transform: translateX(8px); }
  .rail__line, .rail__months { display: none; }
  .rail__detail { grid-template-columns: minmax(0, 1fr); padding: 20px; }
  .rail__play { top: 18px; translate: 0; }
  .rail__stats div { min-width: 0; flex: 1; }
  .bars li { grid-template-columns: 1fr 3em; }
  .bars__track { grid-column: 1 / -1; grid-row: 2; }
  .ally { padding: 28px 22px 48px; }
  .ally__logos { padding: 24px; }
  .ally__logo--fmsjs { width: 220px; }
  .ally__logo--uny { width: 240px; }
  .section__intro--big { max-width: none; }
  .cert { aspect-ratio: auto; padding: 20px 20px 18px; }
  .cert__top { margin-bottom: 14px; }
  .cert__top img { height: 30px; }
  .cert__body { font-size: .78rem; max-width: 24ch; }
  .cert__hours { font-size: .7rem; margin-bottom: 8px; }
  .cert__name { font-size: 1.15rem; margin-bottom: 8px; }
  .cert__seal { width: 50px; right: 18px; top: 64px; bottom: auto; }
  .cert__signs { max-width: 100%; gap: 14px; }
  .cert__sig { max-height: 34px; }
  .cert__code { display: none; }
  .voices { padding-top: 100px; }
  .btn__label--send { letter-spacing: .38em; margin-right: -.38em; }
  .voice { width: 280px; }
  .faq__inner p { padding-left: 22px; }
  .form { grid-template-columns: minmax(0, 1fr); }
  .field--half { grid-column: 1 / -1; }
  .footer__grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .footer__brand { flex-direction: column; align-items: flex-start; }
  .finale { padding-bottom: 96px; }
  .lazo--hero { right: 6px; width: 60px; top: -32px; }

  .dock {
    display: flex; align-items: center; gap: 4px;
    position: fixed; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 60;
    padding: 6px; border-radius: var(--r-pill);
    background: rgba(255, 255, 255, .88); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
    border: 1px solid var(--line); box-shadow: 0 18px 40px -18px rgba(11, 53, 85, .55);
    transform: translate(-50%, 160%); transition: transform 600ms var(--spring);
  }
  .dock.is-visible { transform: translate(-50%, 0); }
  .dock__item { position: relative; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--ink); transition: color 300ms var(--ease), transform 400ms var(--spring); }
  .dock__item:active { transform: scale(.9); }
  .dock__item svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .dock__item.is-active { color: var(--white); }
  .dock__orb { position: absolute; z-index: 0; left: 0; top: 6px; width: 44px; height: 44px; border-radius: 50%; background: var(--ink); box-shadow: 0 9px 22px -13px rgba(0, 64, 104, .72); opacity: 0; transition: transform 560ms var(--spring), opacity 300ms var(--ease); }
  .dock.has-active .dock__orb { opacity: 1; }
  .dock__cta { margin-left: 4px; display: grid; place-items: center; height: 44px; padding: 0 18px; border-radius: var(--r-pill); background: var(--pink); color: var(--white); font-family: var(--f-display); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; transition: background-color 300ms var(--ease), transform 400ms var(--spring); }
  .dock__cta:active { transform: scale(.94); background: var(--ink); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .reveal { opacity: 1; transform: none; }
  .voices { -webkit-mask-image: none; mask-image: none; overflow-x: auto; }
  .voices__track { animation: none; }
  .nebula { opacity: 1; transform: none; }
  .cert__part { opacity: 1; transform: none; filter: none; }
  .cert__sig path { stroke-dashoffset: 0; }
  .hl { background-size: 100% 100%; }
  .hl--ring::after { clip-path: none; }
  .purpose__text .w { opacity: 1; }
}

/* ── v5 · Responsive y movimiento reducido ───────── */
@media (max-width: 1023px) {
  .mbento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "photo photo" "live sem" "prod proj" "eval eval" "lines lines"; }
  .mb--photo { min-height: 360px; }
  .mb--eval { grid-template-columns: minmax(0, 1fr); }
  .team2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ally3 { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "head head" "fm un" "pts pts"; }
  .ally3__head { padding: 0 0 12px; }
  .ab-points { grid-template-columns: minmax(0, 1fr); }
  .voices__head { grid-template-columns: minmax(0, 1fr); }
  .sc { grid-template-columns: minmax(0, 1fr); top: calc(84px + var(--i) * 16px); min-height: 0; margin-bottom: 8vh; }
  .sc__media { display: none; }
}
@media (max-width: 767px) {
  .met .h2 { font-size: 1.7rem; }
  .mbento { grid-template-columns: minmax(0, 1fr); grid-template-areas: "photo" "live" "sem" "prod" "proj" "eval" "lines"; }
  article.mb { min-height: 190px; }
  .mb--photo { min-height: 320px; }
  .team2 { grid-template-columns: minmax(0, 1fr); }
  .portal__frame { padding: 64px 0 72px; }
  .ally3 { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "fm" "un" "pts"; padding-bottom: 72px; }
  .ab--fmsjs, .ab--uny { min-height: 190px; }
  .lazo--ally-top { right: 12%; width: 46px; }
  .lazo--ally-corner { width: 50px; }
  .vstat { padding-left: 18px; }
  .sc { padding: 26px 22px; top: calc(76px + var(--i) * 12px); }
  .sc__amount { flex-direction: column; gap: 6px; font-size: 19vw; }
  .sc__amount small { font-size: 1.1rem; margin: 0; }
  .sc__amount--text { font-size: clamp(2rem, 10vw, 2.6rem); }
  .sc__no { top: auto; bottom: 18px; width: 42px; height: 42px; }
}
@media (prefers-reduced-motion: reduce) {
  .tw .ch { opacity: 1; transform: none; }
  .portal__frame { clip-path: none; }
  .portal__inner { transform: none; opacity: 1; }
  .sc { position: relative; top: auto; transform: none; margin-bottom: 18px; }
  .sc::after { display: none; }
  .voice__back { animation: none; }
  .hl__pen path { stroke-dashoffset: 0; }
}

/* ── Ajustes v6 ───────────────────────────────────── */
:root {
  /* Textura granulada en azul marino, muy transparente, para todo el fondo */
  --grain-ink: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .04  0 0 0 0 .21  0 0 0 0 .33  0 0 0 .16 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
body {
  background-image:
    var(--grain-ink),
    linear-gradient(rgba(47, 111, 159, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(47, 111, 159, .045) 1px, transparent 1px);
  background-size: 200px 200px, 32px 32px, 32px 32px;
}

/* Selección de texto: rosa con letra blanca; en fondos oscuros o de color, blanca */
::selection { background: var(--pink); color: var(--white); }
:is(.section--ink, .portal__frame, .footer__panel, .mb--navy, .mb--blue, .mb--lines, .ab--uny, .sc--ink, .sc--pink, .bento__cell--ink, .bento__cell--metric, .sched, .pq-card, .pq-chip, .form, .faq__item.is-open, .voice__back, .mega-cta, .intro, .module.is-open .module__head) ::selection,
:is(.section--ink, .portal__frame, .footer__panel, .mb--navy, .mb--blue, .mb--lines, .ab--uny, .sc--ink, .sc--pink, .bento__cell--ink, .bento__cell--metric, .sched, .pq-card, .form, .faq__item.is-open, .mega-cta)::selection { background: var(--white); color: var(--ink); }
.form :is(input, textarea)::selection { background: var(--pink); color: var(--white); }

/* Entrada al sitio: lema y portal circular que se abre hacia la página */
@property --hole { syntax: '<length>'; inherits: false; initial-value: 0px; }
.intro { display: none; }
html.intro-on { overflow: hidden; }
.intro-on .intro {
  position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; cursor: pointer;
  background: radial-gradient(70% 60% at 50% 42%, #2F5C8A, #0B3555 72%);
  color: var(--white);
  -webkit-mask-image: radial-gradient(circle at 50% 44%, transparent var(--hole), #000 calc(var(--hole) + 1px));
  mask-image: radial-gradient(circle at 50% 44%, transparent var(--hole), #000 calc(var(--hole) + 1px));
}
.intro::after { content: ''; position: absolute; inset: 0; background-image: var(--grain); opacity: .1; mix-blend-mode: overlay; pointer-events: none; }
.intro__stage { display: grid; justify-items: center; gap: 26px; text-align: center; }
.intro__mark { width: clamp(72px, 9vw, 112px); height: auto; animation: intro-mark 1.2s var(--ease-in) both; }
@keyframes intro-mark { from { opacity: 0; transform: scale(.6) translateY(16px); } 60% { opacity: 1; } to { opacity: 1; transform: none; } }
.intro__lema { margin: 0; font-family: var(--f-display); font-weight: 700; text-transform: uppercase; font-size: clamp(1.5rem, 4vw, 3.2rem); line-height: 1; letter-spacing: -.01em; }
.intro__lema span { display: inline-block; opacity: 0; transform: translateY(22px); animation: intro-word .9s var(--ease-in) forwards; }
.intro__lema span:nth-child(1) { animation-delay: .45s; }
.intro__lema span:nth-child(2) { animation-delay: .65s; font-family: var(--f-ui); font-weight: 300; }
.intro__lema span:nth-child(3) { animation-delay: .85s; padding: .04em .32em .08em; border: 1.5px solid currentColor; border-radius: var(--r-pill); }
@keyframes intro-word { to { opacity: 1; transform: none; } }
.intro__hint { position: absolute; bottom: 32px; left: 50%; translate: -50% 0; font-size: .72rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; opacity: 0; animation: intro-word .6s var(--ease) 1.4s forwards; color: rgba(255, 255, 255, .7); }
.intro.is-leaving { animation: intro-open 1.15s cubic-bezier(.7, 0, .2, 1) forwards; }
.intro.is-leaving .intro__stage { transition: transform 1s cubic-bezier(.7, 0, .2, 1), opacity .5s; transform: scale(1.4); opacity: 0; }
@keyframes intro-open { 0% { --hole: 0px; } 100% { --hole: 150vmax; } }
@supports not (mask-image: radial-gradient(circle, transparent 1px, #000 2px)) {
  .intro.is-leaving { animation: intro-fade .8s var(--ease) forwards; }
}
@keyframes intro-fade { to { opacity: 0; } }

/* El hero emerge por partes al terminar la entrada */
.hero-pending :is(.hero .eyebrow, .hero__title > span, .hero__sub, .hero__lead, .hero__copy .chips, .hero__actions, .hero__media, .bento__cell, .brand-stripe) { opacity: 0; transform: translateY(30px); }
.hero-go :is(.hero .eyebrow, .hero__title > span, .hero__sub, .hero__lead, .hero__copy .chips, .hero__actions, .hero__media, .bento__cell, .brand-stripe) { opacity: 1; transform: none; transition: opacity .9s var(--ease-in) var(--hd, 0s), transform 1.1s var(--ease-in) var(--hd, 0s); }
.hero .eyebrow { --hd: .05s; }
.hero__title > span:nth-child(1) { --hd: .15s; }
.hero__title > span:nth-child(2) { --hd: .27s; }
.hero__title > span:nth-child(3) { --hd: .39s; }
.hero__sub { --hd: .5s; } .hero__lead { --hd: .6s; } .hero__copy .chips { --hd: .7s; } .hero__actions { --hd: .8s; }
.hero__media { --hd: .35s; }
.bento__cell:nth-child(1) { --hd: .7s; } .bento__cell:nth-child(2) { --hd: .8s; } .bento__cell:nth-child(3) { --hd: .9s; } .bento__cell:nth-child(4) { --hd: 1s; } .bento__cell:nth-child(5) { --hd: 1.1s; }
.brand-stripe { --hd: 1.2s; }
/* Los contornos de los titulares se dibujan al aparecer */
.reveal .outline { clip-path: inset(0 100% 0 0 round 999px); transition: clip-path 1.2s var(--ease) .3s; }
.reveal.is-visible .outline { clip-path: inset(-4px -4px -4px -4px round 999px); }

/* Navegación contraída: el anagrama queda al centro y vuelve a la izquierda al expandirse */
@media (min-width: 1024px) {
  .nav__pill, .nav.is-scrolled .nav__pill { transition: width 820ms var(--ease), margin-left 820ms var(--ease), padding 620ms var(--ease), height 520ms var(--ease), box-shadow 420ms var(--ease), background-color 420ms var(--ease), border-color 420ms var(--ease); }
  .nav.is-collapsed .nav__pill { margin-left: calc((100% - 58px) / 2); }
  .nav.is-collapsed .nav__pill:is(:hover, :focus-within) { margin-left: max(0px, calc((100% - var(--wrap)) / 2)); }
}

/* Cifras del hero: más grandes y con gráficos vivos */
.bento { grid-template-columns: minmax(0, 1.35fr) repeat(3, minmax(0, 1fr)) minmax(0, 1.2fr); gap: 14px; }
.bento__cell { position: relative; overflow: hidden; isolation: isolate; min-height: 250px; padding: 24px; justify-content: flex-end; gap: 10px; }
.bento__cell strong { font-family: var(--f-ui); font-weight: 600; font-size: clamp(3.4rem, 5.8vw, 5.6rem); line-height: .88; letter-spacing: -.045em; }
.bento__cell strong small { font-size: .36em; font-weight: 400; letter-spacing: 0; margin-left: .1em; }
.bento__cell > span:last-child { font-size: .95rem; max-width: 18ch; }
.bento__cell--metric { animation: none; }
.bento__cell:hover { transform: translateY(-6px); }
.bviz { position: absolute; z-index: -1; top: 22px; right: 22px; }
.bviz--ring { width: 96px; height: 96px; transform: rotate(-90deg); }
.bviz--ring circle { fill: none; stroke: rgba(255, 255, 255, .25); stroke-width: 8; }
.bviz--ring .bviz__arc { stroke: var(--white); stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: ring-draw 5s var(--ease-smooth) infinite; }
@keyframes ring-draw { 0% { stroke-dashoffset: 1; } 55%, 80% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -1; } }
.bviz--dots { display: grid; grid-template-columns: repeat(5, 10px); gap: 7px; }
.bviz--dots i { width: 10px; height: 10px; border-radius: 50%; background: rgba(47, 111, 159, .18); animation: dot-on 4s var(--ease-smooth) infinite; animation-delay: calc(var(--n) * .12s); }
@keyframes dot-on { 0%, 100% { background: rgba(47, 111, 159, .18); transform: scale(1); } 20%, 45% { background: var(--blue); transform: scale(1.15); } }
.bviz--bars { display: flex; align-items: flex-end; gap: 4px; height: 52px; }
.bviz--bars i { width: 6px; height: 30%; border-radius: 4px; background: linear-gradient(to top, var(--ink), var(--azufre)); animation: eq 1.8s ease-in-out infinite alternate; animation-delay: calc(var(--n) * -.23s); }
@keyframes eq { 0% { height: 18%; } 50% { height: 100%; } 100% { height: 42%; } }
.bviz--track { width: 120px; height: 18px; border-radius: var(--r-pill); background: repeating-linear-gradient(90deg, rgba(47, 111, 159, .3) 0 2px, transparent 2px 9px) center / 100% 6px no-repeat; }
.bviz--track i { position: absolute; top: 50%; left: 0; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; background: var(--white); border: 4px solid var(--blue); box-shadow: 0 6px 12px -6px rgba(11, 53, 85, .6); animation: track-run 6s var(--ease-smooth) infinite; }
@keyframes track-run { 0% { left: 0; } 85%, 100% { left: calc(100% - 18px); } }
.bviz--clock { width: 72px; height: 72px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .28); }
.bviz--clock::before { content: ''; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px; border-radius: 50%; background: var(--white); }
.bviz--clock i { position: absolute; left: 50%; bottom: 50%; width: 2px; height: 28px; margin-left: -1px; border-radius: 2px; background: var(--white); transform-origin: bottom; animation: clock-spin 6s linear infinite; }
.bviz--clock i::after { content: ''; position: absolute; left: -1px; bottom: 0; width: 4px; height: 18px; border-radius: 2px; background: var(--sky); transform-origin: bottom; transform: rotate(140deg); }
@keyframes clock-spin { to { transform: rotate(360deg); } }

/* Subtítulos dentro de cilindros que, de a ratos, pasan a sólido */
:is(.module__col > .micro, .rail__detail-main .micro, .rail__product .micro, .sched .micro), .cyl {
  display: inline-flex; align-items: center; width: max-content; max-width: 100%; padding: 5px 14px; margin-bottom: .8em;
  border: 1.5px solid; border-radius: var(--r-pill); font-style: normal; line-height: 1.25;
  animation: cyl-flash 9s var(--ease-smooth) infinite; animation-delay: var(--cd, 0s);
}
@keyframes cyl-flash {
  0%, 60%, 100% { background-color: transparent; color: var(--cyl-base, var(--blue)); border-color: var(--cyl-base, var(--blue)); }
  68%, 88% { background-color: var(--cyl-c, var(--blue)); color: var(--cyl-on, var(--white)); border-color: var(--cyl-c, var(--blue)); }
}
.module__col:nth-child(2) > .micro { --cd: 3s; }
.module__col:nth-child(3) > .micro, .rail__product .micro { --cd: 6s; --cyl-c: var(--pink); }
.rail__detail-main .micro { --cd: 1.5s; }
.sched .micro { --cyl-base: var(--white); --cyl-c: var(--white); --cyl-on: var(--ink); }
.sched--sem .micro { --cd: 4s; --cyl-on: var(--pink-solid); }
.now-card__date .cyl { margin: 0 0 0 4px; padding: 2px 12px 4px; font-size: .9em; --cyl-c: var(--pink); --cd: 2s; }
.rail__months { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.rail__months span { border: 1.5px solid var(--line-strong); border-radius: var(--r-pill); padding: 4px 0; text-align: center; transition: background-color .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease); }
.rail__months span.is-on { background: var(--pink); border-color: var(--pink); color: var(--white); }

/* "Quiero inscribirme" enorme bajo los módulos */
.mega-cta { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: clamp(32px, 4vw, 56px); padding: clamp(14px, 1.8vw, 22px) clamp(14px, 1.8vw, 22px) clamp(14px, 1.8vw, 22px) clamp(26px, 4vw, 56px); border-radius: var(--r-pill); background: linear-gradient(160deg, var(--navy), var(--ink)); color: var(--white); text-decoration: none; box-shadow: var(--sh-panel); transition: transform .6s var(--spring); }
.mega-cta::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(160deg, #D92F86, #B52B77); transform: scaleX(0); transform-origin: left; transition: transform .8s var(--ease); }
.mega-cta::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .16) 50%, transparent 70%); transform: translateX(-110%); animation: seg-shine 3.6s var(--ease-smooth) infinite; }
.mega-cta:hover { transform: translateY(-4px); }
.mega-cta:hover::before, .mega-cta:focus-visible::before { transform: scaleX(1); }
.mega-cta__label { font-family: var(--f-display); font-weight: 700; text-transform: uppercase; font-size: clamp(1.7rem, 6.2vw, 5.8rem); line-height: 1; letter-spacing: -.02em; }
.mega-cta__label .lt { font-weight: 300; }
.mega-cta__arrow { flex: none; display: grid; place-items: center; width: clamp(54px, 7.4vw, 112px); aspect-ratio: 1; border-radius: 50%; background: var(--white); color: var(--ink); transition: transform .6s var(--spring), color .4s var(--ease); }
.mega-cta__arrow svg { width: 40%; height: 40%; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.mega-cta:hover .mega-cta__arrow { transform: rotate(-45deg); color: var(--pink-solid); }

/* 05 · Hoja de ruta: avanza sola, con progreso visible en la etapa activa */
.rail__detail { padding-right: 24px; }
.rail__seg::before { content: ''; position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255, 255, 255, .8); transform: scaleX(0); transform-origin: left; }
.rail.is-js li.is-active .rail__seg::before { animation: seg-prog var(--stage-ms, 3600ms) linear forwards; }
@keyframes seg-prog { to { transform: scaleX(1); } }

/* Agenda: casillas de color con animación */
.schedule { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr); }
.sched { position: relative; overflow: hidden; isolation: isolate; min-height: 260px; padding: 28px; border-radius: var(--r-l); color: var(--white); box-shadow: var(--sh-panel); transition-property: opacity, transform, translate; }
.sched.is-flown:hover { translate: 0 -5px; transition: translate .5s var(--spring), opacity .9s var(--ease-in), transform 1.1s var(--ease-in); }
.sched--live { background: radial-gradient(90% 80% at 100% 0%, rgba(89, 128, 166, .6), transparent 60%), linear-gradient(160deg, var(--navy), var(--ink)); border-radius: var(--r-s) var(--r-l) var(--r-l) var(--r-l); }
.sched--sem { background: radial-gradient(90% 80% at 100% 0%, rgba(255, 255, 255, .2), transparent 60%), linear-gradient(150deg, #D92F86, #A8236C); }
.sched .schedule__day { color: var(--white); }
.sched .schedule__time { color: var(--white); opacity: .92; }
.sched__text { margin: 0; max-width: 22ch; color: rgba(255, 255, 255, .84); font-size: .95rem; }
.sched__live { position: absolute; top: 28px; right: 26px; display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .12); font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.sched__live i { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--pink-metric); }
.sched__live i::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--pink-metric); animation: cursor-ping 1.6s var(--ease) infinite; }
.sched__clock { position: absolute; z-index: -1; right: -26px; bottom: -26px; width: 160px; height: 160px; }
.sched__clock circle { fill: none; stroke: rgba(255, 255, 255, .14); stroke-width: 5; }
.sched__clock .sched__arc { stroke: var(--white); stroke-linecap: round; stroke-dasharray: 0 12; transform: rotate(120deg); transform-origin: 50% 50%; animation: clock-arc 4.5s var(--ease-smooth) infinite; }
@keyframes clock-arc { 0% { stroke-dasharray: 0 12; } 60%, 90% { stroke-dasharray: 2 10; } 100% { stroke-dasharray: 2 10; opacity: 0; } }
.sched__hand { stroke: var(--white); stroke-width: 3; stroke-linecap: round; transform-origin: 50px 50px; animation: clock-hand 4.5s var(--ease-smooth) infinite; }
@keyframes clock-hand { 0% { transform: rotate(210deg); } 60%, 100% { transform: rotate(270deg); } }
.sched__clock .sched__pin { fill: var(--white); stroke: none; }
.sched__grid { position: absolute; z-index: -1; right: 24px; bottom: 24px; display: grid; grid-template-columns: repeat(5, 13px); gap: 6px; }
.sched__grid i { width: 13px; height: 13px; border-radius: 4px; background: rgba(255, 255, 255, .2); animation: sem-on 5s var(--ease-smooth) infinite; animation-delay: calc(var(--n) * .16s); }
@keyframes sem-on { 0%, 100% { background: rgba(255, 255, 255, .2); } 25%, 55% { background: var(--white); } }
@property --dd { syntax: '<angle>'; inherits: false; initial-value: 360deg; }
.js-fly .hours .donut { --dd: 0deg; -webkit-mask-image: conic-gradient(#000 var(--dd), transparent 0); mask-image: conic-gradient(#000 var(--dd), transparent 0); transition: --dd 1.8s var(--ease) .3s; }
.js-fly .hours.is-flown .donut { --dd: 360deg; }

/* 06 · Metodología: títulos de una palabra en Google Sans y casillas desplegables */
article.mb h3 { font-family: var(--f-ui); font-weight: 600; text-transform: uppercase; letter-spacing: -.005em; }
.mbento { row-gap: 40px; }
article.mb { cursor: pointer; --s1: #CBD7E1; --s2: #AFC1D1; box-shadow: 0 12px 0 -6px var(--s1), 0 24px 0 -12px var(--s2), 0 30px 40px -26px rgba(11, 53, 85, .5); transition-property: opacity, transform, translate, box-shadow, border-color, background-color; }
.mb--navy { --s1: #2F5C8A; --s2: #5980A6; }
.mb--blue { --s1: #24577F; --s2: #1A4466; }
article.mb.is-flown:hover, html:not(.js-fly) article.mb:hover { box-shadow: 0 14px 0 -6px var(--s1), 0 28px 0 -12px var(--s2), 0 36px 44px -26px rgba(11, 53, 85, .55); }
article.mb.is-open { box-shadow: 0 14px 0 -6px var(--s1), 0 28px 0 -12px var(--s2), 0 36px 44px -26px rgba(11, 53, 85, .55); }
.mb__more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .7s var(--ease-smooth); }
.mb__more-in { overflow: hidden; min-height: 0; opacity: 0; transition: opacity .4s var(--ease), padding .7s var(--ease-smooth); }
.mb__more-in p { margin: 0; font-size: .92rem; }
.mb.is-open .mb__more { grid-template-rows: 1fr; }
.mb.is-open .mb__more-in { opacity: 1; padding-top: 12px; }
.mb__toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-top: 16px; padding: 12px 0 0; border: 0; border-top: 1px solid currentColor; border-top-color: color-mix(in srgb, currentColor 18%, transparent); background: none; color: inherit; font-family: var(--f-ui); font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
.mb__toggle i { position: relative; width: 26px; height: 26px; border-radius: 50%; background: currentColor; transition: transform .5s var(--spring); }
.mb__toggle i::before, .mb__toggle i::after { content: ''; position: absolute; left: 50%; top: 50%; width: 10px; height: 1.5px; background: var(--ink); transform: translate(-50%, -50%); }
.mb--white .mb__toggle i::before, .mb--white .mb__toggle i::after { background: var(--white); }
.mb--white .mb__toggle { color: var(--blue); }
.mb--white .mb__toggle i { background: var(--ink); }
.mb__toggle i::after { transform: translate(-50%, -50%) rotate(90deg); }
.mb__close { display: none; }
.mb.is-open .mb__open { display: none; }
.mb.is-open .mb__close { display: inline; }
.mb.is-open .mb__toggle i { transform: rotate(135deg); }
.mb__sheet { display: none; }
.ebars__track i { transform: scaleX(0); transition: transform 1.2s var(--ease-smooth); }
.mb--eval.is-flown .ebars__track i { transform: scaleX(var(--f, 0)); }

/* 03 · Propósito: panel sólido + fotografía con datos flotantes */
.pq .profile { --pk: 1; }
.pq-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-bottom: 16px; }
.pq-card { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; min-height: clamp(480px, 44vw, 620px); padding: clamp(32px, 5vw, 72px); border-radius: var(--r-xl); text-align: center; color: var(--white); background: radial-gradient(80% 70% at 18% 0%, rgba(255, 255, 255, .24), transparent 60%), linear-gradient(160deg, #E0408F, #C42A78 58%, #A8236C); box-shadow: var(--sh-panel); }
.pq-card::after { content: ''; position: absolute; inset: 0; z-index: -1; background-image: var(--grain); opacity: .14; mix-blend-mode: overlay; }
.pq-card__icon { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 16px; background: var(--ink); box-shadow: 0 16px 30px -16px rgba(11, 53, 85, .9); }
.pq-card__icon img { width: 30px; height: auto; }
.pq-card__eyebrow { margin: 0; font-size: .74rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; opacity: .92; }
.pq-card__title { margin: 0; max-width: 17ch; font-family: var(--f-ui); font-weight: 600; font-size: clamp(1.9rem, 3.2vw, 3rem); line-height: 1.05; letter-spacing: -.035em; }
.pq-card__text { margin: 0; max-width: 46ch; font-size: .98rem; line-height: 1.55; color: rgba(255, 255, 255, .92); }
.pq-card .btn { margin-top: 6px; }
.pq-photo { position: relative; margin: 0; min-height: clamp(480px, 44vw, 620px); border-radius: var(--r-xl); box-shadow: var(--sh-panel); }
.pq-photo > img:first-child { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.js-fly .pq-photo > img:first-child { transform: scale(1.08); transition: transform 1.8s var(--ease); }
.js-fly .pq-photo.is-flown > img:first-child { transform: none; }
.pq-chip { position: absolute; z-index: 2; margin: 0; padding: 9px 18px; border-radius: var(--r-pill); background: rgba(11, 53, 85, .55); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, .22); color: rgba(255, 255, 255, .9); font-size: .92rem; }
.pq-chip strong { color: var(--white); font-weight: 700; }
.pq-chip--top { top: 22px; right: 22px; }
.pq-chip--bottom { left: 22px; bottom: 22px; }
.pq-pin { position: absolute; z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: rgba(255, 255, 255, .2); border: 1px solid rgba(255, 255, 255, .5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); animation: pin-bob 4.6s ease-in-out infinite; }
.pq-pin img { width: 22px; height: auto; }
.pq-pin::after { content: ''; position: absolute; top: 100%; left: 50%; width: 1.5px; height: 46px; background: linear-gradient(rgba(255, 255, 255, .8), transparent); }
.pq-pin--a { left: 18%; top: 36%; }
.pq-pin--b { left: 50%; top: 22%; animation-delay: -1.5s; }
.pq-pin--c { left: 76%; top: 42%; animation-delay: -3s; }
@keyframes pin-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
.lazo--pq { width: 66px; left: 52px; top: -46px; transform: rotate(180deg); animation: lazo-sway 7s ease-in-out infinite; filter: drop-shadow(0 10px 14px rgba(11, 53, 85, .25)); z-index: 3; }
.profiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* 08 · Lazos que sobresalen del panel, como en el hero */
.ally3 { overflow: visible; }
.lazo--ally-top { top: -60px; z-index: 2; }
.lazo--ally-corner { bottom: -66px; z-index: 2; }

/* 07 · Docentes: tarjeta con foto que sale hacia un lado al abrir */
.tc { z-index: 1; }
.tc.is-open { z-index: 6; }
.tc__photo { position: absolute; z-index: 2; top: 4%; left: 20%; width: 60%; aspect-ratio: 3 / 4; margin: 0; overflow: hidden; border-radius: 20px; box-shadow: 0 30px 50px -24px rgba(0, 0, 0, .65); opacity: 0; transform: scale(.88); transition: transform .9s var(--spring), opacity .35s var(--ease); pointer-events: none; }
.tc__photo img { width: 100%; height: 100%; object-fit: cover; }
.tc__photo figcaption { position: absolute; left: 10px; bottom: 10px; padding: 4px 10px; border-radius: var(--r-pill); background: rgba(11, 53, 85, .66); color: var(--white); font-size: .64rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.tc.is-open .tc__photo { opacity: 1; transform: translateX(-84%) rotate(-5deg); transition-delay: .15s; }
@media (min-width: 1024px) { .tc:nth-child(3n + 1).is-open .tc__photo { transform: translateX(84%) rotate(5deg); } .tc:nth-child(3n + 1).is-open { z-index: 7; } }

/* 12 · FAQ: la pregunta abierta pasa a sólido; números en círculos */
.faq__n { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid var(--line-strong); font-family: var(--f-ui); font-weight: 600; font-size: .82rem; transition: background-color .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease); }
.faq__item.is-open { background: linear-gradient(160deg, var(--navy), var(--ink)); border-color: transparent; box-shadow: var(--sh-panel); }
.faq__item.is-open .faq__n { color: var(--white); border-color: rgba(255, 255, 255, .55); background: rgba(255, 255, 255, .1); }
.faq__item.is-open .faq__text { color: var(--white); }
.faq__item.is-open .faq__inner p { color: rgba(255, 255, 255, .86); }
.faq__item.is-open .faq__icon { background: var(--white); border-color: var(--white); }
.faq__item.is-open .faq__icon::before, .faq__item.is-open .faq__icon::after { background: var(--ink); }
.faq__item.is-open .faq__q:focus-visible { outline-color: var(--white); }

/* 13 · Formulario en rosa con botón blanco */
.form { color: var(--white); background: radial-gradient(80% 70% at 100% 0%, rgba(255, 255, 255, .2), transparent 60%), linear-gradient(155deg, #D92F86, #B52B77 58%, #9C2468); box-shadow: 0 30px 70px -30px rgba(11, 53, 85, .55); }
.form .field label { color: var(--white); }
.form .hint { color: rgba(255, 255, 255, .8); }
.form .field input, .form .field select, .form .field textarea { background: var(--white); border-color: transparent; color: var(--ink); }
.form .field input:hover, .form .field select:hover, .form .field textarea:hover { border-color: rgba(11, 53, 85, .35); }
.form .field input:focus-visible, .form .field select:focus-visible, .form .field textarea:focus-visible { border-color: var(--ink); background: var(--white); box-shadow: 0 0 0 4px rgba(255, 255, 255, .45); }
.form .field.has-error input, .form .field.has-error select { border: 2px solid var(--ink); background: var(--white); }
.form .field__error { color: var(--white); font-weight: 600; }
.form .field__error:not(:empty)::before { content: '! '; display: inline-grid; place-items: center; width: 16px; height: 16px; margin-right: 6px; border-radius: 50%; background: var(--white); color: var(--pink-solid); font-size: .7rem; font-weight: 700; }
.form .field--check label a { color: var(--white); }
.form .field--check input { accent-color: var(--ink); }
.form :focus-visible { outline-color: var(--white); }
.form .form__submit { --bg: var(--white); --fg: var(--pink-solid); --bg-hover: var(--ink); --bg-press: var(--ink); box-shadow: 0 18px 40px -22px rgba(11, 53, 85, .7); }
.form .form__submit .btn__arrow { background: var(--pink); color: var(--white); }
.form .form__submit:hover, .form .form__submit.is-clicked { color: var(--white); }
.form .form__submit:hover .btn__arrow { background: var(--white); color: var(--ink); }

/* Footer más grande, con el logo oficial a gran escala y la aurora visible */
.footer__panel { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; gap: clamp(32px, 4.5vw, 64px); padding: clamp(40px, 6vw, 88px) clamp(26px, 5vw, 72px) clamp(26px, 3vw, 40px); background: rgba(11, 53, 85, .66); }
.footer__panel::before { content: ''; position: absolute; inset: -30%; z-index: -1; background: radial-gradient(30% 40% at 30% 30%, rgba(160, 178, 194, .38), transparent 70%), radial-gradient(35% 45% at 75% 60%, rgba(89, 128, 166, .45), transparent 70%), radial-gradient(28% 35% at 50% 90%, rgba(214, 223, 230, .22), transparent 70%); animation: aurora-drift 18s ease-in-out infinite alternate; }
@keyframes aurora-drift { 0% { transform: translate(-6%, -4%) rotate(0deg) scale(1); } 50% { transform: translate(5%, 4%) rotate(8deg) scale(1.08); } 100% { transform: translate(-3%, 6%) rotate(-6deg) scale(.96); } }
.footer__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; padding-bottom: clamp(24px, 3vw, 36px); border-bottom: 1px solid rgba(255, 255, 255, .16); }
.footer__claim { margin: 0; max-width: 30ch; font-family: var(--f-ui); font-weight: 600; font-size: clamp(1.4rem, 2.6vw, 2.2rem); line-height: 1.15; letter-spacing: -.02em; color: var(--white); }
.footer__claim .lt { display: block; }
.footer__quick { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; }
.footer__quick a { display: inline-flex; align-items: center; min-height: 46px; padding: 8px 20px; border-radius: var(--r-pill); border: 1.5px solid rgba(255, 255, 255, .4); color: var(--white); text-decoration: none; font-weight: 600; transition: background-color .3s var(--ease), color .3s var(--ease), transform .4s var(--spring); }
.footer__quick a:hover { background: var(--white); color: var(--ink); transform: translateY(-2px); }
.footer__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; padding-bottom: 0; }
.footer__list { gap: 10px; }
.footer__list a, .footer__list span, .footer__linkbtn { font-size: 1.02rem; }
.footer__linkbtn { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: color var(--t-fast) var(--ease); }
.footer__linkbtn:hover { color: var(--sky); }
.footer__giant { display: block; width: 100%; height: auto; }
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .16); }
.footer__bottom .footer__legal { margin: 0; }

/* Aviso de privacidad (consentimiento) */
.consent { position: fixed; z-index: 150; left: 20px; bottom: 20px; width: min(430px, calc(100% - 40px)); padding: 20px 22px; border-radius: var(--r-l); background: rgba(255, 255, 255, .97); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid var(--line); box-shadow: 0 30px 60px -30px rgba(11, 53, 85, .6); color: var(--ink); opacity: 0; transform: translateY(24px); transition: opacity .4s var(--ease), transform .6s var(--spring); }
.consent.is-in { opacity: 1; transform: none; }
.consent[hidden] { display: none; }
.consent__title { margin: 0 0 6px; font-family: var(--f-display); font-weight: 700; text-transform: uppercase; font-size: 1rem; }
.consent__text { margin: 0 0 14px; font-size: .88rem; line-height: 1.5; color: var(--muted); }
.consent__text a { color: var(--ink); font-weight: 600; }
.consent__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.consent__btn { flex: 1 1 150px; min-height: 46px; padding: 8px 16px; border-radius: var(--r-pill); border: 1.5px solid var(--ink); background: var(--ink); color: var(--white); font-family: var(--f-ui); font-size: .85rem; font-weight: 600; cursor: pointer; transition: background-color .3s var(--ease), color .3s var(--ease), transform .4s var(--spring); }
.consent__btn:hover { transform: translateY(-2px); background: var(--blue); border-color: var(--blue); }
.consent__btn--ghost { background: transparent; color: var(--ink); }
.consent__btn--ghost:hover { background: var(--sky-soft); color: var(--ink); border-color: var(--ink); }

/* Página del aviso de privacidad */
.legal-page { min-height: 100vh; }
.legal__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: min(900px, 100% - 2 * var(--gutter)); margin: 16px auto 0; padding: 10px 10px 10px 20px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .86); border: 1px solid var(--line); }
.legal__brand img { height: 42px; width: auto; }
.legal { width: min(900px, 100% - 2 * var(--gutter)); margin: 0 auto; padding: clamp(40px, 7vw, 80px) 0; }
.legal__lead { font-size: 1.1rem; color: #23435E; max-width: 62ch; }
.legal__toc { margin: 28px 0 40px; padding: 22px 26px; border-radius: var(--r-l); background: rgba(255, 255, 255, .86); border: 1px solid var(--line); }
.legal__toc ol { columns: 2; gap: 32px; padding-left: 1.2em; }
.legal__toc li { margin-bottom: 6px; }
.legal section { padding: 26px 0; border-top: 1px solid var(--line); }
.legal section p, .legal section li { color: #23435E; max-width: 70ch; }
.legal section ul { padding-left: 1.2em; display: grid; gap: 8px; margin-bottom: 1em; }
.legal__table { display: grid; margin: 16px 0; border-radius: var(--r-m); overflow: hidden; border: 1px solid var(--line); background: var(--white); }
.legal__row { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr) minmax(0, 1.2fr); gap: 12px; padding: 12px 16px; border-top: 1px solid var(--line); font-size: .9rem; }
.legal__row--head { border-top: 0; background: var(--ink); color: var(--white); font-weight: 600; }
.legal__foot { width: min(900px, 100% - 2 * var(--gutter)); margin: 0 auto 40px; font-size: .85rem; color: var(--muted); }

/* ── v6 · Responsive y movimiento reducido ───────── */
@media (max-width: 1180px) {
  .bento { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bento__cell--metric { grid-column: span 2; }
}
@media (max-width: 1023px) {
  .pq-split { grid-template-columns: minmax(0, 1fr); }
  .profiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .schedule { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tc:nth-child(odd).is-open .tc__photo { transform: translateX(84%) rotate(5deg); }
}
@media (max-width: 767px) {
  .bento { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .bento__cell { min-height: 190px; padding: 18px; }
  .bento__cell strong { font-size: clamp(2.8rem, 13vw, 3.6rem); }
  .bviz { top: 16px; right: 16px; transform-origin: top right; scale: .75; }
  .bviz--ring { transform: rotate(-90deg); }
  .pq-card, .pq-photo { min-height: 420px; }
  .pq-card__title { font-size: 1.75rem; }
  .profiles { grid-template-columns: minmax(0, 1fr); }
  .schedule { grid-template-columns: minmax(0, 1fr); }
  .rail__months { display: none; }
  .mega-cta { padding-left: 24px; }
  .footer__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
  .footer__top { flex-direction: column; align-items: flex-start; }
  .tc__photo { left: auto; right: 6%; top: -18%; width: 36%; }
  .tc.is-open .tc__photo, .tc:nth-child(odd).is-open .tc__photo { transform: translateY(-20%) rotate(5deg); }
  .consent { left: 12px; right: 12px; width: auto; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); padding: 16px 18px; }
  .consent__text { font-size: .82rem; margin-bottom: 12px; }
  .consent__btn { min-height: 42px; flex-basis: 120px; }
  .footer__list a, .footer__list span { overflow-wrap: anywhere; }
  .legal__toc ol { columns: 1; }
  .legal__row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .legal__row--head { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .intro { display: none !important; }
  html.intro-on { overflow: auto; }
  :is(.module__col > .micro, .rail__detail-main .micro, .rail__product .micro, .sched .micro), .cyl { animation: none; }
  .reveal .outline { clip-path: none; }
  .footer__panel::before, .bviz *, .sched__grid i, .pq-pin { animation: none !important; }
  .js-fly .hours .donut { -webkit-mask-image: none; mask-image: none; }
}

/* ── Ajustes v7 · apariciones ligadas al scroll ──── */
/* El avance --sp (0 → 1) lo calcula script.js según la posición de cada pieza; sin JS o con movimiento reducido vale 1. */
:root { --sd: 1; }
@media (max-width: 767px) { :root { --sd: .6; } }
.js-fly [data-fly]:not(#_), .js-fly [data-fly].is-flown:not(#_) { opacity: 1; transform: none; }
html.scrub-on [data-scrub] { --sp: 0; will-change: transform, opacity; }
html.scrub-measuring [data-scrub]:not(#_):not(#__) { transform: none !important; }
html.scrub-on [data-scrub]:not(#_):not(#__) { transition: translate .5s var(--spring), box-shadow .4s var(--ease), background-color .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease); }
html.scrub-on [data-scrub="rise"]:not(#_):not(#__) { opacity: var(--sp); transform: translate3d(0, calc((1 - var(--sp)) * 80px * var(--sd)), 0); }
html.scrub-on [data-scrub="line"]:not(#_):not(#__) { opacity: var(--sp); clip-path: inset(-8px calc((1 - var(--sp)) * 100%) -8px -8px); transform: translate3d(calc((1 - var(--sp)) * -28px), 0, 0); }
html.scrub-on [data-scrub="word"]:not(#_):not(#__), html.scrub-on [data-scrub="outline"]:not(#_):not(#__) { display: inline-block; max-width: 100%; opacity: var(--sp); transform: translate3d(0, calc((1 - var(--sp)) * .75em), 0) rotate(calc((1 - var(--sp)) * 4deg)); transform-origin: 0 100%; }
html.scrub-on [data-scrub="outline"]:not(#_):not(#__) { clip-path: inset(-8px calc((1 - var(--sp)) * 100% - 8px) -8px -8px round 999px); }
html.scrub-on [data-scrub="tilt"]:not(#_):not(#__) { opacity: var(--sp); transform: perspective(1100px) translate3d(0, calc((1 - var(--sp)) * 110px * var(--sd)), 0) rotateX(calc((1 - var(--sp)) * 26deg)); transform-origin: 50% 100%; }
html.scrub-on [data-scrub="card"]:not(#_):not(#__) { opacity: var(--sp); transform: translate3d(0, calc((1 - var(--sp)) * 120px * var(--sd)), 0) scale(calc(.88 + var(--sp) * .12)) rotate(calc((1 - var(--sp)) * -4deg)); }
html.scrub-on [data-scrub="left"]:not(#_):not(#__) { opacity: var(--sp); transform: translate3d(calc((1 - var(--sp)) * -120px * var(--sd)), calc((1 - var(--sp)) * 40px), 0) rotate(calc((1 - var(--sp)) * -5deg)); }
html.scrub-on [data-scrub="right"]:not(#_):not(#__) { opacity: var(--sp); transform: translate3d(calc((1 - var(--sp)) * 120px * var(--sd)), calc((1 - var(--sp)) * 40px), 0) rotate(calc((1 - var(--sp)) * 5deg)); }
html.scrub-on [data-scrub="zoom"]:not(#_):not(#__) { opacity: var(--sp); transform: scale(calc(.8 + var(--sp) * .2)); }
html.scrub-on [data-scrub="wipe"]:not(#_):not(#__) { clip-path: inset(calc((1 - var(--sp)) * 100%) -90px -90px -90px); transform: translate3d(0, calc((1 - var(--sp)) * 60px * var(--sd)), 0); }
html.scrub-on [data-scrub="wipe"] > img:first-child:not(#_) { transition: none; transform: scale(calc(1.25 - var(--sp) * .25)); }

/* Logo oficial del footer: se dibuja trazo a trazo y luego se rellena */
.footer__giant .flogo__p { fill: var(--white); stroke: var(--white); stroke-width: 1.1; stroke-linejoin: round; }
.footer__giant.is-waiting .flogo__p { fill-opacity: 0; stroke-dasharray: 1; stroke-dashoffset: 1; }
.footer__giant.is-drawn .flogo__p { animation: flogo-draw 1.5s var(--ease-smooth) forwards, flogo-fill .9s var(--ease) forwards; animation-delay: calc(var(--k) * 55ms), calc(1.25s + var(--k) * 55ms); }
.footer__giant.is-drawn .flogo__t { animation-delay: calc(1.1s + var(--k) * 45ms), calc(2.2s + var(--k) * 35ms); }
@keyframes flogo-draw { to { stroke-dashoffset: 0; } }
@keyframes flogo-fill { to { fill-opacity: 1; } }
/* Las piezas que llegan de lado no deben abrir scroll horizontal (clip no rompe los elementos sticky) */
main, .finale { overflow-x: clip; }

/* ── Ajustes v8 · scroll suave, cursor Apple y logo que se redibuja ── */
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* Cursor al estilo Apple: flecha y mano; en campos de texto vuelve el cursor del sistema */
#apple-cursor { position: fixed; top: 0; left: 0; z-index: 999999; width: 36px; height: 36px; pointer-events: none; opacity: 0; will-change: transform; transition: opacity .2s ease; }
#apple-cursor.is-on { opacity: 1; }
#apple-cursor.is-native { opacity: 0; }
#apple-cursor svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .35)); transition: opacity .18s ease, transform .22s cubic-bezier(.2, .7, .2, 1); }
#apple-cursor .cursor-arrow { opacity: 1; transform: translate(-10.5px, -6.3px) scale(1); transform-origin: 10.5px 6.3px; }
#apple-cursor .cursor-hand { opacity: 0; transform: translate(-12px, -8px) scale(.5); transform-origin: 13px 9px; }
#apple-cursor.is-hand .cursor-arrow { opacity: 0; transform: translate(-10.5px, -6.3px) scale(.5); }
#apple-cursor.is-hand .cursor-hand { opacity: 1; transform: translate(-12px, -8px) scale(1.25); }
#apple-cursor.pressing svg { transition-duration: .08s; }
#apple-cursor.pressing .cursor-arrow { transform: translate(-10.5px, -6.3px) scale(.9); }
#apple-cursor.pressing.is-hand .cursor-hand { transform: translate(-12px, -8px) scale(1.12); }
html.has-apple-cursor, html.has-apple-cursor * { cursor: none !important; }
html.has-apple-cursor :is(input:not([type="checkbox"]):not([type="radio"]), textarea, [contenteditable="true"]) { cursor: text !important; }
@media (hover: none), (pointer: coarse) { #apple-cursor { display: none; } }

/* Logo del footer: trazo más visible y dibujo un poco más lento */
.footer__giant .flogo__p { stroke-width: 1.4; }
.footer__giant.is-drawn .flogo__p { animation-duration: 1.9s, 1s; animation-delay: calc(var(--k) * 70ms), calc(1.6s + var(--k) * 60ms); }
.footer__giant.is-drawn .flogo__t { animation-delay: calc(1.3s + var(--k) * 55ms), calc(2.7s + var(--k) * 40ms); }

/* ── Ajustes v9 · rendimiento (mismo aspecto, menos repintado) ── */
/* --sp no se hereda: cambiarla en una pieza ya no recalcula el estilo de todo lo que contiene */
@property --sp { syntax: '<number>'; inherits: false; initial-value: 1; }
html.scrub-on [data-scrub="wipe"] > img:first-child { --sp: inherit; }
/* Portal del equipo: se abre con una transformación en su propia capa (antes: recorte animado) */
.portal__frame:not(#_) { clip-path: none; will-change: transform; transform-origin: 50% 15%; }
.portal__inner:not(#_) { transform: none; opacity: 1; }
.portal__frame::after { mix-blend-mode: normal; opacity: .045; }
.portal__glow { filter: none; will-change: transform; background: radial-gradient(circle, rgba(89, 128, 166, .36), rgba(148, 166, 184, .1) 42%, transparent 68%); }
/* Tarjetas docentes: brillo fijo, granulado sin mezcla de capas y hojas sin filtros */
.tc__art::before { animation: none; }
.tc__art::after { mix-blend-mode: normal; opacity: .06; }
.tc__sheet { filter: none; background: linear-gradient(rgba(0, 0, 0, .14), rgba(0, 0, 0, .14)), linear-gradient(155deg, var(--a), var(--b)); }
.tc__sheet--2 { filter: none; background: linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, .3)), linear-gradient(155deg, var(--a), var(--b)); }
/* Aurora del final: se pinta una vez y respira con transformaciones; sin desenfoque de fondo encima */
.nebula { will-change: transform; transform-origin: 50% 20%; }
.nebula.is-on { transform: none; }
.footer__panel { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(11, 53, 85, .74); }
.footer__panel::before { will-change: transform; }
.form { -webkit-backdrop-filter: none; backdrop-filter: none; }
.pq-card::after { mix-blend-mode: normal; opacity: .06; }
.intro::after { mix-blend-mode: normal; opacity: .05; }
.nebula { inset: -8% -12% -8% -12%; transition: opacity 2s cubic-bezier(.25, .1, .25, 1); }
/* Tarjetas docentes: llegan solo con desplazamiento, sin opacidad ni escala de grupo (lo más fluido) */
html.scrub-on [data-scrub="lift"]:not(#_):not(#__) { transform: translate3d(0, calc((1 - var(--sp)) * 150px * var(--sd)), 0); }
/* Variables que el scroll actualiza en cada cuadro: no heredables, para no recalcular estilos en cascada */
@property --ss { syntax: '<number>'; inherits: false; initial-value: 1; }
@property --sr { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@property --so { syntax: '<number>'; inherits: false; initial-value: 0; }
@property --mz { syntax: '<number>'; inherits: false; initial-value: 0; }
.sc { contain: layout; }
.sc::after { will-change: opacity; }
/* Portafolio de precios: sin contexto 3D (la tarjeta de atrás se encoge y oscurece; mismo efecto, mucho más fluido) */
.stack { perspective: none; }
/* FAQ: el color sólido nace del círculo del número y se expande por la pregunta (al cerrar, se recoge) */
.faq__item { position: relative; isolation: isolate; }
.faq__item::before { content: ''; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; background: linear-gradient(160deg, var(--navy), var(--ink)); clip-path: circle(0px at 41px 37px); transition: clip-path .9s cubic-bezier(.65, 0, .35, 1); pointer-events: none; }
.faq__item.is-open::before { clip-path: circle(150% at 41px 37px); }
.faq__item.is-open:not(#_) { background: var(--white); }
.faq__text, .faq__n { transition: color .45s var(--ease) .1s, background-color .45s var(--ease) .1s, border-color .45s var(--ease) .1s, transform .5s var(--spring); }
.faq__item:not(.is-open) .faq__text, .faq__item:not(.is-open) .faq__n { transition-delay: 0s; }
.faq__inner p { transition: opacity 450ms var(--ease), transform 600ms var(--ease), padding 700ms var(--ease-smooth), color .45s var(--ease) .15s; }
@media (prefers-reduced-motion: reduce) { .faq__item::before { transition: none; } }

/* ═══ v10 · Móvil fluido ═══════════════════════════════════════════
   1. Lo que no está en pantalla no anima (script.js pone .anim-off).
   2. Las animaciones en bucle usan solo transform y opacity: las resuelve la GPU sin recalcular estilos ni repintar. */
.anim-off, .anim-off *, .anim-off::before, .anim-off::after, .anim-off *::before, .anim-off *::after { animation-play-state: paused !important; }

/* Punto del eyebrow: el pulso es un anillo que escala, no una sombra que se repinta */
.eyebrow .dot { position: relative; animation: none; }
.eyebrow .dot::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: rgba(47, 111, 159, .35); animation: dot-ring 2.4s var(--ease-smooth) infinite; will-change: transform, opacity; }
@keyframes dot-ring { 0% { transform: scale(1); opacity: 1; } 50%, 100% { transform: scale(2.5); opacity: 0; } }

/* Barras del ecualizador: escalan desde la base */
.bviz--bars i { height: 100%; transform-origin: 50% 100%; animation-name: eq-s; }
@keyframes eq-s { 0% { transform: scaleY(.18); } 50% { transform: scaleY(1); } 100% { transform: scaleY(.42); } }

/* Pista: el punto viaja con translate */
.bviz--track i { animation-name: track-run-t; }
@keyframes track-run-t { 0% { transform: translateX(0); } 85%, 100% { transform: translateX(102px); } }

/* Puntos y semanas: se encienden con opacidad */
.bviz--dots i { background: var(--blue); opacity: .18; animation-name: dot-on-o; }
@keyframes dot-on-o { 0%, 100% { opacity: .18; transform: scale(1); } 20%, 45% { opacity: 1; transform: scale(1.15); } }
.sched__grid i { background: var(--white); opacity: .2; animation-name: sem-on-o; }
@keyframes sem-on-o { 0%, 100% { opacity: .2; } 25%, 55% { opacity: 1; } }

/* Franja de marca: el degradado se desliza en su propia capa */
.brand-stripe { position: relative; overflow: hidden; isolation: isolate; background: none; animation: none; }
.brand-stripe::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 400%; background: linear-gradient(90deg, var(--ink), var(--blue) 30%, var(--sky) 52%, #C9D3DC 74%, var(--azufre)) 0 0 / 50% 100% repeat-x; animation: stripe-slide 9s linear infinite; will-change: transform; }
@keyframes stripe-slide { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { .eyebrow .dot::after, .brand-stripe::before { animation: none; } }

/* Táctil: las piezas entran con una transición al aparecer (script.js pone .scrub-touch y --sp una sola vez).
   En escritorio siguen ligadas al scroll cuadro a cuadro. */
html.scrub-touch [data-scrub] { will-change: auto; }
html.scrub-touch [data-scrub]:not(#_):not(#__) { transition: transform 1s var(--ease) var(--td, 0s), opacity .75s var(--ease) var(--td, 0s), clip-path 1s var(--ease) var(--td, 0s), translate .5s var(--spring), box-shadow .4s var(--ease), background-color .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease); }
html.scrub-touch [data-scrub="wipe"] > img:first-child:not(#_):not(#__) { transition: transform 1.4s var(--ease) var(--td, 0s); }

/* Pantallas táctiles: sin desenfoque de fondo en la barra y el dock (se recalcula en cada cuadro del scroll);
   un blanco casi opaco se ve igual de limpio. Los textos que se abren con clip-path solo se deslizan y aparecen. */
@media not all and (hover: hover) and (pointer: fine) {
  .nav__pill, .nav.is-scrolled .nav__pill { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(255, 255, 255, .96); }
  .dock { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(255, 255, 255, .97); }
  html.scrub-touch [data-scrub="line"]:not(#_):not(#__), html.scrub-touch [data-scrub="outline"]:not(#_):not(#__) { clip-path: none; }
}
@property --pd { syntax: '<number>'; inherits: false; initial-value: 1; }

/* ═══ v11 · Fotos reales del diplomado ═══════════════════════════ */
/* Encuadres: las caras quedan dentro del recorte en cada formato */
.hero__photo img { object-position: 50% 40%; }
.pq-photo > img:first-child { object-position: 50% 28%; }
.sc__media img { object-position: 50% 32%; }
.card3d__img img { object-position: 50% 38%; }

/* Alianza: la foto de la firma comparte fila con el encabezado; los logos pasan a la segunda fila */
.ally3 { grid-template-areas: "head head head head ph ph" "fm fm fm un un un" "pts pts pts pts pts pts"; }
.ab--photo { grid-area: ph; overflow: hidden; min-height: 340px; box-shadow: var(--sh-panel); background: var(--sky-soft); }
.ab--photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
@media (max-width: 1023px) {
  .ally3 { grid-template-areas: "head head" "ph ph" "fm un" "pts pts"; }
  .ab--photo { min-height: 0; aspect-ratio: 16 / 10; }
}
@media (max-width: 767px) {
  .ally3 { grid-template-areas: "head" "ph" "fm" "un" "pts"; }
  .ab--photo { aspect-ratio: 4 / 3.4; }
}
@media (max-width: 767px) {
  /* La tarjeta de inicio va debajo de la foto, montada solo sobre su borde: la foto se ve completa */
  .hero__photo { aspect-ratio: 1 / 1; }
  .hero__photo img { object-position: 50% 30%; }
  .now-card:not(#_) { position: relative; left: auto; bottom: auto; margin: -56px 16px 0; width: auto; }
}

/* ═══ v12 · Desplegables fluidos en pantallas táctiles ═══════════════
   Animar la altura obliga al teléfono a recalcular y repintar todo lo que queda debajo en cada cuadro.
   En táctil el espacio se abre de una vez y el contenido entra con fundido y deslizamiento (GPU).
   En escritorio se mantiene la apertura por altura. */
@media not all and (hover: hover) and (pointer: fine) {
  .module__panel, .faq__a, .tc__more, .mb__more { transition: none; }
  .module .module__inner, .faq__inner p, .tc__more-in, .mb__more-in { transform: translateY(14px); }
  .module .module__inner { transition: opacity .45s var(--ease), transform .6s var(--ease); }
  .faq__inner p { transition: opacity .45s var(--ease), transform .6s var(--ease), color .45s var(--ease) .15s; }
  .tc__more-in, .mb__more-in { transition: opacity .45s var(--ease), transform .6s var(--ease); }
  .module.is-open .module__inner, .faq__item.is-open .faq__inner p, .tc.is-open .tc__more-in, .mb.is-open .mb__more-in { transform: none; transition-delay: 40ms; transition-duration: .45s, .6s; }
  .faq__item.is-open .faq__inner p { transition-duration: .45s, .6s, .45s; transition-delay: 40ms, 40ms, .15s; }
  /* Texto que se escribe solo: en táctil cada letra aparece sin transición propia (como una máquina de escribir).
     Con transición, cada letra creaba una capa nueva mientras se escribía y el teléfono no daba abasto. */
  .tw .ch { transform: none; transition: none; }
}

/* ═══ v13 · Más fotos reales: el aval en persona y la galería de egresados ═══ */
.cert-photos { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.35fr); gap: 16px; margin-top: clamp(32px, 4vw, 56px); }
.cert-photo { position: relative; margin: 0; min-height: clamp(300px, 30vw, 420px); border-radius: var(--r-l); overflow: hidden; box-shadow: var(--sh-panel); background: var(--sky-soft); }
.cert-photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cert-photo--tall > img { object-position: 50% 30%; }
.cert-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(11, 53, 85, .78), rgba(11, 53, 85, 0) 55%); pointer-events: none; }
.cert-photo figcaption { position: absolute; z-index: 1; left: 22px; right: 22px; bottom: 20px; display: grid; gap: 4px; color: var(--white); font-size: .92rem; }
.cert-photo figcaption strong { font-family: var(--f-ui); font-weight: 600; font-size: clamp(1.25rem, 2vw, 1.6rem); line-height: 1.1; }

.grads__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 16px; height: clamp(420px, 44vw, 600px); }
.grads__ph { position: relative; margin: 0; border-radius: var(--r-l); overflow: hidden; box-shadow: var(--sh-card); background: var(--sky-soft); }
.grads__ph--tall { grid-row: span 2; }
.grads__ph > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }

@media (max-width: 767px) {
  .cert-photos { grid-template-columns: minmax(0, 1fr); }
  .cert-photo { min-height: 0; aspect-ratio: 4 / 3.4; }
  /* Galería en carrusel: se desliza con el dedo, sin alargar la página */
  .grads__grid { display: flex; height: auto; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(var(--gutter) * -1); padding: 4px var(--gutter) 14px; scrollbar-width: none; overscroll-behavior-x: contain; }
  .grads__grid::-webkit-scrollbar { display: none; }
  .grads__ph { flex: 0 0 82%; aspect-ratio: 4 / 5; scroll-snap-align: center; }
}