/* =========================================================
   MentorU · Hero v2 (estructura inspirada en jasper.ai)
   Base: Guía de estilo rápida uso web MentorU 2026
   ========================================================= */

@font-face { font-family: "Nohemi"; src: url("../assets/fonts/nohemi-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Nohemi"; src: url("../assets/fonts/nohemi-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("../assets/fonts/atkinson-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("../assets/fonts/atkinson-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  /* Paleta base (80–90 % de la composición) */
  --raiz: #013440;
  --circuito: #057891;
  --coral: #F2845C;
  --claridad: #CEE0E0;
  /* Escalas y apoyo */
  --raiz-400: #326773;
  --raiz-600: #012A34;
  --circuito-100: #E6EEF0;
  --coral-100: #FEF3EF;
  --coral-600: #C26A4A;
  --brote: #ABD966;
  --mente: #AD82D9;
  --success: #258327;
  --offwhite: #F3F8F8;
  --white: #FFFFFF;
  --border: #C3D6D6;

  --font-display: "Nohemi", "Outfit", system-ui, sans-serif;
  --font-body: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Guía: radios 12 control · 16 panel · 20 card */
  --r-control: 12px;
  --r-panel: 16px;
  --r-card: 20px;
  --container: 1080px;
  --container-text: 1000px;
  --ease: cubic-bezier(.22, .8, .2, 1);
  --slide-ms: 6500ms;

  /* Silueta del isotipo (trazado oficial) para máscaras */
  --isotipo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 185.732 190'%3E%3Cpath d='M20.1886 171.944C14.4424 180.513 22.139 190 30.5984 190H12.1083C3.32452 190 -2.4765 179.211 1.04522 169.559L57.7033 60.5232C62.6365 51.0908 73.7543 50.0585 79.8248 58.5179L96.6889 81.996L90.3991 89.3684L21.2711 170.537C20.892 171.026 20.5129 171.46 20.184 171.948L20.1886 171.944Z'/%3E%3Cpath d='M185.723 14.2703V180.508C185.668 187.068 177.213 189.89 172.874 184.898L122.072 126.938C120.121 124.713 117.463 123.521 114.809 123.466C114.485 123.466 114.106 123.412 113.781 123.521C111.776 123.576 109.876 124.334 108.25 125.746L38.359 186.958C35.9746 189.073 33.2614 189.995 30.6076 189.995C22.1481 189.995 14.4515 180.508 20.1977 171.939C20.522 171.45 20.9011 171.017 21.2848 170.528L90.4128 89.3592L96.7026 81.9869L121.537 52.7626L163.775 4.34466C171.746 -4.8182 185.732 1.47156 185.732 14.2658L185.723 14.2703Z'/%3E%3C/svg%3E");

  /* Ruido fino (grano) para los gradientes del menú */
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='3' intercept='-1.1'/%3E%3CfeFuncG type='linear' slope='3' intercept='-1.1'/%3E%3CfeFuncB type='linear' slope='3' intercept='-1.1'/%3E%3CfeFuncA type='linear' slope='0' intercept='1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* Grano suave (bajo contraste) para superficies pequeñas con texto encima */
  --noise-suave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='.9' intercept='-.16'/%3E%3CfeFuncG type='linear' slope='.9' intercept='-.16'/%3E%3CfeFuncB type='linear' slope='.9' intercept='-.16'/%3E%3CfeFuncA type='linear' slope='0' intercept='1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* Halftone suave reutilizable */
  --dots: radial-gradient(circle at center, currentColor 1.15px, transparent 1.6px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 23px;
  color: var(--raiz);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--circuito); outline-offset: 3px; border-radius: 6px; }

/* ---------- Botones (alto mínimo 44 px) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 48px; padding: 0 24px;
  font-family: var(--font-body); font-weight: 700; font-size: 16px;
  border-radius: var(--r-control);
  border: 1.5px solid transparent;
  transition: transform .2s var(--ease), background-color .2s, color .2s, border-color .2s, box-shadow .25s var(--ease);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
/* Grano suave en todos los botones, sea cual sea su color: va bajo el texto y se mezcla con el fondo del botón */
.btn { position: relative; isolation: isolate; }
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  border-radius: inherit;
  background: var(--noise-suave) 0 0 / 140px 140px;
  mix-blend-mode: soft-light;
}
/* Sombra del color del botón, como Contacto */
.btn--primary { background: var(--raiz); color: var(--white); box-shadow: 0 8px 20px -12px rgba(1, 52, 64, .8); }
/* En colores muy oscuros o muy claros el soft-light casi no se nota: grano puntual con screen / multiply */
.btn--primary::before { background: var(--noise) 0 0 / 180px 180px; mix-blend-mode: screen; opacity: .18; }
.btn--primary:hover { background: var(--raiz-600); box-shadow: 0 12px 24px -12px rgba(1, 52, 64, .9); }
/* Fondo opaco para que el grano se mezcle sólo con el botón */
.btn--secondary { border-color: var(--circuito); color: var(--circuito); background: #F4F9F9; box-shadow: 0 8px 20px -12px rgba(5, 120, 145, .7); }
.btn--secondary::before { background: var(--noise) 0 0 / 180px 180px; mix-blend-mode: multiply; opacity: .12; }
.btn--secondary:hover { background: var(--circuito); color: var(--white); box-shadow: 0 12px 24px -12px rgba(5, 120, 145, .85); }

/* ---------- Nav flotante ---------- */
.nav {
  position: fixed; top: 16px; left: 0; right: 0; z-index: 50;
  padding: 0 16px;
  pointer-events: none;
}
.nav__inner {
  pointer-events: auto;
  max-width: var(--container); margin: 0 auto; height: 64px; padding: 0 12px 0 20px;
  display: flex; align-items: center; gap: 24px;
  background: rgba(255,255,255,.82);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border: 1px solid rgba(195,214,214,.7);
  border-radius: var(--r-card);
  box-shadow: 0 10px 30px -22px rgba(1,52,64,.45);
  transition: box-shadow .3s, background-color .3s;
}
.nav.is-scrolled .nav__inner { background: rgba(255,255,255,.94); box-shadow: 0 14px 34px -20px rgba(1,52,64,.5); }
.nav__logo, .nav__logo picture { display: block; }
.nav__logo img { height: 32px; width: auto; }
.nav__inner { display: grid; grid-template-columns: 1fr auto 1fr; position: relative; }
/* Sin position: el mega menú y la píldora se ubican respecto de toda la barra (.nav__inner) */
.nav__links { display: flex; align-items: center; gap: 2px; font-size: 15px; }

.nav__link {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: 6px;
  height: 38px; padding: 0 13px;
  border: 0; border-radius: var(--r-control); background: none;
  font: inherit; font-size: 15px; color: var(--raiz);
  cursor: pointer;
  transition: color .25s var(--ease);
}
/* Hover tipo Jasper: un fondo Chispa Coral que crece de izquierda a derecha y se recoge hacia la derecha */
.nav__link { isolation: isolate; transition: color .35s var(--ease) .05s; }
.nav__link::before {
  content: ""; position: absolute; inset: 5px 2px; z-index: -1;
  border-radius: 10px;
  /* Chispa Coral con un grano suave mezclado (no compite con el texto blanco) */
  background: var(--noise-suave) 0 0 / 140px 140px, var(--coral);
  background-blend-mode: soft-light;
  transform: scaleX(0); transform-origin: right center;
  transition: transform .55s cubic-bezier(.65, 0, .35, 1);
}
.nav__link:hover::before, .nav__link:focus-visible::before,
.nav__item--mega.is-open > .nav__link::before { transform: scaleX(1); transform-origin: left center; }
.nav__link:hover, .nav__link:focus-visible, .nav__item--mega.is-open > .nav__link { color: var(--white); }
.nav__ico { display: none; }
.nav__chev { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .35s var(--ease); }
.nav__item--mega.is-open .nav__chev { transform: rotate(180deg); }
.nav__actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
/* Botón Contacto: Chispa Coral con texto blanco (el grano viene de .btn) */
.btn--contacto {
  min-height: 42px; padding: 0 20px;
  font-size: 15px; color: var(--white);
  background: var(--coral);
  box-shadow: 0 8px 20px -12px rgba(194, 106, 74, .8);
  transition: transform .2s var(--ease), box-shadow .25s var(--ease), filter .25s;
}
.btn--contacto:hover { filter: brightness(1.05) saturate(1.05); box-shadow: 0 12px 24px -12px rgba(194, 106, 74, .9); }
.nav__toggle { display: none; }

/* Fondo atenuado mientras el mega menú está abierto */
.nav__scrim {
  position: fixed; inset: 0; z-index: -1;
  background: rgba(1, 52, 64, .26);
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  opacity: 0; visibility: hidden;
  transition: opacity .35s var(--ease), visibility 0s .35s;
  pointer-events: auto;
}
.nav.is-mega .nav__scrim { opacity: 1; visibility: visible; transition: opacity .35s var(--ease); }

/* ---------- Mega menú Programas ---------- */
.mega {
  position: absolute; top: calc(100% + 10px); left: 0; right: 0;
  padding: 18px;
  background: var(--white);
  border: 1px solid rgba(195, 214, 214, .8);
  border-radius: var(--r-card);
  box-shadow: 0 40px 80px -40px rgba(1, 52, 64, .55);
  opacity: 0; visibility: hidden;
  transform: translateY(-8px);
  clip-path: inset(-60px -60px 100% -60px);
  transition: opacity .3s var(--ease), transform .45s var(--ease), clip-path .55s cubic-bezier(.3, .9, .3, 1), visibility 0s .55s;
  pointer-events: auto;
}
.nav__item--mega.is-open .mega {
  opacity: 1; visibility: visible; transform: none;
  clip-path: inset(-60px -60px -100px -60px);
  transition: opacity .3s var(--ease), transform .45s var(--ease), clip-path .55s cubic-bezier(.3, .9, .3, 1), visibility 0s;
}
.mega__grid { display: grid; grid-template-columns: 1fr 1.7fr; gap: 18px; }
.mega__programs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* Aparición escalonada del contenido */
.mega__feature, .mega__programs > * { opacity: 0; transform: translateY(6px); transition: opacity .35s var(--ease), transform .45s var(--ease); }
.nav__item--mega.is-open .mega__feature, .nav__item--mega.is-open .mega__programs > * { opacity: 1; transform: none; }
.nav__item--mega.is-open .mega__programs > :nth-child(1) { transition-delay: .05s; }
.nav__item--mega.is-open .mega__programs > :nth-child(2) { transition-delay: .1s; }
.nav__item--mega.is-open .mega__programs > :nth-child(3) { transition-delay: .15s; }
.nav__item--mega.is-open .mega__programs > :nth-child(4) { transition-delay: .2s; }

/* Tarjeta destacada sobre gradiente de marca */
.mega__feature {
  position: relative; display: flex; align-items: center; justify-content: center;
  padding: 22px;
  border-radius: var(--r-panel); overflow: hidden;
  background-image: url("../assets/img/menu/destacado.webp");
}
.mega__feature-card {
  position: relative; display: block;
  padding: 16px 16px 18px;
  background: var(--white); border-radius: var(--r-control);
  box-shadow: 0 16px 30px -20px rgba(1, 52, 64, .5);
  transition: transform .35s var(--ease);
}
.mega__feature:hover .mega__feature-card { transform: translateY(-4px); }
.mega__tag { display: inline-block; padding: 3px 8px; border-radius: 6px; background: var(--coral); color: var(--raiz); font-size: 11px; line-height: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.mega__feature-title { display: block; margin: 10px 0 6px; font-family: var(--font-display); font-weight: 700; font-size: 26px; line-height: 28px; letter-spacing: -0.01em; }
.mega__feature-text { display: block; font-size: 14px; line-height: 20px; color: var(--raiz-400); }
.mega__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.mega__chips span { padding: 3px 10px; border: 1px solid var(--border); border-radius: 999px; font-size: 12px; line-height: 16px; color: var(--raiz-400); }
.mega__more { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-weight: 700; font-size: 14px; color: var(--circuito); }
.mega__more svg, .mega__footer svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s var(--ease); }
.mega__feature:hover .mega__more svg, .mega__footer:hover svg { transform: translateX(3px); }

/* Columnas de programas */
.mega__card {
  display: block; overflow: hidden;
  border: 1px solid var(--circuito-100); border-radius: 14px;
  background: var(--offwhite);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.mega__card:not(.is-disabled):hover { transform: translateY(-3px); border-color: var(--coral); box-shadow: 0 20px 34px -24px rgba(1, 52, 64, .55); }
/* Programas próximamente: visibles pero deshabilitados */
.mega__card.is-disabled { cursor: not-allowed; background: #F7F9F9; }
.mega__card.is-disabled .mega__art { filter: grayscale(.75) brightness(1.05); opacity: .55; }
.mega__card.is-disabled .mega__icon { color: var(--raiz-400); }
.mega__card.is-disabled .mega__card-title { color: var(--raiz-400); }
.mega__art { position: relative; display: block; height: 96px; }

/* Gradientes vivos: se desplazan lento mientras el menú está abierto, con un grano muy sutil encima */
.mega__feature, .mega__art {
  background-size: 170% 170%; background-position: 0% 30%;
  animation: gradiente-vivo 14s ease-in-out infinite alternate paused;
}
.nav__item--mega.is-open .mega__feature, .nav__item--mega.is-open .mega__art { animation-play-state: running; }
/* Tarjeta con fotografía: fija y encuadrada en los rostros (sin desplazamiento) */
.mega__art--foto { height: 150px; background-size: cover; background-position: 50% 40%; animation: none; }
.mega__card:hover .mega__art--foto { background-position: 50% 32%; transition: background-position .6s var(--ease); }
@keyframes gradiente-vivo {
  0%   { background-position: 0% 30%; }
  50%  { background-position: 70% 90%; }
  100% { background-position: 100% 20%; }
}
.mega__feature::after, .mega__art::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: var(--noise); background-size: 180px 180px;
  opacity: .22; mix-blend-mode: overlay;
}
.mega__feature::after { opacity: .3; }
.mega__icon {
  position: absolute; left: 12px; bottom: 12px; z-index: 1;
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--white); color: var(--raiz);
  box-shadow: 0 6px 14px -6px rgba(1, 52, 64, .45);
}
.mega__icon svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.mega__card { display: flex; flex-direction: column; }
.mega__art { flex: 1 0 auto; min-height: 96px; }
.mega__card-body { display: block; padding: 12px 14px 14px; }
.mega__card-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-family: var(--font-display); font-weight: 700; font-size: 17px; line-height: 21px; }
.mega__card-text { display: block; margin-top: 4px; font-size: 13px; line-height: 18px; color: var(--raiz-400); }
.mega__status--on { display: inline-block; margin-top: 8px; padding: 2px 8px; border-radius: 999px; background: #E3F2D6; color: var(--success); font-size: 12px; line-height: 16px; font-weight: 700; }
.mega__soon { display: inline-block; margin-top: 8px; padding: 2px 8px; border-radius: 999px; background: var(--coral-100); color: var(--coral-600); font-size: 12px; line-height: 16px; font-weight: 700; }
.mega__arrow { flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s var(--ease); }
.mega__card:hover .mega__arrow { transform: translateX(3px); }
.mega__footer {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 16px; padding: 12px 16px;
  border-radius: var(--r-control); background: var(--offwhite);
  font-size: 14px; line-height: 18px;
  transition: background-color .25s, color .25s;
}
.mega__footer:hover { background: var(--raiz); color: var(--white); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  padding: 152px 24px 0;
  background: var(--offwhite);
  isolation: isolate;
}
.hero__bg {
  position: absolute; inset: 0; z-index: -2;
  background: url("../assets/img/hero/gradiente-hero.webp") center 30% / cover no-repeat, var(--offwhite);
}

.hero__head { position: relative; max-width: var(--container-text); margin: 0 auto; text-align: center; }

.announce {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 6px 14px 6px 6px;
  background: rgba(255,255,255,.85); border: 1px solid var(--border); border-radius: var(--r-control);
  font-size: 14px; line-height: 20px;
  transition: border-color .2s, transform .2s var(--ease);
}
.announce:hover { border-color: var(--circuito); transform: translateY(-1px); }
.announce__tag {
  background: var(--raiz); color: var(--white); font-weight: 700; font-size: 12px; line-height: 14px;
  letter-spacing: .08em; text-transform: uppercase; padding: 5px 9px; border-radius: 8px;
}
.announce__cta { display: inline-flex; align-items: center; gap: 4px; color: var(--circuito); font-weight: 700; }
.announce__cta svg { transition: transform .2s var(--ease); }
.announce:hover .announce__cta svg { transform: translateX(3px); }

/* Guía: Display (H1 desktop) 62/68 · H1 móvil 42/50 */
.hero__title {
  margin: 24px auto 0;
  max-width: 920px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 62px;
  line-height: 68px;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.hl { position: relative; display: inline-block; color: var(--circuito); white-space: nowrap; }
.hl__line {
  position: absolute; left: -2%; bottom: -.14em; width: 104%; height: .26em;
  fill: none; stroke: var(--coral); stroke-width: 6; stroke-linecap: round;
  stroke-dasharray: 320; stroke-dashoffset: 320;
  animation: draw 1.1s .6s var(--ease) forwards;
}
@keyframes draw { to { stroke-dashoffset: 0; } }

/* Guía: Body L 18/25 */
.hero__sub {
  max-width: 640px; margin: 20px auto 0;
  font-size: 18px; line-height: 25px;
  color: var(--raiz-400);
  text-wrap: pretty;
}
.hero__ctas { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* Entrada del encabezado */
.hero__head > * { opacity: 0; transform: translateY(16px); animation: rise .8s var(--ease) forwards; }
.hero__head > :nth-child(2) { animation-delay: .08s; }
.hero__head > :nth-child(3) { animation-delay: .16s; }
.hero__head > :nth-child(4) { animation-delay: .24s; }
@keyframes rise { to { opacity: 1; transform: none; } }

/* ---------- Escena (sin marco: personas en PNG sobre formas de marca) ---------- */
.scene {
  position: relative;
  height: 500px;
  margin: 40px -24px 0;
  opacity: 0; animation: fade-in 1s .35s var(--ease) forwards;
}
@keyframes fade-in { to { opacity: 1; } }

/* Carrusel tipo Jasper: las capas de cada escena (forma, persona, tarjetas) se deslizan
   en horizontal con velocidades distintas. El movimiento lo hace hero.js con la propiedad
   `translate`, que no interfiere con los `transform` propios de cada capa. */
.slide {
  position: absolute; inset: 0; pointer-events: none;
  visibility: hidden;
}
.slide.is-active, .slide.is-leaving { visibility: visible; }
.slide.is-active { pointer-events: auto; z-index: 2; }
.slide.is-leaving { z-index: 1; }

/* Formas de marca detrás de la persona */
.shape {
  position: absolute; left: 50%; bottom: 0;
  background: var(--tone);
  color: var(--tone-ink);
  transform: translateX(var(--x, -50%)) rotate(var(--rot, 0deg));
}
/* halftone suave dentro de la forma, desvanecido hacia arriba */
.shape::after {
  content: ""; position: absolute; inset: 0;
  background-image: var(--dots);
  background-size: 10px 10px;
  opacity: .45;
  -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 75%);
          mask-image: linear-gradient(to top, #000 0%, transparent 75%);
}

.shape--iso {
  width: 430px; height: 440px; --x: -38%; bottom: -24px;
  -webkit-mask: var(--isotipo) center / contain no-repeat;
          mask: var(--isotipo) center / contain no-repeat;
}
.shape--iso-left { --x: -66%; }
.shape--square { width: 380px; height: 380px; bottom: 34px; border-radius: 56px; --rot: 5deg; }
.shape--tilt { --rot: -6deg; width: 400px; height: 360px; }
.shape--pill { width: 720px; height: 300px; bottom: -40px; border-radius: 160px; }

/* Persona recortada: encuadre tipo Jasper, el borde del hero la corta a la altura del pecho.
   --h = alto de la imagen; --visible = alto que se ve dentro de la escena */
.scene { --visible: 480px; }
.person {
  position: absolute; left: 50%;
  --size: var(--h, 470px);
  height: var(--size); width: auto; max-width: none;
  bottom: calc(var(--visible) - var(--size));
  transform: translateX(-50%);
  filter: drop-shadow(0 24px 30px rgba(1,52,64,.18));
  user-select: none; -webkit-user-drag: none;
}

/* Tarjetas flotantes */
.card, .chip {
  position: absolute; z-index: 2;
  background: var(--white);
  border: 1px solid rgba(195,214,214,.8);
  border-radius: var(--r-card);
  box-shadow: 0 24px 50px -30px rgba(1,52,64,.55);
  transition: opacity .45s var(--ease), transform .55s cubic-bezier(.34, 1.56, .64, 1);
}
.card--stat, .chip { opacity: 0; transform: scale(.88); }
.slide.is-active .card--stat, .slide.is-active .chip,
.slide.is-leaving .card--stat, .slide.is-leaving .chip { opacity: 1; transform: none; }
.slide.is-active .card--stat { transition-delay: 1.2s; }
.slide.is-active .chip { transition-delay: 1.4s; }
.slide.is-leaving .card, .slide.is-leaving .chip { transition: none; }

.card--prompt {
  left: calc(50% - 540px); top: 150px; width: 340px;
  display: flex; gap: 14px; align-items: flex-start;
  padding: 20px 22px 22px;
}
.badge {
  flex: none; width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; background: var(--raiz);
}
.badge img { width: 20px; height: 20px; }
/* Guía: H3 26/36 */
.prompt {
  margin: 0; min-height: 108px;
  font-family: var(--font-display); font-weight: 700;
  font-size: 26px; line-height: 32px; letter-spacing: -0.01em;
}
.caret {
  display: inline-block; width: 2px; height: .9em; margin-left: 3px;
  background: var(--coral); vertical-align: -0.08em;
  animation: blink 1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

.card--stat {
  left: calc(50% + 250px); top: 40px; width: 260px;
  display: flex; flex-direction: column; gap: 4px;
  padding: 22px 24px 24px;
  background: var(--raiz); color: var(--white); border-color: var(--raiz);
}
/* Grano muy sutil sobre el Raíz (va bajo el texto) */
.card--stat::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  border-radius: inherit;
  background: var(--noise) 0 0 / 180px 180px;
  mix-blend-mode: screen; opacity: .1;
}
.stat__num {
  font-family: var(--font-display); font-weight: 700;
  font-size: 62px; line-height: 64px; letter-spacing: -0.03em;
  color: var(--coral);
  font-variant-numeric: tabular-nums;
}
.stat__label { font-family: var(--font-display); font-weight: 500; font-size: 20px; line-height: 25px; }
.stat__note { margin-top: 6px; font-size: 13px; line-height: 17px; color: var(--claridad); }

.chip {
  left: calc(50% + 230px); top: 300px; max-width: 280px;
  display: flex; gap: 10px; align-items: center;
  padding: 12px 16px; border-radius: var(--r-panel);
  font-size: 14px; line-height: 19px;
}
.chip b { display: block; font-size: 14px; }
.chip__icon { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--coral-100); color: var(--coral-600); }
.chip__icon--live { position: relative; }
.chip__icon--live::after { content: ""; position: absolute; right: 0; top: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--success); border: 2px solid var(--white); }
.chip--bubble { display: block; border-bottom-left-radius: 4px; }
.chip__who { display: block; font-size: 12px; line-height: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mente); margin-bottom: 4px; }
.chip--quote { display: block; margin: 0; }
.chip--quote blockquote { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: 16px; line-height: 21px; }
.chip--quote figcaption { margin-top: 6px; font-size: 12px; line-height: 14px; color: var(--raiz-400); }
.chip--progress { display: grid; gap: 8px; width: 240px; }
.chip--program { display: grid; gap: 6px; justify-items: start; }
.chip__tag { font-size: 12px; line-height: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 4px 8px; border-radius: 6px; background: var(--raiz); color: var(--white); }
.chip--program b { font-family: var(--font-display); font-weight: 700; font-size: 18px; line-height: 22px; }
.chip__skills { display: flex; flex-wrap: wrap; gap: 6px; }
.chip__skills span { font-size: 12px; line-height: 14px; padding: 4px 10px; border: 1px solid var(--border); border-radius: 999px; color: var(--raiz-400); }
.meter { display: block; height: 8px; border-radius: 8px; background: var(--circuito-100); overflow: hidden; }
.meter i { display: block; height: 100%; width: var(--w); border-radius: 8px; background: var(--success); transform-origin: left; transform: scaleX(0); transition: transform 1.2s var(--ease); }
.slide.is-active .meter i { transform: scaleX(1); transition-delay: 1.6s; }
.slide.is-active .meter:nth-of-type(2) i { transition-delay: 1.75s; }
.slide.is-active .meter:nth-of-type(3) i { transition-delay: 1.9s; }


/* ---------- Halftone animado (canvas a todo el ancho) ---------- */
.halftone {
  position: absolute; inset: 0; z-index: -1;
  width: 100%; height: 100%;
  pointer-events: none;
}

/* Cursor que recorre las tarjetas de la escena */
.ghost-cursor {
  position: absolute; left: 0; top: 0; z-index: 6;
  width: 26px; height: 26px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .5s var(--ease);
  filter: drop-shadow(0 3px 4px rgba(1,52,64,.3));
  will-change: transform;
}
.ghost-cursor.is-visible { opacity: 1; }
.ghost-cursor svg { display: block; transition: transform .18s var(--ease); transform-origin: 5px 3px; }
.ghost-cursor.is-click svg { transform: scale(.82); }

/* Tarjeta señalada por el cursor */
.slide.is-active .card, .slide.is-active .chip { transition: opacity .6s var(--ease), transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s; }
.slide.is-active .is-pointed { transform: translateY(-6px); box-shadow: 0 30px 60px -28px rgba(1,52,64,.6); border-color: var(--coral); }
.slide.is-active .card--stat.is-pointed { border-color: var(--coral); }
/* Tras la entrada, quitar los retrasos para que el cursor responda al instante */
.slide.is-active.is-settled .card, .slide.is-active.is-settled .chip { transition-delay: 0s; }

/* ---------- Logos ---------- */
.logos { padding: 56px 0 72px; background: var(--white); text-align: center; }
.logos__title {
  margin: 0 0 32px; padding: 0 24px;
  font-family: var(--font-display); font-weight: 500; font-size: 22px; line-height: 28px; letter-spacing: -0.01em;
}
.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee__track { display: flex; align-items: center; gap: 88px; width: max-content; padding-right: 88px; animation: marquee 32s linear infinite; will-change: transform; }
.marquee__track img { flex: none; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__track img { width: auto; filter: grayscale(1); opacity: .75; transition: filter .3s, opacity .3s; }
.marquee__track img:hover { filter: none; opacity: 1; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Metodología (tarjetas ilustradas) ---------- */
.metodologia { padding: 120px 24px; background: var(--white); }
.metodologia__inner { max-width: var(--container); margin: 0 auto; }
.metodologia__head { max-width: 860px; margin: 0 auto 48px; text-align: center; }
.metodologia__eyebrow {
  display: inline-block; margin-bottom: 14px;
  font-size: 12px; line-height: 14px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--circuito);
}
/* Guía: H2 grande 52/62 (32 en móvil) */
.metodologia__title { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 52px; line-height: 62px; letter-spacing: -0.02em; text-wrap: balance; }
.metodologia__sub { margin: 14px 0 0; font-size: 18px; line-height: 25px; color: var(--raiz-400); }

.metodologia__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 56px 24px; }

/* Eyebrow con el mismo subrayado del título del hero (se dibuja al aparecer) */
.metodologia__eyebrow { position: relative; padding-bottom: 6px; }
.metodologia__eyebrow .hl__line { bottom: -3px; height: 7px; stroke-width: 9; animation: none; }
.metodologia__head.is-visible .hl__line { animation: draw 1.1s .45s var(--ease) forwards; }

/* Paleta por metodología (colores de apoyo para diferenciar categorías) */
.metodo--mente    { --tinte: #F7F2FB; --arte: #EBE0F6; --grilla: #D6C0EC; --acento: #AD82D9; --acento-claro: #EBE0F6; --acento-osc: #684E82; }
.metodo--coral    { --tinte: #FEF3EF; --arte: #FCE0D6; --grilla: #F8C2AE; --acento: #F2845C; --acento-claro: #FCE0D6; --acento-osc: #C26A4A; }
.metodo--circuito { --tinte: #EEF4F5; --arte: #DCE9EB; --grilla: #B4CFD4; --acento: #057891; --acento-claro: #CEE0E0; --acento-osc: #023541; }
.metodo--brote    { --tinte: #F5FAEC; --arte: #E6F3D3; --grilla: #C9E59E; --acento: #ABD966; --acento-claro: #E3F2D0; --acento-osc: #258327; }

.metodo { display: flex; flex-direction: column; }
/* Guía: H3 26/36 */
.metodo__titulo { margin: 0; padding: 22px 22px 16px; font-family: var(--font-display); font-weight: 700; font-size: 24px; line-height: 30px; letter-spacing: -0.01em; min-height: 98px; }

/* Área gráfica: imagen editorial + trazos imperfectos animados encima */
.metodo__arte {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--arte);
  border-radius: var(--r-card); isolation: isolate;
}
.metodo__img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  animation: respirar 16s ease-in-out infinite alternate;
}
@keyframes respirar { from { transform: scale(1); } to { transform: scale(1.04); } }
.metodo__trazos { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; animation: respirar 16s ease-in-out infinite alternate; }
.metodo__texto { margin: 0; padding: 18px 22px 24px; font-size: 16px; line-height: 23px; color: var(--raiz); }



/* Tarjeta sin fondo: imagen arriba, título y texto abajo (Guía: H3 26/36, Body L 18/25) */
.metodo__titulo { padding: 22px 4px 0; font-size: 26px; line-height: 36px; min-height: 0; }
.metodo__texto { padding: 6px 4px 0; font-size: 18px; line-height: 25px; color: var(--raiz-400); }

/* Trazo imperfecto (línea a mano) */
.metodo__trazos .linea { fill: none; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.metodo__trazos .linea.fino { stroke-width: 1.6; opacity: .55; }
.metodo__trazos .gruesa { stroke-width: 6; }
.metodo__trazos .muy-gruesa { stroke-width: 9; }
.metodo__trazos .raiz { stroke: var(--raiz); }
.metodo__trazos .coral { stroke: var(--coral); }
.metodo__trazos .mente { stroke: #C2A1E2; }
.metodo__trazos .brote { stroke: #ABD966; }
.metodo__trazos .blanca { stroke: var(--white); }
.metodo__trazos .rell-raiz { fill: var(--raiz); }
.metodo__trazos .rell-coral { fill: var(--coral); }
.metodo__trazos .rell-mente { fill: #C2A1E2; }
.metodo__trazos .rell-brote { fill: #ABD966; }
.metodo__trazos .rell-blanco { fill: var(--white); }
.metodo__trazos .rell-claridad { fill: var(--claridad); }
/* Líneas técnicas (Mentorías con IA) */
.metodo__trazos .tec { fill: none; stroke: var(--claridad); stroke-width: 1.4; opacity: .45; }
.metodo__trazos .guion { stroke-dasharray: 8 10; animation: fluir 2.4s linear infinite; opacity: .8; }
.metodo__trazos .etq { font-family: var(--font-body); font-size: 20px; fill: var(--claridad); opacity: .75; letter-spacing: .04em; }
.metodo__trazos .nodo { fill: #C2A1E2; }
.metodo__trazos .nodo-c { fill: var(--claridad); }
.metodo__trazos .coral-dot { fill: var(--coral); }

/* Sócrates (Mentorías con IA) */
.metodo--mente .metodo__trazos .linea { stroke-width: 3.2; }
.metodo--mente .metodo__trazos .linea.fino { stroke-width: 1.4; }
.metodo__trazos .delgada { stroke-width: 2.2; }
.metodo__trazos .rell-pantalla { fill: #FBFAFD; opacity: .92; animation: pantalla 3.2s ease-in-out infinite alternate; }
@keyframes pantalla { from { fill: #FBFAFD; } to { fill: #F1E9FA; } }
.metodo__trazos .rell-base { fill: #E9E2F3; }
.metodo__trazos .rell-mente-osc { fill: #AD82D9; }
/* Borde Chispa Coral alrededor de Sócrates: línea continua + un tramo de luz que la recorre */
.metodo__trazos .borde-socrates { fill: none; stroke: var(--coral); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.metodo__trazos .borde-socrates:not(.luz) { stroke-dasharray: 1; stroke-dashoffset: 1; }
.metodo.is-visible .metodo__trazos .borde-socrates:not(.luz) { animation: borde-dibujar 2.4s .4s var(--ease) forwards; }
@keyframes borde-dibujar { to { stroke-dashoffset: 0; } }
.metodo__trazos .borde-socrates.luz { stroke: #FFE9DF; stroke-width: 3.4; stroke-dasharray: .06 .94; animation: borde-recorrer 6s linear infinite; }
@keyframes borde-recorrer { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* Cara feliz (Acompañamiento personalizado) */
.metodo__trazos .rell-disco { fill: #FFFAF6; }
.metodo__trazos .sonrisa { stroke-width: 5; }
.metodo--coral .metodo__img, .metodo--coral .metodo__trazos,
.metodo--circuito .metodo__img, .metodo--circuito .metodo__trazos,
.metodo--brote .metodo__img, .metodo--brote .metodo__trazos { animation: none; }
/* Borde Chispa Coral animado: se dibuja al aparecer y un tramo de luz lo recorre */
.metodo__trazos .borde-vivo { fill: none; stroke: var(--coral); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.metodo__trazos .borde-vivo:not(.luz) { stroke-dasharray: 1; stroke-dashoffset: 1; }
.metodo.is-visible .metodo__trazos .borde-vivo:not(.luz) { animation: borde-dibujar 1.6s .4s var(--ease) forwards; }
.metodo__trazos .borde-vivo.luz { stroke: #FFE9DF; stroke-width: 4.4; stroke-dasharray: .12 .88; animation: borde-recorrer 3.6s linear infinite; }

/* Estrella (Acompañamiento personalizado): borde más largo, la luz recorre más lento */
.metodo.is-visible .metodo__trazos .borde-estrella:not(.luz) { animation-duration: 2.6s; }
.metodo__trazos .borde-estrella { stroke-width: 5; stroke-linejoin: round; }
.metodo__trazos .borde-estrella.luz { stroke-width: 5.4; stroke-dasharray: .07 .93; animation-duration: 6s; }

/* Animaciones continuas y sutiles (no dependen del hover) */
.metodo__trazos g, .metodo__trazos path { transform-box: fill-box; transform-origin: center; }
.metodo__trazos .trazar { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); animation: trazar 7s ease-in-out infinite; }
.metodo__trazos .trazar.t2 { animation-delay: 1.4s; }
@keyframes trazar { 0% { stroke-dashoffset: var(--len); } 35%, 78% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: calc(var(--len) * -1); } }
.metodo__trazos .titilar { animation: titilar 2.6s ease-in-out infinite alternate; }
.metodo__trazos .titilar.t2 { animation-delay: .9s; }
.metodo__trazos .titilar.t3 { animation-delay: 1.6s; }
@keyframes titilar { from { transform: scale(.72) rotate(0deg); opacity: .65; } to { transform: scale(1.08) rotate(18deg); opacity: 1; } }
.metodo__trazos .flotar { animation: flotar 4.2s ease-in-out infinite alternate; }
@keyframes flotar { from { transform: translateY(0); } to { transform: translateY(-10px); } }
.metodo__trazos .mecer { animation: mecer 3.6s ease-in-out infinite alternate; }
.metodo__trazos .mecer.m2 { animation-delay: 1.8s; }
@keyframes mecer { from { transform: translateY(0) rotate(-1.5deg); } to { transform: translateY(-8px) rotate(1.5deg); } }
.metodo__trazos .sacudir { animation: sacudir 3.2s ease-in-out infinite; }
@keyframes sacudir { 0%, 70%, 100% { transform: rotate(0); } 76% { transform: rotate(-9deg); } 84% { transform: rotate(7deg); } 92% { transform: rotate(-3deg); } }
.metodo__trazos .latir { animation: latir 2.4s ease-in-out infinite; }
.metodo__trazos .latir.t2 { animation-delay: 1.2s; }
@keyframes latir { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.14); } }
.metodo__trazos .girar { animation: girar 18s linear infinite; }
.metodo__trazos .orbita { transform-box: view-box; transform-origin: 330px 600px; animation: girar 14s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
@keyframes fluir { to { stroke-dashoffset: -36; } }

/* Sección "Dos formas de entrenar" (repite las rutas de los CTA del hero) */
.formas {
  position: relative; overflow: hidden; isolation: isolate;
  padding: 96px 24px 120px;
  background: var(--white);
}
/* Papel cuadriculado (Claridad suave con líneas blancas y grano) que se difumina hacia arriba y hacia abajo
   para fundirse con las secciones blancas vecinas */
.formas::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-color: #E2EEEE;
  background-image: var(--noise), linear-gradient(#fff 2px, transparent 2px), linear-gradient(90deg, #fff 2px, transparent 2px);
  background-size: 180px 180px, 64px 64px, 64px 64px;
  background-position: 0 0, center -1px, center -1px;
  background-blend-mode: soft-light, normal, normal;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 24%, #000 76%, transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 24%, #000 76%, transparent);
}
/* Las gráficas que tocan el borde inferior se desvanecen junto con la cuadrícula (las etiquetas quedan nítidas) */
.fx--franjas, .fx--circulos {
  -webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent 92%);
          mask-image: linear-gradient(to bottom, #000 45%, transparent 92%);
}
/* Panel blanco al centro (como la ventana del cierre de Jasper) */
.formas__inner {
  position: relative; z-index: 1;
  max-width: var(--container); margin: 0 auto; padding: 64px 56px;
  background: var(--white); border-radius: var(--r-card);
  box-shadow: 0 30px 60px -40px rgba(1, 52, 64, .45);
}
.formas__head { max-width: 860px; margin: 0 auto 48px; text-align: center; }

/* Gráficas de fondo: asoman por detrás del panel */
.formas__fondo { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.fx { position: absolute; display: block; }
.fx--pixel { width: 200px; height: 380px; top: 56px; left: calc(50% - 540px - 140px); }
.fx--pixel-der { width: 160px; height: 220px; top: 150px; right: calc(50% - 540px - 110px); }
.fx--franjas { width: 460px; height: 300px; bottom: -40px; left: calc(50% - 540px - 300px); }
.fx--circulos { width: 420px; height: 260px; bottom: 0; right: calc(50% - 540px - 250px); }
/* Etiquetas tipo cursor (personas del mundo MentorU) */
.fx-cursor {
  position: absolute; z-index: 2; display: inline-flex; align-items: flex-start; gap: 2px;
  font-size: 12px; line-height: 16px; font-weight: 700; white-space: nowrap;
  animation: cursor-deriva 7s ease-in-out infinite alternate;
}
.fx-cursor svg { width: 16px; height: 16px; fill: var(--raiz); stroke: var(--white); stroke-width: 1.2; }
.fx-cursor span { margin-top: 12px; padding: 3px 8px; border-radius: 6px; }
.fx-cursor--a { top: 40px; left: calc(50% - 470px); }
.fx-cursor--a span { background: #C2A1E2; color: var(--raiz); }
.fx-cursor--b { bottom: 92px; left: calc(50% - 600px); animation-delay: -2.5s; }
.fx-cursor--b span { background: var(--coral); color: var(--white); }
.fx-cursor--c { bottom: 150px; right: calc(50% - 660px); animation-delay: -5s; }
.fx-cursor--c span { background: var(--white); color: var(--raiz); box-shadow: 0 4px 10px -6px rgba(1, 52, 64, .5); }
@keyframes cursor-deriva { from { transform: translate(0, 0); } to { transform: translate(14px, -8px); } }

/* Entrada al hacer scroll: las figuras parten más afuera y se acercan al centro; las etiquetas aparecen después.
   Se usa `translate` para no chocar con el `transform` de la deriva de los cursores. */
.formas__fondo[data-revelar] { opacity: 1; transform: none; }
.fx { translate: var(--desde, 0 0); opacity: 0; transition: translate 1.4s var(--ease), opacity .9s var(--ease); }
.fx--pixel     { --desde: -160px 0; }
.fx--pixel-der { --desde: 160px 0; transition-delay: .1s; }
.fx--franjas   { --desde: -180px 70px; transition-delay: .2s; }
.fx--circulos  { --desde: 180px 70px; transition-delay: .3s; }
.fx-cursor > * { opacity: 0; transition: opacity .6s var(--ease) .9s; }
.formas__fondo.is-visible .fx { translate: 0 0; opacity: 1; }
.formas__fondo.is-visible .fx-cursor > * { opacity: 1; }
/* Guía: H2 grande 52/62 (32 en móvil) */
.formas__title { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 52px; line-height: 62px; letter-spacing: -0.02em; text-wrap: balance; }
.formas__sub { margin: 14px auto 0; max-width: 640px; font-size: 18px; line-height: 25px; color: var(--raiz-400); text-wrap: pretty; }
.caminos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.camino {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: flex-start; padding: 32px;
  border-radius: var(--r-card); color: var(--raiz); text-decoration: none;
  background: var(--fondo);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
/* Grano sutil sobre el fondo suave */
.camino::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--noise) 0 0 / 180px 180px; mix-blend-mode: soft-light; opacity: .55;
}
.camino:hover { transform: translateY(-4px); box-shadow: 0 26px 50px -34px rgba(1, 52, 64, .55); }
.camino:focus-visible { outline: 3px solid var(--circuito); outline-offset: 3px; }
.camino--programas { --fondo: #EAF3F3; }
.camino--medida    { --fondo: #FDECE5; }

.camino__cuerpo { display: flex; flex-direction: column; min-width: 0; }
/* Guía: H3 26/36 */
.camino__titulo { font-family: var(--font-display); font-weight: 700; font-size: 26px; line-height: 36px; letter-spacing: -0.01em; }
.camino__texto { margin-top: 4px; font-size: 18px; line-height: 25px; color: var(--raiz-400); text-wrap: pretty; }
.camino__link { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; font-weight: 700; font-size: 16px; line-height: 22px; color: var(--circuito); }
.camino--medida .camino__link { color: var(--raiz); }
.camino__flecha { width: 18px; height: 18px; fill: none; stroke: var(--coral); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--ease); }
.camino--programas .camino__flecha { stroke: currentColor; }
.camino:hover .camino__flecha { transform: translateX(4px); }


/* ---------- Ciclo de desarrollo (estilo "Solutions by industry" de Jasper) ---------- */
.ciclo { padding: 120px 24px; background: var(--white); }
.ciclo__inner { max-width: var(--container); margin: 0 auto; }
.ciclo__head { max-width: 760px; margin-bottom: 48px; }
/* Guía: H2 grande 52/62 (32 en móvil) */
.ciclo__title { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 52px; line-height: 62px; letter-spacing: -0.02em; text-wrap: balance; }
.ciclo__sub { margin: 14px 0 0; font-size: 18px; line-height: 25px; color: var(--raiz-400); }
.ciclo__cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 0; align-items: stretch; }

/* Lista tipo acordeón: cada paso con su línea de color; el activo se tiñe y muestra el detalle */
.ciclo__lista { list-style: none; margin: 0; padding: 0; align-self: center; }
.ciclo__item { position: relative; border-bottom: 1.5px solid var(--acento); transition: background-color .5s var(--ease); }
.ciclo__item.is-activo { background: var(--tinte); }
.ciclo__boton {
  display: flex; align-items: baseline; gap: 10px; width: 100%;
  padding: 20px 20px 16px; border: 0; background: none; text-align: left;
  font-family: var(--font-display); font-weight: 500; font-size: 26px; line-height: 36px; color: var(--raiz);
}
.ciclo__num { font-size: 18px; color: var(--raiz-400); min-width: 1.4em; }
.ciclo__boton:hover .ciclo__nombre { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 6px; text-decoration-color: var(--acento); }
.ciclo__detalle { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease); }
.ciclo__detalle > div { overflow: hidden; }
.ciclo__detalle p { margin: 0; padding: 0 20px 22px calc(20px + 1.4em + 10px); font-size: 18px; line-height: 25px; color: var(--raiz); }
.ciclo__item.is-activo .ciclo__detalle { grid-template-rows: 1fr; }
/* Avance del ciclo: la línea del paso activo se llena en Raíz */
.ciclo__barra { position: absolute; left: 0; right: 0; bottom: -1.5px; height: 1.5px; background: var(--raiz); transform: scaleX(0); transform-origin: left; }
.ciclo.is-corriendo .ciclo__item.is-activo .ciclo__barra { animation: ciclo-barra var(--ciclo-ms, 6500ms) linear forwards; }
.ciclo.is-pausado .ciclo__item.is-activo .ciclo__barra { animation-play-state: paused; }
@keyframes ciclo-barra { to { transform: scaleX(1); } }

/* Panel de color con la foto (cambia de tono con cada paso) */
.ciclo__media {
  position: relative; overflow: hidden; min-height: 520px;
  margin-left: -1px;
  background-color: var(--tinte);
  background-image: linear-gradient(rgba(1, 52, 64, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(1, 52, 64, .07) 1px, transparent 1px);
  background-size: 56px 56px;
  transition: background-color .6s var(--ease);
}
.ciclo__pixel { position: absolute; fill: var(--acento); opacity: .45; transition: fill .6s var(--ease); }
.ciclo__pixel--a { width: 26%; top: 6%; left: 6%; }
.ciclo__pixel--b { width: 30%; bottom: 4%; right: 5%; }
.ciclo__foto { position: absolute; inset: 16% 14% 20% 14%; margin: 0; }
.ciclo__img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 6px;
  opacity: 0; transform: scale(1.03);
  transition: opacity .6s var(--ease), transform 1.2s var(--ease);
}
.ciclo__img.is-activo { opacity: 1; transform: none; }
/* Puntos en las esquinas y bordes de la foto, como en Jasper */
.ciclo__puntos i { position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--raiz); }
.ciclo__puntos i:nth-child(1) { left: 0; top: 0; }       .ciclo__puntos i:nth-child(2) { left: 50%; top: 0; }
.ciclo__puntos i:nth-child(3) { left: 100%; top: 0; }    .ciclo__puntos i:nth-child(4) { left: 100%; top: 50%; }
.ciclo__puntos i:nth-child(5) { left: 100%; top: 100%; } .ciclo__puntos i:nth-child(6) { left: 50%; top: 100%; }
.ciclo__puntos i:nth-child(7) { left: 0; top: 100%; }    .ciclo__puntos i:nth-child(8) { left: 0; top: 50%; }
.ciclo__vuelta {
  position: absolute; left: 14%; bottom: 6%; margin: 0;
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 10px;
  border-radius: 999px; background: var(--white); color: var(--raiz);
  font-size: 14px; line-height: 18px; box-shadow: 0 6px 16px -10px rgba(1, 52, 64, .5);
}
.ciclo__vuelta svg { width: 16px; height: 16px; fill: none; stroke: var(--coral); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ciclo.is-corriendo .ciclo__vuelta svg { animation: girar 6s linear infinite; }

/* ---------- Resultados (inspirada en jasper.ai: cifras grandes + testimonio) ---------- */
.res {
  position: relative; overflow: hidden; isolation: isolate;
  padding: 120px 24px 140px; color: var(--raiz);
  /* Gradiente MentorU 5 en espejo (claridad → coral) con grano */
  background: var(--noise-suave) 0 0 / 140px 140px, url("../assets/img/resultados/gradiente.webp") center / cover no-repeat, #F7D9CC;
  background-blend-mode: soft-light, normal, normal;
}
/* Halftone suave en la esquina inferior izquierda */
.res::after {
  content: ""; position: absolute; z-index: -1; left: 0; bottom: 0; width: 55%; height: 60%;
  color: var(--circuito); background-image: var(--dots); background-size: 14px 14px; opacity: .3;
  -webkit-mask-image: radial-gradient(ellipse at 0% 100%, #000 10%, transparent 70%);
          mask-image: radial-gradient(ellipse at 0% 100%, #000 10%, transparent 70%);
}
.res__inner { max-width: var(--container); margin: 0 auto; }

/* Encabezado en dos columnas, como Jasper; eyebrow igual al de Metodología */
.res__head { display: grid; grid-template-columns: 1.35fr 1fr; gap: 32px 64px; align-items: end; margin-bottom: 72px; }
.res__head.is-visible .metodologia__eyebrow .hl__line { animation: draw 1.1s .45s var(--ease) forwards; }
/* Guía: H2 grande 52/62 (32 en móvil) */
.res__title { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 52px; line-height: 62px; letter-spacing: -0.02em; text-wrap: balance; }
.res__intro p { margin: 0 0 18px; font-size: 18px; line-height: 25px; }
.res__link { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1.5px; }
.res__link svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--ease); }
.res__link:hover svg { transform: translateX(4px); }

/* Métricas: cifras enormes con grano, separadas por una línea */
.res__metricas { list-style: none; margin: 0 0 96px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.res__metrica { border-top: 2px solid var(--raiz); padding-top: 20px; display: flex; flex-direction: column; align-items: flex-start; }
.res__metricas > :nth-child(2) { transition-delay: .08s; }
.res__metricas > :nth-child(3) { transition-delay: .16s; }
.res__num {
  margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(56px, 7vw, 104px); line-height: 1.04; letter-spacing: -0.04em; white-space: nowrap;
  font-variant-numeric: tabular-nums;
  /* Grano dentro de las letras */
  background: var(--noise) 0 0 / 160px 160px, var(--raiz); background-blend-mode: soft-light;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.res__texto { margin: 14px 0 0; font-family: var(--font-display); font-weight: 500; font-size: 24px; line-height: 30px; }
.res__nota { margin: 6px 0 18px; font-size: 16px; line-height: 23px; color: var(--raiz-400); }
.res__logo { height: 26px; width: auto; margin-top: auto; }

/* Testimonio con foto al lado */
.res__testimonio { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 0; align-items: center; }
.res__media { position: relative; isolation: isolate; }
.res__foto {
  position: relative; z-index: 1; display: block;
  width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 6px;
  transform: rotate(-3deg); box-shadow: 0 30px 60px -40px rgba(1, 52, 64, .7);
}
/* Formas de la referencia (en SVG): rombo Brote con círculos detrás y triángulo Chispa Coral por delante */
.res__forma { position: absolute; display: block; pointer-events: none; }
.res__forma--rombo { z-index: 0; width: 46%; left: -14%; bottom: -12%; animation: res-flotar 7s ease-in-out infinite alternate; }
.res__forma--triangulo { z-index: 2; width: 44%; left: -12%; top: -10%; mix-blend-mode: multiply; animation: res-flotar 6s ease-in-out -3s infinite alternate; }
@keyframes res-flotar { from { transform: translate(0, 0) rotate(0deg); } to { transform: translate(6px, -8px) rotate(2deg); } }
.res__cita {
  margin: 0 0 0 -56px; position: relative; z-index: 1;
  padding: 44px 44px 36px; border-radius: var(--r-card);
  background: rgba(255, 255, 255, .78);
  -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, .85);
  box-shadow: 0 30px 60px -40px rgba(1, 52, 64, .6);
}
/* Comillas grandes entre la foto y la tarjeta, con un destello que recorre su borde */
.res__cita { position: relative; }
.res__comillas {
  position: absolute; top: -48px; left: -44px; width: 112px; height: 80px; overflow: visible;
  filter: drop-shadow(0 12px 18px rgba(5, 120, 145, .4));
}
.res__comillas-fondo { fill: var(--circuito); stroke: var(--white); stroke-width: 3; stroke-linejoin: round; paint-order: stroke; }
.res__comillas-luz { fill: none; stroke: #FFFFFF; stroke-width: 3.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: .12 .88; filter: drop-shadow(0 0 2px #fff); animation: borde-recorrer 4.5s linear infinite; }
.res__cita blockquote { margin: 26px 0 32px; font-family: var(--font-display); font-weight: 500; font-size: 34px; line-height: 44px; letter-spacing: -0.015em; text-wrap: pretty; }
.res__cita figcaption { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.res__rol { font-size: 16px; line-height: 22px; font-weight: 700; color: var(--raiz); }
.res__cita .res__logo { margin-top: 0; }

/* ---------- Prensa y conversaciones (carrusel estilo Jasper) ---------- */
.prensa { padding: 120px 0 128px; background: var(--white); overflow: hidden; }
.prensa__inner { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.prensa__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 40px; flex-wrap: wrap; margin-bottom: 40px; }
.prensa__head.is-visible .metodologia__eyebrow .hl__line { animation: draw 1.1s .45s var(--ease) forwards; }
/* Guía: H2 grande 52/62 (32 en móvil) */
.prensa__title { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 52px; line-height: 62px; letter-spacing: -0.02em; }
.prensa__acciones { display: flex; align-items: center; gap: 10px; }
.prensa__todas { display: inline-flex; align-items: center; gap: 8px; margin-right: 8px; font-weight: 700; color: var(--circuito); text-decoration: underline; text-underline-offset: 5px; }
.prensa__li { width: 16px; height: 16px; fill: currentColor; flex: none; }
.prensa__btn {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  border: 1.5px solid var(--raiz); background: var(--white); color: var(--raiz);
  transition: background-color .2s, color .2s, opacity .2s;
}
.prensa__btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.prensa__btn:hover:not(:disabled) { background: var(--raiz); color: var(--white); }
.prensa__btn:disabled { opacity: .3; cursor: default; }

/* Pista: alineada con el contenedor a la izquierda y sangrando hasta el borde derecho */
.prensa__pista {
  list-style: none; margin: 0; display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 8px 24px 16px max(24px, calc((100vw - var(--container)) / 2 + 24px));
  scroll-padding-left: max(24px, calc((100vw - var(--container)) / 2 + 24px));
  scrollbar-width: none;
}
.prensa__pista::-webkit-scrollbar { display: none; }
.prensa__pista:focus-visible { outline: 2px solid var(--circuito); outline-offset: 4px; }
.prensa__item { flex: none; width: 340px; scroll-snap-align: start; }
.prensa__card {
  display: flex; flex-direction: column; height: 100%;
  border-radius: var(--r-card); overflow: hidden; background: var(--white);
  border: 1px solid #DCE9EB; color: var(--raiz);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s;
}
.prensa__card:hover { transform: translateY(-4px); box-shadow: 0 26px 50px -34px rgba(1, 52, 64, .55); border-color: var(--coral); }
.prensa__card:focus-visible { outline: 3px solid var(--circuito); outline-offset: 3px; }
/* Cabecera de la tarjeta: gradiente MentorU con grano y el nombre del medio */
.prensa__media {
  position: relative; display: flex; align-items: flex-end; aspect-ratio: 16 / 10; padding: 20px;
  background-size: cover; background-position: center; color: var(--white); isolation: isolate;
}
.prensa__media::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--noise) 0 0 / 180px 180px; mix-blend-mode: soft-light; opacity: .45; }
.prensa__media--clara { color: var(--raiz); }
.prensa__medio { font-family: var(--font-display); font-weight: 700; font-size: 34px; line-height: 38px; letter-spacing: -0.02em; text-wrap: balance; }
.prensa__cuerpo { display: flex; flex-direction: column; flex: 1; padding: 20px 22px 22px; }
.prensa__tipo { font-size: 12px; line-height: 14px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--circuito); }
.prensa__titulo {
  margin-top: 10px; font-family: var(--font-display); font-weight: 500; font-size: 20px; line-height: 27px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.prensa__ver { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 22px; font-size: 15px; font-weight: 700; color: var(--raiz); }
.prensa__flecha { width: 16px; height: 16px; fill: none; stroke: var(--coral); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--ease); }
.prensa__card:hover .prensa__flecha { transform: translateX(4px); }

/* ---------- Preguntas frecuentes (inspirada en el FAQ de jasper.ai) ---------- */
.faq { padding: 96px 24px 128px; background: var(--white); }
.faq__inner { max-width: var(--container); margin: 0 auto; }
.faq__franja { display: block; width: 100%; height: 56px; margin-bottom: 88px; }
.faq__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.5fr); gap: 48px 72px; align-items: start; }
.faq__head { position: sticky; top: 112px; }
.faq__head.is-visible .metodologia__eyebrow .hl__line { animation: draw 1.1s .45s var(--ease) forwards; }
/* Guía: H2 grande 52/62 (32 en móvil) */
.faq__title { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 52px; line-height: 62px; letter-spacing: -0.02em; text-wrap: balance; }
.faq__sub { margin: 18px 0 0; font-size: 18px; line-height: 25px; color: var(--raiz-400); }
.faq__sub a, .faq__a a { color: var(--circuito); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }

/* Acordeón con borde, como Jasper */
.faq__lista { border: 1.5px solid var(--raiz); border-radius: var(--r-card); overflow: hidden; background: var(--white); }
.faq__item + .faq__item { border-top: 1.5px solid var(--raiz); }
.faq__item { transition: background-color .4s var(--ease); }
.faq__item.is-abierto { background: #FEF3EF; }
.faq__h { margin: 0; }
.faq__q {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%;
  padding: 28px 32px; border: 0; background: none; text-align: left; color: var(--raiz);
  /* Guía: H3 26/36 */
  font-family: var(--font-display); font-weight: 500; font-size: 26px; line-height: 36px; letter-spacing: -0.01em;
}
.faq__q:focus-visible { outline: 3px solid var(--circuito); outline-offset: -6px; border-radius: 12px; }
.faq__toggle {
  flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px;
  border: 1.5px solid var(--raiz); background: var(--white); color: var(--raiz);
  transition: background-color .3s var(--ease), border-color .3s, color .3s, transform .4s var(--ease);
}
.faq__toggle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.faq__mas-v { transform-origin: center; transform-box: fill-box; transition: transform .35s var(--ease); }
.faq__q:hover .faq__toggle { border-color: var(--coral); }
.faq__item.is-abierto .faq__toggle { background: var(--coral); border-color: var(--coral); color: var(--white); }
.faq__item.is-abierto .faq__mas-v { transform: scaleY(0); }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease); }
.faq__a > div { overflow: hidden; }
.faq__a p { margin: 0; padding: 0 88px 30px 32px; font-size: 18px; line-height: 25px; color: var(--raiz); }
.faq__item.is-abierto .faq__a { grid-template-rows: 1fr; }

/* ---------- Footer ---------- */
.pie {
  position: relative; overflow: hidden; isolation: isolate;
  color: var(--claridad);
  background: var(--noise-suave) 0 0 / 140px 140px, var(--raiz);
  background-blend-mode: soft-light;
}
/* Isotipo coral muy difuminado + halftone suave que se desvanece hacia arriba */
.pie__fx { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.pie__fx::before {
  content: ""; position: absolute; width: 620px; height: 640px; right: -120px; top: -60px;
  background: url("../assets/img/isotipo-coral.svg") center / contain no-repeat;
  opacity: .3; filter: blur(42px);
}
.pie__fx::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 60%;
  color: var(--circuito); background-image: var(--dots); background-size: 14px 14px; opacity: .5;
  -webkit-mask-image: linear-gradient(to top, #000, transparent); mask-image: linear-gradient(to top, #000, transparent);
}

/* Cierre con CTA (destino de los botones "Contacto") */
.pie__cierre { max-width: 860px; margin: 0 auto; padding: 120px 24px 96px; text-align: center; scroll-margin-top: 90px; }
/* Guía: H2 grande 52/62 (32 en móvil) */
.pie__cierre-title { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 52px; line-height: 62px; letter-spacing: -0.02em; color: var(--white); text-wrap: balance; }
.pie__cierre-title .hl { color: var(--coral); }
.pie__cierre-title .hl__line { animation: none; stroke-dashoffset: 0; }
.pie__cierre-sub { margin: 16px auto 0; max-width: 560px; font-size: 18px; line-height: 25px; color: var(--claridad); }
.pie__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 32px; }
.pie__cta { min-height: 48px; padding: 0 24px; font-size: 16px; }
.btn--claro { border-color: rgba(206, 224, 224, .6); color: var(--white); background: rgba(255, 255, 255, .06); }
.btn--claro::before { opacity: 0; }
.btn--claro:hover { background: var(--white); color: var(--raiz); border-color: var(--white); }

/* Marca + columnas */
.pie__inner {
  max-width: var(--container); margin: 0 auto; padding: 56px 24px 48px;
  display: grid; grid-template-columns: .9fr 2.4fr; gap: 40px;
  border-top: 1px solid rgba(206, 224, 224, .16);
}
.pie__logo img { height: 34px; width: auto; }
.pie__lema { margin: 18px 0 20px; max-width: 300px; font-size: 16px; line-height: 23px; color: var(--claridad); }
.pie__social {
  display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-control);
  border: 1px solid rgba(206, 224, 224, .35); color: var(--white); transition: background-color .2s, border-color .2s;
}
.pie__social svg { width: 18px; height: 18px; fill: currentColor; }
.pie__social:hover { background: var(--coral); border-color: var(--coral); }
.pie__cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.pie__titulo { margin: 0 0 14px; font-size: 12px; line-height: 14px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--coral); }
.pie__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pie__col a { font-size: 15px; line-height: 21px; color: var(--white); opacity: .86; transition: opacity .2s, color .2s; }
.pie__col a:hover { opacity: 1; color: var(--coral); }
.pie a:focus-visible { outline-color: var(--coral); }

.pie__base {
  max-width: var(--container); margin: 0 auto; padding: 20px 24px 28px;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px;
  border-top: 1px solid rgba(206, 224, 224, .16);
  font-size: 13px; line-height: 18px; color: var(--claridad);
}
.pie__base p { margin: 0; }
.pie__base { align-items: center; }
.pie__apoyo { display: inline-flex; align-items: center; gap: 12px; }
.pie__apoyo img { height: 30px; width: auto; }

/* Entrada al aparecer en pantalla */
[data-revelar] { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease), transform .8s var(--ease); }
[data-revelar].is-visible { opacity: 1; transform: none; }
.metodologia__grid > :nth-child(2) { transition-delay: .08s; }
.metodologia__grid > :nth-child(3) { transition-delay: 0s; }
.metodologia__grid > :nth-child(4) { transition-delay: .08s; }
.metodologia__grid > .is-visible:hover { transition-delay: 0s; }
.caminos > :nth-child(2) { transition-delay: .08s; }
.caminos > .is-visible:hover { transition-delay: 0s; }

/* ---------- Responsive ---------- */

@media (max-width: 1040px) {
}
@media (max-width: 1140px) {
  .card--prompt { left: 24px; }
  .card--stat { left: auto; right: 24px; }
  .chip { left: auto; right: 40px; }
}

@media (max-width: 960px) {
  .nav__link { padding: 0 9px; font-size: 14px; }
  .btn--contacto { padding: 0 14px; }
  .mega__grid { grid-template-columns: 1fr 1.5fr; }
  .hero__title { font-size: 52px; line-height: 62px; }
  .card--prompt { width: 300px; top: 210px; }
  .prompt { font-size: 22px; line-height: 28px; min-height: 84px; }
  .card--stat { width: 220px; }
  .stat__num { font-size: 52px; line-height: 56px; }
  .chip { display: none; }
}

@media (max-width: 760px) {
  .metodologia { padding: 80px 16px; }
  .metodologia__title { font-size: 32px; line-height: 38px; }
  .metodologia__sub { font-size: 16px; line-height: 23px; }
  .metodologia__grid { grid-template-columns: 1fr; gap: 40px; }
  .metodo__titulo { font-size: 22px; line-height: 28px; padding: 16px 2px 0; }
  .metodo__texto { padding: 4px 2px 0; font-size: 16px; line-height: 23px; }
  .nav { top: 10px; padding: 0 10px; }
  .nav__inner { height: 56px; padding: 0 8px 0 14px; border-radius: 16px; grid-template-columns: 1fr auto; }
  .nav__logo img { height: 28px; }
  .nav__toggle {
    display: grid; gap: 5px; place-content: center;
    width: 44px; height: 44px; border: 1px solid var(--border); border-radius: var(--r-control); background: var(--white);
  }
  .nav__toggle span { display: block; width: 18px; height: 2px; background: var(--raiz); transition: transform .3s var(--ease); }
  .nav.is-open .nav__toggle span:first-child { transform: translateY(3.5px) rotate(45deg); }
  .nav.is-open .nav__toggle span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
  .nav__scrim { display: none; }
  .nav__actions { gap: 8px; }
  .btn--contacto { min-height: 40px; padding: 0 14px; font-size: 14px; }

  /* Panel móvil: aparición suave (fundido + cortina) */
  .nav__links {
    position: absolute; top: calc(100% + 8px); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 2px;
    padding: 10px;
    max-height: calc(100dvh - 96px); overflow-y: auto; overscroll-behavior: contain;
    background: var(--white); border: 1px solid var(--border); border-radius: var(--r-panel);
    box-shadow: 0 24px 40px -26px rgba(1, 52, 64, .45);
    opacity: 0; visibility: hidden;
    transform: translateY(-6px);
    clip-path: inset(0 0 100% 0 round 16px);
    transition: opacity .3s var(--ease), transform .4s var(--ease), clip-path .45s cubic-bezier(.3, .9, .3, 1), visibility 0s .45s;
    pointer-events: auto;
  }
  .nav.is-open .nav__links {
    opacity: 1; visibility: visible; transform: none;
    clip-path: inset(0 0 0 0 round 16px);
    transition: opacity .3s var(--ease), transform .4s var(--ease), clip-path .45s cubic-bezier(.3, .9, .3, 1), visibility 0s;
  }
  .nav.is-open .nav__links > * { animation: item-in .45s var(--ease) both; }
  .nav.is-open .nav__links > :nth-child(2) { animation-delay: .05s; }
  .nav.is-open .nav__links > :nth-child(3) { animation-delay: .1s; }
  .nav.is-open .nav__links > :nth-child(4) { animation-delay: .15s; }
  .nav.is-open .nav__links > :nth-child(5) { animation-delay: .2s; }
  @keyframes item-in { from { opacity: 0; transform: translateX(-8px); } }

  .nav__link { width: 100%; height: 52px; padding: 0 12px; gap: 12px; justify-content: flex-start; font-size: 16px; }
  .nav__link:hover, .nav__link:focus-visible { background: var(--coral-100); }
  .nav__link::before { display: none; }
  .nav__link:hover, .nav__link:focus-visible, .nav__item--mega.is-open > .nav__link { color: var(--raiz); }
  .nav__ico { display: block; flex: none; fill: none; stroke: var(--coral); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  .nav__chev { margin-left: auto; }

  /* Programas como acordeón */
  .mega {
    position: static; padding: 0; border: 0; border-radius: 0; box-shadow: none;
    opacity: 1; visibility: visible; transform: none; clip-path: none;
    max-height: 0; overflow: hidden;
    transition: max-height .45s cubic-bezier(.3, .9, .3, 1);
  }
  .nav__item--mega.is-open .mega { max-height: 760px; clip-path: none; }
  .mega__grid { grid-template-columns: 1fr; gap: 4px; padding: 4px 0 6px 10px; }
  .mega__programs { grid-template-columns: 1fr; gap: 2px; }
  .mega__feature, .mega__programs > * { transform: translateX(-6px); }
  .mega__feature { padding: 10px; border-radius: var(--r-control); }
  .mega__feature-card { padding: 12px 14px; }
  .mega__feature-title { font-size: 18px; line-height: 22px; margin: 8px 0 2px; }
  .mega__feature-text, .mega__chips { display: none; }
  .mega__more { margin-top: 6px; }
  .mega__card { display: flex; flex-direction: row; align-items: center; gap: 12px; padding: 8px 10px; border: 0; background: none; }
  .mega__card:not(.is-disabled):hover { transform: none; box-shadow: none; background: var(--coral-100); }
  .mega__card.is-disabled { background: none; }
  .mega__card.is-disabled .mega__icon { background: var(--coral-100); color: var(--coral); opacity: .55; }
  .mega__art, .mega__art--foto { height: auto; min-height: 0; flex: none; background: none !important; }
  .mega__art::after { display: none; }
  .mega__art { animation: none; }
  .mega__icon { position: static; width: 36px; height: 36px; background: var(--coral-100); color: var(--coral); box-shadow: none; }
  .mega__card-body { display: flex; flex-direction: column; padding: 0; flex: 1; }
  .mega__card-title { font-size: 15px; line-height: 19px; }
  .mega__soon, .mega__status--on { align-self: flex-start; margin-top: 3px; font-size: 11px; }
  .mega__card-text { display: none; }
  .mega__footer { margin: 6px 0 4px 10px; background: var(--coral-100); }
  html.menu-open { overflow: hidden; }

  .hero { padding: 104px 16px 0; }
  .announce { font-size: 13px; gap: 8px; }
  .announce__extra { display: none; }
  .hero__title { font-size: 42px; line-height: 50px; }
  .hero__sub { font-size: 16px; line-height: 23px; }
  .hero__ctas { flex-direction: column; }
  .hero__ctas .btn { width: 100%; }

  .scene { height: 480px; margin: 24px -16px 0; }
  .scene { --visible: 370px; }
  .person { --size: var(--hm, 340px); }
  .shape--iso { width: 290px; height: 300px; }
  .shape--square { width: 250px; height: 250px; border-radius: 40px; bottom: 30px; }
  .shape--tilt { width: 260px; height: 240px; }
  .shape--pill { width: 420px; height: 200px; }

  .card--prompt { left: 16px; right: 16px; top: 0; width: auto; padding: 14px 16px; gap: 12px; }
    .badge { width: 32px; height: 32px; }
  .prompt { font-size: 18px; line-height: 23px; min-height: 46px; }
  .card--stat { top: auto; bottom: 84px; right: 12px; width: auto; padding: 12px 14px; border-radius: var(--r-panel); }
  .stat__num { font-size: 32px; line-height: 34px; }
  .stat__label { font-size: 13px; line-height: 16px; max-width: 120px; }
  .stat__note { display: none; }
  .marquee__track { gap: 56px; padding-right: 56px; }
}



@media (max-width: 1040px) {
  .caminos { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .caminos { gap: 14px; }
  .formas { padding: 48px 10px 64px; }
  .formas::before { background-size: 180px 180px, 40px 40px, 40px 40px; }
  .formas__inner { padding: 32px 10px 12px; }
  .formas__head { padding: 0 8px; }
  .fx--pixel, .fx--pixel-der, .fx-cursor--a, .fx-cursor--c { display: none; }
  .fx--franjas { width: 260px; height: 170px; left: -90px; bottom: -30px; }
  .fx--circulos { width: 240px; height: 150px; right: -60px; bottom: 0; }
  .fx-cursor--b { bottom: 24px; left: 20px; }
  .formas__head { margin-bottom: 32px; }
  .formas__title { font-size: 32px; line-height: 38px; }
  .formas__sub { font-size: 16px; line-height: 23px; }
  .camino { padding: 22px 20px 24px; }
  .camino__titulo { font-size: 22px; line-height: 28px; }
  .camino__texto { font-size: 16px; line-height: 23px; }
  .camino__link { margin-top: 12px; }
}

@media (max-width: 1040px) {
  .ciclo__cuerpo { grid-template-columns: 1fr; }
  .ciclo__media { order: -1; min-height: 0; aspect-ratio: 4 / 3; margin: 0 0 8px; border-radius: var(--r-card); }
}
@media (max-width: 760px) {
  .ciclo { padding: 80px 16px; }
  .ciclo__head { margin-bottom: 28px; }
  .ciclo__title { font-size: 32px; line-height: 38px; }
  .ciclo__sub { font-size: 16px; line-height: 23px; }
  .ciclo__boton { font-size: 20px; line-height: 28px; padding: 16px 12px 12px; }
  .ciclo__num { font-size: 15px; }
  .ciclo__detalle p { font-size: 16px; line-height: 23px; padding: 0 12px 18px calc(12px + 1.4em + 10px); }
  .ciclo__foto { inset: 12% 10% 18% 10%; }
  .ciclo__vuelta { left: 10%; bottom: 4%; font-size: 12px; }
}






























@media (max-width: 1040px) {
  .res__head { grid-template-columns: 1fr; }
  .res__testimonio { grid-template-columns: 1fr; }
  .res__media { margin: 0 6%; }
  .res__foto { aspect-ratio: 4 / 4.2; }
  .res__cita { margin: -48px 16px 0; }
}
@media (max-width: 760px) {
  .res { padding: 80px 16px 96px; }
  .res__head { margin-bottom: 48px; }
  .res__title { font-size: 32px; line-height: 38px; }
  .res__intro p { font-size: 16px; line-height: 23px; }
  .res__metricas { grid-template-columns: 1fr; gap: 28px; margin-bottom: 64px; }
  .res__texto { font-size: 20px; line-height: 26px; }
  .res__cita { margin: -40px 8px 0; padding: 26px 22px 22px; }
  .res__comillas { width: 80px; height: 57px; top: -34px; left: 14px; }
  .res__cita blockquote { font-size: 22px; line-height: 30px; margin: 14px 0 22px; }
}

@media (max-width: 760px) {
  .prensa { padding: 80px 0 88px; }
  .prensa__inner { padding: 0 16px; }
  .prensa__head { margin-bottom: 28px; }
  .prensa__title { font-size: 32px; line-height: 38px; }
  .prensa__btn { width: 42px; height: 42px; }
  .prensa__pista { gap: 14px; padding: 8px 16px 16px; scroll-padding-left: 16px; }
  .prensa__item { width: 82vw; max-width: 320px; }
  .prensa__medio { font-size: 28px; line-height: 32px; }
}

@media (max-width: 1040px) {
  .faq__grid { grid-template-columns: 1fr; }
  .faq__head { position: static; }
}
@media (max-width: 760px) {
  .faq { padding: 64px 16px 88px; }
  .faq__franja { height: 36px; margin-bottom: 56px; }
  .faq__title { font-size: 32px; line-height: 38px; }
  .faq__sub { font-size: 16px; line-height: 23px; }
  .faq__q { padding: 20px 18px; font-size: 20px; line-height: 28px; gap: 16px; }
  .faq__toggle { width: 28px; height: 28px; }
  .faq__a p { padding: 0 18px 22px; font-size: 16px; line-height: 23px; }
}

@media (max-width: 1040px) {
  .pie__inner { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 760px) {
  .pie__cierre { padding: 80px 16px 64px; }
  .pie__cierre-title { font-size: 32px; line-height: 38px; }
  .pie__cierre-sub { font-size: 16px; line-height: 23px; }
  .pie__ctas .btn { width: 100%; }
  .pie__inner { padding: 40px 16px 32px; }
  .pie__cols { grid-template-columns: repeat(2, 1fr); gap: 28px 16px; }
  .pie__base { padding: 18px 16px 24px; }
  .pie__fx::before { width: 360px; height: 370px; right: -140px; }
}

@media (prefers-reduced-motion: reduce) {
  [data-revelar] { opacity: 1; transform: none; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .marquee__track { animation: none; flex-wrap: wrap; justify-content: center; width: auto; }
  .marquee__track [aria-hidden="true"] { display: none; }
}

/* ---------- Contacto (página con formulario) ---------- */
.contacto {
  position: relative; overflow: hidden; isolation: isolate;
  padding: 152px 24px 120px;
  background: var(--offwhite);
}
/* Mismo gradiente del hero, con un halftone suave que se desvanece hacia abajo */
.contacto__bg {
  position: absolute; inset: 0; z-index: -2;
  background: url("../assets/img/hero/gradiente-hero.webp") center 30% / cover no-repeat, var(--offwhite);
}
.contacto__bg::after {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 70%;
  color: var(--circuito); background-image: var(--dots); background-size: 14px 14px; opacity: .22;
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent); mask-image: linear-gradient(to bottom, #000, transparent);
}
.contacto__inner {
  max-width: var(--container); margin: 0 auto;
  display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: start;
}

/* Texto de apoyo (eyebrow igual al de Metodología) */
.contacto__info { padding-top: 12px; }
.contacto__info > * { opacity: 0; transform: translateY(16px); animation: rise .8s var(--ease) forwards; }
.contacto__info > :nth-child(2) { animation-delay: .08s; }
.contacto__info > :nth-child(3) { animation-delay: .16s; }
.contacto__info > :nth-child(4) { animation-delay: .24s; }
.contacto__info > :nth-child(5) { animation-delay: .32s; }
.contacto__eyebrow {
  display: inline-block; margin-bottom: 14px;
  font-size: 12px; line-height: 14px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--circuito);
}
/* Guía: H2 grande 52/62 (32 en móvil) */
.contacto__title { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 52px; line-height: 62px; letter-spacing: -0.02em; text-wrap: balance; }
/* Guía: Body L 18/25 */
.contacto__sub { margin: 18px 0 0; max-width: 460px; font-size: 18px; line-height: 25px; color: var(--raiz-400); text-wrap: pretty; }

.contacto__pasos { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 18px; }
.contacto__pasos li { display: flex; gap: 14px; align-items: flex-start; }
.contacto__pasos b { display: block; font-size: 16px; line-height: 22px; }
.contacto__pasos li > span:last-child { font-size: 15px; line-height: 21px; color: var(--raiz-400); }
.contacto__num {
  flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px;
  font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--white);
  background: var(--noise-suave) 0 0 / 140px 140px, var(--coral); background-blend-mode: soft-light;
}

/* Dato destacado (mismo estilo que la tarjeta de cifra del hero) */
.contacto__dato {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: center; gap: 16px;
  margin-top: 36px; max-width: 420px; padding: 18px 20px;
  border-radius: var(--r-panel); background: var(--raiz); color: var(--white);
  box-shadow: 0 24px 40px -28px rgba(1, 52, 64, .7);
}
.contacto__dato::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--noise) 0 0 / 180px 180px; mix-blend-mode: screen; opacity: .14;
}
.contacto__dato-num { font-family: var(--font-display); font-weight: 700; font-size: 40px; line-height: 44px; letter-spacing: -0.02em; color: var(--coral); }
.contacto__dato-texto { font-size: 13px; line-height: 18px; color: var(--claridad); }
.contacto__dato-texto b { display: block; font-size: 15px; line-height: 20px; color: var(--white); }

/* Tarjeta del formulario */
.form-card {
  position: relative;
  padding: 32px;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border: 1px solid rgba(195, 214, 214, .8);
  border-radius: var(--r-card);
  box-shadow: 0 40px 80px -48px rgba(1, 52, 64, .55);
  opacity: 0; transform: translateY(16px); animation: rise .8s .12s var(--ease) forwards;
}
.form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 16px; }

.campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.campo--full { grid-column: 1 / -1; }
.campo label { padding: 0; font-size: 14px; line-height: 20px; font-weight: 700; }
.campo__opc { font-weight: 400; color: var(--raiz-400); }
.campo input, .campo textarea {
  width: 100%; min-height: 48px; padding: 12px 14px;
  font: inherit; font-size: 16px; line-height: 22px; color: var(--raiz);
  background: var(--white);
  border: 1.5px solid var(--border); border-radius: var(--r-control);
  transition: border-color .2s, box-shadow .2s;
}
.campo textarea { min-height: 128px; resize: vertical; }
.campo input::placeholder, .campo textarea::placeholder { color: #7D979D; }
.campo input:hover, .campo textarea:hover { border-color: #9DBCBF; }
.campo input:focus, .campo textarea:focus {
  outline: none; border-color: var(--circuito); box-shadow: 0 0 0 4px rgba(5, 120, 145, .14);
}

/* Errores: sólo después del primer intento de envío */
.campo__error { display: none; font-size: 13px; line-height: 18px; font-weight: 700; color: var(--coral-600); }
.form.is-validado .campo :is(input, textarea):invalid { border-color: var(--coral-600); }
.form.is-validado .campo:has(:invalid) > .campo__error { display: block; }

.form__aviso {
  margin: 18px 0 0; padding: 12px 14px; border-radius: var(--r-control);
  font-size: 14px; line-height: 20px; color: var(--coral-600); background: var(--coral-100);
}
/* Turnstile ocupa espacio sólo cuando Cloudflare muestra el desafío */
.form__turnstile { width: 100%; }
.form__turnstile:has(iframe) { margin-top: 18px; }
.form__enviar { width: 100%; margin-top: 22px; }
.form__enviar svg { transition: transform .2s var(--ease); }
.form__enviar:hover svg { transform: translateX(3px); }
.form.is-enviando .form__enviar { cursor: progress; opacity: .8; transform: none; }
.form__legal { margin: 14px 0 0; font-size: 13px; line-height: 18px; text-align: center; color: var(--raiz-400); }
.form__legal a { color: var(--circuito); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }

/* Confirmación */
.form-ok { padding: 40px 8px; text-align: center; outline: none; }
.form-ok__icono {
  display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 18px;
  color: var(--white); background: var(--noise-suave) 0 0 / 140px 140px, var(--success); background-blend-mode: soft-light;
  animation: rise .6s var(--ease) both;
}
.form-ok__title { margin: 20px 0 0; font-family: var(--font-display); font-weight: 700; font-size: 26px; line-height: 36px; letter-spacing: -0.01em; }
.form-ok__texto { margin: 10px auto 28px; max-width: 380px; font-size: 16px; line-height: 23px; color: var(--raiz-400); }

@media (max-width: 960px) {
  .contacto__inner { grid-template-columns: 1fr; gap: 40px; }
  .contacto__sub { max-width: 640px; }
}
@media (max-width: 760px) {
  .contacto { padding: 104px 16px 72px; }
  .contacto__title { font-size: 32px; line-height: 40px; }
  .contacto__sub { font-size: 16px; line-height: 23px; }
  .form-card { padding: 22px 18px; }
  .form__grid { grid-template-columns: 1fr; }
}

/* ---------- Diseño a medida (página /programa-a-medida) ---------- */
.medida__inner { max-width: var(--container); margin: 0 auto; }
.medida__head { max-width: 760px; margin-bottom: 40px; }
/* Eyebrow igual al de Metodología (el subrayado se dibuja al aparecer) */
.medida__eyebrow {
  position: relative; display: inline-block; margin-bottom: 14px; padding-bottom: 6px;
  font-size: 12px; line-height: 14px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--circuito);
}
.medida__eyebrow .hl__line { bottom: -3px; height: 7px; stroke-width: 9; animation: none; }
.medida__head.is-visible .medida__eyebrow .hl__line { animation: draw 1.1s .45s var(--ease) forwards; }
/* Guía: H2 grande 52/62 (32 en móvil) */
.medida__title { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 52px; line-height: 62px; letter-spacing: -0.02em; text-wrap: balance; }
.medida__title--md { font-size: 40px; line-height: 48px; }
/* Guía: Body L 18/25 */
.medida__sub { margin: 14px 0 0; font-size: 18px; line-height: 25px; color: var(--raiz-400); text-wrap: pretty; }
.medida__nota { margin: 20px 0 0; font-size: 14px; line-height: 20px; color: var(--raiz-400); }

/* Hero: mismo gradiente y halftone del home, texto a la izquierda y foto con tarjetas flotantes */
.medida-hero { position: relative; overflow: hidden; isolation: isolate; padding: 140px 24px 96px; background: var(--offwhite); }
.medida-hero__bg {
  position: absolute; inset: 0; z-index: -2;
  background: url("../assets/img/hero/gradiente-hero.webp") center 30% / cover no-repeat, var(--offwhite);
}
.medida-hero__bg::after {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 70%;
  color: var(--circuito); background-image: var(--dots); background-size: 14px 14px; opacity: .22;
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent); mask-image: linear-gradient(to bottom, #000, transparent);
}
.medida-hero__inner {
  max-width: var(--container); margin: 0 auto;
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: center;
}
.medida-hero__texto > * { opacity: 0; transform: translateY(16px); animation: rise .8s var(--ease) forwards; }
.medida-hero__texto > :nth-child(2) { animation-delay: .08s; }
.medida-hero__texto > :nth-child(3) { animation-delay: .16s; }
.medida-hero__texto > :nth-child(4) { animation-delay: .24s; }
.medida-hero__texto > :nth-child(5) { animation-delay: .32s; }
.medida-hero .medida__eyebrow { padding-bottom: 0; }
/* Guía: Display (H1 desktop) 62/68 · H1 móvil 42/50 */
.medida-hero__title { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 62px; line-height: 68px; letter-spacing: -0.02em; text-wrap: balance; }
.medida-hero__lead { margin: 22px 0 0; max-width: 520px; font-family: var(--font-display); font-weight: 500; font-size: 24px; line-height: 32px; letter-spacing: -0.01em; color: var(--circuito); text-wrap: balance; }
.medida-hero__sub { margin: 16px 0 0; max-width: 480px; font-size: 18px; line-height: 25px; color: var(--raiz-400); text-wrap: pretty; }
.medida-hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.medida-hero__ctas svg { transition: transform .2s var(--ease); }
.medida-hero__ctas .btn:hover svg { transform: translateX(3px); }

.medida-hero__media { position: relative; opacity: 0; transform: translateY(16px); animation: rise .9s .15s var(--ease) forwards; }
/* Forma pixel de marca asomando por detrás de la foto */
.medida-hero__pixel { position: absolute; z-index: -1; width: 150px; bottom: -36px; left: -48px; fill: var(--circuito); opacity: .18; }
.medida-hero__foto {
  margin: 0; aspect-ratio: 4 / 4.4; overflow: hidden;
  border-radius: var(--r-card);
  box-shadow: 0 40px 80px -48px rgba(1, 52, 64, .6);
}
.medida-hero__foto img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }

/* Tarjetas flotantes (mismo lenguaje que las del hero del home) */
.medida-tag {
  position: absolute; z-index: 2;
  display: flex; align-items: center; gap: 10px; max-width: 240px; padding: 12px 16px 12px 12px;
  background: var(--white); border: 1px solid rgba(195, 214, 214, .8); border-radius: var(--r-panel);
  box-shadow: 0 24px 50px -30px rgba(1, 52, 64, .55);
  font-size: 14px; line-height: 19px; color: var(--raiz-400);
  opacity: 0; transform: scale(.88); animation: tag-in .55s cubic-bezier(.34, 1.56, .64, 1) forwards;
}
.medida-tag b { color: var(--raiz); }
.medida-tag--a { top: 36px; left: -44px; animation-delay: .9s; }
.medida-tag--b { bottom: 40px; right: -28px; max-width: none; white-space: nowrap; animation-delay: 1.1s; }
@keyframes tag-in { to { opacity: 1; transform: none; } }
.medida-tag__icono { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--coral-100); }
.medida-tag__icono svg { width: 20px; height: 20px; fill: none; stroke: var(--coral-600); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.medida-tag__icono--circuito { background: var(--circuito-100); }
.medida-tag__icono--circuito svg { stroke: var(--circuito); }

/* Del curso online a la práctica */
.medida-practica { padding: 112px 24px 64px; background: var(--white); }
.medida-practica__inner { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center; }
.insumos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.insumo {
  display: flex; flex-direction: column; gap: 14px; padding: 20px 18px;
  background: var(--offwhite); border: 1px solid var(--border); border-radius: var(--r-panel);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.insumo:hover { transform: translateY(-3px); box-shadow: 0 20px 40px -30px rgba(1, 52, 64, .55); }
.insumo__icono { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--noise-suave) 0 0 / 140px 140px, var(--coral); background-blend-mode: soft-light; }
.insumo__icono svg { width: 22px; height: 22px; fill: none; stroke: var(--white); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.insumo__nombre { font-family: var(--font-display); font-weight: 500; font-size: 18px; line-height: 23px; }

/* Tres formas de acompañar (tarjetas de Metodología del home) */
.medida-formas { padding: 64px 24px 112px; background: var(--white); }
.medida-formas__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px 24px; }
.medida-formas .metodo__titulo { font-size: 24px; line-height: 32px; }
.medida-formas .metodo__texto { font-size: 16px; line-height: 23px; }
.medida-aviso {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: center; gap: 16px; margin: 48px 0 0; padding: 18px 22px;
  border-radius: var(--r-panel); background: var(--circuito-100);
  font-size: 16px; line-height: 23px; color: var(--raiz-400);
}
.medida-aviso::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--noise) 0 0 / 180px 180px; mix-blend-mode: soft-light; opacity: .5; }
.medida-aviso b { color: var(--raiz); }
.medida-aviso__icono { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--white); }
.medida-aviso__icono svg { width: 22px; height: 22px; fill: none; stroke: var(--circuito); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* Así construimos tu programa: panel blanco sobre papel cuadriculado (como "Dos formas de entrenar") */
.medida-etapas {
  padding: 96px 24px;
  background-color: #E2EEEE;
  background-image: linear-gradient(#fff 2px, transparent 2px), linear-gradient(90deg, #fff 2px, transparent 2px);
  background-size: 64px 64px; background-position: center -1px;
}
.medida-etapas__panel {
  max-width: var(--container); margin: 0 auto; padding: 56px;
  background: var(--white); border-radius: var(--r-card);
  box-shadow: 0 30px 60px -40px rgba(1, 52, 64, .45);
}
.etapas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.etapa {
  display: flex; gap: 20px; align-items: flex-start; padding: 26px 26px 28px;
  background: var(--offwhite); border: 1px solid var(--border); border-radius: var(--r-card);
}
.etapa--destacada { background: var(--coral-100); border-color: #F8C2AE; }
.etapa__num {
  flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  font-family: var(--font-display); font-weight: 700; font-size: 20px; color: var(--circuito);
  background: var(--white); border: 1px solid var(--border);
}
.etapa--destacada .etapa__num {
  color: var(--white); border-color: var(--raiz);
  background: var(--noise) 0 0 / 180px 180px, var(--raiz); background-blend-mode: soft-light;
}
.etapa__titulo { margin: 4px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-family: var(--font-display); font-weight: 700; font-size: 22px; line-height: 30px; letter-spacing: -0.01em; }
.etapa__plazo {
  font-family: var(--font-body); font-size: 12px; line-height: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 5px 9px; border-radius: 8px; color: var(--white); background: var(--coral);
}
.etapa__texto { margin: 8px 0 0; font-size: 16px; line-height: 23px; color: var(--raiz-400); }
.etapas > :nth-child(2) { transition-delay: .08s; }
.etapas > :nth-child(4) { transition-delay: .08s; }

/* Nota bajo el ciclo (sólo en Diseño a medida) */
.ciclo__nota { margin: 24px 0 0; font-size: 16px; line-height: 23px; color: var(--raiz-400); }
.ciclo__nota b { color: var(--raiz); }

/* Inversión en dos partes (mismas tarjetas con grano que "Dos formas de entrenar") */
.medida-inversion { padding: 112px 24px 64px; background: var(--offwhite); }
.inversion { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.inversion__parte {
  position: relative; isolation: isolate; overflow: hidden;
  padding: 32px; border-radius: var(--r-card); background: var(--fondo);
}
.inversion__parte::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--noise) 0 0 / 180px 180px; mix-blend-mode: soft-light; opacity: .55; }
.inversion__parte--fee { --fondo: #E3EFF0; --tono: var(--circuito); }
.inversion__parte--persona { --fondo: #FDECE5; --tono: var(--coral-600); }
.inversion__icono { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--white); box-shadow: 0 10px 24px -18px rgba(1, 52, 64, .6); }
.inversion__icono svg { width: 26px; height: 26px; fill: none; stroke: var(--tono); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
/* Guía: H3 26/36 */
.inversion__titulo { margin: 22px 0 0; font-family: var(--font-display); font-weight: 700; font-size: 26px; line-height: 36px; letter-spacing: -0.01em; }
.inversion__texto { margin: 6px 0 0; max-width: 380px; font-size: 18px; line-height: 25px; color: var(--raiz-400); }
.inversion__pie { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; margin-top: 24px; }
.inversion__pie p { margin: 0; font-size: 16px; line-height: 23px; color: var(--raiz-400); }
.inversion__pie .btn { min-height: 48px; padding: 0 24px; font-size: 16px; }
.inversion__pie svg { transition: transform .2s var(--ease); }
.inversion__pie .btn:hover svg { transform: translateX(3px); }
.inversion > :nth-child(2) { transition-delay: .08s; }

/* Experiencia con bancos */
.medida-bancos { padding: 48px 24px 120px; background: var(--offwhite); }
.medida-bancos__inner {
  display: grid; grid-template-columns: 1.15fr 1fr; gap: 40px; align-items: center;
  padding: 44px; background: var(--white); border: 1px solid var(--border); border-radius: var(--r-card);
}
.medida-bancos__logos { display: flex; align-items: center; justify-content: center; gap: 36px; }
.medida-bancos__logos img { width: auto; }
.medida-bancos__logos span { width: 1px; height: 56px; background: var(--border); }

/* Cierre del pie: correo de contacto */
.pie__correo { display: inline-flex; align-items: center; gap: 10px; margin: 28px 0 0; font-size: 15px; line-height: 21px; color: var(--claridad); }
.pie__correo svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pie__correo a { color: var(--white); text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .35); text-underline-offset: 3px; transition: color .2s, text-decoration-color .2s; }
.pie__correo a:hover { color: var(--coral); text-decoration-color: var(--coral); }

@media (max-width: 1040px) {
  .medida-hero__inner { grid-template-columns: 1fr; gap: 56px; }
  .medida-hero__media { max-width: 560px; width: 100%; margin: 0 auto; }
  .medida-tag--a { left: -16px; }
  .medida-tag--b { right: -16px; }
  .medida-practica__inner { grid-template-columns: 1fr; gap: 32px; }
  .medida-formas__grid { gap: 32px 16px; }
}
@media (max-width: 760px) {
  .medida__head { margin-bottom: 28px; }
  .medida__title, .medida__title--md { font-size: 32px; line-height: 38px; }
  .medida__sub { font-size: 16px; line-height: 23px; }

  .medida-hero { padding: 104px 16px 64px; }
  .medida-hero__title { font-size: 42px; line-height: 50px; }
  .medida-hero__lead { font-size: 20px; line-height: 27px; }
  .medida-hero__sub { font-size: 16px; line-height: 23px; }
  .medida-hero__ctas .btn { width: 100%; }
  .medida-hero__pixel { width: 96px; left: -16px; bottom: -20px; }
  .medida-tag { max-width: 200px; padding: 10px 12px 10px 10px; font-size: 13px; line-height: 17px; }
  .medida-tag--a { top: 16px; left: -6px; }
  .medida-tag--b { bottom: 16px; right: -6px; max-width: 200px; white-space: normal; }

  .medida-practica { padding: 72px 16px 40px; }
  .insumos { grid-template-columns: 1fr; }
  .insumo { flex-direction: row; align-items: center; padding: 14px 16px; }
  .medida-formas { padding: 40px 16px 72px; }
  .medida-formas__grid { grid-template-columns: 1fr; gap: 40px; }
  .medida-aviso { align-items: flex-start; padding: 16px; }

  .medida-etapas { padding: 48px 10px 64px; background-size: 40px 40px; }
  .medida-etapas__panel { padding: 32px 16px 24px; }
  .etapas { grid-template-columns: 1fr; gap: 12px; }
  .etapa { flex-direction: column; gap: 14px; padding: 20px; }
  .etapa__titulo { font-size: 20px; line-height: 27px; }

  .medida-inversion { padding: 72px 16px 40px; }
  .inversion { grid-template-columns: 1fr; gap: 12px; }
  .inversion__parte { padding: 24px 20px; }
  .inversion__titulo { font-size: 22px; line-height: 28px; margin-top: 16px; }
  .inversion__texto { font-size: 16px; line-height: 23px; }
  .inversion__pie { flex-direction: column; align-items: stretch; }
  .inversion__pie .btn { width: 100%; }

  .medida-bancos { padding: 32px 16px 72px; }
  .medida-bancos__inner { grid-template-columns: 1fr; gap: 28px; padding: 24px 20px; }
  .medida-bancos__logos { gap: 24px; }
  .medida-bancos__logos img { max-height: 36px; }
}

/* =========================================================
   Programa de Gestión del Desempeño (página /gestion-del-desempeno)
   Reutiliza el hero, las tarjetas, Resultados, FAQ y el formulario de la portada y contacto.
   ========================================================= */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Eyebrows con subrayado: se dibuja al aparecer, como en Metodología */
.modulos__head.is-visible .metodologia__eyebrow .hl__line,
.setenta .formas__head.is-visible .metodologia__eyebrow .hl__line,
.progreso__head.is-visible .metodologia__eyebrow .hl__line,
.cohorte__inner.is-visible .metodologia__eyebrow .hl__line { animation: draw 1.1s .45s var(--ease) forwards; }

/* ---------- Hero (escena fija: persona sobre el isotipo y tarjetas, sin carrusel) ---------- */
/* Halftone suave sobre el gradiente (en la portada lo dibuja el canvas de hero.js) */
.prog-hero .hero__bg::after {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 70%;
  color: var(--circuito); background-image: var(--dots); background-size: 14px 14px; opacity: .2;
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent); mask-image: linear-gradient(to bottom, #000, transparent);
}
.prog-hero__eyebrow {
  margin: 22px 0 0;
  font-size: 13px; line-height: 16px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--circuito);
}
.prog-hero .hero__title { margin-top: 12px; }
.prog-hero__linea { display: block; color: var(--circuito); }
.prog-hero__datos {
  list-style: none; max-width: 900px; margin: 26px auto 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
}
.prog-hero__datos li {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 10px;
  border: 1px solid var(--border); border-radius: 999px; background: rgba(255, 255, 255, .82);
  font-size: 14px; line-height: 18px;
}
.prog-hero__datos svg { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--coral); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.prog-hero__cta { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 28px; }
.prog-hero__cta span { font-size: 14px; line-height: 18px; color: var(--raiz-400); }
.prog-hero .hero__head > :nth-child(5) { animation-delay: .32s; }
.prog-hero .hero__head > :nth-child(6) { animation-delay: .4s; }
.prog-hero .prompt { min-height: 0; }

/* ---------- Confianza: logos + dato Gallup ---------- */
.confianza { padding: 64px 24px 72px; background: var(--white); }
.confianza__inner {
  max-width: var(--container); margin: 0 auto;
  display: grid; grid-template-columns: 1.15fr 1fr; gap: 32px 64px; align-items: center;
}
.confianza__titulo { margin: 0 0 24px; font-family: var(--font-display); font-weight: 500; font-size: 22px; line-height: 28px; letter-spacing: -0.01em; }
.confianza__logos ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 24px 40px; }
.confianza__logos img { width: auto; filter: grayscale(1); opacity: .75; transition: filter .3s, opacity .3s; }
.confianza__logos img:hover { filter: none; opacity: 1; }
.confianza__dato {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: center; gap: 24px; margin: 0; padding: 26px 28px;
  border-radius: var(--r-card); background: var(--raiz); color: var(--claridad);
  box-shadow: 0 24px 40px -28px rgba(1, 52, 64, .7);
}
.confianza__dato::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--noise) 0 0 / 180px 180px; mix-blend-mode: screen; opacity: .14; }
.confianza__num {
  margin: 0; flex: none;
  font-family: var(--font-display); font-weight: 700; font-size: 72px; line-height: 1; letter-spacing: -0.03em;
  color: var(--coral); font-variant-numeric: tabular-nums;
}
.confianza__dato figcaption p { margin: 0; font-size: 16px; line-height: 23px; }
.confianza__dato b { color: var(--white); }
.confianza__dato cite { display: block; margin-top: 8px; font-style: normal; font-size: 12px; line-height: 16px; opacity: .8; }

/* ---------- Módulos (cuatro conversaciones, cada una con su color de apoyo) ---------- */
.modulos { padding: 120px 24px; background: var(--white); }
.modulos__inner { max-width: var(--container); margin: 0 auto; }
.modulos__head { max-width: 760px; margin-bottom: 48px; }
/* Guía: H2 grande 52/62 (32 en móvil) */
.modulos__title { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 52px; line-height: 62px; letter-spacing: -0.02em; text-wrap: balance; }
.modulos__sub { margin: 14px 0 0; font-size: 18px; line-height: 25px; color: var(--raiz-400); text-wrap: pretty; }
.modulos__lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.modulos__lista > :nth-child(2) { transition-delay: .08s; }
.modulos__lista > :nth-child(3) { transition-delay: .16s; }
.modulos__lista > :nth-child(4) { transition-delay: .24s; }
.modulo { display: flex; flex-direction: column; }
/* Panel de color con cuadrícula y la foto (como el panel del Ciclo) */
.modulo__media {
  position: relative; overflow: hidden; aspect-ratio: 4 / 5; border-radius: var(--r-card);
  background-color: var(--tinte);
  background-image: linear-gradient(rgba(1, 52, 64, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(1, 52, 64, .07) 1px, transparent 1px);
  background-size: 28px 28px;
}
.modulo__pixel { position: absolute; top: 6%; right: 6%; width: 36%; fill: var(--acento); opacity: .5; }
.modulo__foto {
  position: absolute; top: 20%; left: 12%; width: 76%; height: 68%; object-fit: cover; border-radius: 6px;
  box-shadow: 0 20px 30px -22px rgba(1, 52, 64, .6);
  transition: transform .6s var(--ease);
}
.modulo:hover .modulo__foto { transform: translateY(-4px) rotate(-1deg); }
.modulo__num {
  align-self: flex-start; margin-top: 18px; padding: 4px 10px; border-radius: 6px;
  background: var(--tinte); color: var(--acento-osc);
  font-size: 12px; line-height: 14px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.modulo__titulo { margin: 10px 0 0; font-family: var(--font-display); font-weight: 700; font-size: 24px; line-height: 30px; letter-spacing: -0.01em; }
.modulo__texto { margin: 6px 0 0; font-size: 16px; line-height: 23px; color: var(--raiz-400); }

/* ---------- Metodología 70-20-10 (sobre el papel cuadriculado de "Dos formas de entrenar") ---------- */
.setenta .formas__title .hl__line { animation: none; }
.setenta .formas__head.is-visible .formas__title .hl__line { animation: draw 1.1s .7s var(--ease) forwards; }
/* Barra con la proporción real de cada fase */
.mezcla { display: flex; gap: 6px; height: 64px; margin: 0 0 32px; }
.mezcla__parte {
  flex: var(--pct) 1 0; min-width: 0; display: flex; align-items: center; padding: 0 14px;
  border-radius: var(--r-control); color: var(--tinta, var(--white));
  background: var(--noise-suave) 0 0 / 140px 140px, var(--color); background-blend-mode: soft-light;
  font-family: var(--font-display); font-size: 18px;
  transform: scaleX(0); transform-origin: left center; transition: transform .9s var(--ease);
}
.mezcla.is-visible .mezcla__parte { transform: none; }
.mezcla.is-visible .mezcla__parte:nth-child(2) { transition-delay: .15s; }
.mezcla.is-visible .mezcla__parte:nth-child(3) { transition-delay: .3s; }
.fases { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.fases > :nth-child(2) { transition-delay: .08s; }
.fases > :nth-child(3) { transition-delay: .16s; }
.fase { padding-top: 18px; border-top: 3px solid var(--color); }
.fase__pct { font-family: var(--font-display); font-weight: 700; font-size: 48px; line-height: 52px; letter-spacing: -0.03em; color: var(--oscuro); }
/* Guía: H3 26/36 */
.fase__nombre { margin: 4px 0 0; font-family: var(--font-display); font-weight: 700; font-size: 26px; line-height: 36px; letter-spacing: -0.01em; }
.fase__texto { margin: 4px 0 0; font-size: 18px; line-height: 25px; color: var(--raiz-400); text-wrap: pretty; }
.setenta__datos { list-style: none; margin: 40px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.setenta__datos li { padding: 7px 14px; border: 1px solid var(--border); border-radius: 999px; background: var(--offwhite); font-size: 14px; line-height: 18px; font-weight: 700; }

/* ---------- Así ves el progreso (participante y RR.HH.) ---------- */
.progreso { padding: 120px 24px; background: var(--white); }
.progreso__inner { max-width: var(--container); margin: 0 auto; }
.progreso__head { display: grid; grid-template-columns: 1.2fr 1fr; gap: 32px 64px; align-items: end; margin-bottom: 40px; }
/* Guía: H2 grande 52/62 (32 en móvil) */
.progreso__title { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 52px; line-height: 62px; letter-spacing: -0.02em; text-wrap: balance; }
.progreso__sub { margin: 0; font-size: 18px; line-height: 25px; color: var(--raiz-400); text-wrap: pretty; }
.progreso__cifras { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px 32px; }
.progreso__cifras li { display: flex; flex-direction: column; font-size: 14px; line-height: 18px; color: var(--raiz-400); }
.progreso__cifras b { font-family: var(--font-display); font-weight: 700; font-size: 32px; line-height: 38px; letter-spacing: -0.02em; color: var(--raiz); }
.progreso__notas { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 32px; }
.nota { padding: 22px 24px; border: 1px solid var(--circuito-100); border-radius: var(--r-panel); background: var(--offwhite); }
.nota__titulo { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font-family: var(--font-display); font-weight: 700; font-size: 18px; line-height: 24px; }
.nota__titulo svg { flex: none; width: 20px; height: 20px; fill: none; stroke: var(--coral); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nota p { margin: 0; font-size: 16px; line-height: 23px; color: var(--raiz-400); }

.progreso__vistas { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.progreso__vistas > :nth-child(2) { transition-delay: .08s; }
.vista { display: flex; flex-direction: column; }
.vista--participante { --tinte: #EEE5F8; }
.vista--rrhh { --tinte: #DCEBEC; }
.vista__para { margin: 0 0 12px; font-size: 12px; line-height: 14px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--circuito); }
.vista__panel {
  flex: 1; padding: 36px 32px; border-radius: var(--r-card);
  background-color: var(--tinte);
  background-image: linear-gradient(rgba(1, 52, 64, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(1, 52, 64, .07) 1px, transparent 1px);
  background-size: 40px 40px;
}
.maqueta {
  padding: 24px; border: 1px solid rgba(195, 214, 214, .8); border-radius: var(--r-panel);
  background: var(--white); box-shadow: 0 30px 50px -34px rgba(1, 52, 64, .55);
}
.maqueta__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.maqueta__tag { display: inline-block; padding: 4px 8px; border-radius: 6px; background: var(--raiz); color: var(--white); font-size: 11px; line-height: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.maqueta__titulo { margin: 10px 0 0; font-family: var(--font-display); font-weight: 700; font-size: 24px; line-height: 30px; letter-spacing: -0.01em; }
.maqueta__texto { margin: 6px 0 0; font-size: 15px; line-height: 21px; color: var(--raiz-400); }

/* Puntaje: el arco se completa al aparecer */
.puntaje { flex: none; display: flex; align-items: center; gap: 10px; margin: 0; }
.puntaje svg { width: 64px; height: 64px; transform: rotate(-90deg); }
.puntaje__fondo, .puntaje__arco { fill: none; stroke-width: 6; }
.puntaje__fondo { stroke: var(--circuito-100); }
.puntaje__arco { stroke: var(--success); stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.2s .3s var(--ease); }
.vista.is-visible .puntaje__arco { stroke-dashoffset: calc(1 - var(--p)); }
.puntaje span { max-width: 84px; font-size: 12px; line-height: 15px; color: var(--raiz-400); }
.puntaje b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 22px; line-height: 26px; color: var(--raiz); }

.conductas { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 8px; }
.conducta { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r-control); background: var(--coral-100); font-size: 15px; line-height: 20px; }
.conducta.is-lograda { background: #EDF6E4; }
.conducta__marca { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--coral); color: var(--white); }
.conducta.is-lograda .conducta__marca { background: var(--success); }
.conducta__marca svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.proximo { margin-top: 16px; padding: 14px 16px; border-radius: var(--r-control); background: var(--raiz); color: var(--claridad); font-size: 15px; line-height: 21px; }
.proximo p { margin: 0; }
.proximo .proximo__titulo { margin-bottom: 4px; font-size: 11px; line-height: 14px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--coral); }

/* Reporte: las barras crecen al aparecer; el foco de desarrollo va en Chispa Coral */
.reporte { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 16px; }
.reporte__fila { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; font-size: 15px; line-height: 20px; }
.reporte__pct { font-weight: 700; font-variant-numeric: tabular-nums; }
.reporte__barra { grid-column: 1 / -1; display: block; height: 10px; border-radius: 10px; background: var(--circuito-100); overflow: hidden; }
.reporte__barra i { display: block; width: var(--w); height: 100%; border-radius: 10px; background: var(--circuito); transform: scaleX(0); transform-origin: left; transition: transform 1.2s var(--ease); }
.reporte__fila.is-foco .reporte__barra i { background: var(--coral); }
.vista.is-visible .reporte__barra i { transform: none; }
.vista.is-visible .reporte__fila:nth-child(2) .reporte__barra i { transition-delay: .12s; }
.vista.is-visible .reporte__fila:nth-child(3) .reporte__barra i { transition-delay: .24s; }
.vista.is-visible .reporte__fila:nth-child(4) .reporte__barra i { transition-delay: .36s; }
.reporte__pie {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px;
  margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--circuito-100);
  font-size: 14px; line-height: 18px; color: var(--raiz-400);
}
.reporte__foco { padding: 4px 10px; border-radius: 999px; background: var(--coral-100); color: var(--coral-600); font-weight: 700; }
.progreso__nota { margin: 18px 0 0; font-size: 14px; line-height: 20px; color: var(--raiz-400); }

/* ---------- Experiencia BCI: más testimonios bajo la cita principal ---------- */
.res__mas { list-style: none; margin: 56px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.res__mas > :nth-child(2) { transition-delay: .08s; }
.res__mas figure {
  height: 100%; margin: 0; padding: 28px 30px; border-radius: var(--r-card);
  background: rgba(255, 255, 255, .62); border: 1px solid rgba(255, 255, 255, .85);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.res__mas blockquote { margin: 0 0 14px; font-family: var(--font-display); font-weight: 500; font-size: 22px; line-height: 30px; letter-spacing: -0.01em; text-wrap: pretty; }
.res__mas figcaption { font-size: 15px; line-height: 21px; font-weight: 700; }

/* ---------- Próxima cohorte ---------- */
.cohorte { padding: 120px 24px; background: var(--white); }
.cohorte__inner {
  position: relative; isolation: isolate; overflow: hidden;
  max-width: var(--container); margin: 0 auto; padding: 64px 56px;
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px 56px; align-items: center;
  border-radius: var(--r-card);
  background: url("../assets/img/hero/gradiente-hero.webp") center / cover no-repeat, var(--offwhite);
}
.cohorte__inner::after {
  content: ""; position: absolute; z-index: -1; left: 0; bottom: 0; width: 60%; height: 70%;
  color: var(--circuito); background-image: var(--dots); background-size: 14px 14px; opacity: .25;
  -webkit-mask-image: radial-gradient(ellipse at 0% 100%, #000 10%, transparent 70%);
          mask-image: radial-gradient(ellipse at 0% 100%, #000 10%, transparent 70%);
}
/* Guía: H2 grande 52/62 (32 en móvil) */
.cohorte__title { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 52px; line-height: 62px; letter-spacing: -0.02em; text-wrap: balance; }
.cohorte__sub { margin: 14px 0 0; font-size: 18px; line-height: 25px; color: var(--raiz-400); }
.cohorte__incluye { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 12px; }
.cohorte__incluye li { display: flex; align-items: center; gap: 12px; font-size: 17px; line-height: 24px; }
.cohorte__incluye li::before {
  content: ""; flex: none; width: 26px; height: 26px; border-radius: 50%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5 6.5 11.5 12.5 5' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 15px no-repeat, var(--success);
}
.cohorte__card {
  position: relative; isolation: isolate; overflow: hidden; padding: 32px;
  border-radius: var(--r-card); background: var(--raiz); color: var(--white);
  box-shadow: 0 30px 60px -36px rgba(1, 52, 64, .8);
}
.cohorte__card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--noise) 0 0 / 180px 180px; mix-blend-mode: screen; opacity: .12; }
.cohorte__label { margin: 0; font-size: 12px; line-height: 14px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--claridad); }
.cohorte__fecha { margin: 8px 0 0; font-family: var(--font-display); font-weight: 700; font-size: 44px; line-height: 48px; letter-spacing: -0.02em; color: var(--coral); }
/* Guía: H3 26/36 */
.cohorte__card-title { margin: 24px 0 0; padding-top: 22px; border-top: 1px solid rgba(206, 224, 224, .2); font-family: var(--font-display); font-weight: 700; font-size: 26px; line-height: 36px; letter-spacing: -0.01em; }
.cohorte__card-texto { margin: 4px 0 0; font-size: 16px; line-height: 23px; color: var(--claridad); }
.cohorte__cta { width: 100%; margin-top: 22px; }
.cohorte__legal { margin: 14px 0 0; font-size: 13px; line-height: 18px; text-align: center; color: var(--claridad); }

/* ---------- Inscripción (mismo formulario que /contacto) ---------- */
.inscripcion { padding: 120px 24px; }
.inscripcion .contacto__info { padding-top: 40px; }

@media (max-width: 1040px) {
  .confianza__inner, .progreso__head, .progreso__vistas, .cohorte__inner { grid-template-columns: 1fr; }
  .modulos__lista { grid-template-columns: repeat(2, 1fr); gap: 36px 20px; }
}
@media (max-width: 760px) {
  .prog-hero .announce__tag, .prog-hero .announce__text { white-space: nowrap; }
  .prog-hero__datos li { padding: 6px 12px 6px 8px; font-size: 13px; }
  .prog-hero__cta { align-items: stretch; }
  .prog-hero__cta .btn { width: 100%; }

  .confianza { padding: 48px 16px 56px; }
  .confianza__logos { text-align: center; }
  .confianza__logos ul { justify-content: center; gap: 20px 36px; }
  .confianza__dato { flex-direction: column; align-items: flex-start; gap: 10px; padding: 22px; }
  .confianza__num { font-size: 56px; }

  .modulos, .progreso, .cohorte { padding: 80px 16px; }
  .modulos__title, .progreso__title, .cohorte__title { font-size: 32px; line-height: 38px; }
  .modulos__sub, .progreso__sub, .cohorte__sub { font-size: 16px; line-height: 23px; }
  .modulos__head { margin-bottom: 32px; }
  .modulos__lista { grid-template-columns: 1fr; }
  .modulo__media { aspect-ratio: 4 / 3; }
  .modulo__titulo { font-size: 22px; line-height: 28px; }

  .setenta .formas__inner { padding: 32px 18px 28px; }
  .mezcla { height: 44px; margin-bottom: 24px; }
  .mezcla__parte b { display: none; }
  .fases { grid-template-columns: 1fr; gap: 24px; }
  .fase__pct { font-size: 36px; line-height: 40px; }
  .fase__nombre { font-size: 22px; line-height: 28px; }
  .fase__texto { font-size: 16px; line-height: 23px; }
  .setenta__datos { margin-top: 28px; }

  .progreso__notas { grid-template-columns: 1fr; }
  .vista__panel { padding: 20px 12px; }
  .maqueta { padding: 18px 16px; }
  .maqueta__head { flex-direction: column; }

  .res__mas { grid-template-columns: 1fr; margin-top: 40px; }
  .res__mas figure { padding: 22px; }
  .res__mas blockquote { font-size: 18px; line-height: 26px; }

  .cohorte__inner { padding: 32px 20px; }
  .cohorte__incluye li { font-size: 16px; line-height: 23px; }
  .cohorte__card { padding: 24px 20px; }
  .cohorte__fecha { font-size: 36px; line-height: 40px; }

  .inscripcion { padding: 80px 16px; }
  .inscripcion .contacto__info { padding-top: 0; }
}