/* GUÍA DE EDICIÓN: QUÉ CAMBIAR Y QUÉ NO
   EDITABLE: variables de color del :root, espaciados, radios, sombras y ajustes responsive.
   NO TOCAR sin pruebas: selectores usados por app.js, estados .active/.open y reglas de formularios.
   Mantener una sola hoja global para conservar coherencia visual en todas las páginas.
*/
/* ==========================================================================
   RED LÍDER | ESCUELA DE DIRECCIÓN - STYLE.CSS (HOJA DE ESTILOS UNIFICADA)
   Paleta cromática oficial (según Brief Octubre 2026):
   - Azul Marino (#17365D): Marca, títulos, fondos de alto contraste (45%)
   - Azul Secundario (#2F75B5): Enlaces, apoyos y elementos secundarios (25%)
   - Naranja Acento (#E67E22): CTA, botones principales, subrayados (15%)
   - Blanco (#FFFFFF): Espacio, limpieza, fondos (10%)
   - Gris Claro (#F5F7FA): Fondos alternos y separación
   ========================================================================== */

:root {
  --color-primary: #17365D;
  --color-primary-dark: #0f243f;
  --color-primary-light: #224c7f;
  --color-secondary: #2F75B5;
  --color-secondary-light: #eaf2fb;
  --color-accent: #E67E22;
  --color-accent-hover: #d35400;
  --color-accent-soft: #fdf2e9;
  --color-bg-white: #FFFFFF;
  --color-bg-light: #F5F7FA;
  --color-bg-card: #FFFFFF;
  --color-text-main: #1E293B;
  --color-text-muted: #475569;
  --color-text-light: #94A3B8;
  --color-border: #E2E8F0;
  --color-border-focus: #2F75B5;
  --color-success: #10B981;
  --color-warning: #F59E0B;

  --font-main: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08);
  --shadow-md: 0 4px 12px rgba(23, 54, 93, 0.08);
  --shadow-lg: 0 10px 25px rgba(23, 54, 93, 0.12);
  --shadow-xl: 0 20px 40px rgba(23, 54, 93, 0.18);
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  --header-height: 80px;
  --max-width: 1240px;
}

/* RESET & BASE */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-main);
  background-color: var(--color-bg-white);
  color: var(--color-text-main);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--color-secondary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-accent);
}

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: 1rem;
}

.container {
  width: 100%;
  max-width: var(--max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

/* ACCESSIBILITY SKIP LINK */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--color-accent);
  color: #fff;
  padding: 8px 16px;
  z-index: 10000;
  font-weight: 600;
  transition: top 0.2s;
}

.skip-link:focus {
  top: 0;
}

/* TIPOGRAFÍA & TEXTOS */
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--color-primary);
  font-weight: 700;
  line-height: 1.25;
}

.section-label {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-secondary);
  margin-bottom: 0.75rem;
}

.section-label.light {
  color: #93c5fd;
}

.section-header {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 3.5rem;
}

.section-header.text-left {
  text-align: left;
  margin-left: 0;
}

.section-title {
  font-size: 2.25rem;
  margin-bottom: 1rem;
  letter-spacing: -0.02em;
}

.section-title.light {
  color: #FFFFFF;
}

.section-subtitle {
  font-size: 1.125rem;
  color: var(--color-text-muted);
  line-height: 1.6;
}

.section-subtitle.light {
  color: #cbd5e1;
}

/* Contenedor general */
.header-socials {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Estilo base de los cuadros (fondo azul marino con borde translúcido) */
.social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background-color: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  font-size: 1.2rem;
  text-decoration: none;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.social-btn:hover {
  transform: translateY(-2px);
  background-color: rgba(255, 255, 255, 0.15);
}

/* --- COLORES OFICIALES DE CADA RED SOCIAL --- */
.social-facebook i {
  color: #1877F2;
}

.social-instagram i {
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.social-tiktok i {
  color: #000000;
}

.social-linkedin i {
  color: #0A66C2;
}

.social-youtube i {
  color: #FF0000;
}

/* BANNER DE CABECERA DE PÁGINAS INTERNAS */
.page-hero-banner {
  background: linear-gradient(135deg, #17365D 0%, #0f243f 100%);
  color: #FFFFFF;
  padding: 4.5rem 0 3.5rem;
  border-bottom: 4px solid var(--color-accent);
}

.page-hero-title {
  font-size: 2.6rem;
  color: #FFFFFF;
  margin-bottom: 1rem;
  letter-spacing: -0.02em;
}

.page-hero-subtitle {
  font-size: 1.15rem;
  color: #cbd5e1;
  max-width: 780px;
  line-height: 1.6;
}

.breadcrumbs {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: #93c5fd;
  margin-bottom: 1rem;
}

.breadcrumbs a {
  color: #cbd5e1;
}

.breadcrumbs a:hover {
  color: var(--color-accent);
}

/* BOTONES */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.85rem 1.6rem;
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--transition-normal);
  text-align: center;
  white-space: nowrap;
}

.btn-primary {
  background-color: var(--color-accent);
  color: #FFFFFF;
}

.btn-primary:hover {
  background-color: var(--color-accent-hover);
  color: #FFFFFF;
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(230, 126, 34, 0.35);
}

.btn-secondary {
  background-color: transparent;
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.btn-secondary:hover {
  background-color: var(--color-primary);
  color: #FFFFFF;
  transform: translateY(-2px);
}

.btn-outline-white {
  background-color: transparent;
  border-color: rgba(255, 255, 255, 0.6);
  color: #FFFFFF;
}

.btn-outline-white:hover {
  background-color: #FFFFFF;
  color: var(--color-primary);
}

.btn-text {
  background: none;
  border: none;
  color: var(--color-secondary);
  padding: 0;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
}

.btn-text:hover {
  color: var(--color-accent);
}

.btn-sm {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
}

.btn-lg {
  padding: 1rem 2rem;
  font-size: 1.05rem;
}

.btn-block {
  width: 100%;
}

/* ==========================================================================
   HEADER & NAVBAR IDÉNTICO EN TODAS LAS PÁGINAS
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-height);
  background-color: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-border);
  z-index: 1000;
  transition: box-shadow var(--transition-fast);
}

.site-header.scrolled {
  box-shadow: var(--shadow-md);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.brand-logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
}

.brand-logo-img {
  height: 48px;
  width: auto;
  max-width: 230px;
  object-fit: contain;
  display: block;
  transition: transform 0.2s ease;
}

.brand-logo:hover .brand-logo-img {
  transform: scale(1.02);
}

.logo-symbol {
  width: 4px;
  height: 38px;
  background-color: var(--color-accent);
  border-radius: 2px;
}

.logo-text-wrap {
  display: flex;
  flex-direction: column;
}

.brand-title {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--color-primary);
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.brand-subtitle {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-secondary);
}

.main-navigation {
  display: flex;
  align-items: center;
}

.nav-menu {
  display: flex;
  align-items: center;
  list-style: none;
  gap: 1.4rem;
}

.nav-link {
  font-size: 0.925rem;
  font-weight: 600;
  color: var(--color-primary);
  position: relative;
  padding: 0.5rem 0.2rem;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.nav-link:hover,
/* Remueve el fondo blanco, bordes y ajusta el color del texto para que coincida con los demás */
.nav-link.active,
.nav-item-box {
  background-color: transparent;
  /* Quita el fondo blanco */
  border: none;
  /* Quita cualquier borde */
  box-shadow: none;
  /* Quita sombras si las tuviera */
  padding: 0;
  /* Ajusta el espacio interno si es necesario */
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2.5px;
  background-color: var(--color-accent);
  transition: width var(--transition-fast);
}

.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
}

/* ESTILO PÍLDORA DEL NAVEGADOR */
.nav-link.nav-pill {
  background-color: #E8F1FA;
  color: var(--color-primary) !important;
  font-weight: 700;
  padding: 0.55rem 1.15rem;
  border-radius: 8px;
  border: 1px solid rgba(47, 117, 181, 0.12);
  transition: all var(--transition-fast);
}

.nav-link.nav-pill::after {
  display: none !important;
}

.nav-link.nav-pill:hover,
.nav-link.nav-pill.active {
  background-color: #dbeafe;
  color: var(--color-primary) !important;
  box-shadow: 0 3px 8px rgba(23, 54, 93, 0.12);
  transform: translateY(-1px);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  color: var(--color-primary);
}

.hamburger {
  width: 24px;
  height: 18px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.hamburger span {
  display: block;
  height: 2.5px;
  width: 100%;
  background-color: var(--color-primary);
  border-radius: 2px;
  transition: all 0.3s ease;
}

.menu-toggle.active .hamburger span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.menu-toggle.active .hamburger span:nth-child(2) {
  opacity: 1;
}

.menu-toggle.active .hamburger span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* ==========================================================================
   HERO / PORTADA (INDEX)
   ========================================================================== */
.hero-section {
  position: relative;
  padding: 4.5rem 0 3.5rem;
  background: linear-gradient(180deg, #FFFFFF 0%, #F5F7FA 100%);
  overflow: hidden;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.95fr;
  gap: 3.5rem;
  align-items: center;
}

.hero-content {
  max-width: 650px;
}

.hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-secondary);
  background-color: var(--color-secondary-light);
  padding: 0.4rem 0.9rem;
  border-radius: var(--radius-full);
  margin-bottom: 1.5rem;
}

.hero-title {
  font-size: 3.1rem;
  font-weight: 800;
  line-height: 1.15;
  color: var(--color-primary);
  letter-spacing: -0.03em;
  margin-bottom: 1.4rem;
}

.hero-title span {
  display: block;
}

.hero-title .highlight {
  color: var(--color-accent);
}

.hero-lead {
  font-size: 1.2rem;
  line-height: 1.6;
  color: var(--color-text-muted);
  margin-bottom: 2rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 2rem;
}

.hero-visual {
  position: relative;
}

.hero-image-wrapper {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
}

.hero-image {
  width: 100%;
  height: 480px;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.hero-image-wrapper:hover .hero-image {
  transform: scale(1.02);
}

.hero-badge-floating {
  position: absolute;
  bottom: 20px;
  left: 20px;
  right: 20px;
  background: rgba(23, 54, 93, 0.94);
  backdrop-filter: blur(8px);
  color: #fff;
  padding: 1.2rem 1.4rem;
  border-radius: var(--radius-md);
  border-left: 4px solid var(--color-accent);
  box-shadow: var(--shadow-lg);
}

.floating-badge-title {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #93c5fd;
  margin-bottom: 0.25rem;
}

.floating-badge-desc {
  font-size: 0.95rem;
  color: #f1f5f9;
  line-height: 1.4;
}

/* ==========================================================================
   FRANJA DE CREDIBILIDAD DINÁMICA (CINTA INFINITA)
   ========================================================================== */
.credibility-strip {
  overflow: hidden;
  background-color: var(--color-bg-white);
  padding: 1.5rem 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  width: 100%;
}

.marquee-container {
  display: flex;
  width: 100%;
  overflow: hidden;
  position: relative;
  /* Máscaras opcionales en los costados para un efecto de desvanecimiento elegante */
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.marquee-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: scroll-marquee 30s linear infinite;
}

/* Se detiene al pasar el cursor para lectura detallada */
.marquee-track:hover {
  animation-play-state: paused;
}

.credibility-group {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-shrink: 0;
  padding-right: 1.5rem;
}

.credibility-item {
  font-size: 0.925rem;
  font-weight: 600;
  color: var(--color-primary);
  white-space: nowrap;
}

.credibility-bullet {
  color: var(--color-accent);
  font-size: 0.85rem;
}

@keyframes scroll-marquee {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

/* ==========================================================================
   RUTAS DE ENTRADA RÁPIDA (DOS RUTAS DEL BRIEF)
   ========================================================================== */
.routes-dual-section {
  padding: 4rem 0;
  background-color: var(--color-bg-light);
}

.dual-cards-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

.dual-route-card {
  background-color: var(--color-bg-white);
  border-radius: var(--radius-md);
  padding: 2.4rem;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all var(--transition-normal);
  position: relative;
  overflow: hidden;
}

.dual-route-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 5px;
  height: 100%;
  background-color: var(--color-secondary);
  transition: width 0.3s ease;
}

.dual-route-card.corporate::before {
  background-color: var(--color-accent);
}

.dual-route-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.dual-route-card:hover::before {
  width: 8px;
}

.dual-card-title {
  font-size: 1.45rem;
  color: var(--color-primary);
  margin-bottom: 0.75rem;
}

.dual-card-desc {
  color: var(--color-text-muted);
  font-size: 1rem;
  margin-bottom: 1.6rem;
  line-height: 1.5;
}

/* ==========================================================================
   SECCIÓN: EL RETO DE DIRIGIR
   ========================================================================== */
.challenge-section {
  padding: 6rem 0;
  background-color: var(--color-bg-white);
}

.challenge-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 4rem;
  align-items: center;
}

.challenge-quote-box {
  background: linear-gradient(145deg, #17365D, #0f243f);
  color: #FFFFFF;
  padding: 3rem 2.8rem;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  position: relative;
}

.quote-mark {
  font-size: 4rem;
  line-height: 1;
  color: var(--color-accent);
  opacity: 0.4;
  margin-bottom: -1.5rem;
}

.challenge-quote-text {
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1.45;
  margin-bottom: 1.8rem;
  color: #FFFFFF;
}

.challenge-quote-author {
  font-size: 0.95rem;
  color: #93c5fd;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-top: 1rem;
}

.challenge-cards-stack {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.challenge-item {
  display: flex;
  gap: 1.3rem;
  padding: 1.5rem;
  background-color: var(--color-bg-light);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  transition: transform var(--transition-fast);
}

.challenge-item:hover {
  transform: translateX(6px);
  border-color: var(--color-secondary);
}

.challenge-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  background-color: var(--color-secondary-light);
  color: var(--color-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
}

.challenge-item-title {
  font-size: 1.15rem;
  color: var(--color-primary);
  margin-bottom: 0.35rem;
}

.challenge-item-desc {
  font-size: 0.925rem;
  color: var(--color-text-muted);
  line-height: 1.5;
}

/* ==========================================================================
   SECCIÓN: LA ESCUELA & ÓSCAR PÉREZ
   ========================================================================== */
.school-section {
  padding: 6rem 0;
  background-color: var(--color-bg-light);
}

.school-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 3.5rem;
  align-items: start;
}

.school-methodology-card {
  background: var(--color-bg-white);
  padding: 2.5rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
  margin-top: 2rem;
}

.methodology-steps-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.8rem;
  margin-top: 1.5rem;
}

.method-step {
  padding: 1.2rem;
  background: var(--color-bg-light);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--color-secondary);
}

.step-num {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--color-accent);
  margin-bottom: 0.2rem;
}

.step-title {
  font-size: 1rem;
  color: var(--color-primary);
  font-weight: 700;
  margin-bottom: 0.35rem;
}

.step-desc {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  line-height: 1.45;
}

.founder-card {
  background: #FFFFFF;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--color-border);
}

.founder-image-wrap {
  position: relative;
  height: 300px;
}

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

.founder-badge {
  position: absolute;
  bottom: 15px;
  left: 15px;
  background: rgba(23, 54, 93, 0.9);
  color: #FFFFFF;
  padding: 0.4rem 0.9rem;
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: var(--radius-full);
}

.founder-body {
  padding: 2rem;
}

.founder-name {
  font-size: 1.5rem;
  color: var(--color-primary);
  margin-bottom: 0.25rem;
}

.founder-role {
  font-size: 0.875rem;
  color: var(--color-secondary);
  font-weight: 600;
  margin-bottom: 1.2rem;
}

.founder-bio {
  font-size: 0.925rem;
  color: var(--color-text-muted);
  line-height: 1.55;
  margin-bottom: 1.5rem;
}

.founder-quote {
  padding: 1.2rem;
  background-color: var(--color-accent-soft);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-style: italic;
  color: #7c2d12;
  font-weight: 500;
}

/* ==========================================================================
   SECCIÓN: QUÉ HACEMOS & SERVICIOS (DESLIZADOR HORIZONTAL & BARRA INTERACTIVA)
   ========================================================================== */
.services-overview-section {
  padding: 6rem 0;
  background-color: var(--color-bg-white);
}

.services-slider-container {
  position: relative;
  width: 100%;
}

.services-grid {
  display: flex !important;
  grid-template-columns: none !important;
  gap: 1.8rem;
  overflow-x: auto !important;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 1rem 0.5rem 2rem 0.5rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--color-secondary) var(--color-bg-light);
}

.services-grid::-webkit-scrollbar {
  height: 8px;
  display: block !important;
}

.services-grid::-webkit-scrollbar-track {
  background: var(--color-bg-light);
  border-radius: var(--radius-full);
}

.services-grid::-webkit-scrollbar-thumb {
  background: var(--color-secondary);
  border-radius: var(--radius-full);
}

.services-grid::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary);
}

.service-card {
  flex: 0 0 320px !important;
  max-width: 350px !important;
  scroll-snap-align: start;
  background: var(--color-bg-light);
  border-radius: var(--radius-md);
  padding: 2.2rem 1.8rem;
  border: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all var(--transition-normal);
  box-shadow: var(--shadow-sm);
}

.service-card:hover {
  transform: translateY(-5px);
  background: var(--color-bg-white);
  border-color: var(--color-secondary);
  box-shadow: var(--shadow-lg);
}

.service-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  background: var(--color-secondary-light);
  color: var(--color-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  margin-bottom: 1.4rem;
}

.service-title {
  font-size: 1.25rem;
  color: var(--color-primary);
  margin-bottom: 0.75rem;
}

.service-desc {
  font-size: 0.925rem;
  color: var(--color-text-muted);
  margin-bottom: 1.6rem;
  line-height: 1.5;
}

/* Ocultar puntitos de paginación anteriores */
.slider-pagination {
  display: none !important;
}

.workflow-bar {
  margin-top: 3.5rem;
  background: var(--color-primary);
  color: #fff;
  border-radius: var(--radius-md);
  padding: 1.5rem 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem 1.8rem;
  font-size: 0.95rem;
  box-shadow: var(--shadow-md);
}

.workflow-label {
  font-weight: 700;
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.85rem;
}

.workflow-chain {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  font-weight: 500;
}

.workflow-arrow {
  color: var(--color-accent);
  font-weight: 700;
}

/* ==========================================================================
   PROGRAMAS FORMATIVOS
   ========================================================================== */
.programs-section {
  padding: 6rem 0;
  background-color: var(--color-bg-light);
}

.programs-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin-bottom: 3rem;
}

.filter-btn {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  padding: 0.55rem 1.2rem;
  border-radius: var(--radius-full);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.filter-btn:hover {
  border-color: var(--color-secondary);
  color: var(--color-secondary);
}

.filter-btn.active {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: #FFFFFF;
  box-shadow: var(--shadow-sm);
}

.programs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2rem;
  align-items: stretch;
  width: 100%;
  margin-top: 2rem;
}

/* Estilo profesional para las tarjetas de programas */
.program-card {
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg, 12px);
  padding: 2rem;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* Empuja el botón siempre hacia abajo */
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.program-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md, 0 10px 25px -5px rgba(0, 0, 0, 0.08));
}

.program-summary {
  color: var(--color-text-muted);
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 1rem 0 1.25rem 0;
}

.program-details {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem 0;
  font-size: 0.88rem;
  color: var(--color-text-main);
  border-top: 1px solid var(--color-border);
  padding-top: 1rem;
}

.program-details li {
  margin-bottom: 0.5rem;
}

.program-card {
  background: var(--color-bg-white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  padding: 2.2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all var(--transition-normal);
  position: relative;
}

.program-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: #cbd5e1;
}

.program-card-header {
  margin-bottom: 1.2rem;
}

.program-badges-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.9rem;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.category-tag {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-secondary);
  background-color: var(--color-secondary-light);
  padding: 0.3rem 0.75rem;
  border-radius: var(--radius-full);
}

.status-badge {
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.3rem 0.75rem;
  border-radius: var(--radius-full);
}

.status-abierto {
  background-color: #d1fae5;
  color: #065f46;
}

.status-proximamente {
  background-color: #fef3c7;
  color: #92400e;
}

.status-para_empresas {
  background-color: #e0e7ff;
  color: #3730a3;
}

.status-consulta {
  background-color: #f1f5f9;
  color: #475569;
}

.program-card-title {
  font-size: 1.35rem;
  color: var(--color-primary);
  line-height: 1.3;
  margin-bottom: 0.75rem;
}

.program-card-summary {
  font-size: 0.95rem;
  color: var(--color-text-muted);
  line-height: 1.55;
  margin-bottom: 1.25rem;
}

.program-meta-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1rem 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 1.4rem;
  font-size: 0.875rem;
}

.meta-row {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.meta-label {
  font-weight: 600;
  color: var(--color-primary);
  min-width: 85px;
}

.meta-value {
  color: var(--color-text-muted);
}

.program-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: auto;
}

/* ==========================================================================
   SECCIÓN: PARA EMPRESAS
   ========================================================================== */
.corporate-section {
  padding: 6rem 0;
  background-color: var(--color-primary);
  color: #FFFFFF;
}

.corporate-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.corporate-steps {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  margin: 2.2rem 0;
}

.corp-step {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  background: rgba(255, 255, 255, 0.05);
  padding: 1.3rem 1.6rem;
  border-radius: var(--radius-md);
  border-left: 4px solid var(--color-accent);
}

.corp-step-num {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--color-accent);
}

.corp-step-title {
  font-size: 1.1rem;
  color: #FFFFFF;
  margin-bottom: 0.25rem;
}

.corp-step-desc {
  font-size: 0.9rem;
  color: #cbd5e1;
  line-height: 1.5;
}

.corp-modalities-card {
  background: #FFFFFF;
  color: var(--color-text-main);
  padding: 2.8rem 2.4rem;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
}

.corp-modality-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.8rem;
  padding-bottom: 1.8rem;
  border-bottom: 1px solid var(--color-border);
}

.corp-modality-item:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.modality-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background: var(--color-secondary-light);
  color: var(--color-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}

.modality-title {
  font-size: 1.1rem;
  color: var(--color-primary);
  margin-bottom: 0.25rem;
}

.modality-desc {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  line-height: 1.45;
}

/* ==========================================================================
   SECTORES
   ========================================================================== */
.sectors-section {
  padding: 6rem 0;
  background-color: var(--color-bg-white);
}

.sectors-main-banner {
  background: linear-gradient(135deg, #17365D 0%, #2F75B5 100%);
  color: #FFFFFF;
  padding: 2.5rem 3rem;
  border-radius: var(--radius-lg);
  margin-bottom: 3.5rem;
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.sectors-main-badge {
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #fed7aa;
}

.sectors-main-title {
  font-size: 1.65rem;
  color: #FFFFFF;
  margin: 0.35rem 0 0.5rem;
}

.sectors-main-desc {
  color: #e2e8f0;
  font-size: 1.05rem;
  max-width: 750px;
}

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

.sector-card {
  background: var(--color-bg-light);
  border-radius: var(--radius-md);
  padding: 2rem;
  border: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all var(--transition-normal);
}

.sector-card:hover {
  transform: translateY(-5px);
  background: #FFFFFF;
  box-shadow: var(--shadow-lg);
  border-color: var(--color-secondary);
}

.sector-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-secondary);
  background: var(--color-secondary-light);
  padding: 0.25rem 0.65rem;
  border-radius: var(--radius-full);
  margin-bottom: 0.5rem;
}

.sector-card-title {
  font-size: 1.25rem;
  color: var(--color-primary);
  margin-bottom: 0.5rem;
}

.sector-card-subtitle {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-main);
  margin-bottom: 0.75rem;
}

.sector-card-desc {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  line-height: 1.5;
  margin-bottom: 1.25rem;
}

.sector-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1.2rem;
}

.sector-pill {
  font-size: 0.75rem;
  background: #FFFFFF;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-sm);
}

/* ==========================================================================
   GALERÍA DE FOTOS
   ========================================================================== */
.gallery-section {
  padding: 6rem 0;
  background-color: var(--color-bg-light);
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.gallery-item {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  cursor: pointer;
  background-color: #e2e8f0;
  box-shadow: var(--shadow-sm);
}

.gallery-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.gallery-item:hover .gallery-thumb {
  transform: scale(1.08);
}

.gallery-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(23, 54, 93, 0) 40%, rgba(23, 54, 93, 0.92) 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.4rem;
  color: #FFFFFF;
  opacity: 0.95;
}

.gallery-item-cat {
  font-size: 0.72rem;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #93c5fd;
}

.gallery-item-title {
  font-size: 1rem;
  font-weight: 600;
  color: #FFFFFF;
  margin-top: 0.2rem;
}

/* ==========================================================================
   TESTIMONIOS
   ========================================================================== */
.testimonials-section {
  padding: 6rem 0;
  background-color: var(--color-bg-white);
}

/* Cuadrícula automática para los Testimonios */
.testimonials-grid {
  display: grid;
  /* Fuerza exactamente 3 columnas en pantallas grandes */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
  align-items: stretch;
  width: 100%;
  margin-top: 2rem;
}

.testimonial-card {
  background: var(--color-bg-light);
  border-radius: var(--radius-lg);
  padding: 2.4rem;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform var(--transition-fast);
}

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

.testimonial-stars {
  color: #f59e0b;
  font-size: 1.1rem;
  margin-bottom: 1rem;
}

.testimonial-quote {
  font-size: 1.05rem;
  color: var(--color-text-main);
  line-height: 1.6;
  font-style: italic;
  margin-bottom: 1.8rem;
}

.testimonial-author-wrap {
  display: flex;
  align-items: center;
  gap: 1rem;
  border-top: 1px solid var(--color-border);
  padding-top: 1.2rem;
}

.testimonial-avatar {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-full);
  object-fit: cover;
  border: 2px solid var(--color-secondary);
}

.testimonial-name {
  font-size: 1.05rem;
  color: var(--color-primary);
  font-weight: 700;
}

.testimonial-role {
  font-size: 0.825rem;
  color: var(--color-text-muted);
}

.testimonial-company {
  font-size: 0.825rem;
  color: var(--color-secondary);
  font-weight: 600;
}

/* ==========================================================================
   BLOG DINÁMICO & IDEAS
   ========================================================================== */
.blog-section {
  padding: 6rem 0;
  background-color: var(--color-bg-light);
}

.blog-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-bottom: 2.5rem;
}

.blog-search-box {
  position: relative;
  min-width: 280px;
}

.blog-search-input {
  width: 100%;
  padding: 0.65rem 1rem 0.65rem 2.4rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background-color: #FFFFFF;
  font-size: 0.9rem;
}

.blog-search-input:focus {
  outline: none;
  border-color: var(--color-secondary);
  box-shadow: 0 0 0 3px rgba(47, 117, 181, 0.15);
}

.search-icon-pos {
  position: absolute;
  left: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-light);
  font-size: 0.9rem;
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  margin-top: 3rem;
  /* Espacio para que no choquen con lo de arriba */
}

.blog-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 2rem;
  /* Espacio interno para que el contenido no pegue de los bordes */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* Esto empuja el botón "Leer artículo" siempre hacia abajo */
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

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

.blog-card-body {
  padding: 2.2rem;
}

.blog-card-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin-bottom: 0.9rem;
  flex-wrap: wrap;
}

.blog-category-badge {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-secondary);
  background: var(--color-secondary-light);
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-full);
}

.blog-card-title {
  font-size: 1.35rem;
  color: var(--color-primary);
  margin-bottom: 0.75rem;
  line-height: 1.35;
}

.blog-card-excerpt {
  font-size: 0.95rem;
  color: var(--color-text-muted);
  line-height: 1.55;
  margin-bottom: 1.4rem;
}

.blog-card-footer {
  padding: 1.2rem 2.2rem;
  background-color: var(--color-bg-light);
  border-top: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ==========================================================================
   MAPA & CONTACTO
   ========================================================================== */
.contact-page-layout {
  padding: 5rem 0 6rem;
  background: linear-gradient(180deg, #F5F7FA 0%, #FFFFFF 100%);
}

.contact-split-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.3fr;
  gap: 3.5rem;
  align-items: start;
}

.contact-info-panel {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.info-box-card {
  background: #FFFFFF;
  border-radius: var(--radius-lg);
  padding: 2.4rem;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
}

.info-card-title {
  font-size: 1.35rem;
  color: var(--color-primary);
  margin-bottom: 1.5rem;
  border-bottom: 2px solid var(--color-secondary-light);
  padding-bottom: 0.5rem;
}

.location-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.location-item:last-child {
  margin-bottom: 0;
}

.location-icon {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-sm);
  background: var(--color-secondary-light);
  color: var(--color-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}

.location-item-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 0.2rem;
}

.location-item-desc {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  line-height: 1.45;
}

.map-wrapper {
  position: relative;
  min-height: 340px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--color-border);
}

#interactive-map {
  width: 100%;
  height: 100%;
  min-height: 340px;
  z-index: 1;
}

/* FORMULARIOS CONECTADOS A SHEETS Y DRIVE */
.contact-form-container {
  background: #FFFFFF;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.contact-tab-nav {
  display: flex;
  border-bottom: 2px solid var(--color-border);
  background: var(--color-bg-light);
}

.contact-tab-btn {
  flex: 1;
  padding: 1.2rem 1.4rem;
  background: var(--color-bg-light);
  border: none;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  transition: all var(--transition-fast);
  border-bottom: 3px solid transparent;
}

.contact-tab-btn:hover {
  color: var(--color-primary);
  background: #FFFFFF;
}

.contact-tab-btn.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-accent);
  background: #FFFFFF;
}

.contact-form-body {
  padding: 2.8rem 2.4rem;
}

.form-group-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.4rem;
  margin-bottom: 1.4rem;
}

.form-group {
  margin-bottom: 1.4rem;
  display: flex;
  flex-direction: column;
}

.form-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: 0.45rem;
}

.form-label .required {
  color: #dc2626;
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 0.8rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  background-color: var(--color-bg-white);
  color: var(--color-text-main);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--color-secondary);
  box-shadow: 0 0 0 3px rgba(47, 117, 181, 0.15);
}

.form-textarea {
  resize: vertical;
  min-height: 110px;
}

.file-upload-box {
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-sm);
  padding: 1.2rem;
  text-align: center;
  background: var(--color-bg-light);
  cursor: pointer;
  transition: border-color var(--transition-fast);
}

.file-upload-box:hover {
  border-color: var(--color-secondary);
}

.file-upload-icon {
  font-size: 1.5rem;
  color: var(--color-secondary);
  margin-bottom: 0.3rem;
}

.file-upload-text {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.form-checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  cursor: pointer;
  line-height: 1.45;
}

.form-checkbox-label input[type="checkbox"] {
  margin-top: 0.2rem;
  accent-color: var(--color-secondary);
  width: 16px;
  height: 16px;
}

.integration-status-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--color-secondary-light);
  border: 1px solid #bfdbfe;
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-md);
  margin-bottom: 1.8rem;
  font-size: 0.85rem;
  color: var(--color-primary);
}

.status-indicator-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #10b981;
  display: inline-block;
  margin-right: 0.4rem;
}

/* FAQ SECTION */
.faq-section {
  padding: 5rem 0;
  background-color: var(--color-bg-light);
}

.faq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

.faq-item {
  background: #FFFFFF;
  border-radius: var(--radius-md);
  padding: 1.8rem;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}

.faq-question {
  font-size: 1.1rem;
  color: var(--color-primary);
  margin-bottom: 0.75rem;
}

.faq-answer {
  font-size: 0.925rem;
  color: var(--color-text-muted);
  line-height: 1.55;
}

/* ==========================================================================
   EQUIPO DIRECTIVO & DOCENCIA (FOTOS COMPLETAS Y PROPORCIONADAS)
   ========================================================================== */
.school-grid-team {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.5rem;
  align-items: stretch;
}

.founder-card {
  background: #FFFFFF;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.founder-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-xl);
  border-color: var(--color-secondary);
}

.founder-image-wrap {
  position: relative;
  width: 100%;
  height: 340px;
  overflow: hidden;
  /* Fondo elegante que acompaña a las imágenes completas */
  background-color: var(--color-primary-dark);
  display: flex;
  align-items: center;
  justify-content: center;
}

.founder-img {
  width: 100%;
  height: 100%;
  /* Cambiado a contain para que la imagen se vea completa sin recortes */
  object-fit: contain;
  object-position: center;
  display: block;
  transition: transform 0.5s ease;
}

.founder-card:hover .founder-img {
  transform: scale(1.03);
}

.founder-badge {
  position: absolute;
  bottom: 15px;
  left: 15px;
  background: rgba(23, 54, 93, 0.92);
  backdrop-filter: blur(4px);
  color: #FFFFFF;
  padding: 0.4rem 0.9rem;
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-sm);
  z-index: 2;
}

.founder-body {
  padding: 2.2rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.founder-name {
  font-size: 1.45rem;
  color: var(--color-primary);
  margin-bottom: 0.25rem;
  font-weight: 700;
}

.founder-role {
  font-size: 0.875rem;
  color: var(--color-secondary);
  font-weight: 600;
  margin-bottom: 1.2rem;
}

.founder-bio {
  font-size: 0.925rem;
  color: var(--color-text-muted);
  line-height: 1.6;
  margin-bottom: 1.5rem;
  flex-grow: 1;
}

.founder-quote {
  padding: 1.2rem;
  background-color: var(--color-accent-soft);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-style: italic;
  color: #7c2d12;
  font-weight: 500;
  line-height: 1.5;
}

.founder-quote.quote-secondary {
  background-color: var(--color-secondary-light);
  border-left-color: var(--color-secondary);
  color: var(--color-primary);
}

/* Ajuste responsive para celulares */
@media (max-width: 820px) {
  .school-grid-team {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

/*ESTILOS PARA FORZAR EL DISEÑO DE TARJETAS */

.gallery-card {
  background: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid #f0f2f5;
}

.gallery-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

.gallery-card img {
  width: 100%;
  height: 220px;
  object-fit: cover;
}

.gallery-info {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.gallery-info .category-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: #1a365d;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.5rem;
}

.gallery-info h3 {
  font-size: 1.15rem;
  color: #2d3748;
  margin: 0 0 0.75rem 0;
  line-height: 1.3;
}

.gallery-info p {
  font-size: 0.9rem;
  color: #4a5568;
  margin: 0;
  line-height: 1.5;
}

/* ==========================================================================
   REDES SOCIALES FLOTANTES EN TARJETAS DE EQUIPO
   ========================================================================== */
.founder-social-overlay {
  position: absolute;
  top: 15px;
  right: 15px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 5;
}

.founder-social-overlay a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background-color: rgba(23, 54, 93, 0.85);
  backdrop-filter: blur(4px);
  color: #FFFFFF;
  border-radius: 50%;
  font-size: 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.25s ease;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
}

.founder-social-overlay a:hover {
  background-color: var(--color-accent);
  transform: translateY(-2px) scale(1.08);
  color: #FFFFFF;
}

/* ==========================================================================
   CALL TO ACTION BANNER (GLOBAL)
   ========================================================================== */
.cta-global-banner {
  background: linear-gradient(135deg, #17365D 0%, #0f243f 100%);
  color: #FFFFFF;
  padding: 5rem 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.cta-banner-content {
  max-width: 780px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.cta-banner-title {
  font-size: 2.4rem;
  color: #FFFFFF;
  margin-bottom: 1rem;
  letter-spacing: -0.02em;
}

.cta-banner-desc {
  font-size: 1.15rem;
  color: #cbd5e1;
  margin-bottom: 2.2rem;
  line-height: 1.6;
}

.cta-banner-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  flex-wrap: wrap;
}

/* ==========================================================================
   BOTÓN FLOTANTE DE WHATSAPP
   ========================================================================== */
.whatsapp-widget {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 1500;
}

.whatsapp-btn {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #25D366;
  color: #FFFFFF;
  border: none;
  box-shadow: 0 4px 16px rgba(37, 211, 102, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  cursor: pointer;
  transition: all var(--transition-normal);
  position: relative;
}

.whatsapp-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 22px rgba(37, 211, 102, 0.6);
}

.whatsapp-pulse {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid #25D366;
  animation: pulse-ring 2s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
}

@keyframes pulse-ring {
  0% {
    transform: scale(0.95);
    opacity: 0.8;
  }

  50% {
    transform: scale(1.2);
    opacity: 0;
  }

  100% {
    transform: scale(0.95);
    opacity: 0;
  }
}

.whatsapp-popup {
  position: absolute;
  bottom: 75px;
  right: 0;
  width: 320px;
  background: #FFFFFF;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  border: 1px solid var(--color-border);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(15px);
  transition: all var(--transition-normal);
}

.whatsapp-popup.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.wa-header {
  background: #075E54;
  color: #FFFFFF;
  padding: 1.2rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.wa-header-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #128C7E;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
}

.wa-header-title {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
}

.wa-header-subtitle {
  font-size: 0.75rem;
  color: #dcf8c6;
}

.wa-body {
  padding: 1.2rem;
  background: #ECE5DD;
}

.wa-message-bubble {
  background: #FFFFFF;
  padding: 0.85rem 1rem;
  border-radius: 0 var(--radius-sm) var(--radius-sm) var(--radius-sm);
  font-size: 0.875rem;
  color: var(--color-text-main);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  margin-bottom: 1rem;
  line-height: 1.4;
}

.wa-options-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.wa-option-btn {
  background: #FFFFFF;
  border: 1px solid #d1d5db;
  padding: 0.65rem 0.9rem;
  border-radius: var(--radius-sm);
  font-size: 0.825rem;
  color: var(--color-primary);
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  transition: all var(--transition-fast);
}

.wa-option-btn:hover {
  background: #f0fdf4;
  border-color: #25D366;
  color: #15803d;
}

/* ==========================================================================
   FOOTER INSTITUCIONAL (IDÉNTICO EN TODAS LAS PÁGINAS)
   ========================================================================== */
.site-footer {
  background-color: var(--color-primary);
  color: #FFFFFF;
  padding: 5rem 0 2rem;
  border-top: 4px solid var(--color-accent);
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: 2.5rem;
  align-items: start;
  margin-bottom: 3rem;
}

.footer-brand {
  display: flex;
  flex-direction: column;
}

.footer-logo-img {
  width: 220px !important;
  height: 75px !important;
  background-color: #ffffff;
  border-radius: 12px !important;
  padding: 4px 10px !important;
  object-fit: contain !important;
  display: block;
}

.footer-desc {
  font-size: 0.925rem;
  color: #cbd5e1;
  line-height: 1.55;
  margin-bottom: 1.25rem;
}

.footer-brand-title {
  font-size: 1.45rem;
  color: #FFFFFF;
  margin-bottom: 0.25rem;
}

.footer-brand-sub {
  font-size: 0.75rem;
  color: #93c5fd;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 1.2rem;
}

.footer-motto {
  font-size: 0.925rem;
  color: #cbd5e1;
  line-height: 1.55;
  margin-bottom: 1.5rem;
}

.footer-socials {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.4rem;
  flex-wrap: wrap;
}

.footer-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  transition: all 0.25s ease;
}

.footer-social-link:hover {
  transform: translateY(-3px);
  background: rgba(255, 255, 255, 0.2);
  border-color: var(--color-accent);
}

.social-icon {
  width: 20px;
  height: 20px;
  display: block;
}

.social-icon.facebook-icon {
  fill: #1877F2;
}

.social-icon.instagram-icon {
  width: 20px;
  height: 20px;
}

.social-icon.tiktok-icon {
  fill: #FFFFFF;
}

.social-icon.linkedin-icon {
  fill: #0A66C2;
}

.social-icon.whatsapp-icon {
  fill: #25D366;
}

.social-icon.youtube-icon {
  fill: #FF0000;
}

.footer-purpose {
  font-size: 0.875rem;
  font-style: italic;
  color: #fed7aa;
  padding-left: 0.8rem;
  border-left: 2px solid var(--color-accent);
  margin-top: 1rem;
}

.footer-col-title {
  font-size: 1.05rem;
  color: #FFFFFF;
  margin-bottom: 1.25rem;
  position: relative;
  padding-bottom: 0.5rem;
}

.footer-col-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 25px;
  height: 2px;
  background-color: var(--color-accent);
}

.footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.footer-link {
  color: #cbd5e1;
  font-size: 0.9rem;
  transition: color var(--transition-fast);
}

.footer-link:hover {
  color: #fed7aa;
}

.footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  margin-bottom: 0.85rem;
  font-size: 0.875rem;
  color: #cbd5e1;
}

.footer-contact-item i {
  color: var(--color-accent);
  margin-top: 0.2rem;
}

.footer-bottom {
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.8125rem;
  color: #94a3b8;
}

/* ==========================================================================
   MODALES, LIGHTBOX Y TOAST
   ========================================================================== */
.modal-overlay,
.lightbox-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(15, 23, 42, 0.78);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  opacity: 0;
  visibility: hidden;
  transition: all 0.25s ease;
  padding: 1.5rem;
}

.modal-overlay.active,
.lightbox-overlay.active {
  opacity: 1;
  visibility: visible;
}

.modal-container {
  background-color: #FFFFFF;
  border-radius: var(--radius-lg);
  max-width: 780px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-xl);
  transform: translateY(20px);
  transition: transform 0.3s ease;
  position: relative;
}

.modal-overlay.active .modal-container {
  transform: translateY(0);
}

.modal-header {
  padding: 2rem 2.5rem 1.5rem;
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  background: #FFFFFF;
  z-index: 10;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.modal-close-btn,
.lightbox-close {
  background: var(--color-bg-light);
  border: none;
  font-size: 1.4rem;
  cursor: pointer;
  color: var(--color-text-muted);
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
}

.modal-close-btn:hover,
.lightbox-close:hover {
  background: #e2e8f0;
  color: var(--color-primary);
}

.lightbox-content {
  position: relative;
  max-width: 900px;
  width: 100%;
  text-align: center;
}

.lightbox-img {
  max-height: 75vh;
  max-width: 100%;
  margin: 0 auto;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xl);
  object-fit: contain;
}

.lightbox-caption {
  color: #f1f5f9;
  margin-top: 1rem;
  font-size: 1rem;
}

.lightbox-close {
  position: absolute;
  top: -40px;
  right: 0;
  background: none;
  color: #fff;
  font-size: 2rem;
}

.modal-body {
  padding: 2rem 2.5rem;
}

.modal-section {
  margin-bottom: 2rem;
}

.modal-section-title {
  font-size: 1.15rem;
  color: var(--color-primary);
  margin-bottom: 0.75rem;
  border-bottom: 2px solid var(--color-secondary-light);
  padding-bottom: 0.4rem;
}

.outcomes-list,
.modules-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.outcome-item {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: 0.95rem;
  color: var(--color-text-muted);
}

.outcome-icon {
  color: var(--color-accent);
  font-weight: bold;
  flex-shrink: 0;
}

.module-item {
  padding: 0.8rem 1rem;
  background-color: var(--color-bg-light);
  border-radius: var(--radius-sm);
  font-size: 0.925rem;
  font-weight: 500;
  color: var(--color-text-main);
  border-left: 3px solid var(--color-secondary);
}

.modal-footer {
  padding: 1.5rem 2.5rem;
  background-color: var(--color-bg-light);
  border-top: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.toast-container {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.toast {
  background: #FFFFFF;
  border-radius: var(--radius-md);
  padding: 1rem 1.4rem;
  box-shadow: var(--shadow-xl);
  display: flex;
  align-items: center;
  gap: 0.9rem;
  border-left: 4px solid var(--color-primary);
  min-width: 320px;
  max-width: 420px;
  animation: toast-in 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.toast.success {
  border-left-color: var(--color-success);
}

.toast.error {
  border-left-color: #dc2626;
}

.toast-icon {
  font-size: 1.3rem;
}

.toast.success .toast-icon {
  color: var(--color-success);
}

.toast.error .toast-icon {
  color: #dc2626;
}

.toast-title {
  font-size: 0.925rem;
  font-weight: 700;
  color: var(--color-primary);
}

.toast-desc {
  font-size: 0.825rem;
  color: var(--color-text-muted);
}

@keyframes toast-in {
  from {
    transform: translateX(100%);
    opacity: 0;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}

[data-animate] {
  opacity: 1;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-animate].animated {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================================
   RESPONSIVE DESIGN & BREAKPOINTS
   ========================================================================== */
@media (max-width: 1024px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .hero-content {
    max-width: 100%;
  }

  .hero-title {
    font-size: 2.6rem;
  }

  /* Ajustes para tabletas y pantallas medianas del carrusel deslizable */
  .services-slider-container {
    position: relative;
    width: 100%;
  }

  .services-grid {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 1.5rem;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 1rem 0.5rem 2rem 0.5rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  .service-card {
    flex: 0 0 300px !important;
    max-width: 350px !important;
    scroll-snap-align: start;
  }

  .sectors-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .contact-split-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}

@media (max-width: 820px) {
  .main-navigation {
    position: fixed;
    top: var(--header-height);
    left: 0;
    width: 100%;
    background: #FFFFFF;
    flex-direction: column;
    padding: 2rem 1.5rem;
    box-shadow: var(--shadow-xl);
    border-bottom: 1px solid var(--color-border);
    transform: translateY(-120%);
    opacity: 1;
    visibility: hidden;
    transition: all 0.3s ease;
  }

  .main-navigation.open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }

  .nav-menu {
    flex-direction: column;
    width: 100%;
    gap: 1.2rem;
    align-items: flex-start;
  }

  .menu-toggle {
    display: block;
  }

  .dual-cards-grid,
  .challenge-grid,
  .school-grid,
  .programs-grid,
  .corporate-grid,
  .testimonials-grid,
  .blog-grid,
  .faq-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2rem;
    align-items: stretch;
    margin-top: 2rem;
    width: 100%;
  }

  .methodology-steps-grid {
    grid-template-columns: 1fr;
  }

  .form-group-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .hero-title {
    font-size: 2.2rem;
  }

  .page-hero-title {
    font-size: 2rem;
  }

  .section-title {
    font-size: 1.85rem;
  }

  .contact-form-body {
    padding: 1.8rem 1.5rem;
  }
}

@media (max-width: 580px) {
  .hero-title {
    font-size: 1.85rem;
  }

  .hero-actions {
    flex-direction: column;
    width: 100%;
  }

  .hero-actions .btn {
    width: 100%;
  }

  .services-grid,
  .sectors-grid,
  .gallery-grid,
  .footer-grid {
    grid-template-columns: 1fr;
  }

  .contact-tab-nav {
    flex-direction: column;
  }

  .whatsapp-popup {
    width: calc(100vw - 32px);
    right: -14px;
  }
}

/* ==========================================================================
   COMPONENTES ESPECÍFICOS PARA PÁGINAS DEDICADAS
   ========================================================================== */
.manifesto-box {
  background: linear-gradient(135deg, #17365D 0%, #1c4475 100%);
  color: #FFFFFF;
  border-radius: var(--radius-lg);
  padding: 3.5rem;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border-left: 6px solid var(--color-accent);
}

.manifesto-quote-icon {
  position: absolute;
  top: 1.5rem;
  right: 2rem;
  font-size: 5rem;
  color: rgba(255, 255, 255, 0.06);
  pointer-events: none;
}

.manifesto-title {
  font-size: 1.85rem;
  color: #FFFFFF;
  margin-bottom: 1.25rem;
  letter-spacing: -0.02em;
}

.manifesto-text {
  font-size: 1.15rem;
  line-height: 1.7;
  color: #e2e8f0;
  margin-bottom: 1.8rem;
}

.manifesto-signature {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}

.manifesto-signature img {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 2px solid var(--color-accent);
  object-fit: cover;
}

.manifesto-author {
  font-weight: 700;
  color: #FFFFFF;
  font-size: 1rem;
}

.manifesto-role {
  font-size: 0.825rem;
  color: #93c5fd;
}

.school-pillars-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 3.5rem;
}

.pillar-card {
  background: #FFFFFF;
  border-radius: var(--radius-md);
  padding: 2.2rem 1.8rem;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-normal);
}

.pillar-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-secondary);
}

.pillar-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-sm);
  background: var(--color-secondary-light);
  color: var(--color-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  margin-bottom: 1.25rem;
}

.pillar-title {
  font-size: 1.2rem;
  color: var(--color-primary);
  margin-bottom: 0.6rem;
}

.pillar-desc {
  font-size: 0.925rem;
  color: var(--color-text-muted);
  line-height: 1.55;
}

.comparison-table-wrapper {
  background: #FFFFFF;
  border-radius: var(--radius-lg);
  overflow-x: auto;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
  margin: 3rem 0;
}

.comparison-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 0.95rem;
}

.comparison-table th {
  padding: 1.25rem 1.5rem;
  font-weight: 700;
  border-bottom: 2px solid var(--color-border);
}

.comparison-table th:first-child {
  width: 25%;
  background-color: var(--color-bg-light);
  color: var(--color-primary);
}

.comparison-table th:nth-child(2) {
  width: 37.5%;
  background-color: #f8fafc;
  color: var(--color-text-muted);
}

.comparison-table th:nth-child(3) {
  width: 37.5%;
  background-color: #eff6ff;
  color: var(--color-primary);
  border-top: 3px solid var(--color-accent);
}

.comparison-table td {
  padding: 1.1rem 1.5rem;
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
  line-height: 1.5;
}

.comparison-table td:first-child {
  font-weight: 600;
  color: var(--color-primary);
  background-color: var(--color-bg-light);
}

.comparison-table td:nth-child(2) {
  color: #64748b;
  background-color: #fafbfc;
}

.comparison-table td:nth-child(3) {
  color: var(--color-primary);
  background-color: #f0f7ff;
  font-weight: 500;
}

.comparison-tag-red {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: #dc2626;
  font-weight: 600;
  font-size: 0.85rem;
  margin-bottom: 0.35rem;
}

.comparison-tag-blue {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: #166534;
  font-weight: 600;
  font-size: 0.85rem;
  margin-bottom: 0.35rem;
}

.format-advisor-box {
  background: linear-gradient(135deg, #f8fafc 0%, #edf2f7 100%);
  border-radius: var(--radius-lg);
  padding: 2.5rem;
  border: 2px dashed var(--color-secondary);
  margin-top: 3.5rem;
}

.advisor-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin: 1.8rem 0 2rem;
}

.advisor-choice {
  background: #FFFFFF;
  border-radius: var(--radius-md);
  padding: 1.4rem;
  border: 1px solid var(--color-border);
  cursor: pointer;
  transition: all var(--transition-fast);
  text-align: center;
}

.advisor-choice:hover,
.advisor-choice.active {
  border-color: var(--color-accent);
  background-color: #fffaf5;
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.advisor-choice-icon {
  font-size: 1.8rem;
  color: var(--color-secondary);
  margin-bottom: 0.75rem;
}

.advisor-choice.active .advisor-choice-icon {
  color: var(--color-accent);
}

.advisor-choice-title {
  font-weight: 700;
  color: var(--color-primary);
  font-size: 1rem;
  margin-bottom: 0.3rem;
}

.advisor-choice-desc {
  font-size: 0.825rem;
  color: var(--color-text-muted);
}

.advisor-result-card {
  background: #FFFFFF;
  border-radius: var(--radius-md);
  padding: 1.6rem 2rem;
  border-left: 4px solid var(--color-accent);
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.2rem;
}

.timeline-container {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin: 2.5rem 0;
  position: relative;
}

.timeline-step-row {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 1.5rem;
  align-items: center;
}

.timeline-step-badge {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-accent);
  font-size: 1.5rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
  border: 3px solid #FFFFFF;
}

.timeline-step-content {
  background: #FFFFFF;
  border-radius: var(--radius-md);
  padding: 1.6rem 2rem;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-xs);
  transition: transform var(--transition-fast);
}

.timeline-step-content:hover {
  transform: translateX(6px);
  border-color: var(--color-secondary);
}

.timeline-step-title {
  font-size: 1.15rem;
  color: var(--color-primary);
  margin-bottom: 0.4rem;
}

.timeline-step-desc {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  line-height: 1.5;
}

.sector-engineering-hero {
  background: linear-gradient(135deg, #17365D 0%, #204b7f 100%);
  color: #FFFFFF;
  border-radius: var(--radius-xl);
  padding: 3.5rem;
  margin-bottom: 4rem;
  box-shadow: var(--shadow-xl);
  position: relative;
  overflow: hidden;
}

.engineering-badge-strip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background-color: var(--color-accent);
  color: #FFFFFF;
  font-size: 0.8125rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.4rem 1rem;
  border-radius: var(--radius-full);
  margin-bottom: 1.25rem;
}

.sector-engineering-title {
  font-size: 2.2rem;
  color: #FFFFFF;
  margin-bottom: 1rem;
  letter-spacing: -0.02em;
}

.sector-engineering-desc {
  font-size: 1.1rem;
  color: #e2e8f0;
  line-height: 1.65;
  max-width: 820px;
  margin-bottom: 2rem;
}

.engineering-highlights-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-bottom: 2.5rem;
}

.eng-highlight-card {
  background: rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  padding: 1.4rem;
  border: 1px solid rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(4px);
}

.eng-highlight-icon {
  font-size: 1.3rem;
  color: var(--color-accent);
  margin-bottom: 0.6rem;
}

.eng-highlight-title {
  font-size: 0.975rem;
  color: #FFFFFF;
  font-weight: 700;
  margin-bottom: 0.35rem;
}

.eng-highlight-desc {
  font-size: 0.85rem;
  color: #cbd5e1;
  line-height: 1.45;
}

.sector-scope-alert {
  background-color: #fffbeb;
  border-left: 4px solid #f59e0b;
  padding: 1rem 1.4rem;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  color: #92400e;
  margin-top: 1rem;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.video-spotlight-section {
  background: #FFFFFF;
  border-radius: var(--radius-xl);
  padding: 3rem;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--color-border);
  margin-bottom: 4rem;
}

.video-spotlight-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 2.5rem;
  align-items: center;
}

.video-spotlight-player {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #000;
  box-shadow: var(--shadow-md);
  aspect-ratio: 16 / 9;
  position: relative;
}

.video-spotlight-player iframe {
  width: 100%;
  height: 100%;
  border: none;
}

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

.resource-card {
  background: #FFFFFF;
  border-radius: var(--radius-lg);
  padding: 2.2rem;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all var(--transition-normal);
}

.resource-card:hover {
  transform: translateY(-5px);
  border-color: var(--color-secondary);
  box-shadow: var(--shadow-lg);
}

.resource-type-badge {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-accent);
  background-color: var(--color-accent-soft);
  padding: 0.3rem 0.75rem;
  border-radius: var(--radius-full);
  display: inline-block;
  margin-bottom: 1rem;
}

.resource-title {
  font-size: 1.2rem;
  color: var(--color-primary);
  margin-bottom: 0.6rem;
  line-height: 1.35;
}

.resource-desc {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  line-height: 1.5;
  margin-bottom: 1.5rem;
}

.resource-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.825rem;
  color: #64748b;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
  margin-bottom: 1.2rem;
}

.calendar-banner-box {
  background: linear-gradient(135deg, #0f243f 0%, #17365D 100%);
  color: #FFFFFF;
  border-radius: var(--radius-lg);
  padding: 2.5rem 3rem;
  margin-bottom: 3.5rem;
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.8rem;
}

.calendar-info-title {
  font-size: 1.5rem;
  color: #FFFFFF;
  margin-bottom: 0.35rem;
}

.calendar-info-desc {
  color: #cbd5e1;
  font-size: 0.95rem;
}

@media (max-width: 900px) {
  .manifesto-box {
    padding: 2.5rem 1.8rem;
  }

  .school-pillars-grid {
    grid-template-columns: 1fr;
  }

  .advisor-grid {
    grid-template-columns: 1fr;
  }

  .engineering-highlights-grid {
    grid-template-columns: 1fr;
  }

  .video-spotlight-grid {
    grid-template-columns: 1fr;
  }

  .resources-toolkit-grid {
    grid-template-columns: 1fr;
  }

  .comparison-table-wrapper {
    font-size: 0.85rem;
  }

  /* ==========================================================================
   ESTILOS DE TARJETAS DE SECTORES COMPLEMENTARIOS
   ========================================================================== */
  .sectors-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
  }

  .sector-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 2.2rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  .sector-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
  }

  .sector-badge {
    display: inline-block;
    background: #ebf4ff;
    color: #1e40af;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.35rem 0.8rem;
    border-radius: 9999px;
    margin-bottom: 1.2rem;
    align-self: flex-start;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .sector-title {
    font-size: 1.35rem;
    color: #0f172a;
    margin-bottom: 0.6rem;
    font-weight: 800;
    line-height: 1.3;
  }

  .sector-subtitle {
    font-size: 1rem;
    color: #475569;
    margin-bottom: 1.2rem;
    font-weight: 600;
    line-height: 1.4;
  }

  .sector-desc {
    font-size: 0.95rem;
    color: #64748b;
    margin-bottom: 1.5rem;
    line-height: 1.6;
    flex-grow: 1;
  }

  .sector-cases {
    background: #f8fafc;
    padding: 1.2rem;
    border-radius: 8px;
    font-size: 0.9rem;
    color: #334155;
    margin-bottom: 1.5rem;
    border-left: 4px solid #3b82f6;
    line-height: 1.5;
  }

  .sector-cases strong {
    color: #0f172a;
    display: block;
    margin-bottom: 0.4rem;
  }

  .sector-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: auto;
  }

  .sector-tag {
    background: #f1f5f9;
    color: #475569;
    font-size: 0.8rem;
    padding: 0.3rem 0.8rem;
    border-radius: 6px;
    font-weight: 600;
  }

  /* ==========================================================================
   ESTILOS DE TARJETAS DE PROGRAMAS (programas.html)
   ========================================================================== */
  .program-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 2.2rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
  }

  .program-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
  }

  .program-badge {
    display: inline-block;
    background: #ebf4ff;
    color: #1e40af;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.4rem 0.9rem;
    border-radius: 9999px;
    align-self: flex-start;
    margin-bottom: 1.2rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .program-status {
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: 1.2rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
  }

  .status-abierto {
    color: #16a34a;
  }

  .status-proximamente {
    color: #d97706;
  }

  .status-consulta {
    color: #2563eb;
  }

  .status-empresas {
    color: #475569;
  }

  .program-status::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
  }

  .status-abierto::before {
    background-color: #16a34a;
  }

  .status-proximamente::before {
    background-color: #d97706;
  }

  .status-consulta::before {
    background-color: #2563eb;
  }

  .status-empresas::before {
    background-color: #475569;
  }

  .program-title {
    font-size: 1.4rem;
    color: #0f172a;
    margin-bottom: 0.8rem;
    font-weight: 800;
    line-height: 1.35;
  }

  .program-summary {
    font-size: 0.95rem;
    color: #475569;
    margin-bottom: 1.8rem;
    line-height: 1.6;
    flex-grow: 1;
  }

  .program-details {
    list-style: none;
    padding: 0;
    margin: 0 0 1.8rem 0;
    background: #f8fafc;
    padding: 1.2rem;
    border-radius: 8px;
    border-left: 4px solid #3b82f6;
  }

  .program-details li {
    font-size: 0.9rem;
    color: #334155;
    margin-bottom: 0.6rem;
    line-height: 1.5;
  }

  .program-details li:last-child {
    margin-bottom: 0;
  }

  .program-details strong {
    color: #0f172a;
    font-weight: 700;
  }
}

/* ======================================================================
   AMPLIACIÓN EDITABLE — IMÁGENES DE LAS TARJETAS SECTORIALES
   Las imágenes son opcionales: si un sector no define "image" en data.json,
   la tarjeta conserva su diseño sin imagen. No modifica el header ni footer.
   ====================================================================== */
.sector-card-image {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-md, 12px) var(--radius-md, 12px) 0 0;
  background: var(--color-bg-light, #f3f6fa);
}

.sector-card {
  overflow: hidden;
}

.sector-card .sector-header {
  padding-top: 1rem;
}

@media (max-width: 640px) {
  .sector-card-image {
    aspect-ratio: 4 / 3;
  }
}


/* ==========================================================================
   AJUSTE DE CUADRÍCULA DE SECTORES — OCTUBRE 2026
   Evita columnas vacías por un número impar de tarjetas y adapta la cuadrícula
   al ancho real disponible. No modifica el header ni el footer institucional.
   ========================================================================== */
.sectors-section .sectors-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: clamp(1rem, 2vw, 2rem);
  margin-top: 2rem;
}

.sectors-section .sector-card {
  min-width: 0;
  height: 100%;
  box-sizing: border-box;
  justify-content: flex-start;
}

.sectors-section .sector-card .sector-desc {
  flex-grow: 1;
}

@media (max-width: 1000px) {
  .sectors-section .sectors-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .sectors-section .sectors-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .sectors-section .sector-card {
    padding: 1.35rem;
  }
}


/* SECTORES: reglas consolidadas al final para prevalecer sobre estilos antiguos */
.sectors-section,
.sectors-main,
.sectors-content {
  width: 100%;
}

.sectors-section .sectors-grid,
.sectors-grid,
#sectors-container,
#sectors-grid,
#sector-grid,
[data-sectors-container] {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: clamp(1rem, 2vw, 2rem);
  width: 100%;
  margin-top: 2rem;
}

.sectors-section .sector-card,
.sector-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-width: 0;
  height: 100%;
  padding: 1.6rem;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: var(--radius-lg, 16px);
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(15, 23, 42, .08));
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.sectors-section .sector-card:hover,
.sector-card:hover {
  transform: translateY(-4px);
  border-color: var(--color-secondary, #2f75b5);
  box-shadow: var(--shadow-lg, 0 10px 25px rgba(23, 54, 93, .12));
}

.sector-card-image {
  display: block;
  width: calc(100% + 3.2rem);
  max-width: none;
  height: 190px;
  margin: -1.6rem -1.6rem 1.25rem;
  object-fit: cover;
  background: var(--color-bg-light, #f5f7fa);
}

.sector-header {
  padding-top: 0;
}

.sector-badge {
  display: inline-block;
  margin-bottom: .75rem;
  padding: .3rem .7rem;
  border-radius: 999px;
  background: var(--color-secondary-light, #eaf2fb);
  color: var(--color-primary, #17365d);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.sector-card-title {
  margin: 0 0 .65rem;
  color: var(--color-primary, #17365d);
  font-size: 1.2rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.sector-card-subtitle {
  margin: 0 0 .75rem;
  color: var(--color-text-main, #1e293b);
  font-size: .92rem;
  font-weight: 700;
  line-height: 1.5;
}

.sector-card-desc {
  margin: 0 0 1rem;
  color: var(--color-text-muted, #475569);
  font-size: .9rem;
  line-height: 1.65;
}

.sector-card-content {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.sector-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: 0 0 1rem;
}

.sector-pill {
  display: inline-block;
  padding: .25rem .55rem;
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: 999px;
  background: var(--color-bg-light, #f5f7fa);
  color: var(--color-text-muted, #475569);
  font-size: .74rem;
  line-height: 1.4;
}

.sector-cases {
  margin: 0 0 1rem;
  padding: .85rem;
  border: 1px solid var(--color-border, #e2e8f0);
  border-left: 3px solid var(--color-accent, #e67e22);
  border-radius: var(--radius-sm, 6px);
  background: var(--color-bg-light, #f5f7fa);
  color: var(--color-text-main, #1e293b);
  font-size: .84rem;
  line-height: 1.6;
}

.sector-cta {
  align-self: flex-start;
  margin-top: auto;
  white-space: normal;
  text-align: left;
}

.sectors-empty {
  grid-column: 1 / -1;
  padding: 2rem;
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: 12px;
  background: var(--color-bg-light, #f5f7fa);
  color: var(--color-text-main, #1e293b);
}

.sectors-empty p {
  margin-top: .5rem;
  color: var(--color-text-muted, #475569);
}

@media (max-width: 1000px) {

  .sectors-section .sectors-grid,
  .sectors-grid,
  #sectors-container,
  #sectors-grid,
  #sector-grid,
  [data-sectors-container] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {

  .sectors-section .sectors-grid,
  .sectors-grid,
  #sectors-container,
  #sectors-grid,
  #sector-grid,
  [data-sectors-container] {
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
  }

  .sectors-section .sector-card,
  .sector-card {
    padding: 1.25rem;
  }

  .sector-card-image {
    width: calc(100% + 2.5rem);
    height: 180px;
    margin: -1.25rem -1.25rem 1rem;
  }
}

/* =====================================================================
   CATÁLOGO DE PROGRAMAS — estilos integrados desde el antiguo programas.css
   ===================================================================== */
/* Estilos complementarios de esta página. La identidad general permanece en style.css. */
.programs-section {
  padding: 5rem 0;
  background: var(--color-bg-light)
}

.programs-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  align-items: stretch
}

.program-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
  padding: 1.6rem;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 24px rgba(16, 43, 78, .07);
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
  overflow: hidden
}

.program-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, var(--color-secondary), var(--color-accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s ease
}

.program-card:hover {
  transform: translateY(-7px);
  box-shadow: 0 18px 40px rgba(16, 43, 78, .14);
  border-color: rgba(230, 126, 34, .45)
}

.program-card:hover::before {
  transform: scaleX(1)
}

.program-card[hidden] {
  display: none !important
}

.program-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: .75rem;
  flex-wrap: wrap
}

.program-badge,
.program-status {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  width: fit-content;
  border-radius: 999px;
  padding: .45rem .75rem;
  font-size: .72rem;
  font-weight: 800;
  line-height: 1.35
}

.program-badge {
  background: #edf3fa;
  color: var(--color-primary)
}

.program-status {
  background: #e9f8ef;
  color: #17663b
}

.status-proximamente {
  background: #fff4e5;
  color: #92500b
}

.status-consulta {
  background: #edf2ff;
  color: #344e91
}

.status-empresas {
  background: #f1eaff;
  color: #6841a5
}

.program-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, #edf4fb, #fff2e7);
  color: var(--color-primary);
  font-size: 1.25rem;
  margin-bottom: .1rem
}

.program-title {
  font-size: 1.17rem;
  line-height: 1.45;
  color: var(--color-primary);
  margin: 0
}

.program-summary {
  color: var(--color-text-muted);
  font-size: .92rem;
  line-height: 1.7;
  margin: 0
}

.program-details {
  display: grid;
  gap: .75rem;
  list-style: none;
  margin: .2rem 0 1rem;
  padding: 0
}

.program-details li {
  display: flex;
  gap: .6rem;
  align-items: flex-start;
  color: var(--color-text-muted);
  font-size: .84rem;
  line-height: 1.55
}

.program-details li i {
  width: 16px;
  margin-top: .2rem;
  color: var(--color-secondary);
  flex-shrink: 0
}

.program-details strong {
  color: var(--color-text-main)
}

.program-card .btn {
  margin-top: auto;
  width: 100%;
  justify-content: center;
  text-align: center
}

.programs-filter-bar {
  display: flex;
  justify-content: center;
  gap: .65rem;
  flex-wrap: wrap;
  margin: 0 auto 2rem
}

.filter-btn {
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: #fff;
  color: var(--color-text-main);
  padding: .7rem 1rem;
  font: inherit;
  font-size: .82rem;
  font-weight: 700;
  cursor: pointer;
  transition: all .2s ease
}

.filter-btn:hover,
.filter-btn.active {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
  box-shadow: 0 5px 14px rgba(16, 43, 78, .16)
}

.program-search-wrap {
  position: relative;
  max-width: 600px;
  margin: 0 auto 2rem
}

.program-search-wrap>i {
  position: absolute;
  left: 1.1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-light)
}

.program-search-wrap input {
  width: 100%;
  padding: .95rem 1rem .95rem 2.8rem;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  font: inherit;
  font-size: .9rem;
  background: #fff;
  box-shadow: var(--shadow-sm);
  outline-offset: 3px
}

.program-results-message {
  text-align: center;
  color: var(--color-text-muted);
  font-size: .9rem;
  min-height: 1.5rem;
  margin: -.75rem 0 1.5rem
}

.calendar-banner-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 2.4rem;
  border-radius: var(--radius-lg);
  background: linear-gradient(120deg, #102b4e, #17456b 65%, #20627a);
  color: #fff;
  box-shadow: 0 18px 40px rgba(16, 43, 78, .18)
}

.calendar-banner-box .calendar-info-title {
  color: #fff;
  font-size: clamp(1.45rem, 2.5vw, 2rem);
  margin: .3rem 0 .6rem
}

.calendar-info-desc {
  color: rgba(255, 255, 255, .82);
  line-height: 1.7;
  max-width: 650px;
  margin: 0
}

.calendar-actions {
  display: flex;
  gap: .8rem;
  flex-wrap: wrap;
  flex-shrink: 0
}

.admission-list {
  display: grid;
  gap: 1rem;
  margin-top: 1.5rem
}

.admission-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem
}

.admission-icon {
  display: grid;
  place-items: center;
  flex: 0 0 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--color-secondary-light);
  color: var(--color-secondary)
}

.admission-item p {
  font-size: .9rem;
  color: var(--color-text-muted);
  line-height: 1.65;
  margin: .25rem 0 0
}

.incompany-card {
  height: 100%;
  padding: 2.3rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg-light);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.5rem
}

.incompany-card h3 {
  font-size: 1.5rem;
  color: var(--color-primary);
  line-height: 1.4;
  margin: .8rem 0
}

.incompany-card p,
.incompany-card li {
  font-size: .9rem;
  color: var(--color-text-muted);
  line-height: 1.7
}

.incompany-card ul {
  padding-left: 1.2rem;
  margin: 1rem 0 0
}

.editorial-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem
}

.editorial-card {
  padding: 1.4rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: #fff;
  transition: transform .25s ease, box-shadow .25s ease
}

.editorial-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(16, 43, 78, .09)
}

.editorial-card h3 {
  color: var(--color-primary);
  font-size: 1rem;
  margin: 0 0 .5rem
}

.editorial-card p {
  font-size: .88rem;
  line-height: 1.65;
  color: var(--color-text-muted);
  margin: 0
}

.no-results {
  grid-column: 1/-1;
  padding: 2rem;
  text-align: center;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-lg);
  color: var(--color-text-muted);
  background: #fff
}

@media(max-width:1000px) {
  .programs-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .editorial-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .calendar-banner-box {
    align-items: flex-start;
    flex-direction: column
  }
}

@media(max-width:620px) {
  .programs-section {
    padding: 3.5rem 0
  }

  .programs-grid,
  .editorial-grid {
    grid-template-columns: 1fr
  }

  .program-card {
    padding: 1.25rem
  }

  .calendar-banner-box {
    padding: 1.5rem
  }

  .calendar-actions {
    width: 100%
  }

  .calendar-actions .btn {
    width: 100%;
    justify-content: center
  }

  .programs-filter-bar {
    justify-content: flex-start
  }

  .filter-btn {
    font-size: .76rem;
    padding: .6rem .8rem
  }
}

@media(prefers-reduced-motion:reduce) {

  .program-card,
  .program-card::before,
  .filter-btn,
  .editorial-card {
    transition: none !important
  }

  .program-card:hover,
  .editorial-card:hover {
    transform: none
  }
}


/* ==========================================================================
   FOOTER INSTITUCIONAL (IDÉNTICO EN TODAS LAS PÁGINAS)
   ========================================================================== */
.site-footer {
  background-color: var(--color-primary);
  color: #FFFFFF;
  padding: 5rem 0 2rem;
  border-top: 4px solid var(--color-accent);
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: 2.5rem;
  align-items: start;
  margin-bottom: 3rem;
}

.footer-brand {
  display: flex;
  flex-direction: column;
}

.footer-logo-img {
  width: 220px !important;
  height: 75px !important;
  background-color: #ffffff;
  border-radius: 12px !important;
  padding: 4px 10px !important;
  object-fit: contain !important;
  display: block;
}

.footer-desc {
  font-size: 0.925rem;
  color: #cbd5e1;
  line-height: 1.55;
  margin-bottom: 1.25rem;
}

.footer-brand-title {
  font-size: 1.45rem;
  color: #FFFFFF;
  margin-bottom: 0.25rem;
}

.footer-brand-sub {
  font-size: 0.75rem;
  color: #93c5fd;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 1.2rem;
}

.footer-motto {
  font-size: 0.925rem;
  color: #cbd5e1;
  line-height: 1.55;
  margin-bottom: 1.5rem;
}

.footer-socials {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.4rem;
  flex-wrap: wrap;
}

.footer-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  transition: all 0.25s ease;
}

.footer-social-link:hover {
  transform: translateY(-3px);
  background: rgba(255, 255, 255, 0.2);
  border-color: var(--color-accent);
}

.social-icon {
  width: 20px;
  height: 20px;
  display: block;
}

.social-icon.facebook-icon {
  fill: #1877F2;
}

.social-icon.instagram-icon {
  width: 20px;
  height: 20px;
}

.social-icon.tiktok-icon {
  fill: #FFFFFF;
}

.social-icon.linkedin-icon {
  fill: #0A66C2;
}

.social-icon.whatsapp-icon {
  fill: #25D366;
}

.social-icon.youtube-icon {
  fill: #FF0000;
}

.footer-purpose {
  font-size: 0.875rem;
  font-style: italic;
  color: #fed7aa;
  padding-left: 0.8rem;
  border-left: 2px solid var(--color-accent);
  margin-top: 1rem;
}

.footer-col-title {
  font-size: 1.05rem;
  color: #FFFFFF;
  margin-bottom: 1.25rem;
  position: relative;
  padding-bottom: 0.5rem;
}

.footer-col-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 25px;
  height: 2px;
  background-color: var(--color-accent);
}

.footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.footer-link {
  color: #cbd5e1;
  font-size: 0.9rem;
  transition: color var(--transition-fast);
}

.footer-link:hover {
  color: #fed7aa;
}

.footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  margin-bottom: 0.85rem;
  font-size: 0.875rem;
  color: #cbd5e1;
}

.footer-contact-item i {
  color: var(--color-accent);
  margin-top: 0.2rem;
}

.footer-bottom {
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.8125rem;
  color: #94a3b8;
}


/* =====================================================================
   SISTEMA VISUAL GLOBAL DE TARJETAS — RED LÍDER PERÚ
   Estilo: profesional premium | densidad equilibrada | imágenes mixtas

   Esta sección unifica los ajustes globales sin borrar los estilos propios
   de cada componente, las cuadrículas de páginas ni la lógica de formularios.
   No modifica HTML, JavaScript, data.json ni la integración con Google Sheets.
   ===================================================================== */

/* Base compartida: dimensiones, bordes y sombras coherentes. */
:where(.card,
  .program-card,
  .sector-card,
  .service-card,
  .testimonial-card,
  .blog-card,
  .resource-card,
  .gallery-card,
  .feature-card,
  .contact-card,
  .content-card,
  .editorial-card,
  .founder-card,
  .dual-route-card,
  .pillar-card,
  .incompany-card,
  .corp-modalities-card,
  .advisor-result-card,
  .eng-highlight-card,
  .info-box-card) {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  border: 1px solid var(--color-border, #E2E8F0);
  border-radius: var(--radius-lg, 16px);
  box-shadow: var(--shadow-md, 0 4px 12px rgba(23, 54, 93, 0.08));
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease;
}

/* Elevación discreta solo en dispositivos con cursor. */
@media (hover: hover) and (pointer: fine) {

  :where(.card,
    .program-card,
    .sector-card,
    .service-card,
    .testimonial-card,
    .blog-card,
    .resource-card,
    .gallery-card,
    .feature-card,
    .contact-card,
    .content-card,
    .editorial-card,
    .founder-card,
    .dual-route-card,
    .pillar-card,
    .incompany-card,
    .corp-modalities-card,
    .advisor-result-card,
    .eng-highlight-card,
    .info-box-card):hover {
    box-shadow: var(--shadow-lg, 0 10px 25px rgba(23, 54, 93, 0.12));
    border-color: rgba(47, 117, 181, 0.38);
  }

  :where(.program-card,
    .sector-card,
    .service-card,
    .testimonial-card,
    .blog-card,
    .resource-card,
    .gallery-card,
    .feature-card,
    .contact-card,
    .content-card,
    .editorial-card,
    .founder-card,
    .dual-route-card,
    .pillar-card,
    .incompany-card,
    .advisor-result-card,
    .eng-highlight-card,
    .info-box-card):hover {
    transform: translateY(-3px);
  }
}

/* Evita que títulos, textos largos o elementos internos ensanchen tarjetas. */
:where(.card,
  .program-card,
  .sector-card,
  .service-card,
  .testimonial-card,
  .blog-card,
  .resource-card,
  .gallery-card,
  .feature-card,
  .contact-card,
  .content-card,
  .editorial-card,
  .founder-card,
  .dual-route-card,
  .pillar-card,
  .incompany-card,
  .corp-modalities-card,
  .advisor-result-card,
  .eng-highlight-card,
  .info-box-card)>* {
  min-width: 0;
  max-width: 100%;
}

:where(.card,
  .program-card,
  .sector-card,
  .service-card,
  .testimonial-card,
  .blog-card,
  .resource-card,
  .gallery-card,
  .feature-card,
  .contact-card,
  .content-card,
  .editorial-card,
  .founder-card,
  .dual-route-card,
  .pillar-card,
  .incompany-card,
  .corp-modalities-card,
  .advisor-result-card,
  .eng-highlight-card,
  .info-box-card) :where(h1, h2, h3, h4, p, a, span, small, strong, li) {
  overflow-wrap: anywhere;
  word-break: normal;
}

/*
   Imágenes mixtas:
   - Las imágenes principales directas de tarjetas genéricas usan recorte
     uniforme y una altura adaptable.
   - Se excluyen avatares, miniaturas y fotos de sectores con reglas propias.
   - Los logotipos se muestran completos y sin deformación.
*/
:where(.card,
  .program-card,
  .service-card,
  .blog-card,
  .resource-card,
  .gallery-card,
  .feature-card,
  .contact-card)>img:not(.testimonial-avatar):not(.founder-img):not(.gallery-thumb):not(.sector-card-image):not(.brand-logo-img):not(.footer-logo-img):not(.logo-img):not(.company-logo):not(.payment-logo) {
  display: block;
  width: 100%;
  max-width: 100%;
  height: clamp(180px, 20vw, 240px);
  object-fit: cover;
  object-position: center;
}

:where(.card,
  .program-card,
  .sector-card,
  .service-card,
  .blog-card,
  .resource-card,
  .feature-card,
  .contact-card) img:is(.brand-logo-img, .footer-logo-img, .logo-img, .company-logo, .payment-logo) {
  height: auto;
  object-fit: contain;
}

:where(.card,
  .program-card,
  .sector-card,
  .service-card,
  .testimonial-card,
  .blog-card,
  .resource-card,
  .gallery-card,
  .feature-card,
  .contact-card) :where(img, picture, video, iframe, svg) {
  min-width: 0;
  max-width: 100%;
}

/* Mantener los elementos de las cuadrículas dentro de su columna. */
:where(.programs-grid,
  .sectors-grid,
  .cards-grid,
  .blog-grid,
  .resources-grid,
  .features-grid,
  .testimonials-grid,
  .gallery-grid,
  .editorial-grid)>* {
  min-width: 0;
  max-width: 100%;
}

/* Ajustes de columnas: escritorio, tableta y móvil. */
@media (max-width: 1000px) {

  .programs-grid,
  .sectors-grid,
  .testimonials-grid,
  .gallery-grid,
  .editorial-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {

  .programs-grid,
  .sectors-grid,
  .testimonials-grid,
  .gallery-grid,
  .editorial-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  :where(.program-card,
    .sector-card,
    .testimonial-card,
    .blog-card,
    .resource-card,
    .gallery-card,
    .feature-card,
    .contact-card,
    .content-card,
    .editorial-card,
    .incompany-card,
    .info-box-card) {
    padding: 1.25rem;
  }
}

/* No animar elementos ocultos y respetar las preferencias de accesibilidad. */
.program-card[hidden] {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {

  :where(.card,
    .program-card,
    .sector-card,
    .service-card,
    .testimonial-card,
    .blog-card,
    .resource-card,
    .gallery-card,
    .feature-card,
    .contact-card,
    .content-card,
    .editorial-card,
    .founder-card,
    .dual-route-card,
    .pillar-card,
    .incompany-card,
    .corp-modalities-card,
    .advisor-result-card,
    .eng-highlight-card,
    .info-box-card) {
    transition: none !important;
  }

  :where(.program-card,
    .sector-card,
    .service-card,
    .testimonial-card,
    .blog-card,
    .resource-card,
    .gallery-card,
    .feature-card,
    .contact-card,
    .content-card,
    .editorial-card,
    .founder-card,
    .dual-route-card,
    .pillar-card,
    .incompany-card,
    .advisor-result-card,
    .eng-highlight-card,
    .info-box-card):hover {
    transform: none;
  }
}

.card {
  /* Cambia .card por el nombre exacto de la clase que usas para tus tarjetas */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* Empuja el contenido arriba y los botones abajo */
  height: 100%;
  /* Asegura que todas las tarjetas midan lo mismo o crezcan bien */
  box-sizing: border-box;
  /* Evita que el padding rompa el ancho/alto */
  position: relative;
  overflow: hidden;
  /* Evita que cualquier elemento interno se salga visualmente */
}

/* Contenedor de los botones en la parte inferior */
.card-buttons-container,
.card-footer {
  display: flex;
  gap: 10px;
  /* Espacio entre los dos botones */
  margin-top: 20px;
  width: 100%;
}

/* Haz que los botones se adapten al espacio disponible de forma equitativa */
.card-buttons-container a,
.card-buttons-container button {
  flex: 1;
  /* Hace que ambos botones compartan el ancho proporcionalmente */
  white-space: nowrap;
  /* Evita saltos de línea extraños en el texto del botón */
  overflow: hidden;
  text-overflow: ellipsis;
  /* Pone puntos suspensivos si el texto es muy largo */
  padding: 10px 12px;
  font-size: 0.85rem;
  /* Ajusta ligeramente el texto si es necesario */
  box-sizing: border-box;
  text-align: center;
}

/* ==========================================================================
   CORRECCIÓN DE DOBLE BOTÓN EN TARJETAS DE PROGRAMAS
   ========================================================================== */
.program-card {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

/* Contenedor que alinea los dos botones horizontalmente al fondo */
.program-card .program-card-footer,
.program-card .card-buttons-container {
  display: flex !important;
  gap: 8px !important;
  /* Espacio pequeño entre los dos botones */
  margin-top: auto !important;
  /* Empuja todo el bloque de botones al fondo de la tarjeta */
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Ajuste de tamaño y texto para cada botón dentro de la tarjeta */
.program-card .program-card-footer .btn,
.program-card .card-buttons-container .btn {
  flex: 1 !important;
  /* Hace que ambos botones compartan el espacio equitativamente (50% / 50%) */
  font-size: 0.78rem !important;
  /* Letra ligeramente más compacta para que los textos largos quepan */
  padding: 0.55rem 0.4rem !important;
  /* Espaciado interno optimizado */
  white-space: normal !important;
  /* Permite que el texto baje de línea si es muy largo */
  text-align: center !important;
  /* Centra el texto */
  line-height: 1.25 !important;
  /* Interlineado ajustado */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

/* ==========================================================================
   ESTILOS DE LA TARJETA FLOTANTE (TOAST)
   ========================================================================== */
.toast-container {
  position: fixed;
  top: 25px;
  right: 25px;
  z-index: 99999;
  /* Superpone a cualquier navbar o menú flotante */
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #ffffff;
  padding: 14px 18px;
  border-radius: 10px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  border-left: 4px solid #10b981;
  pointer-events: auto;
  min-width: 280px;
  max-width: 380px;
  font-family: inherit;
}

.toast.error {
  border-left-color: #ef4444;
}

.toast-icon {
  font-size: 1.25rem;
  color: #10b981;
}

.toast.error .toast-icon {
  color: #ef4444;
}

.toast-title {
  font-weight: 600;
  font-size: 0.92rem;
  color: #1f2937;
  margin-bottom: 2px;
}

.toast-desc {
  font-size: 0.83rem;
  color: #6b7280;
  line-height: 1.3;
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}



/* ==========================================================================
   RED LÍDER — CAPA RESPONSIVE PROFESIONAL
   Añadida al final para prevalecer sobre reglas anteriores sin borrar estilos.
   No modifica HTML, JavaScript, formularios ni conexiones externas.
   Breakpoints: escritorio, tablet, móvil y móvil compacto.
   ========================================================================== */

/* Evita que grids, textos largos o componentes generen desbordamiento horizontal. */
html {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
  scroll-padding-top: calc(var(--header-height, 80px) + 16px);
}

body {
  width: 100%;
  min-width: 320px;
  max-width: 100%;
  overflow-x: clip;
}

.container,
.header-inner,
.hero-grid,
.dual-cards-grid,
.challenge-grid,
.school-grid,
.corporate-grid,
.contact-split-grid,
.programs-grid,
.sectors-grid,
.gallery-grid,
.testimonials-grid,
.blog-grid,
.footer-grid,
.faq-grid,
.resources-grid,
.features-grid,
.editorial-grid,
.methodology-steps-grid,
.form-group-grid {
  min-width: 0;
}

:where(h1, h2, h3, h4, h5, h6, p, li, a, span, strong, small, label, button) {
  overflow-wrap: anywhere;
}

:where(input, select, textarea, button, img, video, iframe, svg) {
  max-width: 100%;
}

img,
video,
iframe {
  height: auto;
}

button,
.btn,
input,
select,
textarea {
  touch-action: manipulation;
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid rgba(47, 117, 181, 0.65);
  outline-offset: 3px;
}

/* Cuadrículas: permite que las columnas se encojan sin salirse de la pantalla. */
.programs-grid,
.sectors-grid,
.gallery-grid,
.testimonials-grid,
.blog-grid,
.dual-cards-grid,
.challenge-grid,
.school-grid,
.corporate-grid,
.contact-split-grid,
.footer-grid,
.faq-grid,
.resources-grid,
.features-grid,
.editorial-grid,
.cards-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.programs-grid>*,
.sectors-grid>*,
.gallery-grid>*,
.testimonials-grid>*,
.blog-grid>*,
.dual-cards-grid>*,
.challenge-grid>*,
.school-grid>*,
.corporate-grid>*,
.contact-split-grid>*,
.footer-grid>*,
.faq-grid>*,
.resources-grid>*,
.features-grid>*,
.editorial-grid>*,
.cards-grid>* {
  min-width: 0;
}

/* Las tarjetas conservan su aspecto premium y no fuerzan alturas en móvil. */
:where(.program-card, .sector-card, .service-card, .testimonial-card,
  .blog-card, .resource-card, .gallery-card, .feature-card, .contact-card,
  .content-card, .editorial-card, .founder-card, .dual-route-card,
  .pillar-card, .incompany-card, .corp-modalities-card, .advisor-result-card,
  .eng-highlight-card, .info-box-card) {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

:where(.program-card, .dual-route-card, .sector-card, .testimonial-card,
  .blog-card, .service-card, .feature-card, .resource-card) .btn {
  max-width: 100%;
  white-space: normal;
  text-align: center;
}

/* La cabecera mantiene su estructura de escritorio hasta el breakpoint del menú. */
.site-header {
  width: 100%;
  max-width: 100%;
}

.header-inner {
  gap: 1rem;
}

.brand-logo,
.brand-logo-img {
  min-width: 0;
}

.brand-logo-img {
  object-fit: contain;
}

.main-navigation {
  min-width: 0;
}

.nav-menu {
  min-width: 0;
}

.hero-title,
.page-hero-title,
.section-title {
  text-wrap: balance;
}

.hero-actions,
.program-card-footer,
.card-buttons-container,
.card-footer,
.header-actions {
  min-width: 0;
}

/* Tablet y portátiles pequeños. */
@media (max-width: 1024px) {
  :root {
    --header-height: 74px;
  }

  .container {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .hero-section {
    padding: 3.5rem 0;
  }

  .hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
    gap: 2rem;
  }

  .hero-title {
    font-size: clamp(2.25rem, 4.2vw, 3rem);
  }

  .hero-image {
    height: clamp(320px, 42vw, 440px);
  }

  .challenge-grid,
  .school-grid,
  .corporate-grid,
  .contact-split-grid {
    gap: 2rem;
  }

  .dual-route-card,
  .sector-card,
  .program-card,
  .testimonial-card,
  .blog-card {
    padding: 1.7rem;
  }

  .services-grid {
    gap: 1.25rem;
  }

  .service-card {
    flex-basis: 290px !important;
  }
}

/* Navegación móvil: conserva el selector .open que puede activar el JavaScript existente. */
@media (max-width: 820px) {
  :root {
    --header-height: 70px;
  }

  .site-header {
    height: var(--header-height);
  }

  .header-inner {
    gap: 0.75rem;
  }

  .brand-logo {
    gap: 0.5rem;
    max-width: calc(100% - 56px);
  }

  .brand-logo-img {
    height: 42px;
    max-width: min(210px, 58vw);
  }

  .brand-title {
    font-size: 1.15rem;
  }

  .brand-subtitle {
    font-size: 0.62rem;
    letter-spacing: 0.1em;
  }

  .menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 10px;
    z-index: 1002;
  }

  .menu-toggle:hover {
    background: var(--color-secondary-light);
  }

  .main-navigation {
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    width: 100%;
    max-height: calc(100dvh - var(--header-height));
    overflow-y: auto;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 1rem 1.25rem max(1.25rem, env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.98);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-xl);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s ease;
    z-index: 1001;
  }

  .main-navigation.open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .nav-menu {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 0.25rem;
  }

  .nav-menu>li {
    width: 100%;
  }

  .nav-link,
  .nav-link.nav-pill {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 46px;
    padding: 0.75rem 0.9rem;
    white-space: normal;
    border-radius: 9px;
  }

  .nav-link::after {
    display: none;
  }

  .nav-link:hover,
  .nav-link.active {
    background: var(--color-secondary-light);
  }

  .nav-link.nav-pill {
    justify-content: center;
    margin-top: 0.35rem;
  }

  .header-actions {
    gap: 0.5rem;
  }

  .hero-grid,
  .challenge-grid,
  .school-grid,
  .corporate-grid,
  .contact-split-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero-grid {
    gap: 2rem;
  }

  .hero-content {
    max-width: 760px;
  }

  .hero-visual {
    width: 100%;
    max-width: 680px;
    margin-inline: auto;
  }

  .hero-image {
    height: clamp(280px, 55vw, 420px);
  }

  .challenge-grid,
  .school-grid,
  .corporate-grid,
  .contact-split-grid {
    gap: 2rem;
  }

  .school-methodology-card,
  .corp-modalities-card,
  .info-box-card {
    padding: 1.6rem;
  }

  .methodology-steps-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sectors-grid,
  .gallery-grid,
  .testimonials-grid,
  .blog-grid,
  .dual-cards-grid,
  .programs-grid,
  .footer-grid,
  .faq-grid,
  .resources-grid,
  .features-grid,
  .editorial-grid,
  .cards-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
  }

  .programs-grid {
    margin-top: 1.5rem;
  }

  .program-card,
  .sector-card,
  .testimonial-card,
  .blog-card,
  .dual-route-card {
    padding: 1.5rem;
  }

  .section-header {
    margin-bottom: 2.5rem;
  }

  .challenge-section,
  .school-section,
  .services-overview-section,
  .programs-section,
  .sectors-section,
  .gallery-section,
  .testimonials-section,
  .blog-section {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .page-hero-banner {
    padding: 3.25rem 0 2.75rem;
  }

  .page-hero-title {
    font-size: clamp(1.9rem, 4.5vw, 2.4rem);
  }

  .workflow-bar {
    padding: 1.25rem;
  }
}

/* Teléfonos: una columna, botones cómodos y tipografía fluida. */
@media (max-width: 600px) {
  html {
    font-size: 15px;
  }

  .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .hero-section {
    padding: 2.6rem 0 2.2rem;
  }

  .hero-grid {
    gap: 1.5rem;
  }

  .hero-tag {
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    padding: 0.38rem 0.7rem;
    margin-bottom: 1rem;
  }

  .hero-title {
    font-size: clamp(1.85rem, 8vw, 2.5rem);
    line-height: 1.12;
    letter-spacing: -0.035em;
    margin-bottom: 1rem;
  }

  .hero-lead {
    font-size: 1rem;
    line-height: 1.65;
    margin-bottom: 1.4rem;
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 0.7rem;
    margin-bottom: 1.4rem;
  }

  .hero-actions .btn,
  .hero-actions>a,
  .hero-actions>button {
    width: 100%;
    min-height: 46px;
  }

  .btn {
    min-height: 44px;
    padding: 0.8rem 1rem;
    white-space: normal;
  }

  .btn-lg {
    padding: 0.9rem 1.2rem;
    font-size: 1rem;
  }

  .hero-image {
    height: clamp(230px, 68vw, 340px);
  }

  .hero-badge-floating {
    left: 10px;
    right: 10px;
    bottom: 10px;
    padding: 0.9rem 1rem;
  }

  .floating-badge-desc {
    font-size: 0.86rem;
  }

  .section-header {
    margin-bottom: 2rem;
  }

  .section-title {
    font-size: clamp(1.55rem, 6.5vw, 2rem);
    line-height: 1.2;
    margin-bottom: 0.75rem;
  }

  .section-subtitle {
    font-size: 1rem;
  }

  .page-hero-banner {
    padding: 2.5rem 0 2rem;
  }

  .page-hero-title {
    font-size: clamp(1.7rem, 7vw, 2.1rem);
    line-height: 1.18;
  }

  .page-hero-subtitle {
    font-size: 1rem;
  }

  .breadcrumbs {
    flex-wrap: wrap;
    font-size: 0.8rem;
  }

  .challenge-section,
  .school-section,
  .services-overview-section,
  .programs-section,
  .sectors-section,
  .gallery-section,
  .testimonials-section,
  .blog-section,
  .contact-page-layout,
  .routes-dual-section {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  .dual-cards-grid,
  .challenge-grid,
  .school-grid,
  .programs-grid,
  .corporate-grid,
  .sectors-grid,
  .gallery-grid,
  .testimonials-grid,
  .blog-grid,
  .contact-split-grid,
  .footer-grid,
  .faq-grid,
  .resources-grid,
  .features-grid,
  .editorial-grid,
  .methodology-steps-grid,
  .form-group-grid,
  .cards-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 1rem;
  }

  .dual-route-card,
  .program-card,
  .sector-card,
  .testimonial-card,
  .blog-card,
  .founder-body,
  .school-methodology-card,
  .corp-modalities-card,
  .info-box-card,
  .manifesto-box {
    padding: 1.25rem;
  }

  .program-card {
    height: auto !important;
  }

  .program-card-title,
  .blog-card-title {
    font-size: 1.2rem;
  }

  .program-card-footer,
  .program-card .program-card-footer,
  .program-card .card-buttons-container,
  .card-buttons-container,
  .card-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem !important;
  }

  .program-card .program-card-footer .btn,
  .program-card .card-buttons-container .btn,
  .card-buttons-container a,
  .card-buttons-container button {
    flex: 1 1 100%;
    width: 100%;
    min-height: 44px;
    font-size: 0.9rem !important;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    padding: 0.7rem 0.8rem !important;
  }

  .program-card-footer>* {
    min-width: 0;
  }

  .program-badges-row,
  .program-card-footer,
  .blog-card-meta,
  .footer-bottom {
    align-items: flex-start;
  }

  .meta-row {
    flex-wrap: wrap;
  }

  .meta-label {
    min-width: 75px;
  }

  .challenge-item,
  .corp-step,
  .corp-modality-item,
  .location-item {
    gap: 0.85rem;
  }

  .challenge-item {
    padding: 1rem;
  }

  .challenge-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
  }

  .challenge-quote-box {
    padding: 1.7rem 1.35rem;
  }

  .challenge-quote-text {
    font-size: 1.2rem;
  }

  .founder-image-wrap {
    height: auto;
    min-height: 220px;
    max-height: 320px;
  }

  .founder-img {
    max-height: 320px;
    object-fit: contain;
  }

  .sectors-main-banner {
    padding: 1.5rem;
    margin-bottom: 2rem;
  }

  .sectors-main-title {
    font-size: 1.35rem;
  }

  .gallery-item {
    aspect-ratio: 4 / 3;
  }

  .testimonial-quote {
    font-size: 1rem;
  }

  .blog-controls {
    align-items: stretch;
    gap: 1rem;
  }

  .blog-search-box {
    min-width: 0;
    width: 100%;
  }

  .blog-card-body {
    padding: 1.25rem;
  }

  .blog-card-footer {
    padding: 1rem 1.25rem;
    flex-wrap: wrap;
    gap: 0.75rem;
  }

  .contact-form-body {
    padding: 1.25rem 1rem;
  }

  .contact-tab-nav {
    flex-direction: column;
    align-items: stretch;
  }

  .contact-tab-nav>* {
    width: 100%;
  }

  .form-group,
  .form-field {
    min-width: 0;
    width: 100%;
  }

  input,
  select,
  textarea {
    min-width: 0;
    width: 100%;
    font-size: 16px;
    /* Evita el zoom automático en iOS al enfocar campos. */
  }

  .workflow-bar {
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.75rem;
    padding: 1rem;
  }

  .workflow-chain {
    gap: 0.5rem;
  }

  .credibility-strip {
    padding: 1rem 0;
  }

  .credibility-item {
    font-size: 0.85rem;
  }

  .services-grid {
    display: flex !important;
    grid-template-columns: none !important;
    overflow-x: auto !important;
    gap: 0.85rem;
    padding: 0.5rem 0.1rem 1.25rem;
    scroll-snap-type: x mandatory;
  }

  .service-card {
    flex: 0 0 min(84vw, 330px) !important;
    max-width: min(84vw, 330px) !important;
    padding: 1.35rem;
    scroll-snap-align: start;
  }

  .footer-bottom {
    flex-direction: column;
    justify-content: flex-start;
    gap: 0.75rem;
  }

  .toast-container {
    top: max(12px, env(safe-area-inset-top));
    right: 12px;
    left: 12px;
    width: auto;
  }

  .toast {
    width: 100%;
    min-width: 0;
    max-width: none;
  }

  .whatsapp-popup {
    width: min(calc(100vw - 24px), 360px);
    right: 0;
  }
}

/* Móviles estrechos: reduce adornos sin sacrificar legibilidad. */
@media (max-width: 380px) {
  .container {
    padding-left: 0.85rem;
    padding-right: 0.85rem;
  }

  .brand-logo-img {
    max-width: 54vw;
    height: 38px;
  }

  .hero-title {
    font-size: 1.75rem;
  }

  .section-title {
    font-size: 1.5rem;
  }

  .program-card,
  .sector-card,
  .testimonial-card,
  .blog-card,
  .dual-route-card {
    padding: 1rem;
  }

  .hero-badge-floating {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    margin: 0.75rem;
  }

  .program-badges-row {
    align-items: flex-start;
    justify-content: flex-start;
  }
}

/* Respeta la preferencia del usuario por movimiento reducido. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* =====================================================================
   AJUSTE FINAL DEL FOOTER — RED LÍDER
   Distribución equilibrada en escritorio y lectura cómoda en móviles.
   No modifica HTML, enlaces ni JavaScript.
   ===================================================================== */
.site-footer {
  padding: clamp(2.75rem, 5vw, 4rem) 0 1.75rem;
  border-top-width: 4px;
}

.site-footer .container {
  width: min(100% - 2.5rem, 1200px);
  margin-inline: auto;
}

.site-footer .footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  column-gap: clamp(2rem, 5vw, 4.5rem);
  row-gap: 2.25rem;
  align-items: start;
  margin-bottom: 2.25rem;
}

.site-footer .footer-grid>*,
.site-footer .footer-brand,
.site-footer .footer-links,
.site-footer .footer-contact-item {
  min-width: 0;
}

.site-footer .footer-logo-img {
  width: min(100%, 190px) !important;
  height: 64px !important;
  padding: 7px 10px !important;
  object-fit: contain !important;
  margin-bottom: 0.25rem;
}

.site-footer .footer-desc,
.site-footer .footer-motto {
  max-width: 580px;
  line-height: 1.7;
  overflow-wrap: anywhere;
}

.site-footer .footer-socials {
  margin-top: 1.1rem;
  gap: 0.55rem;
}

.site-footer .footer-col-title {
  margin-bottom: 1rem;
}

.site-footer .footer-links {
  gap: 0.65rem;
  padding: 0;
  margin: 0;
}

.site-footer .footer-link {
  display: inline-block;
  line-height: 1.55;
  text-decoration: none;
}

.site-footer .footer-contact-item {
  line-height: 1.65;
  overflow-wrap: anywhere;
}

.site-footer .footer-bottom {
  padding-top: 1.25rem;
  gap: 0.75rem 1.5rem;
}

@media (max-width: 760px) {
  .site-footer {
    padding: 2.5rem 0 1.25rem;
  }

  .site-footer .container {
    width: min(100% - 2rem, 560px);
  }

  .site-footer .footer-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    column-gap: 0;
    row-gap: 1.75rem;
    margin-bottom: 1.75rem;
  }

  .site-footer .footer-brand {
    align-items: flex-start;
  }

  .site-footer .footer-logo-img {
    width: min(100%, 180px) !important;
    height: 60px !important;
  }

  .site-footer .footer-desc,
  .site-footer .footer-motto {
    font-size: 0.9rem;
  }

  .site-footer .footer-social-link {
    width: 42px;
    height: 42px;
  }

  .site-footer .footer-col-title {
    font-size: 1rem;
    margin-bottom: 0.85rem;
  }

  .site-footer .footer-links {
    gap: 0.7rem;
  }

  .site-footer .footer-bottom {
    align-items: flex-start;
    text-align: left;
    flex-direction: column;
  }
}

@media (max-width: 380px) {
  .site-footer .container {
    width: calc(100% - 1.5rem);
  }

  .site-footer .footer-socials {
    gap: 0.4rem;
  }

  .site-footer .footer-social-link {
    width: 38px;
    height: 38px;
  }
}

/* ============================================================================
   RED LÍDER — CAPA PREMIUM 2026
   Tema automático, componentes fluidos, tarjetas adaptables y movimiento accesible.
   Añadida al final para respetar los estilos y selectores ya existentes.
   Tema manual opcional: <html data-theme="light"> o data-theme="dark".
   Sin data-theme, se sigue la preferencia del sistema operativo.
   ============================================================================ */

:root {
  color-scheme: light dark;
  --rl-bg: #f5f7fb;
  --rl-bg-alt: #edf2f8;
  --rl-surface: #ffffff;
  --rl-surface-raised: #ffffff;
  --rl-text: #17263b;
  --rl-text-muted: #526176;
  --rl-border: #dce4ee;
  --rl-shadow: 0 12px 34px rgba(18, 43, 75, .09);
  --rl-shadow-hover: 0 22px 48px rgba(18, 43, 75, .16);
  --rl-focus: #2f75b5;
  --rl-radius: 18px;
  --rl-motion: cubic-bezier(.2, .75, .25, 1);
}



:root[data-theme="dark"] {
  color-scheme: dark;
  --rl-bg: #0b1422;
  --rl-bg-alt: #101d2e;
  --rl-surface: #142238;
  --rl-surface-raised: #192a42;
  --rl-text: #edf4ff;
  --rl-text-muted: #c0ccdc;
  --rl-border: #30445d;
  --rl-shadow: 0 12px 34px rgba(0, 0, 0, .24);
  --rl-shadow-hover: 0 22px 48px rgba(0, 0, 0, .36);
  --rl-focus: #79baff;
}

:root[data-theme="light"] {
  color-scheme: light;
  --rl-bg: #f5f7fb;
  --rl-bg-alt: #edf2f8;
  --rl-surface: #ffffff;
  --rl-surface-raised: #ffffff;
  --rl-text: #17263b;
  --rl-text-muted: #526176;
  --rl-border: #dce4ee;
  --rl-shadow: 0 12px 34px rgba(18, 43, 75, .09);
  --rl-shadow-hover: 0 22px 48px rgba(18, 43, 75, .16);
  --rl-focus: #2f75b5;
}

html {
  scroll-padding-top: calc(var(--header-height, 80px) + 1rem);
}

body {
  background-color: var(--rl-bg);
  color: var(--rl-text);
  transition: background-color .25s ease, color .25s ease;
}

/* Los contenedores crecen de forma fluida sin provocar scroll horizontal. */
.container,
.section,
main,
section,
article,
aside,
.hero-grid,
.grid-2,
.grid-3,
.grid-4,
.stats-grid,
.process-grid,
.contact-grid,
.footer-grid,
.site-footer .container,
.site-footer .footer-grid {
  min-width: 0;
}

.container {
  width: min(var(--max-width, 1240px), calc(100% - clamp(1.25rem, 5vw, 4rem)));
  margin-inline: auto;
}

/* Tarjetas: auto-fit para que al añadir elementos se reorganicen solas.
   Puede aplicarse a las rejillas existentes sin cambiar el HTML. */
.grid-auto-fit,
.cards-grid,
.services-grid,
.programs-grid,
.sectors-grid,
.resources-grid,
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 255px), 1fr));
  align-items: stretch;
  gap: clamp(1rem, 2vw, 1.5rem);
}

.card,
.service-card,
.program-card,
.sector-card,
.resource-card,
.testi-card,
.process-step,
.contact-card,
.stat-card,
.course-card,
.feature-card,
.info-card {
  min-width: 0;
  height: 100%;
  border: 1px solid var(--rl-border);
  border-radius: var(--rl-radius);
  background: var(--rl-surface);
  color: var(--rl-text);
  box-shadow: var(--rl-shadow);
  overflow-wrap: anywhere;
  transition: transform .28s var(--rl-motion), box-shadow .28s var(--rl-motion),
    border-color .28s ease, background-color .25s ease, color .25s ease;
}

.card p,
.service-card p,
.program-card p,
.sector-card p,
.resource-card p,
.testi-card p,
.contact-card p,
.card-desc,
.card-description {
  color: var(--rl-text-muted);
  overflow-wrap: anywhere;
}

.card-title,
.service-card h2,
.service-card h3,
.program-card h2,
.program-card h3,
.sector-card h2,
.sector-card h3 {
  color: var(--rl-text);
  text-wrap: pretty;
}

/* Movimiento sutil solo cuando el dispositivo admite hover. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {

  .card:hover,
  .service-card:hover,
  .program-card:hover,
  .sector-card:hover,
  .resource-card:hover,
  .testi-card:hover,
  .process-step:hover,
  .contact-card:hover,
  .stat-card:hover,
  .course-card:hover,
  .feature-card:hover,
  .info-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--rl-shadow-hover);
    border-color: color-mix(in srgb, var(--color-secondary, #2f75b5) 45%, var(--rl-border));
  }

  .btn:hover,
  .button:hover,
  button:hover,
  .nav-link:hover {
    transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
  }

  .btn:hover,
  .button:hover {
    transform: translateY(-2px);
  }
}

/* Imágenes fluidas: las fotografías rellenan su marco; logos conservan proporción. */
img,
picture,
video,
canvas,
iframe {
  max-width: 100%;
}

img {
  height: auto;
}

.card img,
.service-card img,
.program-card img,
.sector-card img,
.resource-card img,
.testi-card img,
.feature-card img,
.info-card img {
  max-width: 100%;
  object-fit: cover;
}

.card-media,
.service-card .card-media,
.program-card .card-media,
.sector-card .card-media,
.resource-card .card-media,
.feature-card .card-media {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--rl-bg-alt);
  border-radius: inherit;
}

.card-media img,
.service-card .card-media img,
.program-card .card-media img,
.sector-card .card-media img,
.resource-card .card-media img,
.feature-card .card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .45s var(--rl-motion);
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {

  .card:hover .card-media img,
  .service-card:hover .card-media img,
  .program-card:hover .card-media img,
  .sector-card:hover .card-media img,
  .resource-card:hover .card-media img,
  .feature-card:hover .card-media img {
    transform: scale(1.035);
  }
}

.logo img,
.logo-mark img,
.site-logo img,
.footer-logo img,
.brand img,
.navbar-brand img,
.site-footer .logo img {
  width: auto;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

/* Formularios y controles coherentes en ambos temas. */
input,
select,
textarea {
  max-width: 100%;
  color: var(--rl-text);
  background-color: var(--rl-surface);
  border-color: var(--rl-border);
}

input::placeholder,
textarea::placeholder {
  color: var(--rl-text-muted);
  opacity: .85;
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--rl-focus);
  outline-offset: 3px;
}

button,
.btn,
.button {
  touch-action: manipulation;
}

/* Footer consistente, legible y sin ocultar enlaces o datos de contacto. */
.site-footer {
  background: var(--color-primary, #17365d);
  color: #f4f7fc;
  overflow: visible;
}

.site-footer .footer-grid,
.site-footer .container.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: clamp(1.5rem, 4vw, 3.5rem);
}

.site-footer .footer-col,
.site-footer .footer-brand,
.site-footer .footer-links,
.site-footer .footer-contact {
  min-width: 0;
}

.site-footer p,
.site-footer li,
.site-footer a,
.site-footer address,
.site-footer .footer-description {
  color: #e3ebf7;
  overflow-wrap: anywhere;
}

.site-footer a {
  text-decoration-thickness: .08em;
  text-underline-offset: .2em;
}

.site-footer a:hover {
  color: #ffb36d;
}

.site-footer .footer-socials {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}

.site-footer .footer-bottom {
  gap: .75rem;
  flex-wrap: wrap;
}

/* Transiciones globales contenidas; no animar elementos de lectura ni formularios. */
@media (prefers-reduced-motion: no-preference) {

  .hero-content,
  .section-heading,
  .page-intro {
    animation: rl-enter .55s var(--rl-motion) both;
  }

  @keyframes rl-enter {
    from {
      opacity: 0;
      transform: translateY(10px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

@media (max-width: 900px) {

  .site-footer .footer-grid,
  .site-footer .container.footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .site-footer .footer-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 600px) {
  .container {
    width: calc(100% - 2rem);
  }

  .grid-auto-fit,
  .cards-grid,
  .services-grid,
  .programs-grid,
  .sectors-grid,
  .resources-grid,
  .testimonials-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
  }

  .card,
  .service-card,
  .program-card,
  .sector-card,
  .resource-card,
  .testi-card,
  .process-step,
  .contact-card,
  .stat-card,
  .course-card,
  .feature-card,
  .info-card {
    border-radius: 15px;
  }

  .site-footer .footer-grid,
  .site-footer .container.footer-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.75rem;
  }

  .site-footer .footer-brand {
    grid-column: auto;
  }

  .site-footer .footer-bottom {
    align-items: flex-start;
    text-align: left;
  }

  .site-footer .footer-social-link {
    min-width: 42px;
    min-height: 42px;
  }

  .btn,
  .button {
    max-width: 100%;
  }
}

@media (max-width: 360px) {
  body {
    font-size: 15px;
  }

  .container {
    width: calc(100% - 1.25rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}

/* =====================================================================
   RED LÍDER — FOOTER EN 4 COLUMNAS, COMPACTO Y LEGIBLE
   Escritorio: 4 columnas equilibradas.
   Tablet: 2 columnas.
   Móvil: 1 columna, sin ocultar contenido.
   Añadido al final para prevalecer sobre reglas anteriores.
   ===================================================================== */
.site-footer {
  padding-block: clamp(2.25rem, 4vw, 3.5rem) 1.25rem;
  font-size: 0.92rem;
  line-height: 1.65;
}

.site-footer .footer-grid,
.site-footer .container.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: clamp(1.15rem, 2.4vw, 2.25rem);
  width: min(100% - 3rem, var(--max-width, 1240px));
  margin-inline: auto;
}

.site-footer .footer-col,
.site-footer .footer-brand,
.site-footer .footer-links,
.site-footer .footer-contact {
  min-width: 0;
  max-width: 100%;
}

.site-footer h2,
.site-footer h3,
.site-footer h4,
.site-footer .footer-title {
  margin: 0 0 0.85rem;
  color: #fff;
  font-size: clamp(0.94rem, 1vw, 1.04rem);
  line-height: 1.35;
  font-weight: 750;
  text-wrap: pretty;
}

.site-footer p,
.site-footer li,
.site-footer a,
.site-footer address,
.site-footer .footer-description {
  font-size: 0.875rem;
  line-height: 1.7;
  overflow-wrap: anywhere;
  word-break: normal;
}

.site-footer p {
  margin-block: 0 0.8rem;
}

.site-footer ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer li+li {
  margin-top: 0.42rem;
}

.site-footer a {
  text-decoration: none;
}

.site-footer a:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.site-footer .footer-logo,
.site-footer .logo,
.site-footer .logo-mark {
  margin-bottom: 0.75rem;
}

.site-footer .footer-logo img,
.site-footer .logo img,
.site-footer .logo-mark img {
  max-height: 64px;
  width: auto;
  max-width: min(100%, 180px);
  object-fit: contain;
}

.site-footer .footer-socials {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}

.site-footer .footer-socials a,
.site-footer .footer-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 11px;
  background: rgba(255, 255, 255, .08);
  transition: background-color .2s ease, transform .2s ease;
}

.site-footer .footer-socials a:hover,
.site-footer .footer-social-link:hover {
  background: rgba(255, 255, 255, .16);
  transform: translateY(-2px);
}

.site-footer .footer-bottom {
  width: min(100% - 3rem, var(--max-width, 1240px));
  margin: 2rem auto 0;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, .18);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem 1.5rem;
  flex-wrap: wrap;
  font-size: 0.8rem;
}

.site-footer .footer-bottom p,
.site-footer .footer-bottom a {
  font-size: 0.8rem;
  margin: 0;
}

@media (max-width: 980px) {

  .site-footer .footer-grid,
  .site-footer .container.footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.75rem 2rem;
  }

  .site-footer .footer-brand {
    grid-column: auto;
  }
}

@media (max-width: 600px) {
  .site-footer {
    padding-block: 2rem 1rem;
    font-size: 0.9rem;
  }

  .site-footer .footer-grid,
  .site-footer .container.footer-grid,
  .site-footer .footer-bottom {
    width: calc(100% - 2rem);
  }

  .site-footer .footer-grid,
  .site-footer .container.footer-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
  }

  .site-footer .footer-brand {
    grid-column: auto;
  }

  .site-footer h2,
  .site-footer h3,
  .site-footer h4,
  .site-footer .footer-title {
    margin-bottom: 0.6rem;
  }

  .site-footer p,
  .site-footer li,
  .site-footer a,
  .site-footer address,
  .site-footer .footer-description {
    font-size: 0.875rem;
  }

  .site-footer .footer-bottom {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {

  .site-footer .footer-socials a,
  .site-footer .footer-social-link {
    transition: none;
  }
}

/* ============================================================================
   RED LÍDER — TEMA 100% AUTOMÁTICO SEGÚN EL SISTEMA
   No crea botones ni controles visibles de tema. La apariencia depende únicamente
   de prefers-color-scheme. Estos selectores finales neutralizan fondos claros
   heredados en tarjetas, paneles, formularios, redes sociales y footer.
   ============================================================================ */

:root {
  color-scheme: light;
  --rl-bg: #f5f7fb;
  --rl-bg-alt: #edf2f8;
  --rl-surface: #ffffff;
  --rl-surface-raised: #ffffff;
  --rl-text: #17263b;
  --rl-text-muted: #526176;
  --rl-border: #dce4ee;
  --rl-shadow: 0 12px 34px rgba(18, 43, 75, .09);
  --rl-shadow-hover: 0 22px 48px rgba(18, 43, 75, .16);
  --rl-focus: #2f75b5;
  --rl-social-bg: #eaf2fb;
  --rl-social-border: #cbd9e9;
  --rl-social-fg: #17365d;
}

/* Modo oscuro: se activa exclusivamente si el sistema operativo lo solicita. */


/* Transiciones discretas; no se animan elementos si el usuario lo desactiva. */
html,
body,
.card,
.service-card,
.program-card,
.sector-card,
.resource-card,
.feature-card,
.testi-card,
.contact-card,
.site-footer,
footer,
input,
textarea,
select {
  transition: background-color .22s ease, color .22s ease,
    border-color .22s ease, box-shadow .22s ease;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================================
   27) CAPA FINAL DE CONSISTENCIA DE TEMA Y CURSORES — RED LÍDER
   Esta capa se mantiene al final para complementar los estilos existentes.
   No agrega controles de tema ni requiere JavaScript.
   ============================================================================ */

:root {
  color-scheme: light;
  --rl-page: #F5F7FA;
  --rl-surface: #FFFFFF;
  --rl-surface-raised: #FFFFFF;
  --rl-surface-muted: #EDF2F7;
  --rl-text: #172033;
  --rl-text-muted: #475569;
  --rl-border: #DCE3EC;
  --rl-link: #245F99;
  --rl-link-hover: #C96312;
  --rl-input: #FFFFFF;
  --rl-shadow: 0 10px 28px rgba(15, 36, 63, .10);
  --rl-focus: #2F75B5;
}



/* Cursores: pointer solo en controles realmente interactivos. */
a[href],
button,
[role="button"],
input[type="button"],
input[type="submit"],
input[type="reset"],
label[for],
summary,
select,
.clickable,
.btn,
.button,
.nav-link,
.social-links a,
.social-icons a,
.social-link {
  cursor: pointer;
}

/* Cursor de escritura en campos editables. */
input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]),
textarea,
[contenteditable="true"] {
  cursor: text;
}

/* No simular interacción en controles deshabilitados. */
button:disabled,
input:disabled,
select:disabled,
textarea:disabled,
[aria-disabled="true"],
.disabled {
  cursor: not-allowed;
}

/* Indicador visible de teclado para accesibilidad. */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--rl-focus, #2F75B5);
  outline-offset: 3px;
}

/* ============================================================================
   RED LÍDER — MENÚ HAMBURGUESA MÓVIL (3 RAYITAS)
   Añadido al final para respetar los estilos y scripts existentes.
   Requiere que el HTML tenga .menu-toggle > .hamburger > 3 span.
   El JavaScript actual debe alternar la clase .active y .open.
   ============================================================================ */

@media (max-width: 820px) {

  /* El botón de las tres rayitas se muestra en tablet y móvil. */
  .menu-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 10px;
    margin: 0;
    position: relative;
    z-index: 1002;
    color: var(--color-primary, #17365D);
    background: var(--bg-surface, #FFFFFF);
    border: 1px solid var(--border-color, #DCE3EC);
    border-radius: 10px;
    box-shadow: var(--shadow-sm, 0 2px 6px rgba(15, 36, 63, .06));
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .menu-toggle:hover {
    background: var(--bg-hover, #EAF2FB);
    color: var(--color-primary, #17365D);
    transform: none;
  }

  .menu-toggle:focus-visible {
    outline: 3px solid var(--focus-color, #2F75B5);
    outline-offset: 3px;
  }

  .menu-toggle .hamburger {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
    width: 23px;
    min-width: 23px;
    height: 18px;
    position: relative;
    margin: 0;
    padding: 0;
  }

  .menu-toggle .hamburger span {
    display: block !important;
    width: 100%;
    height: 2.5px;
    min-height: 2.5px;
    flex: 0 0 2.5px;
    border: 0;
    border-radius: 999px;
    background: currentColor !important;
    opacity: 1;
    transform-origin: center;
    transition: transform 220ms ease, opacity 180ms ease;
  }

  /* Convierte las rayitas en una X al abrir, sin ocultar la línea central antes. */
  .menu-toggle.active .hamburger span:nth-child(1) {
    transform: translateY(7.75px) rotate(45deg);
  }

  .menu-toggle.active .hamburger span:nth-child(2) {
    opacity: 0;
    transform: scaleX(.35);
  }

  .menu-toggle.active .hamburger span:nth-child(3) {
    transform: translateY(-7.75px) rotate(-45deg);
  }

  /* Panel de navegación móvil: cerrado por defecto, visible cuando JS añade .open. */
  .main-navigation {
    min-width: 0;
  }

  .main-navigation.open {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    position: absolute;
    top: calc(100% + 8px);
    left: 12px;
    right: 12px;
    width: auto;
    max-height: min(75vh, 560px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 14px;
    background: var(--bg-surface, #FFFFFF);
    color: var(--text-primary, #172033);
    border: 1px solid var(--border-color, #DCE3EC);
    border-radius: 14px;
    box-shadow: var(--shadow-lg, 0 16px 40px rgba(15, 36, 63, .16));
    z-index: 1001;
  }

  .main-navigation.open a,
  .main-navigation.open .nav-link {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border-radius: 8px;
    color: var(--text-primary, #172033);
    overflow-wrap: anywhere;
  }

  .main-navigation.open a:hover,
  .main-navigation.open .nav-link:hover,
  .main-navigation.open .nav-link.active {
    color: var(--color-secondary, #2F75B5);
    background: var(--bg-hover, #EAF2FB);
  }

  /* El contenedor del encabezado permite posicionar el panel desplegable. */
  .site-header,
  .main-header,
  header {
    position: relative;
  }
}

/* Tema oscuro: rayitas, botón y panel cambian junto con el sistema operativo. */


/* Pantallas pequeñas: el menú conserva espacio para tocar los enlaces. */
@media (max-width: 480px) {
  .menu-toggle {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
  }

  .main-navigation.open {
    left: 8px;
    right: 8px;
    padding: 12px;
    max-height: 70vh;
  }
}

/* Evita animaciones del icono si el usuario ha solicitado menos movimiento. */
@media (prefers-reduced-motion: reduce) {
  .menu-toggle .hamburger span {
    transition: none !important;
  }
}

/* =====================================================================
   RED LÍDER — CAPA FINAL DE CONTRASTE, MODO OSCURO Y RESPONSIVE
   Se añade al final para corregir reglas anteriores sin modificar HTML/JS.
   El modo oscuro sigue la preferencia del sistema operativo.
   ===================================================================== */

:root {
  color-scheme: light;
  --rl-page: #f4f7fb;
  --rl-surface: #ffffff;
  --rl-surface-alt: #edf2f8;
  --rl-text: #17263b;
  --rl-text-muted: #475569;
  --rl-border: #d8e1ec;
  --rl-shadow-card: 0 12px 28px rgba(15, 35, 62, .12), 0 3px 8px rgba(15, 35, 62, .06);
  --rl-shadow-hover: 0 22px 44px rgba(15, 35, 62, .18), 0 8px 16px rgba(15, 35, 62, .08);
}

html {
  color-scheme: light;
}

body {
  background-color: var(--rl-page);
  color: var(--rl-text);
  overflow-wrap: break-word;
}

img,
video,
iframe,
svg,
canvas {
  max-width: 100%;
}

img {
  height: auto;
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
a,
input[type="button"],
input[type="submit"],
label[for],
summary,
[role="button"],
.menu-toggle {
  cursor: pointer;
}

:focus-visible {
  outline: 3px solid #2f75b5;
  outline-offset: 3px;
}

/* Contraste de texto base y componentes frecuentes en tema claro. */
:where(p, li, dd, dt, label, small, figcaption, blockquote) {
  overflow-wrap: anywhere;
}

:where(.card, .program-card, .sector-card, .service-card, .testimonial-card,
  .blog-card, .resource-card, .gallery-card, .feature-card, .contact-card,
  .content-card, .editorial-card, .founder-card, .dual-route-card, .pillar-card,
  .incompany-card, .corp-modalities-card, .advisor-result-card, .eng-highlight-card,
  .info-box-card, .faq-item, .stat-card, .value-card, .team-card, .benefit-card,
  .course-card, .info-card, .step-card, .pricing-card, .price-card, .process-card) {
  background-color: var(--rl-surface);
  color: var(--rl-text);
  border-color: var(--rl-border);
  box-shadow: var(--rl-shadow-card);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

@media (hover: hover) and (pointer: fine) {

  :where(.card, .program-card, .sector-card, .service-card, .testimonial-card,
    .blog-card, .resource-card, .gallery-card, .feature-card, .contact-card,
    .content-card, .editorial-card, .founder-card, .dual-route-card, .pillar-card,
    .incompany-card, .corp-modalities-card, .advisor-result-card, .eng-highlight-card,
    .info-box-card, .faq-item, .stat-card, .value-card, .team-card, .benefit-card,
    .course-card, .info-card, .step-card, .pricing-card, .price-card, .process-card):hover {
    transform: translateY(-5px);
    box-shadow: var(--rl-shadow-hover);
  }
}

/* MODO OSCURO: reasigna superficies, textos, bordes y sombras de forma global. */


/* Tarjetas elevadas: profundidad visible sin alterar su contenido ni sus enlaces. */
:where(.card, .program-card, .sector-card, .service-card, .testimonial-card,
  .blog-card, .resource-card, .gallery-card, .feature-card, .contact-card,
  .content-card, .editorial-card, .founder-card, .dual-route-card, .pillar-card,
  .incompany-card, .corp-modalities-card, .advisor-result-card, .eng-highlight-card,
  .info-box-card, .faq-item, .stat-card, .value-card, .team-card, .benefit-card,
  .course-card, .info-card, .step-card, .pricing-card, .price-card, .process-card) {
  border-radius: 16px;
  overflow-wrap: anywhere;
}

/* Adaptación de cuadrículas comunes a escritorio, tablet y móvil. */
:where(.cards-grid, .card-grid, .programs-grid, .services-grid, .sectors-grid,
  .features-grid, .resources-grid, .blog-grid, .testimonials-grid, .faq-grid,
  .school-grid-team, .team-grid, .benefits-grid, .stats-grid, .values-grid) {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  min-width: 0;
}

.container,
.container-fluid,
.section-container,
.content-wrapper {
  width: min(100% - 2rem, var(--max-width, 1240px));
  margin-inline: auto;
}

@media (max-width: 900px) {
  :where(.two-column, .two-columns, .content-layout, .about-layout, .contact-layout) {
    grid-template-columns: minmax(0, 1fr);
  }

  .page-hero-title {
    font-size: clamp(1.8rem, 5vw, 2.6rem);
  }

  .section-title {
    font-size: clamp(1.6rem, 4vw, 2.25rem);
  }
}

@media (max-width: 600px) {
  html {
    font-size: 15px;
  }

  .container,
  .container-fluid,
  .section-container,
  .content-wrapper {
    width: min(100% - 1.25rem, var(--max-width, 1240px));
  }

  :where(.section, .faq-section, .contact-section, .programs-section,
    .services-section, .resources-section, .blog-section, .about-section) {
    padding-block: 2.75rem;
  }

  :where(.card, .program-card, .sector-card, .service-card, .testimonial-card,
    .blog-card, .resource-card, .gallery-card, .feature-card, .contact-card,
    .content-card, .editorial-card, .founder-card, .faq-item, .stat-card,
    .value-card, .benefit-card, .info-card, .step-card, .pricing-card, .price-card) {
    border-radius: 14px;
  }

  .page-hero-banner {
    padding: 3rem 0 2.5rem;
  }

  .page-hero-title {
    font-size: clamp(1.65rem, 7vw, 2.2rem);
  }

  .page-hero-subtitle {
    font-size: 1rem;
  }

  .header-socials,
  .footer-socials {
    flex-wrap: wrap;
  }

  .footer-grid,
  .footer-columns,
  .site-footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 380px) {

  .footer-grid,
  .footer-columns,
  .site-footer-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .social-btn,
  .footer-social-link {
    width: 40px;
    height: 40px;
  }
}

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ============================================================================
   RED LÍDER — CORRECCIÓN FINAL DE CONTRASTE, TÍTULOS, WHATSAPP Y RESPONSIVE
   Esta capa se coloca al final para corregir reglas antiguas más específicas.
   No cambia HTML, IDs, atributos ni funciones JavaScript.
   ============================================================================ */

:root {
  --rl-bg: #f5f7fb;
  --rl-bg-alt: #edf2f8;
  --rl-surface: #ffffff;
  --rl-surface-raised: #ffffff;
  --rl-text: #17263b;
  --rl-text-muted: #526176;
  --rl-border: #dce4ee;
  --rl-shadow: 0 12px 32px rgba(18, 43, 75, .12);
  --rl-shadow-hover: 0 22px 46px rgba(18, 43, 75, .2);
  --rl-focus: #2f75b5;
  --rl-accent-readable: #b94d08;
}



:root[data-theme="dark"] {
  --rl-bg: #0b1220;
  --rl-bg-alt: #111d2e;
  --rl-surface: #172438;
  --rl-surface-raised: #1d2d43;
  --rl-text: #f3f7ff;
  --rl-text-muted: #c7d2e2;
  --rl-border: #3b4d64;
  --rl-shadow: 0 12px 34px rgba(0, 0, 0, .36);
  --rl-shadow-hover: 0 24px 50px rgba(0, 0, 0, .5);
  --rl-focus: #8cc7ff;
  --rl-accent-readable: #ffb36b;
}

:root[data-theme="light"] {
  --rl-bg: #f5f7fb;
  --rl-bg-alt: #edf2f8;
  --rl-surface: #ffffff;
  --rl-surface-raised: #ffffff;
  --rl-text: #17263b;
  --rl-text-muted: #526176;
  --rl-border: #dce4ee;
  --rl-shadow: 0 12px 32px rgba(18, 43, 75, .12);
  --rl-shadow-hover: 0 22px 46px rgba(18, 43, 75, .2);
  --rl-focus: #2f75b5;
  --rl-accent-readable: #b94d08;
}

html {
  color-scheme: light dark;
}

html[data-theme="light"] {
  color-scheme: light;
}

html[data-theme="dark"] {
  color-scheme: dark;
}

body {
  background: var(--rl-bg) !important;
  color: var(--rl-text) !important;
  overflow-wrap: anywhere;
}

/* Evita que títulos con colores/gradientes heredados queden transparentes. */
h1,
h2,
h3,
h4,
h5,
h6,
.section-title,
.page-hero-title,
.hero-title,
.hero-heading,
.section-header h1,
.section-header h2,
.section-header h3,
.card-title,
.program-title,
.service-title,
.feature-title,
.blog-card-title,
.faq-question,
.page-title,
.content-title,
[class*="title"],
[class*="heading"] {
  overflow-wrap: anywhere;
  word-break: normal;
  text-decoration-color: currentColor;
}

/* Neutraliza texto transparente generado por técnicas de texto degradado. */
h1,
h2,
h3,
h4,
h5,
h6,
.section-title,
.page-hero-title,
.hero-title,
.hero-heading,
.page-title,
.content-title {
  -webkit-text-fill-color: currentColor;
  background-clip: border-box;
  -webkit-background-clip: border-box;
}

body,
p,
li,
label,
small,
summary,
blockquote,
figcaption,
input,
textarea,
select,
option,
.section-subtitle,
.hero-subtitle,
.card p,
.card li,
.card small,
.card label,
.program-card p,
.service-card p,
.feature-card p,
.testimonial-card p,
.blog-card p,
.resource-card p,
.contact-card p,
.content-card p,
.faq-answer,
.footer-desc,
.footer-motto,
.footer-contact-item,
.footer-bottom {
  overflow-wrap: anywhere;
}

/* Componentes de superficie clara: texto oscuro en claro y claro en oscuro. */
:where(.card, .program-card, .sector-card, .service-card, .testimonial-card,
  .blog-card, .resource-card, .gallery-card, .feature-card, .contact-card,
  .content-card, .editorial-card, .founder-card, .dual-route-card, .pillar-card,
  .incompany-card, .corp-modalities-card, .advisor-result-card, .eng-highlight-card,
  .info-box-card, .faq-item, .stat-card, .value-card, .team-card, .benefit-card,
  .info-card, .step-card, .pricing-card, .price-card, .process-card) {
  background-color: var(--rl-surface) !important;
  color: var(--rl-text) !important;
  border-color: var(--rl-border) !important;
  box-shadow: var(--rl-shadow);
  min-width: 0;
  max-width: 100%;
  transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}

:where(.card, .program-card, .sector-card, .service-card, .testimonial-card,
  .blog-card, .resource-card, .gallery-card, .feature-card, .contact-card,
  .content-card, .editorial-card, .founder-card, .dual-route-card, .pillar-card,
  .incompany-card, .corp-modalities-card, .advisor-result-card, .eng-highlight-card,
  .info-box-card, .faq-item, .stat-card, .value-card, .team-card, .benefit-card,
  .info-card, .step-card, .pricing-card, .price-card, .process-card) :where(p, li, small, label, span, strong, em, h1, h2, h3, h4, h5, h6) {
  color: inherit;
}

@media (hover: hover) and (pointer: fine) {

  :where(.card, .program-card, .sector-card, .service-card, .testimonial-card,
    .blog-card, .resource-card, .gallery-card, .feature-card, .contact-card,
    .content-card, .editorial-card, .founder-card, .dual-route-card, .pillar-card,
    .incompany-card, .corp-modalities-card, .advisor-result-card, .eng-highlight-card,
    .info-box-card, .faq-item, .stat-card, .value-card, .team-card, .benefit-card,
    .info-card, .step-card, .pricing-card, .price-card, .process-card):hover {
    transform: translateY(-5px);
    box-shadow: var(--rl-shadow-hover);
    border-color: var(--rl-focus) !important;
  }
}

/* Textos auxiliares, enlaces y formularios siempre contrastados. */
a {
  color: var(--color-secondary, #2f75b5);
}

a:hover {
  color: var(--rl-accent-readable);
}

body :where(p, li, small, label, figcaption, .text-muted, .section-subtitle) {
  color: var(--rl-text-muted);
}

body :where(h1, h2, h3, h4, h5, h6, .section-title, .page-title, .content-title) {
  color: var(--rl-text);
}

input,
textarea,
select {
  color: var(--rl-text) !important;
  background-color: var(--rl-surface) !important;
  border-color: var(--rl-border) !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--rl-text-muted) !important;
  opacity: 1;
}

select option {
  color: #17263b;
  background: #fff;
}

:where(input, textarea, select, button, a, [tabindex]):focus-visible {
  outline: 3px solid var(--rl-focus);
  outline-offset: 3px;
}

/* Superficies oscuras intencionales (hero, barra de navegación y footer) conservan texto claro. */
:where(.hero, .hero-section, .page-hero-banner, .cta-banner, .footer, footer, .site-footer,
  .site-header, .main-navigation, .sidebar, .dark-section, .bg-primary) {
  color: #f8fafc;
}

:where(.hero, .hero-section, .page-hero-banner, .cta-banner, .footer, footer, .site-footer,
  .site-header, .dark-section, .bg-primary) :where(h1, h2, h3, h4, h5, h6, p, li, small, label, span, strong) {
  color: inherit;
}

:where(.hero, .hero-section, .page-hero-banner, .cta-banner, .footer, footer, .site-footer) a {
  color: #dbeafe;
}

/* Widget de WhatsApp: garantiza contraste en la ventana, cabecera, mensajes y enlaces. */
.whatsapp-widget {
  z-index: 2000;
  max-width: calc(100vw - 20px);
}

.whatsapp-btn {
  color: #ffffff !important;
  background: #128c4a !important;
  border: 2px solid rgba(255, 255, 255, .9);
  box-shadow: 0 8px 26px rgba(0, 0, 0, .28), 0 0 0 4px rgba(37, 211, 102, .16);
}

.whatsapp-btn i,
.whatsapp-btn svg,
.whatsapp-btn span {
  color: #fff !important;
  fill: currentColor;
}

.whatsapp-popup {
  color: #172b25 !important;
  background: #ffffff !important;
  border: 1px solid #cbd5d1 !important;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .28) !important;
  max-width: calc(100vw - 24px);
  max-height: min(70vh, 560px);
  overflow: auto;
}

.whatsapp-popup :where(p, span, small, label, strong, h1, h2, h3, h4, a, li, div) {
  color: #20332d;
}

.whatsapp-popup .wa-header,
.whatsapp-popup .wa-header :where(p, span, small, strong, h1, h2, h3, h4, a, div) {
  background-color: #075e54;
  color: #ffffff !important;
}

.whatsapp-popup input,
.whatsapp-popup textarea {
  background: #fff !important;
  color: #172b25 !important;
  border-color: #b7c8c1 !important;
}

.whatsapp-popup input::placeholder,
.whatsapp-popup textarea::placeholder {
  color: #52665f !important;
}

.whatsapp-popup a {
  color: #075e54 !important;
  text-decoration: underline;
}

@media (max-width: 480px) {
  .whatsapp-widget {
    right: 14px;
    bottom: 14px;
  }

  .whatsapp-btn {
    width: 54px;
    height: 54px;
    font-size: 1.7rem;
  }

  .whatsapp-popup {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 78px;
    width: auto;
    max-width: none;
    max-height: min(68dvh, 520px);
  }
}

/* Menú móvil: las tres líneas quedan visibles y el panel admite desplazamiento. */
@media (max-width: 820px) {
  .menu-toggle {
    display: inline-flex !important;
    width: 46px;
    height: 46px;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2100;
    color: var(--rl-text) !important;
    background: var(--rl-surface) !important;
    border: 1px solid var(--rl-border) !important;
    border-radius: 12px;
    cursor: pointer;
  }

  .menu-toggle .hamburger {
    display: flex !important;
    width: 24px;
    height: 18px;
    flex-direction: column;
    justify-content: space-between;
  }

  .menu-toggle .hamburger span {
    display: block !important;
    width: 24px;
    height: 2.5px;
    min-height: 2.5px;
    background: currentColor !important;
    border-radius: 4px;
    opacity: 1 !important;
    transform-origin: center;
    transition: transform .22s ease, opacity .22s ease;
  }

  .menu-toggle.active .hamburger span:nth-child(1) {
    transform: translateY(7.75px) rotate(45deg);
  }

  .menu-toggle.active .hamburger span:nth-child(2) {
    opacity: 0 !important;
  }

  .menu-toggle.active .hamburger span:nth-child(3) {
    transform: translateY(-7.75px) rotate(-45deg);
  }

  .main-navigation.open {
    max-height: min(78dvh, 620px);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--rl-surface) !important;
    color: var(--rl-text) !important;
    border: 1px solid var(--rl-border) !important;
    box-shadow: var(--rl-shadow-hover);
  }

  .main-navigation.open :where(a, .nav-link) {
    color: var(--rl-text) !important;
    min-height: 44px;
  }

  .main-navigation.open :where(a:hover, .nav-link:hover, .nav-link.active) {
    color: var(--rl-text) !important;
    background: var(--rl-bg-alt) !important;
  }
}

/* Adaptación fluida a tamaños intermedios y pantallas pequeñas. */
img,
video,
iframe,
canvas,
svg {
  max-width: 100%;
}

img {
  height: auto;
}

:where(.container, .container-fluid, .section-container, .content-wrapper,
  .row, .grid, .cards-grid, .card-grid, .programs-grid, .services-grid,
  .features-grid, .resources-grid, .blog-grid, .testimonials-grid, .faq-grid,
  .school-grid-team, .team-grid, .benefits-grid, .stats-grid, .values-grid) {
  min-width: 0;
}

@media (max-width: 760px) {
  .shell {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .main {
    padding: clamp(1.25rem, 5vw, 2rem) !important;
  }

  .side {
    padding: clamp(1.5rem, 6vw, 2rem) !important;
  }

  .faq-grid,
  .school-grid-team,
  .team-grid,
  .footer-grid,
  .footer-columns,
  .site-footer-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .section-title,
  .page-hero-title,
  .hero-title,
  .page-title {
    font-size: clamp(1.55rem, 6.5vw, 2.3rem);
    line-height: 1.2;
  }

  .section-subtitle,
  .page-hero-subtitle,
  .hero-subtitle {
    font-size: clamp(.95rem, 3.5vw, 1.1rem);
  }

  .nav-buttons,
  .cta-banner-actions {
    flex-wrap: wrap;
  }

  button,
  .btn,
  .btn-primary,
  .btn-secondary {
    max-width: 100%;
  }
}

@media (max-width: 360px) {
  html {
    font-size: 14px;
  }

  .container,
  .container-fluid,
  .section-container,
  .content-wrapper {
    width: calc(100% - 20px);
  }

  .whatsapp-widget {
    right: 10px;
    bottom: 10px;
  }

  .whatsapp-popup {
    left: 8px;
    right: 8px;
    bottom: 72px;
  }
}

@media (prefers-reduced-motion: reduce) {

  :where(.card, .program-card, .sector-card, .service-card, .testimonial-card,
    .blog-card, .resource-card, .gallery-card, .feature-card, .contact-card,
    .content-card, .editorial-card, .founder-card, .faq-item, .stat-card,
    .value-card, .benefit-card, .info-card, .step-card, .pricing-card, .price-card) {
    transition: none !important;
  }
}

/* ============================================================================
   RED LÍDER PERÚ — CAPA FINAL DE ESTABILIDAD VISUAL
   Objetivo: tema automático del sistema, texto opaco y legible, y diseño adaptable.
   Se añade al final para prevalecer sobre reglas antiguas sin borrar componentes.
   Si JavaScript define data-theme="light" o data-theme="dark", esa elección manda.
   Si no define un tema explícito, se usa automáticamente el tema del dispositivo.
   ============================================================================ */

:root {
  color-scheme: light;
  --color-primary: #17365d;
  --color-primary-dark: #0f243f;
  --color-primary-light: #224c7f;
  --color-secondary: #2f75b5;
  --color-secondary-light: #eaf2fb;
  --color-accent: #b94d08;
  --color-accent-hover: #963c05;
  --color-accent-soft: #fff1e6;
  --color-bg-white: #ffffff;
  --color-bg-light: #f5f7fb;
  --color-bg-card: #ffffff;
  --color-text-main: #17263b;
  --color-text-muted: #526176;
  --color-text-light: #526176;
  --color-border: #dce4ee;
  --color-border-focus: #2f75b5;
  --rl-bg: #f5f7fb;
  --rl-bg-alt: #edf2f8;
  --rl-surface: #ffffff;
  --rl-surface-raised: #ffffff;
  --rl-text: #17263b;
  --rl-text-muted: #526176;
  --rl-border: #dce4ee;
  --rl-focus: #2f75b5;
  --rl-accent-readable: #963c05;
  --rl-shadow: 0 12px 32px rgba(18, 43, 75, .12);
  --rl-shadow-hover: 0 22px 46px rgba(18, 43, 75, .2);
}

/* Tema oscuro automático cuando el usuario no ha elegido explícitamente el claro. */


/* Tema oscuro manual, si el sitio o su JavaScript lo establece en el elemento raíz. */
:root[data-theme="dark"],
html[data-theme="dark"] {
  color-scheme: dark;
  --color-primary: #e4efff;
  --color-primary-dark: #d7e7ff;
  --color-primary-light: #b9d7ff;
  --color-secondary: #8cc7ff;
  --color-secondary-light: #203752;
  --color-accent: #ffb36b;
  --color-accent-hover: #ffd0a0;
  --color-accent-soft: #3a2a20;
  --color-bg-white: #0b1220;
  --color-bg-light: #111d2e;
  --color-bg-card: #172438;
  --color-text-main: #f3f7ff;
  --color-text-muted: #c7d2e2;
  --color-text-light: #c7d2e2;
  --color-border: #3b4d64;
  --color-border-focus: #8cc7ff;
  --rl-bg: #0b1220;
  --rl-bg-alt: #111d2e;
  --rl-surface: #172438;
  --rl-surface-raised: #1d2d43;
  --rl-text: #f3f7ff;
  --rl-text-muted: #c7d2e2;
  --rl-border: #3b4d64;
  --rl-focus: #8cc7ff;
  --rl-accent-readable: #ffbf83;
  --rl-shadow: 0 12px 34px rgba(0, 0, 0, .36);
  --rl-shadow-hover: 0 24px 50px rgba(0, 0, 0, .5);
}

/* Tema claro manual tiene prioridad incluso si el dispositivo está en oscuro. */
:root[data-theme="light"],
html[data-theme="light"] {
  color-scheme: light;
  --color-primary: #17365d;
  --color-primary-dark: #0f243f;
  --color-primary-light: #224c7f;
  --color-secondary: #2f75b5;
  --color-secondary-light: #eaf2fb;
  --color-accent: #b94d08;
  --color-accent-hover: #963c05;
  --color-accent-soft: #fff1e6;
  --color-bg-white: #ffffff;
  --color-bg-light: #f5f7fb;
  --color-bg-card: #ffffff;
  --color-text-main: #17263b;
  --color-text-muted: #526176;
  --color-text-light: #526176;
  --color-border: #dce4ee;
  --color-border-focus: #2f75b5;
  --rl-bg: #f5f7fb;
  --rl-bg-alt: #edf2f8;
  --rl-surface: #ffffff;
  --rl-surface-raised: #ffffff;
  --rl-text: #17263b;
  --rl-text-muted: #526176;
  --rl-border: #dce4ee;
  --rl-focus: #2f75b5;
  --rl-accent-readable: #963c05;
  --rl-shadow: 0 12px 32px rgba(18, 43, 75, .12);
  --rl-shadow-hover: 0 22px 46px rgba(18, 43, 75, .2);
}

html {
  min-width: 320px;
  scroll-padding-top: calc(var(--header-height, 80px) + 16px);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  min-width: 320px;
  background-color: var(--rl-bg) !important;
  color: var(--rl-text) !important;
  overflow-x: clip;
  overflow-wrap: anywhere;
}

/* No se permite que opacidad, gradientes ni text-fill oculten texto normal. */
body :where(h1, h2, h3, h4, h5, h6, p, li, label, small, summary, blockquote,
  figcaption, strong, em, b, dt, dd, th, td, legend, output, .section-title,
  .page-title, .content-title, .hero-title, .page-hero-title, .card-title,
  .program-card-title, .service-title, .sector-card-title, .blog-card-title,
  .testimonial-quote, .faq-question, .faq-answer, .footer-desc, .footer-motto) {
  -webkit-text-fill-color: currentColor;
  opacity: 1;
  text-shadow: none;
  overflow-wrap: anywhere;
}

/* Los títulos usan color sólido; se conserva el color de énfasis de spans destacados. */
body :where(h1, h2, h3, h4, h5, h6, .section-title, .page-title, .content-title,
  .hero-title, .page-hero-title, .card-title, .program-card-title,
  .service-title, .sector-card-title, .blog-card-title) {
  color: var(--rl-text);
  background-image: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
}

body :where(p, li, label, small, figcaption, .text-muted, .section-subtitle,
  .hero-lead, .program-summary, .program-card-summary, .service-desc,
  .sector-card-desc, .blog-card-excerpt, .testimonial-role, .meta-value) {
  color: var(--rl-text-muted);
}

/* Mantiene blancos los textos sobre banners y superficies intencionalmente oscuras. */
:where(.page-hero-banner, .corporate-section, .challenge-quote-box, .workflow-bar,
  .hero-badge-floating, .founder-badge, .cta-banner, .dark-section, .bg-primary) {
  color: #f8fafc;
}

:where(.page-hero-banner, .corporate-section, .challenge-quote-box, .workflow-bar,
  .hero-badge-floating, .founder-badge, .cta-banner, .dark-section, .bg-primary) :where(h1, h2, h3, h4, h5, h6, p, li, small, label, span, strong, a) {
  color: inherit;
  -webkit-text-fill-color: currentColor;
}

/* Cabecera, navegación, tarjetas y fondos respetan los tokens del tema. */
.site-header {
  background: var(--rl-surface) !important;
  color: var(--rl-text) !important;
  border-color: var(--rl-border) !important;
}

.site-header :where(a, .brand-title, .nav-link, .menu-toggle) {
  color: var(--rl-text) !important;
}

.main-navigation,
.main-navigation.open {
  color: var(--rl-text);
}

:where(.routes-dual-section, .school-section, .programs-section, .gallery-section,
  .blog-section, .contact-page-layout, .hero-section, .challenge-section,
  .services-overview-section, .sectors-section, .testimonials-section,
  .credibility-strip) {
  background-color: var(--rl-bg) !important;
  color: var(--rl-text);
}

:where(.dual-route-card, .challenge-item, .school-methodology-card, .method-step,
  .service-card, .program-card, .sector-card, .testimonial-card, .blog-card,
  .info-box-card, .founder-card, .corp-modalities-card, .resource-card,
  .feature-card, .contact-card, .content-card, .faq-item, .stat-card, .value-card,
  .team-card, .benefit-card, .step-card, .pricing-card, .price-card, .process-card) {
  background-color: var(--rl-surface) !important;
  color: var(--rl-text) !important;
  border-color: var(--rl-border) !important;
}

:where(.dual-route-card, .challenge-item, .school-methodology-card, .method-step,
  .service-card, .program-card, .sector-card, .testimonial-card, .blog-card,
  .info-box-card, .founder-card, .corp-modalities-card, .resource-card,
  .feature-card, .contact-card, .content-card, .faq-item, .stat-card, .value-card,
  .team-card, .benefit-card, .step-card, .pricing-card, .price-card, .process-card) :where(h1, h2, h3, h4, h5, h6, p, li, small, label, span, strong, em) {
  color: inherit;
  -webkit-text-fill-color: currentColor;
}

/* Inputs con fondo y texto opacos en ambos modos; placeholders legibles. */
:where(input, textarea, select, option) {
  color: var(--rl-text) !important;
  background-color: var(--rl-surface) !important;
  border-color: var(--rl-border) !important;
  opacity: 1;
}

:where(input, textarea)::placeholder {
  color: var(--rl-text-muted) !important;
  -webkit-text-fill-color: var(--rl-text-muted) !important;
  opacity: 1 !important;
}

select option {
  color: var(--rl-text) !important;
  background: var(--rl-surface) !important;
}

/* Enlaces, controles y estados de foco visibles. */
a {
  text-decoration-thickness: from-font;
  text-underline-offset: .18em;
}

a:not(.btn):not(.btn-primary):not(.btn-secondary):not(.btn-outline-white) {
  color: var(--color-secondary);
}

a:not(.btn):not(.btn-primary):not(.btn-secondary):not(.btn-outline-white):hover {
  color: var(--rl-accent-readable);
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--rl-focus) !important;
  outline-offset: 3px;
}

button,
.btn {
  -webkit-text-fill-color: currentColor;
}

/* Imágenes y medios fluidos sin deformar su proporción. */
img,
video,
iframe,
canvas,
svg {
  max-width: 100%;
}

img,
video {
  height: auto;
}

iframe {
  border: 0;
}

:where(.container, .container-fluid, .section-container, .content-wrapper,
  .row, .grid, .cards-grid, .card-grid, .programs-grid, .services-grid,
  .features-grid, .resources-grid, .blog-grid, .testimonials-grid, .faq-grid,
  .school-grid, .team-grid, .benefits-grid, .stats-grid, .values-grid) {
  min-width: 0;
}

/* Tablet y laptop compacta. */
@media (max-width: 1024px) {
  .container {
    padding-left: clamp(1rem, 3vw, 1.5rem);
    padding-right: clamp(1rem, 3vw, 1.5rem);
  }

  .hero-grid,
  .challenge-grid,
  .school-grid,
  .corporate-grid,
  .contact-split-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(1.25rem, 3vw, 2.5rem);
  }

  .sectors-grid,
  .gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .testimonials-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .nav-menu {
    gap: .8rem;
  }
}

/* Celulares y tablets en vertical. */
@media (max-width: 820px) {

  .hero-grid,
  .challenge-grid,
  .school-grid,
  .corporate-grid,
  .contact-split-grid,
  .dual-cards-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .hero-section,
  .challenge-section,
  .school-section,
  .services-overview-section,
  .programs-section,
  .corporate-section,
  .sectors-section,
  .gallery-section,
  .testimonials-section,
  .blog-section {
    padding-block: clamp(2.5rem, 7vw, 4rem);
  }

  .hero-title {
    font-size: clamp(2rem, 7vw, 3rem);
  }

  .section-title,
  .page-hero-title {
    font-size: clamp(1.7rem, 6vw, 2.4rem);
  }

  .sectors-grid,
  .gallery-grid,
  .testimonials-grid,
  .blog-grid,
  .programs-grid,
  .methodology-steps-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .sectors-main-banner {
    padding: clamp(1.25rem, 5vw, 2.5rem);
  }

  .dual-route-card,
  .program-card,
  .sector-card,
  .testimonial-card,
  .blog-card,
  .info-box-card {
    padding: clamp(1.15rem, 4vw, 2rem);
  }

  .hero-actions {
    align-items: stretch;
  }

  .hero-actions .btn {
    white-space: normal;
  }

  .program-card-footer {
    flex-wrap: wrap;
  }

  .blog-controls {
    align-items: stretch;
  }

  .blog-search-box {
    min-width: 0;
    width: 100%;
  }
}

@media (max-width: 480px) {
  html {
    font-size: 15px;
  }

  .container,
  .container-fluid,
  .section-container,
  .content-wrapper {
    width: 100%;
    max-width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .brand-logo-img {
    max-width: min(42vw, 170px);
    height: auto;
    max-height: 44px;
  }

  .brand-title {
    font-size: clamp(.95rem, 4vw, 1.2rem);
  }

  .brand-subtitle {
    font-size: .6rem;
    letter-spacing: .08em;
  }

  .hero-title {
    font-size: clamp(1.8rem, 8vw, 2.35rem);
  }

  .page-hero-banner {
    padding: 2.5rem 0 2rem;
  }

  .hero-image {
    height: auto;
    max-height: 380px;
  }

  .hero-badge-floating {
    left: 10px;
    right: 10px;
    bottom: 10px;
    padding: .85rem;
  }

  .workflow-bar {
    padding: 1rem;
  }

  .workflow-chain {
    justify-content: center;
  }

  .btn,
  .btn-primary,
  .btn-secondary,
  .btn-outline-white {
    white-space: normal;
  }

  .whatsapp-widget {
    right: 12px;
    bottom: 12px;
    max-width: calc(100vw - 24px);
  }

  .whatsapp-popup {
    left: 12px;
    right: 12px;
    width: auto;
    max-width: none;
  }
}

@media (max-width: 360px) {

  .container,
  .container-fluid,
  .section-container,
  .content-wrapper {
    padding-left: .75rem;
    padding-right: .75rem;
  }

  .header-inner {
    gap: .5rem;
  }

  .brand-logo {
    min-width: 0;
    gap: .4rem;
  }

  .menu-toggle {
    flex: 0 0 auto;
  }
}

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}


/* ============================================================================
   CORRECCIÓN EXTRA DE CONTRASTE — TEXTOS QUE SIGUEN PÁLIDOS O TRANSPARENTES
   Esta capa debe permanecer al FINAL del archivo. Corrige especialmente spans
   dentro de títulos, textos con gradientes, utilidades de opacidad y subtítulos.
   No depende de que el navegador esté en modo claro u oscuro.
   ============================================================================ */

/* El texto normal nunca debe quedar transparente por un gradiente o text-fill. */
:where(body, main, section, article, aside, nav, footer, header,
  h1, h2, h3, h4, h5, h6, p, li, label, small, summary, blockquote,
  figcaption, strong, em, b, i, dt, dd, th, td, legend, output,
  .hero-title, .hero-title span, .hero-title strong, .hero-title em,
  .section-title, .section-title span, .section-subtitle,
  .page-title, .page-title span, .page-hero-title, .page-hero-title span,
  .content-title, .content-title span, .hero-lead, .hero-description,
  .hero-subtitle, .lead, .subtitle, .text-muted, .text-light,
  .gradient-text, .text-gradient, .gradient-title, .highlight-text,
  .section-description, .card-title, .card-title span,
  .program-card-title, .program-card-summary, .service-title,
  .service-desc, .sector-card-title, .sector-card-desc,
  .footer-desc, .footer-motto, .nav-link) {
  opacity: 1 !important;
  -webkit-text-fill-color: currentColor;
  text-shadow: none;
}

/* En titulares y textos destacados se elimina el gradiente que los hacía
   prácticamente blancos sobre un fondo blanco. El color de énfasis se conserva
   en los selectores de acento declarados debajo. */
:where(h1, h2, h3, h4, h5, h6,
  .hero-title, .section-title, .page-title, .page-hero-title, .content-title,
  .gradient-text, .text-gradient, .gradient-title) {
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  color: var(--rl-text, #17263b) !important;
  -webkit-text-fill-color: currentColor !important;
  opacity: 1 !important;
}

/* Las palabras internas de un título también deben tener contraste real. */
:where(.hero-title, .section-title, .page-title, .page-hero-title, .content-title,
  h1, h2, h3, h4, h5, h6) :where(span, strong, em, b, i) {
  opacity: 1 !important;
  -webkit-text-fill-color: currentColor !important;
  text-shadow: none !important;
}

/* Clases frecuentes para textos secundarios: legibles, no gris casi blanco. */
:where(p, li, label, small, figcaption, .text-muted, .text-light,
  .section-subtitle, .hero-lead, .hero-description, .hero-subtitle,
  .lead, .subtitle, .section-description, .program-card-summary,
  .service-desc, .sector-card-desc, .blog-card-excerpt, .testimonial-role,
  .footer-desc, .footer-motto) {
  color: var(--rl-text-muted, #526176) !important;
  -webkit-text-fill-color: currentColor !important;
  opacity: 1 !important;
}

/* Mantener contraste en la navegación y en elementos que ya tienen fondo oscuro. */
.site-header,
.site-header :where(a, span, strong, small, p, button, .nav-link) {
  opacity: 1 !important;
}

:where(.page-hero-banner, .corporate-section, .challenge-quote-box, .workflow-bar,
  .hero-badge-floating, .founder-badge, .cta-banner, .dark-section, .bg-primary) :where(h1, h2, h3, h4, h5, h6, p, li, small, label, span, strong, a) {
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
  opacity: 1 !important;
}

/* Botones: evita texto pálido heredado, conservando fondos de cada variante. */
:where(button, .btn, .btn-primary, .btn-secondary, .btn-outline-white,
  .hero-actions a, .hero-actions button) {
  opacity: 1 !important;
  -webkit-text-fill-color: currentColor !important;
}

:where(.btn-primary, button.btn-primary) {
  color: #ffffff !important;
}

:where(.btn-secondary, button.btn-secondary) {
  color: var(--rl-text, #17263b) !important;
}

/* Asegura una paleta legible con tema oscuro, también para textos anidados. */


:root[data-theme="dark"] :where(p, li, label, small, figcaption, .text-muted, .text-light,
  .section-subtitle, .hero-lead, .hero-description, .hero-subtitle,
  .lead, .subtitle, .section-description, .program-card-summary,
  .service-desc, .sector-card-desc, .blog-card-excerpt, .testimonial-role,
  .footer-desc, .footer-motto) {
  color: #c7d2e2 !important;
  -webkit-text-fill-color: currentColor !important;
}

/* Si tu contenedor o el iframe tiene una clase específica, por ejemplo .map-container o iframe */
.map-container iframe,
iframe {
  width: 100%;
  height: 400px;
  /* Dale una altura fija clara, como 350px o 400px */
  border: 0;
  display: block;
}

/* Reemplaza .nav-link o usa la clase exacta que tengan esos elementos en tu HTML */
.nav-link,
a {
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}


/* ============================================================================
   RED LÍDER — CAPA VISUAL PREMIUM 2026
   GUÍA DE EDICIÓN: QUÉ CAMBIAR Y QUÉ NO
   - Puede cambiarse: textos, imágenes, variables de color y radios de tarjetas.
   - No tocar sin pruebas: breakpoints, estados .open/.active, focus-visible,
     prefers-reduced-motion y reglas anti-overflow.
   - Esta capa permanece al final para unificar el diseño de todas las páginas.
   ============================================================================ */

:root {
  color-scheme: light;
  --rl-navy-950: #071a2d;
  --rl-navy-900: #0b2645;
  --rl-navy-800: #123b67;
  --rl-blue-600: #1666b1;
  --rl-blue-500: #2f75b5;
  --rl-cyan: #2bb8e6;
  --rl-orange-500: #f47b20;
  --rl-orange-400: #ff9b3d;
  --rl-gold: #ffc857;
  --rl-white: #ffffff;
  --rl-ice: #eef6ff;
  --rl-mist: #f6f9fc;
  --rl-ink: #10243c;
  --rl-muted: #53657a;
  --rl-line: rgba(23,54,93,.12);
  --rl-shadow-premium: 0 24px 70px rgba(8,31,58,.16);
  --rl-shadow-float: 0 18px 38px rgba(23,54,93,.14), 0 3px 9px rgba(23,54,93,.08);
  --rl-radius-xl: 28px;
  --rl-radius-2xl: 36px;
  --rl-ease: cubic-bezier(.2,.75,.25,1);
}

html { background:#fff; overflow-x:hidden; }
body {
  background:#fff !important;
  color:var(--rl-ink) !important;
  overflow-x:hidden !important;
  min-width:0;
  isolation:isolate;
}
body::before {
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-2;
  background:
    radial-gradient(circle at 8% 12%, rgba(47,117,181,.08), transparent 24rem),
    radial-gradient(circle at 92% 28%, rgba(244,123,32,.075), transparent 22rem),
    linear-gradient(#fff,#fff);
}

/* Barra de progreso de lectura creada por app.js */
.rl-scroll-progress {
  position:fixed; inset:0 auto auto 0; height:3px; width:var(--progress,0%);
  z-index:3000; pointer-events:none;
  background:linear-gradient(90deg,var(--rl-orange-500),var(--rl-gold),var(--rl-cyan));
  box-shadow:0 0 16px rgba(244,123,32,.45);
}

/* HEADER PREMIUM */
.site-header {
  height:84px !important;
  background:rgba(255,255,255,.86) !important;
  border-bottom:1px solid rgba(23,54,93,.08) !important;
  box-shadow:0 1px 0 rgba(255,255,255,.8);
  backdrop-filter:blur(18px) saturate(150%) !important;
  -webkit-backdrop-filter:blur(18px) saturate(150%) !important;
}
.site-header.scrolled { box-shadow:0 14px 38px rgba(7,26,45,.1) !important; }
.header-inner { gap:1rem; }
.brand-logo-img { height:50px; filter:drop-shadow(0 5px 10px rgba(23,54,93,.08)); }
.main-navigation { margin-left:auto; }
.nav-menu { gap:.32rem !important; }
.nav-link,
a.nav-link {
  border:0 !important;
  border-radius:999px !important;
  padding:.68rem .86rem !important;
  color:var(--rl-navy-900) !important;
  font-weight:700 !important;
  background:transparent !important;
  box-shadow:none !important;
}
.nav-link::after { display:none !important; }
.nav-link:hover { color:var(--rl-blue-600) !important; background:var(--rl-ice) !important; transform:translateY(-1px); }
.nav-link.active { color:#fff !important; background:linear-gradient(135deg,var(--rl-navy-900),var(--rl-blue-600)) !important; box-shadow:0 8px 20px rgba(23,54,93,.2) !important; }
.nav-link.nav-pill { color:var(--rl-orange-500) !important; background:rgba(244,123,32,.08) !important; }
.nav-link.nav-pill:hover { background:rgba(244,123,32,.14) !important; color:#c9580c !important; }
.header-socials { gap:7px !important; margin-left:.35rem; }
.social-btn,
a.social-btn {
  width:34px !important; height:34px !important; border-radius:11px !important;
  background:#fff !important; border:1px solid var(--rl-line) !important;
  box-shadow:0 5px 16px rgba(23,54,93,.07) !important;
}
.social-btn:hover { transform:translateY(-3px) scale(1.05) !important; box-shadow:0 10px 22px rgba(23,54,93,.12) !important; }
.menu-toggle { width:44px;height:44px;border-radius:13px !important;background:var(--rl-ice) !important;border:1px solid var(--rl-line) !important; }

/* HOME HERO: alto impacto sin perder identidad institucional */
.hero-section {
  min-height:calc(100svh - 84px);
  padding:clamp(4.4rem,7vw,7rem) 0 0 !important;
  background:
    radial-gradient(circle at 10% 12%, rgba(43,184,230,.18), transparent 30rem),
    radial-gradient(circle at 88% 20%, rgba(244,123,32,.18), transparent 24rem),
    linear-gradient(135deg,#f9fcff 0%,#edf6ff 52%,#fff7f0 100%) !important;
}
.hero-section::before,
.hero-section::after {
  content:""; position:absolute; border-radius:999px; pointer-events:none; filter:blur(2px); opacity:.9;
}
.hero-section::before { width:340px;height:340px;right:-130px;top:3%;background:linear-gradient(135deg,rgba(244,123,32,.2),rgba(255,200,87,.04)); }
.hero-section::after { width:260px;height:260px;left:-130px;bottom:9%;background:linear-gradient(135deg,rgba(22,102,177,.16),rgba(43,184,230,.03)); }
.hero-grid { position:relative;z-index:2;grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr) !important;gap:clamp(2rem,5vw,5.5rem) !important;align-items:center; }
.hero-tag {
  width:max-content;max-width:100%;padding:.65rem .9rem !important;
  background:rgba(255,255,255,.72) !important;border:1px solid rgba(22,102,177,.14) !important;
  border-radius:999px !important;color:var(--rl-blue-600) !important;
  box-shadow:0 10px 35px rgba(23,54,93,.08);backdrop-filter:blur(10px);
}
.hero-tag i { color:var(--rl-orange-500); }
.hero-title {
  margin-top:1.35rem !important;
  font-size:clamp(2.75rem,5vw,5.2rem) !important;
  line-height:1.03 !important;
  letter-spacing:-.045em !important;
  color:var(--rl-navy-950) !important;
  max-width:850px;
  text-wrap:balance;
}
.hero-title span { display:block;color:inherit !important; }
.hero-title .highlight {
  color:var(--rl-blue-600) !important;
  background:none !important;
  -webkit-text-fill-color:currentColor !important;
  display:inline-block;
}
.hero-lead { font-size:clamp(1.04rem,1.4vw,1.22rem) !important;line-height:1.75 !important;color:var(--rl-muted) !important;max-width:700px; }
.hero-actions { gap:.9rem !important; margin-top:1.7rem !important; flex-wrap:wrap; }
.btn,
a.btn,
button.btn {
  border-radius:14px !important; border:1px solid transparent !important;
  font-weight:800 !important; letter-spacing:-.01em;
  transition:transform .25s var(--rl-ease),box-shadow .25s var(--rl-ease),background .25s ease,color .25s ease !important;
  position:relative; overflow:hidden; isolation:isolate;
}
.btn::before { content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 25%,rgba(255,255,255,.28) 45%,transparent 62%);transform:translateX(-130%);transition:transform .65s var(--rl-ease); }
.btn:hover::before { transform:translateX(130%); }
.btn-primary,
a.btn-primary,button.btn-primary { background:linear-gradient(135deg,var(--rl-orange-500),#ff9538) !important;color:#fff !important;box-shadow:0 12px 28px rgba(244,123,32,.28) !important; }
.btn-primary:hover { transform:translateY(-3px) !important;box-shadow:0 18px 36px rgba(244,123,32,.35) !important; }
.btn-secondary,
a.btn-secondary,button.btn-secondary { background:#fff !important;color:var(--rl-navy-900) !important;border-color:rgba(23,54,93,.16) !important;box-shadow:0 10px 25px rgba(23,54,93,.1) !important; }
.btn-secondary:hover { color:#fff !important;background:linear-gradient(135deg,var(--rl-navy-900),var(--rl-blue-600)) !important;transform:translateY(-3px) !important; }

.hero-proof-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem;margin-top:2rem;max-width:720px; }
.hero-proof { padding:.9rem 1rem;border-radius:18px;background:rgba(255,255,255,.68);border:1px solid rgba(23,54,93,.09);box-shadow:0 12px 30px rgba(23,54,93,.07);backdrop-filter:blur(10px); }
.hero-proof strong { display:block;font-size:.95rem;color:var(--rl-navy-900) !important; }
.hero-proof span { display:block;margin-top:.16rem;font-size:.76rem;line-height:1.35;color:var(--rl-muted) !important; }
.hero-visual { perspective:1200px; }
.hero-image-wrapper {
  border-radius:32px !important;padding:8px;background:linear-gradient(135deg,rgba(47,117,181,.7),rgba(255,255,255,.6),rgba(244,123,32,.75));
  box-shadow:0 35px 80px rgba(7,26,45,.24) !important;overflow:visible !important;transform-style:preserve-3d;
}
.hero-image-wrapper::before { content:"";position:absolute;inset:11% -7% -8% 13%;z-index:-1;border-radius:36px;background:linear-gradient(135deg,rgba(22,102,177,.2),rgba(244,123,32,.18));filter:blur(24px); }
.hero-image { border-radius:25px !important;min-height:430px;object-fit:cover;transition:transform .7s var(--rl-ease),filter .4s ease !important; }
.hero-image-wrapper:hover .hero-image { transform:scale(1.025) !important;filter:saturate(1.08) contrast(1.02); }
.hero-badge-floating { right:-20px !important;left:auto !important;bottom:24px !important;max-width:310px;background:rgba(7,26,45,.91) !important;border:1px solid rgba(255,255,255,.15) !important;border-radius:20px !important;box-shadow:0 22px 50px rgba(7,26,45,.35) !important;backdrop-filter:blur(18px); }
.hero-badge-floating * { color:#fff !important; }
.credibility-strip { margin-top:clamp(4rem,7vw,6rem) !important;background:linear-gradient(90deg,var(--rl-navy-950),var(--rl-navy-800)) !important;border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08);box-shadow:inset 0 1px rgba(255,255,255,.05); }
.credibility-item { color:#fff !important;font-weight:700 !important; }
.credibility-bullet { color:var(--rl-orange-400) !important; }

/* HERO DE PÁGINAS INTERNAS */
.page-hero-banner {
  position:relative;overflow:hidden;padding:clamp(4rem,7vw,6.4rem) 0 !important;
  background:
    radial-gradient(circle at 88% 8%, rgba(244,123,32,.35), transparent 24rem),
    radial-gradient(circle at 10% 100%, rgba(43,184,230,.25), transparent 28rem),
    linear-gradient(135deg,var(--rl-navy-950) 0%,var(--rl-navy-800) 55%,#15558d 100%) !important;
  border-bottom:0 !important;
}
.page-hero-banner::after { content:"";position:absolute;width:420px;height:420px;border-radius:50%;right:-210px;bottom:-260px;border:80px solid rgba(255,255,255,.045); }
.page-hero-banner .container { position:relative;z-index:2; }
.breadcrumbs,.breadcrumbs a,.breadcrumbs span { color:#cce7ff !important; }
.page-hero-title { color:#fff !important;font-size:clamp(2.35rem,4.5vw,4.6rem) !important;line-height:1.04 !important;letter-spacing:-.045em !important;max-width:1000px; }
.page-hero-subtitle { color:#dbeafe !important;font-size:clamp(1rem,1.35vw,1.2rem) !important;line-height:1.75 !important; }

/* SECCIONES Y TARJETAS */
.section-padding { padding-block:clamp(4.8rem,8vw,7.5rem) !important; }
.section-header { max-width:850px; }
.section-label { color:var(--rl-orange-500) !important;font-weight:800 !important;letter-spacing:.09em;text-transform:uppercase; }
.section-title { color:var(--rl-navy-950) !important;font-size:clamp(2rem,3.5vw,3.4rem) !important;line-height:1.08 !important;letter-spacing:-.04em !important; }
.section-subtitle { color:var(--rl-muted) !important;font-size:1.08rem !important;line-height:1.75 !important; }

:where(.service-card,.program-card,.sector-card,.content-card,.editorial-card,.pillar-card,.resource-card,.founder-card,.info-box-card,.dual-route-card,.challenge-card,.eng-highlight-card,.advisor-result-card) {
  border:1px solid rgba(23,54,93,.1) !important;
  border-radius:var(--rl-radius-xl) !important;
  background:linear-gradient(180deg,#fff 0%,#fbfdff 100%) !important;
  box-shadow:0 14px 38px rgba(23,54,93,.08) !important;
  transition:transform .34s var(--rl-ease),box-shadow .34s var(--rl-ease),border-color .34s ease !important;
  position:relative;overflow:hidden;
}
:where(.service-card,.program-card,.sector-card,.content-card,.editorial-card,.pillar-card,.resource-card,.founder-card,.info-box-card,.dual-route-card,.challenge-card,.eng-highlight-card)::before {
  content:"";position:absolute;inset:0 auto auto 0;width:100%;height:4px;
  background:linear-gradient(90deg,var(--rl-blue-600),var(--rl-cyan),var(--rl-orange-500));opacity:.9;
}
:where(.service-card,.program-card,.sector-card,.content-card,.editorial-card,.pillar-card,.resource-card,.founder-card,.info-box-card,.dual-route-card,.challenge-card,.eng-highlight-card):hover {
  transform:translateY(-9px) !important;box-shadow:var(--rl-shadow-float) !important;border-color:rgba(47,117,181,.22) !important;
}
.service-icon,.pillar-icon,.challenge-icon,.dual-card-icon {
  background:linear-gradient(135deg,var(--rl-navy-900),var(--rl-blue-600)) !important;color:#fff !important;
  box-shadow:0 12px 24px rgba(23,54,93,.2) !important;
}
.category-tag,.program-badge,.status-badge { border-radius:999px !important;font-weight:800 !important; }

/* Zonas oscuras más ricas */
.corporate-section,.cta-global-banner,.workflow-bar {
  background:
    radial-gradient(circle at 85% 15%,rgba(244,123,32,.2),transparent 18rem),
    linear-gradient(135deg,var(--rl-navy-950),var(--rl-navy-800)) !important;
}
.cta-global-banner { position:relative;overflow:hidden; }
.cta-global-banner::before { content:"";position:absolute;inset:-70% auto auto 60%;width:520px;height:520px;border-radius:50%;background:rgba(43,184,230,.1);filter:blur(4px); }
.cta-banner-title { color:#fff !important;font-size:clamp(2rem,3.6vw,3.7rem) !important;letter-spacing:-.04em; }

/* Formularios */
input,select,textarea {
  background:#fff !important;color:var(--rl-ink) !important;border:1px solid rgba(23,54,93,.16) !important;border-radius:14px !important;
  box-shadow:0 4px 14px rgba(23,54,93,.04);transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease;
}
input:focus,select:focus,textarea:focus { outline:none !important;border-color:var(--rl-blue-500) !important;box-shadow:0 0 0 4px rgba(47,117,181,.12) !important; }

/* Footer */
.site-footer { background:linear-gradient(145deg,#061626 0%,#0b2848 100%) !important;border-top:4px solid transparent;border-image:linear-gradient(90deg,var(--rl-blue-600),var(--rl-orange-500),var(--rl-gold)) 1; }
.site-footer :where(h2,h3,h4,p,a,span,li,strong) { color:#eaf3ff !important; }
.site-footer a:hover { color:var(--rl-orange-400) !important; }
.footer-grid { gap:clamp(1.4rem,3vw,3rem) !important; }

/* Scroll reveal mejorado */
[data-animate] { opacity:0;transform:translate3d(0,26px,0) scale(.985);transition:opacity .72s var(--rl-ease),transform .72s var(--rl-ease) !important; }
[data-animate].animated { opacity:1;transform:none; }

/* Tarjeta con brillo que sigue al puntero (variables JS) */
.rl-interactive-card::after {
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%),rgba(47,117,181,.12),transparent 55%);
  transition:opacity .25s ease;
}
.rl-interactive-card:hover::after { opacity:1; }

/* Anti-overflow profesional */
img,video,iframe,svg,canvas { max-width:100%; }
pre,code { overflow-wrap:anywhere; }
.container,.hero-grid,.footer-grid,.programs-grid,.services-grid,.sectors-grid,.gallery-grid { min-width:0; }

@media (max-width:1180px) {
  .header-socials { display:none !important; }
  .nav-menu { gap:.1rem !important; }
  .nav-link,a.nav-link { padding:.62rem .68rem !important;font-size:.86rem !important; }
}
@media (max-width:1024px) {
  .hero-grid { grid-template-columns:1fr !important; }
  .hero-content { max-width:820px !important; }
  .hero-visual { max-width:820px;margin-inline:auto;width:100%; }
  .hero-image { min-height:0;max-height:600px; }
}
@media (max-width:820px) {
  :root { --header-height:72px; }
  .site-header { height:72px !important; }
  .brand-logo-img { height:43px !important;max-width:190px !important; }
  .header-inner { justify-content:space-between !important; }
  .menu-toggle { display:grid !important;place-items:center;margin-left:auto; }
  .main-navigation {
    top:72px !important;left:12px !important;right:12px !important;width:auto !important;
    max-height:calc(100svh - 88px);overflow-y:auto;
    padding:1rem !important;border-radius:0 0 22px 22px !important;
    background:rgba(255,255,255,.97) !important;backdrop-filter:blur(18px);
    box-shadow:0 24px 60px rgba(7,26,45,.18) !important;
  }
  .nav-menu { gap:.35rem !important;align-items:stretch !important; }
  .nav-link,a.nav-link { display:block;width:100%;padding:.85rem 1rem !important;border-radius:12px !important; }
  .hero-section { min-height:auto;padding-top:3.7rem !important; }
  .hero-title { font-size:clamp(2.45rem,10vw,4.1rem) !important; }
  .hero-proof-grid { grid-template-columns:1fr; }
  .hero-badge-floating { right:14px !important;left:14px !important;bottom:14px !important;max-width:none; }
  .page-hero-banner { padding:3.6rem 0 !important; }
}
@media (max-width:560px) {
  .container { padding-left:1rem !important;padding-right:1rem !important; }
  .hero-title { font-size:clamp(2.2rem,12.5vw,3.2rem) !important; }
  .hero-lead { font-size:1rem !important; }
  .hero-actions { display:grid !important;grid-template-columns:1fr; }
  .hero-actions .btn { width:100%;justify-content:center; }
  .hero-image-wrapper { border-radius:24px !important;padding:5px; }
  .hero-image { border-radius:19px !important; }
  .hero-badge-floating { position:relative !important;right:auto !important;left:auto !important;bottom:auto !important;margin-top:-1px;border-radius:0 0 19px 19px !important; }
  .page-hero-title { font-size:clamp(2rem,11vw,3rem) !important; }
  :where(.service-card,.program-card,.sector-card,.content-card,.editorial-card,.pillar-card,.resource-card,.founder-card,.info-box-card,.dual-route-card,.challenge-card,.eng-highlight-card) { border-radius:22px !important; }
}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  .rl-tilt { will-change:transform;transform-style:preserve-3d; }
}
@media (prefers-reduced-motion:reduce) {
  .rl-scroll-progress { display:none; }
  [data-animate] { opacity:1 !important;transform:none !important; }
}

/* Tema claro fijo: ignorar el esquema oscuro del sistema. */



/* ==========================================================================
   VERSIÓN PREMIUM V2 — DENSIDAD VISUAL + DESPLEGABLES
   --------------------------------------------------------------------------
   OBJETIVO: mostrar primero la decisión y el beneficio; el detalle aparece
   bajo demanda mediante triángulos/desplegables nativos y accesibles.
   ========================================================================== */

/* Corrección crítica de contraste del manifiesto institucional. */
.manifesto-box {
  background:
    radial-gradient(circle at 90% 10%, rgba(47,117,181,.34), transparent 22rem),
    linear-gradient(135deg, #102d50 0%, #173f70 55%, #214f82 100%) !important;
  border-left: 6px solid #f47b20 !important;
  box-shadow: 0 28px 60px rgba(12,35,63,.22) !important;
}
.manifesto-box .section-label,
.manifesto-box .manifesto-title,
.manifesto-box .manifesto-author { color:#fff !important; }
.manifesto-box .section-label { color:#ffad66 !important; }
.manifesto-box .manifesto-text { color:#e9f3ff !important; max-width:1050px; }
.manifesto-box .manifesto-role { color:#bcdcff !important; }
.manifesto-box .manifesto-quote-icon { color:rgba(255,255,255,.10) !important; }

/* Tarjetas sectoriales: más aire, menos texto visible y altura natural. */
.sectors-section .sectors-grid,
.sectors-grid,
#sectors-container { align-items:start !important; }
.sector-card--accordion {
  height:auto !important;
  min-height:0 !important;
  padding:clamp(1.25rem,2vw,1.6rem) !important;
  background:
    radial-gradient(circle at 100% 0, rgba(43,184,230,.07), transparent 12rem),
    linear-gradient(180deg,#fff 0%,#fbfdff 100%) !important;
}
.sector-card--accordion .sector-header { display:flex; flex-direction:column; }
.sector-card--accordion .sector-card-title { font-size:clamp(1.1rem,1.55vw,1.36rem) !important; }
.sector-card--accordion .sector-card-subtitle { margin-bottom:.8rem !important; color:#52647d !important; font-weight:650 !important; }
.sector-card--accordion .sector-tags { margin-bottom:1rem !important; }

/* Componente desplegable reutilizable. Usa <details>/<summary>: funciona incluso sin JS. */
.rl-disclosure {
  margin-top:auto;
  border:1px solid rgba(23,54,93,.12);
  border-radius:16px;
  background:#f8fbff;
  overflow:hidden;
  transition:border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
.rl-disclosure[open] {
  border-color:rgba(47,117,181,.28);
  background:#fff;
  box-shadow:0 14px 32px rgba(23,54,93,.08);
}
.rl-disclosure > summary {
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:.9rem 1rem;
  color:#17365d;
  font-weight:800;
  font-size:.88rem;
  user-select:none;
  transition:background .2s ease,color .2s ease;
}
.rl-disclosure > summary::-webkit-details-marker { display:none; }
.rl-disclosure > summary:hover { background:#eef6ff; color:#215f9d; }
.rl-disclosure > summary:focus-visible { outline:3px solid rgba(47,117,181,.25); outline-offset:-3px; }
.rl-disclosure-label { display:flex; align-items:center; gap:.7rem; min-width:0; }
.rl-disclosure-icon {
  width:28px;height:28px;display:grid;place-items:center;flex:0 0 28px;
  border-radius:9px;background:linear-gradient(135deg,#17365d,#2f75b5);color:#fff;
  transition:transform .28s cubic-bezier(.2,.8,.2,1), background .2s ease;
}
.rl-disclosure[open] .rl-disclosure-icon { transform:rotate(90deg); background:linear-gradient(135deg,#e67e22,#ff9b45); }
.rl-disclosure-hint { color:#72839a; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; }
.rl-disclosure-panel {
  padding:0 1rem 1.05rem;
  animation:rlDisclosureIn .28s ease both;
}
.rl-disclosure-panel .sector-card-desc { margin:.2rem 0 .85rem !important; }
.rl-disclosure-panel .sector-cases {
  display:grid;gap:.3rem;margin:0 0 .95rem !important;
  background:linear-gradient(135deg,#f7faff,#f4f8fc) !important;
}
.rl-disclosure-panel .sector-cases strong { color:#17365d !important; }
.rl-disclosure-panel .sector-cases strong i { color:#e67e22; margin-right:.3rem; }
@keyframes rlDisclosureIn { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } }

/* El bloque prioritario de ingeniería se vuelve más compacto. */
.sector-engineering-hero { position:relative; overflow:hidden; }
.sector-engineering-desc { max-width:920px; font-size:1.05rem !important; line-height:1.75 !important; }
.engineering-highlights-grid { gap:1rem !important; }
.eng-highlight-card { padding:1.25rem !important; }
.eng-highlight-desc { font-size:.9rem !important; line-height:1.6 !important; }

/* Más color con criterio: acento en títulos, sin sacrificar legibilidad. */
.section-title::after {
  content:""; display:block; width:72px; height:4px; margin-top:.85rem;
  border-radius:999px; background:linear-gradient(90deg,#2f75b5,#2bb8e6,#e67e22);
}
.page-hero-title { text-wrap:balance; }
.page-hero-subtitle { max-width:850px; }

/* En móvil, el resumen funciona como una fila táctil amplia. */
@media (max-width: 820px) {
  .manifesto-box { padding:2rem 1.35rem !important; }
  .manifesto-title { font-size:clamp(1.55rem,7vw,2.05rem) !important; }
  .manifesto-text { font-size:1rem !important; }
  .rl-disclosure > summary { min-height:54px; }
  .sectors-grid,#sectors-container { gap:1rem !important; }
}
@media (max-width:560px) {
  .rl-disclosure-hint { display:none; }
  .sector-card--accordion { padding:1.1rem !important; }
}
@media (prefers-reduced-motion: reduce) {
  .rl-disclosure-panel { animation:none !important; }
  .rl-disclosure-icon { transition:none !important; }
}


/* ==========================================================================
   PRODUCCIÓN V3 — RESPONSIVE UNIVERSAL + ESTADOS DE FORMULARIO
   GUÍA: mantener este bloque al final. Son overrides de seguridad visual.
   ========================================================================== */
html, body { min-width:0 !important; max-width:100% !important; }
*, *::before, *::after { min-width:0; }
:where(img,video,iframe,svg,canvas,picture) { max-width:100%; height:auto; }
:where(h1,h2,h3,h4,h5,h6,p,li,a,span,label,button,summary) { overflow-wrap:anywhere; }
:where(.container,.header-inner,.hero-grid,.footer-grid,.programs-grid,.services-grid,.sectors-grid,.gallery-grid,.contact-split-grid,.form-group-grid) { width:100%; max-width:100%; }

.contact-tab-nav {
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.65rem;
  padding:.55rem !important;
  background:#eef4fb;
  border:1px solid rgba(23,54,93,.10);
  border-radius:18px;
}
.contact-tab-btn {
  min-height:52px;
  border-radius:13px !important;
  border:0 !important;
  padding:.75rem 1rem !important;
  color:#17365d !important;
  background:transparent !important;
  font-weight:800 !important;
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease,color .2s ease !important;
}
.contact-tab-btn:hover { transform:translateY(-1px); background:#fff !important; }
.contact-tab-btn.active {
  background:linear-gradient(135deg,#17365d,#2f75b5) !important;
  color:#fff !important;
  box-shadow:0 10px 24px rgba(23,54,93,.18);
}

.form-submit-status {
  display:flex;
  gap:.8rem;
  align-items:flex-start;
  margin-top:1rem;
  padding:1rem 1.1rem;
  border-radius:14px;
  border:1px solid transparent;
  line-height:1.55;
  animation:rlFormStatusIn .28s ease both;
}
.form-submit-status[hidden] { display:none !important; }
.form-submit-status.is-success { background:#ecfdf5; border-color:#a7f3d0; color:#065f46; }
.form-submit-status.is-error { background:#fff1f2; border-color:#fecdd3; color:#9f1239; }
.form-submit-status__icon { font-size:1.25rem; line-height:1.2; flex:0 0 auto; }
@keyframes rlFormStatusIn { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } }

form[aria-busy="true"] { opacity:.88; }
form[aria-busy="true"] button[type="submit"] { cursor:wait !important; }

/* Anchos fluidos en todos los dispositivos, incluso debajo de 320 px. */
@media (max-width: 760px) {
  .form-group-grid { grid-template-columns:1fr !important; }
  .contact-tab-nav { grid-template-columns:1fr; }
  .contact-tab-btn { width:100%; }
  .contact-form-body { padding-inline:clamp(.9rem,4vw,1.35rem) !important; }
}
@media (max-width: 420px) {
  :root { --header-height:68px; }
  .container { padding-inline:clamp(.72rem,4vw,1rem) !important; }
  .btn,.contact-tab-btn,button,input,select,textarea { font-size:max(16px,.92rem); }
  .hero-title,.page-hero-title { hyphens:auto; word-break:normal; }
  .site-header { height:68px !important; }
  .main-navigation { top:68px !important; left:8px !important; right:8px !important; }
}
@media (max-width: 300px) {
  .brand-logo-img { max-width:145px !important; height:auto !important; }
  .container { padding-inline:.65rem !important; }
  .btn { padding-inline:.85rem !important; }
  .hero-title { font-size:2rem !important; }
}
@media (prefers-reduced-motion: reduce) {
  .form-submit-status { animation:none !important; }
}


/* ==========================================================================\n   MASTER PRODUCCIÓN V4 — LEGIBILIDAD, TARJETAS PROGRESIVAS Y RESPONSIVE\n   GUÍA DE EDICIÓN: mantener este bloque al final de styles.css.\n   - Cambiar colores solo desde variables :root salvo ajustes puntuales.\n   - No eliminar selectores .rl-disclosure: los usan Programas, Sectores,\n     Qué hacemos e Ideas y recursos para reducir información visible.\n   ========================================================================== */

/* 1) BLOQUES OSCUROS: contraste garantizado. */
.calendar-banner-box,
.sector-engineering-hero {
  color:#fff !important;
  background:
    radial-gradient(circle at 86% 10%, rgba(43,184,230,.22), transparent 32%),
    linear-gradient(125deg,#12345d 0%,#184f7b 58%,#176980 100%) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  box-shadow:0 20px 55px rgba(16,43,78,.18) !important;
}
.calendar-banner-box .calendar-info-title,
.sector-engineering-hero .sector-engineering-title { color:#fff !important; }
.calendar-banner-box .calendar-info-desc,
.sector-engineering-hero .sector-engineering-desc { color:#dceafb !important; }
.convocatoria-badge,
.engineering-badge-strip {
  background:linear-gradient(135deg,#e67e22,#ff9c45) !important;
  color:#fff !important;
  box-shadow:0 8px 22px rgba(230,126,34,.25);
}
.calendar-banner-box .btn-outline-white,
.sector-engineering-hero .btn-outline-white { color:#fff !important; border-color:rgba(255,255,255,.65) !important; }
.calendar-banner-box .btn-outline-white:hover,
.sector-engineering-hero .btn-outline-white:hover { background:#fff !important; color:#17365d !important; }

/* Las tarjetas blancas dentro del bloque prioritario conservan texto oscuro. */
.sector-engineering-hero .eng-highlight-card { background:#fff !important; border:1px solid rgba(255,255,255,.35); }
.sector-engineering-hero .eng-highlight-title { color:#14263f !important; }
.sector-engineering-hero .eng-highlight-desc { color:#52657f !important; }
.sector-engineering-hero .eng-highlight-icon { color:#d45f00 !important; }

/* 2) REJILLAS ORDENADAS: altura visual consistente. */
.programs-grid,
.sectors-grid,
#blog-container,
.services-grid { align-items:stretch !important; }
.program-card,
.sector-card,
.blog-card,
.service-card { height:100%; }

/* 3) PROGRAMAS: información progresiva y CTA estable. */
.program-card--accordion { gap:.85rem !important; }
.program-card--accordion .program-card-header { min-height:0; }
.program-card-summary {
  display:-webkit-box;
  /* Compatibilidad Chromium/Safari + propiedad estándar para validadores modernos. */
  -webkit-line-clamp:3;
  line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
  color:#55677f !important;
  line-height:1.62 !important;
}
.program-disclosure { margin-top:.15rem; }
.program-meta-list--compact { display:grid; gap:.7rem; }
.program-meta-list--compact .meta-row {
  display:grid !important;
  grid-template-columns:minmax(115px,.8fr) minmax(0,1.7fr);
  gap:.8rem;
  align-items:start;
  padding:.78rem 0;
  border-bottom:1px solid #e9eef5;
}
.program-meta-list--compact .meta-row:last-child { border-bottom:0; }
.program-card-footer { margin-top:auto !important; }
.program-card-footer .btn { flex:1 1 150px; justify-content:center; }
.programs-empty { grid-column:1/-1; display:grid; justify-items:center; gap:.55rem; padding:2.4rem; text-align:center; background:#fff; border:1px solid #dce5ef; border-radius:18px; color:#17365d; }

/* 4) SECTORES: tipografía legible y ritmo uniforme. */
.sector-card-title { color:#152740 !important; font-weight:800 !important; letter-spacing:-.02em; line-height:1.18 !important; }
.sector-card-subtitle { color:#50647e !important; font-weight:700 !important; line-height:1.55 !important; }
.sector-badge { color:#17365d !important; background:#eaf2fb !important; }
.sector-pill { color:#52657f !important; background:#f5f8fc !important; border-color:#d9e3ef !important; }

/* 5) QUÉ HACEMOS: tarjetas con menos texto visible. */
.service-card { display:flex !important; flex-direction:column; }
.service-card > div:first-child { display:flex; flex-direction:column; gap:.45rem; }
.service-card .service-title { color:#152740 !important; }
.service-card .service-disclosure { margin-top:.45rem; }
.service-card .service-disclosure .service-desc { margin:0 0 .8rem !important; color:#52657f !important; }
.service-card .service-disclosure ul { margin:.2rem 0 .2rem 1.1rem !important; color:#52657f !important; }
.service-card > .btn { margin-top:auto; }

/* 6) IDEAS Y RECURSOS: tarjetas editoriales limpias y alineadas. */
#blog-container { display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.5rem !important; }
.blog-card { display:flex; border:1px solid #dbe4ee !important; border-radius:18px !important; background:#fff !important; box-shadow:0 8px 24px rgba(16,43,78,.06) !important; overflow:hidden; }
.blog-card-content { display:flex; flex-direction:column; width:100%; padding:1.65rem !important; }
.blog-card h3 { color:#152740 !important; line-height:1.24 !important; font-size:clamp(1.05rem,1.6vw,1.3rem) !important; margin:.5rem 0 !important; }
.blog-category { color:#215f9d !important; font-weight:800 !important; }
.blog-excerpt-preview {
  color:#5a6d85 !important;
  line-height:1.62 !important;
  display:-webkit-box;
  /* Mantener ambos: prefijo para compatibilidad y propiedad estándar para evitar warnings del editor. */
  -webkit-line-clamp:2;
  line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  margin-bottom:.9rem !important;
}
.blog-excerpt-full { color:#52657f !important; line-height:1.65 !important; margin:0 0 .9rem !important; }
.blog-meta--stacked { display:flex !important; flex-wrap:wrap; gap:.5rem .9rem !important; color:#6b7e95 !important; font-size:.84rem !important; }
.blog-read-btn { margin-top:auto !important; align-self:flex-start; }
.blog-disclosure { margin-bottom:1rem; }

/* 7) CONTACTO: mapa fluido y enlaces visibles. */
.contact-map-card { width:100%; min-height:360px; border-radius:16px; overflow:hidden; box-shadow:0 12px 30px rgba(16,43,78,.10); border:1px solid #dce5ef; }
.contact-map-card iframe { width:100%; min-height:360px; display:block; }
.contact-inline-link { color:#315d8b !important; text-decoration:none; }
.contact-inline-link:hover { color:#e67e22 !important; text-decoration:underline; }

/* 8) RESPONSIVE UNIVERSAL. */
@media (max-width: 1020px) {
  #blog-container { grid-template-columns:1fr; }
  .program-meta-list--compact .meta-row { grid-template-columns:1fr; gap:.25rem; }
}
@media (max-width: 760px) {
  .calendar-banner-box,
  .sector-engineering-hero { padding:1.45rem !important; border-radius:18px !important; }
  .calendar-actions { width:100%; display:grid !important; grid-template-columns:1fr; }
  .calendar-actions .btn { width:100%; justify-content:center; }
  .program-card,.sector-card,.blog-card,.service-card { border-radius:16px !important; }
  .program-card-footer { display:grid !important; grid-template-columns:1fr; }
  .program-card-footer .btn { width:100%; }
  .contact-map-card,.contact-map-card iframe { min-height:300px; }
}
@media (max-width: 420px) {
  .rl-disclosure > summary { padding:.78rem .8rem !important; font-size:.87rem !important; }
  .rl-disclosure-icon { width:26px !important; height:26px !important; flex-basis:26px !important; }
  .program-card,.sector-card,.blog-card,.service-card { padding:1.05rem !important; }
  .blog-card-content { padding:.2rem !important; }
}

/* ========================================================================== 
   MASTER PRODUCCIÓN V5 — CORRECCIÓN DE CONTRASTE EN FASES IN-COMPANY
   GUÍA DE EDICIÓN: QUÉ CAMBIAR Y QUÉ NO
   --------------------------------------------------------------------------
   QUÉ PUEDE CAMBIAR EL EQUIPO WEB:
   - Los textos de cada fase se editan únicamente en que-hacemos.html.
   - Los colores de títulos/descripciones de las tarjetas pueden ajustarse
     mediante --phase-title y --phase-text en este bloque.
   - El naranja de los números usa --color-accent para conservar la marca.

   QUÉ NO CAMBIAR:
   - No retirar los !important de este bloque: neutralizan reglas globales de
     color que podrían activarse por la preferencia oscura del navegador/SO.
   - No convertir las tarjetas blancas en herederas del color de
     .corporate-section; necesitan texto oscuro por accesibilidad.
   - No eliminar color-scheme: light: el sitio institucional está definido
     deliberadamente en modo claro fijo, según el brief de Red Líder.
   ========================================================================== */

/* El sitio se mantiene en tema claro aunque el sistema operativo use dark mode. */
:root,
html {
  color-scheme: light !important;
}

/* Fondo premium de la sección: oscuro, pero encabezado siempre legible. */
.corporate-section {
  --phase-title: #14263f;
  --phase-text: #53677f;
  --phase-border: #d9e4ef;
  --phase-surface: #ffffff;
  --phase-number-bg: #17365d;
  --phase-number-text: #ff8b2c;
}

.corporate-section .section-header .section-label.light {
  color: #ff9a45 !important;
  opacity: 1 !important;
  text-shadow: 0 1px 14px rgba(0,0,0,.18);
}

.corporate-section .section-header .section-title.light {
  color: #ffffff !important;
  opacity: 1 !important;
  text-shadow: 0 2px 18px rgba(0,0,0,.16);
}

.corporate-section .section-header .section-subtitle.light {
  color: #dce7f4 !important;
  opacity: 1 !important;
}

/* Cada fase: superficie clara + texto oscuro explícito, sin herencia accidental. */
.corporate-section .timeline-step-content {
  background: var(--phase-surface) !important;
  color: var(--phase-title) !important;
  border: 1px solid var(--phase-border) !important;
  border-left: 4px solid #2f75b5 !important;
  box-shadow: 0 14px 34px rgba(8,35,64,.16) !important;
  min-width: 0;
  overflow: hidden;
}

.corporate-section .timeline-step-title {
  color: var(--phase-title) !important;
  opacity: 1 !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
  letter-spacing: -.015em;
}

.corporate-section .timeline-step-desc,
.corporate-section .timeline-step-content p,
.corporate-section .timeline-step-content li,
.corporate-section .timeline-step-content span {
  color: var(--phase-text) !important;
  opacity: 1 !important;
}

.corporate-section .timeline-step-desc {
  font-size: .96rem !important;
  line-height: 1.7 !important;
  margin: 0 !important;
}

/* Números de fase: alto contraste sobre el fondo oscuro de la sección. */
.corporate-section .timeline-step-badge {
  background: var(--phase-number-bg) !important;
  color: var(--phase-number-text) !important;
  border: 3px solid #ffffff !important;
  box-shadow: 0 12px 28px rgba(4,24,46,.28) !important;
}

/* Microinteracción sin sacrificar legibilidad. */
@media (hover:hover) and (pointer:fine) {
  .corporate-section .timeline-step-content:hover {
    transform: translateX(7px) translateY(-2px) !important;
    border-color: #66bde0 !important;
    border-left-color: #e67e22 !important;
    box-shadow: 0 18px 38px rgba(8,35,64,.22) !important;
  }
}

/* Línea vertical decorativa para reforzar la secuencia en escritorio. */
@media (min-width: 761px) {
  .corporate-section .timeline-container::before {
    content: "";
    position: absolute;
    top: 32px;
    bottom: 32px;
    left: 31px;
    width: 2px;
    background: linear-gradient(180deg,#ff9a45,#42c4dd,#2f75b5);
    opacity: .55;
    pointer-events: none;
  }
  .corporate-section .timeline-step-badge {
    position: relative;
    z-index: 1;
  }
}

/* Responsive: la fase queda compacta y sin desbordamiento horizontal. */
@media (max-width: 760px) {
  .corporate-section {
    padding: 4rem 0 !important;
  }
  .corporate-section .timeline-container {
    gap: 1rem !important;
    margin: 1.75rem 0 !important;
  }
  .corporate-section .timeline-step-row {
    grid-template-columns: 48px minmax(0,1fr) !important;
    gap: .8rem !important;
    align-items: start !important;
  }
  .corporate-section .timeline-step-badge {
    width: 44px !important;
    height: 44px !important;
    font-size: 1.05rem !important;
    border-width: 2px !important;
  }
  .corporate-section .timeline-step-content {
    padding: 1.15rem 1.1rem !important;
    border-radius: 14px !important;
  }
  .corporate-section .timeline-step-title {
    font-size: 1rem !important;
  }
  .corporate-section .timeline-step-desc {
    font-size: .9rem !important;
    line-height: 1.62 !important;
  }
}

@media (max-width: 420px) {
  .corporate-section .section-header .section-title.light {
    font-size: clamp(1.7rem, 9vw, 2.15rem) !important;
  }
  .corporate-section .timeline-step-row {
    grid-template-columns: 38px minmax(0,1fr) !important;
    gap: .65rem !important;
  }
  .corporate-section .timeline-step-badge {
    width: 36px !important;
    height: 36px !important;
    font-size: .95rem !important;
  }
}

/* ========================================================================== 
   MASTER PRODUCCIÓN V7 — MOBILE DYNAMICS
   GUÍA DE EDICIÓN: QUÉ CAMBIAR Y QUÉ NO
   --------------------------------------------------------------------------
   OBJETIVO:
   - En escritorio el sitio usa hover, brillo y profundidad.
   - En móvil no existe hover real; este bloque crea respuesta táctil,
     movimiento al hacer scroll y apertura visual de desplegables.

   QUÉ PUEDE CAMBIAR EL EQUIPO WEB:
   - Duración de transiciones (180ms / 280ms / 420ms).
   - Intensidad del desplazamiento translateY y escala.
   - Sombra de tarjetas activas.

   QUÉ NO CAMBIAR:
   - No eliminar @media (hover:none), ya que evita aplicar estos efectos en PC.
   - No eliminar prefers-reduced-motion.
   - No usar animaciones infinitas sobre tarjetas de contenido: perjudican lectura.
   ========================================================================== */

@media (hover: none), (pointer: coarse) {
  /* El tap debe sentirse inmediato, pero sin producir zoom accidental. */
  :where(a, button, summary, .btn, .filter-btn, .contact-tab-btn) {
    -webkit-tap-highlight-color: rgba(47, 117, 181, .10);
    touch-action: manipulation;
  }

  /* Tarjetas: profundidad inicial ligeramente mayor para que no se vean planas. */
  :where(
    .service-card,.program-card,.sector-card,.blog-card,.content-card,.editorial-card,
    .pillar-card,.resource-card,.founder-card,.dual-route-card,.eng-highlight-card,
    .timeline-step-content
  ) {
    transition:
      transform 220ms cubic-bezier(.2,.8,.2,1),
      box-shadow 220ms ease,
      border-color 220ms ease !important;
    will-change: transform;
  }

  /* Estado táctil añadido por app.js: reemplaza el :hover de escritorio. */
  :where(
    .service-card,.program-card,.sector-card,.blog-card,.content-card,.editorial-card,
    .pillar-card,.resource-card,.founder-card,.dual-route-card,.eng-highlight-card,
    .timeline-step-content
  ).touch-active {
    transform: translateY(-4px) scale(.992) !important;
    box-shadow: 0 18px 38px rgba(18, 43, 75, .18) !important;
    border-color: rgba(47,117,181,.42) !important;
  }

  /* Botones: efecto de pulsación real. */
  :where(.btn,.filter-btn,.contact-tab-btn,.menu-toggle).touch-active,
  :where(.btn,.filter-btn,.contact-tab-btn,.menu-toggle):active {
    transform: translateY(1px) scale(.975) !important;
    box-shadow: 0 7px 18px rgba(18,43,75,.16) !important;
  }

  /* El CTA naranja conserva presencia aun sin hover. */
  .btn-primary {
    box-shadow: 0 12px 26px rgba(230,126,34,.25) !important;
  }

  .btn-primary:active,
  .btn-primary.touch-active {
    box-shadow: 0 7px 16px rgba(230,126,34,.30) !important;
  }

  /* Acordeones: el resumen cambia de color al tocar/abrir. */
  .rl-disclosure > summary {
    transition: background-color 220ms ease, color 220ms ease, transform 220ms ease !important;
  }

  .rl-disclosure > summary.touch-active {
    background: #eaf4ff !important;
    transform: scale(.985);
  }

  .rl-disclosure.is-open-mobile > summary,
  .rl-disclosure[open] > summary {
    background: linear-gradient(135deg,#edf6ff,#fff4e9) !important;
    color: #17365d !important;
  }

  .rl-disclosure[open] .rl-disclosure-icon {
    transform: rotate(90deg) scale(1.05) !important;
    background: linear-gradient(135deg,#17365d,#2f75b5) !important;
    color: #fff !important;
  }

  .rl-disclosure .rl-disclosure-icon {
    transition: transform 280ms cubic-bezier(.2,.8,.2,1), background 280ms ease !important;
  }

  /* Contenido desplegado: entrada suave al aparecer. */
  .rl-disclosure[open] > :not(summary) {
    animation: rlMobileReveal 320ms cubic-bezier(.2,.8,.2,1) both;
  }

  /* Menú móvil: más sensación de panel dinámico. */
  .main-navigation {
    transition: opacity 260ms ease, transform 320ms cubic-bezier(.2,.8,.2,1), visibility 260ms ease !important;
  }

  .main-navigation.open {
    animation: rlMobileMenuIn 320ms cubic-bezier(.2,.8,.2,1) both;
  }

  .main-navigation.open .nav-link {
    animation: rlMobileNavItem 360ms cubic-bezier(.2,.8,.2,1) both;
  }
  .main-navigation.open .nav-link:nth-child(2) { animation-delay: 35ms; }
  .main-navigation.open .nav-link:nth-child(3) { animation-delay: 70ms; }
  .main-navigation.open .nav-link:nth-child(4) { animation-delay: 105ms; }
  .main-navigation.open .nav-link:nth-child(5) { animation-delay: 140ms; }
  .main-navigation.open .nav-link:nth-child(6) { animation-delay: 175ms; }

  /* Hero: movimiento muy leve con variable actualizada por JS. */
  .hero-image-wrapper,
  .page-hero,
  .inner-hero {
    transform: translate3d(0,var(--mobile-shift-y,0),0);
    transition: transform 180ms linear;
  }

  /* Barra superior de progreso un poco más visible en móvil. */
  .rl-scroll-progress {
    height: 4px !important;
    box-shadow: 0 1px 8px rgba(47,117,181,.25);
  }
}

/* Stagger de las animaciones de entrada en móvil para que las tarjetas no aparezcan todas juntas. */
@media (max-width: 820px) and (prefers-reduced-motion: no-preference) {
  [data-animate] {
    transform: translate3d(0,20px,0) scale(.985) !important;
    transition-duration: .58s !important;
  }

  [data-animate].animated {
    transform: none !important;
  }

  .program-grid > [data-animate]:nth-child(2n),
  .sector-grid > [data-animate]:nth-child(2n),
  #blog-container > [data-animate]:nth-child(2n) {
    transition-delay: 70ms !important;
  }
}

@keyframes rlMobileReveal {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes rlMobileMenuIn {
  from { opacity: 0; transform: translateY(-10px) scale(.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes rlMobileNavItem {
  from { opacity: 0; transform: translateX(12px); }
  to   { opacity: 1; transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .rl-disclosure[open] > :not(summary),
  .main-navigation.open,
  .main-navigation.open .nav-link {
    animation: none !important;
  }

  .hero-image-wrapper,
  .page-hero,
  .inner-hero {
    transform: none !important;
    transition: none !important;
  }
}


/* ========================================================================== 
   MASTER PRODUCCIÓN V8 — NAVEGACIÓN UNIFORME + DINAMISMO MULTIDISPOSITIVO
   GUÍA DE EDICIÓN: QUÉ CAMBIAR Y QUÉ NO
   --------------------------------------------------------------------------
   OBJETIVO:
   - Todas las opciones del menú comparten exactamente la misma base visual.
   - La página activa se indica con una línea corta, NO con una píldora de color.
   - Mejorar respuesta táctil, profundidad y movimiento en móvil/tablet.

   EDITABLE POR ZAIRA / EQUIPO WEB:
   - --v8-nav-indicator para cambiar el color del indicador activo.
   - Intensidades de sombras y duraciones de transición.
   - Los textos del menú desde cada HTML.

   NO TOCAR SIN PRUEBAS:
   - .main-navigation.open, .menu-toggle.active y estados .active.
   - Reglas prefers-reduced-motion.
   - breakpoints 1024px / 820px / 640px.
   ========================================================================== */
:root {
  --v8-nav-indicator: #e67e22;
  --v8-touch-shadow: 0 16px 38px rgba(23,54,93,.16);
  --v8-card-border: rgba(47,117,181,.16);
}

/* MENÚ: ningún enlace especial tiene fondo propio. */
.site-header .nav-link,
.site-header a.nav-link,
.site-header .nav-link.nav-pill,
.site-header .nav-link.nav-pill.active {
  position: relative !important;
  background: transparent !important;
  color: #17365d !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 10px !important;
  padding: .72rem .76rem !important;
  transform: none !important;
}

.site-header .nav-link:hover,
.site-header .nav-link.nav-pill:hover {
  background: rgba(47,117,181,.055) !important;
  color: #1f6098 !important;
  box-shadow: none !important;
  transform: translateY(-1px) !important;
}

/* Página activa: indicador discreto y elegante, sin cambiar el fondo del botón. */
.site-header .nav-link.active,
.site-header .nav-link.nav-pill.active {
  background: transparent !important;
  color: #17365d !important;
  box-shadow: none !important;
  font-weight: 800 !important;
}

.site-header .nav-link.active::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: .16rem;
  width: 24px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg,#2f75b5,var(--v8-nav-indicator));
  transform: translateX(-50%);
  box-shadow: 0 2px 7px rgba(230,126,34,.18);
}

/* Evita que reglas antiguas vuelvan a activar estilos especiales. */
.site-header .nav-link.nav-pill::after,
.site-header .nav-link::after {
  display: none !important;
}

/* CABECERA: transición sutil al hacer scroll. */
.site-header {
  transition: height .28s ease, box-shadow .28s ease, background-color .28s ease !important;
}
.site-header.scrolled {
  background: rgba(255,255,255,.94) !important;
}

/* Tarjetas: base más premium sin saturación. */
:where(.service-card,.program-card,.sector-card,.blog-card,.content-card,.editorial-card,
       .pillar-card,.resource-card,.dual-route-card,.eng-highlight-card,.timeline-step-content) {
  border-color: var(--v8-card-border) !important;
}

/* TABLET: navegación y tarjetas conservan aire, sin desbordamiento horizontal. */
@media (max-width: 1024px) {
  .header-inner { min-width: 0 !important; }
  .site-header .brand-logo-img { max-width: min(190px,42vw) !important; }
  .main-navigation.open { max-height: calc(100dvh - 78px); overflow-y: auto; overscroll-behavior: contain; }
  .page-hero-title { max-width: 18ch; text-wrap: balance; }
}

/* MÓVIL / TABLET TÁCTIL: dinamismo que reemplaza al hover. */
@media (max-width: 820px) {
  .site-header .nav-link,
  .site-header .nav-link.nav-pill,
  .site-header .nav-link.active,
  .site-header .nav-link.nav-pill.active {
    width: 100% !important;
    padding: .92rem 1rem !important;
    border-radius: 12px !important;
    background: transparent !important;
    color: #17365d !important;
    box-shadow: none !important;
  }

  .site-header .nav-link.active::before {
    left: .34rem;
    bottom: 50%;
    width: 4px;
    height: 24px;
    transform: translateY(50%);
  }

  .site-header .nav-link.active {
    padding-left: 1.25rem !important;
    background: rgba(47,117,181,.045) !important;
  }

  /* Secciones: entrada suave y profundidad controlada. */
  :where(.service-card,.program-card,.sector-card,.blog-card,.content-card,.editorial-card,
         .pillar-card,.resource-card,.dual-route-card,.eng-highlight-card,.timeline-step-content) {
    box-shadow: 0 10px 28px rgba(23,54,93,.09) !important;
    transform: translateZ(0);
  }

  /* Botones más táctiles. */
  .btn {
    min-height: 48px;
    transition: transform .18s ease, box-shadow .22s ease, background-color .22s ease !important;
  }
  .btn:active { transform: scale(.975) !important; }

  /* Los desplegables ocupan todo el ancho y tienen una señal táctil clara. */
  .rl-disclosure > summary {
    min-height: 54px;
    border-radius: 14px !important;
    box-shadow: inset 0 0 0 1px rgba(47,117,181,.12);
  }
  .rl-disclosure[open] > summary {
    box-shadow: inset 0 0 0 1px rgba(47,117,181,.20), 0 8px 18px rgba(23,54,93,.07) !important;
  }

  /* Hero y bloques destacados: pequeñas luces decorativas que sí se perciben en móvil. */
  .page-hero-banner,
  .hero-section,
  .corporate-section {
    position: relative;
    isolation: isolate;
    overflow: hidden;
  }
  .page-hero-banner::after,
  .hero-section::after,
  .corporate-section::after {
    content: "";
    position: absolute;
    z-index: -1;
    width: 190px;
    height: 190px;
    right: -70px;
    top: 22%;
    border-radius: 50%;
    background: radial-gradient(circle,rgba(47,190,220,.16),rgba(47,117,181,.06) 48%,transparent 72%);
    pointer-events: none;
    animation: v8MobileGlow 7s ease-in-out infinite alternate;
  }

  /* Evita cortes en títulos largos. */
  :where(h1,h2,h3,.page-hero-title,.section-title) {
    overflow-wrap: anywhere;
    text-wrap: balance;
  }
}

@media (max-width: 640px) {
  /* Ajuste vertical compacto sin amontonar. */
  .page-hero-banner { padding-top: clamp(4rem,13vw,5.5rem) !important; padding-bottom: clamp(3rem,10vw,4.5rem) !important; }
  .page-hero-title { font-size: clamp(2rem,10vw,3rem) !important; line-height: 1.06 !important; }
  .page-hero-subtitle { font-size: 1rem !important; line-height: 1.65 !important; }

  /* Separación coherente entre tarjetas y controles. */
  :where(.program-grid,.sector-grid,.services-grid,#blog-container) { gap: 1rem !important; }
  .rl-disclosure-panel { padding: 1rem !important; }
}

@keyframes v8MobileGlow {
  from { transform: translate3d(0,-8px,0) scale(.96); opacity: .58; }
  to   { transform: translate3d(-18px,14px,0) scale(1.08); opacity: .92; }
}

@media (prefers-reduced-motion: reduce) {
  .page-hero-banner::after,
  .hero-section::after,
  .corporate-section::after { animation: none !important; }
}


/* Estados auxiliares V8 controlados por app.js */
@media (hover:none), (pointer:coarse) {
  .v8-pressed { transform: scale(.975) !important; }
}
@media (min-width:821px) {
  .site-header.v8-condensed { height: 74px !important; }
  .site-header.v8-condensed .brand-logo-img { height: 44px !important; }
}

/* ========================================================================== 
   MASTER PRODUCCIÓN V9 — CINTA DE CREDIBILIDAD MÓVIL / TABLET
   GUÍA DE EDICIÓN: QUÉ CAMBIAR Y QUÉ NO
   --------------------------------------------------------------------------
   OBJETIVO:
   - Mantener la franja de capacidades en movimiento continuo en dispositivos
     táctiles, donde :hover no existe de forma fiable.
   - Evitar que un toque deje la animación pausada.
   - Usar aceleración GPU para un desplazamiento más fluido.
   - Si el usuario tiene "Reducir movimiento" activado, no forzar animación:
     la franja pasa a desplazamiento horizontal manual con el dedo.

   EDITABLE:
   - 28s escritorio / 21s tablet / 18s móvil / 16s móvil compacto.
   - Espaciado de .credibility-group.

   NO TOCAR:
   - min-width:max-content en .marquee-track/.credibility-group.
   - transform:translate3d en @keyframes rlV9Marquee.
   - reglas touch y prefers-reduced-motion.
   ========================================================================== */

.credibility-strip {
  width: 100%;
  overflow: hidden;
}

.marquee-container {
  width: 100%;
  overflow: hidden;
  position: relative;
  touch-action: pan-y;
}

.marquee-track {
  display: flex;
  align-items: center;
  width: max-content;
  min-width: max-content;
  flex-wrap: nowrap;
  animation: rlV9Marquee 28s linear infinite;
  animation-play-state: running;
  will-change: transform;
  transform: translate3d(0,0,0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.credibility-group {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  width: max-content;
  min-width: max-content;
  gap: 1.5rem;
  padding-right: 1.5rem;
}

.credibility-item {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* Bucle continuo: el segundo grupo duplica al primero en index.html. */
@keyframes rlV9Marquee {
  from {
    transform: translate3d(0,0,0);
  }
  to {
    transform: translate3d(-50%,0,0);
  }
}

/* Pausa únicamente cuando existe un mouse real. */
@media (hover: hover) and (pointer: fine) {
  .marquee-track:hover {
    animation-play-state: paused;
  }
}

/* Tablet y dispositivos táctiles: nunca heredar el estado hover/paused. */
@media (max-width: 1024px), (hover: none), (pointer: coarse) {
  .marquee-container {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
  }

  .marquee-track,
  .marquee-track:hover,
  .marquee-track:active {
    animation-name: rlV9Marquee !important;
    animation-duration: 21s !important;
    animation-timing-function: linear !important;
    animation-iteration-count: infinite !important;
    animation-play-state: running !important;
  }
}

/* Smartphones. */
@media (max-width: 767px) {
  .credibility-strip {
    padding-block: 1rem;
  }

  .marquee-track,
  .marquee-track:hover,
  .marquee-track:active {
    animation-duration: 18s !important;
  }

  .credibility-group {
    gap: 1.05rem;
    padding-right: 1.05rem;
  }

  .credibility-item {
    font-size: .875rem;
    line-height: 1.35;
  }
}

/* Teléfonos compactos: movimiento perceptible sin acelerarlo en exceso. */
@media (max-width: 480px) {
  .marquee-track,
  .marquee-track:hover,
  .marquee-track:active {
    animation-duration: 16s !important;
  }
}

/*
   V10 — MOVIMIENTO AUTOMÁTICO TAMBIÉN CON "REDUCIR MOVIMIENTO"
   --------------------------------------------------------------------------
   Algunos teléfonos tienen activada la preferencia del sistema
   prefers-reduced-motion. En V9 eso convertía esta cinta en scroll manual.
   En V10 mantenemos la cinta automática, pero más lenta y suave.

   IMPORTANTE PARA EL EQUIPO WEB:
   - No cambiar animation-iteration-count: infinite.
   - No cambiar animation-play-state: running.
   - Si desean bajar la velocidad en este modo, aumenten 38s a 45s o 50s.
*/
@media (prefers-reduced-motion: reduce) {
  .marquee-container {
    overflow: hidden !important;
    touch-action: pan-y !important;
    scrollbar-width: none;
  }

  .marquee-container::-webkit-scrollbar {
    display: none;
  }

  .marquee-track,
  .marquee-track:hover,
  .marquee-track:active {
    animation-name: rlV9Marquee !important;
    animation-duration: 38s !important;
    animation-timing-function: linear !important;
    animation-iteration-count: infinite !important;
    animation-play-state: running !important;
    transform: translate3d(0,0,0);
    will-change: transform;
  }
}

/* En móviles con reducir movimiento, mantenemos un ritmo visible pero tranquilo. */
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .marquee-track,
  .marquee-track:hover,
  .marquee-track:active {
    animation-duration: 28s !important;
  }
}

@media (max-width: 480px) and (prefers-reduced-motion: reduce) {
  .marquee-track,
  .marquee-track:hover,
  .marquee-track:active {
    animation-duration: 24s !important;
  }
}


/* ==========================================================================
   AJUSTE SOLICITADO: EQUIPO COMPACTO, ELEGANTE Y "FLOTANTE"
   Solo afecta la sección de equipo de la página La Escuela.
   ========================================================================== */
.team-section-float {
  padding: 5rem 0 5.5rem;
  background:
    radial-gradient(circle at 18% 14%, rgba(47, 148, 204, 0.08), transparent 28rem),
    radial-gradient(circle at 82% 70%, rgba(23, 54, 93, 0.06), transparent 30rem),
    var(--color-bg-light);
  overflow: hidden;
}

.team-section-float .section-header {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2.75rem;
}

.team-section-float .school-grid-team {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 1.35rem !important;
  align-items: stretch;
  perspective: 1200px;
}

.team-section-float .team-float-card {
  position: relative;
  min-width: 0;
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid rgba(133, 159, 186, 0.22) !important;
  border-radius: 24px !important;
  overflow: visible !important;
  box-shadow:
    0 18px 40px rgba(15, 36, 63, 0.10),
    0 5px 14px rgba(15, 36, 63, 0.06) !important;
  transform: translateY(0) rotateX(0deg);
  transition:
    transform 0.35s cubic-bezier(.2,.8,.2,1),
    box-shadow 0.35s ease,
    border-color 0.35s ease !important;
  isolation: isolate;
}

.team-section-float .team-float-card::before {
  content: "";
  position: absolute;
  inset: 10px 12px -10px;
  border-radius: 24px;
  background: rgba(23, 54, 93, 0.08);
  filter: blur(15px);
  z-index: -1;
  opacity: .55;
  transition: opacity .35s ease, transform .35s ease;
}

.team-section-float .team-float-card:hover {
  transform: translateY(-12px) rotateX(1.5deg) !important;
  border-color: rgba(47, 148, 204, 0.38) !important;
  box-shadow:
    0 28px 56px rgba(15, 36, 63, 0.16),
    0 10px 24px rgba(47, 148, 204, 0.10) !important;
}

.team-section-float .team-float-card:hover::before {
  opacity: .8;
  transform: translateY(7px) scale(.97);
}

.team-section-float .founder-image-wrap {
  height: 270px !important;
  margin: 0 !important;
  border-radius: 24px 24px 0 0 !important;
  overflow: hidden !important;
  background:
    linear-gradient(145deg, #102a49, #17365d) !important;
}

.team-section-float .founder-img {
  width: 100%;
  height: 100%;
  object-fit: cover !important;
  object-position: center top !important;
  filter: saturate(.97) contrast(1.02);
  transition: transform .5s cubic-bezier(.2,.8,.2,1), filter .35s ease !important;
}

.team-section-float .team-float-card:hover .founder-img {
  transform: scale(1.045) !important;
  filter: saturate(1.04) contrast(1.04);
}

.team-section-float .founder-image-wrap::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 46%;
  background: linear-gradient(to top, rgba(8, 28, 50, 0.72), transparent);
  pointer-events: none;
  z-index: 1;
}

.team-section-float .founder-badge {
  left: 14px !important;
  right: 14px;
  bottom: 14px !important;
  width: max-content;
  max-width: calc(100% - 28px);
  padding: .48rem .78rem !important;
  border-radius: 999px !important;
  background: rgba(16, 42, 73, 0.78) !important;
  border: 1px solid rgba(255,255,255,.20);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: .70rem !important;
  letter-spacing: .01em;
  z-index: 3;
}

.team-section-float .founder-body {
  padding: 1.15rem 1.2rem 1.3rem !important;
  min-height: 150px;
}

.team-section-float .founder-name {
  margin: 0 0 .28rem !important;
  font-size: 1.15rem !important;
  line-height: 1.2;
  color: var(--color-primary) !important;
}

.team-section-float .founder-role {
  margin: 0 0 .72rem !important;
  font-size: .80rem !important;
  line-height: 1.4;
  color: var(--color-secondary) !important;
}

.team-section-float .founder-bio {
  margin: 0 !important;
  font-size: .82rem !important;
  line-height: 1.5 !important;
  color: var(--color-text-muted) !important;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.team-section-float .founder-social-overlay {
  top: 14px !important;
  right: 14px !important;
  gap: 0 !important;
  z-index: 4;
}

.team-section-float .founder-social-overlay a {
  width: 38px !important;
  height: 38px !important;
  border-radius: 12px !important;
  background: rgba(10, 102, 194, 0.92) !important;
  box-shadow: 0 8px 18px rgba(10, 102, 194, 0.22) !important;
  border: 1px solid rgba(255,255,255,.55) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.team-section-float .founder-social-overlay a:hover {
  transform: translateY(-3px) scale(1.06) !important;
  background: #0a66c2 !important;
}

/* Tablet: dos tarjetas por fila */
@media (max-width: 1100px) {
  .team-section-float .school-grid-team {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1.5rem !important;
  }

  .team-section-float .founder-image-wrap {
    height: 300px !important;
  }
}

/* Móvil: una tarjeta por fila y tamaño contenido */
@media (max-width: 620px) {
  .team-section-float {
    padding: 3.75rem 0 4.25rem;
  }

  .team-section-float .school-grid-team {
    grid-template-columns: 1fr !important;
    gap: 1.35rem !important;
    max-width: 390px;
    margin: 0 auto;
  }

  .team-section-float .founder-image-wrap {
    height: 310px !important;
  }

  .team-section-float .team-float-card:hover {
    transform: translateY(-6px) !important;
  }
}


/* ========================================================================== 
   V11 - DINAMISMO AZUL + NARANJA RED LIDER
   Cambios visuales solicitados. NO afecta formularios ni Google Sheets.
   ========================================================================== */
:root {
  --rl-brand-blue: #0b3d6e;
  --rl-brand-blue-2: #1f75b5;
  --rl-brand-orange: #ff7a1a;
  --rl-brand-orange-2: #ff9a3d;
}

/* NAVEGACIÓN: activo resaltado, sin subrayado. */
.site-header .nav-link::before,
.site-header .nav-link::after { display:none !important; }
.site-header .nav-link,
.site-header a.nav-link {
  overflow:hidden;
  border-radius:999px !important;
  transition:transform .28s cubic-bezier(.2,.8,.2,1), color .28s ease, background .28s ease, box-shadow .28s ease !important;
}
.site-header .nav-link:hover {
  color:var(--rl-brand-blue) !important;
  background:linear-gradient(135deg,rgba(31,117,181,.10),rgba(255,122,26,.08)) !important;
  transform:translateY(-2px) scale(1.025) !important;
  box-shadow:0 8px 22px rgba(11,61,110,.10) !important;
}
.site-header .nav-link.active,
.site-header .nav-link.nav-pill.active {
  color:#fff !important;
  background:linear-gradient(135deg,var(--rl-brand-blue) 0%,var(--rl-brand-blue-2) 62%,var(--rl-brand-orange) 145%) !important;
  box-shadow:0 10px 24px rgba(11,61,110,.22), 0 2px 0 rgba(255,122,26,.26) inset !important;
  transform:translateY(-1px) !important;
}
.site-header .nav-link.active:hover { transform:translateY(-3px) scale(1.025) !important; }

/* EQUIPO: acento naranja + azul y una flotación suave permanente. */
.team-section-float .team-float-card {
  animation:rlTeamFloat 5.8s ease-in-out infinite;
}
.team-section-float .team-float-card:nth-child(2){animation-delay:.45s}
.team-section-float .team-float-card:nth-child(3){animation-delay:.9s}
.team-section-float .team-float-card:nth-child(4){animation-delay:1.35s}
.team-section-float .team-float-card::after {
  content:""; position:absolute; inset:0; border-radius:24px; pointer-events:none;
  background:linear-gradient(135deg,rgba(31,117,181,.08),transparent 46%,rgba(255,122,26,.08));
  opacity:.75;
}
.team-section-float .founder-badge { border-color:rgba(255,154,61,.45) !important; }
@keyframes rlTeamFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)} }
.team-section-float .team-float-card:hover { animation-play-state:paused; }

/* SECTORES: profundidad, brillo y movimiento tanto con mouse como en touch. */
.sector-card--accordion {
  position:relative;
  overflow:hidden;
  border:1px solid rgba(31,117,181,.16) !important;
  box-shadow:0 14px 32px rgba(11,61,110,.08) !important;
  transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .35s ease !important;
}
.sector-card--accordion::before {
  content:""; position:absolute; inset:-40% auto auto -30%; width:68%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle,rgba(31,117,181,.13),transparent 68%); pointer-events:none; transition:transform .45s ease;
}
.sector-card--accordion::after {
  content:""; position:absolute; right:-18%; bottom:-40%; width:52%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle,rgba(255,122,26,.13),transparent 68%); pointer-events:none; transition:transform .45s ease;
}
.sector-card--accordion:hover {
  transform:translateY(-10px) rotateX(1deg) !important;
  border-color:rgba(255,122,26,.34) !important;
  box-shadow:0 24px 52px rgba(11,61,110,.15) !important;
}
.sector-card--accordion:hover::before {transform:translate(16px,18px) scale(1.08)}
.sector-card--accordion:hover::after {transform:translate(-14px,-16px) scale(1.08)}
.sector-card--accordion .sector-card-image { transition:transform .55s cubic-bezier(.2,.8,.2,1),filter .35s ease !important; }
.sector-card--accordion:hover .sector-card-image { transform:scale(1.045); filter:saturate(1.06) contrast(1.02); }
.sector-card--accordion .rl-disclosure summary { transition:background .25s ease,color .25s ease,transform .25s ease; }
.sector-card--accordion .rl-disclosure summary:hover { background:linear-gradient(90deg,rgba(31,117,181,.08),rgba(255,122,26,.08)); }
@media (hover:none), (pointer:coarse) {
  .sector-card--accordion { animation:rlSectorBreath 6s ease-in-out infinite; }
  .sector-card--accordion:nth-child(even){animation-delay:1s}
  @keyframes rlSectorBreath {0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
  .sector-card--accordion:active { transform:scale(.985) translateY(-2px) !important; }
}

/* MODAL PDF DE PROGRAMAS */
.program-pdf-modal { padding:clamp(.6rem,2vw,1.4rem); background:rgba(4,20,36,.70) !important; backdrop-filter:blur(10px); }
.program-pdf-modal__container {
  width:min(1120px,96vw) !important; max-width:1120px !important; max-height:94vh !important;
  border-radius:24px !important; overflow:hidden !important; border:1px solid rgba(255,255,255,.50) !important;
  background:#fff !important; box-shadow:0 30px 90px rgba(4,20,36,.30) !important;
}
.program-pdf-modal__header { display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:1rem 1.2rem;border-bottom:1px solid rgba(31,117,181,.12);background:linear-gradient(135deg,#fff,rgba(31,117,181,.055),rgba(255,122,26,.045)); }
.program-pdf-modal__header h3 { margin:.4rem 0 0;color:var(--rl-brand-blue);font-size:clamp(1.15rem,2vw,1.55rem); }
.program-pdf-modal__close { flex:0 0 auto;width:42px;height:42px;border:0;border-radius:14px;background:linear-gradient(135deg,var(--rl-brand-blue),var(--rl-brand-blue-2));color:#fff;cursor:pointer;box-shadow:0 8px 20px rgba(11,61,110,.18);transition:transform .25s ease,background .25s ease; }
.program-pdf-modal__close:hover {transform:rotate(5deg) scale(1.06);background:linear-gradient(135deg,var(--rl-brand-orange),var(--rl-brand-orange-2));}
.program-pdf-modal__body { overflow:auto; max-height:calc(94vh - 150px); padding:1rem 1.2rem 1.25rem; }
.program-pdf-modal__footer { display:flex;justify-content:flex-end;gap:.75rem;padding:.85rem 1.2rem;border-top:1px solid rgba(31,117,181,.12);background:#fff; }
.program-pdf-viewer { border:1px solid rgba(31,117,181,.18);border-radius:18px;overflow:hidden;background:#f6f9fc;box-shadow:0 12px 30px rgba(11,61,110,.08);margin-bottom:1rem; }
.program-pdf-viewer__toolbar {display:flex;align-items:center;justify-content:space-between;gap:.8rem;padding:.72rem .85rem;background:linear-gradient(90deg,rgba(11,61,110,.96),rgba(31,117,181,.95));color:#fff;font-weight:800;}
.program-pdf-viewer__toolbar .btn {background:#fff !important;color:var(--rl-brand-blue) !important;border:0 !important;}
.program-pdf-frame {display:block;width:100%;height:min(62vh,660px);border:0;background:#fff;}
.program-pdf-mobile-note {display:none;margin:.6rem .8rem .8rem;color:var(--color-text-muted);font-size:.82rem;}
.program-modal-info-grid {display:grid;grid-template-columns:1fr 1fr;gap:1rem;}
.program-pdf-empty {display:grid;place-items:center;text-align:center;gap:.4rem;padding:2rem;border:1px dashed rgba(31,117,181,.30);border-radius:18px;background:linear-gradient(135deg,rgba(31,117,181,.04),rgba(255,122,26,.05));margin-bottom:1rem;}
.program-pdf-empty i {font-size:2rem;color:var(--rl-brand-orange)}

/* CTA de programas con mezcla cromática de marca. */
.program-card--accordion .btn-primary {background:linear-gradient(135deg,var(--rl-brand-orange),var(--rl-brand-orange-2)) !important;border-color:transparent !important;box-shadow:0 10px 22px rgba(255,122,26,.20) !important;}
.program-card--accordion .btn-primary:hover {transform:translateY(-2px);box-shadow:0 14px 28px rgba(255,122,26,.28) !important;}
.program-card--accordion .btn-secondary:hover {color:#fff !important;background:linear-gradient(135deg,var(--rl-brand-blue),var(--rl-brand-blue-2)) !important;}

@media (max-width:700px) {
  .program-pdf-modal {padding:.35rem;align-items:flex-end !important;}
  .program-pdf-modal__container {width:100% !important;max-height:96dvh !important;border-radius:22px 22px 0 0 !important;}
  .program-pdf-modal__body {max-height:calc(96dvh - 145px);padding:.75rem;}
  .program-pdf-frame {height:58dvh;min-height:430px;}
  .program-pdf-mobile-note {display:block;}
  .program-modal-info-grid {grid-template-columns:1fr;}
  .program-pdf-modal__footer {position:sticky;bottom:0;}
  .program-pdf-modal__footer .btn {flex:1;}
  .team-section-float .team-float-card {animation-duration:6.8s;}
}

@media (prefers-reduced-motion:reduce) {
  .team-section-float .team-float-card,
  .sector-card--accordion {animation:none !important;}
}


/* ========================================================================== 
   V12 - VISOR PDF GLOBAL + DESCARGAS REALES + DINAMISMO RESPONSIVE
   --------------------------------------------------------------------------
   PDF: coloca artículos y materiales en assets/pdfs/recursos/.
   HTML: usa data-pdf-preview para abrir el visor y href + download para bajar.
   Este bloque NO interviene en formularios ni conexiones de Google Sheets.
   ========================================================================== */
.resource-actions {
  display:grid;
  grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:.7rem;
  margin-top:1rem;
}
.resource-actions .btn { min-height:48px; padding:.72rem .75rem; font-size:.84rem; line-height:1.2; }
.resource-preview-btn { border-color:rgba(31,117,181,.24) !important; background:linear-gradient(135deg,#fff,rgba(31,117,181,.065)) !important; }
.resource-download-btn { background:linear-gradient(135deg,var(--rl-brand-orange,#ff7a1a),#ff9a45) !important; border-color:transparent !important; box-shadow:0 10px 24px rgba(255,122,26,.20); }
.resource-card,
.blog-card,
.sector-card,
.program-card {
  transform:translateZ(0);
  will-change:transform, box-shadow;
}
@media (hover:hover) and (pointer:fine) {
  .resource-card:hover,
  .blog-card:hover { transform:translateY(-9px) scale(1.012); box-shadow:0 22px 48px rgba(11,61,110,.16); }
  .resource-card:hover .resource-type-badge,
  .blog-card:hover .blog-category { transform:translateY(-2px); filter:saturate(1.15); }
  .resource-actions .btn:hover { transform:translateY(-3px); }
}
.resource-card { position:relative; overflow:hidden; transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease,border-color .35s ease; }
.resource-card::before {
  content:""; position:absolute; width:160px; height:160px; right:-80px; top:-80px; border-radius:50%;
  background:radial-gradient(circle,rgba(255,122,26,.17),rgba(31,117,181,.04) 58%,transparent 72%);
  pointer-events:none; transition:transform .45s ease;
}
.resource-card:hover::before { transform:scale(1.32) translate(-8px,8px); }
.resource-type-badge,.blog-category { transition:transform .3s ease,filter .3s ease; }

.document-pdf-modal {
  position:fixed !important; inset:0; z-index:99999 !important; display:flex !important; align-items:center; justify-content:center;
  padding:clamp(.45rem,2vw,1.5rem); background:rgba(3,18,34,.76) !important; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  animation:rlPdfBackdrop .25s ease both;
}
.document-pdf-modal__container {
  width:min(1120px,96vw); max-height:95dvh; display:flex; flex-direction:column; overflow:hidden;
  border:1px solid rgba(255,255,255,.22); border-radius:24px; background:#fff;
  box-shadow:0 34px 100px rgba(0,20,45,.38),0 0 0 1px rgba(31,117,181,.08);
  animation:rlPdfFloatIn .34s cubic-bezier(.2,.8,.2,1) both;
}
.document-pdf-modal__header {
  display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; padding:1rem 1.15rem;
  background:linear-gradient(120deg,#fff 0%,#f4f9fd 48%,#fff8f1 100%); border-bottom:1px solid rgba(31,117,181,.12);
}
.document-pdf-modal__heading { min-width:0; }
.document-pdf-modal__eyebrow { display:inline-flex;align-items:center;gap:.42rem;color:var(--rl-brand-orange,#ff7a1a);font-size:.72rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase; }
.document-pdf-modal__header h3 { margin:.28rem 0 0; color:var(--rl-brand-blue,#0b3d6e); font-size:clamp(1rem,2.1vw,1.48rem); line-height:1.22; }
.document-pdf-modal__close {
  flex:0 0 auto; width:42px; height:42px; border:0; border-radius:14px; cursor:pointer; color:#fff;
  background:linear-gradient(135deg,var(--rl-brand-blue,#0b3d6e),var(--rl-brand-blue-2,#1f75b5)); box-shadow:0 9px 22px rgba(11,61,110,.23);
  transition:transform .25s ease, background .25s ease;
}
.document-pdf-modal__close:hover { transform:rotate(7deg) scale(1.06); background:linear-gradient(135deg,var(--rl-brand-orange,#ff7a1a),#ff9a45); }
.document-pdf-modal__toolbar {
  display:flex; align-items:center; justify-content:space-between; gap:.8rem; padding:.68rem .9rem;
  color:#fff; background:linear-gradient(100deg,var(--rl-brand-blue,#0b3d6e),var(--rl-brand-blue-2,#1f75b5) 67%,#277fb9);
}
.document-pdf-modal__toolbar > span { font-size:.84rem; font-weight:800; }
.document-pdf-modal__toolbar-actions { display:flex; gap:.55rem; flex-wrap:wrap; justify-content:flex-end; }
.document-pdf-modal__toolbar .btn { min-height:38px; padding:.5rem .72rem; font-size:.76rem; }
.document-pdf-modal__toolbar .btn-secondary { background:#fff !important; color:var(--rl-brand-blue,#0b3d6e) !important; border:0 !important; }
.document-pdf-modal__viewer-wrap { position:relative; flex:1; min-height:0; background:#eef4f9; }
.document-pdf-modal__frame { display:block; width:100%; height:min(72dvh,760px); min-height:440px; border:0; background:#fff; }
.document-pdf-modal__mobile-help { display:none; align-items:flex-start; gap:.65rem; padding:.7rem .8rem; font-size:.76rem; line-height:1.4; color:#50647d; background:#f8fbfe; border-top:1px solid #dce8f2; }
.document-reading-card { max-width:760px; }
.document-reading-content { overflow:auto; padding:clamp(1rem,3vw,2rem); color:#334b67; line-height:1.75; font-size:clamp(.92rem,1.5vw,1.03rem); }
@keyframes rlPdfBackdrop { from{opacity:0} to{opacity:1} }
@keyframes rlPdfFloatIn { from{opacity:0;transform:translateY(24px) scale(.965)} to{opacity:1;transform:translateY(0) scale(1)} }

/* Touch: interacción visible sin depender de hover. */
@media (hover:none), (pointer:coarse) {
  .resource-card:active,.blog-card:active,.sector-card:active,.program-card:active { transform:scale(.986); }
  .resource-actions .btn:active { transform:scale(.97); }
}

@media (max-width:820px) {
  .document-pdf-modal { align-items:flex-end !important; padding:.25rem; }
  .document-pdf-modal__container { width:100%; max-height:97dvh; border-radius:22px 22px 0 0; }
  .document-pdf-modal__header { padding:.82rem .88rem; }
  .document-pdf-modal__close { width:40px;height:40px;border-radius:13px; }
  .document-pdf-modal__toolbar { align-items:flex-start; flex-direction:column; }
  .document-pdf-modal__toolbar-actions { width:100%; display:grid; grid-template-columns:1fr 1fr; }
  .document-pdf-modal__toolbar .btn { width:100%; justify-content:center; }
  .document-pdf-modal__frame { height:64dvh; min-height:390px; }
  .document-pdf-modal__mobile-help { display:flex; }
  .resource-actions { grid-template-columns:1fr 1fr; }
}
@media (max-width:520px) {
  .resource-actions { grid-template-columns:1fr; }
  .resource-actions .btn { width:100%; }
  .document-pdf-modal__toolbar-actions { grid-template-columns:1fr; }
  .document-pdf-modal__frame { height:58dvh; min-height:350px; }
  .document-pdf-modal__header h3 { font-size:.98rem; }
}
@media (prefers-reduced-motion:reduce) {
  .document-pdf-modal,.document-pdf-modal__container,.resource-card,.blog-card,.sector-card,.program-card,.resource-actions .btn { animation:none !important; transition:none !important; }
}

/* ========================================================================== 
   AJUSTE SOLICITADO: HEADER STICKY + NAVEGACIÓN MÓVIL
   --------------------------------------------------------------------------
   Este bloque solo refuerza el comportamiento del encabezado y del menú
   responsive. No modifica tipografías, paleta, márgenes ni estilos base.
   ========================================================================== */

/* PC / laptop: encabezado sticky, por encima del contenido y con transición. */
.site-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 9999 !important;
  transition: box-shadow .28s ease, background-color .28s ease, backdrop-filter .28s ease !important;
  -webkit-backdrop-filter: blur(10px) !important;
  backdrop-filter: blur(10px) !important;
}

/* La clase .scrolled ya es activada por app.js al desplazarse. */
.site-header.scrolled {
  box-shadow: 0 10px 28px rgba(7, 26, 45, .10) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  backdrop-filter: blur(14px) !important;
}

/* Móvil: header compacto y menú hamburguesa fluido. */
@media (max-width: 820px) {
  .site-header {
    position: sticky !important;
    top: 0 !important;
    height: 70px !important;
    max-height: 70px !important;
    z-index: 9999 !important;
  }

  .header-inner {
    height: 70px !important;
    max-height: 70px !important;
  }

  /* Oculta la navegación horizontal de escritorio sin eliminarla del DOM. */
  .main-navigation {
    position: absolute !important;
    top: 70px !important;
    left: 0 !important;
    right: 0 !important;
    display: block !important;
    max-height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(-8px) !important;
    transition: max-height .32s ease, opacity .22s ease, transform .28s ease, visibility .22s ease !important;
  }

  /* El botón hamburguesa queda disponible en móvil. */
  .menu-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Compatible con la clase .open usada actualmente y con .active. */
  .main-navigation.open,
  .main-navigation.active {
    max-height: calc(100dvh - 70px) !important;
    overflow-y: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
  }
}


/* ==========================================================================
   LINKEDIN — ING. ÓSCAR PÉREZ
   Ajuste visual puntual del único icono social visible en su tarjeta.
   ========================================================================== */
.team-section-float .founder-social-overlay .oscar-linkedin {
  width: 42px !important;
  height: 42px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  border-radius: 13px !important;
  background: linear-gradient(145deg, #0A66C2 0%, #084f96 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.72) !important;
  box-shadow: 0 9px 22px rgba(10, 102, 194, 0.30), 0 2px 7px rgba(15, 36, 63, 0.16) !important;
  color: #fff !important;
  overflow: hidden;
  transform: translateZ(0);
}

.team-section-float .founder-social-overlay .oscar-linkedin svg {
  width: 21px;
  height: 21px;
  display: block;
  fill: currentColor;
}

.team-section-float .founder-social-overlay .oscar-linkedin:hover,
.team-section-float .founder-social-overlay .oscar-linkedin:focus-visible {
  background: linear-gradient(145deg, #1478d4 0%, #0A66C2 100%) !important;
  transform: translateY(-3px) scale(1.06) !important;
  box-shadow: 0 13px 28px rgba(10, 102, 194, 0.38), 0 3px 9px rgba(15, 36, 63, 0.18) !important;
  outline: none;
}

@media (max-width: 620px) {
  .team-section-float .founder-social-overlay .oscar-linkedin {
    width: 40px !important;
    height: 40px !important;
    border-radius: 12px !important;
  }

  .team-section-float .founder-social-overlay .oscar-linkedin svg {
    width: 20px;
    height: 20px;
  }
}

/* ========================================================================== 
   V13 — RED LÍDER SIGNATURE EXPERIENCE
   Objetivo: navegación sticky/translúcida, menú móvil sólido, tipografía estable
   y una capa visual premium sin alterar formularios ni conexiones externas.
   ========================================================================== */
:root {
  --rl-v13-header-h: 82px;
  --rl-v13-mobile-header-h: 72px;
  --rl-v13-shadow-soft: 0 16px 46px rgba(9, 39, 70, .10);
  --rl-v13-shadow-card: 0 22px 58px rgba(9, 39, 70, .12);
  --rl-v13-ease: cubic-bezier(.2, .8, .2, 1);
}

html {
  scroll-padding-top: calc(var(--rl-v13-header-h) + 18px);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  overflow-x: clip;
  min-width: 320px;
}

body.nav-open {
  overflow: hidden;
}

body.nav-open::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9980;
  background: rgba(5, 22, 40, .34);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  animation: rlV13OverlayIn .2s ease both;
}

@keyframes rlV13OverlayIn { from { opacity: 0; } to { opacity: 1; } }

/* Tipografía fluida: conserva jerarquía y evita títulos desbordados/deformados. */
:where(h1, h2, h3, h4, h5, h6) {
  text-wrap: balance;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

:where(p, li) {
  text-wrap: pretty;
  overflow-wrap: break-word;
}

:where(img, video, iframe, svg) {
  max-width: 100%;
}

img {
  height: auto;
}

:where(section, article, [id]) {
  scroll-margin-top: calc(var(--rl-v13-header-h) + 18px);
}

/* HEADER: sólido arriba, cristal translúcido al hacer scroll. */
.site-header {
  position: sticky !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: var(--rl-v13-header-h) !important;
  z-index: 10000 !important;
  background: rgba(255, 255, 255, .97) !important;
  border-bottom: 1px solid rgba(16, 67, 112, .09) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.85) !important;
  backdrop-filter: blur(10px) saturate(125%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(125%) !important;
  transition: background-color .32s ease, box-shadow .32s ease, backdrop-filter .32s ease, border-color .32s ease !important;
}

.site-header.scrolled,
.site-header.v8-condensed {
  background: rgba(255, 255, 255, .76) !important;
  border-bottom-color: rgba(16, 67, 112, .13) !important;
  box-shadow: 0 16px 44px rgba(5, 31, 55, .12) !important;
  backdrop-filter: blur(22px) saturate(165%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(165%) !important;
}

.header-inner {
  height: 100% !important;
  min-width: 0;
  gap: .85rem !important;
}

.brand-logo,
.brand-logo-img {
  min-width: 0;
}

.brand-logo-img {
  height: clamp(43px, 4.2vw, 50px) !important;
  max-width: min(220px, 24vw) !important;
  object-fit: contain !important;
}

.main-navigation {
  min-width: 0;
}

.nav-menu {
  flex-wrap: nowrap !important;
}

.site-header .nav-link,
.site-header a.nav-link {
  font-size: clamp(.82rem, .82vw, .92rem) !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
  letter-spacing: -.012em;
}

.site-header .nav-link:focus-visible,
.menu-toggle:focus-visible,
.social-btn:focus-visible {
  outline: 3px solid rgba(244,123,32,.28) !important;
  outline-offset: 3px !important;
}

/* Hamburguesa limpia: X real al abrir. */
.menu-toggle {
  position: relative;
  z-index: 10003;
}

.menu-toggle.active .hamburger span:nth-child(1) {
  transform: translateY(7.5px) rotate(45deg) !important;
}
.menu-toggle.active .hamburger span:nth-child(2) {
  opacity: 0 !important;
  transform: scaleX(.2) !important;
}
.menu-toggle.active .hamburger span:nth-child(3) {
  transform: translateY(-7.5px) rotate(-45deg) !important;
}

/* Tarjetas con profundidad de marca, sin mover el layout. */
:where(.service-card,.program-card,.sector-card,.content-card,.editorial-card,.pillar-card,
       .resource-card,.founder-card,.dual-route-card,.eng-highlight-card,.info-box-card,.faq-item) {
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

@media (hover:hover) and (pointer:fine) {
  :where(.service-card,.program-card,.sector-card,.content-card,.editorial-card,.pillar-card,
         .resource-card,.dual-route-card,.eng-highlight-card):hover {
    box-shadow: var(--rl-v13-shadow-card) !important;
  }

  .team-section-float .team-float-card:hover {
    transform: translateY(-10px) scale(1.012) !important;
    box-shadow: 0 26px 68px rgba(7, 35, 62, .17) !important;
  }
}

/* EQUIPO: retratos nítidos y proporciones consistentes. */
.team-section-float {
  position: relative;
  overflow: hidden;
}

.team-section-float::before,
.team-section-float::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
  filter: blur(2px);
  opacity: .72;
}

.team-section-float::before {
  width: min(420px, 42vw);
  aspect-ratio: 1;
  left: -12%;
  top: 7%;
  background: radial-gradient(circle, rgba(31,117,181,.13), transparent 68%);
}

.team-section-float::after {
  width: min(360px, 38vw);
  aspect-ratio: 1;
  right: -10%;
  bottom: 2%;
  background: radial-gradient(circle, rgba(255,122,26,.12), transparent 68%);
}

.team-section-float .container {
  position: relative;
  z-index: 1;
}

.team-section-float .school-grid-team {
  align-items: stretch !important;
}

.team-section-float .team-float-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(21, 86, 141, .11) !important;
  background: linear-gradient(155deg, rgba(255,255,255,.98), rgba(247,251,255,.96)) !important;
  box-shadow: 0 18px 45px rgba(7, 35, 62, .10) !important;
}

.team-section-float .founder-image-wrap {
  background: linear-gradient(145deg, #f5f8fb, #edf4f9) !important;
  overflow: hidden !important;
}

.team-section-float .founder-img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center top;
  image-rendering: auto;
}

/* Foto entregada por el usuario: se conserva completa, sin estirar ni recortar. */
.team-section-float .saira-yovera-img {
  object-fit: contain !important;
  object-position: center bottom !important;
  background: linear-gradient(180deg, #f4f3f4 0%, #ecebed 100%);
  padding: 0 !important;
}

.team-section-float .founder-name {
  font-size: clamp(1.12rem, 1.8vw, 1.36rem) !important;
  line-height: 1.2 !important;
}

.team-section-float .founder-role,
.team-section-float .founder-bio {
  overflow-wrap: break-word;
}

/* Mantiene el contenido elegante en pantallas grandes sin líneas excesivamente largas. */
.section-header .section-title,
.page-hero-title {
  max-width: 22ch;
}

.section-header .section-subtitle,
.page-hero-subtitle {
  max-width: 72ch;
}

/* TABLET + MÓVIL: cambia a hamburguesa antes de que el menú se comprima. */
@media (max-width: 1240px) {
  :root { --rl-v13-header-h: var(--rl-v13-mobile-header-h); }

  .site-header,
  .site-header.scrolled,
  .site-header.v8-condensed {
    height: var(--rl-v13-mobile-header-h) !important;
    max-height: var(--rl-v13-mobile-header-h) !important;
  }

  .header-inner {
    height: var(--rl-v13-mobile-header-h) !important;
    max-height: var(--rl-v13-mobile-header-h) !important;
    width: min(100% - 24px, 1240px) !important;
  }

  .brand-logo-img {
    height: 43px !important;
    max-width: min(190px, 58vw) !important;
  }

  .header-socials {
    display: none !important;
  }

  .menu-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 46px;
    width: 46px !important;
    height: 46px !important;
    margin-left: auto !important;
    border-radius: 14px !important;
    color: #0b3d6e !important;
    background: rgba(243, 248, 253, .96) !important;
    border: 1px solid rgba(20, 83, 137, .14) !important;
    box-shadow: 0 7px 20px rgba(8, 43, 74, .08) !important;
  }

  .main-navigation {
    position: absolute !important;
    top: calc(var(--rl-v13-mobile-header-h) + 8px) !important;
    left: max(12px, calc((100vw - 1180px) / 2)) !important;
    right: max(12px, calc((100vw - 1180px) / 2)) !important;
    z-index: 10002 !important;
    display: block !important;
    width: auto !important;
    max-height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(-10px) scale(.985) !important;
    transform-origin: top center;
    background: rgba(255, 255, 255, .96) !important;
    border: 1px solid rgba(19, 80, 132, .12) !important;
    border-radius: 22px !important;
    box-shadow: 0 28px 70px rgba(4, 29, 52, .22) !important;
    backdrop-filter: blur(24px) saturate(165%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(165%) !important;
    transition: max-height .34s var(--rl-v13-ease), opacity .22s ease,
                transform .32s var(--rl-v13-ease), visibility .2s ease,
                padding .25s ease !important;
  }

  .main-navigation.open {
    max-height: calc(100dvh - 92px) !important;
    padding: 12px !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) scale(1) !important;
  }

  .main-navigation .nav-menu {
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
    gap: 5px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .main-navigation .nav-menu > li {
    width: 100% !important;
    min-width: 0;
  }

  .main-navigation .nav-link,
  .main-navigation a.nav-link {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 46px;
    padding: .78rem .95rem !important;
    border-radius: 13px !important;
    font-size: .94rem !important;
    line-height: 1.25 !important;
    white-space: normal !important;
    transform: none !important;
  }

  .main-navigation .nav-link:hover,
  .main-navigation .nav-link:focus-visible {
    transform: none !important;
  }

  .main-navigation .nav-link.active {
    box-shadow: 0 8px 20px rgba(11,61,110,.16) !important;
  }
}

@media (max-width: 760px) {
  body {
    font-size: 16px;
  }

  .container {
    width: min(100% - 28px, 1240px) !important;
  }

  .page-hero-title {
    font-size: clamp(2rem, 9.2vw, 3.25rem) !important;
    line-height: 1.05 !important;
    letter-spacing: -.038em !important;
  }

  .section-title {
    font-size: clamp(1.72rem, 7.5vw, 2.55rem) !important;
    line-height: 1.08 !important;
    letter-spacing: -.032em !important;
  }

  .hero-title {
    font-size: clamp(2.25rem, 10.5vw, 3.65rem) !important;
    line-height: 1.01 !important;
    letter-spacing: -.045em !important;
  }

  :where(.page-hero-subtitle,.section-subtitle,.hero-lead) {
    font-size: clamp(.98rem, 4vw, 1.08rem) !important;
    line-height: 1.68 !important;
  }

  .team-section-float .school-grid-team {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 1.25rem !important;
  }

  .team-section-float .team-float-card {
    width: 100%;
    max-width: 520px;
    margin-inline: auto;
    animation-duration: 7.5s;
  }

  .team-section-float .founder-image-wrap {
    min-height: 340px;
    aspect-ratio: 4 / 5;
  }

  .team-section-float .founder-body {
    padding: 1.15rem 1.2rem 1.3rem !important;
  }
}

@media (max-width: 430px) {
  .header-inner {
    width: calc(100% - 20px) !important;
  }

  .brand-logo-img {
    max-width: 168px !important;
    height: 40px !important;
  }

  .menu-toggle {
    width: 44px !important;
    height: 44px !important;
    flex-basis: 44px;
  }

  .main-navigation {
    left: 10px !important;
    right: 10px !important;
    border-radius: 18px !important;
  }

  .main-navigation.open {
    padding: 10px !important;
  }

  .team-section-float .founder-image-wrap {
    min-height: 300px;
  }
}

/* Rendimiento y accesibilidad: el movimiento nunca compromete legibilidad. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================
   V14 – AJUSTES FINALES SOLICITADOS POR EL USUARIO
   - Logo del navegador más grande y sin deformación.
   - Encabezado sticky con transparencia elegante al hacer scroll.
   - Mejor lectura del menú y hamburguesa en móvil.
   - Reencuadre de fotos de Dany Farfan y Saira Yovera.
   ========================================================== */

.site-header {
  min-height: 88px !important;
  background: rgba(255, 255, 255, 0.96) !important;
  backdrop-filter: blur(14px) saturate(1.1) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.1) !important;
  border-bottom: 1px solid rgba(23, 54, 93, 0.08) !important;
}

.site-header.scrolled,
.site-header.v8-condensed {
  background: rgba(255, 255, 255, 0.82) !important;
  backdrop-filter: blur(20px) saturate(1.14) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.14) !important;
  box-shadow: 0 16px 35px rgba(12, 33, 60, 0.10) !important;
}

.header-inner {
  min-height: 88px !important;
  gap: clamp(0.9rem, 1.8vw, 1.6rem) !important;
}

.brand-logo {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  padding: 0.2rem 0 !important;
}

.site-header .brand-logo-img,
.brand-logo-img {
  width: auto !important;
  height: clamp(56px, 4.8vw, 72px) !important;
  max-width: min(260px, 22vw) !important;
  object-fit: contain !important;
  object-position: left center !important;
  image-rendering: auto;
  filter: drop-shadow(0 5px 12px rgba(22, 54, 93, 0.10)) !important;
  transition: transform .30s ease, filter .30s ease !important;
}

.brand-logo:hover .brand-logo-img {
  transform: scale(1.03) !important;
  filter: drop-shadow(0 8px 18px rgba(22, 54, 93, 0.14)) !important;
}

.nav-menu,
.main-nav ul {
  align-items: center !important;
  gap: clamp(0.55rem, 1vw, 1rem) !important;
}

.nav-link {
  line-height: 1.15 !important;
  white-space: nowrap;
}

.team-section-float .dany-farfan-img {
  object-fit: cover !important;
  object-position: center 8% !important;
}

.team-section-float .saira-yovera-img {
  object-fit: cover !important;
  object-position: center 12% !important;
  background: linear-gradient(180deg, #eef2f7 0%, #e6ebf3 100%) !important;
}

@media (max-width: 1100px) {
  .site-header {
    min-height: 82px !important;
  }

  .header-inner {
    min-height: 82px !important;
  }

  .site-header .brand-logo-img,
  .brand-logo-img {
    height: 60px !important;
    max-width: 220px !important;
  }
}

@media (max-width: 860px) {
  .site-header {
    min-height: 76px !important;
  }

  .header-inner {
    min-height: 76px !important;
  }

  .site-header .brand-logo-img,
  .brand-logo-img {
    height: 54px !important;
    max-width: 188px !important;
  }

  .nav-toggle,
  .menu-toggle,
  .hamburger {
    min-width: 48px;
    min-height: 48px;
  }
}

@media (max-width: 640px) {
  .site-header {
    min-height: 72px !important;
  }

  .header-inner {
    min-height: 72px !important;
  }

  .site-header .brand-logo-img,
  .brand-logo-img {
    height: 48px !important;
    max-width: 168px !important;
  }

  .mobile-nav,
  .nav-drawer,
  .menu-panel,
  .mobile-menu-panel {
    padding-top: 1rem !important;
  }
}

/* ============================================================================
   V15 — RED LÍDER EXECUTIVE / SIGNATURE UI
   Objetivos de esta capa final:
   1) Favicon compacto y no deformado (configurado en cada HTML).
   2) Navegación fija tipo institucional: se integra con el hero y se vuelve
      cristal sólido al hacer scroll, sin desaparecer.
   3) Tarjetas con relieve premium usando exclusivamente los colores de marca.
   4) Cursor de marca + halo sutil, solo en equipos con mouse.
   5) Mantener intactas las conexiones, formularios, PDF y contenido.
   ============================================================================ */
:root {
  --rl-v15-header-h: 88px;
  --rl-v15-header-mobile-h: 72px;
  --rl-v15-navy: #0b3d6e;
  --rl-v15-navy-deep: #072c50;
  --rl-v15-blue: #1f75b5;
  --rl-v15-orange: #f47b20;
  --rl-v15-ice: #f5f9fd;
  --rl-v15-line: rgba(11, 61, 110, .13);
  --rl-v15-ease: cubic-bezier(.2,.8,.2,1);
}

html {
  scroll-padding-top: calc(var(--rl-v15-header-h) + 22px) !important;
}

/* --------------------------------------------------------------------------
   HEADER SUPERPUESTO + FIJO, INSPIRADO EN NAVEGACIÓN INSTITUCIONAL PREMIUM
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed !important;
  inset: 0 0 auto 0 !important;
  width: 100% !important;
  height: var(--rl-v15-header-h) !important;
  min-height: var(--rl-v15-header-h) !important;
  max-height: none !important;
  z-index: 10000 !important;
  background: rgba(255,255,255,.72) !important;
  border-bottom: 1px solid rgba(255,255,255,.38) !important;
  box-shadow: 0 1px 0 rgba(11,61,110,.06) !important;
  backdrop-filter: blur(20px) saturate(145%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(145%) !important;
  transition:
    background .34s ease,
    border-color .34s ease,
    box-shadow .34s ease,
    backdrop-filter .34s ease !important;
}

/* En páginas internas, el encabezado se funde con el hero oscuro de marca. */
body.has-dark-hero .site-header:not(.scrolled):not(.v8-condensed) {
  background:
    linear-gradient(180deg, rgba(5,31,56,.80) 0%, rgba(5,31,56,.48) 68%, rgba(5,31,56,.16) 100%) !important;
  border-bottom-color: rgba(255,255,255,.13) !important;
  box-shadow: none !important;
  backdrop-filter: blur(10px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(120%) !important;
}

/* Al desplazarse, permanece visible como una barra limpia y compacta. */
.site-header.scrolled,
.site-header.v8-condensed,
body.nav-open .site-header {
  background: rgba(255,255,255,.92) !important;
  border-bottom-color: rgba(11,61,110,.11) !important;
  box-shadow:
    0 18px 46px rgba(4,31,56,.13),
    0 1px 0 rgba(255,255,255,.80) inset !important;
  backdrop-filter: blur(24px) saturate(175%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(175%) !important;
}

.header-inner {
  height: var(--rl-v15-header-h) !important;
  min-height: var(--rl-v15-header-h) !important;
  max-height: var(--rl-v15-header-h) !important;
  gap: clamp(.7rem, 1.1vw, 1.15rem) !important;
}

/* Logo horizontal limpio; nunca se estira. */
.brand-logo {
  flex: 0 0 auto !important;
  min-width: 0 !important;
  padding: .18rem .35rem !important;
  border-radius: 15px;
  transition: background .28s ease, box-shadow .28s ease, transform .28s ease !important;
}

.site-header .brand-logo-img,
.brand-logo-img {
  width: auto !important;
  height: 58px !important;
  max-width: 190px !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  object-position: left center !important;
  filter: drop-shadow(0 5px 10px rgba(8,43,75,.08)) !important;
}

body.has-dark-hero .site-header:not(.scrolled):not(.v8-condensed) .brand-logo {
  background: rgba(255,255,255,.94) !important;
  border: 1px solid rgba(255,255,255,.62);
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
}

.brand-logo:hover {
  transform: translateY(-1px);
}

.brand-logo:hover .brand-logo-img {
  transform: scale(1.025) !important;
}

/* Navegación tipo módulo/píldora: legible tanto sobre hero como al hacer scroll. */
.site-header .nav-menu {
  gap: clamp(.22rem, .45vw, .48rem) !important;
}

.site-header .nav-link,
.site-header a.nav-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 40px;
  padding: .56rem .68rem !important;
  border-radius: 999px !important;
  font-size: clamp(.80rem, .80vw, .91rem) !important;
  font-weight: 700 !important;
  letter-spacing: -.015em !important;
  color: var(--rl-v15-navy-deep) !important;
  transition:
    color .24s ease,
    background .24s ease,
    box-shadow .24s ease,
    transform .24s ease !important;
}

.site-header .nav-link::after {
  display: none !important;
}

.site-header .nav-link:hover,
.site-header a.nav-link:hover {
  background: rgba(31,117,181,.09) !important;
  color: var(--rl-v15-navy) !important;
  transform: translateY(-1px) !important;
}

.site-header .nav-link.active,
.site-header a.nav-link.active {
  color: #fff !important;
  background: linear-gradient(135deg, var(--rl-v15-navy), var(--rl-v15-blue)) !important;
  box-shadow:
    0 9px 20px rgba(11,61,110,.18),
    0 1px 0 rgba(255,255,255,.25) inset !important;
}

body.has-dark-hero .site-header:not(.scrolled):not(.v8-condensed) .nav-link,
body.has-dark-hero .site-header:not(.scrolled):not(.v8-condensed) a.nav-link {
  color: rgba(255,255,255,.96) !important;
  text-shadow: 0 1px 12px rgba(0,0,0,.16);
}

body.has-dark-hero .site-header:not(.scrolled):not(.v8-condensed) .nav-link:hover {
  background: rgba(255,255,255,.12) !important;
  color: #fff !important;
}

body.has-dark-hero .site-header:not(.scrolled):not(.v8-condensed) .nav-link.active {
  background: rgba(255,255,255,.16) !important;
  border: 1px solid rgba(255,255,255,.24) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.13) !important;
}

/* Redes del header: botones compactos y con volumen. */
.site-header .social-btn {
  width: 36px !important;
  height: 36px !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,.88) !important;
  border: 1px solid rgba(11,61,110,.10) !important;
  box-shadow:
    0 8px 20px rgba(5,36,65,.08),
    0 1px 0 rgba(255,255,255,.86) inset !important;
  transition: transform .24s var(--rl-v15-ease), box-shadow .24s ease, background .24s ease !important;
}

.site-header .social-btn:hover {
  transform: translateY(-3px) scale(1.035) !important;
  background: #fff !important;
  box-shadow: 0 12px 26px rgba(5,36,65,.14) !important;
}

/* El hero empieza detrás del header fijo; el contenido conserva espacio seguro. */
main > .hero-section:first-child {
  padding-top: calc(var(--rl-v15-header-h) + clamp(4.7rem, 7vw, 6.2rem)) !important;
}

main > .page-hero-banner:first-child {
  padding-top: calc(var(--rl-v15-header-h) + clamp(4.1rem, 7vw, 6rem)) !important;
}

/* --------------------------------------------------------------------------
   TARJETAS: RELIEVE, PROFUNDIDAD Y COLOR DE MARCA
   -------------------------------------------------------------------------- */
:where(
  .service-card,.program-card,.sector-card,.content-card,.editorial-card,
  .pillar-card,.resource-card,.dual-route-card,.eng-highlight-card,.info-box-card,
  .faq-item,.advisor-result-card,.incompany-card,.contact-map-card,.gallery-card
) {
  border-color: rgba(11,61,110,.13) !important;
  box-shadow:
    0 18px 42px rgba(6,42,76,.09),
    0 5px 12px rgba(31,117,181,.035),
    0 1px 0 rgba(255,255,255,.92) inset,
    inset 0 -1px 0 rgba(11,61,110,.045) !important;
  transition:
    transform .34s var(--rl-v15-ease),
    box-shadow .34s ease,
    border-color .34s ease,
    filter .34s ease !important;
}

/* Borde superior de acento: elegante y no invasivo. */
:where(
  .service-card,.program-card,.sector-card,.content-card,.editorial-card,
  .pillar-card,.resource-card,.dual-route-card,.info-box-card,.advisor-result-card,
  .incompany-card,.contact-map-card
) {
  border-top-color: rgba(244,123,32,.28) !important;
}

@media (hover:hover) and (pointer:fine) {
  :where(
    .service-card,.program-card,.sector-card,.content-card,.editorial-card,
    .pillar-card,.resource-card,.dual-route-card,.eng-highlight-card,.info-box-card,
    .faq-item,.advisor-result-card,.incompany-card,.contact-map-card,.gallery-card
  ):hover {
    transform: translateY(-7px) !important;
    border-color: rgba(31,117,181,.30) !important;
    box-shadow:
      0 30px 70px rgba(6,42,76,.15),
      -12px 16px 34px rgba(244,123,32,.055),
      12px 14px 36px rgba(31,117,181,.07),
      0 1px 0 rgba(255,255,255,.95) inset !important;
    filter: saturate(1.025);
  }

  /* Spotlight contextual basado en la posición real del puntero. */
  :where(
    .service-card,.program-card,.sector-card,.content-card,.editorial-card,
    .pillar-card,.resource-card,.dual-route-card,.info-box-card,.advisor-result-card,
    .incompany-card,.contact-map-card
  ):hover {
    background-image:
      radial-gradient(circle 220px at var(--rl-card-x,50%) var(--rl-card-y,50%), rgba(244,123,32,.07), transparent 68%),
      linear-gradient(180deg, rgba(255,255,255,.18), rgba(31,117,181,.018)) !important;
  }
}

/* Equipo: acento de profundidad adicional sin modificar fotografías. */
.team-section-float .team-float-card {
  border-top: 1px solid rgba(244,123,32,.22) !important;
  box-shadow:
    0 22px 50px rgba(5,35,63,.12),
    0 5px 16px rgba(31,117,181,.055),
    0 1px 0 rgba(255,255,255,.92) inset !important;
}

.team-section-float .team-float-card:hover {
  box-shadow:
    0 34px 76px rgba(5,35,63,.19),
    -10px 18px 32px rgba(244,123,32,.07),
    10px 18px 36px rgba(31,117,181,.08) !important;
}

/* Botones: sensación táctil premium conservando azul + naranja de marca. */
.btn,
.filter-btn,
.contact-tab-btn {
  box-shadow: 0 8px 20px rgba(8,48,85,.08);
  transition: transform .24s var(--rl-v15-ease), box-shadow .24s ease, filter .24s ease !important;
}

@media (hover:hover) and (pointer:fine) {
  .btn:hover,
  .filter-btn:hover,
  .contact-tab-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 14px 30px rgba(8,48,85,.14) !important;
    filter: saturate(1.045);
  }
}

/* PDF/modal: el cursor se mantiene útil en los controles y no tapa el documento. */
.document-pdf-modal,
.program-pdf-modal,
.modal-overlay {
  isolation: isolate;
}

.document-pdf-modal__container,
.program-pdf-modal__container,
.modal-container {
  box-shadow:
    0 38px 90px rgba(4,29,52,.30),
    0 1px 0 rgba(255,255,255,.65) inset !important;
}

/* --------------------------------------------------------------------------
   TABLET / MÓVIL: mismo lenguaje visual, sin cursor personalizado y sin cortes.
   -------------------------------------------------------------------------- */
@media (max-width: 1240px) {
  :root { --rl-v15-header-h: var(--rl-v15-header-mobile-h); }

  .site-header,
  .site-header.scrolled,
  .site-header.v8-condensed,
  body.nav-open .site-header {
    height: var(--rl-v15-header-mobile-h) !important;
    min-height: var(--rl-v15-header-mobile-h) !important;
    max-height: var(--rl-v15-header-mobile-h) !important;
  }

  .header-inner {
    height: var(--rl-v15-header-mobile-h) !important;
    min-height: var(--rl-v15-header-mobile-h) !important;
    max-height: var(--rl-v15-header-mobile-h) !important;
  }

  .site-header .brand-logo-img,
  .brand-logo-img {
    height: 48px !important;
    max-width: 155px !important;
  }

  .menu-toggle {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
    border-radius: 14px !important;
    background: rgba(255,255,255,.94) !important;
    color: var(--rl-v15-navy) !important;
    border: 1px solid rgba(11,61,110,.13) !important;
    box-shadow: 0 10px 24px rgba(5,35,63,.12) !important;
  }

  .menu-toggle .hamburger {
    min-width: 0 !important;
    min-height: 0 !important;
  }

  .menu-toggle .hamburger span {
    background: var(--rl-v15-navy) !important;
  }

  .main-navigation {
    top: calc(var(--rl-v15-header-mobile-h) + 8px) !important;
  }

  .main-navigation.open {
    background: rgba(255,255,255,.975) !important;
    border: 1px solid rgba(11,61,110,.12) !important;
    box-shadow: 0 30px 80px rgba(3,29,52,.24) !important;
  }

  .main-navigation .nav-link,
  .main-navigation a.nav-link,
  body.has-dark-hero .site-header:not(.scrolled):not(.v8-condensed) .main-navigation.open .nav-link {
    color: var(--rl-v15-navy-deep) !important;
    text-shadow: none !important;
    justify-content: flex-start !important;
    min-height: 48px !important;
    padding: .82rem 1rem !important;
    border-radius: 14px !important;
  }

  .main-navigation .nav-link.active,
  body.has-dark-hero .site-header:not(.scrolled):not(.v8-condensed) .main-navigation.open .nav-link.active {
    color: #fff !important;
    background: linear-gradient(135deg, var(--rl-v15-navy), var(--rl-v15-blue)) !important;
  }

  main > .hero-section:first-child {
    padding-top: calc(var(--rl-v15-header-mobile-h) + 3.8rem) !important;
  }

  main > .page-hero-banner:first-child {
    padding-top: calc(var(--rl-v15-header-mobile-h) + 3.7rem) !important;
  }
}

@media (max-width: 520px) {
  .site-header .brand-logo-img,
  .brand-logo-img {
    height: 44px !important;
    max-width: 145px !important;
  }

  .brand-logo {
    padding-inline: .15rem !important;
  }

  body.has-dark-hero .site-header:not(.scrolled):not(.v8-condensed) .brand-logo {
    padding: .16rem .35rem !important;
    border-radius: 12px;
  }

  .main-navigation {
    left: 9px !important;
    right: 9px !important;
    border-radius: 20px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rl-cursor-halo { display: none !important; }
}

/* ========================================================================== 
   V16 — PROGRAMAS: TARJETAS MÁS CLARAS, ELEGANTES Y ORIENTADAS A CONVERSIÓN
   - Se elimina el texto redundante "Abrir/Cerrar".
   - La flecha comunica por sí sola el estado del desplegable.
   - La información ampliada incorpora situación que resuelve + resultado.
   - Conserva azul marino, azul institucional y naranja Red Líder.
   ========================================================================== */

.programs-grid {
  gap: clamp(1.15rem, 2vw, 1.6rem) !important;
}

.program-card--accordion {
  position: relative;
  overflow: hidden !important;
  padding: clamp(1.2rem, 1.7vw, 1.55rem) !important;
  border: 1px solid rgba(23,54,93,.13) !important;
  border-radius: 26px !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(31,117,181,.075), transparent 34%),
    radial-gradient(circle at 0% 100%, rgba(244,123,32,.055), transparent 30%),
    #fff !important;
  box-shadow:
    0 22px 55px rgba(7,35,64,.105),
    0 4px 12px rgba(31,117,181,.045),
    inset 0 1px 0 rgba(255,255,255,.96) !important;
}

.program-card--accordion::after {
  content:"";
  position:absolute;
  inset:0 auto auto 0;
  width:100%;
  height:4px;
  background:linear-gradient(90deg,#0b3d6e 0%,#1f75b5 58%,#f47b20 100%);
  opacity:.9;
  pointer-events:none;
}

@media (hover:hover) and (pointer:fine) {
  .program-card--accordion:hover {
    transform:translateY(-9px) !important;
    border-color:rgba(31,117,181,.30) !important;
    box-shadow:
      0 34px 72px rgba(7,35,64,.16),
      -8px 16px 28px rgba(244,123,32,.055),
      10px 16px 32px rgba(31,117,181,.075),
      inset 0 1px 0 rgba(255,255,255,.98) !important;
  }
}

.program-badges-row {
  gap:.48rem !important;
  align-items:center !important;
}

.program-card--accordion .category-tag,
.program-card--accordion .status-badge {
  border-radius:999px !important;
  font-weight:800 !important;
  letter-spacing:.018em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75);
}

.program-card-title {
  color:#152740 !important;
  font-size:clamp(1.23rem,1.65vw,1.52rem) !important;
  line-height:1.18 !important;
  letter-spacing:-.025em !important;
  margin:.2rem 0 0 !important;
}

.program-card-summary {
  -webkit-line-clamp:4 !important;
  line-clamp:4 !important;
  color:#596b82 !important;
  line-height:1.62 !important;
  font-size:.96rem !important;
  margin:.15rem 0 .2rem !important;
}

.program-disclosure {
  margin-top:.35rem !important;
  border:1px solid rgba(23,54,93,.12) !important;
  border-radius:18px !important;
  background:rgba(247,250,253,.86) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.92) !important;
  overflow:hidden;
}

.program-disclosure > summary {
  min-height:62px !important;
  padding:.82rem .92rem !important;
  background:linear-gradient(135deg,rgba(255,255,255,.94),rgba(238,245,251,.88)) !important;
  color:#17365d !important;
  font-weight:800 !important;
  border:0 !important;
}

.program-disclosure > summary:hover {
  color:#0b3d6e !important;
  background:linear-gradient(135deg,rgba(234,244,253,.98),rgba(255,246,238,.92)) !important;
}

.program-disclosure .rl-disclosure-label {
  width:100%;
  justify-content:flex-start;
  gap:.72rem;
}

.program-disclosure .rl-disclosure-icon {
  width:34px !important;
  height:34px !important;
  flex:0 0 34px !important;
  border-radius:11px !important;
  display:grid !important;
  place-items:center;
  color:#fff !important;
  background:linear-gradient(135deg,#0b3d6e,#1f75b5) !important;
  box-shadow:0 7px 16px rgba(11,61,110,.20);
}

.program-disclosure[open] .rl-disclosure-icon {
  background:linear-gradient(135deg,#f47b20,#ff963f) !important;
  box-shadow:0 7px 16px rgba(244,123,32,.22);
}

.program-disclosure-panel {
  padding:.2rem .95rem 1rem !important;
  background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(247,250,253,.94));
}

.program-meta-list--compact {
  gap:0 !important;
}

.program-meta-list--compact .meta-row {
  grid-template-columns:minmax(104px,.72fr) minmax(0,1.6fr) !important;
  gap:.8rem !important;
  padding:.72rem 0 !important;
  border-bottom:1px solid rgba(23,54,93,.085) !important;
}

.program-meta-list--compact .meta-label {
  color:#17365d !important;
  font-size:.79rem !important;
  font-weight:800 !important;
  line-height:1.35;
}

.program-meta-list--compact .meta-label i {
  width:18px;
  color:#1f75b5 !important;
}

.program-meta-list--compact .meta-value {
  color:#53657c !important;
  font-size:.84rem !important;
  line-height:1.5 !important;
  font-weight:600;
}

.program-insight-grid {
  display:grid;
  grid-template-columns:1fr;
  gap:.68rem;
  padding-top:.85rem;
}

.program-insight {
  position:relative;
  padding:.82rem .88rem .86rem;
  border:1px solid rgba(23,54,93,.10);
  border-radius:14px;
  background:#fff;
  box-shadow:0 6px 16px rgba(11,61,110,.045);
}

.program-insight--challenge {
  border-left:3px solid #1f75b5;
  background:linear-gradient(135deg,rgba(31,117,181,.055),#fff 58%);
}

.program-insight--outcome {
  border-left:3px solid #f47b20;
  background:linear-gradient(135deg,rgba(244,123,32,.055),#fff 58%);
}

.program-insight-label {
  display:flex;
  align-items:center;
  gap:.42rem;
  color:#17365d;
  font-size:.75rem;
  font-weight:850;
  text-transform:uppercase;
  letter-spacing:.045em;
}

.program-insight-label i {
  color:#f47b20;
}

.program-insight p {
  margin:.4rem 0 0 !important;
  color:#5a6c82 !important;
  font-size:.82rem !important;
  line-height:1.5 !important;
}

.program-card-footer {
  gap:.68rem !important;
  padding-top:.15rem;
}

.program-card-footer .btn {
  min-height:49px;
  border-radius:14px !important;
  font-weight:800 !important;
  line-height:1.22;
}

.program-card-footer .btn-secondary {
  background:#fff !important;
  border-color:rgba(23,54,93,.15) !important;
  color:#17365d !important;
  box-shadow:0 7px 18px rgba(11,61,110,.07) !important;
}

@media (max-width:760px) {
  .program-card--accordion {
    border-radius:22px !important;
    padding:1.08rem !important;
  }

  .program-card-title {
    font-size:1.2rem !important;
  }

  .program-card-summary {
    font-size:.92rem !important;
  }

  .program-disclosure > summary {
    min-height:58px !important;
    padding:.75rem .78rem !important;
    font-size:.86rem !important;
  }

  .program-meta-list--compact .meta-row {
    grid-template-columns:1fr !important;
    gap:.3rem !important;
    padding:.68rem 0 !important;
  }

  .program-card-footer {
    grid-template-columns:1fr !important;
  }
}

/* ========================================================================== 
   V17 — EQUIPO + TIPOGRAFÍA + TARJETAS PREMIUM 3D
   Mantiene las mejoras V13–V16 y añade una capa visual más sofisticada.
   ========================================================================== */

:root {
  --font-main: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --rl-v17-blue: #17365D;
  --rl-v17-blue-2: #2F75B5;
  --rl-v17-orange: #E67E22;
  --rl-v17-ink: #17263a;
  --rl-v17-card-shadow:
    0 28px 60px rgba(8, 37, 66, .13),
    0 9px 24px rgba(47, 117, 181, .065),
    -8px 12px 30px rgba(230, 126, 34, .04),
    inset 0 1px 0 rgba(255, 255, 255, .95);
}

body {
  font-family: var(--font-main) !important;
  letter-spacing: -.008em;
}

h1, h2, h3, h4, h5, h6,
.hero-title,
.page-hero-title,
.section-title,
.program-card-title,
.founder-name {
  font-family: var(--font-display) !important;
  letter-spacing: -.032em;
}

/* --------------------------------------------------------------------------
   Equipo directivo: contenido más ordenado + relieve 3D sin sacrificar lectura
   -------------------------------------------------------------------------- */
.team-section-float .school-grid-team {
  perspective: 1450px;
  gap: clamp(1.1rem, 2vw, 1.55rem) !important;
}

.team-section-float .team-float-card {
  position: relative;
  isolation: isolate;
  transform-style: preserve-3d;
  border: 1px solid rgba(47, 117, 181, .18) !important;
  border-top: 3px solid rgba(47, 117, 181, .68) !important;
  border-radius: 26px !important;
  background:
    linear-gradient(165deg, rgba(255,255,255,.99), rgba(246,250,254,.98)) padding-box,
    linear-gradient(135deg, rgba(47,117,181,.34), rgba(230,126,34,.26)) border-box !important;
  box-shadow: var(--rl-v17-card-shadow) !important;
  overflow: hidden !important;
  will-change: transform;
  transition:
    transform .42s cubic-bezier(.2,.8,.2,1),
    box-shadow .38s ease,
    border-color .38s ease,
    filter .38s ease !important;
}

/* Acento de marca luminoso y sutil, sin invadir las fotografías. */
.team-section-float .team-float-card::after {
  content: "";
  position: absolute;
  inset: -1px;
  pointer-events: none;
  z-index: 4;
  border-radius: inherit;
  background:
    radial-gradient(circle 170px at 12% 8%, rgba(47,117,181,.11), transparent 68%),
    radial-gradient(circle 180px at 92% 94%, rgba(230,126,34,.08), transparent 72%);
  opacity: .9;
  mix-blend-mode: multiply;
}

.team-section-float .founder-image-wrap {
  position: relative;
  transform: translateZ(16px);
  border-radius: 23px 23px 0 0 !important;
  box-shadow: inset 0 -1px 0 rgba(23,54,93,.08);
}

.team-section-float .founder-image-wrap::after {
  height: 48% !important;
  background: linear-gradient(to top, rgba(8,29,51,.76), rgba(8,29,51,.24) 42%, transparent 100%) !important;
}

.team-section-float .founder-img {
  transition: transform .65s cubic-bezier(.2,.8,.2,1), filter .42s ease !important;
}

.team-section-float .founder-body {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  min-height: 190px;
  padding: 1.2rem 1.22rem 1.35rem !important;
  transform: translateZ(12px);
}

.team-section-float .founder-name {
  color: var(--rl-v17-ink) !important;
  font-size: clamp(1.12rem, 1.65vw, 1.42rem) !important;
  font-weight: 800 !important;
  line-height: 1.14 !important;
  margin-bottom: .35rem !important;
}

.team-section-float .founder-role {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  margin: 0 0 .72rem !important;
  padding: .38rem .62rem;
  border-radius: 10px;
  color: #15588f !important;
  background: linear-gradient(135deg, rgba(47,117,181,.10), rgba(47,117,181,.045));
  border: 1px solid rgba(47,117,181,.13);
  font-size: .79rem !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
}

.team-section-float .founder-bio {
  margin: 0 !important;
  color: #596a7f !important;
  font-size: .89rem !important;
  line-height: 1.65 !important;
  font-weight: 500;
}

.team-section-float .founder-badge {
  background: rgba(10, 43, 75, .82) !important;
  border: 1px solid rgba(255,255,255,.24) !important;
  box-shadow:
    0 10px 24px rgba(7,35,62,.22),
    inset 0 1px 0 rgba(255,255,255,.16) !important;
  font-weight: 800 !important;
}

/* Pequeños acentos por tarjeta, siempre dentro de la paleta de marca. */
.team-section-float .team-float-card:nth-child(1) { border-top-color: rgba(23,54,93,.82) !important; }
.team-section-float .team-float-card:nth-child(2) { border-top-color: rgba(47,117,181,.82) !important; }
.team-section-float .team-float-card:nth-child(3) { border-top-color: rgba(35,102,159,.76) !important; }
.team-section-float .team-float-card:nth-child(4) { border-top-color: rgba(230,126,34,.78) !important; }

/* --------------------------------------------------------------------------
   Tarjetas globales: más profundidad visual y sensación de producto premium.
   Se limita a tarjetas visibles; no afecta formularios ni estructura funcional.
   -------------------------------------------------------------------------- */
:where(
  .program-card--accordion,
  .program-card,
  .service-card,
  .sector-card,
  .content-card,
  .resource-card,
  .editorial-card,
  .pillar-card,
  .dual-route-card,
  .eng-highlight-card,
  .info-box-card,
  .advisor-result-card,
  .incompany-card,
  .contact-map-card,
  .gallery-card
) {
  position: relative;
  isolation: isolate;
  transform-style: preserve-3d;
  border-color: rgba(47,117,181,.14) !important;
  box-shadow:
    0 20px 46px rgba(8,37,66,.095),
    0 5px 16px rgba(47,117,181,.045),
    inset 0 1px 0 rgba(255,255,255,.96) !important;
  transition:
    transform .38s cubic-bezier(.2,.8,.2,1),
    box-shadow .38s ease,
    border-color .32s ease,
    filter .32s ease !important;
}

/* Programas V16: conservar la información y mejorar el relieve sin recuperar textos redundantes. */
.program-card--accordion {
  border-radius: 26px !important;
  background:
    linear-gradient(168deg, rgba(255,255,255,.99), rgba(247,250,254,.98)) padding-box,
    linear-gradient(135deg, rgba(47,117,181,.28), rgba(230,126,34,.19)) border-box !important;
  border: 1px solid transparent !important;
  box-shadow:
    0 24px 56px rgba(7,35,64,.11),
    0 7px 18px rgba(47,117,181,.055),
    -7px 10px 22px rgba(230,126,34,.035),
    inset 0 1px 0 rgba(255,255,255,.98) !important;
}

.program-card--accordion .program-card-title {
  color: #14263d !important;
  font-weight: 800 !important;
}

.program-card--accordion .program-card-summary {
  color: #586b82 !important;
  font-weight: 500 !important;
}

.program-card--accordion .program-disclosure {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 8px 20px rgba(23,54,93,.045) !important;
}

.program-card--accordion .program-card-footer .btn {
  box-shadow: 0 10px 22px rgba(8,48,85,.09) !important;
}

@media (hover:hover) and (pointer:fine) {
  .team-section-float .team-float-card:hover {
    transform: perspective(1200px) translateY(-13px) rotateX(1.4deg) rotateY(-1.2deg) scale(1.012) !important;
    border-color: rgba(47,117,181,.34) !important;
    box-shadow:
      0 38px 82px rgba(6,35,63,.20),
      -12px 18px 34px rgba(230,126,34,.065),
      12px 18px 38px rgba(47,117,181,.09),
      inset 0 1px 0 rgba(255,255,255,.98) !important;
    filter: saturate(1.035);
  }

  .team-section-float .team-float-card:hover .founder-img {
    transform: scale(1.055) !important;
    filter: saturate(1.04) contrast(1.025) !important;
  }

  :where(
    .program-card--accordion,
    .program-card,
    .service-card,
    .sector-card,
    .content-card,
    .resource-card,
    .editorial-card,
    .pillar-card,
    .dual-route-card,
    .eng-highlight-card,
    .info-box-card,
    .advisor-result-card,
    .incompany-card,
    .contact-map-card,
    .gallery-card
  ):hover {
    transform: perspective(1200px) translateY(-9px) rotateX(.8deg) scale(1.006) !important;
    border-color: rgba(47,117,181,.29) !important;
    box-shadow:
      0 34px 76px rgba(6,35,63,.16),
      -10px 15px 30px rgba(230,126,34,.05),
      11px 16px 34px rgba(47,117,181,.075),
      inset 0 1px 0 rgba(255,255,255,.98) !important;
  }

  .program-card--accordion:hover {
    transform: perspective(1200px) translateY(-10px) rotateX(.8deg) scale(1.008) !important;
  }
}

/* Responsive: la estética se conserva sin inclinaciones que dificulten la lectura. */
@media (max-width: 1024px) {
  .team-section-float .school-grid-team {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .team-section-float .team-float-card,
  .program-card--accordion {
    box-shadow:
      0 20px 44px rgba(7,35,64,.11),
      0 5px 14px rgba(47,117,181,.05),
      inset 0 1px 0 rgba(255,255,255,.96) !important;
  }
}

@media (max-width: 760px) {
  .team-section-float .school-grid-team {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .team-section-float .team-float-card,
  :where(
    .program-card--accordion,.program-card,.service-card,.sector-card,.content-card,
    .resource-card,.editorial-card,.pillar-card,.dual-route-card,.eng-highlight-card,
    .info-box-card,.advisor-result-card,.incompany-card,.contact-map-card,.gallery-card
  ) {
    transform: none !important;
    border-radius: 22px !important;
  }

  .team-section-float .founder-body {
    min-height: 0;
  }

  .team-section-float .founder-role {
    font-size: .77rem !important;
  }

  .team-section-float .founder-bio {
    font-size: .88rem !important;
    line-height: 1.62 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .team-section-float .team-float-card,
  .program-card--accordion,
  .program-card,
  .service-card,
  .sector-card,
  .content-card,
  .resource-card,
  .editorial-card,
  .pillar-card,
  .dual-route-card,
  .eng-highlight-card,
  .info-box-card,
  .advisor-result-card,
  .incompany-card,
  .contact-map-card,
  .gallery-card {
    transform: none !important;
  }
}

/* ========================================================================== 
   V18 — RESPONSIVE PREMIUM: TARJETAS SIN RECORTES + PROGRAMAS ESTABLES + MODALES PDF
   Objetivos:
   1) Ninguna descripción importante se corta con "...".
   2) Las tarjetas de Programas no se estiran cuando una ficha se despliega.
   3) El detalle del programa dispone de ancho real para leer público/duración/modalidad.
   4) Todos los modales y visores quedan por encima del header fijo y dentro del viewport.
   5) Se mantiene la estética 3D de marca sin comprometer legibilidad en móvil.
   ========================================================================== */

/* ---------- TEXTO COMPLETO EN TARJETAS ---------- */
.program-card-summary,
.program-summary,
.team-section-float .founder-bio,
.service-card .service-desc,
.sector-card-desc,
.blog-card-excerpt,
.blog-excerpt-preview {
  display: block !important;
  -webkit-line-clamp: unset !important;
  line-clamp: unset !important;
  -webkit-box-orient: initial !important;
  overflow: visible !important;
  text-overflow: clip !important;
  max-height: none !important;
  white-space: normal !important;
}

/* El contenido textual crece de forma natural; nada queda atrapado por alturas fijas. */
.team-section-float .founder-body,
.program-card--accordion .program-card-header,
.program-card--accordion,
.program-card,
.service-card,
.sector-card,
.blog-card,
.resource-card,
.content-card {
  height: auto !important;
  max-height: none !important;
}

.team-section-float .founder-body {
  min-height: 0 !important;
}

.team-section-float .founder-bio {
  font-size: clamp(.86rem, .92vw, .94rem) !important;
  line-height: 1.65 !important;
}

/* ---------- CATÁLOGO DE PROGRAMAS: REJILLA PREMIUM SIN DISTORSIÓN ---------- */
.programs-grid,
#programs-container {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(1.25rem, 2vw, 1.75rem) !important;
  align-items: start !important;
  grid-auto-flow: row !important;
  grid-auto-rows: auto !important;
}

.program-card--accordion {
  align-self: start !important;
  min-width: 0 !important;
  width: 100% !important;
  min-height: 0 !important;
  padding: clamp(1.25rem, 1.65vw, 1.55rem) !important;
  gap: 1rem !important;
  overflow: hidden !important;
}

.program-card--accordion .program-card-header {
  display: grid !important;
  align-content: start !important;
  gap: .72rem !important;
  min-width: 0 !important;
}

.program-card--accordion .program-badges-row {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: .48rem !important;
  min-width: 0 !important;
}

.program-card--accordion .category-tag,
.program-card--accordion .status-badge {
  max-width: 100% !important;
  white-space: normal !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  line-height: 1.25 !important;
}

.program-card--accordion .program-card-title {
  min-height: 0 !important;
  font-size: clamp(1.26rem, 1.55vw, 1.52rem) !important;
  line-height: 1.22 !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

.program-card--accordion .program-card-summary {
  min-height: 0 !important;
  margin: 0 !important;
  color: #556a82 !important;
  font-size: clamp(.92rem, .95vw, .98rem) !important;
  line-height: 1.65 !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

/* El desplegable ocupa todo el ancho; abierto crece solo su tarjeta, no toda la fila. */
.program-disclosure {
  width: 100% !important;
  min-width: 0 !important;
  margin-top: .2rem !important;
}

.program-disclosure > summary {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 64px !important;
  display: flex !important;
  align-items: center !important;
  padding: .86rem .95rem !important;
  cursor: pointer !important;
}

.program-disclosure .rl-disclosure-label {
  min-width: 0 !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  gap: .74rem !important;
  white-space: normal !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  font-size: .91rem !important;
  line-height: 1.42 !important;
}

.program-disclosure-panel {
  min-width: 0 !important;
  padding: .28rem 1rem 1.05rem !important;
}

.program-meta-list--compact .meta-row {
  display: grid !important;
  grid-template-columns: minmax(118px, .78fr) minmax(0, 1.45fr) !important;
  align-items: start !important;
  gap: .9rem !important;
  min-width: 0 !important;
}

.program-meta-list--compact .meta-label,
.program-meta-list--compact .meta-value {
  min-width: 0 !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  white-space: normal !important;
}

.program-meta-list--compact .meta-label {
  display: inline-flex !important;
  align-items: flex-start !important;
  gap: .38rem !important;
  font-size: .80rem !important;
}

.program-meta-list--compact .meta-value {
  font-size: .87rem !important;
  line-height: 1.58 !important;
  color: #52657c !important;
}

.program-insight-grid {
  min-width: 0 !important;
}

.program-insight,
.program-insight p,
.program-insight-label {
  min-width: 0 !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

.program-card-footer {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr) !important;
  gap: .75rem !important;
  margin-top: .12rem !important;
  align-items: stretch !important;
}

.program-card-footer .btn {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 52px !important;
  height: auto !important;
  padding: .72rem .76rem !important;
  white-space: normal !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  text-align: center !important;
}

/* Refuerzo 3D estable: sin inclinación agresiva que deforme tipografía. */
@media (hover:hover) and (pointer:fine) {
  .program-card--accordion:hover {
    transform: translateY(-8px) scale(1.004) !important;
    box-shadow:
      0 36px 78px rgba(6,35,63,.17),
      -10px 16px 30px rgba(230,126,34,.055),
      10px 17px 34px rgba(47,117,181,.075),
      inset 0 1px 0 rgba(255,255,255,.98) !important;
  }
}

/* ---------- MODALES / PDF: SIEMPRE POR ENCIMA DEL HEADER FIJO ---------- */
.modal-overlay,
.lightbox-overlay,
.program-pdf-modal,
.document-pdf-modal {
  z-index: 100050 !important;
}

.modal-overlay,
.lightbox-overlay,
.program-pdf-modal {
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  min-height: 100vh !important;
  padding: clamp(.8rem, 2vw, 1.5rem) !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}

.modal-container,
.program-pdf-modal__container,
.document-pdf-modal__container {
  max-width: calc(100vw - clamp(1rem, 4vw, 3rem)) !important;
  max-height: calc(100dvh - clamp(1rem, 4vw, 3rem)) !important;
  margin: 0 auto !important;
  transform: none !important;
}

.program-pdf-modal__container {
  width: min(1160px, calc(100vw - clamp(1rem, 4vw, 3rem))) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

.program-pdf-modal__header {
  position: relative !important;
  flex: 0 0 auto !important;
  padding: .95rem 1.1rem !important;
  gap: .8rem !important;
  min-width: 0 !important;
}

.program-pdf-modal__header > div {
  min-width: 0 !important;
}

.program-pdf-modal__header h3 {
  max-width: 100% !important;
  margin: .34rem 0 0 !important;
  font-size: clamp(1.08rem, 1.75vw, 1.46rem) !important;
  line-height: 1.25 !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

.program-pdf-modal__body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: auto !important;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding: 1rem 1.1rem 1.2rem !important;
}

.program-pdf-modal__footer {
  position: relative !important;
  flex: 0 0 auto !important;
  padding: .82rem 1.1rem calc(.82rem + env(safe-area-inset-bottom)) !important;
  box-shadow: 0 -10px 28px rgba(9,39,68,.055) !important;
}

.program-pdf-viewer {
  width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  border-radius: 18px !important;
}

.program-pdf-viewer__toolbar {
  min-width: 0 !important;
  flex-wrap: wrap !important;
  padding: .72rem .86rem !important;
}

.program-pdf-viewer__toolbar > span {
  min-width: 0 !important;
  flex: 1 1 210px !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

.program-pdf-viewer__toolbar .btn {
  flex: 0 0 auto !important;
  min-height: 40px !important;
  padding: .55rem .82rem !important;
}

.program-pdf-frame {
  width: 100% !important;
  max-width: 100% !important;
  height: clamp(440px, 58dvh, 680px) !important;
  min-height: 0 !important;
  border: 0 !important;
  display: block !important;
  background: #fff !important;
}

.program-modal-info-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-items: start !important;
}

/* Los modales genéricos tampoco pueden quedar debajo del header. */
.modal-container {
  overflow: auto !important;
  overscroll-behavior: contain;
}

/* ---------- RESPONSIVE TABLET ---------- */
@media (max-width: 1120px) {
  .programs-grid,
  #programs-container {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .program-card--accordion .program-card-title {
    font-size: clamp(1.18rem, 2vw, 1.42rem) !important;
  }
}

@media (max-width: 820px) {
  .program-meta-list--compact .meta-row {
    grid-template-columns: 1fr !important;
    gap: .3rem !important;
  }

  .program-card-footer {
    grid-template-columns: 1fr !important;
  }

  .program-modal-info-grid {
    grid-template-columns: 1fr !important;
  }

  .program-pdf-frame {
    height: clamp(390px, 54dvh, 590px) !important;
  }
}

/* ---------- RESPONSIVE MÓVIL ---------- */
@media (max-width: 680px) {
  .programs-grid,
  #programs-container {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 1rem !important;
  }

  .program-card--accordion {
    padding: 1.05rem !important;
    border-radius: 22px !important;
  }

  .program-card--accordion .program-card-title {
    font-size: 1.18rem !important;
    line-height: 1.24 !important;
  }

  .program-card--accordion .program-card-summary {
    font-size: .92rem !important;
    line-height: 1.6 !important;
  }

  .program-disclosure > summary {
    min-height: 58px !important;
    padding: .72rem .75rem !important;
  }

  .program-disclosure .rl-disclosure-label {
    font-size: .86rem !important;
    gap: .62rem !important;
  }

  .program-disclosure .rl-disclosure-icon {
    width: 32px !important;
    height: 32px !important;
    flex-basis: 32px !important;
  }

  .program-disclosure-panel {
    padding-inline: .78rem !important;
  }

  .modal-overlay,
  .lightbox-overlay,
  .program-pdf-modal {
    padding: max(.35rem, env(safe-area-inset-top)) .35rem max(.35rem, env(safe-area-inset-bottom)) !important;
    align-items: flex-end !important;
  }

  .program-pdf-modal__container,
  .modal-container {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 96dvh !important;
    border-radius: 22px 22px 0 0 !important;
  }

  .program-pdf-modal__header {
    padding: .82rem .88rem !important;
  }

  .program-pdf-modal__close {
    width: 40px !important;
    height: 40px !important;
    border-radius: 12px !important;
  }

  .program-pdf-modal__body {
    padding: .72rem !important;
  }

  .program-pdf-viewer {
    border-radius: 14px !important;
  }

  .program-pdf-viewer__toolbar {
    align-items: stretch !important;
  }

  .program-pdf-viewer__toolbar .btn {
    width: 100% !important;
    justify-content: center !important;
  }

  .program-pdf-frame {
    height: 52dvh !important;
    min-height: 350px !important;
  }

  .program-pdf-modal__footer {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: .55rem !important;
  }

  .program-pdf-modal__footer .btn {
    width: 100% !important;
  }
}

@media (max-width: 420px) {
  .program-pdf-frame {
    height: 48dvh !important;
    min-height: 320px !important;
  }

  .program-pdf-modal__header h3 {
    font-size: 1rem !important;
  }
}

/* Cualquier tarjeta con contenido dinámico conserva el texto dentro de su ancho. */
:where(
  .program-card,.program-card--accordion,.team-float-card,.service-card,.sector-card,
  .blog-card,.resource-card,.content-card,.editorial-card,.pillar-card,.dual-route-card,
  .eng-highlight-card,.info-box-card,.advisor-result-card,.incompany-card,.gallery-card
) :where(h2,h3,h4,p,li,span,strong,a,button) {
  max-width: 100%;
  overflow-wrap: normal;
  word-break: normal;
}

/* ========================================================================== 
   AJUSTE FINAL DE MULTIMEDIA REAL — VIDEO + FOTOGRAFÍAS (2026-10)
   Mantiene la estética existente y corrige proporciones, recortes y respuesta
   en escritorio, tablet y móvil sin tocar formularios ni integraciones.
   ========================================================================== */

/* Video institucional: el archivo final está preparado en 4:3 con fondo
   desenfocado y el video vertical original centrado, sin estiramientos. */
.hero-visual {
  position: relative;
  min-width: 0;
}

.hero-image-wrapper {
  width: 100%;
  aspect-ratio: 4 / 3;
  min-height: 0;
  background: #081d2e;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
  isolation: isolate;
}

.hero-image-wrapper > video.hero-image,
.hero-image-wrapper > .hero-video {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover !important;
  object-position: 50% 50% !important;
  background: #081d2e;
}

/* El propósito institucional queda flotando sobre el área visual en pantallas
   amplias, pero fuera del contenedor de recorte del video. */
.hero-visual > .hero-badge-floating {
  left: auto;
  right: 18px;
  bottom: 18px;
  width: min(320px, calc(100% - 36px));
  z-index: 3;
  pointer-events: none;
}

/* Las fotografías reales tienen relación nativa 3:2. Mantenerla evita
   deformaciones y conserva el encuadre original del fotógrafo. */
.gallery-card {
  padding: 0 !important;
  overflow: hidden;
}

.gallery-card > img {
  display: block;
  width: 100% !important;
  height: auto !important;
  max-width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover !important;
  object-position: center center !important;
  flex: 0 0 auto;
}

.gallery-card .gallery-info {
  min-width: 0;
}

/* Evita saltos o deformaciones si una imagen tarda en cargar. */
.gallery-card > img,
.hero-image-wrapper > video.hero-image {
  contain: paint;
}

@media (max-width: 1024px) {
  .hero-image-wrapper > video.hero-image,
  .hero-image-wrapper > .hero-video {
    height: 100% !important;
  }
}

@media (max-width: 820px) {
  .hero-visual {
    max-width: 680px;
    margin-inline: auto;
  }

  /* En tablet/móvil el texto institucional pasa debajo del video para no
     ocultar subtítulos ni rostros del material real. */
  .hero-visual > .hero-badge-floating {
    position: relative;
    inset: auto;
    width: 100%;
    max-width: none;
    margin-top: 0.85rem;
    border-radius: 16px;
    pointer-events: auto;
  }
}

@media (max-width: 600px) {
  .hero-image-wrapper {
    border-radius: 20px;
  }

  .hero-visual > .hero-badge-floating {
    margin-top: 0.7rem;
    padding: 0.9rem 1rem;
  }

  .gallery-card > img {
    aspect-ratio: 3 / 2;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-image-wrapper:hover .hero-image {
    transform: none !important;
  }
}


/* ==========================================================================
   V9 — MULTIMEDIA REAL: SONIDO DEL VIDEO + FOTO EN IDEAS Y RECURSOS
   - Mantiene el diseño existente.
   - El video conserva autoplay silencioso para cumplir las políticas del
     navegador; el botón visible permite activar audio con un solo clic.
   - Sustituye el embed externo no disponible por una fotografía real.
   ========================================================================== */

.hero-image-wrapper {
  position: relative;
}

.hero-video-sound-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-height: 44px;
  padding: .72rem 1rem;
  border: 1px solid rgba(255,255,255,.34);
  border-radius: 999px;
  background: rgba(7, 28, 45, .82);
  color: #fff;
  box-shadow: 0 12px 28px rgba(0,0,0,.24);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font: inherit;
  font-size: .88rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .01em;
  cursor: pointer;
  transition: transform .22s ease, background-color .22s ease, box-shadow .22s ease;
}

.hero-video-sound-btn:hover {
  transform: translateY(-2px);
  background: rgba(10, 50, 79, .96);
  box-shadow: 0 16px 34px rgba(0,0,0,.28);
}

.hero-video-sound-btn:focus-visible {
  outline: 3px solid rgba(255, 137, 39, .95);
  outline-offset: 3px;
}

.hero-video-sound-btn.is-sound-on {
  background: rgba(15, 106, 70, .92);
}

.hero-video-sound-btn i {
  flex: 0 0 auto;
  font-size: 1rem;
}

.video-spotlight-photo {
  isolation: isolate;
  background: #0b1e30;
}

.video-spotlight-photo > img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 48%;
  transform: scale(1.002);
}

.video-spotlight-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(5,22,36,.02) 34%, rgba(5,22,36,.78) 100%);
}

.video-spotlight-photo-overlay {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 20px;
  z-index: 2;
  display: grid;
  gap: .45rem;
  color: #fff;
  text-shadow: 0 2px 16px rgba(0,0,0,.28);
}

.video-spotlight-photo-kicker {
  width: max-content;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .45rem .68rem;
  border-radius: 999px;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: .78rem;
  font-weight: 800;
}

.video-spotlight-photo-overlay strong {
  max-width: 30rem;
  font-size: clamp(1.15rem, 2vw, 1.55rem);
  line-height: 1.18;
}

@media (max-width: 820px) {
  .hero-video-sound-btn {
    top: 12px;
    right: 12px;
    min-height: 42px;
    padding: .68rem .85rem;
    font-size: .82rem;
  }

  .video-spotlight-photo-overlay {
    left: 16px;
    right: 16px;
    bottom: 15px;
  }
}

@media (max-width: 520px) {
  .hero-video-sound-btn span { display: none; }
  .hero-video-sound-btn { width: 44px; height: 44px; padding: 0; }
  .video-spotlight-photo-kicker { font-size: .72rem; }
  .video-spotlight-photo-overlay strong { font-size: 1.08rem; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-video-sound-btn { transition: none; }
}

/* ========================================================================== 
   V10 — PROPÓSITO INSTITUCIONAL SIN TAPAR EL VIDEO
   El propósito se presenta como una tarjeta editorial debajo del video.
   Así quedan libres el rostro, subtítulos y controles nativos del reproductor.
   No modifica navegación, formularios, WhatsApp, redes ni integraciones.
   ========================================================================== */
.hero-visual {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.hero-visual > .hero-badge-floating {
  position: relative !important;
  inset: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  width: 100% !important;
  max-width: none !important;
  margin: 16px 0 0 !important;
  padding: 1rem 1.2rem !important;
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: center;
  column-gap: 1.15rem;
  row-gap: .25rem;
  background: linear-gradient(135deg, rgba(7, 28, 45, .98), rgba(18, 55, 86, .96)) !important;
  border: 1px solid rgba(255,255,255,.13) !important;
  border-left: 5px solid var(--color-accent, #f47b20) !important;
  border-radius: 18px !important;
  box-shadow: 0 16px 36px rgba(7, 28, 45, .18) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  pointer-events: auto !important;
  transform: none !important;
  z-index: 2;
}

.hero-visual > .hero-badge-floating .floating-badge-title {
  margin: 0 !important;
  white-space: nowrap;
  color: #9ed1ff !important;
  font-size: .78rem !important;
  font-weight: 800 !important;
  letter-spacing: .085em !important;
  line-height: 1.2;
}

.hero-visual > .hero-badge-floating .floating-badge-desc {
  margin: 0 !important;
  color: #fff !important;
  font-size: clamp(.92rem, 1.15vw, 1.02rem) !important;
  line-height: 1.45 !important;
  font-weight: 600;
}

@media (max-width: 980px) {
  .hero-visual > .hero-badge-floating {
    grid-template-columns: 1fr;
    align-items: start;
    margin-top: 13px !important;
  }

  .hero-visual > .hero-badge-floating .floating-badge-title {
    white-space: normal;
  }
}

@media (max-width: 600px) {
  .hero-visual > .hero-badge-floating {
    margin-top: 10px !important;
    padding: .9rem 1rem !important;
    border-radius: 15px !important;
    row-gap: .35rem;
  }

  .hero-visual > .hero-badge-floating .floating-badge-title {
    font-size: .72rem !important;
  }

  .hero-visual > .hero-badge-floating .floating-badge-desc {
    font-size: .9rem !important;
  }
}


/* ===============================================================
  IDENTIDAD NARANJA + AZUL / EQUIPO EN INICIO 2026
  - Logos PNG verdaderamente transparentes; no agregar fondo blanco.
  - Respeta el diseño flotante original de las cuatro fichas del equipo.
  - Mantiene jerarquía y legibilidad del menú incluso con nombres extendidos.
=============================================================== */
.site-header .brand-logo-img, .brand-logo-img,
.site-footer .footer-logo-img, .footer-logo-img {
  background: transparent !important;
  object-fit: contain !important;
  display: block;
}
#equipo.team-section-float { scroll-margin-top: 96px; }
#equipo .school-grid-team { align-items: stretch; }
#equipo .founder-card { min-width: 0; }
#equipo .founder-body { min-width: 0; }
#equipo .founder-name, #equipo .founder-role, #equipo .founder-bio {
  overflow-wrap: anywhere;
}
@media (max-width: 1024px) {
  .main-navigation .nav-menu .nav-link { white-space: normal; text-align: center; }
}
@media (max-width: 760px) {
  #equipo .school-grid-team { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
  #equipo .team-float-card { height: auto !important; }
  #equipo .founder-bio { display: block !important; -webkit-line-clamp: unset !important; }
}

/* Header sobre fondos claros y oscuros, sin caja blanca detrás del logotipo. */
.site-header .brand-logo .brand-logo-dark { display: none !important; }
.site-header .brand-logo .brand-logo-light { display: block !important; }
body.has-dark-hero .site-header:not(.scrolled):not(.v8-condensed) .brand-logo {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
body.has-dark-hero .site-header:not(.scrolled):not(.v8-condensed) .brand-logo .brand-logo-light {
  display: none !important;
}
body.has-dark-hero .site-header:not(.scrolled):not(.v8-condensed) .brand-logo .brand-logo-dark {
  display: block !important;
}


/* V18 — tipografía unificada + corrección visual de imágenes y cards */
html, body, button, input, select, textarea {
  font-family: var(--font-main) !important;
}
img {
  image-rendering: auto;
}
.hero-visual img,
.blog-feature-media img,
.gallery-card img,
.founder-img,
.resource-card img,
.editorial-card img {
  object-fit: cover;
  object-position: center;
}
.program-card--accordion .program-meta-list {
  margin-top: .25rem;
}
.program-card--accordion .program-meta-list .meta-row,
.program-card--accordion .program-details li {
  line-height: 1.6 !important;
}
.program-card--accordion .rl-disclosure-hint {
  font-size:.84rem;
  font-weight:700;
  color:var(--color-secondary);
}


/* ==========================================================================
   V19 — Escuela Red Líder: galería fotográfica 4:3 y catálogo cursos/programas
   Conserva estilos institucionales, header, footer, formularios y visores PDF.
   ========================================================================== */
/* Las seis imágenes de la galería tienen formato 4:3. Evita recortes de rostros y pantallas. */
.gallery-card > img[src*="/galeria-escuela/"] {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 4 / 3 !important;
  object-fit: contain !important;
  object-position: 50% 50% !important;
  background: #10283b;
}

.rl-learning-difference { padding: clamp(3.25rem, 6vw, 5rem) 0; background: #f5f8fc; }
.rl-learning-difference .section-header { margin-bottom: 2rem; }
.rl-learning-difference__grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: clamp(1rem, 2vw, 1.5rem); }
.rl-learning-kind {
  background: #fff; border: 1px solid rgba(18,58,99,.13); border-radius: 24px;
  padding: clamp(1.4rem, 2.7vw, 2.25rem); min-width: 0; height: 100%;
  box-shadow: 0 20px 48px rgba(8,40,78,.085); transition: transform .28s ease, box-shadow .28s ease;
}
.rl-learning-kind--course { border-top: 5px solid #ef792b; }
.rl-learning-kind--program { border-top: 5px solid #164e80; }
.rl-learning-kind__icon { display:grid;place-items:center;width:58px;height:58px;border-radius:16px;color:#fff;background:linear-gradient(140deg,#123c69,#2867a0);font-size:1.45rem;margin-bottom:1rem; }
.rl-learning-kind--course .rl-learning-kind__icon { background:linear-gradient(140deg,#dc651e,#f6933d); }
.rl-learning-kind__eyebrow { display:inline-block;color:#a64c12;background:#fff1e6;font-weight:800;font-size:.78rem;padding:.35rem .65rem;border-radius:100px;letter-spacing:.02em;margin-bottom:.8rem; }
.rl-learning-kind--program .rl-learning-kind__eyebrow { color:#194c79;background:#e6f1fa; }
.rl-learning-kind h3 { font-size: clamp(1.35rem,2.3vw,1.7rem);line-height:1.3;margin:0 0 .75rem;color:#173657; }
.rl-learning-kind p { color:#52657a;line-height:1.75;margin-bottom:1.15rem; }
.rl-learning-kind__link { display:inline-flex;align-items:center;gap:.65rem;font-weight:800;color:#1b598f;text-decoration:none; }
.rl-learning-kind__link:hover,.rl-learning-kind__link:focus-visible { color:#b7541d; }
@media(hover:hover) and (pointer:fine){ .rl-learning-kind:hover {transform:translateY(-6px);box-shadow:0 26px 55px rgba(8,40,78,.14);} }
.rl-course-tag { display:inline-flex;align-items:center;gap:.4rem;border-radius:100px;background:#e9f3fc;color:#164d7b;font-weight:800;font-size:.75rem;line-height:1.25;padding:.4rem .7rem;white-space:nowrap; }
.program-card-footer { display:flex;flex-wrap:wrap;gap:.65rem;align-items:center; }
.program-card-footer .btn { flex: 1 1 auto;max-width:100%;min-width:0;white-space:normal;text-align:center;justify-content:center; }
#programs-empty-state { grid-column:1 / -1; text-align:center; padding:2rem 1rem; }
#programs-container .program-card[hidden] { display:none !important; }
.rl-programs-coming {padding:clamp(2.6rem,5vw,4.7rem) 0;background:linear-gradient(180deg,#f6f9fd,#fff);scroll-margin-top:95px;}
.rl-programs-coming__panel {display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.85fr);gap:clamp(1.2rem,3vw,3.5rem);align-items:center;overflow:hidden;border:1px solid rgba(20,61,104,.15);border-radius:26px;background:#fff;padding:clamp(1.4rem,3.7vw,3rem);box-shadow:0 25px 65px rgba(9,40,79,.1);}
.rl-programs-coming__badge { display:inline-flex; align-items:center;gap:.4rem;border-radius:100px;background:#fff0e4;color:#aa4e1b;padding:.48rem .8rem;font-size:.8rem;font-weight:800;margin-bottom:1.1rem; }
.rl-programs-coming__copy h2 { color:#17395f; font-size:clamp(1.65rem,3vw,2.35rem);line-height:1.2;margin:.25rem 0 1rem; }
.rl-programs-coming__copy p {line-height:1.76;color:#53667b;margin:0 0 .85rem;}
.rl-programs-coming__copy .btn {margin-top:1rem;}
.rl-programs-coming__visual {padding:clamp(.7rem,2vw,1.5rem);border-radius:22px;background:linear-gradient(155deg,#e7f1fb,#fff7ef);display:flex;flex-direction:column;align-items:stretch;}
.rl-programs-coming__step {display:flex;align-items:center;gap:.65rem;min-width:0;padding:1rem .85rem;border-radius:15px;background:#fff;font-weight:700;color:#214564;box-shadow:0 8px 20px rgba(16,54,94,.09);font-size:clamp(.77rem,1.6vw,.94rem);}
.rl-programs-coming__step span {color:#e56e20;font-weight:800;}
.rl-programs-coming__step > i { color:#236697;font-size:1.05rem; }
.rl-programs-coming__step--last { background:#153d64;color:#fff; }
.rl-programs-coming__step--last > i { color:#fa9446; }
.rl-programs-coming__link {text-align:center;padding:.38rem;color:#e56e20;}
@media(max-width:780px){.rl-learning-difference__grid,.rl-programs-coming__panel {grid-template-columns:minmax(0,1fr);} .rl-learning-kind{height:auto;} .rl-programs-coming__visual{max-width:100%;} }
@media(max-width:480px){.rl-learning-kind,.rl-programs-coming__panel{border-radius:19px;} .rl-learning-kind{padding:1.25rem;} .rl-course-tag{font-size:.72rem;} .program-card-footer{flex-direction:column;align-items:stretch;} .program-card-footer .btn{width:100%;} }
@media(prefers-reduced-motion:reduce){.rl-learning-kind{transition:none;} .rl-learning-kind:hover{transform:none;} }


/* ============================================================================
   V20 · CONTRASTE ADAPTATIVO AUTOMÁTICO (SIN JS NI CONTROLES)
   Ubicado AL FINAL para resolver las anteriores reglas de tema contradictorias.
   En claro conserva el diseño institucional; en oscuro usa una paleta legible.
   No cambia medidas, fuentes, posición, animaciones ni comportamiento.
   ============================================================================ */

:root {
  --rl-contrast-on-brand: #f7faff;
  --rl-contrast-brand-muted: #e0ebf8;
}

/* La cabecera y las pantallas PDF conservan su presentación clara original. */
.page-hero .page-hero-subtitle,
.page-hero .page-hero-description,
.page-hero .page-hero-lead,
.page-hero .hero-subtitle,
.page-hero .section-subtitle,
.page-hero :where(.breadcrumbs, .breadcrumb, .breadcrumb a) {
  color: var(--rl-contrast-brand-muted) !important;
  -webkit-text-fill-color: currentColor !important;
}

/* Previene títulos totalmente transparentes en ambos esquemas. */
:where(h1, h2, h3, h4, h5, h6, .section-title, .page-hero-title,
  .program-card-title, .service-card-title, .resource-card-title) {
  -webkit-text-fill-color: currentColor;
}



/* V20b · Paneles deliberadamente claros: texto oscuro incluso en tema oscuro.
   Se conservan sus fondos tal como venían en V19 (sin rediseñarlos). */


/* El naranja de botones de acción es el mismo en claro y oscuro. Se mejora
   SOLO el texto para superar el contraste de las antiguas letras blancas. */
:where(.btn-primary, .btn.btn-primary, .convocatoria-badge) {
  color: #10253c !important;
  -webkit-text-fill-color: currentColor !important;
}
/* Los botones con FONDO AZUL (p. ej., acciones específicas de la barra PDF)
   mantienen su texto blanco por contraste. */
:where(.program-pdf-modal__close, .document-pdf-modal__close,
  .program-pdf-viewer__toolbar, .document-pdf-modal__toolbar,
  .nav-link.active, .menu-toggle.active) {
  -webkit-text-fill-color: currentColor !important;
}

/* V20c · Ajustes verificados por contraste calculado de componentes concretos. */






/* V20d · Contraste AA reforzado también en tema claro: el naranja brillante
   sigue reservado para detalles gráficos; las palabras sobre blanco se oscurecen. */

/* V20 contrast fixes retained in institutional light palette. */

  html body main .section-label {
    color: #ae4d12 !important;
    -webkit-text-fill-color: currentColor !important;
  }
  html body main :is(.page-hero, .page-hero-banner, .manifesto-box,
    .corporate-section, .cta-banner, .hero-dark, .dark-section) .section-label {
    color: #ffc18a !important;
    -webkit-text-fill-color: currentColor !important;
  }
  html body .sectors-main-banner :is(.sectors-main-title,.sectors-main-desc) {
    color: #f2f7ff !important;
    -webkit-text-fill-color: currentColor !important;
  }
  html body .sectors-main-banner .sectors-main-desc {color:#d5e4f6!important;}



/* Botones naranja de marca: azul marino oscuro contrasta en ambos temas. */
html body :is(a.btn.btn-primary, button.btn.btn-primary,
  a.btn-primary, button.btn-primary, .convocatoria-badge) {
  color: #10253c !important;
  -webkit-text-fill-color: currentColor !important;
}



/* =======================================================================
   V21 · RED LÍDER | IDENTIDAD CLARA INSTITUCIONAL + CURSOR CORPORATIVO
   Decisión de diseño: mantener la misma paleta clara aunque Windows/macOS
   cambie su esquema de color. Sin toggle, cookies ni scripts de tema.
   ======================================================================= */
:root, html {
  color-scheme: light !important;
  --color-primary: #17365D;
  --color-primary-dark: #102A49;
  --color-secondary: #2867A3;
  --color-text-main: #17273A;
  --color-text-muted: #48596D;
  --color-bg-white: #FFFFFF;
  --color-bg-light: #F5F8FC;
  --rl-text: #17273A;
  --rl-text-muted: #48596D;
  --rl-link: #20598F;
  --rl-link-hover: #A7470D;
  --rl-cursor-navy: #17365D;
  --rl-cursor-orange: #F97316;
}
html, body { color-scheme: light !important; }
body, button, input, select, textarea { font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; }

/* Texto y estados del header, contrastados sobre cristal BLANCO. */
html body .site-header,
html body .site-header .header-inner {
  color: #17365D !important;
}
html body .site-header .nav-link:not(.active),
html body .site-header a.nav-link:not(.active),
html body.has-dark-hero .site-header:not(.scrolled):not(.v8-condensed) .nav-link:not(.active) {
  color: #17365D !important;
  -webkit-text-fill-color: #17365D !important;
  text-shadow: none !important;
}
html body .site-header .nav-link:not(.active):hover,
html body .site-header a.nav-link:not(.active):hover,
html body.has-dark-hero .site-header:not(.scrolled):not(.v8-condensed) .nav-link:not(.active):hover,
html body .site-header .nav-link:not(.active):focus-visible {
  background: #E5F1FC !important;
  color: #12395F !important;
  -webkit-text-fill-color: #12395F !important;
  box-shadow: 0 7px 16px rgba(15,47,84,.14) !important;
  text-shadow: none !important;
  text-decoration: none !important;
}
html body .site-header .nav-link.active,
html body .site-header a.nav-link.active,
html body .site-header .nav-link.active:hover,
html body .site-header .nav-link.active:focus-visible,
html body.has-dark-hero .site-header:not(.scrolled):not(.v8-condensed) .nav-link.active {
  background: linear-gradient(135deg, #123C67, #236FAD) !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  box-shadow: 0 8px 18px rgba(16,53,91,.23) !important;
  text-shadow: 0 1px 2px rgba(4,22,42,.12) !important;
}
/* Los iconos nunca dependen de la disponibilidad externa de Font Awesome. */
html body .site-header .social-tiktok,
html body .site-header a.social-tiktok {
  color: #15273B !important;
  -webkit-text-fill-color: #15273B !important;
  background: #FFFFFF !important;
  border-color: rgba(23,54,93,.14) !important;
}
html body .site-header .social-tiktok .rl-tiktok-svg {
  display: block;
  width: 20px;
  height: 20px;
  fill: currentColor;
  color: #15273B !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
  -webkit-text-fill-color: currentColor !important;
}
html body .site-header :is(.social-btn:hover,.social-btn:focus-visible) {
  background: #EBF4FF !important;
  border-color: #A9CDEB !important;
  box-shadow: 0 9px 21px rgba(17,60,103,.17) !important;
  opacity: 1 !important;
}
html body .site-header :is(.social-btn:hover,.social-btn:focus-visible) :is(i,svg) {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Mantener la tipografía institucional actual; reforzar peso y bordes sin
   cambiar fuentes externas ni el tamaño de los contenedores. */
:where(h1,h2,h3,h4,h5,h6,.card-title,.section-title,.page-title) {
  text-wrap: pretty;
  letter-spacing: -0.025em;
}
:where(.program-card,.service-card,.sector-card,.resource-card,.gallery-card,
       .founder-card,.editorial-card,.rl-learning-kind) {
  box-shadow: 0 9px 27px rgba(18,49,82,.09), 0 2px 7px rgba(18,49,82,.035);
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  :where(.program-card,.service-card,.sector-card,.resource-card,.gallery-card,
         .founder-card,.editorial-card,.rl-learning-kind):hover {
    box-shadow: 0 17px 39px rgba(18,49,82,.17), 0 3px 9px rgba(18,49,82,.065) !important;
  }
}
/* Solo elementos que pueden ser leídos: nunca volver texto transparente en hover. */
html body :where(.filter-btn,.contact-tab-btn,.rl-disclosure>summary,.menu-toggle,
  .btn,.button,button):hover,
html body :where(.filter-btn,.contact-tab-btn,.rl-disclosure>summary,.menu-toggle,
  .btn,.button,button):focus-visible {
  opacity: 1;
  visibility: visible;
  text-shadow: none;
}
html body :where(.filter-btn,.contact-tab-btn,.rl-disclosure>summary,.menu-toggle,
  .btn,.button,button):hover :is(span,small,strong,i),
html body :where(.filter-btn,.contact-tab-btn,.rl-disclosure>summary,.menu-toggle,
  .btn,.button,button):focus-visible :is(span,small,strong,i) {
  opacity: 1;
  visibility: visible;
}
:where(a,button,summary,input,textarea,select,[role="button"]):focus-visible {
  outline: 3px solid #2677B5 !important;
  outline-offset: 3px;
}
/* El contenido oscuro por decisión de marca (footer/heroes) continúa oscuro. */


/* ========================================================================== 
   V22 — RED LÍDER / CLARIDAD CORPORATIVA Y CURSOR NATIVO
   - Siempre tema claro, independientemente del sistema.
   - Cabecera clara con contraste real; evita azul oscuro sobre fondo oscuro.
   - Sombras y respuesta hover discretas; diseño original y JS intactos.
   - Cursor nativo, sin SVG, capas flotantes ni scripts de movimiento.
   ========================================================================== */
:root, html {
  color-scheme: light !important;
  --color-bg-white: #ffffff;
  --color-bg-light: #f5f8fc;
  --color-bg-card: #ffffff;
  --color-primary: #17365d;
  --color-primary-dark: #102a49;
  --color-text-main: #17273a;
  --color-text-muted: #4a5a6e;
  --rl-text: #17273a;
  --rl-text-muted: #4a5a6e;
  --rl-surface: #ffffff;
  --rl-bg: #f5f8fc;
  --rl-border: #dce5ef;
}
/* Si un navegador o una extensión añade data-theme=dark, la paleta sigue clara. */
html[data-theme="dark"], :root[data-theme="dark"] {
  color-scheme: light !important;
  --color-bg-white: #ffffff !important;
  --color-bg-light: #f5f8fc !important;
  --color-bg-card: #ffffff !important;
  --color-primary: #17365d !important;
  --color-primary-dark: #102a49 !important;
  --color-secondary: #2867a3 !important;
  --color-text-main: #17273a !important;
  --color-text-muted: #4a5a6e !important;
  --rl-text: #17273a !important;
  --rl-text-muted: #4a5a6e !important;
  --rl-surface: #ffffff !important;
  --rl-bg: #f5f8fc !important;
  --rl-border: #dce5ef !important;
}
html body { color-scheme: light !important; }

/* Encabezado claro en TODAS las páginas, incluidas las de hero azul oscuro.
   Se utiliza background (no background-color) para anular gradientes heredados. */
html body .site-header,
html body.has-dark-hero .site-header:not(.scrolled):not(.v8-condensed),
html body .site-header.scrolled,
html body .site-header.v8-condensed,
html body.nav-open .site-header {
  background: rgba(250,252,255,.975) !important;
  color: #123657 !important;
  border-bottom: 1px solid #dbe6f2 !important;
  box-shadow: 0 6px 25px rgba(9,43,76,.10), 0 1px 0 rgba(255,255,255,.98) inset !important;
  backdrop-filter: blur(15px) saturate(130%) !important;
  -webkit-backdrop-filter: blur(15px) saturate(130%) !important;
}
/* Logotipo original para superficies claras: no alterarlo ni crear rectángulos. */
html body.has-dark-hero .site-header:not(.scrolled):not(.v8-condensed) .brand-logo .brand-logo-light,
html body .site-header .brand-logo .brand-logo-light {
  display: block !important;
}
html body.has-dark-hero .site-header:not(.scrolled):not(.v8-condensed) .brand-logo .brand-logo-dark,
html body .site-header .brand-logo .brand-logo-dark {
  display: none !important;
}
html body.has-dark-hero .site-header:not(.scrolled):not(.v8-condensed) .brand-logo {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
/* Estados separados para garantizar que el texto nunca desaparezca al pasar el ratón. */
html body .site-header .main-navigation .nav-link,
html body.has-dark-hero .site-header:not(.scrolled):not(.v8-condensed) .main-navigation .nav-link {
  color: #153a61 !important;
  -webkit-text-fill-color: #153a61 !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  opacity: 1 !important;
  text-shadow: none !important;
  text-decoration: none !important;
  font-weight: 750 !important;
  transition: background-color .22s ease, color .22s ease, box-shadow .22s ease,
              transform .22s ease, border-color .22s ease !important;
}
html body .site-header .main-navigation .nav-link:hover,
html body .site-header .main-navigation .nav-link:focus-visible,
html body.has-dark-hero .site-header:not(.scrolled):not(.v8-condensed) .main-navigation .nav-link:hover,
html body.has-dark-hero .site-header:not(.scrolled):not(.v8-condensed) .main-navigation .nav-link:focus-visible {
  color: #0c416d !important;
  -webkit-text-fill-color: #0c416d !important;
  background: #e5f1ff !important;
  border-color: #b8d5ee !important;
  box-shadow: 0 8px 21px rgba(19,74,120,.15) !important;
  text-shadow: none !important;
  transform: translateY(-1px) !important;
  opacity: 1 !important;
}
html body .site-header .main-navigation .nav-link.active,
html body .site-header .main-navigation .nav-link.active:hover,
html body .site-header .main-navigation .nav-link.active:focus-visible,
html body.has-dark-hero .site-header:not(.scrolled):not(.v8-condensed) .main-navigation .nav-link.active,
html body.has-dark-hero .site-header:not(.scrolled):not(.v8-condensed) .main-navigation .nav-link.active:hover {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: linear-gradient(135deg, #124775 0%, #226ca7 100%) !important;
  border: 1px solid rgba(8,55,97,.24) !important;
  box-shadow: 0 9px 22px rgba(16,71,115,.23) !important;
  text-shadow: 0 1px 2px rgba(4,28,52,.22) !important;
  opacity: 1 !important;
}
html body .site-header .social-btn {
  opacity: 1 !important;
  background: #fff !important;
  border: 1px solid rgba(15,60,105,.13) !important;
  box-shadow: 0 4px 13px rgba(12,49,86,.10) !important;
}
html body .site-header .social-btn:hover,
html body .site-header .social-btn:focus-visible {
  background: #e9f3ff !important;
  box-shadow: 0 9px 20px rgba(16,68,115,.18) !important;
  transform: translateY(-2px) !important;
}
html body .site-header .social-tiktok svg { fill: #15273b !important; opacity: 1 !important; }

/* Se mantienen los fondos azul marino de secciones institucionales; modo claro
   significa sin inversión automática de tema, no eliminar los fondos de marca. */
:where(.program-card,.service-card,.sector-card,.blog-card,.resource-card,
       .gallery-card,.editorial-card,.founder-card,.team-float-card,
       .dual-route-card,.content-card,.rl-learning-kind) {
  box-shadow: 0 10px 30px rgba(12,51,88,.10), 0 2px 8px rgba(12,51,88,.035);
  transition: transform .26s cubic-bezier(.2,.8,.2,1),
              box-shadow .26s ease, border-color .26s ease !important;
}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  :where(.program-card,.service-card,.sector-card,.blog-card,.resource-card,
         .gallery-card,.editorial-card,.founder-card,.team-float-card,
         .dual-route-card,.content-card,.rl-learning-kind):hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 20px 43px rgba(12,51,88,.17),0 5px 12px rgba(12,51,88,.06) !important;
  }
}
/* No alterar relaciones de aspecto originales: imágenes contenidas, sin estiramiento. */
img { max-width:100%; }
:where(.gallery-card,.program-card,.sector-card,.service-card,.blog-card,.founder-card) img {
  max-width:100%;
  object-position:center center;
}
:where(.gallery-card,.program-card,.sector-card,.service-card,.blog-card,.founder-card,
       .rl-learning-kind, .rl-disclosure, .program-pdf-modal__container) {
  min-width:0;
}
:where(.section-title,.page-hero-title,.program-card-title,.resource-title,.founder-name) {
  overflow-wrap:break-word;
  text-wrap:balance;
}
/* Cursor estándar: flecha normal, mano en acciones y texto en formularios. */
html, body { cursor:auto !important; }
:where(a[href],button:not(:disabled),summary,[role="button"],.filter-btn) {
  cursor:pointer !important;
}
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]), textarea, [contenteditable="true"]) {
  cursor:text !important;
}
:where(button:disabled,input:disabled) { cursor:not-allowed !important; }
:where(a, button, summary, input, textarea, select):focus-visible {
  outline:3px solid #2677b5 !important;
  outline-offset:3px;
}
/* Menú táctil claro y del mismo contraste que el de escritorio. */
@media (max-width:1240px) {
  html body .site-header .main-navigation.open,
  html body.has-dark-hero .site-header .main-navigation.open {
    background:#fff !important;
    color:#17365d !important;
    border:1px solid #dce7f3 !important;
    box-shadow:0 22px 50px rgba(6,37,69,.20) !important;
    max-width:calc(100vw - 20px) !important;
    overflow-x:hidden;
  }
  html body .site-header .main-navigation.open .nav-link {
    width:100% !important;
    justify-content:flex-start !important;
    min-height:46px !important;
    text-align:left !important;
    white-space:normal;
  }
}
@media (max-width:600px) {
  .page-hero-title { font-size:clamp(1.9rem,8.2vw,2.9rem) !important; line-height:1.12 !important; }
  .page-hero-subtitle { font-size:clamp(.94rem,3.8vw,1.06rem) !important; line-height:1.65 !important; }
  :where(.programs-grid,.services-grid,.gallery-grid,.sector-grid,.blog-grid) { min-width:0; }
  :where(.program-card,.blog-card,.service-card,.sector-card,.gallery-card) { max-width:100%; }
}
@media (prefers-reduced-motion:reduce) {
  :where(.program-card,.service-card,.sector-card,.blog-card,.resource-card,
         .gallery-card,.editorial-card,.founder-card) { transition:none !important; }
}

/* ============================================================================
   V23 · RED LÍDER — ENCABEZADO CONTEXTUAL + LEGIBILIDAD + MICROINTERACCIONES
   Solo diseño. La lógica, recursos, enlaces y conexiones no se modifican.
   El esquema permanece claro incluso cuando el sistema usa modo oscuro.
   ============================================================================ */
:root,html,html[data-theme="dark"] {
  color-scheme:light !important;
  --rl-v23-ink:#142D4A;
  --rl-v23-navy:#0B2B4C;
  --rl-v23-blue:#18598E;
  --rl-v23-orange:#F97316;
  --rl-v23-ice:#F5F8FC;
  --font-main:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-display:'Manrope','Plus Jakarta Sans',system-ui,sans-serif;
}
html body { color-scheme:light !important; }
html body, html body button, html body input, html body select, html body textarea {
  font-family:var(--font-main) !important;
}
html body :is(h1,h2,h3,h4,h5,h6,.section-title,.page-hero-title,.program-card-title,.resource-title,
  .founder-name,.calendar-info-title,.hero-title) {
  font-family:var(--font-display) !important;
  font-optical-sizing:auto;
  letter-spacing:-.028em;
  text-wrap:balance;
}
/* En páginas blancas, y después de desplazarse, encabezado blanco legible. */
html body .site-header, html body .site-header.scrolled,
html body .site-header.v8-condensed, html body.nav-open .site-header {
  background:rgba(250,252,255,.97) !important;
  border-bottom:1px solid rgba(18,70,109,.15) !important;
  box-shadow:0 8px 26px rgba(9,35,66,.11) !important;
  backdrop-filter:blur(19px) saturate(145%) !important;
  -webkit-backdrop-filter:blur(19px) saturate(145%) !important;
  color:var(--rl-v23-ink) !important;
}
html body .site-header .brand-logo .brand-logo-light,
html body.has-dark-hero .site-header.scrolled .brand-logo .brand-logo-light,
html body.nav-open .site-header .brand-logo .brand-logo-light {display:block !important;}
html body .site-header .brand-logo .brand-logo-dark,
html body.has-dark-hero .site-header.scrolled .brand-logo .brand-logo-dark,
html body.nav-open .site-header .brand-logo .brand-logo-dark {display:none !important;}
html body .site-header .main-navigation .nav-link {
  color:#12385B !important;-webkit-text-fill-color:#12385B !important;
  background:transparent !important;border:1px solid transparent !important;
  opacity:1 !important;visibility:visible !important;text-shadow:none !important;
  text-decoration:none !important;font-weight:750 !important;
  transition:color .22s ease,background .22s ease,border-color .22s ease,
    box-shadow .22s ease,transform .22s ease !important;
}
html body .site-header .main-navigation .nav-link:hover,
html body .site-header .main-navigation .nav-link:focus-visible {
  background:#E5F1FF !important;border-color:#BDD8F0 !important;
  color:#0F416F !important;-webkit-text-fill-color:#0F416F !important;
  box-shadow:0 7px 19px rgba(12,61,110,.17) !important;
  text-decoration:none !important;transform:translateY(-1px) !important;
}
html body .site-header .main-navigation .nav-link.active,
html body .site-header .main-navigation .nav-link.active:hover,
html body .site-header .main-navigation .nav-link.active:focus-visible {
  background:linear-gradient(135deg,#145183,#2276B3) !important;
  border-color:rgba(9,45,78,.25) !important;
  color:#FFFFFF !important;-webkit-text-fill-color:#FFFFFF !important;
  text-shadow:none !important;
  box-shadow:0 8px 20px rgba(14,66,106,.24) !important;
}
/* En páginas de portada azul: conservar el encabezado oscuro integrado al hero,
   solamente mientras permanece arriba. Mantiene contraste en hover y foco. */
html body.has-dark-hero:not(.nav-open) .site-header:not(.scrolled):not(.v8-condensed) {
  background:linear-gradient(180deg,rgba(4,27,49,.97),rgba(9,38,66,.94)) !important;
  color:#F2F8FF !important;
  border-bottom:1px solid rgba(222,240,255,.14) !important;
  box-shadow:0 6px 22px rgba(2,24,43,.16) !important;
  backdrop-filter:blur(14px) saturate(135%) !important;
  -webkit-backdrop-filter:blur(14px) saturate(135%) !important;
}
html body.has-dark-hero:not(.nav-open) .site-header:not(.scrolled):not(.v8-condensed)
  .brand-logo .brand-logo-light {display:none !important;}
html body.has-dark-hero:not(.nav-open) .site-header:not(.scrolled):not(.v8-condensed)
  .brand-logo .brand-logo-dark {display:block !important;}
html body.has-dark-hero:not(.nav-open) .site-header:not(.scrolled):not(.v8-condensed)
  .brand-logo {background:transparent !important;border-color:transparent !important;box-shadow:none !important;}
html body.has-dark-hero:not(.nav-open) .site-header:not(.scrolled):not(.v8-condensed)
  .main-navigation:not(.open) .nav-link {
  color:#F3F8FF !important;-webkit-text-fill-color:#F3F8FF !important;
  background:transparent !important;border:1px solid transparent !important;
  opacity:1 !important;text-shadow:0 1px 5px rgba(1,18,33,.32) !important;
}
html body.has-dark-hero:not(.nav-open) .site-header:not(.scrolled):not(.v8-condensed)
  .main-navigation:not(.open) .nav-link:hover,
html body.has-dark-hero:not(.nav-open) .site-header:not(.scrolled):not(.v8-condensed)
  .main-navigation:not(.open) .nav-link:focus-visible {
  color:#FFFFFF !important;-webkit-text-fill-color:#FFFFFF !important;
  background:rgba(120,188,241,.23) !important;
  border-color:rgba(221,242,255,.5) !important;
  box-shadow:0 9px 24px rgba(1,22,41,.29) !important;
  text-shadow:0 1px 6px rgba(0,0,0,.28) !important;
}
html body.has-dark-hero:not(.nav-open) .site-header:not(.scrolled):not(.v8-condensed)
  .main-navigation:not(.open) .nav-link.active,
html body.has-dark-hero:not(.nav-open) .site-header:not(.scrolled):not(.v8-condensed)
  .main-navigation:not(.open) .nav-link.active:hover,
html body.has-dark-hero:not(.nav-open) .site-header:not(.scrolled):not(.v8-condensed)
  .main-navigation:not(.open) .nav-link.active:focus-visible {
  color:#FFFFFF !important;-webkit-text-fill-color:#FFFFFF !important;
  background:rgba(112,177,231,.29) !important;
  border:1px solid rgba(226,242,255,.52) !important;
  box-shadow:0 8px 20px rgba(2,23,42,.25) !important;
}
/* Redes en ambas variantes (TikTok conserva su SVG original). */
html body .site-header .social-btn {opacity:1 !important;border:1px solid rgba(13,57,96,.11) !important;}
html body .site-header .social-tiktok svg {color:#15273b !important;fill:#15273b !important;opacity:1 !important;}
html body .site-header .social-btn:is(:hover,:focus-visible) {box-shadow:0 10px 23px rgba(6,41,72,.21) !important;transform:translateY(-2px) scale(1.035) !important;}
/* Menú desplegado: fondo blanco incluso si la cabecera es azul. */
@media (max-width:1240px) {
 html body .site-header .main-navigation.open {background:#fff !important;color:#12385B !important;}
 html body .site-header .main-navigation.open .nav-link,
 html body.has-dark-hero .site-header .main-navigation.open .nav-link {
   color:#12385B !important;-webkit-text-fill-color:#12385B !important;opacity:1 !important;
 }
 html body .site-header .main-navigation.open .nav-link:is(:hover,:focus-visible) {
   color:#0F416F !important;-webkit-text-fill-color:#0F416F !important;background:#E5F1FF !important;
 }
 html body .site-header .main-navigation.open .nav-link.active {
   color:#fff !important;-webkit-text-fill-color:#fff !important;
   background:linear-gradient(135deg,#145183,#2276B3) !important;
 }
 html body.has-dark-hero:not(.nav-open) .site-header:not(.scrolled):not(.v8-condensed) .menu-toggle {color:#fff !important;}
}
/* Profundidad elegante, sin cambiar proporciones, imágenes ni estructura. */
html body :is(.program-card,.service-card,.sector-card,.gallery-card,.blog-card,.resource-card,
  .editorial-card,.founder-card,.team-float-card,.rl-learning-kind,.content-card,.pillar-card) {
  box-shadow:0 11px 31px rgba(9,44,75,.11),0 2px 8px rgba(9,44,75,.035) !important;
  transition:box-shadow .32s cubic-bezier(.2,.8,.2,1),transform .32s cubic-bezier(.2,.8,.2,1),
             border-color .25s ease !important;
  min-width:0;
}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
 html body :is(.program-card,.service-card,.sector-card,.gallery-card,.blog-card,.resource-card,
  .editorial-card,.founder-card,.team-float-card,.rl-learning-kind,.content-card,.pillar-card):hover {
   transform:translateY(-5px) !important;
   box-shadow:0 23px 53px rgba(9,44,75,.18),0 6px 16px rgba(13,73,118,.07) !important;
   border-color:rgba(35,112,174,.27) !important;
 }
 html body :is(.btn,.filter-btn,.rl-disclosure>summary):hover {filter:saturate(1.05);}
}
html body :is(.btn,.filter-btn,.contact-tab-btn,.rl-disclosure>summary,.program-card-footer a,
  .program-card-footer button):is(:hover,:focus-visible) {
  opacity:1 !important;visibility:visible !important;
}
html body :is(.btn,.filter-btn,.contact-tab-btn,.rl-disclosure>summary) :is(span,strong,small,i) {opacity:1 !important;}
html body :is(.section-title,.page-hero-title,.hero-title) {overflow-wrap:anywhere;}
html body :is(.program-card,.gallery-card,.sector-card,.service-card,.founder-card) img {
  max-width:100%;object-position:center;min-width:0;
}
/* Evitar deformaciones en tarjetas y formularios móviles. */
@media (max-width:760px) {
 html body :is(.program-card,.service-card,.sector-card,.blog-card,.gallery-card,.resource-card) {
  max-width:100%;min-width:0;
 }
 html body :is(.page-hero-title,.hero-title) {font-size:clamp(1.95rem,7vw,3.2rem) !important;line-height:1.11 !important;}
 html body .page-hero-subtitle {font-size:clamp(.95rem,3.5vw,1.08rem) !important;line-height:1.65 !important;}
}
@media (prefers-reduced-motion:reduce) {
 html body :is(.program-card,.service-card,.sector-card,.gallery-card,.blog-card,.resource-card,
  .editorial-card,.founder-card,.team-float-card,.rl-learning-kind,.content-card,.pillar-card) {
   transform:none !important;transition:none !important;
 }
}

/* V23.1 · El cambio de color del encabezado y del menú no puede atravesar
   estados intermedios con texto de bajo contraste. */
html body .site-header.scrolled,
html body .site-header.v8-condensed,
html body.nav-open .site-header {
  transition:none !important;
}
@media (max-width:1240px) {
 html body .site-header .main-navigation.open .nav-link,
 html body.has-dark-hero .site-header .main-navigation.open .nav-link,
 html body .site-header .main-navigation.open .nav-link.active {
   transition:none !important;
 }
}


/* ========================================================================
   V24 · AJUSTES DE LECTURA Y EXPERIENCIA RESPONSIVA
   - Sin separación automática de palabras por guiones.
   - Comparativa mobile-first como carrusel de criterios sin tablas apretadas.
   - Tarjetas con profundidad sutil; respeta movimiento reducido y táctiles.
   ======================================================================== */
/* Mantener las palabras enteras; saltos naturales únicamente en espacios. */
html body, html body * {
  hyphens: none !important;
  -webkit-hyphens: none !important;
  -ms-hyphens: none !important;
  overflow-wrap: normal !important;
  word-wrap: normal !important;
  word-break: normal !important;
}
html body :is(h1,h2,h3,h4,h5,h6,.page-hero-title,.hero-title,.section-title,
  .founder-name,.founder-role,.founder-badge,.founder-bio,.gallery-info,
  .comparison-table,.category-label,.program-card-title) {
  text-wrap: pretty;
  min-width: 0;
}
/* Tipografía adaptable con cortes por espacios (no dentro de una palabra). */
@media (max-width:600px) {
  html body .page-hero-title {
    font-size:clamp(1.72rem,7.6vw,2.65rem) !important;
    line-height:1.16 !important;
    letter-spacing:-.035em !important;
    text-wrap:pretty !important;
  }
  html body .section-title {font-size:clamp(1.58rem,6vw,2.35rem) !important;line-height:1.18 !important;}
  html body .page-hero-subtitle {font-size:clamp(.92rem,3.6vw,1.04rem) !important;}
}
@media (max-width:360px) {
  html body .page-hero-title {font-size:clamp(1.5rem,7.4vw,1.85rem) !important;}
  html body .section-title {font-size:clamp(1.48rem,6vw,1.85rem) !important;}
}
/* Equipo: rótulos completos, aire y perfiles equilibrados en tablet y móvil. */
html body .team-section-float .school-grid-team {gap:clamp(1.1rem,2.1vw,1.85rem) !important;}
html body .team-section-float .team-float-card {
  border:1px solid rgba(37,104,157,.16) !important;
  box-shadow:0 17px 38px rgba(9,39,69,.13),0 3px 10px rgba(9,39,69,.06) !important;
  isolation:isolate;
}
html body .team-section-float .founder-body {
  padding:clamp(1.15rem,2.4vw,1.75rem) !important;
  min-width:0;
  gap:.2rem;
}
html body .team-section-float .founder-name {
  font-size:clamp(1.16rem,2vw,1.55rem) !important;
  line-height:1.29 !important;
  margin-bottom:.5rem !important;
}
html body .team-section-float .founder-role {
  display:block !important;
  width:fit-content;
  max-width:100% !important;
  font-size:clamp(.82rem,1.1vw,.91rem) !important;
  line-height:1.55 !important;
  padding:.47rem .7rem !important;
  white-space:normal !important;
}
html body .team-section-float .founder-badge {
  max-width:calc(100% - 28px);
  white-space:normal;
  line-height:1.38;
  font-size:clamp(.68rem,.95vw,.79rem);
}
@media (max-width:420px) {
  html body .team-section-float .founder-body {padding:1.2rem !important;}
  html body .team-section-float .founder-role {font-size:.84rem !important;}
}
/* Escritorio: tabla de tres columnas completa, con separación y lectura normal. */
html body .comparison-table-wrapper {
  border-radius:20px;
  box-shadow:0 20px 45px rgba(11,43,76,.12),0 5px 13px rgba(11,43,76,.04) !important;
}
html body .comparison-table td, html body .comparison-table th {
  line-height:1.65;
  vertical-align:top;
}
/* Etiqueta descriptiva y botones que solo aparecen en pantallas pequeñas. */
html body .comparison-swipe-help,
html body .comparison-swipe-controls {display:none;}
@media (max-width:860px) {
  html body .comparison-swipe-help {
    display:flex;
    align-items:center;
    gap:.65rem;
    color:#234968;
    font-size:.93rem;
    font-weight:650;
    margin:1.5rem 0 .2rem;
    line-height:1.6;
  }
  html body .comparison-swipe-help i {color:#E96F1A;flex:0 0 auto;}
  html body .comparison-table-wrapper {
    overflow:visible !important;
    margin:0 !important;
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
  }
  html body .comparison-table {display:block !important;width:100% !important;min-width:0 !important;border-collapse:separate !important;}
  /* Encabezados disponibles para accesibilidad aunque no ocupen espacio visual. */
  html body .comparison-table thead {position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip-path:inset(50%) !important;white-space:nowrap !important;}
  html body .comparison-table tbody {
    display:flex !important;
    gap:clamp(.85rem,3vw,1.1rem);
    width:100%;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    padding:1.1rem .25rem 1.55rem !important;
    scroll-snap-type:x mandatory;
    scroll-padding-inline:.25rem;
    overscroll-behavior-inline:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
    scrollbar-color:#9CB8D3 #EAF1F8;
  }
  html body .comparison-table tbody tr {
    flex:0 0 clamp(272px,88%,440px) !important;
    display:flex !important;
    flex-direction:column;
    min-width:0;
    background:#fff;
    border:1px solid #D5E3F0;
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 15px 34px rgba(11,43,76,.13),0 4px 11px rgba(11,43,76,.05);
    scroll-snap-align:start;
    scroll-snap-stop:always;
  }
  html body .comparison-table tbody td {
    display:block !important;
    box-sizing:border-box;
    width:100% !important;
    min-width:0 !important;
    flex:0 0 auto;
    padding:1.15rem 1.2rem !important;
    font-size:clamp(.88rem,2.9vw,.98rem) !important;
    line-height:1.63 !important;
    border:0;
    border-bottom:1px solid #D9E5F0;
    white-space:normal !important;
    text-align:left;
  }
  html body .comparison-table tbody td:last-child {border-bottom:0;}
  html body .comparison-table tbody td:first-child {
    background:linear-gradient(115deg,#103B65,#216698) !important;
    color:#fff !important;
    font-weight:800 !important;
    font-size:clamp(1.08rem,3.6vw,1.24rem) !important;
    line-height:1.35 !important;
    letter-spacing:-.02em;
  }
  html body .comparison-table tbody td:nth-child(2) {background:#F8FAFD !important;color:#364B60 !important;}
  html body .comparison-table tbody td:nth-child(3) {background:#EFF7FF !important;color:#14385A !important;}
  html body .comparison-table tbody td:nth-child(n+2)::before {
    content:attr(data-label);
    display:block;
    font-size:.76rem;
    font-weight:850;
    color:#1B5483;
    text-transform:uppercase;
    letter-spacing:.03em;
    margin-bottom:.65rem;
    line-height:1.45;
  }
  html body .comparison-table tbody .comparison-tag-red,
  html body .comparison-table tbody .comparison-tag-blue {display:inline !important;white-space:normal !important;line-height:1.55 !important;}
  html body .comparison-swipe-controls {
    display:flex;
    justify-content:center;
    align-items:center;
    gap:1.1rem;
    margin:.7rem 0 1.1rem;
  }
  html body .comparison-slide-btn {
    display:grid;
    place-items:center;
    width:46px;
    height:46px;
    border-radius:50%;
    background:#16588B;
    color:white;
    border:1px solid #11436C;
    box-shadow:0 8px 17px rgba(12,61,105,.2);
    transition:transform .2s ease,box-shadow .2s ease,background .2s ease;
    cursor:pointer;
  }
  html body .comparison-slide-btn:disabled {background:#DCE7F0;color:#637C92;box-shadow:none;cursor:default;}
  html body .comparison-slide-btn:not(:disabled):is(:hover,:focus-visible) {background:#E96F1A;transform:translateY(-2px);box-shadow:0 11px 21px rgba(12,61,105,.24);}
  html body .comparison-current {font-weight:750;color:#244767;font-size:.94rem;font-variant-numeric:tabular-nums;}
}
/* Sombras y microinteracciones premium; no afectan dimensionamiento o hitboxes. */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  html body .team-section-float .team-float-card:hover,
  html body :is(.gallery-card,.program-card,.service-card,.blog-card,.sector-card,.resource-card):hover {
    transform:translateY(-7px) !important;
    box-shadow:0 30px 64px rgba(9,43,75,.19),0 7px 18px rgba(16,77,120,.08) !important;
    border-color:rgba(243,115,22,.30) !important;
  }
  html body .gallery-card:hover img {transform:scale(1.025);transition:transform .5s cubic-bezier(.2,.7,.2,1) !important;}
  html body :is(.filter-btn,.nav-link,.btn):not(:disabled):hover {filter:brightness(1.03);}
}
html body :is(.team-float-card,.gallery-card,.program-card,.sector-card,.blog-card,.resource-card):focus-within {
  box-shadow:0 0 0 3px rgba(249,115,22,.20),0 23px 52px rgba(9,43,75,.15) !important;
}
@media (prefers-reduced-motion:reduce) {
  html body .comparison-table tbody {scroll-behavior:auto !important;scroll-snap-type:none;}
  html body .comparison-slide-btn {transition:none !important;}
}

/* ============================================================================
   V26 · ARTÍCULOS — ESTÉTICA EDITORIAL RESPONSIVA (sin cambios de integraciones)
   1. Imagen sin recortes ni textos encima.
   2. Composición adaptable; no se aplastan columnas en teléfonos.
   3. Artículos y guías: rejilla en PC y carruseles de lectura en pantallas pequeñas.
   ============================================================================ */
html body .rl-articles-feature-section {
  padding:clamp(1.15rem,3.3vw,3.25rem) 0 clamp(2.5rem,4.5vw,4.5rem);
  background:linear-gradient(180deg,#f5f9fd,#ffffff 70%);
}
html body .rl-article-feature {
  position:relative;
  padding:clamp(1rem,2.6vw,2.25rem) !important;
  margin:0 !important;
  border:1px solid #d9e8f5 !important;
  border-radius:clamp(19px,2.8vw,30px) !important;
  background:#fff !important;
  box-shadow:0 26px 65px rgba(9,42,75,.13),0 4px 12px rgba(10,54,91,.045) !important;
  overflow:hidden;
  isolation:isolate;
}
html body .rl-article-feature:before {
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:5px;
  background:linear-gradient(90deg,#17588b,#35a3bd 55%,#f97316);
  pointer-events:none;
}
html body .rl-article-feature .rl-feature-layout {
  display:grid !important;
  grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr) !important;
  gap:clamp(1.4rem,3.6vw,3.3rem) !important;
  align-items:center !important;
  min-width:0;
}
html body .rl-article-feature .rl-feature-visual {
  display:flex;
  flex-direction:column;
  min-width:0;
  margin:0;
  gap:1rem;
}
html body .rl-article-feature .rl-feature-visual .video-spotlight-photo {
  display:block;
  width:100%;
  height:auto !important;
  aspect-ratio:3 / 2 !important;
  border-radius:clamp(14px,2vw,22px) !important;
  overflow:hidden;
  background:#eaf1f7;
  box-shadow:0 20px 45px rgba(8,46,81,.17) !important;
}
html body .rl-article-feature .video-spotlight-photo::after {display:none !important;}
html body .rl-article-feature .video-spotlight-photo img {
  display:block;
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  object-position:center !important;
  max-width:100%;
  transform:none !important;
  filter:none !important;
  transition:filter .4s ease !important;
}
html body .rl-feature-caption {
  display:flex;
  flex-wrap:wrap;
  gap:.5rem 1rem;
  align-items:center;
  color:#26465f;
  font-size:clamp(.78rem,.95vw,.88rem);
  font-weight:700;
  line-height:1.5;
  padding:0 .15rem;
}
html body .rl-feature-caption-kicker {
  color:#115784;
  display:inline-flex;
  align-items:center;
  gap:.45rem;
}
html body .rl-feature-caption-kicker i {color:#e96d19;}
html body .rl-feature-content {min-width:0;}
html body .rl-feature-content h2 {
  margin:0 0 1rem;
  color:#102e4a !important;
  font-family:Manrope,'Plus Jakarta Sans',sans-serif;
  font-size:clamp(1.5rem,2.75vw,2.3rem) !important;
  font-weight:800;
  letter-spacing:-.035em;
  line-height:1.21 !important;
  text-wrap:pretty;
}
html body .rl-feature-content > p {
  margin:0 0 1.2rem;
  color:#496075 !important;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:clamp(.94rem,1.08vw,1.03rem) !important;
  line-height:1.78 !important;
  font-weight:450;
}
html body .rl-feature-points {
  list-style:none;
  display:grid;
  gap:.7rem;
  margin:0;
  padding:0;
  color:#173b59 !important;
}
html body .rl-feature-points li {
  display:flex;
  align-items:flex-start;
  gap:.75rem;
  min-width:0;
  border:1px solid rgba(33,105,160,.10);
  border-radius:12px;
  background:linear-gradient(110deg,#f6fbff,#fff);
  padding:.7rem .85rem;
  font-size:clamp(.84rem,1.02vw,.96rem);
  line-height:1.58;
}
html body .rl-feature-points li i {
  flex:0 0 auto;
  margin-top:.27em;
  color:#e4771b;
}
html body .rl-feature-points li span {min-width:0;}

/* Recursos y artículos: card styling que preserva acordeones y visores PDF. */
html body .blog-section .blog-grid,
html body .resources-toolkit-grid {
  gap:clamp(1rem,2.3vw,1.8rem) !important;
}
html body .blog-section .blog-card,
html body .resources-toolkit-grid .resource-card {
  position:relative;
  min-width:0;
  border-radius:20px !important;
  border:1px solid #d9e7f2 !important;
  background:#fff !important;
  box-shadow:0 14px 32px rgba(11,51,82,.09),0 2px 8px rgba(11,51,82,.04) !important;
  overflow:hidden;
  isolation:isolate;
}
html body .blog-section .blog-card::after,
html body .resources-toolkit-grid .resource-card::after {
  content:"";
  position:absolute;
  left:0;right:0;top:0;
  height:3px;
  background:linear-gradient(90deg,#155887,#36a2b9,#f97316);
  opacity:.72;
  pointer-events:none;
}
html body .blog-section .blog-card h3,
html body .resources-toolkit-grid .resource-title {
  color:#123555 !important;
  font-family:Manrope,'Plus Jakarta Sans',sans-serif !important;
  line-height:1.38 !important;
  text-wrap:pretty;
  word-break:normal !important;
  hyphens:none !important;
}
html body .blog-section .blog-card p,
html body .resources-toolkit-grid .resource-card p {
  color:#496077 !important;
  line-height:1.7 !important;
  word-break:normal !important;
  hyphens:none !important;
}
html body .resources-toolkit-grid .resource-card {
  padding:clamp(1.25rem,2.1vw,2rem) !important;
}
html body .resource-card .resource-actions .btn,
html body .blog-section .blog-card .btn {
  min-width:0;
  white-space:normal;
  text-align:center;
}
html body .rl-carousel-controls,
html body .rl-articles-carousel-help {display:none;}

/* En PC, la información está a la vista en rejillas y no precisa carrusel. */
@media (min-width:721px) and (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  html body .rl-article-feature .video-spotlight-photo:hover img {filter:saturate(1.08) contrast(1.025) !important;}
  html body .rl-feature-points li {transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;}
  html body .rl-feature-points li:hover {transform:translateX(4px);box-shadow:0 7px 20px rgba(14,66,110,.1);border-color:rgba(23,104,159,.22);}
}
@media (max-width:1000px) {
  html body .rl-article-feature .rl-feature-layout {grid-template-columns:minmax(0,1fr) !important;}
  html body .rl-article-feature .rl-feature-visual {width:100%;max-width:760px;margin:0 auto;}
  html body .rl-feature-content {width:100%;max-width:760px;margin:0 auto;}
}
@media (max-width:720px) {
  html body .rl-articles-feature-section {padding:1rem 0 2.2rem;}
  html body .rl-article-feature {padding:clamp(.75rem,2.7vw,1.1rem) !important;border-radius:20px !important;}
  html body .rl-article-feature .rl-feature-layout {gap:1.25rem !important;}
  html body .rl-article-feature .rl-feature-visual {gap:.65rem;}
  html body .rl-article-feature .rl-feature-visual .video-spotlight-photo {border-radius:15px !important;}
  html body .rl-feature-caption {gap:.25rem .8rem;padding:0 .15rem;font-size:.76rem;}
  html body .rl-feature-content {padding:.2rem .22rem .7rem;}
  html body .rl-feature-content h2 {font-size:clamp(1.36rem,5.2vw,1.95rem) !important;line-height:1.27 !important;margin-bottom:.85rem;}
  html body .rl-feature-content > p {font-size:clamp(.88rem,3.55vw,1rem) !important;line-height:1.72 !important;margin-bottom:1rem;}
  html body .rl-feature-points {gap:.55rem;}
  html body .rl-feature-points li {font-size:clamp(.81rem,3.2vw,.93rem);padding:.65rem .72rem;}
  /* Desliza los artículos sin reducir el ancho de lectura ni cortar palabras. */
  html body #blog-container,
  html body #rl-toolkit-carousel {
    display:flex !important;
    flex-wrap:nowrap !important;
    grid-template-columns:none !important;
    gap:.85rem !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    scroll-snap-type:x mandatory;
    scroll-padding-inline:.15rem;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-inline:contain;
    scrollbar-width:thin;
    scrollbar-color:#a7c3d9 transparent;
    padding:.45rem .16rem 1.15rem !important;
    margin-top:1.25rem !important;
    min-width:0;
  }
  html body #blog-container > .blog-card,
  html body #rl-toolkit-carousel > .resource-card {
    display:flex !important;
    flex:0 0 min(92%,365px) !important;
    width:min(92%,365px) !important;
    max-width:365px !important;
    min-width:0 !important;
    height:auto !important;
    scroll-snap-align:start;
    scroll-snap-stop:always;
    margin:0 !important;
    transform:none;
  }
  html body #blog-container > .blog-card .blog-card-content {
    padding:clamp(.85rem,3.3vw,1.25rem) !important;
    min-width:0;
  }
  html body #blog-container > .blog-card h3 {font-size:clamp(1.03rem,3.7vw,1.2rem) !important;}
  html body #rl-toolkit-carousel > .resource-card {padding:clamp(.95rem,3.5vw,1.3rem) !important;}
  html body #rl-toolkit-carousel > .resource-card .resource-title {font-size:1.07rem !important;}
  html body #rl-toolkit-carousel > .resource-card .resource-actions {grid-template-columns:1fr !important;}
  html body #rl-toolkit-carousel > .resource-card .resource-actions .btn {width:100%;}
  html body .rl-articles-carousel-help {
    display:flex;
    align-items:center;
    gap:.55rem;
    margin:1.05rem 0 .15rem;
    color:#35607f;
    font-size:.85rem;
    line-height:1.5;
    font-weight:700;
  }
  html body .rl-articles-carousel-help i {color:#eb791d;}
  html body .rl-carousel-controls {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:1rem;
    margin:.35rem 0 1.2rem;
  }
  html body .rl-carousel-count {min-width:4.1rem;text-align:center;font-size:.84rem;font-weight:800;color:#325270;font-variant-numeric:tabular-nums;}
  html body .rl-carousel-arrow {
    display:grid;
    place-items:center;
    width:45px;height:45px;
    border:1px solid #c3d9ed;
    border-radius:15px;
    background:#f3f8fd;
    color:#164d79;
    box-shadow:0 6px 18px rgba(10,53,93,.09);
    cursor:pointer;
    transition:background .2s ease,color .2s ease,transform .2s ease,box-shadow .2s ease;
  }
  html body .rl-carousel-arrow:is(:hover,:focus-visible) {background:#165c8e;color:#fff;box-shadow:0 9px 20px rgba(18,81,129,.22);}
  html body .rl-carousel-arrow:focus-visible {outline:3px solid #e98028;outline-offset:3px;}
  html body .rl-carousel-arrow:disabled {background:#edf2f7;border-color:#e0e8ef;color:#8396a8;box-shadow:none;cursor:default;}
  /* Evita que las tarjetas floten sobre el dedo y se vea cortado el carrusel. */
  html body #blog-container > .blog-card:hover,
  html body #rl-toolkit-carousel > .resource-card:hover {transform:none !important;}
}
@media (max-width:360px) {
  html body #blog-container > .blog-card,
  html body #rl-toolkit-carousel > .resource-card {flex-basis:96% !important;width:96% !important;}
  html body .rl-article-feature {padding:.75rem !important;}
  html body .rl-feature-content h2 {font-size:1.33rem !important;}
  html body .rl-feature-caption {font-size:.72rem;}
}
@media (prefers-reduced-motion:reduce) {
  html body .rl-article-feature *,
  html body .rl-carousel-arrow {animation:none !important;transition:none !important;}
  html body #blog-container, html body #rl-toolkit-carousel {scroll-behavior:auto !important;}
}

/* ============================================================================
   V27 | Accesibilidad de CTA de orientación - corrección localizada.
   Conserva el botón y su enlace original. En hover/foco el texto y el ícono
   siguen siendo blancos: nunca se convierten en cenizo o transparentes.
   ============================================================================ */
html body .cta-global-banner .cta-banner-content .cta-banner-actions a.btn.btn-outline-white,
html body .cta-global-banner .cta-banner-content .cta-banner-actions a.btn.btn-outline-white:link,
html body .cta-global-banner .cta-banner-content .cta-banner-actions a.btn.btn-outline-white:visited {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border: 1.5px solid rgba(255,255,255,.83) !important;
  background: rgba(255,255,255,.055) !important;
  text-decoration: none !important;
  opacity: 1 !important;
  text-shadow: 0 1px 3px rgba(0,17,36,.38) !important;
  transition: background-color .24s ease, box-shadow .24s ease,
              transform .24s ease, border-color .24s ease !important;
}
html body .cta-global-banner .cta-banner-content .cta-banner-actions a.btn.btn-outline-white:is(:hover,:focus-visible,:active) {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: #18598e !important;
  border-color: #ffffff !important;
  box-shadow: 0 12px 26px rgba(0,17,36,.36),
              inset 0 0 0 1px rgba(255,255,255,.14) !important;
  text-shadow: 0 1px 3px rgba(0,18,35,.40) !important;
  opacity: 1 !important;
  transform: translateY(-2px) !important;
}
html body .cta-global-banner .cta-banner-content .cta-banner-actions a.btn.btn-outline-white i,
html body .cta-global-banner .cta-banner-content .cta-banner-actions a.btn.btn-outline-white:is(:hover,:focus-visible,:active) i {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  opacity: 1 !important;
}
html body .cta-global-banner .cta-banner-desc,
html body .cta-global-banner .cta-banner-title {
  color: #f2f7ff !important;
  -webkit-text-fill-color: #f2f7ff !important;
  opacity: 1 !important;
}
@media (hover:none) {
  html body .cta-global-banner .cta-banner-content .cta-banner-actions a.btn.btn-outline-white {
    transform: none !important;
  }
}
@media (prefers-reduced-motion:reduce) {
  html body .cta-global-banner .cta-banner-content .cta-banner-actions a.btn.btn-outline-white {
    transition: none !important;
  }
}


/* ===========================================================================
   RED LÍDER V28 — TARJETAS FLUIDAS, LECTURA Y DESLIZAMIENTO RESPONSIVO
   Mantiene paleta original, header adaptable, filtros, PDF y formularios.
   La distribución se adapta sin recortar rostros ni dividir palabras.
   =========================================================================== */
:root { color-scheme:light; }
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
html body :is(.container,.section-header,.hero-grid,.footer-grid,.rl-feature-layout) {min-width:0;}
html body :is(.section-title,.page-hero-title,.hero-title,.program-card-title,.sector-card-title,.founder-name,.gallery-info h3,.editorial-card h3) {
  hyphens:none !important;
  -webkit-hyphens:none !important;
  word-break:normal !important;
  overflow-wrap:normal !important;
  white-space:normal !important;
  text-wrap:pretty;
}
html body :is(.program-card,.gallery-card,.founder-card,.sector-card,.service-card,.editorial-card,.resource-card,.blog-card,.team-float-card) {
  box-sizing:border-box;
  min-width:0;
  max-width:100%;
  border-radius:clamp(17px,2vw,25px);
  box-shadow:0 14px 36px rgba(9,39,72,.105),0 3px 10px rgba(9,39,72,.045);
  transition:box-shadow .28s ease,transform .28s ease,border-color .28s ease;
}
/* Las tarjetas no deben mantener alturas rígidas ni deformar el contenido. */
html body :is(.program-card,.sector-card,.gallery-card,.founder-card,.editorial-card) {height:auto;}
html body :is(.program-card,.sector-card,.gallery-card,.founder-card,.editorial-card) :is(p,li,summary,span,strong,h2,h3) {
  hyphens:none !important;
  -webkit-hyphens:none !important;
  word-break:normal !important;
}
/* Laptops, pantallas externas y escritorio: rejillas que usan el ancho real. */
@media (min-width:1101px) {
  html body .team-section-float .school-grid-team {
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:clamp(1rem,1.7vw,1.6rem) !important;
    align-items:stretch;
  }
  html body .gallery-section .gallery-grid {
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:clamp(1rem,1.8vw,1.65rem) !important;
  }
}
@media (min-width:721px) {
  html body .programs-section .programs-grid {
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:clamp(1rem,2vw,1.9rem) !important;
    align-items:stretch;
  }
  html body .programs-section .programs-grid > .program-card {width:100% !important;}
  html body .editorial-grid {gap:clamp(.9rem,1.9vw,1.45rem) !important;}
  html body .editorial-card {padding:clamp(1.1rem,1.7vw,1.65rem) !important;}
}
@media (min-width:721px) and (max-width:1100px) {
  html body .team-section-float .school-grid-team,
  html body .gallery-section .gallery-grid {
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:1.25rem !important;
  }
}
/* Las fotos de galería: sin estirarlas ni tapar información importante. */
html body .gallery-section .gallery-card {display:flex;flex-direction:column;overflow:hidden;}
html body .gallery-section .gallery-card img {
  display:block;
  width:100% !important;
  height:auto !important;
  aspect-ratio:4/3;
  object-fit:contain !important;
  object-position:center;
  background:linear-gradient(140deg,#f0f4f8,#e8eef5);
  flex:none;
}
html body .gallery-section .gallery-info {
  padding:clamp(1rem,1.9vw,1.55rem) !important;
  gap:.45rem;
  min-width:0;
}
html body .gallery-section .gallery-info h3 {font-size:clamp(1.09rem,1.2vw,1.38rem);line-height:1.38;}
html body .gallery-section .gallery-info p {font-size:clamp(.88rem,.9vw,.97rem);line-height:1.63;}
html body .team-section-float .founder-image-wrap {height:clamp(215px,24vw,305px) !important;}
html body .team-section-float .founder-img {width:100%;height:100%;object-fit:contain !important;object-position:center;}
html body .team-section-float .founder-body {min-width:0;}
html body .team-section-float .founder-role {width:auto !important;max-width:100% !important;line-height:1.5 !important;}
html body .programs-section .program-card {min-width:0;}
html body .programs-section .program-card-title {font-size:clamp(1.16rem,1.35vw,1.48rem) !important;line-height:1.31 !important;}
html body .programs-section .program-card-footer .btn {padding-inline:.65rem !important;line-height:1.4;}
/* Los controles se crean sin modificar tarjetas ni filtros existentes. */
html body .rl28-swipe-controls {display:none;}
html body .rl28-swipe-controls[hidden] {display:none !important;}

/* Teléfonos: tarjetas individuales cómodas, sin salirse del contenedor. */
@media (max-width:720px) {
  html body .container {min-width:0;}
  html body :is(.services-overview-section,.programs-section,.gallery-section,.team-section-float,.sectors-section) {
    max-width:100%;
  }
  html body :is(.section-title,.page-hero-title,.hero-title) {
    font-size:clamp(1.64rem,6.5vw,2.55rem) !important;
    line-height:1.17 !important;
    letter-spacing:-.026em !important;
  }
  html body :is(.section-subtitle,.page-hero-subtitle,.hero-subtitle) {
    font-size:clamp(.92rem,3.35vw,1.025rem) !important;
    line-height:1.67 !important;
  }
  html body .section-header {margin-bottom:clamp(1.2rem,5vw,2.1rem) !important;}
  html body .services-overview-section {padding-block:clamp(2.8rem,9vw,4rem) !important;}
  html body .services-grid {gap:.85rem !important;padding:1rem .15rem 1.3rem !important;scroll-padding-inline:.15rem;overscroll-behavior-x:contain;}
  html body .services-grid > .service-card {
    flex:0 0 min(87%,340px) !important;
    width:min(87%,340px) !important;
    max-width:340px !important;
    min-width:0 !important;
    padding:clamp(1.05rem,4vw,1.35rem) !important;
    border-radius:19px !important;
  }
  /* Rejillas con clase responsive: scroll-snap solamente en móviles. */
  html body .rl28-mobile-track {
    box-sizing:border-box !important;
    display:flex !important;
    flex-flow:row nowrap !important;
    align-items:stretch !important;
    grid-template-columns:none !important;
    gap:clamp(.75rem,2.8vw,1.05rem) !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    scroll-snap-type:x mandatory;
    scroll-padding-inline:.14rem;
    overscroll-behavior-inline:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
    scrollbar-color:#acc7dd transparent;
    padding:.35rem .14rem 1.25rem !important;
    margin-inline:0 !important;
  }
  html body .rl28-mobile-track > :is(.program-card,.gallery-card,.gallery-item,.founder-card,.sector-card,.editorial-card) {
    box-sizing:border-box !important;
    flex:0 0 min(91%,400px) !important;
    width:min(91%,400px) !important;
    max-width:400px !important;
    min-width:0 !important;
    margin:0 !important;
    height:auto !important;
    scroll-snap-align:start;
    scroll-snap-stop:always;
    transform:none !important;
  }
  html body .rl28-mobile-track > .program-card {flex-basis:min(94%,430px) !important;width:min(94%,430px) !important;max-width:430px !important;}
  html body .rl28-mobile-track > :is(.gallery-card,.gallery-item) {flex-basis:min(93%,420px) !important;width:min(93%,420px) !important;max-width:420px !important;}
  html body .rl28-mobile-track > .sector-card {flex-basis:min(94%,420px) !important;width:min(94%,420px) !important;max-width:420px !important;}
  html body .rl28-mobile-track > :is(.program-card,.gallery-card,.gallery-item,.founder-card,.sector-card,.editorial-card):hover {
    transform:none !important;
  }
  html body .team-section-float .founder-image-wrap {height:clamp(205px,58vw,265px) !important;}
  html body .team-section-float .founder-body {padding:clamp(.95rem,3.5vw,1.25rem) !important;}
  html body .team-section-float .founder-badge {font-size:.72rem !important;}
  html body .team-section-float .founder-role {font-size:clamp(.79rem,3.2vw,.9rem) !important;}
  html body .gallery-section .gallery-info {padding:1.05rem !important;}
  html body .gallery-section .gallery-info h3 {font-size:clamp(1.09rem,4.15vw,1.26rem) !important;}
  html body .gallery-section .gallery-info p {font-size:clamp(.84rem,3.4vw,.96rem) !important;}
  html body .programs-section .program-card {padding:clamp(.95rem,3.9vw,1.3rem) !important;}
  html body .programs-section .program-card-title {font-size:clamp(1.1rem,4.25vw,1.33rem) !important;}
  html body .programs-section .program-card-footer {grid-template-columns:minmax(0,1fr) !important;gap:.55rem !important;}
  html body .programs-section .program-card-footer .btn {width:100% !important;min-width:0 !important;}
  html body .programs-section .program-card-details {min-width:0;}
  html body .editorial-card {padding:1.2rem !important;}
  html body .rl28-swipe-controls {
    display:flex !important;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:.8rem;
    margin:.1rem 0 1.65rem;
    min-width:0;
  }
  html body .rl28-swipe-controls[hidden] {display:none !important;}
  html body .rl28-swipe-hint {width:100%;text-align:center;font-size:.8rem;color:#42617c;font-weight:650;margin:0 0 .2rem;}
  html body .rl28-swipe-button {
    display:grid;place-items:center;
    width:44px;height:44px;
    border:1px solid #c5dbeb;
    border-radius:14px;
    background:#eff6fc;
    color:#15436a;
    font:800 1.32rem/1 'Plus Jakarta Sans',sans-serif;
    box-shadow:0 5px 16px rgba(12,58,96,.085);
    cursor:pointer;
    transition:background .18s ease,color .18s ease,box-shadow .18s ease;
  }
  html body .rl28-swipe-button:disabled {opacity:.48;box-shadow:none;cursor:default;}
  html body .rl28-swipe-button:not(:disabled):is(:hover,:focus-visible) {background:#175e91;color:#fff;box-shadow:0 8px 22px rgba(17,77,127,.2);}
  html body .rl28-swipe-button:focus-visible {outline:3px solid #ef811f;outline-offset:2px;}
  html body .rl28-swipe-counter {min-width:4.5rem;text-align:center;font-size:.87rem;color:#1b4668;font-weight:800;font-variant-numeric:tabular-nums;}
  /* Botones de filtro: movimiento horizontal natural, nunca letras apiladas. */
  html body .programs-filter-bar {
    display:flex !important;
    flex-wrap:nowrap !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    -webkit-overflow-scrolling:touch;
    gap:.55rem !important;
    padding:.4rem .15rem .85rem !important;
    scrollbar-width:thin;
    max-width:100%;
  }
  html body .programs-filter-bar .filter-btn {flex:0 0 auto;max-width:min(84vw,260px);white-space:normal;line-height:1.35;}
  html body .cta-banner-actions {gap:.75rem;}
}
@media (max-width:360px) {
 html body .rl28-mobile-track > :is(.program-card,.gallery-card,.gallery-item,.founder-card,.sector-card,.editorial-card) {flex-basis:95% !important;width:95% !important;}
 html body .rl28-mobile-track > .program-card-footer {padding-inline:.85rem;}
 html body .rl28-swipe-button {width:42px;height:42px;}
}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
 html body :is(.founder-card,.gallery-card,.sector-card,.editorial-card):hover {
   box-shadow:0 23px 48px rgba(9,39,72,.16),0 5px 16px rgba(9,39,72,.065) !important;
 }
}
@media (prefers-reduced-motion:reduce) {
 html body .rl28-mobile-track {scroll-behavior:auto !important;scroll-snap-type:x proximity;}
 html body .rl28-swipe-button {transition:none !important;}
}

/* Imágenes de galería dinámica, si el catálogo se alimenta desde data.json. */
@media(max-width:720px) {
 html body .gallery-section .rl28-mobile-track > .gallery-item {aspect-ratio:4/3;align-self:start;overflow:hidden;max-height:400px;}
 html body .gallery-section .rl28-mobile-track > .gallery-item .gallery-thumb {width:100%;height:100%;object-fit:contain;}
}
/* V28 · Última prioridad frente a las rejillas heredadas con !important.
   Se comprobó que sin este selector Equipo y Cursos quedaban en columna. */
@media (max-width:720px) {
  html body .team-section-float .school-grid-team.rl28-mobile-track,
  html body .programs-section .programs-grid.rl28-mobile-track,
  html body .gallery-section .gallery-grid.rl28-mobile-track,
  html body .sectors-section .sectors-grid.rl28-mobile-track,
  html body .editorial-grid.rl28-mobile-track {
    display:flex !important;
    flex-wrap:nowrap !important;
    grid-template-columns:none !important;
    overflow-x:auto !important;
    width:100% !important;
    max-width:100% !important;
  }
}
@media (max-width:720px) {
  /* Prioridad mayor que reglas heredadas ligadas al ID del catálogo. */
  html body .programs-section #programs-container.programs-grid.rl28-mobile-track {
    display:flex !important;
    flex-flow:row nowrap !important;
    grid-template-columns:none !important;
    align-items:stretch !important;
    gap:clamp(.75rem,2.8vw,1.05rem) !important;
    overflow-x:auto !important;
  }
}

/* ===========================================================================
   RED LÍDER V29 — ORDEN EDITORIAL, ACORDEONES Y DINAMISMO DISCRETO
   - Diseño compacto en PC, tablet y móvil. No modifica scripts de negocio.
   - Color primario #17365d, azul secundario y acento naranja institucional.
   - Todos los efectos de profundidad respetan reduced-motion.
   =========================================================================== */
html body .rl29-comparison-section {
  padding:clamp(3.2rem,6vw,5.2rem) 0;
  background:linear-gradient(180deg,#fff 0%,#f6f9fd 100%);
}
html body .rl29-comparison-section .section-header {max-width:860px;margin-inline:auto;margin-bottom:2rem;}
html body .rl29-comparison-section .section-title {max-width:760px;margin-inline:auto;text-wrap:balance;}
html body .rl29-comparison-section .section-subtitle {max-width:690px;line-height:1.65;}
html body .rl29-comparison-head {
  display:flex;justify-content:space-between;align-items:center;gap:1.2rem;
  max-width:1030px;margin:0 auto 1rem;flex-wrap:wrap;
}
html body .rl29-comparison-hint {display:inline-flex;align-items:center;gap:.65rem;color:#47627c;font-size:.91rem;font-weight:650;line-height:1.45;}
html body .rl29-comparison-hint i {color:#d76717;}
html body .rl29-comparison-actions {display:flex;flex-wrap:wrap;gap:.5rem;}
html body .rl29-comparison-action {
  appearance:none;border:1px solid #d5e2ec;border-radius:999px;
  background:#fff;color:#214766;padding:.62rem .95rem;
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font:700 .81rem/1.25 'Plus Jakarta Sans',system-ui,sans-serif;
  transition:background .2s ease,color .2s ease,border-color .2s ease,box-shadow .2s ease;
  cursor:pointer;min-height:40px;
}
html body .rl29-comparison-action:hover {background:#e7f1fb;border-color:#adcce6;}
html body .rl29-comparison-action:focus-visible,
html body :is(.rl29-compare-summary,.rl29-faq>summary,.rl29-timeline-fold>summary,.rl29-method-fold>summary):focus-visible {
  outline:3px solid #e87925 !important;outline-offset:3px;
}
html body .rl29-compare-list {max-width:1030px;margin-inline:auto;display:grid;gap:clamp(.68rem,1.6vw,.9rem);}
html body .rl29-compare-item {
  background:#fff;border:1px solid #dfe9f2;border-radius:19px;
  box-shadow:0 7px 22px rgba(9,46,78,.055);
  overflow:clip;min-width:0;isolation:isolate;
  transition:border-color .24s ease,box-shadow .28s ease,transform .28s cubic-bezier(.2,.8,.2,1);
}
html body .rl29-compare-item[open] {
  border-color:#b8d6eb;box-shadow:0 19px 41px rgba(15,60,98,.11),0 3px 9px rgba(15,60,98,.035);
}
html body .rl29-compare-summary {
  display:flex;align-items:center;gap:clamp(.65rem,1.9vw,1.15rem);
  padding:clamp(1rem,2vw,1.25rem) clamp(1rem,2.2vw,1.5rem);
  cursor:pointer;list-style:none;min-width:0;min-height:90px;
}
html body .rl29-compare-summary::-webkit-details-marker {display:none;}
html body .rl29-compare-summary::marker {content:'';}
html body .rl29-compare-index {
  display:grid;place-items:center;flex:0 0 43px;height:43px;
  background:#edf5fc;color:#1c6394;border-radius:13px;
  font-weight:850;font-size:.94rem;letter-spacing:-.02em;
}
html body .rl29-compare-item[open] .rl29-compare-index {background:#184f7e;color:#fff;}
html body .rl29-compare-title-group {flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:.55rem;}
html body .rl29-compare-title {font-size:clamp(.98rem,1.5vw,1.14rem);color:#123550;line-height:1.35;font-weight:850;letter-spacing:-.014em;}
html body .rl29-compare-takeaway {display:flex;gap:.45rem .65rem;align-items:center;flex-wrap:wrap;min-width:0;}
html body .rl29-compare-mini {display:inline-flex;align-items:center;gap:.36rem;font-size:clamp(.74rem,1.05vw,.83rem);line-height:1.4;font-weight:650;padding:.27rem .57rem;border-radius:7px;max-width:100%;white-space:normal;}
html body .rl29-compare-mini--old {color:#965047;background:#fcf4f1;}
html body .rl29-compare-mini--new {color:#166745;background:#eef8f1;}
html body .rl29-compare-chevron,
html body .rl29-fold-arrow {display:grid;place-items:center;flex:0 0 34px;width:34px;height:34px;border-radius:50%;background:#eff5fa;color:#19557c;transition:transform .22s ease,background .22s ease,color .22s ease;}
html body .rl29-compare-item[open] .rl29-compare-chevron,
html body .rl29-timeline-fold[open] .rl29-fold-arrow,
html body .rl29-faq[open] .rl29-fold-arrow,
html body .rl29-method-fold[open] .rl29-fold-arrow {transform:rotate(180deg);background:#e9f1f9;color:#d76b1a;}
html body .rl29-compare-detail {
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(.7rem,1.6vw,1rem);
  border-top:1px solid #e7edf3;padding:clamp(.8rem,1.6vw,1.15rem);
  animation:rl29-reveal .27s ease both;min-width:0;
}
html body .rl29-compare-column {padding:clamp(.9rem,2.1vw,1.4rem);border-radius:13px;min-width:0;border:1px solid transparent;}
html body .rl29-compare-column--old {background:#f7f8fa;border-color:#ecedf0;}
html body .rl29-compare-column--new {background:#eaf4fc;border-color:#dbeaf5;}
html body .rl29-compare-column-label {display:flex;align-items:center;gap:.45rem;margin:0 0 .9rem;color:#52677b;font-size:.72rem;font-weight:850;letter-spacing:.04em;text-transform:uppercase;line-height:1.45;}
html body .rl29-compare-column--new .rl29-compare-column-label {color:#185a85;}
html body .rl29-compare-column h3 {font-size:clamp(.94rem,1.2vw,1.08rem);font-weight:800;color:#123f61;line-height:1.42;margin:0 0 .55rem;}
html body .rl29-compare-column--old h3 {color:#935048;}
html body .rl29-compare-column p {margin:0;color:#344f69;font-size:clamp(.87rem,1.18vw,.97rem);line-height:1.7;max-width:65ch;}
html body .rl29-compare-column--old p {color:#596b7d;}
@keyframes rl29-reveal {from{opacity:.25;transform:translateY(-5px);}to{opacity:1;transform:translateY(0);}}

/* Hoja de ruta In-Company: cinco títulos a primera vista. */
html body .timeline-step-row {align-items:start;}
html body .timeline-step-content.rl29-timeline-content {padding:0 !important;min-width:0;overflow:clip;border-radius:16px;}
html body .rl29-timeline-fold>summary {display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.25rem 1.5rem;cursor:pointer;list-style:none;min-height:78px;}
html body .rl29-timeline-fold>summary::-webkit-details-marker {display:none;}
html body .rl29-timeline-fold .timeline-step-title {margin:0 !important;display:block;min-width:0;font-size:clamp(.98rem,1.25vw,1.1rem);line-height:1.46;font-weight:800;}
html body .rl29-timeline-body {padding:0 1.5rem 1.35rem;animation:rl29-reveal .22s ease both;}
html body .rl29-timeline-body p {margin:0 !important;line-height:1.7;}
html body .rl29-timeline-fold .rl29-fold-arrow {flex-shrink:0;}

/* FAQ: preguntas fáciles de recorrer, con respuesta bajo demanda. */
html body .faq-section .faq-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;align-items:start;}
html body .faq-section .faq-item.rl29-faq {padding:0 !important;border-radius:16px;overflow:clip;min-width:0;transition:box-shadow .25s ease,border-color .25s ease;}
html body .faq-section .rl29-faq[open] {border-color:#a8cce7;box-shadow:0 17px 38px rgba(9,46,78,.10);}
html body .rl29-faq>summary {cursor:pointer;list-style:none;display:flex;align-items:center;gap:.8rem;justify-content:space-between;min-height:94px;padding:1.15rem 1.2rem;color:#153e62;}
html body .rl29-faq>summary::-webkit-details-marker {display:none;}
html body .rl29-faq .faq-question {font-size:clamp(.92rem,1.1vw,1.05rem);margin:0;font-weight:750;line-height:1.48;}
html body .rl29-faq-question-text {display:flex;align-items:flex-start;gap:.7rem;min-width:0;}
html body .rl29-faq-question-text>i {margin-top:.18rem;flex-shrink:0;}
html body .rl29-faq .rl29-fold-arrow {flex-shrink:0;}
html body .rl29-faq-body {border-top:1px solid #e8eff5;padding:1rem 1.2rem 1.25rem;animation:rl29-reveal .22s ease both;}
html body .rl29-faq-body p {margin:0 !important;font-size:.93rem;line-height:1.72;color:#465e75;}

/* Metodología pedagógica: tarjetas con paso y título, detalle expandible. */
html body .methodology-steps-grid {align-items:start;gap:1rem;}
html body .methodology-steps-grid .method-step {min-width:0;border:1px solid #e2eaf1;border-left:3px solid #2a74a3;border-radius:16px;background:#fff;padding:1.25rem 1.35rem;box-shadow:0 8px 23px rgba(17,61,95,.065);transition:box-shadow .3s ease,transform .3s ease;}
html body .rl29-method-fold>summary {display:flex;align-items:center;gap:1rem;justify-content:space-between;list-style:none;cursor:pointer;padding:.3rem 0;min-height:44px;}
html body .rl29-method-fold>summary::-webkit-details-marker {display:none;}
html body .rl29-method-fold .step-title {margin:0;font-weight:800;font-size:clamp(.98rem,1.4vw,1.13rem);line-height:1.42;min-width:0;}
html body .rl29-method-fold .rl29-fold-arrow {flex-shrink:0;}
html body .rl29-method-body {border-top:1px solid #e6edf4;margin-top:.8rem;padding-top:1rem;animation:rl29-reveal .22s ease both;}
html body .rl29-method-body p {margin:0;font-size:.92rem;line-height:1.72;}

/* Microinteracciones: elevación, ampliación 1.0% y tilt máximo 1.35°.
   Aplicadas solo a equipos con mouse, sin alterar hitboxes o layout. */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  html body :is(.rl29-compare-item,.rl29-faq,.method-step,.rl29-timeline-content):hover {
    border-color:#a6cbe4 !important;
    box-shadow:0 21px 44px rgba(16,60,96,.125),0 3px 11px rgba(16,60,96,.04) !important;
  }
  html body :is(.team-float-card,.service-card,.program-card--accordion,.sector-card--accordion,.gallery-card,.editorial-card).rl29-depth-card:hover {
    transform:perspective(1100px) translateY(-6px) rotateX(var(--rl29-rx,0deg)) rotateY(var(--rl29-ry,0deg)) scale(1.01) !important;
    box-shadow:0 28px 58px rgba(10,47,78,.17),0 5px 16px rgba(10,47,78,.045) !important;
    border-color:rgba(231,110,26,.35) !important;
    position:relative;z-index:2;
  }
  html body .rl29-compare-item.rl29-depth-card:hover {
    transform:perspective(1100px) translateY(-3px) rotateX(var(--rl29-rx,0deg)) rotateY(var(--rl29-ry,0deg)) scale(1.003);
  }
  html body :is(.rl29-compare-summary,.rl29-faq>summary,.rl29-timeline-fold>summary,.rl29-method-fold>summary):hover .rl29-fold-arrow,
  html body .rl29-compare-summary:hover .rl29-compare-chevron {background:#d9ebf8;color:#c45d12;}
}
@media (max-width:760px) {
  html body .rl29-comparison-section {padding:3rem 0;}
  html body .rl29-comparison-head {align-items:stretch;gap:.85rem;margin-bottom:1rem;}
  html body .rl29-comparison-actions {width:100%;}
  html body .rl29-comparison-action {flex:1 1 auto;min-height:44px;}
  html body .rl29-compare-detail {grid-template-columns:minmax(0,1fr);gap:.65rem;}
  html body .rl29-compare-summary {min-height:82px;}
  html body .rl29-compare-mini {font-size:.76rem;}
  html body .faq-section .faq-grid,.methodology-steps-grid {grid-template-columns:minmax(0,1fr) !important;}
  html body .faq-section .rl29-faq>summary {min-height:76px;}
  html body .timeline-step-row {grid-template-columns:45px minmax(0,1fr) !important;gap:.7rem !important;}
  html body .timeline-step-badge {width:43px;height:43px;font-size:1rem;}
  html body .rl29-timeline-fold>summary {padding:1rem .9rem;min-height:70px;}
  html body .rl29-timeline-body {padding:0 .9rem 1.2rem;}
}
@media (max-width:420px) {
  html body .rl29-compare-summary {padding:.85rem .75rem;gap:.55rem;}
  html body .rl29-compare-index {flex-basis:34px;height:36px;border-radius:10px;font-size:.79rem;}
  html body .rl29-compare-title {font-size:.98rem;}
  html body .rl29-compare-chevron {flex-basis:30px;width:30px;height:30px;}
  html body .rl29-compare-takeaway {gap:.3rem;}
  html body .rl29-compare-mini {padding:.22rem .4rem;}
  html body .rl29-compare-detail {padding:.58rem;}
  html body .rl29-compare-column {padding:.85rem;}
  html body .rl29-compare-column-label {font-size:.68rem;}
}
@media (prefers-reduced-motion:reduce) {
  html body :is(.rl29-compare-item,.rl29-comparison-action,.rl29-fold-arrow,.rl29-compare-chevron,.method-step,.faq-item.rl29-faq,.rl29-depth-card) {transition:none !important;transform:none !important;}
  html body :is(.rl29-compare-detail,.rl29-method-body,.rl29-timeline-body,.rl29-faq-body) {animation:none !important;}
}
/* Flechas CSS nativas: visibles incluso si la CDN de iconos está bloqueada. */
html body :is(.rl29-compare-chevron,.rl29-fold-arrow)>i {display:none !important;}
html body :is(.rl29-compare-chevron,.rl29-fold-arrow)::before {
  content:"";display:block;width:9px;height:9px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:translateY(-2px) rotate(45deg);
}