/* ============================================
   VENDEMÁS — Reusable Components
   ============================================ */

/* ==========================================
   1. HEADER / NAVIGATION
   ========================================== */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background: var(--color-paper);
  border-bottom: 1px solid rgba(17, 150, 235, 0.15);
  transition: var(--transition);
}

/* Estado al hacer scroll: solo refuerza borde y sombra, nunca oscurece */
.header--scrolled {
  background: rgba(255, 255, 255, 0.98);
  border-bottom-color: rgba(17, 150, 235, 0.35);
  box-shadow: 0 4px 20px rgba(5, 49, 70, 0.08);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 70px;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

.header__logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.header__logo img {
  height: 38px;
  width: auto;
}

.header__nav {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.header__nav a {
  font-size: 0.875rem;
  font-weight: 600;
  color: rgba(5, 49, 70, 0.75);
  position: relative;
  padding: 0.25rem 0;
}

.header__nav a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--color-blue);
  transition: var(--transition);
}

.header__nav a:hover {
  color: var(--color-ink);
}

.header__nav a:hover::after {
  width: 100%;
}

.header__nav a.active {
  color: var(--color-orange-deep);
}

.header__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.825rem;
  padding: 0.5rem 1.25rem;
  background: var(--color-orange);
  color: var(--color-white);
  border-radius: 50px;
  transition: var(--transition);
}

.header__cta:hover {
  background: color-mix(in srgb, var(--color-ink) 20%, var(--color-orange) 80%);
  transform: translateY(-1px);
}

/* Hamburger Menu */
.header__toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}

.header__toggle span {
  display: block;
  width: 26px;
  height: 2px;
  background: var(--color-ink);
  border-radius: 2px;
  transition: var(--transition);
}

.header__toggle.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.header__toggle.active span:nth-child(2) {
  opacity: 0;
}

.header__toggle.active span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

@media (max-width: 992px) {
  .header__logo img {
    height: 28px;
  }

  .header__toggle {
    display: flex;
  }

  .header__nav {
    position: fixed;
    top: 70px;
    left: 0;
    width: 100%;
    flex-direction: column;
    gap: 0;
    background: rgba(255, 255, 255, 0.98);
    padding: 1rem 0;
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
    transition: var(--transition);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .header__nav.open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: all;
  }

  .header__nav a {
    display: block;
    padding: 0.875rem var(--container-padding);
    width: 100%;
    border-bottom: 1px solid rgba(17, 150, 235, 0.1);
  }

  .header__nav a::after {
    display: none;
  }

  .header__nav .header__cta {
    margin: 0.75rem var(--container-padding);
    justify-content: center;
  }
}

/* ==========================================
   2. HERO
   ========================================== */
/* Hero base — todo hero del sitio parte de aquí: fondo sólido de marca (nunca claro,
   nunca degradado), texto siempre en blanco/crema (contraste garantizado por diseño, no
   por overrides puntuales). Lleva dos círculos decorativos de color PLANO en las
   esquinas (sin blur, sin degradado — dos formas sólidas, como en la referencia) que
   se aplican a todo hero del sitio sin depender del markup de cada página. */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-top: 70px;
  overflow: hidden;
  isolation: isolate;
  color: var(--color-white);
}

.hero::before,
.hero::after {
  content: '';
  position: absolute;
  z-index: 2;
  pointer-events: none;
}

/* Variante 1 (default — Home): círculo arriba-derecha + círculo abajo-izquierda.
   Las demás páginas usan .hero--shapes-2/3/4/5 (ver abajo) para que la posición
   y la forma (círculo vs. cuadrado redondeado) cambien de página a página — no
   siempre el mismo par de círculos en las mismas esquinas. Tamaños pensados
   para que quepan incluso en el hero--compact (bajo, sin 100vh) sin invadir
   el título — ver también el ajuste extra de tamaño para .hero--compact abajo. */
.hero::before {
  width: 240px;
  height: 240px;
  border-radius: 50%;
  top: -75px;
  right: -60px;
  left: auto;
  bottom: auto;
  background: var(--color-orange);
}

.hero::after {
  width: 155px;
  height: 155px;
  border-radius: 50%;
  bottom: -50px;
  left: -50px;
  top: auto;
  right: auto;
  background: var(--color-blue);
}

/* Variante 2: cuadrado redondeado arriba-izquierda + círculo abajo-derecha */
.hero--shapes-2::before {
  width: 120px;
  height: 120px;
  border-radius: 28px;
  top: -35px;
  left: -35px;
  right: auto;
  bottom: auto;
  background: var(--color-blue);
}

.hero--shapes-2::after {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  bottom: -60px;
  right: -55px;
  top: auto;
  left: auto;
  background: color-mix(in srgb, var(--color-ink) 20%, var(--color-orange) 80%);
}

/* Variante 3: círculo arriba-izquierda + cuadrado redondeado abajo-derecha */
.hero--shapes-3::before {
  width: 210px;
  height: 210px;
  border-radius: 50%;
  top: -70px;
  left: -55px;
  right: auto;
  bottom: auto;
  background: var(--color-orange);
}

.hero--shapes-3::after {
  width: 135px;
  height: 135px;
  border-radius: 26px;
  bottom: -40px;
  right: -40px;
  top: auto;
  left: auto;
  background: var(--color-blue);
}

/* Variante 4: dos cuadrados redondeados (arriba-derecha y abajo-izquierda) */
.hero--shapes-4::before {
  width: 150px;
  height: 150px;
  border-radius: 26px;
  top: -45px;
  right: -45px;
  left: auto;
  bottom: auto;
  background: var(--color-blue);
}

.hero--shapes-4::after {
  width: 120px;
  height: 120px;
  border-radius: 24px;
  bottom: -30px;
  left: -30px;
  top: auto;
  right: auto;
  background: var(--color-orange);
}

/* Quiénes Somos venía en tono naranja/dorado (tanto --tone-gold como después
   --tone-orange) y el cliente lo siguió viendo como "gold" — se pasa a azul
   sólido (--color-blue, ya probado con texto blanco en .section--dark) para
   alejarse por completo de la familia naranja/dorada, no solo variar el mix.
   Selector combinado .hero--modern.hero--quienes-somos (no solo
   .hero--quienes-somos): .hero--modern trae su propio "background:
   var(--color-ink)" más abajo en este archivo, y a igual especificidad
   ganaría por orden de cascada y anularía el azul. */
.hero--modern.hero--quienes-somos {
  background: var(--color-blue);
}

/* Quiénes Somos: mismas formas de shapes-4, más grandes — pedido puntual del
   cliente para esta página, no para las otras 3 que también usan
   hero--shapes-4 (Conecta con el Dinero, Experto en Prospección, Ventas que
   Transforman), por eso va con el selector combinado en vez de tocar la
   variante compartida. */
.hero--quienes-somos.hero--shapes-4::before {
  width: 220px;
  height: 220px;
  top: -65px;
  right: -65px;
}

.hero--quienes-somos.hero--shapes-4::after {
  width: 180px;
  height: 180px;
  bottom: -45px;
  left: -45px;
}

/* Variante 5: cuadrado redondeado arriba-izquierda + círculo abajo-derecha (dorado) */
.hero--shapes-5::before {
  width: 130px;
  height: 130px;
  border-radius: 26px;
  top: -40px;
  left: -40px;
  right: auto;
  bottom: auto;
  background: var(--color-blue);
}

.hero--shapes-5::after {
  width: 190px;
  height: 190px;
  border-radius: 50%;
  bottom: -60px;
  right: -50px;
  top: auto;
  left: auto;
  background: var(--color-orange-light);
}

/* .hero--compact (todas las páginas menos Home) es bajo — no tiene el alto de
   un hero de 100vh para "absorber" las formas a tamaño completo. Se reducen
   un poco más en cualquier ancho de pantalla, no solo en móvil. */
.hero--compact::before,
.hero--compact.hero--shapes-2::before,
.hero--compact.hero--shapes-3::before,
.hero--compact.hero--shapes-4::before,
.hero--compact.hero--shapes-5::before,
.hero--compact::after,
.hero--compact.hero--shapes-2::after,
.hero--compact.hero--shapes-3::after,
.hero--compact.hero--shapes-4::after,
.hero--compact.hero--shapes-5::after {
  transform: scale(0.75);
}

/* Las formas se reducen progresivamente para que nunca invadan el texto: en
   tablet (≤992px) el contenedor ya no deja el mismo margen que en desktop, y
   en móvil chico (≤480px) se reducen aún más. */
@media (max-width: 992px) {
  .hero::before,
  .hero--shapes-2::before,
  .hero--shapes-3::before,
  .hero--shapes-4::before,
  .hero--shapes-5::before {
    transform: scale(0.65);
  }

  .hero::after,
  .hero--shapes-2::after,
  .hero--shapes-3::after,
  .hero--shapes-4::after,
  .hero--shapes-5::after {
    transform: scale(0.65);
  }
}

@media (max-width: 480px) {
  .hero::before,
  .hero--shapes-2::before,
  .hero--shapes-3::before,
  .hero--shapes-4::before,
  .hero--shapes-5::before {
    transform: scale(0.5);
  }

  .hero::after,
  .hero--shapes-2::after,
  .hero--shapes-3::after,
  .hero--shapes-4::after,
  .hero--shapes-5::after {
    transform: scale(0.5);
  }
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.5;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background: rgba(5, 49, 70, 0.82);
  z-index: 1;
}

.hero__content {
  position: relative;
  z-index: 3;
  max-width: 720px;
}

/* Bloque de título centrado, fuera de .hero__grid — usado cuando el hero
   separa el titular (centrado, ancho completo) del resto del contenido
   (que sí va en el grid de columnas). Por ahora solo Maestría. */
.hero__title-block {
  position: relative;
  z-index: 3;
  max-width: 1180px;
  margin: 0 auto 2rem;
  text-align: center;
}

/* Tamaño reducido respecto al .hero__title genérico (clamp hasta 3.5rem) —
   con el texto largo de este titular, a tamaño completo caía en 3 líneas
   dentro de este bloque. 1.8rem/2.1rem seguía dejando "más" suelto en una
   tercera línea (una sola palabra desbordando) — se achica un poco más y se
   ensancha el bloque (1100px → 1180px) para dejar margen de sobra.
   Selector con #hero a propósito: .hero--compact .hero__title (más abajo en
   este archivo) tiene la misma especificidad de 2 clases y, por ir después
   en el orden del archivo, le seguía ganando a este override aunque este
   bloque se viera "más específico" a simple vista — de ahí que el título
   seguía saliendo grande pese al cambio anterior. */
#hero .hero__title-block .hero__title {
  font-size: clamp(1.65rem, 2.7vw, 1.9rem);
}

/* CTA del hero: menos alto (padding vertical reducido) y texto más grande —
   pedido puntual del cliente. #hero por la misma razón de especificidad de
   arriba (.btn--large ya trae su propio padding/font-size). */
#hero .hero__actions .btn {
  padding: 0.8rem 3rem;
  font-size: 1.2rem;
}

/* .hero-bridge trae su propio max-width (600px) sin margin:auto — dentro de
   este bloque centrado se quedaría pegado a la izquierda (un box con
   max-width no se centra solo por el text-align:center del padre, eso solo
   centra el texto inline dentro del box). Mismo patrón que .hero__content. */
.hero__title-block .hero-bridge {
  margin-left: auto;
  margin-right: auto;
}

/* ==========================================
   MENTORÍA CLOSER — overrides puntuales, todo detrás de #mentoria-closer-page
   (wrapper agregado en page-mentoria-closer.php) para no afectar otras
   páginas que comparten las mismas clases (.closer-module también lo usa
   Experto en Prospección, .btn--ink/.btn--large son compartidos, etc).
   ========================================== */

/* Botones: padding reducido de nuevo (tercer ajuste) — el cliente pidió
   achicar el espacio entre el texto y el borde, manteniendo el tamaño de
   fuente grande de la ronda anterior. */
#mentoria-closer-page .btn--large {
  padding: 0.55rem 1.6rem;
  font-size: 1.25rem;
}

/* Texto de contenido del hero (puente narrativo + subtítulo): fuente más
   grande todavía, y el contenedor se ensancha más de lo que crece la fuente
   para que el puente narrativo y el subtítulo ocupen menos líneas, no más. */
/* .hero--modern .hero__grid trae su propio max-width:780px (layout de una
   columna centrada) — eso, no .hero__content, era el verdadero límite de
   ancho del puente narrativo, así que también hay que ensancharlo acá. */
#mentoria-closer-page .hero .hero__grid {
  max-width: 1120px;
}

#mentoria-closer-page .hero .hero__content {
  max-width: 1120px;
}

#mentoria-closer-page .hero .hero-bridge {
  font-size: clamp(1.1rem, 2vw, 1.2rem);
  max-width: 1100px;
}

#mentoria-closer-page .hero .hero__subtitle {
  font-size: clamp(1.2rem, 2.4vw, 1.45rem);
}

/* Contenedores angostos (720px) de "Para quién es" y "El problema a fondo"
   — ya se ensancharon directamente en el inline style del markup (traían
   max-width:720px inline, que le gana a cualquier regla de acá aunque use
   #id). Sin regla correspondiente en este archivo por esa razón. */

/* Texto del cuerpo un poco más grande en esta página específicamente.
   (Los párrafos de "Para quién es" traen font-size inline en el markup —
   un estilo inline siempre le gana a esto, así que esos se ajustaron
   directamente en page-mentoria-closer.php en vez de acá.) */
#mentoria-closer-page .dolor-vendedor p,
#mentoria-closer-page .pain-point,
#mentoria-closer-page .closer-program__list li {
  font-size: 1.05rem;
}

/* .closer-module (grid de 13 módulos) no traía text-align:center, a
   diferencia de las demás cards de la página (team-card, etc.) — se agrega
   para que quede todo centrado de forma consistente. */
#mentoria-closer-page .closer-module {
  text-align: center;
}

.hero__title {
  font-size: clamp(2rem, 5.5vw, 3.5rem);
  font-weight: 800;
  color: var(--color-white);
  margin-bottom: 1.25rem;
  line-height: 1.15;
}

.hero__subtitle {
  font-size: clamp(1rem, 2vw, 1.2rem);
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.7;
  margin-bottom: 1.5rem;
  font-weight: 500;
}

/* justify-content:center faltaba acá a nivel base — solo estaba adentro de
   un media query mobile más abajo, así que en desktop este texto (display:
   flex, sin max-width) se pegaba a la izquierda del contenedor en vez de
   centrarse con el resto del hero. */
.hero__social-proof {
  font-size: 0.85rem;
  color: var(--color-orange-light);
  font-weight: 700;
  margin-bottom: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1rem;
}

.hero__disclaimer {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: 0;
}

/* .hero__note no tenía ninguna regla base (solo existía .hero--empresas
   .hero__note, específica de esa página) — en cualquier otra página que use
   la clase sin el modificador (como Experto en Prospección) el párrafo salía
   sin estilo, al tamaño de texto normal del body, con el mismo peso visual
   que el subtítulo — contribuía a la sensación de todo amontonado. */
.hero__note {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.65);
  margin-top: 1rem;
  line-height: 1.6;
}

.hero__tag {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-orange-light);
  margin-bottom: 0.75rem;
}

@media (max-width: 768px) {
  .hero {
    min-height: auto;
    padding: 5rem 0 3rem;
  }
  .hero__content { text-align: center; }
  .hero__actions { justify-content: center; }
  .hero__social-proof { justify-content: center; }
  .hero__disclaimer { text-align: center; }
  .hero__badge { padding: 0.7rem 1.5rem; }
}

/* ==========================================
   3. PROFILE CARDS
   ========================================== */
.profile-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 2rem;
}

.profile-card {
  background: var(--color-white);
  border-radius: 12px;
  padding: 2rem 1.75rem;
  box-shadow: var(--shadow-sm);
  border-top: 4px solid var(--color-orange);
  transition: var(--transition);
  cursor: pointer;
}

.profile-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}

.profile-card:nth-child(2) { border-top-color: var(--color-purple); }
.profile-card:nth-child(3) { border-top-color: var(--color-blue); }

.profile-card__icon {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--color-gray-light);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  font-size: 1.25rem;
}

.profile-card:nth-child(1) .profile-card__icon { color: var(--color-orange); }
.profile-card:nth-child(2) .profile-card__icon { color: var(--color-purple); }
.profile-card:nth-child(3) .profile-card__icon { color: var(--color-blue); }

.profile-card__title {
  font-size: 1.1rem;
  margin-bottom: 0.75rem;
}

.profile-card__text {
  font-size: 0.9rem;
  color: #555;
  line-height: 1.7;
}

.profile-card__cta {
  display: inline-block;
  margin-top: 1rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-orange);
}

.profile-card:nth-child(2) .profile-card__cta { color: var(--color-purple); }
.profile-card:nth-child(3) .profile-card__cta { color: var(--color-blue); }

/* ----- Bloque ¿Esto es para ti? (avatar único) ----- */
.for-you-section {
  border-top: 4px solid var(--color-orange);
  background: var(--color-white);
}

.for-you-block {
  max-width: 720px;
  margin: 2rem auto 0;
  text-align: center;
  background: var(--color-gray-light);
  border-radius: 16px;
  padding: 2.5rem 2rem;
}

.for-you-block__title {
  font-size: 1.35rem;
  margin-bottom: 1.25rem;
  color: var(--color-ink);
}

.for-you-block__list {
  list-style: none;
  margin: 0 0 1.5rem;
  text-align: left;
  display: grid;
  gap: 0.85rem;
}

.for-you-block__list li {
  position: relative;
  padding-left: 1.75rem;
  color: rgba(5, 49, 70, 0.85);
  line-height: 1.7;
}

.for-you-block__list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--color-blue);
  font-weight: 700;
}

.for-you-block__cta {
  font-weight: 600;
  color: var(--color-ink);
  margin-bottom: 1.5rem;
}

/* ==========================================
   4. PAIN POINTS LIST
   ========================================== */
.pain-points {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  margin: 1.5rem 0;
}

.pain-point {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  background: var(--color-white);
  border-radius: 10px;
  box-shadow: var(--shadow-sm);
  font-size: 0.925rem;
  line-height: 1.6;
}

.pain-point__icon {
  flex-shrink: 0;
  color: var(--color-orange);
  font-size: 1.1rem;
  margin-top: 2px;
}

.pain-point__highlight {
  text-align: center;
  margin-top: 2rem;
  font-size: 1.1rem;
  font-weight: 600;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 768px) {
  .pain-points { grid-template-columns: 1fr; }
}

/* ==========================================
   5. MAESTRÍA HIGHLIGHT
   ========================================== */
.maestria-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}

.maestria__tag {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-orange);
  margin-bottom: 0.75rem;
}

.maestria__title { margin-bottom: 1rem; }

/* Títulos de sección más grandes en Ventas que Transforman (excepto el
   hero, que usa .hero__title, no .maestria__title) — pedido puntual del
   cliente, scoped porque .maestria__title/.cta-final__title son
   compartidos con otras páginas que no lo pidieron. */
#ventas-transforman-page .maestria__title,
#ventas-transforman-page .cta-final__title {
  font-size: clamp(2rem, 4.8vw, 3.2rem);
}

#ventas-transforman-page .maestria__tag {
  font-size: 1.05rem;
}

.maestria__text {
  color: rgba(5, 49, 70, 0.8);
  line-height: 1.8;
  margin-bottom: 1.5rem;
}

/* Párrafo del dato de facturación en "Quiénes somos" (Home): más grande que
   el resto del texto pero por debajo del título, en negrita — pedido
   puntual del cliente para que la cifra resalte sin competir con el h2. */
.maestria__text--highlight {
  font-size: clamp(1.15rem, 2vw, 1.35rem);
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-ink);
}

.maestria__features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-bottom: 2rem;
}

.maestria__feature {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.85);
}

.maestria__feature::before {
  content: '✓';
  color: var(--color-orange);
  font-weight: 700;
}

.maestria__pilares {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 2rem;
}

.maestria__pilar {
  background: var(--color-white);
  border: 1px solid var(--color-gray-medium);
  border-top: 3px solid var(--color-blue);
  border-radius: 12px;
  padding: 1.25rem;
  text-align: center;
}

.maestria__pilar-title {
  color: var(--color-orange-deep);
  font-size: 1.05rem;
  margin-bottom: 0.5rem;
}

.maestria__pilar-text {
  color: rgba(5, 49, 70, 0.8);
  font-size: 0.85rem;
  line-height: 1.6;
}

.maestria__includes-title {
  color: var(--color-ink);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: 0.75rem;
}

.maestria__includes {
  list-style: none;
  margin: 0 0 1.5rem;
  display: grid;
  gap: 0.5rem;
}

.maestria__includes li {
  position: relative;
  padding-left: 1.5rem;
  color: rgba(5, 49, 70, 0.85);
  font-size: 0.9rem;
  line-height: 1.6;
}

.maestria__includes li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--color-blue);
  font-weight: 700;
}

.maestria__note {
  color: rgba(5, 49, 70, 0.8);
  font-size: 0.9rem;
  line-height: 1.7;
  margin-bottom: 1.25rem;
}

.maestria__cta-question {
  color: var(--color-ink);
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}

.maestria__cta-sub {
  color: rgba(5, 49, 70, 0.8);
  font-size: 0.9rem;
  margin-bottom: 1.25rem;
}

.maestria__social {
  color: var(--color-orange-deep);
  font-weight: 600;
  font-size: 0.85rem;
  margin-top: 1rem;
}

.maestria__image {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.maestria__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 900px) {
  .maestria__pilares { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .maestria-grid { grid-template-columns: 1fr; gap: 2rem; }
  .maestria__image { order: -1; }
  .maestria__features { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .maestria__pilares { grid-template-columns: 1fr; }
}

/* ==========================================
   6. COURSE CARDS
   ========================================== */
.courses-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.75rem;
  margin-top: 2rem;
}

/* Cada curso tiene su propio par de acentos (borde/icono vs. botón) para que
   ninguna card repita el mismo color en sus distintos elementos — instrucción
   explícita del cliente. Los 4 cursos individuales usan 4 combinaciones sin
   repetir tono dentro de la paleta de marca (nunca verde/morado fuera de
   paleta, que es lo que traía el código viejo). */
.course-card {
  --course-accent: var(--color-orange);
  --course-accent-btn: var(--color-blue);
  background: var(--color-white);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
  border: 1px solid var(--color-gray-medium);
  border-top: 5px solid var(--course-accent);
  display: flex;
  flex-direction: column;
}

.course-card:hover {
  box-shadow: 0 14px 32px rgba(5, 49, 70, 0.14);
  transform: translateY(-4px);
}

.course-card--dinero {
  --course-accent: var(--color-orange);
  --course-accent-btn: var(--color-blue);
}

.course-card--mentalidad {
  --course-accent: var(--color-blue);
  --course-accent-btn: var(--color-orange-light);
}

.course-card--chat {
  --course-accent: var(--color-orange-light);
  --course-accent-btn: var(--color-orange);
}

.course-card--seguimiento {
  --course-accent: color-mix(in srgb, var(--color-ink) 20%, var(--color-orange) 80%);
  --course-accent-btn: var(--color-blue);
}

.course-card__header {
  padding: 1.5rem 1.5rem 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.course-card__icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
  background: color-mix(in srgb, var(--course-accent) 15%, transparent);
  color: var(--course-accent);
}

.course-card__icon svg {
  width: 24px;
  height: 24px;
}

.course-card__title { font-size: 1.1rem; margin-bottom: 0; color: var(--color-ink); }
.course-card__body { padding: 0 1.5rem 1.5rem; display: flex; flex-direction: column; flex: 1; }

/* Precio: aparte del meta de "curso grabado · acceso inmediato", grande y en
   el acento de la card, para que no quede enterrado en una línea gris chica. */
.course-card__price {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--course-accent);
  margin-bottom: 0.15rem;
}

.course-card__subtitle {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-gray);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 0.75rem;
}

.course-card__desc {
  font-size: 0.88rem;
  color: var(--color-gray);
  line-height: 1.7;
  margin-bottom: 1rem;
}

/* El CTA de cada card era un link de texto chico y del mismo naranja en las
   5 cards — pasa a ser un botón sólido real, en el color del acento del
   botón (distinto al del borde/ícono de esa misma card) para que resalte
   como llamado a la acción, no como texto suelto. */
.course-card__btn {
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 1.4rem;
  border-radius: 50px;
  background: var(--course-accent-btn);
  color: var(--color-ink);
  font-family: var(--font-heading);
  font-size: 0.88rem;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(5, 49, 70, 0.18);
  transition: var(--transition);
}

.course-card__btn:hover {
  gap: 0.6rem;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(5, 49, 70, 0.24);
}

.course-card--bundle {
  --course-accent: color-mix(in srgb, var(--color-ink) 20%, var(--color-orange) 80%);
  --course-accent-btn: var(--color-ink);
  position: relative;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  padding: 2.25rem 2rem 2rem;
  border-color: var(--course-accent);
  border-width: 2px;
}

.course-card--bundle .course-card__header { padding: 0; }
.course-card--bundle .course-card__body { padding: 0; }
.course-card--bundle .course-card__title { font-size: 1.3rem; }

/* Ribbon "más completo" — distingue al bundle del resto de un vistazo. */
.course-card--bundle::after {
  content: 'EL MÁS COMPLETO';
  position: absolute;
  top: 1.1rem;
  right: -2.6rem;
  transform: rotate(40deg);
  background: var(--course-accent);
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 0.3rem 3rem;
}

.bundle-message {
  grid-column: 1 / -1;
  text-align: center;
  margin-top: 2rem;
  padding: 1.5rem;
  background: rgba(255, 149, 50, 0.08);
  border-radius: 12px;
  border: 1px dashed var(--color-orange);
}

.bundle-message p { font-size: 0.95rem; margin-bottom: 1rem; }

@media (max-width: 768px) {
  .courses-grid { grid-template-columns: 1fr; }
  .course-card--bundle { grid-template-columns: 1fr; }
}

/* ==========================================
   7. TEAM CARDS
   ========================================== */
.team-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 360px));
  justify-content: center;
  gap: 2rem;
  margin-top: 2rem;
}

.team-card { text-align: center; }

.team-card__photo {
  width: 140px; height: 140px;
  border-radius: 50%;
  margin: 0 auto 1rem;
  overflow: hidden;
  background: var(--color-gray-light);
  border: 3px solid var(--color-gray-medium);
}

.team-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.team-card__name { font-size: 1.15rem; margin-bottom: 0.25rem; }
.team-card:nth-child(1) .team-card__name { color: var(--color-orange); }
.team-card:nth-child(2) .team-card__name { color: var(--color-purple); }
.team-card:nth-child(3) .team-card__name { color: var(--color-blue); }

.team-card__role {
  font-size: 0.85rem;
  color: var(--color-gray);
  font-weight: 600;
  margin-bottom: 0.75rem;
}

.team-card__bio {
  font-size: 0.88rem;
  color: var(--color-gray);
  line-height: 1.7;
}

.team-card__quote {
  font-style: italic;
  font-size: 0.85rem;
  color: var(--color-gray);
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--color-gray-medium);
}

@media (max-width: 768px) {
  .team-grid { grid-template-columns: 1fr; gap: 3rem; }
}

/* ==========================================
   8. TESTIMONIALS
   ========================================== */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-top: 2rem;
}

.testimonial-card {
  background: var(--color-white);
  border-radius: 12px;
  padding: 1.75rem;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-gray-medium);
}

.testimonial-card__header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.testimonial-card__avatar {
  width: 52px; height: 52px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--color-gray-medium);
}

.testimonial-card__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.testimonial-card__name { font-size: 0.95rem; margin-bottom: 0.125rem; }
.testimonial-card__meta { font-size: 0.8rem; color: var(--color-gray); }

.testimonial-card__text {
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--color-ink);
  font-style: italic;
}

.testimonial-card__text::before {
  content: '\201C';
  color: var(--color-orange);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 0;
}

.testimonial-card__text::after {
  content: '\201D';
  color: var(--color-orange);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 0;
}

.video-carousel {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  padding: 1rem 0 2rem;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.video-carousel::-webkit-scrollbar { height: 6px; }
.video-carousel::-webkit-scrollbar-track { background: var(--color-gray-medium); border-radius: 3px; }
.video-carousel::-webkit-scrollbar-thumb { background: var(--color-orange); border-radius: 3px; }

.video-card {
  flex: 0 0 280px;
  scroll-snap-align: start;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  background: var(--color-white);
}

.video-card__thumb {
  width: 100%;
  height: 160px;
  background: var(--color-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  font-size: 3rem;
  cursor: pointer;
  position: relative;
}

.video-card__thumb::after {
  content: '\25B6';
  opacity: 0.8;
  transition: var(--transition);
}

.video-card__thumb:hover::after {
  opacity: 1;
  transform: scale(1.1);
}

.video-card__info { padding: 1rem; }
.video-card__name { font-size: 0.9rem; font-weight: 600; margin-bottom: 0.25rem; }
.video-card__result { font-size: 0.8rem; color: var(--color-orange); font-weight: 600; }

@media (max-width: 768px) {
  .testimonials-grid { grid-template-columns: 1fr; }
  .video-card { flex: 0 0 240px; }
}

/* ==========================================
   9. B2B SECTION
   ========================================== */
.b2b-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin: 2rem 0;
}

.b2b-card {
  background: var(--color-white);
  border: 1px solid var(--color-gray-medium);
  border-top: 3px solid var(--color-orange);
  border-radius: 12px;
  padding: 2rem;
  transition: var(--transition);
}

.b2b-card:hover {
  background: var(--color-white);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(5, 49, 70, 0.12);
}

.b2b-card__title {
  color: var(--color-orange-deep);
  font-size: 1.15rem;
  margin-bottom: 0.75rem;
}

.b2b-card__text {
  color: rgba(5, 49, 70, 0.8);
  font-size: 0.9rem;
  line-height: 1.7;
}

.b2b-card__tag {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-blue);
  margin-bottom: 0.5rem;
}

.contact-form {
  margin-top: 2rem;
  padding: 2rem;
  background: var(--color-white);
  border-radius: 12px;
  border: 1px solid rgba(17, 150, 235, 0.2);
  box-shadow: 0 12px 30px rgba(5, 49, 70, 0.1);
}

.contact-form__title { margin-bottom: 1.5rem; color: var(--color-ink); }

.form-group { margin-bottom: 1rem; }

.form-group label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 0.375rem;
  color: rgba(5, 49, 70, 0.85);
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid rgba(5, 49, 70, 0.15);
  border-radius: 8px;
  background: var(--color-white);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 0.9rem;
  transition: var(--transition);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--color-blue);
  background: #f3fbff;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: rgba(5, 49, 70, 0.4);
}

.form-group select option { color: var(--color-ink); }

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

@media (max-width: 768px) {
  .b2b-options { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
}

.b2b-whatsapp {
  margin-top: 1.5rem;
  text-align: center;
}

/* ==========================================
   9b. B2B — NUEVAS SECCIONES (revisión 1)
   ========================================== */

/* Hero empresas (hero--modern: fondo marino, texto claro para contraste) */
.hero--empresas .hero__social {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-white);
  margin: 1.25rem 0 0.5rem;
  line-height: 1.6;
}

.hero--empresas .hero__note {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 1rem;
  line-height: 1.6;
}

/* Perfil de empresa (Sección 02) */
.b2b-profile {
  max-width: 640px;
  margin: 2.5rem auto 0;
  background: var(--color-white);
  border-radius: 16px;
  padding: 2.5rem 2rem;
  box-shadow: var(--shadow-sm);
  border-top: 4px solid var(--color-orange);
  text-align: center;
}

.b2b-profile__title {
  font-size: 1.45rem;
  margin-bottom: 1.25rem;
  color: var(--color-ink);
}

.b2b-profile__list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  text-align: left;
  display: inline-block;
}

.b2b-profile__list li {
  position: relative;
  padding-left: 2rem;
  margin-bottom: 0.875rem;
  font-size: 1.02rem;
  color: var(--color-gray);
  line-height: 1.6;
}

.b2b-profile__list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  width: 1.4rem;
  height: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-blue);
  color: var(--color-white);
  border-radius: 50%;
  font-size: 0.8rem;
  font-weight: 700;
}

.b2b-profile__cta {
  font-size: 1.08rem;
  font-weight: 600;
  color: var(--color-ink);
  margin-bottom: 1.5rem;
}

.b2b-profile__redirect {
  text-align: center;
  margin-top: 1.5rem;
  font-size: 0.97rem;
  color: var(--color-gray);
}

.b2b-profile__redirect a {
  color: var(--color-blue);
  font-weight: 600;
  text-decoration: underline;
}

/* Compromiso (Sección 03) */
.b2b-commitment {
  max-width: 720px;
  margin: 2rem auto 0;
  padding: 1.5rem 2rem;
  background: rgba(17, 150, 235, 0.06);
  border-left: 4px solid var(--color-blue);
  border-radius: 10px;
  font-size: 1.02rem;
  color: var(--color-ink);
  line-height: 1.7;
}

/* Servicio (Sección 04) */
.b2b-service {
  max-width: 720px;
  margin: 2.5rem auto 0;
  background: var(--color-white);
  border-radius: 16px;
  padding: 2.5rem;
  box-shadow: var(--shadow-sm);
  border-top: 4px solid var(--color-orange);
}

.b2b-service__title {
  font-size: 1.35rem;
  margin-bottom: 1.25rem;
  color: var(--color-ink);
}

.b2b-service__list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
}

.b2b-service__list li {
  position: relative;
  padding-left: 2rem;
  margin-bottom: 0.875rem;
  font-size: 1.02rem;
  color: var(--color-gray);
  line-height: 1.6;
}

.b2b-service__list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  width: 1.4rem;
  height: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-orange);
  color: var(--color-black);
  border-radius: 50%;
  font-size: 0.8rem;
  font-weight: 700;
}

.b2b-service__result {
  font-size: 1.08rem;
  font-weight: 600;
  color: var(--color-blue);
  margin-bottom: 0.75rem;
}

.b2b-service__note {
  font-size: 0.97rem;
  color: var(--color-gray);
  line-height: 1.6;
}

/* Proceso (Sección 05) */
.process-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-top: 2rem;
}

.process-step {
  background: var(--color-white);
  border-radius: 12px;
  padding: 1.75rem;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-gray-medium);
  border-left: 4px solid var(--color-blue);
  transition: var(--transition);
}

.process-step:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.process-step__num {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--color-orange);
  margin-bottom: 0.5rem;
}

.process-step__title {
  font-size: 1.13rem;
  margin-bottom: 0.5rem;
  color: var(--color-ink);
}

.process-step__text {
  font-size: 0.95rem;
  color: var(--color-gray);
  line-height: 1.7;
}

@media (max-width: 768px) {
  .process-grid { grid-template-columns: 1fr; }
}

/* Pricing (Sección 06) */
.b2b-pricing {
  max-width: 640px;
  margin: 2.5rem auto 0;
  background: var(--color-white);
  border-radius: 16px;
  padding: 2.5rem;
  box-shadow: var(--shadow-sm);
  border-top: 4px solid var(--color-orange);
  text-align: center;
}

.b2b-pricing__lead {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--color-ink);
  margin-bottom: 0.75rem;
}

.b2b-pricing__text {
  font-size: 1.02rem;
  color: var(--color-gray);
  line-height: 1.7;
  margin-bottom: 1.5rem;
}

.b2b-pricing__list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  text-align: left;
  display: inline-block;
}

.b2b-pricing__list li {
  position: relative;
  padding-left: 2rem;
  margin-bottom: 0.75rem;
  font-size: 0.99rem;
  color: var(--color-gray);
  line-height: 1.6;
}

.b2b-pricing__list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  width: 1.4rem;
  height: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-blue);
  color: var(--color-white);
  border-radius: 50%;
  font-size: 0.8rem;
  font-weight: 700;
}

.b2b-pricing__pending {
  font-size: 0.92rem;
  color: var(--color-orange-deep);
  background: rgba(255, 149, 50, 0.08);
  border: 1px dashed var(--color-orange);
  border-radius: 10px;
  padding: 1rem;
  margin-bottom: 1.5rem;
  text-align: left;
}

/* Stats (Sección 07) */
.b2b-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 2rem;
}

.b2b-stat {
  text-align: center;
  background: var(--color-white);
  border-radius: 12px;
  padding: 2rem 1.5rem;
  box-shadow: var(--shadow-sm);
  border-top: 4px solid var(--color-orange);
}

.b2b-stat__number {
  display: block;
  font-family: var(--font-heading);
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--color-blue);
  margin-bottom: 0.5rem;
}

.b2b-stat__label {
  font-size: 0.97rem;
  color: var(--color-gray);
  line-height: 1.6;
}

@media (max-width: 768px) {
  .b2b-stats { grid-template-columns: 1fr; }
}

/* Garantía light (Sección 08) */
.guarantee--light {
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
  background: var(--color-white);
  border-radius: 16px;
  padding: 2.5rem;
  box-shadow: var(--shadow-sm);
  border-top: 4px solid var(--color-orange);
}

.guarantee--light .guarantee__icon { font-size: 3rem; margin-bottom: 1rem; }
.guarantee--light .guarantee__title { margin-bottom: 1rem; color: var(--color-ink); }
.guarantee--light .guarantee__text {
  color: var(--color-gray);
  font-size: 0.95rem;
  line-height: 1.8;
  margin-bottom: 2rem;
}

.guarantee__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  text-align: left;
}

.guarantee__col {
  background: var(--color-gray-light);
  border-radius: 12px;
  padding: 1.5rem;
}

.guarantee__col-title {
  font-size: 1rem;
  margin-bottom: 0.75rem;
  color: var(--color-ink);
}

.guarantee__col-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.guarantee__col-list li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.625rem;
  font-size: 0.88rem;
  color: var(--color-gray);
  line-height: 1.6;
}

.guarantee__col-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--color-blue);
  font-weight: 700;
}

@media (max-width: 768px) {
  .guarantee__cols { grid-template-columns: 1fr; }
}

/* CTA final alt (Sección 10) */
.cta-final__alt {
  margin-top: 1.5rem;
  font-size: 0.9rem;
  color: var(--color-ink);
}

.cta-final__alt a {
  color: var(--color-blue);
  font-weight: 600;
  text-decoration: underline;
}

/* ==========================================
   9c. MENTORÍA CLOSER
   ========================================== */

/* Hero Closer */
.hero--closer {
  position: relative;
  overflow: hidden;
  text-align: center;
}

/* Ensanchado (760px → 1020px) — el hero se veía muy amontonado en una
   columna angosta con 6-7 elementos apilados; ahora usa más espacio a los
   lados. .hero__tag (badge "Certificación Vendemás") se quitó del markup a
   pedido del cliente, así que su regla también se retira acá. */
.hero--closer .hero__content {
  max-width: 1020px;
  margin: 0 auto;
}

/* Texto del hero acortado (pedido del cliente: "demasiado texto") y con
   fuente más grande — al ser menos palabras, el tamaño mayor no agrega
   líneas de más. */
.hero--closer .hero-bridge {
  font-size: clamp(1.2rem, 2.2vw, 1.35rem);
  max-width: 820px;
  margin-bottom: 1.25rem;
}

.hero--closer .hero__title {
  font-size: clamp(2.4rem, 5.5vw, 3.9rem);
  line-height: 1.15;
  margin-bottom: 1.25rem;
}

.hero--closer .hero__subtitle {
  font-size: clamp(1.3rem, 2.2vw, 1.5rem);
  color: rgba(255, 255, 255, 0.9);
  max-width: 780px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2.25rem;
}

.hero--closer .hero__social-proof {
  font-size: 1.1rem;
  margin-bottom: 2.25rem;
}

.hero--closer .hero__note {
  font-size: 1rem;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

/* Botones: padding reducido en toda la página, mismo pedido que en
   Mentoría Closer y Maestría. */
#experto-prospeccion-page .btn--large {
  padding: 0.55rem 1.6rem;
}

.hero--closer .hero__vsl {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 12px;
  padding: 0.75rem 1.25rem;
  margin-bottom: 2rem;
  cursor: pointer;
  transition: var(--transition);
}

.hero--closer .hero__vsl:hover {
  background: rgba(255, 255, 255, 0.2);
}

.hero--closer .hero__vsl-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--color-orange);
  color: var(--color-ink);
  font-size: 0.9rem;
}

.hero--closer .hero__vsl-label {
  font-weight: 600;
  font-size: 0.95rem;
}

/* justify-content:center faltaba acá — .hero__actions es display:flex
   (block-level), así que el text-align:center de .hero--closer no lo
   centraba (a diferencia de .hero__vsl, que es inline-flex y sí responde a
   text-align). El botón quedaba pegado a la izquierda del contenedor. */
.hero--closer .hero__actions {
  justify-content: center;
  margin-bottom: 1.5rem;
}

/* Módulos (13) */
.closer-modules {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
  margin-top: 2.5rem;
}

.closer-module {
  background: var(--color-white);
  border-radius: 12px;
  padding: 1.5rem 1.25rem;
  box-shadow: var(--shadow-sm);
  border-left: 4px solid var(--color-blue);
  transition: var(--transition);
}

.closer-module:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-left-color: var(--color-orange);
}

.closer-module__num {
  display: block;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--color-blue);
  margin-bottom: 0.5rem;
}

.closer-module__title {
  font-size: 1rem;
  color: var(--color-ink);
  margin: 0 0 0.5rem;
}

.closer-module__desc {
  font-size: 0.85rem;
  color: var(--color-gray);
  line-height: 1.6;
  margin: 0;
}

/* Bono */
.closer-bonus {
  max-width: 720px;
  margin: 2.5rem auto 0;
  background: var(--color-white);
  border-radius: 16px;
  padding: 2.5rem;
  box-shadow: var(--shadow-sm);
  border-top: 4px solid var(--color-orange);
  text-align: left;
}

.closer-bonus__icon {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.closer-bonus__title {
  font-size: 1.35rem;
  color: var(--color-ink);
  margin-bottom: 1.25rem;
}

.closer-bonus__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.closer-bonus__list li {
  position: relative;
  padding-left: 1.75rem;
  margin-bottom: 1rem;
  color: var(--color-gray);
  line-height: 1.7;
}

.closer-bonus__list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-blue);
  font-weight: 700;
}

/* Programa único (Certificación) */
.closer-program {
  max-width: 760px;
  margin: 2.5rem auto 0;
  background: var(--color-white);
  border-radius: 16px;
  padding: 2.5rem;
  box-shadow: var(--shadow-sm);
  border-top: 4px solid var(--color-blue);
  text-align: left;
}

.closer-program__title {
  font-size: 1.2rem;
  color: var(--color-ink);
  margin: 1.5rem 0 1rem;
}

.closer-program__title:first-child {
  margin-top: 0;
}

.closer-program__list {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
}

.closer-program__list li {
  position: relative;
  padding-left: 1.75rem;
  margin-bottom: 0.75rem;
  color: var(--color-gray);
  line-height: 1.7;
}

.closer-program__list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-orange);
  font-weight: 700;
}

.closer-program__cta {
  margin-top: 2rem;
  text-align: center;
}

.closer-program__note {
  margin-top: 1rem;
  font-size: 0.9rem;
  color: var(--color-gray);
  line-height: 1.6;
}

/* ¿Por qué prospección? (Experto en Prospección) */
.prospeccion-why__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem;
  margin-top: 2.5rem;
}

.prospeccion-why__item {
  background: var(--color-white);
  border-radius: 14px;
  padding: 1.75rem 1.5rem;
  box-shadow: var(--shadow-sm);
  border-top: 4px solid var(--color-orange);
  transition: var(--transition);
}

.prospeccion-why__item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.prospeccion-why__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--color-blue);
  color: var(--color-white);
  font-weight: 800;
  font-size: 1rem;
  margin-bottom: 1rem;
}

.prospeccion-why__item p {
  margin: 0;
  color: var(--color-gray);
  line-height: 1.7;
  font-size: 0.95rem;
}

/* ==========================================
   10. BLOG CARDS
   ========================================== */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 2rem;
}

.blog-card {
  background: var(--color-white);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-gray-medium);
  transition: var(--transition);
}

.blog-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}

.blog-card__image {
  width: 100%;
  height: 180px;
  background: var(--color-gray-light);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gray);
  font-size: 0.85rem;
}

.blog-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blog-card__body { padding: 1.25rem; }

.blog-card__title {
  font-size: 1rem;
  margin-bottom: 0.5rem;
}

.blog-card__excerpt {
  font-size: 0.85rem;
  color: #555;
  line-height: 1.6;
  margin-bottom: 0.75rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-card__btn {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-orange);
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.blog-card__btn:hover { gap: 0.5rem; }

.subscription {
  margin-top: 3rem;
  padding: 2.5rem;
  background: var(--color-blue);
  border-radius: 16px;
  text-align: center;
}

.subscription__title {
  color: var(--color-white);
  margin-bottom: 0.5rem;
}

.subscription__text {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.9rem;
  margin-bottom: 1.5rem;
}

.subscription__form {
  display: flex;
  gap: 0.75rem;
  max-width: 500px;
  margin: 0 auto;
}

.subscription__form input {
  flex: 1;
  padding: 0.875rem 1.25rem;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50px;
  background: rgba(255, 255, 255, 0.15);
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: 0.9rem;
}

.subscription__form input:focus {
  outline: none;
  border-color: var(--color-orange);
}

.subscription__form input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.subscription__disclaimer {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.4);
  margin-top: 0.75rem;
}

@media (max-width: 768px) {
  .blog-grid { grid-template-columns: 1fr; }
  .subscription__form { flex-direction: column; }
}

/* ==========================================
   11. CTA FINAL
   ========================================== */
.cta-final {
  text-align: center;
  padding: var(--section-padding) 0;
  background: transparent;
}

/* Enlace de texto plano con flecha (sin chrome de botón) — pedido puntual
   del cliente para reemplazar los .btn--primary de "Quiénes somos" y "Tu
   producto es bueno..." en el Home. rgb(17,150,235) del ejemplo = azul de
   marca. */
.text-link-arrow {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--color-blue);
  text-decoration: none;
  transition: var(--transition);
}

.text-link-arrow:hover {
  color: color-mix(in srgb, var(--color-ink) 20%, var(--color-blue) 80%);
  text-decoration: underline;
}

.cta-final__title {
  max-width: 700px;
  margin: 0 auto 1rem;
  color: var(--color-ink);
}

.cta-final__text {
  max-width: 560px;
  margin: 0 auto 2rem;
  color: rgba(5, 49, 70, 0.8);
  font-size: 1.05rem;
  font-weight: 500;
}

/* Botones del CTA final del Home: pill translúcida (fondo blanco 8%,
   borde blanco 25%) para los 4 links normales, y una sólida naranja para
   el destacado — replica exacta del diseño de referencia del cliente. */
.cta-final__buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.875rem;
  margin-bottom: 1.25rem;
}

.cta-final__btn {
  display: inline-flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: var(--color-white);
  padding: 0.75rem 1.375rem;
  border-radius: 100px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.875rem;
  transition: var(--transition);
}

.cta-final__btn:hover {
  background: rgba(255, 255, 255, 0.16);
  transform: translateY(-2px);
}

.cta-final__btn--highlight {
  background: var(--color-orange);
  border-color: var(--color-orange);
  font-weight: 700;
}

.cta-final__btn--highlight:hover {
  background: color-mix(in srgb, var(--color-ink) 20%, var(--color-orange) 80%);
  border-color: color-mix(in srgb, var(--color-ink) 20%, var(--color-orange) 80%);
}

/* Botón compacto: mismo estilo que .btn pero menos alto y con menos aire
   entre el borde y el texto. Selector .btn.btn--compact (en vez de solo
   .btn--compact) a propósito: components.css trae un ".btn { min-height:
   44px }" más abajo en el archivo que, a igual especificidad, ganaría por
   orden de cascada y anularía este min-height más chico. */
.btn.btn--compact {
  padding: 0.45rem 1.1rem;
  min-height: 34px;
  font-size: 0.85rem;
}

/* ==========================================
   12. FOOTER
   (estilos reales en .footer--modern, base.css — color sólido). Este
   bloque tenía un sistema de footer previo y ya abandonado (.footer__grid,
   .footer__nav, .footer__contact-item — ninguno usado en footer.php), pero
   varias de sus clases coincidían de nombre con las del footer activo
   (.footer__logo, .footer__tagline, .footer__col-title, .footer__social,
   .footer__bottom, .footer__legal) y, por cargar components.css después de
   base.css, le ganaban la cascada en igualdad de especificidad — se quitó
   por completo para que los estilos de base.css sean los que de verdad
   se apliquen. */

/* ==========================================
   13. LOGO CAROUSEL
   ========================================== */
.logo-carousel {
  overflow: hidden;
  padding: 1.5rem 0;
  margin-top: 2rem;
}

.logo-carousel__track {
  display: flex;
  gap: 3rem;
  animation: scrollLogos 25s linear infinite;
  width: max-content;
}

/* ----- Guarantee (sobre fondo azul vibrante) ----- */
.guarantee {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.guarantee__icon {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.guarantee__title {
  color: var(--color-white);
  margin-bottom: 1rem;
}

.guarantee__text {
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.8;
  font-size: 1rem;
}

.logo-carousel__item {
  flex-shrink: 0;
  height: 40px;
  opacity: 0.5;
  filter: grayscale(100%);
  transition: var(--transition);
}

.logo-carousel__item:hover {
  opacity: 1;
  filter: grayscale(0%);
}

@keyframes scrollLogos {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ==========================================
   14. ANIMATIONS
   ========================================== */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================
   15. WHATSAPP FLOAT
   ========================================== */
.whatsapp-float {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 999;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25D366;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  font-size: 1.75rem;
  box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4);
  transition: var(--transition);
}

.whatsapp-float:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.5);
}

/* ==========================================
   15b. CONTACT PAGE COMPONENTS
   ========================================== */
/* Botones de esta página con padding más chico — pedido puntual del
   cliente para que la página se vea más compacta. */
#contacto-page .btn {
  padding: 0.5rem 1.4rem;
}

.contact-form-wrapper {
  background: var(--color-gray-light);
  border-radius: 16px;
  padding: 1.75rem;
}

.contact-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 1rem;
}

.contact-form__group {
  margin-bottom: 1rem;
}

.contact-form__label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 0.375rem;
  color: var(--color-black);
}

.contact-form__input,
.contact-form__textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--color-gray-medium);
  border-radius: 8px;
  background: var(--color-white);
  color: var(--color-black);
  font-family: var(--font-body);
  font-size: 0.9rem;
  transition: var(--transition);
}

.contact-form__input:focus,
.contact-form__textarea:focus {
  outline: none;
  border-color: var(--color-orange);
  box-shadow: 0 0 0 3px rgba(255, 149, 50, 0.15);
}

.contact-form__input::placeholder,
.contact-form__textarea::placeholder {
  color: var(--color-gray);
}

.contact-form__textarea {
  resize: vertical;
  min-height: 120px;
}

.contact-alt-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-top: 1.5rem;
}

.contact-alt-card {
  background: var(--color-white);
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-gray-medium);
  border-top: 4px solid var(--color-blue);
  text-align: center;
}

.contact-alt-card--orange { border-top-color: var(--color-orange); }
.contact-alt-card--gold { border-top-color: var(--color-orange-light); }

.contact-alt-card__icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 0.75rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--color-blue) 15%, transparent);
  color: var(--color-blue);
}

.contact-alt-card--orange .contact-alt-card__icon {
  background: color-mix(in srgb, var(--color-orange) 15%, transparent);
  color: var(--color-orange);
}

.contact-alt-card--gold .contact-alt-card__icon {
  background: color-mix(in srgb, var(--color-orange-light) 20%, transparent);
  color: var(--color-orange-light);
}

.contact-alt-card__icon svg {
  width: 24px;
  height: 24px;
}

.contact-alt-card h3 {
  font-size: 1.1rem;
  margin-bottom: 0.4rem;
}

.contact-alt-card p {
  font-size: 0.88rem;
  color: var(--color-gray);
  margin-bottom: 0.85rem;
}

.social-links {
  display: flex;
  justify-content: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-orange-light) 20%, transparent);
  color: var(--color-orange-light);
  transition: var(--transition);
}

.social-links a:hover {
  background: var(--color-orange-light);
  color: var(--color-white);
  transform: translateY(-2px);
}

@media (max-width: 768px) {
  .contact-alt-grid { grid-template-columns: 1fr; }
  .contact-form-wrapper { padding: 1.5rem; }
  .contact-form__row { grid-template-columns: 1fr; }
}

@media (max-width: 576px) {
  .contact-form-wrapper { padding: 1.25rem; }
  .contact-form__input,
  .contact-form__textarea {
    font-size: 16px; /* Prevents iOS zoom */
  }
  .contact-alt-card { padding: 1.25rem; }
}

/* ==========================================
   15c. BLOG CARD DATE
   ========================================== */
.blog-card__date {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-gray);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 0.375rem;
}

/* ==========================================
   15d. OPTIONS GRID (Para Empresas)
   ========================================== */
.options-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 2rem;
}

.option-card {
  background: var(--color-white);
  border-radius: 12px;
  padding: 2rem;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-gray-medium);
  transition: var(--transition);
}

.option-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}

.option-card__title {
  font-size: 1.1rem;
  margin-bottom: 0.75rem;
  color: var(--color-dark-blue);
}

.option-card__desc {
  font-size: 0.9rem;
  color: var(--color-gray);
  line-height: 1.7;
  margin-bottom: 0;
}

.option-card__tag {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-orange);
  margin-top: 1rem;
  padding: 0.25rem 0.75rem;
  background: rgba(255, 149, 50, 0.1);
  border-radius: 50px;
}

@media (max-width: 992px) {
  .options-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .options-grid { grid-template-columns: 1fr; }
  .option-card { padding: 1.5rem; }
}

@media (max-width: 576px) {
  .option-card { padding: 1.25rem; }
  .option-card__title { font-size: 1rem; }
  .option-card__desc { font-size: 0.85rem; }
}

/* ==========================================
   15e. BENEFITS GRID (shared by Maestría & individual courses)
   ========================================== */
.benefits-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 2rem;
}

.benefit-card {
  background: var(--color-white);
  border-radius: 12px;
  padding: 1.75rem;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-gray-medium);
  transition: var(--transition);
  text-align: center;
}

.benefit-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}

.benefit-card__icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin: 0 auto 1rem;
  background: rgba(255, 149, 50, 0.1);
  color: var(--color-orange);
}

.benefit-card__icon svg {
  width: 26px;
  height: 26px;
}

.benefit-card:nth-child(2) .benefit-card__icon { background: color-mix(in srgb, var(--color-orange) 10%, transparent); color: var(--color-orange); }
.benefit-card:nth-child(3) .benefit-card__icon { background: rgba(17, 150, 235, 0.1); color: var(--color-blue); }
.benefit-card:nth-child(4) .benefit-card__icon { background: rgba(144, 203, 229, 0.18); color: var(--color-blue); }
.benefit-card:nth-child(5) .benefit-card__icon { background: color-mix(in srgb, var(--color-orange) 12%, transparent); color: var(--color-orange); }
.benefit-card:nth-child(6) .benefit-card__icon { background: rgba(255, 190, 26, 0.12); color: var(--color-orange-light); }

.benefit-card__title { font-size: 1rem; margin-bottom: 0.5rem; }
.benefit-card__text { font-size: 0.85rem; color: var(--color-gray); line-height: 1.7; }

@media (max-width: 992px) {
  .benefits-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .benefits-grid { grid-template-columns: 1fr; }
  .benefit-card { padding: 1.25rem; }
}
@media (max-width: 576px) {
  .benefit-card__icon { width: 44px; height: 44px; font-size: 1.25rem; }
  .benefit-card__text { font-size: 0.8rem; }
}

/* ==========================================
   16. RESPONSIVE FIXES
   ========================================== */

/* Fix: .btn min-height for touch targets */
.btn {
  min-height: 44px;
}

/* Fix: .profile-cards responsive — was stuck at 3-col on mobile */
@media (max-width: 992px) {
  .profile-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 576px) {
  .profile-cards {
    grid-template-columns: 1fr;
  }
}

/* Fix: Footer social links tap target (36px → 44px) */
.footer__social a {
  width: 44px;
  height: 44px;
}

/* Fix: Footer nav links tap target */
.footer__nav a {
  padding: 0.5rem 0;
}

/* Fix: Grids 3-col → 2-col tablet step */
@media (max-width: 992px) {
  .courses-grid,
  .team-grid,
  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Fix: CTAs inline min tap target */
.profile-card__cta,
.blog-card__btn,
.curso-card__btn {
  padding: 0.5rem 0;
  display: inline-flex;
  align-items: center;
}

/* Fix: Pricing table collapse on very small screens */
@media (max-width: 480px) {
  .pricing-table__row,
  .pricing-table__total {
    grid-template-columns: 1fr;
  }
}

/* ==========================================
   14. PODCAST SECTION
   ========================================== */
.podcast-section {
  background: var(--color-orange);
}

.podcast-card {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  background: var(--color-white);
  border-radius: 20px;
  padding: 3rem 2.5rem;
  box-shadow: var(--shadow-lg);
}

.podcast-card__icon {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.podcast-card__title {
  color: var(--color-ink);
  margin-bottom: 1rem;
}

.podcast-card__text {
  color: rgba(5, 49, 70, 0.8);
  line-height: 1.7;
  margin-bottom: 1.75rem;
}

.podcast-card__buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* Fix: Fixed-size photos scale on mobile */
@media (max-width: 576px) {
  .socio-card__photo {
    width: 120px;
    height: 120px;
  }
  .team-card__photo {
    width: 110px;
    height: 110px;
  }
  .video-card {
    flex: 0 0 85vw;
  }
}

/* ==========================================
   15. FAQ ACCORDION (componente reutilizable)
   ========================================== */
.faq-list { max-width: 720px; margin: 2rem auto 0; }

.faq-item {
  border: 1px solid var(--color-gray-medium);
  border-radius: 10px;
  margin-bottom: 0.75rem;
  overflow: hidden;
  transition: var(--transition);
}

.faq-item:hover { border-color: var(--color-orange); }

.faq-item__question {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.125rem 1.25rem;
  background: var(--color-white);
  border: none;
  cursor: pointer;
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-black);
  text-align: left;
  transition: var(--transition);
  min-height: 44px; /* Touch target */
}

.faq-item__question:hover { color: var(--color-orange); }

.faq-item__icon {
  flex-shrink: 0;
  font-size: 1.25rem;
  transition: var(--transition);
  color: var(--color-orange);
}

.faq-item.active .faq-item__icon { transform: rotate(45deg); }

.faq-item__answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
  padding: 0 1.25rem;
  font-size: 0.9rem;
  color: #555;
  line-height: 1.7;
}

.faq-item.active .faq-item__answer {
  max-height: 300px;
  padding: 0 1.25rem 1.25rem;
}

@media (max-width: 576px) {
  .faq-item__question { font-size: 0.9rem; padding: 1rem; }
  .faq-item__answer { font-size: 0.85rem; }
}

/* Fix: Section padding reduction on mobile */
@media (max-width: 768px) {
  .b2b-card { padding: 1.5rem; }
  .contact-form { padding: 1.25rem; }
  .subscription { padding: 1.5rem; }
}
@media (max-width: 576px) {
  .socio-card__header { padding: 1.5rem 1.25rem 1rem; }
  .socio-card__body { padding: 0 1.25rem 1.5rem; }
}

/* Fix: Header nav tap targets on mobile */
@media (max-width: 992px) {
  .header__nav a {
    padding: 1rem var(--container-padding);
  }
  .header__nav .header__cta {
    padding: 0.75rem 1.5rem;
  }
}

/* --- Additional Responsive Fixes --- */

/* Fix: Header nav scrollable on mobile when content overflows */
@media (max-width: 992px) {
  .header__nav {
    max-height: calc(100vh - 70px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Fix: Hero overflow prevention */
.hero {
  overflow-x: hidden;
}

/* Fix: Logo carousel overflow on mobile */
.logo-carousel {
  overflow-x: hidden;
}

.logo-carousel__track {
  will-change: transform;
}

/* Fix: Video carousel touch scroll on mobile */
.video-carousel {
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

/* Fix: WhatsApp float doesn't cover footer on mobile */
@media (max-width: 576px) {
  .whatsapp-float {
    bottom: 1rem;
    right: 1rem;
    width: 48px;
    height: 48px;
    font-size: 1.5rem;
  }

  .footer {
    padding-bottom: 4rem;
  }
}

/* Fix: Testimonial cards equal height on mobile */
@media (max-width: 768px) {
  .testimonial-card {
    display: flex;
    flex-direction: column;
  }
  .testimonial-card__text {
    flex: 1;
  }
}

/* Fix: Course card bundle responsive padding */
@media (max-width: 768px) {
  .course-card--bundle {
    padding: 1.25rem;
  }
}

/* Fix: B2B card text readability on small screens */
@media (max-width: 576px) {
  .b2b-card__title {
    font-size: 1.05rem;
  }
  .b2b-card__text {
    font-size: 0.85rem;
  }
}

/* Fix: Contact form inputs on mobile */
@media (max-width: 576px) {
  .form-group input,
  .form-group select,
  .form-group textarea {
    font-size: 16px; /* Prevents iOS zoom on focus */
  }
}

/* Fix: Subscription form input iOS zoom prevention */
@media (max-width: 576px) {
  .subscription__form input {
    font-size: 16px;
  }
}

/* Fix: Section subtitle max-width on mobile */
@media (max-width: 576px) {
  .section-subtitle {
    max-width: 100%;
  }
}

/* Fix: Pain point highlight on mobile */
@media (max-width: 576px) {
  .pain-point__highlight {
    font-size: 1rem;
    padding: 0 0.5rem;
  }
}

/* Fix: Maestria features grid on very small screens */
@media (max-width: 480px) {
  .maestria__features {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
}

/* Fix: Hero actions buttons stacking on very small screens */
@media (max-width: 480px) {
  .hero__actions {
    gap: 0.75rem;
  }
  .hero__actions .btn {
    max-width: 100%;
  }
}

/* Fix: Footer bottom legal links on mobile */
@media (max-width: 576px) {
  .footer__legal {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1rem;
  }
}

/* Fix: Prevent horizontal overflow from grid items */
.grid-2,
.grid-3,
.grid-4 {
  min-width: 0;
}

.grid-2 > *,
.grid-3 > *,
.grid-4 > * {
  min-width: 0;
}

/* ==========================================
   14. V2 — SCROLL ANIMATIONS
   ========================================== */
.will-animate {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.will-animate.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================
   15. V2 — HERO NARRATIVE (Home)
   ========================================== */
.hero--narrative {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 7rem 1.25rem 3rem;
  position: relative;
  overflow: hidden;
}

.hero--narrative .hero__content {
  max-width: 760px;
  margin: 0 auto;
}

.hero--narrative .hero__text {
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  line-height: 1.4;
  font-weight: 700;
  color: var(--color-ink);
  margin-bottom: 2rem;
}

.hero--narrative .hero__text-em {
  color: var(--color-orange-deep);
}

/* ==========================================
   16. V2 — SCROLL INDICATOR
   ========================================== */
.scroll-indicator {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-blue);
  opacity: 0.6;
  animation: bounce 2s infinite;
  cursor: pointer;
  text-decoration: none;
  border: none;
  background: none;
}

.scroll-indicator:hover,
.scroll-indicator:focus-visible {
  opacity: 1;
}

.hero--modern .scroll-indicator {
  color: var(--color-white);
  opacity: 0.75;
}

.scroll-indicator span {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.scroll-indicator::after {
  content: '↓';
  font-size: 1.1rem;
  line-height: 1;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); }
  40% { transform: translateX(-50%) translateY(-12px); }
  60% { transform: translateX(-50%) translateY(-6px); }
}

/* Aterrizaje del anchor #despues-hero (botón "Sigue bajando" del hero) por
   debajo del header fijo, no tapado detrás de él. */
#despues-hero {
  scroll-margin-top: 90px;
}

/* ==========================================
   17. V2 — SUBSCRIBE BANNER
   ========================================== */
/* Texto oscuro (--color-ink) sobre el naranja, no blanco — blanco sobre este
   naranja apenas se lee (~2:1 de contraste); ink sobre el mismo naranja da
   ~6.8:1, de sobra legible sin perder el fondo vibrante. */
.subscribe-banner {
  padding: 1.5rem 0;
  background: var(--color-orange);
  color: var(--color-white);
}

.subscribe-banner--blue {
  background: var(--color-blue);
}

.subscribe-banner__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  text-align: center;
}

.subscribe-banner__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  max-width: none;
  margin: 0;
}

.subscribe-banner__title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(0.95rem, 2vw, 1.1rem);
  color: var(--color-white);
}

.subscribe-banner__subtitle {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.9);
  white-space: nowrap;
}

.subscribe-banner__form {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.subscribe-banner__form input {
  padding: 0.625rem 1.25rem;
  border: 1px solid transparent;
  border-radius: 50px;
  background: var(--color-white);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 0.875rem;
  min-width: 220px;
}

.subscribe-banner__form input::placeholder {
  color: color-mix(in srgb, var(--color-ink) 50%, transparent);
}

.subscribe-banner__form input:focus {
  outline: none;
  border-color: var(--color-ink);
}

@media (max-width: 768px) {
  .subscribe-banner__inner {
    flex-direction: column;
    text-align: center;
  }
  .subscribe-banner__subtitle {
    white-space: normal;
  }
  .subscribe-banner__form input {
    min-width: 0;
    flex: 1;
  }
}

/* ==========================================
   18. V2 — DOLOR VENDEDOR (texto narrativo)
   ========================================== */
.dolor-vendedor {
  max-width: 720px;
  margin: 0 auto;
  position: relative;
  padding-left: 2.25rem;
}

.dolor-vendedor::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--color-blue-light);
  opacity: 0.4;
}

.dolor-vendedor p {
  position: relative;
  font-size: clamp(1.15rem, 2.2vw, 1.35rem);
  line-height: 1.8;
  margin-bottom: 2.25rem;
  color: var(--color-ink);
}

.dolor-vendedor p::before {
  content: '';
  position: absolute;
  left: -2.25rem;
  top: 0.5rem;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-blue-light);
  box-shadow: 0 0 0 5px var(--color-paper);
}

.dolor-vendedor p:nth-child(2)::before { background: var(--color-blue); }
.dolor-vendedor p:nth-child(3)::before { background: var(--color-orange-light); }
.dolor-vendedor p:nth-child(n+4)::before { background: var(--color-orange); }

.dolor-vendedor p:last-child {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.4rem, 3vw, 1.85rem);
  line-height: 1.45;
  color: var(--color-orange-deep);
  background: var(--color-white);
  border-radius: 20px;
  padding: 1.75rem;
  box-shadow: var(--shadow-md);
  margin-top: 0.5rem;
}

.dolor-vendedor p:last-child::before {
  background: color-mix(in srgb, var(--color-ink) 20%, var(--color-orange) 80%);
}

/* Home ("El dolor del vendedor", #dolor): texto más chico, interlineado más
   apretado y columna más ancha que el resto de páginas que reusan
   .dolor-vendedor — pedido puntual del cliente para compactar esta sección
   y reducir el scroll. */
#dolor .dolor-vendedor {
  max-width: 960px;
}

#dolor .dolor-vendedor p {
  font-size: clamp(0.95rem, 1.5vw, 1.05rem);
  line-height: 1.55;
  margin-bottom: 1.1rem;
}

#dolor .dolor-vendedor p:last-child {
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  line-height: 1.4;
  padding: 1.25rem;
}

@media (max-width: 576px) {
  .dolor-vendedor {
    padding-left: 1.75rem;
  }

  .dolor-vendedor p::before {
    left: -1.75rem;
  }
}

/* ==========================================
   19. V2 — CAMINOS / TARJETAS
   ========================================== */
/* Contenedor más ancho que el .container estándar (1200px) — solo para esta
   sección, así las 5 cards de "Elige por dónde empezar" quedan visiblemente
   más anchas sin ensanchar el resto del sitio. Un gap más angosto por sí
   solo (probado antes) solo ganaba ~5px por card, imperceptible; esto da
   ~40px más por card, que sí se nota. */
.container--wide {
  max-width: 1400px;
}

.caminos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.25rem;
  margin-top: 2.5rem;
}

/* Los 5 caminos van en una sola línea en desktop — instrucción explícita
   del cliente. Por debajo de ~993px no entran en una fila legible, así que
   se mantiene el auto-fit (2-3 por fila) hasta el breakpoint de 768px que
   ya los apila en una columna. */
@media (min-width: 993px) {
  .caminos-grid {
    grid-template-columns: repeat(5, 1fr);
    gap: 0.9rem;
  }
}

.camino-card {
  background: var(--color-white);
  border-radius: 16px;
  padding: 1.75rem 1.25rem;
  box-shadow: var(--shadow-md);
  text-align: left;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.camino-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--color-orange);
}

.camino-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 40px rgba(5, 49, 70, 0.15);
}

/* Reemplaza el ícono circular chico: espacio reservado para una imagen real
   por card (pendiente de asset), pensado para ocupar al menos el 30% del
   alto total de la card — de ahí la altura fija generosa (el resto del
   contenido: título + texto + cta + padding no llega a duplicarla).
   Márgenes negativos = el mismo padding de .camino-card en negativo, para
   que la imagen llegue a los bordes de la card en vez de quedar con
   padding alrededor. .camino-card ya tiene overflow:hidden + border-radius,
   así que recorta la imagen a las esquinas redondeadas automáticamente. */
.camino-card__image {
  width: calc(100% + 2.5rem);
  height: 140px;
  margin: -1.75rem -1.25rem 1rem;
  background: var(--color-blue-pale);
}

.camino-card:nth-child(2) .camino-card__image {
  background: rgba(255, 149, 50, 0.12);
}

.camino-card:nth-child(3) .camino-card__image {
  background: color-mix(in srgb, var(--color-orange) 12%, transparent);
}

.camino-card--empresas .camino-card__image {
  background: rgba(255, 255, 255, 0.12);
}

.camino-card__title {
  font-size: 1.05rem;
  margin-bottom: 0.5rem;
}

.camino-card__text {
  font-size: 0.85rem;
  color: var(--color-gray);
  line-height: 1.6;
  margin-bottom: 1.25rem;
  text-align: left;
}

/* Texto-enlace con flecha en vez de botón — mismo lenguaje que "Conócenos
   mejor →" / "Ver curso completo →" en el resto del sitio (flecha de texto,
   no emoji). */
.camino-card__cta {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  justify-content: center;
  gap: 0.35rem;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.78rem;
  white-space: nowrap;
  color: var(--color-orange);
  /* Empuja el enlace al fondo de la card sin importar cuánto texto tenga
     encima — así todas las flechas quedan alineadas en la misma línea,
     en vez de "flotar" a la altura donde termina la descripción de cada
     card (que varía porque el largo del texto varía). */
  margin-top: auto;
  padding-top: 1rem;
}

/* Card "Para empresas": única con relleno sólido, en la versión más oscura
   del azul de marca (--color-ink) — la distingue del resto a propósito. */
.camino-card--empresas {
  background: var(--color-ink);
}

.camino-card--empresas .camino-card__title {
  color: var(--color-white);
}

.camino-card--empresas .camino-card__text {
  color: rgba(255, 255, 255, 0.8);
}

.camino-card--empresas .camino-card__cta {
  color: var(--color-orange-light);
}

/* ==========================================
   20. V2 — FAQ ACCORDION
   ========================================== */
.faq-item {
  border: 1px solid var(--color-gray-medium);
  border-radius: 12px;
  margin-bottom: 0.75rem;
  overflow: hidden;
  background: var(--color-white);
}

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 1.25rem 1.5rem;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-ink);
  text-align: left;
  transition: var(--transition);
}

.faq-question:hover {
  color: var(--color-blue);
}

.faq-question__icon {
  flex-shrink: 0;
  margin-left: 1rem;
  transition: transform 0.3s ease;
  color: var(--color-orange);
}

.faq-item--open .faq-question__icon {
  transform: rotate(45deg);
}

.faq-answer {
  padding: 0 1.5rem;
  font-size: 0.9rem;
  color: var(--color-gray);
  line-height: 1.7;
}

.faq-item--open .faq-answer {
  padding-bottom: 1.25rem;
}

/* ==========================================
   21. V2 — HERO DARK (páginas de venta)
   ========================================== */
.hero--dark {
  background: var(--color-ink);
  color: var(--color-white);
  min-height: 90vh;
}

.hero--dark .hero__title {
  color: var(--color-white);
}

.hero--dark .hero__subtitle {
  color: rgba(255, 255, 255, 0.85);
}

.hero--dark .hero__tag {
  color: var(--color-orange-light);
}

/* Blog y Podcast pedían "fondo coral" en su doc — coral no está en la paleta de marca,
   así que usamos naranja como sustituto cálido dentro de paleta. #FF742E
   (--color-orange-deep) no se usa como relleno grande, así que es la misma
   mezcla ink+orange que --tone-orange, no el hex intenso puro. */
.hero--coral {
  background: color-mix(in srgb, var(--color-ink) 20%, var(--color-orange) 80%);
  color: var(--color-white);
  min-height: 70vh;
}

/* Podcast: "sello circular punteado" del doc — anillo punteado alrededor del badge */
.hero__tag--stamp {
  position: relative;
  border: 1px dashed rgba(255, 255, 255, 0.6);
}

.hero--coral .hero__tag {
  display: inline-block;
  background: rgba(255, 255, 255, 0.18);
  padding: 0.4rem 1rem;
  border-radius: 999px;
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-white);
  margin-bottom: 0.75rem;
}

/* max-width más angosto que .hero__content (720px) sin margin:auto se quedaba
   pegado al borde izquierdo del bloque centrado en vez de centrarse como
   caja — el texto interno se veía centrado dentro de su propia caja, pero
   la caja misma quedaba corrida a la izquierda respecto al título/botón de
   abajo. Mismo patrón que .hero__content (ver nota ahí). */
.hero-bridge {
  display: block;
  font-size: clamp(0.9rem, 1.8vw, 1.05rem);
  color: rgba(255, 255, 255, 0.7);
  font-weight: 400;
  margin-bottom: 0.75rem;
  line-height: 1.5;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* ==========================================
   22. V2 — PROGRAMAS GRID
   ========================================== */
.programas-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-top: 2.5rem;
}

/* Tarjetas de programa — mismo patrón visual que .course-card: fondo blanco
   con borde sutil, franja de acento arriba y tinte del icono en el color de
   cada card (--card-btn), que también da el color del botón. El fondo plano
   --color-blue-light en las 4 cards por igual se veía plano/infantil sin
   distinción real entre programas — este patrón ya está validado en la grilla
   de cursos individuales, así que se reutiliza aquí en vez de inventar uno
   nuevo. */
.programa-card {
  --card-btn: var(--color-orange);
  background: var(--color-white);
  color: var(--color-ink);
  border-radius: 20px;
  border: 1px solid var(--color-gray-medium);
  border-top: 5px solid var(--card-btn);
  box-shadow: var(--shadow-sm);
  padding: 1.5rem;
  transition: var(--transition);
  display: flex;
  flex-direction: column;
}

.programa-card:hover {
  box-shadow: 0 14px 32px rgba(5, 49, 70, 0.14);
  transform: translateY(-4px);
}

.programa-card--btn-blue { --card-btn: var(--color-blue); }
.programa-card--btn-gold { --card-btn: var(--color-orange-light); }
.programa-card--btn-terracotta { --card-btn: color-mix(in srgb, var(--color-ink) 20%, var(--color-orange) 80%); }

.programa-card__icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--card-btn) 28%, transparent);
  border: 2px solid var(--card-btn);
  opacity: 1;
  margin-bottom: 1rem;
}

.programa-card__title {
  font-size: 1.4rem;
  margin-bottom: 0.5rem;
  color: var(--color-ink);
}

.programa-card__tagline {
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 1.25rem;
  color: var(--color-gray);
  opacity: 1;
}

.programa-card .btn {
  align-self: flex-start;
  background: var(--card-btn);
  border-color: var(--card-btn);
  color: var(--color-white);
  padding: 0.45rem 1.1rem;
}

.programa-card .btn:hover {
  background: var(--card-btn);
  border-color: var(--card-btn);
  filter: brightness(0.88);
}

@media (max-width: 768px) {
  .programas-grid { grid-template-columns: 1fr; }
  .caminos-grid { grid-template-columns: 1fr; }
}

/* ==========================================
   23. V2 — COURSE SELECTOR
   ========================================== */
.course-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  margin-bottom: 2.5rem;
}

.course-selector__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1.1rem;
  border: 2px solid var(--color-gray-medium);
  border-radius: 50px;
  background: var(--color-white);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-gray);
  cursor: pointer;
  transition: var(--transition);
}

.course-selector__btn:hover {
  border-color: var(--color-blue);
  color: var(--color-blue);
}

.course-selector__btn.active {
  border-color: var(--color-orange);
  background: var(--color-orange);
  color: var(--color-white);
}

.course-selector__icon {
  font-size: 1.1rem;
}

/* ==========================================
   24. V2 — BUNDLE TABLE
   ========================================== */
/* Sección "El paquete completo" (Cursos): texto + tabla lado a lado en vez
   de apiladas — pedido del cliente para que la sección entera quepa en una
   pantalla sin scroll, en vez de la columna angosta (720px) centrada que
   apilaba texto, tabla y CTA una tras otra. */
#bundle-comparison-section {
  padding: 3rem 0;
}

.bundle-comparison {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 3rem;
  align-items: center;
}

.bundle-comparison__intro .maestria__tag,
.bundle-comparison__intro .maestria__title {
  display: block;
}

@media (max-width: 900px) {
  .bundle-comparison {
    grid-template-columns: 1fr;
    text-align: center;
  }
}

.bundle-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.bundle-table th,
.bundle-table td {
  padding: 0.6rem 0.9rem;
  text-align: left;
  border-bottom: 1px solid var(--color-gray-medium);
}

.bundle-table th {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-ink);
  background: var(--color-gray-light);
}

.bundle-table td:last-child {
  text-align: center;
  color: var(--color-blue);
  font-weight: 700;
}

.bundle-table tr:last-child td {
  font-weight: 700;
  color: var(--color-orange-deep);
  border-bottom: 2px solid var(--color-orange);
}

/* ==========================================
   25. V2 — STATS GRID
   ========================================== */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 2rem;
}

.stat-item {
  text-align: center;
  background: var(--color-white);
  border-radius: 12px;
  padding: 2rem 1.5rem;
  box-shadow: var(--shadow-sm);
  border-top: 4px solid var(--color-orange);
}

.stat-number {
  display: block;
  font-family: var(--font-heading);
  font-size: 2.25rem;
  font-weight: 800;
  color: var(--color-blue);
  margin-bottom: 0.5rem;
}

.stat-label {
  font-size: 0.9rem;
  color: var(--color-gray);
  line-height: 1.6;
}

@media (max-width: 768px) {
  .stats-grid { grid-template-columns: 1fr; }
}

/* ==========================================
   26. V2 — SECTION CON COLOR SÓLIDO
   ========================================== */
.section--solid-orange {
  background: var(--color-orange-brand);
  color: var(--color-white);
}

.section--solid-blue {
  background: var(--color-blue-brand);
  color: var(--color-white);
}

.section--solid-hero {
  background: var(--color-ink);
  color: var(--color-white);
}

/* ==========================================
   27. V2 — ORGANIC DIVIDER
   ========================================== */
.section--organic-divider {
  position: relative;
}

.section--organic-divider::before {
  content: '';
  position: absolute;
  top: -2px;
  left: 0;
  right: 0;
  height: 60px;
  background: var(--color-white);
  clip-path: ellipse(50% 100% at 50% 100%);
}

/* ==========================================
   28. PROBLEM DETAIL CARDS (secciones "el problema", hasta 6 tarjetas)
   ========================================== */
.problem-detail {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 2rem;
}

.problem-detail__card {
  background: var(--color-white);
  border-radius: 12px;
  padding: 1.75rem;
  box-shadow: var(--shadow-sm);
  border-left: 4px solid var(--color-orange);
  transition: var(--transition);
}

.problem-detail__card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.problem-detail__card:nth-child(2) { border-left-color: var(--color-blue); }
.problem-detail__card:nth-child(3) { border-left-color: var(--color-orange-deep); }
.problem-detail__card:nth-child(4) { border-left-color: var(--color-blue); }
.problem-detail__card:nth-child(5) { border-left-color: var(--color-orange-deep); }
.problem-detail__card:nth-child(6) { border-left-color: var(--color-blue); }

.problem-detail__title {
  font-size: 1.08rem;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.problem-detail__text {
  font-size: 0.95rem;
  color: #555;
  line-height: 1.7;
}

.problem-detail__text + .problem-detail__text {
  margin-top: 0.75rem;
}

@media (max-width: 992px) {
  .problem-detail { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .problem-detail { grid-template-columns: 1fr; }
  .problem-detail__card { padding: 1.25rem; }
  .problem-detail__text { font-size: 0.85rem; }
}

@media (max-width: 576px) {
  .problem-detail__card { padding: 1rem; }
  .problem-detail__title { font-size: 0.95rem; }
}

/* ==========================================
   29. HERO — MODERN (patrón "PREFERIDO": marino, círculos decorativos,
   badge, foto de fondo opcional con overlay). Reutilizable en cualquier
   página — el tono (--tone-orange/--tone-blue) y la foto (o su ausencia,
   ver --no-photo) son lo que hace que cada página se sienta distinta.
   ========================================== */
.hero--modern {
  position: relative;
  min-height: 100vh;
  background: var(--color-ink);
  color: var(--color-white);
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 8rem 0 4rem;
}

/* Ya no se usan círculos/manchas decorativas difuminadas — el fondo es color plano. */
.hero--modern .hero__graphics,
.hero--modern .hero__circle,
.hero--modern .hero__blur {
  display: none;
}

/* Foto al lado (Maestría, Mentoría Closer, Quiénes Somos, Para Empresas) — ya
   no va detrás del texto (se leía mal, tapada por el velo oscuro); va en su
   propia columna, en un marco redondeado con un acento de color plano detrás,
   tipo "sticker" — sin blur ni degradado, solo dos formas sólidas superpuestas. */
.hero--modern .hero__image-wrapper,
.hero--modern .hero__video-wrapper {
  position: relative;
}

/* Recuadro de video (VSL) — mismo tratamiento visual que .hero__image-*
   (marco redondeado + acento sólido detrás), pero con un <video> en vez de
   una foto. Usado por ahora solo en Maestría, con un video dummy. */
.hero--modern .hero__video-container {
  position: relative;
  z-index: 1;
  border-radius: 28px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
}

.hero--modern .hero__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 28px;
}

.hero--modern .hero__image-accent {
  position: absolute;
  z-index: 0;
  top: -22px;
  left: -22px;
  width: 130px;
  height: 130px;
  border-radius: 30px;
  background: var(--color-orange);
}

.hero--modern .hero__image-container {
  position: relative;
  z-index: 1;
  border-radius: 28px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  box-shadow: none;
}

.hero--modern .hero__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 28px;
  opacity: 1;
}

.hero--modern .hero__grid {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: center;
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
}

/* .hero__content trae su propio max-width (720px, ver base .hero__content)
   más angosto que la columna del grid — sin margin:auto, un grid item con
   max-width se queda pegado al inicio (izquierda) de su columna en vez de
   centrarse, lo que descuadraba el título del centro real del hero en todo
   layout de una sola columna (Home y cualquier hero sin foto). */
.hero--modern .hero__grid .hero__content {
  margin-left: auto;
  margin-right: auto;
}

/* Cuando el hero lleva foto o video, pasa a 2 columnas — texto a la
   izquierda, foto/video a la derecha — en vez del layout centrado de una
   sola columna. */
.hero--modern:has(.hero__image-wrapper, .hero__video-wrapper) .hero__grid {
  grid-template-columns: 1.05fr 0.95fr;
  gap: 3rem;
  max-width: 1120px;
  text-align: left;
}

.hero--modern:has(.hero__image-wrapper, .hero__video-wrapper) .hero__subtitle {
  margin-left: 0;
  margin-right: 0;
}

.hero--modern:has(.hero__image-wrapper, .hero__video-wrapper) .hero__actions {
  justify-content: flex-start;
}

/* Maestría: título ya centrado arriba (.hero__title-block), así que el resto
   del contenido se divide en tercios — 1/3 texto, 2/3 video — en vez de la
   mitad/mitad por defecto. Selector con 3 clases a propósito, para ganarle
   en especificidad a la regla de 2 clases de arriba sin depender del orden
   en el archivo. */
.hero--modern.hero--split-thirds:has(.hero__video-wrapper) .hero__grid {
  grid-template-columns: 1fr 2fr;
}

@media (max-width: 1024px) {
  .hero--modern:has(.hero__image-wrapper, .hero__video-wrapper) .hero__grid {
    grid-template-columns: 1fr;
    text-align: center;
  }

  /* Misma especificidad (3 clases+:has) que la regla de tercios de arriba,
     para que sí se aplique dentro de este breakpoint — una media query no
     suma especificidad por sí sola, así que sin esto la de tercios seguía
     ganando y el hero no colapsaba a una columna en mobile/tablet. */
  .hero--modern.hero--split-thirds:has(.hero__video-wrapper) .hero__grid {
    grid-template-columns: 1fr;
  }

  .hero--modern:has(.hero__image-wrapper, .hero__video-wrapper) .hero__subtitle,
  .hero--modern:has(.hero__image-wrapper, .hero__video-wrapper) .hero__actions {
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
  }

  .hero--modern .hero__image-wrapper,
  .hero--modern .hero__video-wrapper {
    max-width: 360px;
    margin: 0 auto;
  }
}

/* .hero--photo-left: foto del lado contrario (izquierda) al patrón por defecto
   (Maestría/Closer/Quiénes Somos/Empresas ponen la foto a la derecha) — el
   orden en el HTML no cambia (el texto sigue primero para lectores de
   pantalla), solo el orden visual vía `order`. */
.hero--modern.hero--photo-left:has(.hero__image-wrapper) .hero__grid {
  grid-template-columns: 0.95fr 1.05fr;
}

.hero--modern.hero--photo-left .hero__content {
  order: 2;
}

.hero--modern.hero--photo-left .hero__image-wrapper {
  order: 1;
}

@media (max-width: 1024px) {
  .hero--modern.hero--photo-left .hero__content,
  .hero--modern.hero--photo-left .hero__image-wrapper {
    order: initial;
  }
}

/* Formas decorativas extra (además del par de esquina de .hero--shapes-N) —
   para páginas puntuales que piden un hero con más elementos, tipo confeti de
   marca. Círculos y cuadrados sólidos, sin blur ni degradado, cada una fijada
   por estilo inline (tamaño/posición/color varían caso a caso). */
.hero__deco {
  position: absolute;
  z-index: 2;
  pointer-events: none;
}

/* ==========================================
   SECTION DECO — círculos y cuadrados flotantes de fondo, color plano de
   marca, para secciones que no son el hero (mismo espíritu que .hero__deco
   de arriba, pero reutilizable en cualquier sección). Tamaño, color y
   posición se definen inline por instancia, igual que .hero__deco — esta
   clase solo trae el comportamiento común. Algunas instancias se posicionan
   con valores negativos a propósito para que la sección (con overflow:
   hidden vía .section--deco) las recorte en el borde — variedad de tamaño
   y "algunos que se entrecortan con los bordes", pedido explícito del
   cliente. Sin triángulos: se probaron y el cliente los sacó. */
.section--deco {
  position: relative;
  overflow: hidden;
}

.section-deco {
  position: absolute;
  z-index: 1;
  pointer-events: none;
}

/* .sticker-badge (stickers ilustrados de crecimiento/empoderamiento/liderazgo/
   inspira/emprendimiento) se quitó del sitio a pedido del cliente — no
   reintroducir sin instrucción explícita. */

.hero--modern .hero__badge {
  display: inline-block;
  background: var(--color-orange);
  color: var(--color-white);
  padding: 0.5rem 1.25rem;
  border-radius: 50px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}

.hero--modern .hero__title {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 800;
  color: var(--color-white);
  line-height: 1.1;
  margin-bottom: 1.5rem;
}

.hero--modern .hero__title-highlight {
  color: var(--color-orange-light);
}

.hero--modern .hero__subtitle {
  font-size: clamp(1rem, 2vw, 1.25rem);
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.6;
  margin-bottom: 2rem;
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
}

.hero--modern .hero__actions {
  margin-bottom: 2.5rem;
  justify-content: center;
}

.hero--modern .hero__actions .btn--primary {
  background: var(--color-orange);
  border-color: var(--color-orange);
  color: var(--color-white);
}

.hero--modern .hero__actions .btn--primary:hover {
  background: color-mix(in srgb, var(--color-ink) 20%, var(--color-orange) 80%);
  border-color: color-mix(in srgb, var(--color-ink) 20%, var(--color-orange) 80%);
}

.btn--white-outline {
  background: transparent;
  color: var(--color-white);
  border: 2px solid var(--color-white);
}

.btn--white-outline:hover {
  background: var(--color-white);
  color: var(--color-orange);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.btn__icon {
  font-size: 0.85rem;
  margin-right: 0.5rem;
}

@media (max-width: 768px) {
  .hero--modern {
    padding: 6rem 0 3rem;
  }

  .hero--modern .hero__title {
    font-size: clamp(2rem, 8vw, 3rem);
  }

  .hero--modern .hero__actions {
    flex-direction: column;
  }

  .hero--modern .hero__actions .btn {
    width: 100%;
  }
}

@media print {
  .hero--modern {
    min-height: auto;
    padding: 2rem 0;
  }

  .hero--modern .hero__graphics {
    display: none;
  }
}

/* Variante compacta: solo lo alto que pida el contenido, sin forzar 100vh */
.hero--modern.hero--compact {
  min-height: auto;
  padding: 6rem 0 2.5rem;
}

.hero--compact .hero__badge {
  margin-bottom: 1rem;
}

.hero--compact .hero__title {
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  margin-bottom: 1rem;
}

.hero--compact .hero__subtitle {
  font-size: clamp(0.9rem, 1.4vw, 1.05rem);
  margin-bottom: 1.25rem;
}

.hero--compact .hero__actions {
  margin-bottom: 1.5rem;
}

/* Programas: hero más bajo que el hero--compact estándar, sin badge, con el
   título y el subtítulo ajustados para que ambos entren en 2 líneas (antes
   cada uno caía en 3) — pedido puntual del cliente para esta página. */
/* padding-top de sobra para despejar el header fijo (~71px) más aire extra
   para centrar el texto dentro de la franja — antes el título quedaba
   parcialmente tapado por el header y todo el aire libre caía abajo. */
.hero--modern.hero--programas {
  padding: 5.5rem 0 1.5rem;
}

/* .hero__subtitle trae su propio margin-bottom (heredado, no de esta
   variante) que sumaba de más al espacio de abajo y descuadraba el
   centrado vertical — se anula acá para que el padding de arriba sea
   comparable al de abajo. */
.hero--programas .hero__subtitle {
  margin-bottom: 0;
}

.hero--programas .hero__title {
  font-size: clamp(1.7rem, 3.4vw, 2.15rem);
  margin-bottom: 0.85rem;
}

.hero--programas .hero__subtitle {
  font-size: clamp(0.9rem, 1.3vw, 1rem);
}

/* Home: única página sin foto en el hero — el título ocupa el espacio que
   dejaría la imagen. Ver front-page.php. */
.hero--modern.hero--no-photo .hero__grid {
  max-width: 920px;
}

.hero--modern.hero--no-photo .hero__title {
  font-size: clamp(2.2rem, 5vw, 3.1rem);
}

/* Variantes de tono (dentro de la paleta de marca) — hacen que cada página
   se sienta distinta sin salir de naranja/azul/marino. Se combinan con
   .hero--modern o .hero--dark: <section class="hero hero--dark hero--tone-blue">. */
/* Colores planos (sin degradado) — mezclas sólidas de los tokens oficiales vía
   color-mix(), no un gradiente entre dos paradas. Cada uno se queda lo bastante
   oscuro/saturado para que el texto blanco tenga contraste seguro. */
/* #FF742E (--color-orange-deep) no se usa como relleno grande — instrucción
   directa del cliente — así que el tono naranja del hero se logra mezclando
   el naranja principal con el ink, igual que --tone-blue, en vez del hex
   intenso puro. */
.hero--tone-orange {
  background: color-mix(in srgb, var(--color-ink) 20%, var(--color-orange) 80%);
}

.hero--tone-blue {
  background: color-mix(in srgb, var(--color-ink) 55%, var(--color-blue) 45%);
}

/* Ojo: mezclar --color-ink (azul) con --color-orange-light (amarillo/dorado) da un
   verde oliva feo (azul+amarillo=verde) — por eso esta mezcla usa el naranja
   principal, nunca el orange-light, para quedarse en la familia cálida (terracota). */
.hero--tone-gold {
  background: color-mix(in srgb, var(--color-ink) 35%, var(--color-orange) 65%);
}

@media (max-width: 768px) {
  .hero--modern.hero--compact {
    padding: 5rem 0 2rem;
  }
}

/* ==========================================
   30. PAGE HEADER — páginas utilitarias sin hero
   (Testimonios, Contacto, FAQ): no llevan el hero emocional de marca
   (marino, círculos, foto) — solo una franja liviana con título/subtítulo,
   para que se noten como páginas de soporte, no como páginas de venta.
   ========================================== */
.page-header {
  position: relative;
  padding: 7.5rem 0 3rem;
  background: var(--color-paper);
  text-align: center;
}

/* Ilustración de personas (contenido/13.Glosario/.../Personas - Vectores) — un
   toque visual en las páginas de soporte que si no son solo texto plano.
   Se esconde en pantallas angostas para no chocar con el texto centrado. */
.page-header__illustration {
  position: absolute;
  bottom: 0;
  right: 5%;
  height: 190px;
  width: auto;
  pointer-events: none;
}

@media (max-width: 1150px) {
  .page-header__illustration {
    display: none;
  }
}

/* Versión genérica de la misma idea, para usar dentro de un hero o cualquier
   section con position:relative (no solo .page-header). */
.section-illustration {
  position: absolute;
  bottom: 0;
  right: 4%;
  height: 210px;
  width: auto;
  z-index: 1;
  pointer-events: none;
}

@media (max-width: 1150px) {
  .section-illustration {
    display: none;
  }
}

.page-header__tag {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-orange-deep);
  margin-bottom: 0.75rem;
}

.page-header__title {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  margin-bottom: 0.75rem;
}

.page-header__subtitle {
  font-size: clamp(0.95rem, 1.6vw, 1.1rem);
  color: var(--color-gray);
  max-width: 620px;
  margin: 0 auto;
  line-height: 1.7;
}

@media (max-width: 768px) {
  .page-header {
    padding: 6rem 0 2.5rem;
  }
}