/*
  ══════════════════════════════════════════════════════
  MAPA SENIOR — styles.css
  Versión: 1.0 | Hostinger-ready
  Tipografía: EB Garamond (serif) + DM Sans (sans)
  ══════════════════════════════════════════════════════
*/

/* ─────────────────────────────────────────
   VARIABLES
───────────────────────────────────────── */
:root {
  /* Paleta base */
  --ink:        #001D3D;   /* azul profundo principal */
  --ink-deep:   #00111f;   /* secciones más oscuras */
  --ink-mid:    #002a54;   /* variación media */
  --ink-lift:   #0a3060;   /* hover sobre fondos oscuros */

  /* Fondos claros */
  --white:      #ffffff;
  --fog:        #f4f2ee;   /* fondo secciones alternas */
  --fog-mid:    #e8e4de;   /* hover/borde en fondo claro */
  --bone:       #f0ede8;

  /* Texto sobre fondos oscuros — CONTRASTE MEJORADO */
  --on-dark-h:  #ffffff;          /* títulos sobre navy */
  --on-dark-b:  #c8d8e6;          /* cuerpo sobre navy (azul muy claro) */
  --on-dark-s:  #8dafc8;          /* texto secundario/apoyo sobre navy */
  --on-dark-d:  #5a7a92;          /* texto muy tenue sobre navy */

  /* Texto sobre fondos claros — CONTRASTE MEJORADO */
  --on-light-h: #001D3D;          /* títulos sobre blanco/fog */
  --on-light-b: #162d44;          /* cuerpo sobre blanco */
  --on-light-s: #2e4f68;          /* secundario sobre blanco */
  --on-light-d: #4a6a84;          /* apoyo/pie sobre blanco */

  /* Acento dorado */
  --gold:       #b8965a;
  --gold-l:     #d4b07a;
  --gold-d:     #7a5e30;

  /* Bordes */
  --rule:       rgba(0,29,61,0.12);
  --rule-inv:   rgba(255,255,255,0.12);
  --rule-inv-s: rgba(255,255,255,0.07);

  /* Tipografías */
  --serif:  'EB Garamond', Georgia, serif;
  --sans:   'DM Sans', sans-serif;
}

/* ─────────────────────────────────────────
   RESET
───────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html  { scroll-behavior: smooth; }
img   { display: block; max-width: 100%; height: auto; }

body {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.75;
  color: var(--on-light-b);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

/* ─────────────────────────────────────────
   LAYOUT
───────────────────────────────────────── */
.w   { max-width: 740px;  margin: 0 auto; padding: 0 32px; }
.wl  { max-width: 1060px; margin: 0 auto; padding: 0 32px; }

/* ─────────────────────────────────────────
   UTILIDADES DE TIPOGRAFÍA
───────────────────────────────────────── */
.label {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--gold);
  display: block;
}
.label--inv   { color: var(--gold-l); }
.label--muted { color: var(--on-dark-s); }

.rule-h {
  width: 32px; height: 1px;
  background: var(--gold);
  margin: 18px 0 24px;
}
.rule-h--inv { background: var(--gold-l); }
.rule-h--sm  { margin: 12px 0 16px; }

/* ─────────────────────────────────────────
   ANIMACIONES
───────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─────────────────────────────────────────
   NAV
───────────────────────────────────────── */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  padding: 0 40px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(0,17,31,0.97);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule-inv-s);
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

/* ── LOGO: sustituir SVG inline por imagen ──
   Si tienes el logo como archivo:
   <img src="assets/images/logo-mapa.svg" alt="MAPA Project" style="height:36px">
   Si no, el SVG inline del HTML se mantiene.
*/

.nav-m {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.28em;
  color: var(--on-dark-h);
  text-transform: uppercase;
  line-height: 1.1;
}
.nav-m span {
  display: block;
  font-size: 8px;
  font-weight: 400;
  letter-spacing: 0.22em;
  color: var(--on-dark-s);
  margin-top: 2px;
}

.nav-links { display: flex; align-items: center; gap: 32px; }

.nav-link {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.12em;
  color: var(--on-dark-s);
  text-decoration: none;
  transition: color 0.2s;
}
.nav-link:hover { color: var(--on-dark-h); }

.nav-cta {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--fog);
  padding: 9px 22px;
  text-decoration: none;
  border: 1px solid var(--fog);
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.nav-cta:hover {
  background: transparent;
  color: var(--on-dark-h);
  border-color: rgba(255,255,255,0.35);
}

/* ─────────────────────────────────────────
   BOTONES GLOBALES
───────────────────────────────────────── */
.btn-primary {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--fog);
  padding: 15px 36px;
  text-decoration: none;
  border: 1px solid var(--fog);
  display: inline-block;
  transition: background 0.25s, color 0.25s, border-color 0.25s;
  cursor: pointer;
}
.btn-primary:hover {
  background: transparent;
  color: var(--on-dark-h);
  border-color: rgba(255,255,255,0.4);
}

.btn-text {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--on-dark-s);
  text-decoration: none;
  border-bottom: 1px solid var(--on-dark-d);
  padding-bottom: 2px;
  transition: color 0.2s, border-color 0.2s;
}
.btn-text:hover { color: var(--on-dark-h); border-color: var(--on-dark-h); }

/* ─────────────────────────────────────────
   01 · HERO
───────────────────────────────────────── */
#hero {
  background: var(--ink);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 0 80px;
  position: relative;
  overflow: hidden;
}

#hero::before {
  content: 'MAPA';
  position: absolute;
  bottom: -60px; right: -40px;
  font-family: var(--serif);
  font-size: clamp(200px, 26vw, 380px);
  font-weight: 500;
  letter-spacing: -0.04em;
  color: rgba(255,255,255,0.022);
  line-height: 1;
  user-select: none;
  pointer-events: none;
}

#hero::after {
  content: '';
  position: absolute;
  top: 64px; bottom: 0; left: 0;
  width: 2px;
  background: linear-gradient(to bottom, transparent 0%, var(--gold) 30%, var(--gold-d) 70%, transparent 100%);
}

.hero-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: end;
  padding: 0 40px;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

.hero-left   { padding-right: 80px; }

.hero-program-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 44px;
  animation: fadeUp 0.7s ease 0.1s both;
}

.hero-tag-line { width: 24px; height: 1px; background: var(--gold); }

/* Títulos hero */
#hero h1 {
  font-family: var(--serif);
  font-size: clamp(40px, 5vw, 68px);
  font-weight: 400;
  line-height: 1.10;
  letter-spacing: -0.01em;
  color: var(--on-dark-h);          /* blanco puro */
  margin-bottom: 32px;
  animation: fadeUp 0.9s ease 0.25s both;
}
#hero h1 em { font-style: italic; color: var(--gold-l); }

.hero-deck {
  font-size: 16px;
  font-weight: 300;
  color: var(--on-dark-b);          /* azul muy claro, legible */
  line-height: 1.80;
  max-width: 440px;
  margin-bottom: 52px;
  animation: fadeUp 0.9s ease 0.40s both;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 24px;
  animation: fadeUp 0.9s ease 0.55s both;
}

/* Panel derecho */
.hero-right {
  border-left: 1px solid var(--rule-inv-s);
  padding-left: 60px;
  padding-bottom: 8px;
  animation: fadeUp 0.9s ease 0.45s both;
}

.hero-stat-list { list-style: none; }

.hero-stat {
  padding: 22px 0;
  border-bottom: 1px solid var(--rule-inv-s);
}
.hero-stat:last-child { border-bottom: none; }

.hero-stat-num {
  font-family: var(--serif);
  font-size: 36px;
  font-weight: 400;
  color: var(--on-dark-h);
  line-height: 1;
  margin-bottom: 4px;
}

.hero-stat-desc {
  font-size: 13px;
  color: var(--on-dark-b);
  font-weight: 300;
  letter-spacing: 0.02em;
}

.hero-scroll {
  position: absolute;
  bottom: 32px; left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--on-dark-d);
  font-family: var(--sans);
}
.hero-scroll-line {
  width: 1px; height: 32px;
  background: linear-gradient(to bottom, var(--on-dark-d), transparent);
}

/* ─────────────────────────────────────────
   02 · DESCRIPCIÓN
───────────────────────────────────────── */
#descripcion {
  background: var(--white);
  padding: 110px 0;
  border-bottom: 1px solid var(--rule);
}

#descripcion .layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 80px;
  align-items: start;
}

#descripcion .sidebar p {
  font-size: 13px;
  color: var(--on-light-s);
  line-height: 1.7;
}

#descripcion h2 {
  font-family: var(--serif);
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 400;
  line-height: 1.30;
  color: var(--on-light-h);
  margin-bottom: 28px;
}

#descripcion .body p {
  font-size: 16px;
  color: var(--on-light-b);
  line-height: 1.85;
  margin-bottom: 20px;
  max-width: 620px;
}
#descripcion .body p:last-child { margin-bottom: 0; }

/* ─────────────────────────────────────────
   03 · PARA QUIÉN
───────────────────────────────────────── */
#para-quien {
  background: var(--ink);
  padding: 110px 0;
}

#para-quien .intro { max-width: 580px; margin-bottom: 72px; }

#para-quien h2 {
  font-family: var(--serif);
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 400;
  color: var(--on-dark-h);
  line-height: 1.28;
  margin-bottom: 20px;
}

#para-quien .intro p {
  font-size: 16px;
  color: var(--on-dark-b);
  line-height: 1.80;
}

.perfil-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--rule-inv-s);
  border: 1px solid var(--rule-inv-s);
  margin-bottom: 56px;
}

.perfil-card { background: var(--ink-deep); padding: 40px 36px; transition: background 0.25s; }
.perfil-card:hover { background: var(--ink-lift); }

.perfil-card h3 {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-l);
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--rule-inv-s);
}

.perfil-card ul { list-style: none; }

.perfil-card ul li {
  font-size: 14px;
  color: var(--on-dark-b);
  padding: 10px 0;
  border-bottom: 1px solid var(--rule-inv-s);
  display: flex;
  align-items: flex-start;
  gap: 12px;
  line-height: 1.6;
}
.perfil-card ul li:last-child { border-bottom: none; }

.perfil-card.si li::before {
  content: '—'; color: var(--gold);
  flex-shrink: 0; font-size: 12px; margin-top: 2px;
}
.perfil-card.no li::before {
  content: '—'; color: var(--rule-inv);
  flex-shrink: 0; font-size: 12px; margin-top: 2px;
}

.perfil-nota {
  font-size: 15px;
  color: var(--on-dark-b);
  line-height: 1.75;
  max-width: 560px;
  font-style: italic;
  font-family: var(--serif);
  border-left: 1px solid var(--gold-d);
  padding-left: 24px;
}

/* ─────────────────────────────────────────
   04 · EL PROBLEMA
───────────────────────────────────────── */
#el-problema {
  background: var(--fog);
  padding: 110px 0;
  border-bottom: 1px solid var(--rule);
}

#el-problema .layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}

#el-problema h2 {
  font-family: var(--serif);
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 400;
  line-height: 1.28;
  color: var(--on-light-h);
  margin-bottom: 28px;
}

#el-problema .col-left p {
  font-size: 16px;
  color: var(--on-light-b);
  line-height: 1.85;
  margin-bottom: 20px;
}

.tension-list { list-style: none; margin-top: 8px; }

.tension-list li {
  font-size: 15px;
  color: var(--on-light-b);
  padding: 16px 0;
  border-bottom: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 12px;
  line-height: 1.6;
}
.tension-list li:first-child { border-top: 1px solid var(--rule); }

.tension-n {
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  color: var(--gold);
  padding-top: 2px;
}

/* ─────────────────────────────────────────
   05 · METODOLOGÍA
───────────────────────────────────────── */
#metodologia { background: var(--ink-deep); padding: 110px 0; }

#metodologia .intro { max-width: 620px; margin-bottom: 72px; }

#metodologia h2 {
  font-family: var(--serif);
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 400;
  color: var(--on-dark-h);
  line-height: 1.28;
  margin-bottom: 20px;
}

#metodologia .intro p {
  font-size: 16px;
  color: var(--on-dark-b);
  line-height: 1.85;
}

.mapa-pillars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--rule-inv-s);
  border: 1px solid var(--rule-inv-s);
  margin-bottom: 72px;
}

.mapa-pillar {
  background: var(--ink-deep);
  padding: 44px 32px;
  transition: background 0.3s;
  position: relative;
  overflow: hidden;
}
.mapa-pillar:hover { background: var(--ink-lift); }

.mapa-pillar::before {
  content: attr(data-l);
  position: absolute;
  bottom: -20px; right: -4px;
  font-family: var(--serif);
  font-size: 110px; font-weight: 500;
  color: rgba(255,255,255,0.02);
  line-height: 1;
  pointer-events: none;
}

.mapa-pl {
  font-family: var(--serif);
  font-size: 56px; font-weight: 400;
  color: var(--gold);
  line-height: 1;
  margin-bottom: 16px;
}

.mapa-pillar h3 {
  font-family: var(--sans);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--on-dark-h);
  margin-bottom: 12px;
}

.mapa-pillar p { font-size: 13px; color: var(--on-dark-b); line-height: 1.70; }

.metodologia-nota {
  background: var(--ink-mid);
  border: 1px solid var(--rule-inv-s);
  padding: 48px 52px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
}

.metodologia-nota h3 {
  font-family: var(--serif);
  font-size: 22px; font-weight: 400;
  color: var(--on-dark-h);
  line-height: 1.40;
  margin-bottom: 16px;
}

.metodologia-nota .col-left p,
.metodologia-nota .col-right p {
  font-size: 14px;
  color: var(--on-dark-b);
  line-height: 1.80;
  margin-bottom: 14px;
}

/* ─────────────────────────────────────────
   06 · PERCURSO
───────────────────────────────────────── */
#percurso { background: var(--white); padding: 110px 0; border-bottom: 1px solid var(--rule); }

#percurso h2 {
  font-family: var(--serif);
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 400;
  color: var(--on-light-h);
  line-height: 1.28;
  margin-bottom: 12px;
}

#percurso .deck {
  font-size: 16px;
  color: var(--on-light-s);
  max-width: 520px;
  line-height: 1.80;
  margin-bottom: 64px;
}

.timeline { display: flex; flex-direction: column; gap: 1px; }

.tl-item {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 28px;
  align-items: center;
  padding: 20px 24px;
  background: var(--fog);
  border: 1px solid var(--rule);
  transition: background 0.2s, border-color 0.2s;
}
.tl-item:hover { background: var(--fog-mid); border-color: var(--gold-d); }

.tl-n {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  color: var(--gold);
  letter-spacing: 0.02em;
}

.tl-body h4 {
  font-family: var(--sans);
  font-size: 14px; font-weight: 500;
  color: var(--on-light-h);
  margin-bottom: 3px;
}

.tl-body p {
  font-size: 13px;
  color: var(--on-light-s);
  line-height: 1.55;
}

.tl-tag {
  font-size: 10px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold);
  border: 1px solid var(--gold-d);
  padding: 4px 10px;
  white-space: nowrap; flex-shrink: 0;
}

/* ─────────────────────────────────────────
   07 · MENTORÍAS 1:1
───────────────────────────────────────── */
#mentorias { background: var(--ink); padding: 110px 0; }

#mentorias h2 {
  font-family: var(--serif);
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 400;
  color: var(--on-dark-h);
  line-height: 1.28;
  margin-bottom: 14px;
}

#mentorias .deck {
  font-size: 16px;
  color: var(--on-dark-b);
  max-width: 540px;
  line-height: 1.80;
  margin-bottom: 64px;
}

.mentorias-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--rule-inv-s);
  border: 1px solid var(--rule-inv-s);
}

.mentoria-card { background: var(--ink-deep); padding: 48px 44px; }

.mentoria-num {
  font-family: var(--serif);
  font-size: 13px; font-style: italic;
  color: var(--gold-l);
  margin-bottom: 20px;
  display: block;
}

.mentoria-card h3 {
  font-family: var(--serif);
  font-size: 22px; font-weight: 400;
  color: var(--on-dark-h);
  line-height: 1.35;
  margin-bottom: 16px;
}

.mentoria-card .momento {
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold-l);
  margin-bottom: 20px; display: block;
}

.mentoria-card p {
  font-size: 14px;
  color: var(--on-dark-b);
  line-height: 1.80;
  margin-bottom: 12px;
}

.mentoria-card ul { list-style: none; margin-top: 8px; }

.mentoria-card ul li {
  font-size: 13px;
  color: var(--on-dark-b);
  padding: 9px 0;
  border-bottom: 1px solid var(--rule-inv-s);
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.6;
}
.mentoria-card ul li:last-child { border-bottom: none; }
.mentoria-card ul li::before { content: '→'; color: var(--gold); flex-shrink: 0; font-size: 11px; margin-top: 3px; }

/* ─────────────────────────────────────────
   08 · QUÉ DESARROLLA
───────────────────────────────────────── */
#desarrolla { background: var(--fog); padding: 110px 0; border-bottom: 1px solid var(--rule); }

#desarrolla h2 {
  font-family: var(--serif);
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 400;
  color: var(--on-light-h);
  line-height: 1.28;
  margin-bottom: 14px;
}

#desarrolla .deck {
  font-size: 16px;
  color: var(--on-light-s);
  max-width: 520px;
  line-height: 1.80;
  margin-bottom: 64px;
}

.desarrolla-list { list-style: none; }

.desarrolla-list li {
  padding: 22px 0;
  border-bottom: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 24px;
  align-items: start;
}
.desarrolla-list li:first-child { border-top: 1px solid var(--rule); }

.dev-n {
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  color: var(--gold);
  padding-top: 3px;
}

.dev-text h4 {
  font-family: var(--sans);
  font-size: 15px; font-weight: 500;
  color: var(--on-light-h);
  margin-bottom: 4px;
}

.dev-text p { font-size: 14px; color: var(--on-light-s); line-height: 1.65; }

/* ─────────────────────────────────────────
   09 · EMENTA
───────────────────────────────────────── */
#ementa { background: var(--white); padding: 110px 0; border-bottom: 1px solid var(--rule); }

#ementa h2 {
  font-family: var(--serif);
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 400;
  color: var(--on-light-h);
  line-height: 1.28;
  margin-bottom: 14px;
}

#ementa .deck {
  font-size: 16px;
  color: var(--on-light-s);
  max-width: 520px;
  line-height: 1.80;
  margin-bottom: 64px;
}

.modulos { display: flex; flex-direction: column; gap: 1px; }

.modulo {
  border: 1px solid var(--rule);
  padding: 24px 28px;
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 24px;
  align-items: center;
  background: var(--white);
  transition: background 0.2s, border-color 0.2s;
}
.modulo:hover { background: var(--fog); border-color: var(--gold-d); }

.mod-sem {
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  color: var(--gold);
}

.mod-body h4 {
  font-family: var(--sans);
  font-size: 14px; font-weight: 500;
  color: var(--on-light-h);
  margin-bottom: 3px;
}

.mod-body p { font-size: 13px; color: var(--on-light-s); line-height: 1.55; }

.mod-tag {
  font-size: 10px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold);
  border: 1px solid var(--gold-d);
  padding: 4px 10px;
  white-space: nowrap; flex-shrink: 0;
}

/* ─────────────────────────────────────────
   10 · TESTIMONIOS
───────────────────────────────────────── */
#testimonios {
  background: var(--fog);
  padding: 110px 0;
  border-bottom: 1px solid var(--rule);
}

#testimonios h2 {
  font-family: var(--serif);
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 400;
  color: var(--on-light-h);
  line-height: 1.28;
  margin-bottom: 14px;
}

#testimonios .deck {
  font-size: 16px;
  color: var(--on-light-s);
  max-width: 520px;
  line-height: 1.80;
  margin-bottom: 64px;
}

.testimonios-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}

.testimonio-card {
  background: var(--white);
  border: 1px solid var(--rule);
  padding: 44px 40px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* Comilla decorativa */
.testimonio-quote-mark {
  font-family: var(--serif);
  font-size: 64px;
  line-height: 0.7;
  color: var(--gold);
  opacity: 0.5;
  user-select: none;
  display: block;
  margin-bottom: 4px;
}

.testimonio-text {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 400;
  font-style: italic;
  color: var(--on-light-b);
  line-height: 1.75;
  flex: 1;
}

.testimonio-footer {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
}

/* Foto del testimonial */
.testimonio-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid var(--rule);
  background: var(--fog-mid);
}

/* Placeholder si no hay foto */
.testimonio-avatar-placeholder {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--ink);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 18px;
  color: var(--gold);
  font-weight: 400;
}

.testimonio-info h4 {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--on-light-h);
  margin-bottom: 2px;
}

.testimonio-info p {
  font-size: 12px;
  color: var(--on-light-s);
  letter-spacing: 0.04em;
}

/* ─────────────────────────────────────────
   11 · MENTOR
───────────────────────────────────────── */
#mentor { background: var(--ink-deep); padding: 110px 0; }

.mentor-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 72px;
  align-items: start;
}

/* ── FOTO DEL MENTOR ──────────────────────
   Instrucciones de implementación:
   1. Coloca la foto en: assets/images/mentor-roberto.jpg
   2. Dimensiones recomendadas: 440 × 580 px (ratio 3:4)
   3. El nombre del archivo es sensible a mayúsculas en Hostinger
   4. Usa siempre el mismo nombre exacto que en el HTML
────────────────────────────────────────── */
.mentor-photo-wrap {
  width: 100%;
  aspect-ratio: 3 / 4;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--rule-inv-s);
  background: var(--ink-lift);   /* color de fallback si la imagen no carga */
}

.mentor-photo-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* Gradiente sobre la foto */
.mentor-photo-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,17,31,0.4) 0%, transparent 50%);
  pointer-events: none;
}

/* Placeholder de iniciales (visible si la imagen falla) */
.mentor-photo-initials {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 52px;
  font-weight: 400;
  color: var(--gold);
  opacity: 0.5;
  /* Se oculta en JS cuando la imagen carga correctamente */
}

.mentor-name {
  font-family: var(--serif);
  font-size: 32px; font-weight: 400;
  color: var(--on-dark-h);
  margin: 0 0 6px;
  line-height: 1.2;
}

.mentor-titulo {
  font-size: 13px;
  color: var(--gold-l);
  letter-spacing: 0.04em;
  margin-bottom: 32px;
  font-weight: 300;
}

.mentor-bio {
  font-size: 15px;
  color: var(--on-dark-b);
  line-height: 1.85;
  margin-bottom: 16px;
  max-width: 560px;
}

.mentor-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }

.mentor-tag {
  font-size: 10px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--on-dark-s);
  border: 1px solid var(--rule-inv-s);
  padding: 6px 14px;
}

/* ─────────────────────────────────────────
   12 · FAQ
───────────────────────────────────────── */
#faq { background: var(--white); padding: 110px 0; border-bottom: 1px solid var(--rule); }

#faq h2 {
  font-family: var(--serif);
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 400;
  color: var(--on-light-h);
  line-height: 1.28;
  margin-bottom: 14px;
}

#faq .deck {
  font-size: 16px;
  color: var(--on-light-s);
  max-width: 500px;
  line-height: 1.80;
  margin-bottom: 56px;
}

.faq-list { display: flex; flex-direction: column; }
.faq-item { border-bottom: 1px solid var(--rule); }
.faq-item:first-of-type { border-top: 1px solid var(--rule); }

.faq-toggle { display: none; }

.faq-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 22px 0;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 15px; font-weight: 400;
  color: var(--on-light-b);
  transition: color 0.2s;
  user-select: none;
}
.faq-label:hover { color: var(--gold-d); }

.faq-icon {
  width: 20px; height: 20px;
  flex-shrink: 0;
  border: 1px solid var(--gold-d);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; color: var(--gold);
  font-weight: 300; line-height: 1;
  transition: transform 0.3s, background 0.2s;
}

.faq-toggle:checked ~ .faq-label .faq-icon {
  transform: rotate(45deg);
  background: var(--gold);
  color: var(--ink);
  border-color: var(--gold);
}

.faq-body { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; }
.faq-toggle:checked ~ .faq-body { max-height: 300px; }

.faq-body p {
  font-size: 14px;
  color: var(--on-light-s);
  line-height: 1.85;
  padding-bottom: 24px;
  max-width: 600px;
}

/* ─────────────────────────────────────────
   13 · CTA / TYPEFORM
───────────────────────────────────────── */
#cta {
  background: var(--ink);
  padding: 130px 0;
  position: relative;
  overflow: hidden;
}

#cta::before {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(135deg, rgba(0,42,84,0.6) 0%, transparent 50%),
    repeating-linear-gradient(-45deg, transparent, transparent 60px,
      rgba(255,255,255,0.006) 60px, rgba(255,255,255,0.006) 61px);
  pointer-events: none;
}

.cta-inner { position: relative; z-index: 2; }

.cta-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 100px;
  align-items: start;
}

.cta-left h2 {
  font-family: var(--serif);
  font-size: clamp(28px, 3.5vw, 46px);
  font-weight: 400;
  color: var(--on-dark-h);
  line-height: 1.22;
  margin-bottom: 20px;
}
.cta-left h2 em { font-style: italic; color: var(--gold-l); }

.cta-left p {
  font-size: 15px;
  color: var(--on-dark-b);
  line-height: 1.80;
  margin-bottom: 28px;
  max-width: 420px;
}

.cta-left .nota {
  font-size: 14px;
  color: var(--on-dark-b);
  line-height: 1.75;
  border-left: 1px solid var(--gold-d);
  padding-left: 18px;
  font-style: italic;
  font-family: var(--serif);
  max-width: 380px;
}

/* Bloque Typeform */
.cta-right {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--rule-inv-s);
  padding: 48px 44px;
}

.cta-right h3 {
  font-family: var(--serif);
  font-size: 20px; font-weight: 400;
  color: var(--on-dark-h);
  line-height: 1.35;
  margin-bottom: 12px;
}

.cta-right .cta-sub {
  font-size: 14px;
  color: var(--on-dark-b);
  line-height: 1.75;
  margin-bottom: 32px;
}

/* Botón principal → Typeform */
.btn-typeform {
  display: block;
  width: 100%;
  font-family: var(--sans);
  font-size: 12px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink);
  background: var(--fog);
  padding: 18px 24px;
  text-decoration: none;
  border: 1px solid var(--fog);
  text-align: center;
  transition: background 0.25s, color 0.25s, border-color 0.25s;
  cursor: pointer;
}
.btn-typeform:hover {
  background: transparent;
  color: var(--on-dark-h);
  border-color: rgba(255,255,255,0.35);
}

.cta-disclaimer {
  font-size: 12px;
  color: var(--on-dark-d);
  line-height: 1.65;
  margin-top: 16px;
}

.cta-alt {
  font-size: 13px;
  color: var(--on-dark-d);
  margin-top: 12px;
}
.cta-alt a {
  color: var(--gold-l);
  text-decoration: none;
  border-bottom: 1px solid var(--gold-d);
  transition: color 0.2s;
}
.cta-alt a:hover { color: var(--on-dark-h); }

/* ─────────────────────────────────────────
   FOOTER
───────────────────────────────────────── */
footer {
  background: var(--ink-deep);
  border-top: 1px solid var(--rule-inv-s);
  padding: 36px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

.footer-brand { display: flex; align-items: center; gap: 12px; }

.footer-wm {
  font-family: var(--sans);
  font-size: 12px; font-weight: 500;
  letter-spacing: 0.22em;
  color: var(--on-dark-h); text-transform: uppercase; line-height: 1.2;
}
.footer-wm small {
  display: block; font-size: 8px; font-weight: 400;
  letter-spacing: 0.18em; color: var(--on-dark-d); margin-top: 2px;
}

.footer-tagline { font-size: 13px; color: var(--on-dark-d); }

.footer-link {
  font-size: 11px; color: var(--on-dark-d); text-decoration: none;
  letter-spacing: 0.06em; border-bottom: 1px solid var(--rule-inv-s); padding-bottom: 1px;
  transition: color 0.2s;
}
.footer-link:hover { color: var(--on-dark-b); }

/* ─────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────── */
@media (max-width: 960px) {
  nav { padding: 0 20px; }
  .nav-links { gap: 20px; }
  .hero-inner { padding: 0 24px; }
  .hero-left  { padding-right: 40px; }
  .hero-right { padding-left: 32px; }
}

@media (max-width: 760px) {
  nav { padding: 0 16px; }
  .nav-links { display: none; }

  .hero-inner { grid-template-columns: 1fr; padding: 100px 24px 0; }
  .hero-left  { padding-right: 0; }
  .hero-right {
    border-left: none;
    border-top: 1px solid var(--rule-inv-s);
    padding-left: 0; padding-top: 32px; margin-top: 40px;
  }
  .hero-stat-list { display: flex; }
  .hero-stat { flex: 1; border-bottom: none; border-right: 1px solid var(--rule-inv-s); padding: 16px; }
  .hero-stat:last-child { border-right: none; }

  #descripcion .layout    { grid-template-columns: 1fr; gap: 32px; }
  .perfil-grid            { grid-template-columns: 1fr; }
  #el-problema .layout    { grid-template-columns: 1fr; gap: 48px; }
  .mapa-pillars           { grid-template-columns: 1fr 1fr; }
  .metodologia-nota       { grid-template-columns: 1fr; gap: 32px; padding: 32px 24px; }
  .mentorias-grid         { grid-template-columns: 1fr; }
  .cta-layout             { grid-template-columns: 1fr; gap: 48px; }
  .testimonios-grid       { grid-template-columns: 1fr; }

  .mentor-layout { grid-template-columns: 1fr; gap: 36px; }
  .mentor-photo-wrap { width: 120px; aspect-ratio: 1; border-radius: 50%; }

  .modulo   { grid-template-columns: 56px 1fr; }
  .mod-tag  { display: none; }
  .tl-item  { grid-template-columns: 56px 1fr; }
  .tl-tag   { display: none; }

  .w, .wl  { padding: 0 20px; }
  footer    { flex-direction: column; align-items: flex-start; padding: 28px 20px; }
}

@media (max-width: 480px) {
  .mapa-pillars { grid-template-columns: 1fr; }
  .hero-stat-list { flex-direction: column; }
  .hero-stat { border-right: none; border-bottom: 1px solid var(--rule-inv-s); }
  .hero-stat:last-child { border-bottom: none; }
  .metodologia-nota { padding: 28px 20px; }
  .mentoria-card { padding: 32px 24px; }
  .cta-right     { padding: 32px 24px; }
}

.section-cta {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 56px auto 72px;
  text-align: center;
}

.section-cta .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}