/* ============================================================
   BRAINPOWER — Base, layout y componentes
   Vanilla CSS. Sin framework, sin build step. Mobile first.
   ============================================================ */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--bp-font-body);
  font-size: var(--bp-text-base);
  line-height: var(--bp-leading-normal);
  color: var(--bp-tinta);
  background: var(--bp-hueso);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* fundido de salida al navegar a otra página (page-transitions.js) — el
   header/contenido siempre aparece tal cual al cargar, esto solo se activa
   al hacer clic para ir a otra página */
body.page-fade-out { opacity: 0; transition: opacity .18s var(--bp-ease); }

@media (prefers-reduced-motion: reduce) {
  body.page-fade-out { transition: none; opacity: 1; }
}

/* ============================================================
   PANTALLA DE INICIO (splash) — solo Home, una vez por sesión.
   Cubre toda la pantalla mientras carga/anima, luego se retira y
   el sitio (header incluido) queda visible tal cual, sin animación.
   Estética pedida por el cliente: gradiente azul→morado con "blobs"
   orgánicos, la marca del cerebro como watermark y el garabato ondulado,
   como en las piezas de Open House — ver referencia del cliente.
   ============================================================ */
.intro-splash {
  position: fixed; inset: 0; z-index: 999;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  background:
    radial-gradient(60% 50% at 14% 88%, rgba(25,184,197,.55), transparent 70%),
    radial-gradient(55% 48% at 88% 10%, rgba(143,114,214,.45), transparent 70%),
    linear-gradient(135deg, #6B4BC1 0%, #19B8C5 100%);
  transition: opacity .7s var(--bp-ease), visibility .7s var(--bp-ease);
}
.intro-splash.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }

/* blobs de fondo: se asientan con un fundido lento y quedan flotando muy
   suavemente durante toda la espera, para que el splash se sienta vivo */
.intro-splash__blob {
  position: absolute; border-radius: 50%; opacity: 0; filter: blur(2px);
  animation: intro-blob-in 1.4s var(--bp-ease) forwards, intro-blob-float 7s ease-in-out infinite;
  animation-delay: 0s, 1.4s;
}
.intro-splash__blob--a {
  width: 52vmax; height: 52vmax; left: -18vmax; bottom: -22vmax;
  background: radial-gradient(circle, rgba(25,184,197,.5) 0%, transparent 72%);
}
.intro-splash__blob--b {
  width: 40vmax; height: 40vmax; right: -14vmax; top: -16vmax;
  background: radial-gradient(circle, rgba(240,175,199,.35) 0%, transparent 72%);
  animation-duration: 1.4s, 8.5s;
  animation-delay: .15s, 1.55s;
}
@keyframes intro-blob-in { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: scale(1); } }
@keyframes intro-blob-float {
  0%, 100% { transform: scale(1) translate(0, 0); }
  50% { transform: scale(1.06) translate(2%, -2%); }
}

/* marca del cerebro como watermark decorativo, esquina superior derecha */
.intro-splash__mark {
  position: absolute; top: 6%; right: 4%; width: 34vmin; max-width: 280px; height: auto;
  filter: brightness(0) invert(1);
  opacity: 0; transform: scale(.92) rotate(-4deg);
  animation: intro-mark-in 1.3s .15s var(--bp-ease) forwards;
}
@keyframes intro-mark-in { to { opacity: .16; transform: scale(1) rotate(0deg); } }

.intro-splash__inner { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1.2rem; }
.intro-splash__logo {
  height: 60px; width: auto; opacity: 0;
  animation: intro-logo-in .8s .35s cubic-bezier(.22, 1.2, .36, 1) forwards;
}
.intro-splash__wave { width: 200px; height: 22px; overflow: visible; }
.intro-splash__wave path {
  fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
  opacity: .9;
  stroke-dasharray: 260; stroke-dashoffset: 260;
  animation: intro-wave-draw 1.3s 1.05s var(--bp-ease) forwards;
}
.intro-splash__tagline {
  font-family: var(--bp-font-display); font-weight: 700;
  font-size: var(--bp-text-sm); letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.85); opacity: 0;
  animation: intro-tagline-in .6s 2.05s var(--bp-ease) forwards;
}
@keyframes intro-logo-in { from { opacity: 0; transform: scale(.8) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes intro-wave-draw { to { stroke-dashoffset: 0; } }
@keyframes intro-tagline-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .intro-splash { display: none; }
}
html.no-intro .intro-splash { display: none; }

img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; }
ul { list-style: none; }
h1, h2, h3, h4 { font-family: var(--bp-font-display); font-weight: 800; line-height: var(--bp-leading-tight); color: var(--bp-tinta); }
p { max-width: 65ch; }

/* ---------- Foco visible (accesibilidad) ---------- */
:focus-visible {
  outline: 3px solid var(--bp-foco);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute; left: 8px; top: -60px;
  background: var(--bp-blanco); color: var(--bp-tinta);
  padding: .6rem 1rem; border-radius: var(--bp-radius-sm);
  box-shadow: var(--bp-shadow); z-index: var(--bp-z-modal);
  transition: top var(--bp-dur) var(--bp-ease);
}
.skip-link:focus { top: 8px; }

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: var(--bp-container);
  margin-inline: auto;
  padding-inline: 1.25rem;
}
.container--narrow { max-width: var(--bp-container-narrow); }

.section { padding-block: var(--bp-section-y); }
.section--tight { padding-block: clamp(2.5rem, 2rem + 2vw, 4rem); }

/* foto de fondo sutil detrás de una sección de bloque de color sólido (G3):
   la imagen se pone con --section-photo en un style inline, bien tenue para
   no restar legibilidad al contenido que va encima */
.section--photo-soft { position: relative; overflow: hidden; }
.section--photo-soft::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: var(--section-photo) center/cover no-repeat;
  opacity: .14;
}
.section--photo-soft > .container { position: relative; z-index: 1; }

.section__head { max-width: 52ch; margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.25rem); }
.section__head--center { margin-inline: auto; text-align: center; }
.section__head--wide { max-width: 62ch; }
.section__head .lead { margin-top: .85rem; }

.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--bp-font-display);
  font-weight: 700; font-size: var(--bp-text-sm);
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--bp-morado);
  margin-bottom: .9rem;
}
.eyebrow::before { content: "✦"; color: var(--bp-cyan); font-size: 1em; }

h1, .h1 { font-size: var(--bp-text-4xl); }
h2, .h2 { font-size: var(--bp-text-3xl); }
h3, .h3 { font-size: var(--bp-text-xl); }
.lead { font-size: var(--bp-text-lg); color: var(--bp-gris); line-height: var(--bp-leading-normal); }
.text-muted { color: var(--bp-gris); }

/* palabra de acento dentro de un titular (como en la gráfica) */
.hl { color: var(--bp-morado); }
.hl--morado { color: var(--bp-morado); }
.hl--cyan-pill {
  background: var(--bp-morado);
  color: #fff; padding: .02em .32em;
  border-radius: 10px;
  /* si el texto de la pill no cabe en una línea, box-decoration-break:clone
     hace que cada línea tenga su propia píldora redondeada, en vez de
     forzar nowrap (que en frases largas se salía de la pantalla en mobile) */
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
@media (min-width: 480px) {
  .hl--cyan-pill--word { white-space: nowrap; }
}

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-family: var(--bp-font-display); font-weight: 700;
  font-size: var(--bp-text-base);
  padding: .95rem 1.6rem;
  border-radius: var(--bp-radius-pill);
  transition: transform var(--bp-dur) var(--bp-ease),
              box-shadow var(--bp-dur) var(--bp-ease),
              background-color var(--bp-dur) var(--bp-ease);
  will-change: transform;
}
.btn svg { width: 1.15em; height: 1.15em; }
.btn--primary { background: var(--bp-cyan); color: #fff; box-shadow: var(--bp-shadow-cyan); }
.btn--primary:hover { background: var(--bp-cyan-deep); transform: translateY(-2px); box-shadow: var(--bp-shadow-lg); }
.btn--wa { background: #25D366; color: #0b2e17; box-shadow: 0 14px 34px -14px rgba(37,211,102,.5); }
.btn--wa:hover { background: #1ebe5a; transform: translateY(-2px); }
.btn--ghost { background: rgba(255,255,255,.14); color: #fff; border: 1.5px solid rgba(255,255,255,.5); backdrop-filter: blur(4px); }
.btn--ghost:hover { background: rgba(255,255,255,.24); transform: translateY(-2px); }
.btn--outline { background: #fff; color: var(--bp-cyan-deep); border: 1.5px solid var(--bp-borde); }
.btn--outline:hover { border-color: var(--bp-cyan); transform: translateY(-2px); box-shadow: var(--bp-shadow-sm); }
.btn--lg { padding: 1.1rem 2rem; font-size: var(--bp-text-lg); }
.btn--block { display: flex; width: 100%; }

/* ---------- Badges / pills ---------- */
.badge {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: var(--bp-text-sm); font-weight: 600;
  padding: .5rem .9rem; border-radius: var(--bp-radius-pill);
  background: #fff; color: var(--bp-tinta);
  box-shadow: var(--bp-shadow-sm);
}
.badge--glass { background: rgba(255,255,255,.16); color: #fff; box-shadow: none; border: 1px solid rgba(255,255,255,.28); backdrop-filter: blur(4px); }
.badge__check { display: inline-grid; place-items: center; width: 1.15rem; height: 1.15rem; border-radius: 999px; background: var(--bp-teal); color: #fff; flex: none; }
.badge__check svg { width: .8rem; height: .8rem; }

.pill-name { /* pill morada tras un nombre, como en la gráfica */
  display: inline-block; font-family: var(--bp-font-display); font-weight: 800;
  letter-spacing: .02em; text-transform: uppercase;
  background: var(--bp-morado); color: #fff;
  padding: .3rem .8rem; border-radius: var(--bp-radius-sm);
}

/* ---------- Superficies con gradiente ---------- */
.surface-grad { background: var(--bp-gradient-inv); color: #fff; }
.surface-grad h1, .surface-grad h2, .surface-grad h3 { color: #fff; }
.surface-grad .lead { color: rgba(255,255,255,.86); }
.surface-soft { background: var(--bp-gradient-suave); }
.surface-morado { background: var(--bp-morado-tenue); }

/* retícula de puntos decorativa */
.dots {
  background-image: radial-gradient(rgba(255,255,255,.35) 1.4px, transparent 1.4px);
  background-size: 22px 22px;
}
.dots--ink {
  background-image: radial-gradient(rgba(27,95,204,.16) 1.4px, transparent 1.4px);
  background-size: 22px 22px;
}

/* destellos / asteriscos decorativos */
.spark { position: absolute; color: var(--bp-cyan); opacity: .9; pointer-events: none; user-select: none; }
.spark--lg { font-size: 2.4rem; }

/* ---------- Cards ---------- */
.card {
  background: #fff;
  border: 1px solid var(--bp-borde);
  border-radius: var(--bp-radius-lg);
  padding: 1.5rem;
  box-shadow: var(--bp-shadow-sm);
  transition: transform var(--bp-dur) var(--bp-ease),
              box-shadow var(--bp-dur) var(--bp-ease),
              border-color var(--bp-dur) var(--bp-ease);
}
.card--hover:hover { transform: translateY(-4px); box-shadow: var(--bp-shadow); border-color: transparent; }

.card__icon {
  display: grid; place-items: center;
  width: 3rem; height: 3rem; border-radius: 14px;
  background: var(--bp-cyan-tenue); color: var(--bp-cyan-deep);
  margin-bottom: 1rem;
}
.card__icon svg { width: 1.5rem; height: 1.5rem; }

/* ---------- Grids util ---------- */
.grid { display: grid; gap: 1.25rem; }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: 1fr; }
.stack-lg > * + * { margin-top: 1.5rem; }

@media (min-width: 640px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
  /* si la última fila queda incompleta (ej. 8 tarjetas en 3 columnas),
     que se centre en vez de quedar pegada a la izquierda */
  .mirror-grid { grid-template-columns: repeat(3, minmax(0, 23rem)); justify-content: center; }
}

/* ---------- Imagen placeholder ---------- */
.ph {
  display: grid; place-items: center;
  background: var(--bp-gradient-suave);
  border: 1.5px dashed #c7d2ec;
  border-radius: var(--bp-radius-lg);
  color: var(--bp-gris); font-size: var(--bp-text-sm);
  text-align: center; padding: 1rem;
  aspect-ratio: var(--ar, 16 / 9);
  width: 100%;
}
.ph span { max-width: 26ch; }

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: sticky; top: 0; z-index: var(--bp-z-header);
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: box-shadow var(--bp-dur) var(--bp-ease), border-color var(--bp-dur) var(--bp-ease);
}
.site-header.is-scrolled { box-shadow: var(--bp-shadow-sm); border-bottom-color: var(--bp-borde); }
.site-header__bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; height: var(--bp-header-h);
}
.logo {
  display: inline-flex; align-items: center;
  font-family: var(--bp-font-display); font-weight: 800;
  font-size: 1.35rem; letter-spacing: -.015em;
  color: var(--bp-tinta);
}
.logo img { display: block; height: 38px; width: auto; }
.site-footer .logo { color: #fff; font-size: 1.2rem; }
.site-footer .logo img { height: 30px; }

.nav { display: none; }
.nav ul { display: flex; align-items: center; gap: .35rem; }
.nav a, .nav button.nav__trigger {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .6rem .8rem; border-radius: var(--bp-radius-sm);
  font-weight: 600; font-size: var(--bp-text-sm);
  color: var(--bp-tinta);
  transition: background-color var(--bp-dur) var(--bp-ease), color var(--bp-dur) var(--bp-ease);
}
.nav a:hover, .nav button.nav__trigger:hover { background: var(--bp-cyan-tenue); color: var(--bp-cyan); }

.nav__item { position: relative; }
.nav__dropdown {
  position: absolute; top: 100%; left: 0;
  margin-top: .5rem;
  min-width: 280px; background: #fff;
  border: 1px solid var(--bp-borde); border-radius: var(--bp-radius);
  box-shadow: var(--bp-shadow); padding: .5rem;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity var(--bp-dur) var(--bp-ease), transform var(--bp-dur) var(--bp-ease), visibility var(--bp-dur);
}
/* puente invisible: cubre el espacio entre el botón y el menú para que
   el mouse pueda cruzarlo sin que se dispare mouseleave */
.nav__dropdown::before {
  content: ""; position: absolute; left: 0; right: 0; top: -.6rem; height: .6rem;
}
.nav__item.is-open .nav__dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.nav__dropdown a { display: block; padding: .7rem .8rem; border-radius: var(--bp-radius-sm); font-size: var(--bp-text-sm); }
.nav__dropdown a strong { display: block; font-family: var(--bp-font-display); }
.nav__dropdown a span { color: var(--bp-gris); font-size: var(--bp-text-xs); }

.header__cta { display: none; }

.nav-toggle {
  display: inline-grid; place-items: center;
  width: 44px; height: 44px; border-radius: var(--bp-radius-sm);
  border: 1px solid var(--bp-borde); background: #fff;
}
.nav-toggle svg { width: 22px; height: 22px; }

/* menú móvil */
.mobile-nav {
  position: fixed; inset: var(--bp-header-h) 0 0 0; z-index: var(--bp-z-header);
  background: #fff; padding: 1.25rem; overflow-y: auto;
  transform: translateX(100%);
  transition: transform var(--bp-dur-slow) var(--bp-ease);
}
.mobile-nav.is-open { transform: translateX(0); }
.mobile-nav a { display: block; padding: .95rem .5rem; font-family: var(--bp-font-display); font-weight: 700; font-size: 1.1rem; border-bottom: 1px solid var(--bp-borde); }
.mobile-nav .sub a { font-size: .95rem; font-weight: 600; color: var(--bp-gris); padding-left: 1rem; }
.mobile-nav .btn { margin-top: 1.25rem; }

@media (min-width: 1024px) {
  .nav { display: block; }
  .header__cta { display: inline-flex; }
  .nav-toggle { display: none; }
  .mobile-nav { display: none; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero { position: relative; overflow: hidden; background: var(--bp-cyan); color: #fff; }
.hero::after { /* retícula de puntos */
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.28) 1.4px, transparent 1.4px);
  background-size: 24px 24px; opacity: .5; pointer-events: none;
}
.hero__inner {
  position: relative; z-index: 1;
  display: grid; gap: 2.5rem;
  padding-block: clamp(3rem, 2rem + 6vw, 5.5rem);
}
.hero h1 { color: #fff; font-size: var(--bp-text-4xl); line-height: 1.28; }
.hero h1 .hl--cyan-pill { line-height: inherit; }
.hero__lead { color: rgba(255,255,255,.9); font-size: var(--bp-text-lg); margin-top: 1.1rem; }
.hero__cta { margin-top: 1.75rem; display: flex; flex-wrap: wrap; gap: .9rem; }
.hero__badge { margin-top: 1.5rem; }

/* palabra rotativa del titular ("no son flojos / distraídos / ...") */
.hero__rotate { display: inline-block; transition: opacity var(--bp-dur-slow) var(--bp-ease), transform var(--bp-dur-slow) var(--bp-ease); }
.hero__rotate.is-swapping { opacity: 0; transform: translateY(6px); }

/* tres datos de respaldo bajo el CTA del hero */
.hero__stats { margin-top: 1.75rem; display: flex; flex-wrap: wrap; gap: 1.75rem 2rem; }
.hero__stat { display: flex; flex-direction: column; }
.hero__stat strong { font-family: var(--bp-font-display); font-weight: 800; font-size: var(--bp-text-2xl); color: #fff; line-height: 1.1; }
.hero__stat span { font-size: var(--bp-text-xs); color: rgba(255,255,255,.78); margin-top: .2rem; }
.hero__media { position: relative; }
.hero__media .ph, .hero__media img { border-radius: var(--bp-radius-lg); box-shadow: var(--bp-shadow-lg); border: none; width: 100%; height: auto; display: block; }
.hero .spark--1 { top: 8%; right: 6%; }
.hero .spark--2 { bottom: 12%; left: 4%; }

/* Hero foto a pantalla completa (Home) — la foto abarca todo el hero,
   con un velo de marca encima para que el texto siga siendo legible. */
/* z-index: 0 fuerza a que .hero--photo cree su propio contexto de apilamiento;
   sin esto, el z-index negativo de .hero__bg se compara contra el documento
   entero y la foto termina pintándose detrás de toda la sección (invisible). */
/* (El hero partido turquesa + foto de "Historias" se eliminó: el cliente pidió
   que ese banner usara el mismo estilo de foto a pantalla completa que los
   demás, así que ya no hay ninguna página que use .hero--split.) */

.hero--photo { position: relative; z-index: 0; display: flex; align-items: center; min-height: 88vh; }
.hero--photo::after { display: none; } /* la retícula de puntos no hace falta sobre una foto real */
.hero--photo .hero__inner { display: block; padding-block: clamp(3.5rem, 3rem + 6vw, 6rem); z-index: 2; }
/* las conexiones neuronales (neural.js) van ENCIMA de la foto, debajo del texto:
   el canvas se inserta por JS con z-index:0 igual que .hero__bg, así que sin esto
   el orden dependería de cuál se insertó último en el DOM y a veces la foto lo taparía. */
.hero--photo .neural-canvas { z-index: 1 !important; } /* neural.js pone z-index:0 inline; hay que ganarle con !important */
.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; display: block; }
.hero__scrim {
  position: absolute; inset: 0;
  /* Paleta más celeste (pedido del cliente): el velo arranca en turquesa oscuro
     en vez de azul-marino, para que la sección se sienta más clara y fresca. */
  background: linear-gradient(100deg, rgba(10,72,86,.92) 0%, rgba(25,150,180,.78) 32%, rgba(39,100,199,.55) 65%, rgba(107,75,193,.2) 100%);
}
.hero__content { max-width: 640px; }
.hero__emotional { font-family: var(--bp-font-display); font-weight: 700; font-size: var(--bp-text-xl); color: #fff; margin-top: 1rem; line-height: var(--bp-leading-snug); }

@media (max-width: 640px) {
  .hero--photo { min-height: 100vh; }
  .hero__bg img { object-position: center 25%; }
}

@media (min-width: 1024px) {
  .hero__inner { grid-template-columns: 1.05fr .95fr; align-items: center; gap: 3.5rem; }
}

/* ============================================================
   ESPEJO DEL PROBLEMA — "¿Te suena familiar?"
   ============================================================ */
.mirror-card {
  display: flex; flex-direction: column; align-items: center; gap: .6rem;
  text-align: center; width: 100%;
  background: #fff; border: 1px solid var(--bp-borde);
  border-radius: var(--bp-radius); padding: 1.4rem 1.2rem;
  font-weight: 600; color: var(--bp-tinta);
  box-shadow: var(--bp-shadow-sm);
  transition: transform var(--bp-dur) var(--bp-ease), box-shadow var(--bp-dur) var(--bp-ease), border-color var(--bp-dur) var(--bp-ease), background var(--bp-dur) var(--bp-ease), color var(--bp-dur) var(--bp-ease);
}
.mirror-card:hover {
  transform: translateY(-3px); box-shadow: var(--bp-shadow-lg); border-color: transparent;
  background: var(--bp-gradient); color: #fff;
}
.mirror-card__q { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; flex: none; border-radius: 999px; background: var(--bp-morado-tenue); color: var(--bp-morado); font-family: var(--bp-font-display); font-weight: 800; transition: background var(--bp-dur) var(--bp-ease), color var(--bp-dur) var(--bp-ease); }
.mirror-card:hover .mirror-card__q { background: rgba(255,255,255,.22); color: #fff; }
.mirror-card__arrow { color: var(--bp-gris); transition: transform var(--bp-dur) var(--bp-ease), color var(--bp-dur) var(--bp-ease); flex: none; }
.mirror-card:hover .mirror-card__arrow { transform: translateY(2px); color: #fff; }

/* ============================================================
   AUTOEVALUACIÓN 60s
   ============================================================ */
.selfcheck { position: relative; }
.selfcheck__anim { animation: sc-fade-in .38s var(--bp-ease); }
@keyframes sc-fade-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.selfcheck__card {
  background: #fff; border-radius: var(--bp-radius-lg);
  box-shadow: var(--bp-shadow-lg); border: 1px solid var(--bp-borde);
  padding: clamp(1.5rem, 1rem + 3vw, 2.75rem);
  max-width: 640px; margin-inline: auto;
}
.selfcheck__progress { height: 8px; border-radius: 999px; background: var(--bp-cyan-tenue); overflow: hidden; margin-bottom: 1.5rem; }
.selfcheck__bar { height: 100%; width: 0%; background: var(--bp-cyan); border-radius: 999px; transition: width var(--bp-dur-slow) var(--bp-ease); }
.selfcheck__step { text-align: center; }
.selfcheck__count { font-family: var(--bp-font-display); font-weight: 700; color: var(--bp-morado); font-size: var(--bp-text-sm); letter-spacing: .05em; text-transform: uppercase; }
.selfcheck__question { font-family: var(--bp-font-display); font-weight: 800; font-size: var(--bp-text-2xl); margin: .75rem 0 1.75rem; line-height: var(--bp-leading-snug); }
.selfcheck__answers { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
.selfcheck__answers .btn { width: 100%; }
/* paso 0: elegir grupo */
.selfcheck__group { text-align: center; }
.selfcheck__group .selfcheck__count { font-family: var(--bp-font-display); font-weight: 700; color: var(--bp-morado); font-size: var(--bp-text-sm); letter-spacing: .05em; text-transform: uppercase; }
.selfcheck__group .selfcheck__question { font-family: var(--bp-font-display); font-weight: 800; font-size: var(--bp-text-2xl); margin: .75rem 0 1.5rem; }
.selfcheck__picks { display: grid; gap: .8rem; }
.selfcheck__pick {
  text-align: left; width: 100%;
  border: 1.5px solid var(--bp-borde); border-radius: var(--bp-radius);
  padding: 1rem 1.15rem; background: #fff;
  transition: border-color var(--bp-dur) var(--bp-ease), transform var(--bp-dur) var(--bp-ease), box-shadow var(--bp-dur) var(--bp-ease);
}
.selfcheck__pick:hover { border-color: var(--bp-cyan); transform: translateY(-2px); box-shadow: var(--bp-shadow-sm); }
.selfcheck__pick strong { display: block; font-family: var(--bp-font-display); font-size: var(--bp-text-lg); }
.selfcheck__pick span { font-size: var(--bp-text-sm); color: var(--bp-gris); }
[data-sc-who] .selfcheck__pick { text-align: center; }

/* paso de edad */
.selfcheck__age-form { display: grid; gap: .8rem; max-width: 280px; margin: 0 auto; }
.selfcheck__age-input {
  width: 100%; text-align: center; font-family: var(--bp-font-display); font-weight: 700;
  font-size: var(--bp-text-xl); padding: .8rem 1rem; border: 1.5px solid var(--bp-borde);
  border-radius: var(--bp-radius); color: var(--bp-tinta);
}
.selfcheck__age-input:focus { outline: none; border-color: var(--bp-cyan); }

.selfcheck__result { text-align: center; }
.selfcheck__result h3 { font-size: var(--bp-text-2xl); margin-bottom: .75rem; }
.selfcheck__disclaimer { font-size: var(--bp-text-xs); color: var(--bp-gris); margin-top: 1rem; }

/* lista de áreas en el resultado */
.selfcheck__areas { display: grid; gap: .6rem; max-width: 380px; margin: 0 auto; text-align: left; }
.selfcheck__areas li {
  display: flex; align-items: center; gap: .6rem; font-size: var(--bp-text-sm); font-weight: 600;
  background: var(--bp-cyan-tenue); border-radius: var(--bp-radius-sm); padding: .6rem .8rem;
}
.selfcheck [hidden] { display: none !important; }

/* ============================================================
   COMPARACIÓN TUTORÍA vs ENTRENAMIENTO
   ============================================================ */
/* Dos columnas desde mobile (pedido del cliente: que se vean a la par, no una encima de otra) */
.vs { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.vs__col { border-radius: var(--bp-radius); padding: .9rem .8rem; }
.vs__col--a { background: #fff; border: 1px solid var(--bp-borde); }
.vs__col--b { background: var(--bp-cyan); color: #fff; box-shadow: var(--bp-shadow-lg); }
.vs__col h3 { font-size: var(--bp-text-sm); margin-bottom: .6rem; line-height: var(--bp-leading-snug); }
.vs__col--b h3 { color: #fff; }
.vs__row { display: flex; gap: .4rem; padding: .5rem 0; border-top: 1px solid var(--bp-borde); font-size: .75rem; line-height: 1.35; }
.vs__col--b .vs__row { border-top-color: rgba(255,255,255,.25); }
.vs__row:first-of-type { border-top: 0; }
.vs__row svg { width: 1rem; height: 1rem; flex: none; margin-top: .1rem; }
@media (min-width: 640px) {
  .vs { gap: 1.25rem; }
  .vs__col { padding: 1.75rem; border-radius: var(--bp-radius-lg); }
  .vs__col h3 { font-size: var(--bp-text-xl); margin-bottom: 1.25rem; }
  .vs__row { gap: .7rem; padding: .8rem 0; font-size: var(--bp-text-sm); }
  .vs__row svg { width: 1.15rem; height: 1.15rem; margin-top: .15rem; }
}
.vs__quote { font-family: var(--bp-font-display); font-weight: 800; font-size: var(--bp-text-2xl); text-align: center; margin-top: 2.25rem; line-height: var(--bp-leading-snug); }
.vs__quote .hl { color: var(--bp-morado); }

/* ============================================================
   BENTO — 7 habilidades cognitivas
   ============================================================ */
/* flexbox en vez de grid: así cualquier fila incompleta (la última
   celda sola, en cualquier ancho de pantalla) queda centrada sola,
   no solo en el breakpoint de escritorio. */
.bento { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; max-width: 980px; margin-inline: auto; }
.bento__cell {
  --bento-accent: var(--bp-cyan);
  --bento-accent-tenue: var(--bp-cyan-tenue);
  text-align: left;
  flex: 1 1 280px; max-width: 320px;
  background: #fff; border: 1px solid var(--bp-borde);
  border-top: 3px solid var(--bento-accent);
  border-radius: var(--bp-radius-lg); padding: 1.4rem;
  transition: transform var(--bp-dur) var(--bp-ease), box-shadow var(--bp-dur) var(--bp-ease), border-color var(--bp-dur) var(--bp-ease);
}
.bento__cell[data-accent="morado"] { --bento-accent: var(--bp-morado); --bento-accent-tenue: var(--bp-morado-tenue); }
.bento__cell[data-accent="cyan"]   { --bento-accent: var(--bp-cyan);   --bento-accent-tenue: var(--bp-cyan-tenue); }
.bento__cell[data-accent="teal"]   { --bento-accent: var(--bp-teal);  --bento-accent-tenue: #E1F6F1; }
.bento__cell .card__icon { background: var(--bento-accent-tenue); color: var(--bento-accent); }
.bento__cell:hover, .bento__cell.is-open { transform: translateY(-3px); box-shadow: var(--bp-shadow); border-color: var(--bp-borde); border-top-color: var(--bento-accent); }
.bento__cell.is-open { border-top-color: var(--bento-accent); }
.bento__cell h3 { font-size: var(--bp-text-lg); margin: .85rem 0 .3rem; }
.bento__hint { color: var(--bp-gris); font-size: var(--bp-text-sm); }
.bento__detail { margin-top: .9rem; font-size: var(--bp-text-sm); color: var(--bp-tinta); border-top: 1px solid var(--bp-borde); padding-top: .9rem; }
.bento__detail[hidden] { display: none; }
/* en mobile, una sola columna a lo ancho (se ve mejor que celdas muy angostas) */
@media (max-width: 480px) { .bento__cell { flex-basis: 100%; max-width: none; } }

/* ============================================================
   MÉTODO — 6 atributos
   ============================================================ */
.method-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; max-width: 980px; margin-inline: auto; }
.method-item {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: .5rem;
  background: #fff; border: 1px solid var(--bp-borde); border-radius: var(--bp-radius); padding: 1.5rem 1.15rem;
}
.method-item svg { width: 1.6rem; height: 1.6rem; color: var(--bp-morado); flex: none; }
.method-item strong { font-family: var(--bp-font-display); display: block; }
.method-item span { font-size: var(--bp-text-sm); color: var(--bp-gris); }
@media (min-width: 640px) { .method-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .method-grid { grid-template-columns: repeat(3, 1fr); } }

/* ============================================================
   PROCESO EN 5 PASOS — timeline
   ============================================================ */
.steps { position: relative; display: grid; gap: 1.25rem; }
.steps::before {
  content: ""; position: absolute; left: 22px; top: 12px; bottom: 12px;
  width: 3px; background: var(--bp-gradient-linea); border-radius: 999px;
}
.step { position: relative; display: grid; grid-template-columns: 48px 1fr; gap: 1rem; align-items: start; }
.step__num {
  display: grid; place-items: center; width: 46px; height: 46px;
  border-radius: 999px; background: #fff; border: 3px solid var(--bp-cyan);
  color: var(--bp-cyan); font-family: var(--bp-font-display); font-weight: 800;
  position: relative; z-index: 1;
}
.step__num svg { width: 20px; height: 20px; }
.step__body { background: #fff; border: 1px solid var(--bp-borde); border-radius: var(--bp-radius); padding: 1.1rem 1.25rem; }
.step__body strong { font-family: var(--bp-font-display); font-size: var(--bp-text-lg); display: block; margin-bottom: .2rem; }
.step__body p { font-size: var(--bp-text-sm); color: var(--bp-gris); }
@media (min-width: 768px) {
  .steps::before { left: 50%; transform: translateX(-1.5px); }
  .step { grid-template-columns: 1fr 56px 1fr; }
  .step:nth-child(odd) .step__body { grid-column: 1; text-align: right; }
  .step:nth-child(odd) .step__num { grid-column: 2; }
  .step:nth-child(even) .step__num { grid-column: 2; }
  .step:nth-child(even) .step__body { grid-column: 3; }
}

/* ============================================================
   RESPALDO / STATS
   ============================================================ */
.stats { display: grid; gap: 1.25rem; grid-template-columns: 1fr; text-align: center; }
.stat__num { font-family: var(--bp-font-display); font-weight: 800; font-size: clamp(2.2rem, 1.6rem + 3vw, 3.2rem); color: var(--bp-cyan); }
.stat__label { color: var(--bp-gris); font-size: var(--bp-text-sm); }
@media (min-width: 640px) { .stats { grid-template-columns: repeat(3, 1fr); } }

.results-list { display: grid; gap: .85rem; }
.results-list li { display: flex; gap: .7rem; align-items: flex-start; }

/* ============================================================
   PROGRAMAS INTERNACIONALES — franja discreta
   ============================================================ */
.programs { display: grid; gap: 1rem; grid-template-columns: 1fr; }
.program { text-align: center; background: #fff; border: 1px solid var(--bp-borde); border-radius: var(--bp-radius); padding: 1.1rem; }
.program strong { font-family: var(--bp-font-display); display: block; }
.program span { font-size: var(--bp-text-xs); color: var(--bp-gris); }
@media (min-width: 640px) { .programs { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .programs { grid-template-columns: repeat(4, 1fr); } }

/* ============================================================
   TESTIMONIOS
   ============================================================ */
.yt-facade {
  position: relative; border-radius: var(--bp-radius-lg); overflow: hidden;
  aspect-ratio: 16 / 9; background: #0b1533; cursor: pointer; width: 100%;
  box-shadow: var(--bp-shadow);
}
.yt-facade img { width: 100%; height: 100%; object-fit: cover; opacity: .85; transition: opacity var(--bp-dur) var(--bp-ease); }
.yt-facade:hover img { opacity: 1; }
.yt-facade__play {
  position: absolute; inset: 0; margin: auto; width: 68px; height: 68px;
  display: grid; place-items: center; border-radius: 999px;
  background: rgba(255,255,255,.92); color: var(--bp-cyan);
  transition: transform var(--bp-dur) var(--bp-ease);
}
.yt-facade:hover .yt-facade__play { transform: scale(1.08); }
.yt-facade__play svg { width: 26px; height: 26px; margin-left: 3px; }
.yt-facade iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.yt-facade__badge {
  position: absolute; left: .7rem; bottom: .7rem; z-index: 1;
  display: inline-flex; align-items: center; gap: .35rem;
  background: rgba(20,33,61,.72); color: #fff; backdrop-filter: blur(2px);
  padding: .3rem .6rem; border-radius: 999px; font-size: var(--bp-text-xs); font-weight: 600;
}
.yt-facade__badge svg { width: 14px; height: 14px; }

.quote-card { background: #fff; border: 1px solid var(--bp-borde); border-radius: var(--bp-radius-lg); padding: 1.6rem; box-shadow: var(--bp-shadow-sm); }
.quote-card__stars { color: #F5B301; letter-spacing: .1em; margin-bottom: .6rem; }
.quote-card blockquote { font-size: var(--bp-text-base); margin-bottom: 1rem; }
.quote-card__author { display: flex; align-items: center; gap: .7rem; font-size: var(--bp-text-sm); }
.quote-card__avatar { width: 40px; height: 40px; border-radius: 999px; background: var(--bp-morado); display: grid; place-items: center; color: #fff; font-family: var(--bp-font-display); font-weight: 800; flex: none; }
.quote-card__author strong { display: block; font-family: var(--bp-font-display); }
.quote-card__author span { color: var(--bp-gris); }

/* ============================================================
   FAQ — acordeón
   ============================================================ */
.faq { max-width: var(--bp-container-narrow); margin-inline: auto; }
.faq__item { border-bottom: 1px solid var(--bp-borde); }
.faq__trigger {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  width: 100%; text-align: left; padding: 1.25rem 0;
  font-family: var(--bp-font-display); font-weight: 700; font-size: var(--bp-text-lg);
}
.faq__icon { flex: none; width: 1.5rem; height: 1.5rem; color: var(--bp-cyan); transition: transform var(--bp-dur) var(--bp-ease); }
.faq__item.is-open .faq__icon { transform: rotate(45deg); }
.faq__panel { overflow: hidden; height: 0; transition: height var(--bp-dur-slow) var(--bp-ease); }
.faq__panel-inner { padding-bottom: 1.4rem; color: var(--bp-gris); }
.faq__panel-inner .ph { margin-top: 1rem; max-width: 320px; --ar: 9 / 16; }

/* ============================================================
   EQUIPO — foto + nombre
   Diseño simple y moderno: foto completa (sin recortar), nombre
   y cargo debajo en texto sencillo con un acento de color fino.
   Columnas de ancho fijo + `justify-content:center` para que la
   última fila quede centrada aunque no la complete.
   ============================================================ */
.team-grid {
  display: grid; gap: 2rem 1.5rem;
  grid-template-columns: repeat(2, minmax(0, 15rem));
  justify-content: center;
}
.team-card { text-align: center; }
.team-card .ph, .team-card > img {
  width: 100%; height: auto; display: block;
  border-radius: var(--bp-radius-lg); margin-bottom: 0;
}
.team-card__tag { padding-top: 1rem; }
.team-card__tag strong {
  display: block;
  font-family: var(--bp-font-display);
  font-weight: 700;
  font-size: var(--bp-text-base);
  color: var(--bp-tinta);
}
.team-card__tag span {
  display: block;
  margin-top: .2rem;
  font-size: var(--bp-text-sm);
  color: var(--bp-gris);
}
.team-card__tag p {
  margin-top: .5rem;
  font-size: var(--bp-text-sm);
  color: var(--bp-gris);
}
@media (min-width: 640px) { .team-grid { grid-template-columns: repeat(3, minmax(0, 15rem)); } }

/* ============================================================
   EQUIPO — pirámide (Marcela arriba y más grande, el resto del
   equipo abajo en cuadrícula de 3+3, cuadrados con bordes
   redondeados — no círculos, pedido explícito del cliente).
   ============================================================ */
.team-pyramid { display: flex; flex-direction: column; align-items: center; gap: 3rem; max-width: 900px; margin-inline: auto; }
.team-pyramid__lead { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .3rem; width: 280px; }
.team-pyramid__photo {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: var(--bp-radius-lg);
  box-shadow: var(--bp-shadow-lg); margin-bottom: .6rem;
}
.team-pyramid__lead strong { font-family: var(--bp-font-display); font-weight: 700; font-size: var(--bp-text-xl); color: var(--bp-tinta); }
.team-pyramid__lead span { font-size: var(--bp-text-base); color: var(--bp-gris); }
.team-pyramid__row {
  display: grid; grid-template-columns: repeat(3, minmax(0, 14rem)); gap: 2rem 1.75rem;
  justify-content: center; width: 100%;
}
.team-pyramid__member { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .5rem; }
.team-pyramid__avatar {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: var(--bp-radius-lg); box-shadow: var(--bp-shadow);
}
.team-pyramid__avatar--placeholder {
  display: grid; place-items: center; background: var(--bp-cyan-tenue); color: var(--bp-cyan);
  font-family: var(--bp-font-display); font-weight: 800; font-size: var(--bp-text-3xl);
}
.team-pyramid__member strong { font-family: var(--bp-font-display); font-weight: 700; font-size: var(--bp-text-base); color: var(--bp-tinta); line-height: 1.25; }
.team-pyramid__member span { font-size: var(--bp-text-sm); color: var(--bp-gris); }

/* ============================================================
   LANDINGS DE SÍNTOMA — componentes propios
   ============================================================ */
/* checklist de señales */
.signals { display: grid; gap: .8rem; grid-template-columns: 1fr; max-width: 780px; margin-inline: auto; }
.signals li {
  display: flex; gap: .8rem; align-items: flex-start;
  background: #fff; border: 1px solid var(--bp-borde); border-radius: var(--bp-radius);
  padding: 1rem 1.15rem; box-shadow: var(--bp-shadow-sm);
  min-height: 5.5rem; /* G5: mismo alto en toda la retícula, sin importar el largo del texto */
  transition: transform var(--bp-dur) var(--bp-ease), box-shadow var(--bp-dur) var(--bp-ease),
              background var(--bp-dur) var(--bp-ease), border-color var(--bp-dur) var(--bp-ease), color var(--bp-dur) var(--bp-ease);
}
.signals li:hover {
  transform: translateY(-3px); box-shadow: var(--bp-shadow-lg); border-color: transparent;
  background: var(--bp-gradient); color: #fff;
}
.signals li svg { width: 1.3rem; height: 1.3rem; flex: none; color: var(--bp-morado); margin-top: .1rem; transition: color var(--bp-dur) var(--bp-ease); }
.signals li:hover svg { color: #fff; }
@media (min-width: 720px) { .signals { grid-template-columns: 1fr 1fr; } }

/* atención: retícula de 8 señales a 3 columnas en vez de 2 (pedido del cliente) */
.signals--3col { max-width: 920px; }
@media (min-width: 720px) { .signals--3col { grid-template-columns: repeat(3, 1fr); } }

/* ============================================================
   DIVISOR ONDULADO (recurso de marca, G2 de la guía de cambios)
   Reemplaza el corte recto entre secciones por una línea ondulada
   sutil lila + celeste, igual que en los posts de Instagram de
   referencia. Se usa como primer hijo de la sección, a todo el ancho.
   ============================================================ */
/* Ondulación sólida entre secciones.
   Sustituye las dos líneas onduladas finas que había antes: el cliente pidió
   quitar las líneas y conservar la misma ondulación, pero como forma sólida.
   El color se pasa con --wave-fill (normalmente el fondo de la sección vecina).
   --wave-h controla qué tan alta es la ondulación. */
.wave-shape {
  position: absolute; left: 0; right: 0; z-index: 0;
  height: var(--wave-h, 64px); line-height: 0; pointer-events: none;
}
.wave-shape svg { display: block; width: 100%; height: 100%; }
.wave-shape path { fill: var(--wave-fill, var(--bp-morado-tenue)); }
.wave-shape--top { top: 0; }
.wave-shape--bottom { bottom: 0; transform: scaleY(-1); }

/* la sección que lleva ondulaciones necesita contexto propio para que el
   contenido quede por encima de la forma */
.has-waves { position: relative; overflow: hidden; }
.has-waves > .container { position: relative; z-index: 1; }

@media (max-width: 640px) { .wave-shape { --wave-h: 38px; } }

/* insight: qué habilidad está detrás */
.insight {
  position: relative; overflow: hidden;
  background: var(--bp-cyan) center/cover no-repeat; color: #fff;
  border-radius: var(--bp-radius-lg); padding: clamp(1.5rem, 1rem + 3vw, 2.75rem);
  box-shadow: var(--bp-shadow-lg); max-width: 820px; margin-inline: auto;
}
/* velo turquesa sobre la fotografía de fondo (G3), para que el texto blanco siga legible */
.insight::before { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(17,126,138,.92) 0%, rgba(25,184,197,.82) 100%); z-index: 0; }
.insight h2, .insight h3 { color: #fff; }
.insight .lead { color: rgba(255,255,255,.9); }
.insight > * { position: relative; z-index: 1; }   /* por encima del velo y del canvas de conexiones */

/* gráfica de mejora (barras antes/después, CSS puro) */
.improve { display: grid; gap: 1.5rem; grid-template-columns: 1fr; align-items: end; max-width: 520px; margin-inline: auto; }
.improve__bar { text-align: center; }
.improve__track { height: 200px; display: flex; align-items: flex-end; justify-content: center; }
.improve__fill { width: 88px; border-radius: 14px 14px 0 0; transition: height 1s .15s var(--bp-ease); }
.improve__fill--antes { background: var(--bp-borde); height: 38%; }
.improve__fill--despues { background: var(--bp-cyan); height: 92%; box-shadow: var(--bp-shadow); }
/* las barras arrancan en 0 y "crecen" hasta su altura cuando la sección entra en pantalla */
.improve__bar:not(.is-visible) .improve__fill { height: 0 !important; }
.improve__label { margin-top: .6rem; font-family: var(--bp-font-display); font-weight: 700; }
.improve__sub { font-size: var(--bp-text-xs); color: var(--bp-gris); }
@media (min-width: 480px) { .improve { grid-template-columns: 1fr 1fr; } }

/* proceso resumido en 3 pasos */
.mini-steps { display: grid; gap: 1rem; grid-template-columns: 1fr; counter-reset: ms; max-width: 900px; margin-inline: auto; }
.mini-step { background: #fff; border: 1px solid var(--bp-borde); border-radius: var(--bp-radius-lg); padding: 1.5rem; }
.mini-step::before {
  counter-increment: ms; content: counter(ms);
  display: grid; place-items: center; width: 2.6rem; height: 2.6rem; margin-bottom: .8rem;
  border-radius: 999px; background: var(--bp-cyan-tenue); color: var(--bp-cyan);
  font-family: var(--bp-font-display); font-weight: 800;
}
.mini-step strong { font-family: var(--bp-font-display); font-size: var(--bp-text-lg); display: block; margin-bottom: .25rem; }
.mini-step p { font-size: var(--bp-text-sm); color: var(--bp-gris); }
@media (min-width: 768px) { .mini-steps { grid-template-columns: repeat(3, 1fr); } }

/* color + ícono por paso (pedido del cliente) */
.mini-step { border-top: 3px solid var(--bp-cyan); }
.mini-step[data-accent="morado"] { border-top-color: var(--bp-morado); }
.mini-step[data-accent="cyan"] { border-top-color: var(--bp-cyan); }
.mini-step[data-accent="morado"]::before { background: var(--bp-morado-tenue); color: var(--bp-morado); }
.mini-step[data-accent="cyan"]::before { background: var(--bp-cyan-tenue); color: var(--bp-cyan); }
.mini-step__icon { display: grid; place-items: center; width: 3rem; height: 3rem; margin-bottom: .8rem; border-radius: 999px; background: var(--bp-cyan-tenue); color: var(--bp-cyan); }
.mini-step__icon svg { width: 1.5rem; height: 1.5rem; }
.mini-step[data-accent="morado"] .mini-step__icon { background: var(--bp-morado-tenue); color: var(--bp-morado); }
.mini-step[data-accent="cyan"] .mini-step__icon { background: var(--bp-cyan-tenue); color: var(--bp-cyan); }
.mini-step:has(.mini-step__icon)::before { content: none; }

/* diagrama visual: A → B → C → D */
.mini-flow { display: grid; gap: .5rem; grid-template-columns: 1fr; max-width: 900px; margin: 2rem auto 0; align-items: center; }
.mini-flow__node {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: .4rem;
  background: #fff; border: 1px solid var(--bp-borde); border-radius: var(--bp-radius); padding: 1rem .75rem;
}
.mini-flow__node span { font-family: var(--bp-font-display); font-weight: 700; font-size: var(--bp-text-sm); }
.mini-flow__icon { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 999px; background: var(--bp-cyan-tenue); color: var(--bp-cyan); }
.mini-flow__icon svg { width: 1.2rem; height: 1.2rem; }
.mini-flow__arrow { display: flex; align-items: center; justify-content: center; color: var(--bp-morado); }
.mini-flow__arrow svg { width: 1.4rem; height: 1.4rem; transform: rotate(90deg); }
@media (min-width: 768px) {
  .mini-flow { grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; }
  .mini-flow__arrow svg { transform: none; }
  /* variante de 5 nodos (lectura, matemáticas) */
  .mini-flow--5 { grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr auto 1fr; }
}

/* ============================================================
   SEÑALES agrupadas por categoría (landings de síntoma)
   ============================================================ */
.signals-groups { display: grid; gap: 1.5rem; grid-template-columns: 1fr; max-width: 900px; margin-inline: auto; }
.signals-group__title {
  font-family: var(--bp-font-display); font-weight: 700; font-size: var(--bp-text-sm);
  text-transform: uppercase; letter-spacing: .08em; color: var(--bp-morado); margin-bottom: .6rem;
}
.signals-group .signals { grid-template-columns: 1fr 1fr; max-width: none; margin-inline: 0; }
@media (min-width: 860px) { .signals-groups { grid-template-columns: 1fr 1fr; } }

/* ============================================================
   GALERÍA (Home, Nosotros, landings)
   Retícula cuadrada uniforme: todas las celdas del mismo tamaño,
   alineadas en filas y columnas parejas (pedido explícito del
   cliente — nada de columnas desalineadas tipo masonry). Flexbox en
   vez de CSS Grid a propósito: con `justify-content:center` la última
   fila incompleta queda centrada en vez de pegada a la izquierda con
   un hueco a la derecha (mismo patrón ya usado en el bento grid).
   ============================================================ */
.gallery { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }
.gallery figure {
  margin: 0; border-radius: var(--bp-radius-lg);
  overflow: hidden; box-shadow: var(--bp-shadow-sm);
  flex: 1 1 calc(50% - .5rem); max-width: calc(50% - .5rem);
}
.gallery img, .gallery .ph {
  display: block; width: 100%; height: 100%; border: 0; border-radius: 0;
  aspect-ratio: 1 / 1; object-fit: cover;
  transition: transform var(--bp-dur-slow) var(--bp-ease);
}
.gallery figure:hover img { transform: scale(1.05); }
.gallery figure.gallery__wide { flex-basis: 100%; max-width: 100%; }
.gallery__wide img { aspect-ratio: 2 / 1; }
@media (min-width: 768px) {
  .gallery figure { flex-basis: calc(33.333% - .667rem); max-width: calc(33.333% - .667rem); }
  .gallery figure.gallery__wide { flex-basis: calc(66.666% - .334rem); max-width: calc(66.666% - .334rem); }
}

/* mosaico a sangre completa (pedido del cliente): de orilla a orilla de la
   pantalla, sin el margen del .container ni esquinas redondeadas */
.gallery--bleed {
  position: relative; left: 50%; right: 50%;
  margin-left: -50vw; margin-right: -50vw; width: 100vw;
  gap: 3px;
}
.gallery--bleed figure { border-radius: 0; box-shadow: none; flex-basis: calc(50% - 1.5px); max-width: calc(50% - 1.5px); }
@media (min-width: 768px) {
  .gallery--bleed figure { flex-basis: calc(33.333% - 2px); max-width: calc(33.333% - 2px); }
  .gallery--bleed figure.gallery__wide { flex-basis: calc(66.666% - 1.5px); max-width: calc(66.666% - 1.5px); }
}

/* ============================================================
   NOSOTROS — Marcela destacada + historia
   ============================================================ */
.founder {
  display: grid; gap: 1.5rem; grid-template-columns: 1fr;
  background: #fff; border-radius: var(--bp-radius-lg);
  border: 1px solid var(--bp-borde); box-shadow: var(--bp-shadow);
  padding: clamp(1.25rem, 1rem + 2vw, 2.25rem);
  position: relative;
}
.founder::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 3px;
  background: var(--bp-morado);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}
.founder__photo { width: 100%; height: auto; display: block; border-radius: var(--bp-radius); }
.founder__body h3 { font-size: var(--bp-text-2xl); }
.founder__role { color: var(--bp-morado); font-family: var(--bp-font-display); font-weight: 700; margin-bottom: .75rem; }
.founder__creds { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
/* las credenciales de Marcela estaban en blanco sobre blanco (invisibles) — se les da
   presencia con el degradado suave de marca, para que no se pierdan contra el fondo */
.founder__creds .badge { background: var(--bp-gradient-suave); color: var(--bp-morado); box-shadow: none; border: 1px solid var(--bp-morado-tenue); }
@media (min-width: 800px) { .founder { grid-template-columns: 320px 1fr; align-items: start; } }

/* Marcela: mismo acento simple que el resto del equipo, en versión ancha */
.founder__tag { padding-top: 1rem; text-align: left; }
.founder__tag strong {
  display: block;
  font-family: var(--bp-font-display);
  font-weight: 700;
  font-size: var(--bp-text-lg);
  color: var(--bp-tinta);
}
.founder__tag span {
  display: block;
  margin-top: .2rem;
  font-size: var(--bp-text-base);
  color: var(--bp-gris);
}

/* ============================================================
   BREAKOUT — foto a pantalla completa como rompimiento editorial
   (pedido del cliente, referencia Zanerobe). Sección hija directa
   de <main>, sin .container, para que ocupe todo el ancho.
   ============================================================ */
.breakout {
  position: relative;
  width: 100%;
  min-height: 62vh;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}
.breakout img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.breakout__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,33,61,0) 35%, rgba(20,33,61,.78) 100%);
}
.breakout__caption {
  position: relative; z-index: 1;
  color: #fff;
  padding: clamp(1.75rem, 4vw, 3.5rem) clamp(1.25rem, 5vw, 4rem);
  max-width: 640px;
}
.breakout__caption .eyebrow { color: #fff; }
.breakout__caption h2 { color: #fff; font-size: var(--bp-text-2xl); margin-bottom: .5rem; }
.breakout__caption p { color: rgba(255,255,255,.9); }
@media (min-width: 900px) { .breakout { min-height: 78vh; } }
.breakout--tall { min-height: 74vh; }
@media (min-width: 900px) { .breakout--tall { min-height: 88vh; } }

/* ============================================================
   HISTORIAS — tarjetas de transformación
   ============================================================ */
.transform-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
.transform-card {
  background: #fff; border: 1px solid var(--bp-borde); border-radius: var(--bp-radius-lg);
  padding: 1.75rem; box-shadow: var(--bp-shadow-sm);
  transition: transform var(--bp-dur) var(--bp-ease), box-shadow var(--bp-dur) var(--bp-ease);
}
.transform-card:hover { transform: translateY(-4px); box-shadow: var(--bp-shadow); }
.transform-card__tag {
  display: inline-block; font-family: var(--bp-font-display); font-weight: 700;
  font-size: var(--bp-text-xs); text-transform: uppercase; letter-spacing: .06em;
  color: var(--bp-morado); background: var(--bp-morado-tenue);
  padding: .3rem .7rem; border-radius: var(--bp-radius-pill); margin-bottom: 1rem;
}
.transform-card h3 { font-size: var(--bp-text-lg); margin-bottom: .75rem; }
.transform-card__row { display: grid; gap: .9rem; margin: 1.1rem 0; }
.transform-card__row > div { display: flex; gap: .7rem; align-items: flex-start; font-size: var(--bp-text-sm); }
.transform-card__row svg { width: 1.15rem; height: 1.15rem; flex: none; margin-top: .15rem; }
.transform-card__before svg { color: var(--bp-gris); }
.transform-card__after svg { color: var(--bp-teal); }
.transform-card figcaption { display: flex; align-items: center; gap: .7rem; font-size: var(--bp-text-sm); border-top: 1px solid var(--bp-borde); padding-top: 1rem; }
.transform-card figcaption strong { font-family: var(--bp-font-display); display: block; }
.transform-card figcaption span.text-muted { color: var(--bp-gris); }
@media (min-width: 860px) { .transform-grid { grid-template-columns: 1fr 1fr; } }

.story { max-width: var(--bp-container-narrow); margin-inline: auto; }
.story p { max-width: none; margin-bottom: 1.1rem; }
.story__figure { float: none; margin: 0 0 1.5rem; }
.story__figure img { width: 100%; height: auto; display: block; border-radius: var(--bp-radius-lg); }

/* ============================================================
   CIERRE + CONTACTO
   ============================================================ */
.closing { background: var(--bp-gradient-inv); color: #fff; position: relative; overflow: hidden; }
.closing::after { content:""; position:absolute; inset:0; background-image: radial-gradient(rgba(255,255,255,.25) 1.4px, transparent 1.4px); background-size: 24px 24px; opacity:.4; }
.closing__inner { position: relative; z-index: 1; }
.contact-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; margin-top: 2.5rem; }
.contact-grid a { text-decoration: underline; text-underline-offset: 3px; }
.contact-card { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.24); border-radius: var(--bp-radius); padding: 1.25rem; }
.contact-card h3 { color: #fff; font-size: var(--bp-text-lg); margin-bottom: .5rem; }
.map-embed { border-radius: var(--bp-radius-lg); overflow: hidden; border: 1px solid rgba(255,255,255,.24); }
.map-embed iframe { display: block; width: 100%; height: 320px; border: 0; }
@media (min-width: 900px) { .contact-grid { grid-template-columns: 1fr 1fr; } }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { background: var(--bp-tinta); color: rgba(255,255,255,.72); padding-block: 3rem 2rem; font-size: var(--bp-text-sm); }
.site-footer a:hover { color: #fff; }
.site-footer__grid { display: grid; gap: 2rem; grid-template-columns: 1fr; }
.site-footer h4 { color: #fff; font-size: var(--bp-text-sm); text-transform: uppercase; letter-spacing: .08em; margin-bottom: .9rem; }
.site-footer li { margin-bottom: .5rem; }
.site-footer__bottom { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.14); display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between; }
@media (min-width: 768px) { .site-footer__grid { grid-template-columns: 2fr 1fr 1fr 1.5fr; } }

/* ============================================================
   BOTÓN FLOTANTE WHATSAPP
   ============================================================ */
.wa-fab {
  position: fixed; right: 16px; bottom: 16px; z-index: var(--bp-z-wa);
  display: inline-flex; align-items: center; gap: .6rem;
  background: #25D366; color: #0b2e17;
  font-family: var(--bp-font-display); font-weight: 700;
  padding: .85rem 1.15rem; border-radius: var(--bp-radius-pill);
  box-shadow: 0 14px 34px -10px rgba(37,211,102,.55);
  transition: transform var(--bp-dur) var(--bp-ease), box-shadow var(--bp-dur) var(--bp-ease);
}
.wa-fab:hover { transform: translateY(-2px) scale(1.02); }
.wa-fab svg { width: 1.5rem; height: 1.5rem; }
.wa-fab__label { display: none; }
@media (min-width: 640px) { .wa-fab__label { display: inline; } }

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .4s var(--bp-ease), transform .4s var(--bp-ease); }
.reveal.is-visible { opacity: 1; transform: none; }

/* revelado escalonado: los hijos directos de .reveal-group entran
   uno tras otro (cascada rápida) en vez de todos de golpe */
.reveal-group > * { opacity: 0; transform: translateY(16px); transition: opacity .4s var(--bp-ease), transform .4s var(--bp-ease); }
.reveal-group > *.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ============================================================
   MÉTODO — sección dividida (texto + una sola foto completa)
   Reemplaza la galería de 2 fotos recortadas en cuadrado por un
   layout más limpio: texto a un lado, una foto completa (sin
   recortar) en un recuadro redondeado al otro — pedido del cliente
   en landings de síntoma (atención, lectura, matemáticas).
   ============================================================ */
.method-split { display: grid; gap: 2rem; grid-template-columns: 1fr; align-items: center; }
.method-split__media img {
  width: 100%; height: auto; display: block;
  border-radius: var(--bp-radius-lg); box-shadow: var(--bp-shadow-lg);
}
@media (min-width: 900px) {
  .method-split { grid-template-columns: 1.05fr .95fr; gap: 3rem; }
}

/* variante "a sangre": la foto llega hasta el borde de la pantalla en vez de
   quedar contenida dentro del margen (pedido del cliente en las 3 landings) */
.method-split--bleed { display: flex; flex-direction: column; gap: 0; }
.method-split--bleed .method-split__media { order: -1; }
.method-split--bleed .method-split__media img { border-radius: 0; box-shadow: none; height: 260px; object-fit: cover; }
@media (min-width: 900px) {
  .method-split--bleed {
    flex-direction: row; align-items: stretch; min-height: 460px;
    margin-right: calc(-1.25rem - max(0px, (100vw - var(--bp-container)) / 2));
  }
  .method-split--bleed .method-split__text { flex: 1 1 50%; order: 0; display: flex; align-items: center; }
  /* El texto arranca pegado al margen del .container y no centrado dentro de su
     mitad: antes quedaba un hueco grande a la izquierda (pedido del cliente:
     "correr diagramación para no dejar tanto espacio de lado izquierdo"). */
  .method-split--bleed .method-split__text > div { width: 100%; max-width: 640px; margin-left: 0; margin-right: auto; padding: 2rem clamp(2rem, 5vw, 4rem) 2rem 0; }
  .method-split--bleed .method-split__media { flex: 1 1 50%; order: 1; }
  .method-split--bleed .method-split__media img { height: 100%; border-radius: 0 0 0 var(--bp-radius-lg); }
}

/* ============================================================
   COGCHART — tabla de resultados cognitivos pre/post (BrainRx)
   Reproduce las tablas que pidió el cliente (documento de investigación,
   págs. 51 TDAH y 52 Dislexia): ficha de datos + barras Pre/Post por
   habilidad. Construida en HTML/CSS para que sea responsive, accesible y
   editable, en vez de pegar una captura de pantalla.
   Las alturas salen de --pre/--post comparados contra la escala --min/--max
   del propio gráfico (la misma escala truncada del documento original; por eso
   el eje muestra siempre el valor donde arranca).
   ============================================================ */
.cogchart {
  background: var(--bp-blanco);
  border: 1px solid var(--bp-borde);
  border-radius: var(--bp-radius-lg);
  box-shadow: var(--bp-shadow);
  padding: clamp(1.25rem, 1rem + 2vw, 2.25rem);
  max-width: 920px; margin-inline: auto;
}
.cogchart__kicker {
  font-family: var(--bp-font-display); font-weight: 800;
  font-size: var(--bp-text-lg); letter-spacing: .06em; text-transform: uppercase;
  color: var(--bp-cyan-deep); line-height: 1.3;
}
.cogchart__kicker span { color: var(--bp-gris); font-weight: 600; }

/* ficha de datos del estudio */
.cogchart__meta {
  display: grid; gap: .5rem 1.5rem; grid-template-columns: 1fr;
  margin-top: 1rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--bp-borde);
}
.cogchart__meta > div { display: flex; gap: .5rem; align-items: baseline; }
.cogchart__meta dt { font-family: var(--bp-font-display); font-weight: 700; font-size: var(--bp-text-sm); color: var(--bp-morado); }
.cogchart__meta dd { font-size: var(--bp-text-sm); color: var(--bp-gris); }
@media (min-width: 620px) { .cogchart__meta { grid-template-columns: 1fr 1fr; } }

.cogchart__plots { display: grid; gap: 2rem; grid-template-columns: 1fr; margin-top: 1.5rem; }
/* sin esto, el ancho mínimo de la zona de barras desborda la tarjeta en móvil
   en vez de activar el scroll horizontal del propio gráfico */
.cogchart__plots > * { min-width: 0; }
@media (min-width: 820px) { .cogchart__plots--dual { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); } }

.cogchart__title {
  font-family: var(--bp-font-display); font-weight: 800; font-size: var(--bp-text-sm);
  letter-spacing: .1em; text-transform: uppercase; color: var(--bp-cyan-deep);
}
.cogchart__legend { display: flex; gap: 1rem; margin-top: .35rem; font-size: var(--bp-text-xs); color: var(--bp-gris); }
.cogchart__legend li { display: flex; align-items: center; gap: .35rem; }
.cogchart__swatch { width: 11px; height: 11px; border-radius: 3px; background: var(--bp-cyan); }
.cogchart__swatch--post { background: var(--bp-morado); }

/* zona de trazado: eje a la izquierda + grupos de barras */
.cogchart__plot { margin-top: .9rem; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .5rem; }
.cogchart__axis {
  display: flex; flex-direction: column; justify-content: space-between;
  height: var(--plot-h, 260px);
  font-size: var(--bp-text-xs); color: var(--bp-gris); text-align: right;
  transform: translateY(-.5em);
}
.cogchart__bars {
  height: var(--plot-h, 260px);
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  align-items: end; gap: clamp(.15rem, 1vw, .75rem);
  /* líneas de referencia alineadas con las marcas del eje */
  background-image: repeating-linear-gradient(to top, var(--bp-borde) 0 1px, transparent 1px calc(100% / var(--ticks, 5)));
  background-size: 100% 100%;
  border-bottom: 1.5px solid var(--bp-borde);
}
.cogchart__group { display: flex; align-items: flex-end; justify-content: center; gap: 3px; height: 100%; }
.cogchart__bar {
  position: relative; flex: 0 1 18px; max-width: 18px;
  border-radius: 3px 3px 0 0;
  background: var(--bp-cyan);
  height: calc((var(--v) - var(--min)) / (var(--max) - var(--min)) * 100%);
  transition: height .9s .15s var(--bp-ease);
}
.cogchart__bar--post { background: var(--bp-morado); }
.cogchart__bar b {
  position: absolute; left: 50%; bottom: 100%; transform: translate(-50%, -2px);
  font-size: 10px; font-weight: 700; color: var(--bp-gris); font-family: var(--bp-font-display);
}
/* las barras crecen cuando la gráfica entra en pantalla */
.cogchart:not(.is-visible) .cogchart__bar { height: 0; }

/* habilidad destacada (p. ej. atención sostenida en la tabla de TDAH) */
.cogchart__group--focus { background: var(--bp-cyan-tenue); border-radius: 6px 6px 0 0; }
.cogchart__group--focus .cogchart__bar b { color: var(--bp-cyan-deep); }

.cogchart__labels {
  grid-column: 2;
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  gap: clamp(.15rem, 1vw, .75rem); margin-top: .5rem;
}
.cogchart__labels span {
  font-size: 10px; line-height: 1.2; color: var(--bp-gris); text-align: center;
  overflow-wrap: anywhere;
}
.cogchart__labels .is-focus { color: var(--bp-cyan-deep); font-weight: 700; }

.cogchart__note { margin-top: 1.25rem; font-size: var(--bp-text-xs); color: var(--bp-gris); }
.cogchart__note a { text-decoration: underline; }
/* aviso de scroll: solo aparece cuando la gráfica se desliza (ver más abajo) */
.cogchart__swipe { display: none; }

/* En pantallas angostas no caben 7 etiquetas sin partir las palabras a la
   mitad, así que la gráfica se desliza en horizontal y el eje se queda fijo. */
@media (max-width: 700px) {
  .cogchart__plot {
    overflow-x: auto; overscroll-behavior-x: contain;
    grid-template-columns: auto minmax(var(--plot-min, 440px), 1fr);
  }
  .cogchart__axis { position: sticky; left: 0; z-index: 1; background: var(--bp-blanco); padding-right: .35rem; }
  .cogchart__swipe {
    display: flex; align-items: center; gap: .35rem; margin-top: .6rem;
    font-size: var(--bp-text-xs); color: var(--bp-gris);
  }
  .cogchart__swipe svg { width: 14px; height: 14px; flex: none; }
}

@media (max-width: 560px) {
  .cogchart__kicker { font-size: var(--bp-text-base); letter-spacing: .04em; }
  .cogchart__plot { --plot-h: 200px; }
  .cogchart__bar { flex-basis: 14px; max-width: 14px; }
  .cogchart__bar b { font-size: 9px; }
  /* en pantallas angostas el dato va debajo de su etiqueta, no al lado */
  .cogchart__meta > div { flex-direction: column; gap: 0; }
  .cogchart__labels span { font-size: 9px; }
}

/* ---------- utilidades chicas ---------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.text-center { text-align: center; }
.mt-2 { margin-top: .5rem; } .mt-4 { margin-top: 1rem; } .mt-6 { margin-top: 1.5rem; } .mt-8 { margin-top: 2rem; }
.mb-4 { margin-bottom: 1rem; }
.flow > * + * { margin-top: 1rem; }
.wrap-cta { display: flex; flex-wrap: wrap; gap: .9rem; }
.hidden { display: none; }

/* ============================================================
   PROGRAMAS DE RESPALDO — logos (docs de cambios de las landings)
   ============================================================ */
.program-logos { margin-top: 1.5rem; }
.program-logos__label { font-family: var(--bp-font-display); font-weight: 700; font-size: var(--bp-text-sm); color: var(--bp-gris); margin-bottom: .75rem; }
.program-logos__row { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; }
.program-logos__row img { height: 46px; width: auto; max-width: 180px; object-fit: contain; }
.program-logos--center .program-logos__row, .program-logos--center .program-logos__label { justify-content: center; text-align: center; }

/* ============================================================
   VIDEOS "FAMILIAS REALES" en las landings (YouTube Shorts, vertical)
   ============================================================ */
.video-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.25rem; margin-bottom: 2rem; }
.video-row .yt-facade { aspect-ratio: 9 / 16; width: min(100%, 250px); flex: 0 1 250px; }
.yt-facade__hint {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  padding: .55rem .7rem; text-align: center;
  background: linear-gradient(0deg, rgba(20,33,61,.82), transparent);
  color: #fff; font-size: var(--bp-text-xs); font-weight: 600;
}

/* ============================================================
   PIRÁMIDE DE HABILIDADES (MathRx) — 3 niveles
   ============================================================ */
.mathpyramid { display: grid; gap: .5rem; justify-items: center; margin-top: 1.5rem; }
.mathpyramid__lvl {
  padding: .7rem 1rem; border-radius: var(--bp-radius-sm); color: #fff; text-align: center;
  font-family: var(--bp-font-display); font-weight: 700; font-size: var(--bp-text-sm); line-height: 1.3;
}
.mathpyramid__lvl--3 { width: min(100%, max(62%, 17.5rem)); background: var(--bp-morado); }
.mathpyramid__lvl--2 { width: min(100%, max(82%, 20rem)); background: var(--bp-cyan-deep); }
.mathpyramid__lvl--1 { width: 100%; background: var(--bp-cyan); }
.mathpyramid__lvl small { display: block; font-weight: 500; opacity: .9; }

/* ============================================================
   ACTIVACIÓN CEREBRAL — cerebro con regiones que se encienden (matemáticas)
   ============================================================ */
.brain-activation { position: relative; width: min(100%, 300px); margin: 2rem auto 0; }
.brain-activation img { width: 100%; height: auto; display: block; }
.brain-activation__pulse {
  position: absolute; width: 16%; aspect-ratio: 1; border-radius: 50%;
  transform: translate(-50%, -50%) scale(.6); opacity: 0;
  background: radial-gradient(circle, rgba(25,184,197,.85) 0%, rgba(107,75,193,.45) 55%, transparent 72%);
  animation: brain-pulse 3.2s ease-in-out infinite;
}
.brain-activation__pulse:nth-of-type(2) { animation-delay: .5s; }
.brain-activation__pulse:nth-of-type(3) { animation-delay: 1s; }
.brain-activation__pulse:nth-of-type(4) { animation-delay: 1.5s; }
.brain-activation__pulse:nth-of-type(5) { animation-delay: 2s; }
.brain-activation__pulse:nth-of-type(6) { animation-delay: 2.5s; }
@keyframes brain-pulse {
  0%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(.5); }
  40%, 60% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); }
}
.brain-activation figcaption { text-align: center; margin-top: .75rem; font-size: var(--bp-text-sm); color: var(--bp-gris); max-width: none; }
@media (prefers-reduced-motion: reduce) { .brain-activation__pulse { animation: none; opacity: .55; transform: translate(-50%, -50%); } }

/* fondo de color suave para secciones sueltas (Nosotros) */
.surface-cyan { background: var(--bp-cyan-tenue); }

/* ============================================================
   AJUSTES DE LOS COMENTARIOS DEL CLIENTE (13 oct 2026)
   ============================================================ */
/* Sin azul: los degradados de marca pasan de turquesa a lila directo,
   sin la parada azul que el cliente seguía viendo como "azul" */
:root {
  --bp-gradient:     linear-gradient(135deg, #19B8C5 0%, #6B4BC1 100%);
  --bp-gradient-inv: linear-gradient(135deg, #6B4BC1 0%, #19B8C5 100%);
}
.hero__scrim { background: linear-gradient(100deg, rgba(10,72,86,.92) 0%, rgba(17,126,138,.78) 38%, rgba(25,184,197,.5) 70%, rgba(107,75,193,.3) 100%); }

/* Botones de WhatsApp: turquesa con ícono y letra más pequeña (los verdes eran "fuera de paleta") */
.btn--wa { background: var(--bp-cyan); color: #fff; box-shadow: var(--bp-shadow-cyan); font-size: .95rem; gap: .55rem; }
.btn--wa:hover { background: var(--bp-cyan-deep); transform: translateY(-2px); }
.btn--wa.btn--lg { font-size: 1rem; padding: .95rem 1.6rem; }
.btn--wa svg { width: 1.2rem; height: 1.2rem; flex: none; }

/* insignia "Respaldado por 17 estudios" convertida en enlace a la investigación */
a.badge--glass { transition: background var(--bp-dur) var(--bp-ease), transform var(--bp-dur) var(--bp-ease); }
a.badge--glass:hover { background: rgba(255,255,255,.3); transform: translateY(-1px); }
.badge__link-icon { width: .9rem; height: .9rem; margin-left: .15rem; }

/* celular: señales en dos columnas y caras visibles en el hero */
@media (max-width: 719px) {
  .signals { grid-template-columns: 1fr 1fr; gap: .6rem; }
  .signals li { padding: .8rem .75rem; min-height: 6.5rem; font-size: var(--bp-text-sm); flex-direction: column; gap: .4rem; }
  .hero--photo { align-items: flex-end; }
  .hero__bg img { object-position: 62% 8% !important; }
}

/* barra destacada de la tabla con marco, para que se note más */
.cogchart__group--focus { outline: 2px solid var(--bp-cyan); outline-offset: 2px; background: var(--bp-cyan-tenue); }

/* proceso: números + íconos + flechas entre pasos */
.mini-steps { counter-reset: stp; }
.mini-step strong::before {
  counter-increment: stp; content: counter(stp);
  display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; margin-right: .5rem;
  border-radius: 50%; background: var(--bp-cyan); color: #fff; font-size: .8rem; vertical-align: .1em;
}
.mini-step { position: relative; }
@media (min-width: 768px) {
  .mini-step:not(:last-child)::after {
    content: "→"; position: absolute; right: -1.15rem; top: 50%; transform: translateY(-50%);
    width: 1.3rem; height: 1.3rem; display: grid; place-items: center; z-index: 2;
    background: #fff; border: 1px solid var(--bp-borde); border-radius: 50%; color: var(--bp-cyan-deep); font-size: .8rem; font-weight: 700;
  }
}
@media (max-width: 767px) {
  .mini-step:not(:last-child)::after {
    content: "↓"; position: absolute; left: 50%; bottom: -1.1rem; transform: translateX(-50%);
    width: 1.3rem; height: 1.3rem; display: grid; place-items: center; z-index: 2;
    background: #fff; border: 1px solid var(--bp-borde); border-radius: 50%; color: var(--bp-cyan-deep); font-size: .8rem; font-weight: 700;
  }
  .mini-steps { gap: 1.5rem; }
}

/* videos: portada = el niño que habla en el video */
.video-row .yt-facade img { object-fit: cover; opacity: 1; }

/* Experiencias Brainpower (Brain Training Story) */
.story-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.25rem; }
.story-card { flex: 0 1 calc(50% - .65rem); }
@media (min-width: 900px) { .story-card { flex-basis: calc(25% - .95rem); } }
.story-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--bp-borde); border-radius: var(--bp-radius); overflow: hidden; box-shadow: var(--bp-shadow-sm); }
.story-card a { display: block; }
.story-card img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: top; transition: transform var(--bp-dur-slow) var(--bp-ease); }
.story-card:hover img { transform: scale(1.03); }
.story-card figcaption { padding: .9rem 1rem 1.1rem; font-family: var(--bp-font-display); font-weight: 700; font-size: var(--bp-text-sm); line-height: 1.35; color: var(--bp-tinta); }
.story-card figcaption small { display: block; margin-bottom: .25rem; color: var(--bp-morado); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; font-size: var(--bp-text-xs); }
/* equipo de 7: la última tarjeta queda centrada en su fila */
@media (min-width: 640px) { .team-grid .team-card:last-child:nth-child(3n+1) { grid-column: 2; } }
/* celular: velo claro arriba (se ven las caras de los niños) y oscuro abajo (donde va el texto) */
@media (max-width: 719px) {
  .hero__scrim { background: linear-gradient(180deg, rgba(17,126,138,.12) 0%, rgba(17,126,138,.18) 32%, rgba(10,72,86,.78) 62%, rgba(10,72,86,.92) 100%); }
  .hero--photo .hero__inner { padding-top: 22rem; padding-bottom: 2.5rem; }
}

/* ===== Lightbox de historias ===== */
.story-card a { cursor: zoom-in; }
.lightbox { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; gap: .5rem; padding: 1rem; background: rgba(20,33,61,.55); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); opacity: 0; transition: opacity .25s ease; }
.lightbox[hidden] { display: none; }
.lightbox.is-open { opacity: 1; }
.lightbox__fig { margin: 0; max-width: min(92vw, 760px); max-height: 94vh; display: flex; flex-direction: column; align-items: center; gap: .75rem; }
.lightbox__img { max-width: 100%; max-height: calc(94vh - 7rem); width: auto; height: auto; border-radius: 12px; background: #fff; box-shadow: 0 24px 60px rgba(0,0,0,.4); opacity: 0; transform: scale(.96); transition: opacity .3s ease, transform .3s ease; }
.lightbox__img.is-in { opacity: 1; transform: none; }
.lightbox__cap { color: #fff; text-align: center; font-family: var(--bp-font-display); font-weight: 700; line-height: 1.35; max-width: 34rem; }
.lightbox__cap small { display: block; color: #cdbdfb; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; margin-bottom: .2rem; }
.lightbox__count { color: rgba(255,255,255,.75); font-size: .8rem; }
.lightbox__close, .lightbox__nav { border: 0; cursor: pointer; color: #fff; background: rgba(255,255,255,.16); border-radius: 50%; width: 2.75rem; height: 2.75rem; font-size: 1.8rem; line-height: 1; display: grid; place-items: center; flex: none; transition: background .2s; }
.lightbox__close:hover, .lightbox__nav:hover { background: rgba(255,255,255,.3); }
.lightbox__close { position: absolute; top: 1rem; right: 1rem; }
@media (max-width: 640px) {
  .lightbox { padding: .5rem; }
  .lightbox__nav { position: absolute; bottom: 1rem; }
  .lightbox__nav--prev { left: 1rem; }
  .lightbox__nav--next { right: 1rem; }
  .lightbox__img { max-height: calc(94vh - 9rem); }
}

/* ===== Equipo: tarjeta corta + ficha ===== */
.team-card { cursor: pointer; }
.team-card > img, .team-card .ph { transition: transform var(--bp-dur-slow) var(--bp-ease), box-shadow .3s ease; }
.team-card:hover > img, .team-card:hover .ph { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(20,33,61,.18); }
.team-card__role { display: block; margin-top: .15rem; }
.team-card__more { margin-top: .7rem; display: inline-flex; align-items: center; gap: .4rem; padding: .45rem 1rem; border-radius: 999px; border: 1.5px solid var(--bp-cyan-deep); background: transparent; color: var(--bp-cyan-deep); font: 600 var(--bp-text-sm) var(--bp-font-display); cursor: pointer; transition: background .2s, color .2s; }
.team-card__more:hover, .team-card:hover .team-card__more { background: var(--bp-cyan-deep); color: #fff; }
.teambox__card { display: grid; grid-template-columns: minmax(0, 1fr); width: min(92vw, 52rem); max-height: 92vh; overflow: auto; background: #fff; border-radius: 24px; box-shadow: 0 30px 80px rgba(0,0,0,.4); opacity: 0; transform: translateY(14px) scale(.98); transition: opacity .3s ease, transform .3s ease; }
.teambox__card.is-in { opacity: 1; transform: none; }
.teambox__photo img, .teambox__photo .ph { width: 100%; aspect-ratio: 4 / 4.2; object-fit: cover; object-position: top; display: block; border-radius: 0; }
.teambox__body { padding: 1.5rem 1.5rem 1.75rem; display: flex; flex-direction: column; justify-content: center; }
.teambox__kicker { color: var(--bp-morado); font-weight: 700; font-size: var(--bp-text-xs); letter-spacing: .08em; text-transform: uppercase; margin: 0 0 .4rem; }
.teambox__name { font-family: var(--bp-font-display); font-size: clamp(1.5rem, 4vw, 2rem); line-height: 1.15; margin: 0 0 .5rem; color: var(--bp-tinta); }
.teambox__role { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1.1rem; }
.teambox__role span { background: #e6f7f9; color: var(--bp-cyan-deep); font-weight: 600; font-size: var(--bp-text-sm); padding: .35rem .8rem; border-radius: 999px; }
.team-card__degree { display: block; margin-top: .1rem; font-size: var(--bp-text-xs); font-weight: 600; color: var(--bp-cyan-deep); }
.teambox__quote { margin: 0; padding-left: 1rem; border-left: 4px solid var(--bp-cyan); font-size: 1.1rem; line-height: 1.55; color: var(--bp-tinta); }
.teambox__count { margin: 1.25rem 0 0; color: var(--bp-text-muted, #5a6786); font-size: .8rem; }
@media (min-width: 720px) {
  .teambox__card { grid-template-columns: 5fr 6fr; }
  .teambox__photo img, .teambox__photo .ph { height: 100%; min-height: 28rem; aspect-ratio: auto; }
  .teambox__body { padding: 2.25rem; }
}
@media (max-width: 719px) { .teambox__card { max-height: 86vh; } }

/* Gráfica cognitiva: en el celular cabe completa, sin deslizar.
   Las etiquetas se leen en vertical para no partir palabras. */
@media (max-width: 700px) {
  .cogchart__plot { overflow: visible; grid-template-columns: auto minmax(0, 1fr); }
  .cogchart__axis { position: static; padding-right: 0; }
  .cogchart__swipe { display: none; }
  .cogchart__bars, .cogchart__labels { gap: 2px; }
  .cogchart__group { gap: 2px; }
  .cogchart__bar { flex: 0 1 11px; max-width: 11px; }
  .cogchart__bar b { font-size: 8px; }
  .cogchart__labels span {
    writing-mode: vertical-rl; transform: rotate(180deg);
    text-align: left; font-size: 10px; line-height: 1.15; overflow-wrap: normal;
    min-height: 7.5rem; margin: 0 auto;
  }
}

/* ============================================================
   AJUSTES FINALES (PDF "CAMBIOS BRAIN FINALES")
   ============================================================ */

/* 1. Ondas lila sólidas: la sección lila "sube" sobre la anterior con borde
   ondulado, sin franjas blancas en medio. Aplica a toda sección lila/turquesa
   suave que no sea la primera de <main>. */
main > section.surface-morado:not(:first-child),
main > section.surface-cyan:not(:first-child) { position: relative; }
main > section.surface-morado:not(:first-child)::before,
main > section.surface-cyan:not(:first-child)::before {
  content: ""; position: absolute; left: 0; right: 0; top: -47px; height: 48px;
  background: var(--wave-color, var(--bp-morado-tenue));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 64' preserveAspectRatio='none'%3E%3Cpath d='M0,30 C120,10 240,6 360,24 C480,42 600,50 720,34 C840,18 960,8 1080,26 C1200,44 1320,50 1440,26 V64 H0 Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 64' preserveAspectRatio='none'%3E%3Cpath d='M0,30 C120,10 240,6 360,24 C480,42 600,50 720,34 C840,18 960,8 1080,26 C1200,44 1320,50 1440,26 V64 H0 Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  pointer-events: none; z-index: 2;
}
main > section.surface-cyan:not(:first-child) { --wave-color: var(--bp-cyan-tenue); }
@media (max-width: 640px) {
  main > section.surface-morado:not(:first-child)::before,
  main > section.surface-cyan:not(:first-child)::before { height: 30px; top: -29px; }
}

/* 2. Franja turquesa con texto blanco y acento lila (Home · Nuestro espacio) */
.section--flush-top { padding-top: 0; }
.band--cyan { background: var(--bp-cyan); padding: clamp(2.5rem, 6vw, 4rem) 0; margin-bottom: 0; }
.band--cyan .section__head { margin-bottom: 0; }
.band--cyan h2 { color: #fff; }
.band--cyan .lead { color: rgba(255,255,255,.92); }
.band--cyan .eyebrow { display: inline-block; background: var(--bp-morado); color: #fff; padding: .3rem .8rem; border-radius: 999px; }
.band--cyan .eyebrow::before { display: none; }
.band--cyan h2 .hl, .band--cyan h2 em { color: var(--bp-morado); }

/* 3. Opciones de la autoevaluación: al pasar el mouse toman el degradé */
.selfcheck__pick:hover, .selfcheck__pick:focus-visible {
  background: var(--bp-gradient); border-color: transparent; color: #fff;
  transform: translateY(-3px); box-shadow: var(--bp-shadow-lg);
}
.selfcheck__pick:hover strong, .selfcheck__pick:hover span,
.selfcheck__pick:focus-visible strong, .selfcheck__pick:focus-visible span { color: #fff; }

/* 4. Atención: el rostro de la niña queda a la derecha, fuera del texto */
@media (min-width: 720px) {
  .hero--face-right .hero__bg img { width: var(--hk, 100%) !important; max-width: none; margin-left: var(--hl, 0) !important; }
}

/* 5. "Cómo lo trabajamos": foto a sangre, de borde a borde y sin franjas blancas */
.section:has(> .container > .method-split--bleed) { padding-top: 0; padding-bottom: 0; }
.method-split--bleed .method-split__text > div { padding-top: clamp(2.5rem, 5vw, 4rem); padding-bottom: clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 900px) {
  .method-split--bleed .method-split__media img { border-radius: 0; object-position: center; }
}

/* 8. Pirámide y logos de respaldo: nunca se cortan */
.mathpyramid, .program-logos { max-width: 100%; overflow: visible; }
.program-logos__row img { max-width: min(100%, 200px); height: auto; max-height: 56px; width: auto; object-fit: contain; }

.mathpyramid__lvl { overflow: visible; white-space: normal; overflow-wrap: break-word; }
.section:has(.method-split--bleed .mathpyramid) .method-split--bleed .method-split__media img { object-position: 12% center; }

/* Marco visible alrededor de la habilidad destacada (barras + etiqueta) */
.cogchart__group--focus {
  outline: none; background: var(--bp-cyan-tenue);
  border: 2px solid var(--bp-cyan); border-bottom: 0; border-radius: 8px 8px 0 0;
}
.cogchart__labels .is-focus {
  background: var(--bp-cyan-tenue); border: 2px solid var(--bp-cyan); border-top: 0;
  border-radius: 0 0 8px 8px; color: var(--bp-cyan-deep); padding-bottom: .35rem;
}
.cogchart__labels { margin-top: 0; }
.cogchart__labels span { padding-top: .5rem; }

.band--cyan + .gallery--bleed { margin-top: 0; }

/* "Cómo lo trabajamos": foto con esquinas redondeadas, y la sección lila de
   abajo ya no lleva onda (se montaría sobre la foto) */
@media (min-width: 900px) {
  .method-split--bleed .method-split__media img { border-radius: var(--bp-radius-lg) 0 0 var(--bp-radius-lg); }
}
.method-split--bleed .method-split__media img { overflow: hidden; }
@media (max-width: 899px) {
  .method-split--bleed .method-split__media img { border-radius: 0 0 var(--bp-radius-lg) var(--bp-radius-lg); }
}
.section:has(.method-split--bleed) + section::before { display: none !important; }

/* Video horizontal (16:9) dentro de una landing */
.video-wide { max-width: 760px; margin: 2rem auto 0; }
.video-wide .yt-facade { aspect-ratio: 16 / 9; width: 100%; }
.video-wide__title { text-align: center; font-family: var(--bp-font-display); font-weight: 800; font-size: var(--bp-text-xl); margin-bottom: 1rem; }

/* Foto de fondo de "Una tutoría repasa la clase": más visible y con el rostro dentro del encuadre */
.section--photo-face::before { opacity: .42; background-position: center 7%; }
.section--photo-face::after { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, rgba(247,249,252,.55) 0%, rgba(247,249,252,.15) 55%, rgba(247,249,252,.55) 100%); pointer-events: none; }

/* Sección turquesa con texto blanco y acentos lila (mismo criterio que "Nuestro espacio") */
.section--cyan-band { background: var(--bp-cyan); }
.section--cyan-band h2, .section--cyan-band .stat__num { color: #fff; }
.section--cyan-band .stat__label { color: rgba(255,255,255,.92); }
.section--cyan-band .eyebrow { display: inline-block; background: var(--bp-morado); color: #fff; padding: .3rem .8rem; border-radius: 999px; }
.section--cyan-band .eyebrow::before { display: none; }
.section--cyan-band .btn--outline { background: var(--bp-morado); color: #fff; border-color: transparent; }
.section--cyan-band .btn--outline:hover { background: #5a3fb0; }
@media (min-width: 900px) {
  /* el rostro del niño queda en el margen derecho, fuera de las tarjetas */
  .section--photo-face::before { background-size: auto 135%; background-position: right 2% top 8%; opacity: .55; }
  .section--photo-face::after { background: linear-gradient(90deg, rgba(247,249,252,.92) 0%, rgba(247,249,252,.55) 55%, rgba(247,249,252,0) 85%); }
}
@media (min-width: 900px) {
  .section--photo-face::before {
    -webkit-mask-image: linear-gradient(90deg, transparent 36%, #000 62%);
            mask-image: linear-gradient(90deg, transparent 36%, #000 62%);
  }
  .section--photo-face::after { display: none; }
}
@media (min-width: 900px) {
  /* sube y desplaza la foto: el rostro queda libre, por encima de las tarjetas */
  .section--photo-face::before { background-size: auto 140%; background-position: right -5% top 46%; }
}

/* ===== "Una tutoría repasa la clase": foto centrada, con el rostro libre =====
   La foto va en el centro de la sección (no al costado); entre el título y
   las tarjetas queda un espacio donde se ve el rostro del niño. */
@media (min-width: 900px) {
  .section--photo-face::before {
    background-size: min(100%, 1100px) auto; background-repeat: no-repeat;
    background-position: center calc(470px - 0.27 * min(100vw, 1100px));
    opacity: .9; -webkit-mask-image: none; mask-image: none;
  }
  .section--photo-face::after {
    display: block;
    background:
      linear-gradient(90deg, #F7F9FC 0%, rgba(247,249,252,0) 22%, rgba(247,249,252,0) 78%, #F7F9FC 100%),
      linear-gradient(180deg, #F7F9FC 0%, rgba(247,249,252,0) 14%, rgba(247,249,252,0) 62%, rgba(247,249,252,.92) 86%, #F7F9FC 100%);
  }
  .section--photo-face .vs { margin-top: 17rem; }
}
@media (min-width: 900px) {
  /* la caja de la foto se desplaza para que el ROSTRO (no la foto) quede en el
     centro de la sección; fondos suaves en los costados y abajo */
  .section--photo-face { --pf-w: min(100vw, 820px); }
  .section--photo-face::before {
    left: 50%; right: auto; width: var(--pf-w); top: 0; bottom: 0; inset-inline-end: auto;
    transform: translateX(calc(-50% - 0.16 * var(--pf-w)));
    background-size: 100% auto; background-repeat: no-repeat;
    background-position: 0 calc(545px - 0.495 * var(--pf-w));
    opacity: .95;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 20%, #000 80%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 20%, #000 80%, transparent 100%);
  }
  .section--photo-face::after {
    display: block;
    background: linear-gradient(180deg, #F7F9FC 0%, rgba(247,249,252,0) 10%, rgba(247,249,252,0) 60%, rgba(247,249,252,.9) 84%, #F7F9FC 100%);
  }
  .section--photo-face .vs { margin-top: 17rem; }
}

/* "Una tutoría repasa la clase": foto de la niña escribiendo, bien visible y
   con su rostro en el margen derecho, fuera de las tarjetas */
.section--photo-writing::before { opacity: .6; background-position: 95% 0%; }
.section--photo-writing::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(247,249,252,.92) 0%, rgba(247,249,252,.55) 55%, rgba(247,249,252,0) 90%);
}
@media (max-width: 899px) {
  .section--photo-writing::before { opacity: .4; background-position: 70% center; }
  .section--photo-writing::after { background: rgba(247,249,252,.55); }
}
@media (min-width: 900px) {
  .section--photo-writing::before { background-size: auto 100%; background-repeat: no-repeat; background-position: calc(100% + 11vw) 0; }
}
@media (min-width: 900px) {
  /* la foto es una caja 3:2 pegada a la derecha con su borde izquierdo
     desvanecido: nunca se ve el corte recto de la imagen */
  .section--photo-writing::before {
    inset: 0 -11vw 0 auto; width: auto; aspect-ratio: 3 / 2;
    background-size: 100% 100%; background-position: 0 0; background-repeat: no-repeat;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 38%);
            mask-image: linear-gradient(90deg, transparent 0%, #000 38%);
  }
  .section--photo-writing::after { background: linear-gradient(90deg, rgba(247,249,252,.55) 0%, rgba(247,249,252,0) 70%); }
}
@media (min-width: 900px) {
  /* foto centrada, a todo el ancho de la sección */
  .section--photo-writing::before {
    inset: 0; width: auto; aspect-ratio: auto;
    background-size: cover; background-position: center center;
    -webkit-mask-image: none; mask-image: none; opacity: .5;
  }
  .section--photo-writing::after {
    background: linear-gradient(180deg, rgba(247,249,252,.5) 0%, rgba(247,249,252,.25) 45%, rgba(247,249,252,.6) 100%);
  }
}

/* ===== Ajustes del cliente (versión teléfono) ===== */
/* "Se distrae con todo…": dos columnas también en el celular */
@media (max-width: 719px) {
  .mirror-grid { grid-template-columns: 1fr 1fr; gap: .7rem; }
  .mirror-card { padding: 1rem .7rem; font-size: .88rem; }
  .mirror-card__arrow { display: none; }
}
/* Tutoría tradicional vs. Brainpower: filas alineadas una frente a otra */
.vs { grid-template-rows: auto repeat(5, auto); }
.vs__col { display: grid; grid-row: span 6; grid-template-rows: subgrid; }
.vs__col h3 { margin-bottom: 0; align-self: start; }
.vs__row { align-items: center; }
@supports not (grid-template-rows: subgrid) {
  .vs__col { display: block; grid-row: auto; }
}
.program-logos--center .program-logos__row { justify-content: center; }

/* ===== Siete habilidades: cada tarjeta con su propio color (paleta Brainpower) ===== */
.bento__cell[data-skill] { background: var(--sk-bg); border-color: var(--sk-line); border-top: 4px solid var(--sk); }
.bento__cell[data-skill] .card__icon { background: #fff; color: var(--sk); }
.bento__cell[data-skill] h3 { color: var(--sk-ink); }
.bento__cell[data-skill] .bento__detail { border-top-color: var(--sk-line); }
.bento__cell[data-skill="s1"] { --sk:#19B8C5; --sk-bg:#E3F6F8; --sk-line:#BFE9EE; --sk-ink:#0E6F7A; }
.bento__cell[data-skill="s2"] { --sk:#6B4BC1; --sk-bg:#EEE9FB; --sk-line:#D5CAF3; --sk-ink:#4C32A0; }
.bento__cell[data-skill="s3"] { --sk:#43C6D3; --sk-bg:#E6F9FB; --sk-line:#C2EDF2; --sk-ink:#0F7380; }
.bento__cell[data-skill="s4"] { --sk:#9B7FE0; --sk-bg:#F2EEFC; --sk-line:#DDD3F6; --sk-ink:#5B3FB0; }
.bento__cell[data-skill="s5"] { --sk:#117E8A; --sk-bg:#DDF0F2; --sk-line:#B5DADF; --sk-ink:#0A5660; }
.bento__cell[data-skill="s6"] { --sk:#52389F; --sk-bg:#E8E3F7; --sk-line:#CFC5EE; --sk-ink:#3A2680; }
.bento__cell[data-skill="s7"] { --sk:#2FA7B8; --sk-bg:#E1F4F7; --sk-line:#BCE4EA; --sk-ink:#0D6272; }
.bento__cell[data-skill]:hover, .bento__cell[data-skill].is-open { border-top-color: var(--sk); border-color: var(--sk-line); }

/* ===== Carrusel circular del equipo (Inicio) ===== */
.tcar { position: relative; border-radius: var(--bp-radius-lg); overflow: hidden; box-shadow: var(--bp-shadow-lg); background: #fff; aspect-ratio: 933 / 1400; max-width: 420px; margin-inline: auto; }
.tcar__track { position: absolute; inset: 0; }
.tcar__slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity .5s var(--bp-ease); }
.tcar__slide.is-active { opacity: 1; }
.tcar__slide img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.tcar__slide figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 2.5rem 1rem 1rem; color: #fff; text-align: center; background: linear-gradient(180deg, transparent, rgba(20,33,61,.78)); }
.tcar__slide figcaption strong { display: block; font-family: var(--bp-font-display); font-size: var(--bp-text-lg); }
.tcar__slide figcaption span { font-size: var(--bp-text-sm); opacity: .92; }
.tcar__btn { position: absolute; top: 50%; transform: translateY(-50%); width: 2.75rem; height: 2.75rem; border: 0; border-radius: 50%; background: rgba(255,255,255,.92); color: var(--bp-tinta); font-size: 1.8rem; line-height: 1; cursor: pointer; display: grid; place-items: center; box-shadow: 0 6px 18px rgba(20,33,61,.25); transition: background .2s, transform .2s; }
.tcar__btn:hover { background: #fff; transform: translateY(-50%) scale(1.06); }
.tcar__btn--prev { left: .6rem; }
.tcar__btn--next { right: .6rem; }

/* Bloque de programas internacionales: centrado y con más aire */
.program-logos--center { width: 100%; max-width: 980px; margin-inline: auto; text-align: center; margin-top: clamp(2.5rem, 4vw, 3.5rem); }
.program-logos--center .program-logos__label { text-align: center; margin: 0 auto 1.75rem; font-size: var(--bp-text-base); line-height: 1.4; }
.program-logos--center .program-logos__row { justify-content: center; align-items: center; gap: 2rem clamp(2rem, 5vw, 4rem); padding-inline: 1rem; }
.program-logos--center .program-logos__row img { max-height: 54px; max-width: min(42vw, 190px); height: auto; width: auto; flex: 0 0 auto; }
@media (max-width: 560px) {
  .program-logos--center .program-logos__row { gap: 1.5rem 2rem; }
  .program-logos--center .program-logos__row img { max-height: 44px; max-width: 38vw; }
}
.program-logos--center { padding-bottom: 2.5rem; }

/* Teléfono: la foto de "Cómo lo trabajamos" ocupa todo el ancho (antes quedaba
   como una tarjeta angosta y se cortaba raro) */
@media (max-width: 899px) {
  .method-split--bleed { align-items: stretch; }
  .method-split--bleed .method-split__media { align-self: stretch; width: auto; margin-inline: -20px; }
  .method-split--bleed .method-split__media img {
    width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 25%;
    border-radius: 0 0 var(--bp-radius-lg) var(--bp-radius-lg);
  }
}

/* Cifras del hero enlazadas a la investigación */
a.hero__stats--link { display: flex; text-decoration: none; color: inherit; transition: transform .2s var(--bp-ease), opacity .2s; }
a.hero__stats--link:hover { transform: translateY(-2px); opacity: .92; }
.hero__research { margin-top: .75rem; font-size: var(--bp-text-sm); }
.hero__research a { color: #fff; text-decoration: underline; text-underline-offset: 3px; opacity: .92; }
.hero__research a:hover { opacity: 1; }

/* ===== Ajustes de los documentos de revisión (19 oct) ===== */
/* Botón "Ver resultados de la investigación" bajo las cifras del hero */
.hero__research-btn { margin-top: 1rem; }
.hero__research-btn .btn { font-size: .9rem; padding: .6rem 1.2rem; }
/* CTA del hero: más pequeño en el teléfono */
@media (max-width: 719px) {
  .hero__cta .btn--wa.btn--lg { font-size: .88rem; padding: .7rem 1.1rem; }
  .hero__stats { gap: 1rem 1.5rem; }
}
/* Método: cada tarjeta con color de la paleta */
.method-item[data-mc] { border: 1px solid transparent; }
.method-item[data-mc="m1"] { background: #E3F6F8; border-color: #BFE9EE; }
.method-item[data-mc="m2"] { background: #EEE9FB; border-color: #D5CAF3; }
.method-item[data-mc="m3"] { background: #DDF0F2; border-color: #B5DADF; }
.method-item[data-mc="m1"] svg { color: #19B8C5; }
.method-item[data-mc="m2"] svg { color: #6B4BC1; }
.method-item[data-mc="m3"] svg { color: #117E8A; }
.method-item[data-mc] strong { color: var(--bp-tinta); }
/* Fotos 1 a 1 bajo el método */
.onetoone { display: flex; gap: 1rem; justify-content: center; align-items: stretch; margin: 2rem auto 0; max-width: 860px; }
.onetoone figure { margin: 0; flex: 1 1 0; border-radius: var(--bp-radius-lg); overflow: hidden; box-shadow: var(--bp-shadow-sm); aspect-ratio: 4 / 5; }
.onetoone figure:nth-child(2) { flex-grow: 1.3; }
.onetoone img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
@media (max-width: 560px) { .onetoone { gap: .5rem; } .onetoone figure { aspect-ratio: 3 / 5; border-radius: var(--bp-radius); } }
/* Teléfono: la foto va como franja entre el título y las tarjetas, para que
   las tablas no tapen el rostro de la niña */
@media (max-width: 899px) {
  .section--photo-writing::before, .section--photo-writing::after { display: none; }
  .section--photo-writing .section__head::after {
    content: ""; display: block; height: 15rem; margin: 1.5rem -20px 0;
    background: var(--section-photo) 82% 0 / cover no-repeat;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 82%, transparent 100%);
            mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 82%, transparent 100%);
  }
  .section--photo-writing .section__head { margin-bottom: .5rem; }
}

/* Bloque final: lila de la paleta (sin azul) para que el botón turquesa destaque */
.closing { background: linear-gradient(135deg, #4B3399 0%, #6B4BC1 55%, #8F72D6 100%); }
.closing__logo { display: block; width: clamp(120px, 14vw, 170px); height: auto; margin: 0 auto 1.25rem; }
/* Letras de los botones de WhatsApp un poco más pequeñas */
.btn--wa.btn--lg { font-size: .92rem; }
@media (max-width: 719px) {
  .btn--wa.btn--lg { font-size: .85rem; padding: .8rem 1.1rem; line-height: 1.25; text-align: left; }
  .closing .btn--wa { max-width: 100%; }
}

/* ===== Revisión de Diego (Cambios Landing Homepage) ===== */
/* Aviso "no es un diagnóstico": resaltado y centrado en la tarjeta */
.selfcheck__disclaimer { text-align: center; max-width: 34rem; margin: 1.25rem auto 0; font-size: var(--bp-text-sm); line-height: 1.5; }
.selfcheck__nodx { color: var(--bp-morado); background: var(--bp-morado-tenue); padding: .1rem .5rem; border-radius: 6px; font-weight: 800; white-space: nowrap; }
/* Teléfono: franja con foto de las instalaciones (en vez del rostro cortado) y sin capa blanca encima */
@media (max-width: 899px) {
  .section--photo-writing .section__head::after {
    background-image: url('/assets/img/real/instalaciones/instalaciones-sala-espera.jpg');
    background-position: center 40%;
    height: 14rem;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 10%, #000 90%, transparent 100%);
            mask-image: linear-gradient(180deg, transparent 0, #000 10%, #000 90%, transparent 100%);
  }
}
/* Siete habilidades: contraste mayor entre tarjetas (siempre dentro de la paleta) */
.bento__cell[data-skill="s1"] { --sk:#19B8C5; --sk-bg:#C9EFF3; --sk-line:#8FDDE5; --sk-ink:#0A6470; }
.bento__cell[data-skill="s2"] { --sk:#6B4BC1; --sk-bg:#D9CFF5; --sk-line:#B8A6EA; --sk-ink:#412A94; }
.bento__cell[data-skill="s3"] { --sk:#43C6D3; --sk-bg:#EAFAFC; --sk-line:#A9E6EE; --sk-ink:#0F7380; }
.bento__cell[data-skill="s4"] { --sk:#9B7FE0; --sk-bg:#EBE4FA; --sk-line:#CDBEF1; --sk-ink:#5B3FB0; }
.bento__cell[data-skill="s5"] { --sk:#117E8A; --sk-bg:#B7E0E5; --sk-line:#7DC3CC; --sk-ink:#084A53; }
.bento__cell[data-skill="s6"] { --sk:#52389F; --sk-bg:#C7BBEE; --sk-line:#A494DE; --sk-ink:#32206F; }
.bento__cell[data-skill="s7"] { --sk:#2FA7B8; --sk-bg:#DDF4F7; --sk-line:#9ED8E0; --sk-ink:#0D6272; }

/* ===== Fotos 1 a 1 que rotan cada 3 s (Atención · Cómo lo trabajamos) ===== */
.rot3 { position: relative; width: 100%; height: 100%; min-height: 340px; overflow: hidden; border-radius: inherit; }
.rot3 img { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover; object-position: center 25%; opacity: 0; transition: opacity .9s ease; border-radius: inherit !important; }
.rot3 img.is-on { opacity: 1; }
@media (min-width: 900px) {
  .method-split--bleed .method-split__media { display: flex; }
  .method-split--bleed .method-split__media .rot3 { border-radius: var(--bp-radius-lg) 0 0 var(--bp-radius-lg); min-height: 460px; }
}
@media (max-width: 899px) {
  .method-split--bleed .method-split__media .rot3 { aspect-ratio: 4 / 3; height: auto; min-height: 0; border-radius: 0 0 var(--bp-radius-lg) var(--bp-radius-lg); }
}
/* Marco de la habilidad destacada: espacio libre sobre el valor numérico */
.cogchart__group--focus { margin-top: -1.5rem; height: calc(100% + 1.5rem); }
.cogchart__bars { align-items: end; }

/* Tabla accesible oculta: no debe ensanchar la página en el teléfono */
table.sr-only { display: block; width: 1px; max-width: 1px; height: 1px; overflow: hidden; }
table.sr-only caption, table.sr-only tr, table.sr-only th, table.sr-only td { white-space: nowrap; }

/* Teléfono: las fotos del hero ocupan la parte alta (rostros de los niños a la vista)
   y se funden con el color del velo; el texto queda abajo, sin tapar las caras */
@media (max-width: 719px) {
  .hero--photo .hero__bg { background: #0A4856; }
  .hero--photo .hero__bg img {
    height: 64% !important; bottom: auto !important;
    object-fit: cover; object-position: var(--m-pos, 60% 20%) !important;
    -webkit-mask-image: linear-gradient(180deg, #000 0, #000 70%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 0, #000 70%, transparent 100%);
  }
}

/* ===== Revisión 26 oct ===== */
/* Proceso: íconos alineados con el título de cada paso (fila compartida, centrados) */
.step { align-items: center; }
@media (min-width: 768px) {
  .step__num, .step__body { grid-row: 1; }
}
/* La gráfica: el marco de la habilidad destacada no tapa la leyenda ni los textos */
.cogchart__legend { margin-bottom: .25rem; position: relative; z-index: 2; }
.cogchart__plot { margin-top: 2.6rem; }
@media (max-width: 700px) { .cogchart__plot { margin-top: 3rem; } }
.cogchart__group--focus { z-index: 0; }
/* Señales: "¿Te suena?" pequeño y en lila arriba (misma estructura en todas las landings) */
.signals-head .eyebrow { margin-bottom: .6rem; }

/* Mate: imagen específica enviada por el cliente (redes cerebrales), con respiración suave */
.brain-activation--wide { width: min(100%, 720px); }
.brain-activation--wide img { border-radius: var(--bp-radius-lg); box-shadow: var(--bp-shadow); animation: brain-breathe 4.5s ease-in-out infinite; }
@keyframes brain-breathe { 0%, 100% { filter: saturate(1) brightness(1); } 50% { filter: saturate(1.25) brightness(1.04); } }
@media (prefers-reduced-motion: reduce) { .brain-activation--wide img { animation: none; } }

/* Proceso: el círculo de cada paso queda centrado sobre la línea (antes se pegaba
   al borde izquierdo de su columna y quedaba ~5 px corrido) */
.step__num { justify-self: center; align-self: center; margin: 0; }
.steps::before { width: 3px; }
@media (min-width: 768px) {
  .steps::before { left: calc(50% - 1.5px); transform: none; }
}
@media (max-width: 767px) {
  .step { grid-template-columns: 46px 1fr; }
  .steps::before { left: calc(23px - 1.5px); }
}