/* =========================================================
   Sanar para Hablar — Landing page
   Logra Psicología
   ---------------------------------------------------------
   1. Variables de marca ....... línea 12
   2. Reset y base ............. línea 40
   3. Tipografía ............... línea 70
   4. Botones .................. línea 105
   5. Layout y secciones ....... línea 140
   6. Header ................... línea 175
   7. Hero ..................... línea 205
   8. Tarjetas ................. línea 265
   9. Bloques del programa ..... línea 315
  10. Conferencista ............ línea 345
  11. Testimonios ............. línea 365
  12. Inscripción / precio .... línea 395
  13. FAQ ..................... línea 440
  14. CTA final y footer ...... línea 470
  15. Animaciones ............. línea 500
  16. Responsive ............. línea 515
   ========================================================= */

/* ---------- 1. Variables de marca ---------- */
:root {
  /* Colores */
  --verde:            #2E5D4F;   /* verde marca (botones, frases puente) */
  --verde-oscuro:     #244A3F;
  --verde-profundo:   #1C3830;   /* footer */
  --verde-claro:      #F2F6F0;
  --terracota:        #9A4D2C;   /* acento: fecha de la edición, citas, etiquetas */
  --terracota-claro:  #E3A27C;
  --bosque:           #1E3A32;   /* títulos sobre salvia */
  --salvia:           #E7EEE6;   /* fondo base */
  --salvia-clara:     #F2F6F0;
  --salvia-media:     #DCE6DA;
  --crema:            #F8F5F1;   /* fondo base */
  --crema-oscuro:     #EFE9E2;
  --blanco:           #FFFFFF;
  --tinta:            #1B2F29;   /* texto principal */
  --tinta-media:      #2F423B;
  --texto:            #3E504A;   /* párrafos (AAA sobre salvia) */
  --texto-suave:      #4F605A;   /* metadatos (AA sobre salvia media) */
  --linea:            rgba(30, 58, 50, 0.12);

  /* Tipografía */
  --serif: 'Newsreader', Georgia, serif;
  --sans:  'Manrope', system-ui, -apple-system, sans-serif;

  /* Ritmo */
  --ancho:      1200px;
  --ancho-texto: 900px;
  --pad-x:      clamp(20px, 4vw, 56px);
  --pad-y:      clamp(48px, 6vw, 96px);
  --radio:      26px;
  --radio-sm:   20px;

  /* Movimiento */
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- 2. Reset y base ---------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--salvia);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

a { color: var(--verde); text-decoration: none; transition: color .3s ease; }
a:hover { color: var(--terracota); }

::selection { background: #CFE0D2; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- 3. Tipografía ---------- */
h1, h2, h3 { font-family: var(--serif); font-weight: 300; letter-spacing: -0.022em; margin: 0; text-wrap: pretty; }

.h-hero  { font-size: clamp(46px, 6.4vw, 80px); line-height: 1.02; letter-spacing: -0.028em; color: var(--blanco); }
.h-1     { font-size: clamp(32px, 4.6vw, 56px); line-height: 1.14; }
.h-2     { font-size: clamp(30px, 4.2vw, 50px); line-height: 1.14; }
.h-3     { font-family: var(--serif); font-weight: 400; font-size: 26px; line-height: 1.22; letter-spacing: -0.01em; }

.kicker {
  margin: 0 0 18px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--terracota);
}

.lead {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(21px, 2.5vw, 29px);
  line-height: 1.45;
  text-wrap: pretty;
}

p { margin: 0; text-wrap: pretty; }
.p     { font-size: 17.5px; line-height: 1.8; color: var(--texto); max-width: 56ch; }
.p-sm  { font-size: 15.5px; line-height: 1.75; color: var(--texto); }
.p-meta{ font-size: 14px; line-height: 1.65; color: var(--texto-suave); }

.frase-puente {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(21px, 2.6vw, 31px);
  line-height: 1.5;
  color: var(--verde);
  max-width: 38ch;
  text-align: center;
  margin: clamp(20px, 3vw, 36px) auto 0;
}

/* ---------- 4. Botones ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 21px 40px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 16.5px;
  font-weight: 700;
  letter-spacing: 0.005em;
  cursor: pointer;
  transition: transform .4s var(--ease), background-color .4s var(--ease),
              color .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:focus-visible, .faq__boton:focus-visible { outline: 3px solid var(--terracota); outline-offset: 3px; }

.btn--claro { background: var(--crema); color: #25453D; box-shadow: 0 18px 40px -20px rgba(0,0,0,.6); }
.btn--claro:hover { background: var(--blanco); color: var(--tinta); box-shadow: 0 24px 48px -20px rgba(0,0,0,.65); }

.btn--verde { background: var(--verde); color: var(--crema); box-shadow: 0 20px 40px -20px rgba(53,92,82,.85); }
.btn--verde:hover { background: var(--verde-oscuro); color: var(--blanco); box-shadow: 0 26px 50px -20px rgba(53,92,82,.9); }

.btn--linea { border-color: rgba(30,58,50,.34); color: var(--bosque); font-weight: 600; font-size: 16px; padding: 21px 32px; }
.btn--linea:hover { border-color: rgba(30,58,50,.7); background: rgba(255,255,255,.55); color: var(--bosque); }

.btn--bloque { display: flex; width: 100%; padding: 22px 26px; font-size: 17px; }
.btn--sm { min-height: 44px; padding: 12px 24px; font-size: 14px; font-weight: 600; }

/* ---------- 5. Layout y secciones ---------- */
.seccion { position: relative; overflow: hidden; }
.contenedor { position: relative; max-width: var(--ancho); margin: 0 auto; padding: var(--pad-y) var(--pad-x); }
.contenedor--estrecho { max-width: var(--ancho-texto); }

.dos-columnas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(40px, 6vw, 88px);
  align-items: center;
}
.dos-columnas--arriba { align-items: start; gap: clamp(36px, 5vw, 72px); }
.dos-columnas > * { min-width: 0; }
/* «Quién te acompaña»: la columna mínima de 320 px no cabía en pantallas de 320 px (20 px de desborde).
   min() la limita al ancho disponible; desde 360 px el resultado es idéntico al anterior. */
.dos-columnas--equipo { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }

/* «Inscripción»: una sola columna en todos los tamaños — bloque editorial (como el relato del hero) y, debajo, la tarjeta */
.inscripcion__intro { max-width: var(--ancho-texto); margin: 0 auto clamp(48px, 6vw, 80px); }
/* Bloque 1 (conexión y decisión): serif ligera. Bloque 2 (propuesta): párrafos breves en sans; la frase clave es el punto focal. */
.inscripcion__lead {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(23px, 2.4vw, 31px); line-height: 1.5; letter-spacing: -0.008em;
  color: var(--tinta);
  text-wrap: balance;
}
.inscripcion__propuesta { margin-top: clamp(40px, 5vw, 64px); }
.inscripcion__texto {
  max-width: 62ch;
  font-size: clamp(17.5px, 1.4vw, 19px); line-height: 1.8;
  color: var(--texto);
}
.inscripcion__texto + .inscripcion__texto { margin-top: 18px; }
.inscripcion__clave {
  margin: clamp(26px, 3vw, 36px) 0;
  padding: 4px 0 4px clamp(20px, 2.4vw, 30px);
  border-left: 2px solid var(--terracota);
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(26px, 3vw, 38px); line-height: 1.3; letter-spacing: -0.012em;
  color: var(--verde);
  text-wrap: balance;
}
.inscripcion__tarjeta { max-width: 720px; margin: 0 auto; }

.rejilla { display: grid; gap: clamp(18px, 2.2vw, 26px); }
.rejilla--4 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: clamp(16px, 2vw, 24px); }
.rejilla--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.rejilla--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(22px, 3vw, 40px); }

/* Fondos por sección (el ritmo visual de la página) */
.fondo--blanco { background: var(--salvia-clara); }
.fondo--crema  { background: linear-gradient(170deg, #E9F0E7 0%, #E2EAE0 55%, #DFE8DD 100%); }
.fondo--crema-suave { background: linear-gradient(180deg, #F8F5F1 0%, #F2ECE4 100%); }
.fondo--crema-invertido { background: linear-gradient(180deg, #E2EAE0 0%, #ECF2EA 100%); }
.fondo--verde-claro { background: linear-gradient(160deg, #D9E5D8 0%, #E1EBE0 50%, #EAF1E8 100%); }
.fondo--verde-hero { background: radial-gradient(120% 90% at 78% 8%, #F6F9F4 0%, #E8F0E6 46%, #D9E5D7 100%); color: var(--tinta); }
.fondo--verde-cta { background: radial-gradient(110% 120% at 50% 0%, #2F5449 0%, #26443C 55%, #1F3A33 100%); color: #F1EDE7; }

/* Manchas de color difuminadas — puramente decorativas */
.mancha { position: absolute; border-radius: 50%; pointer-events: none; }
.mancha--hero-1 { top: -18%; right: -8%; width: 52vw; height: 52vw; max-width: 720px; max-height: 720px;
  background: radial-gradient(circle, rgba(255,255,255,.75) 0%, rgba(255,255,255,0) 65%); }
.mancha--hero-2 { bottom: -26%; left: -14%; width: 46vw; height: 46vw; max-width: 640px; max-height: 640px;
  background: radial-gradient(circle, rgba(227,162,124,.12) 0%, rgba(227,162,124,0) 68%); }
.mancha--verde { top: 12%; left: -10%; width: 38vw; height: 38vw; max-width: 520px; max-height: 520px;
  background: radial-gradient(circle, rgba(53,92,82,.07) 0%, rgba(53,92,82,0) 70%); }
.mancha--blanca { right: -12%; top: -14%; width: 44vw; height: 44vw; max-width: 600px; max-height: 600px;
  background: radial-gradient(circle, rgba(255,255,255,.65) 0%, rgba(255,255,255,0) 68%); }
.mancha--cta { top: -30%; left: 50%; transform: translateX(-50%); width: 80vw; height: 60vw; max-width: 900px; max-height: 700px;
  background: radial-gradient(circle, rgba(216,155,124,.16) 0%, rgba(216,155,124,0) 65%); }

/* ---------- 6. Header ---------- */
.header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(242, 246, 240, .88);
  backdrop-filter: blur(16px) saturate(1.2);
  border-bottom: 1px solid rgba(30,58,50,.1);
}
.header__inner {
  max-width: var(--ancho); margin: 0 auto;
  padding: 16px var(--pad-x);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.marca { display: flex; align-items: center; gap: 11px; }
.marca__logo {
  width: 42px;
  height: 42px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 50%;
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}
.marca__logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.marca__texto { display: flex; flex-direction: row; align-items: baseline; gap: 8px; line-height: 1.15; }
.marca__nombre { font-size: 16px; font-weight: 600; color: var(--tinta); }
.marca__sub { font-size: 13.5px; color: var(--texto-suave); }
.marca__sub::before { content: "·"; margin-right: 8px; color: rgba(30,58,50,.35); }
.marca__sub strong { font-weight: 600; color: var(--tinta-media); }
.header .btn--claro { box-shadow: none; background: var(--verde); color: var(--blanco); }
.header .btn--claro:hover { background: var(--verde-oscuro); color: var(--blanco); box-shadow: 0 10px 24px -12px rgba(30,58,50,.5); }

/* ---------- 7. Hero ---------- */
.hero .contenedor { padding: clamp(40px,8vw,120px) var(--pad-x) clamp(56px,8vw,120px); }
.hero__degradado {
  position: absolute; left: 0; right: 0; bottom: 0; height: 140px; pointer-events: none;
  background: linear-gradient(to bottom, rgba(242,246,240,0) 0%, rgba(242,246,240,.7) 100%);
}
.etiqueta {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 18px 8px 12px; margin-bottom: 32px;
  border: 1px solid rgba(255,255,255,.26); border-radius: 999px;
  background: rgba(255,255,255,.06);
  font-size: 11.5px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(255,255,255,.9);
}
.etiqueta__punto { width: 6px; height: 6px; border-radius: 50%; background: var(--terracota-claro); }

.hero .h-hero { margin-bottom: 24px; color: var(--bosque); }
.hero__lead { color: var(--tinta-media); font-weight: 400; max-width: 40ch; margin-bottom: 24px; }
.hero__texto { font-size: clamp(16.5px,1.5vw,18px); line-height: 1.8; color: var(--texto); max-width: 50ch; margin-bottom: 44px; }
.hero__texto--corto { max-width: 48ch; margin-bottom: 24px; }
.hero__texto--cierre { margin-bottom: 36px; }
.hero .btn--claro { background: var(--verde); color: var(--blanco); box-shadow: 0 18px 36px -20px rgba(30,58,50,.6); }
.hero .btn--claro:hover { background: var(--verde-oscuro); color: var(--blanco); box-shadow: 0 24px 44px -20px rgba(30,58,50,.65); }

/* Segunda edición: el único elemento nuevo y destacado de la página */
.edicion {
  max-width: 46ch; margin: 0 0 32px; padding: 20px 24px 22px;
  background: var(--blanco);
  border: 1px solid rgba(154,77,44,.24);
  border-radius: 18px;
  box-shadow: 0 22px 44px -32px rgba(30,58,50,.5);
}
.edicion__fecha {
  margin-bottom: 8px;
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(22px, 2.4vw, 28px); line-height: 1.2; letter-spacing: -0.012em;
  color: var(--terracota);
}
.edicion__nota { font-size: 15.5px; line-height: 1.65; color: var(--tinta-media); }

/* Las cuatro frases internas */
.hero__citas { margin: 0 0 28px; padding: 18px 26px; border-left: 2px solid var(--terracota); }
.hero__citas p {
  margin-bottom: 10px;
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: 19px; line-height: 1.7; color: var(--verde-oscuro);
}
.hero__citas p:last-child { margin-bottom: 0; }
.hero__pie { position: relative; max-width: var(--ancho); margin: 0 auto; padding: 0 var(--pad-x) clamp(56px,8vw,112px); }
.hero__acciones { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin-bottom: 38px; }
.hero__datos { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 28px; margin-top: 24px; text-align: center; font-size: 18px; font-weight: 500; color: var(--tinta-media); }
.hero__datos span[aria-hidden] { color: rgba(30,58,50,.3); }

.marco {
  position: relative; width: 100%; overflow: hidden;
  border-radius: 28px; background: var(--salvia-media);
}
.marco--vertical { aspect-ratio: 4 / 5; max-height: 600px;
  box-shadow: 0 50px 90px -50px rgba(0,0,0,.7); border: 1px solid rgba(255,255,255,.14); }
.marco--cuadrado { aspect-ratio: 3 / 2; max-width: 560px;   /* misma proporción que la foto original */
  box-shadow: 0 44px 84px -54px rgba(30,58,50,.6); }
.marco img { width: 100%; height: 100%; object-fit: cover; }

/* Video */
.hero__media {
  position: relative;
  width: 100%;
  max-width: 760px;
  justify-self: stretch;
  padding-bottom: 26px;
}

.marco--video {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;   /* misma proporción que la foto original: no se recorta */
  overflow: hidden;
  border-radius: 28px;
  background: var(--salvia-media);
  box-shadow: 0 44px 84px -54px rgba(30,58,50,.6);
}

.marco--video wistia-player {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.marco--video wistia-player,
.marco--video wistia-player * {
  box-sizing: border-box;
}

.marco--video iframe,
.marco--video video,
.marco--video script {
  display: none;
}

wistia-player[media-id='0zrnwtiw87']:not(:defined) {
  display: block;
  width: 100%;
  height: 100%;
  background: center / cover no-repeat url('https://fast.wistia.com/embed/medias/0zrnwtiw87/swatch');
  filter: blur(5px);
}

/* Placeholder visible mientras no haya foto real */
.marco__placeholder {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 24px; text-align: center;
  font-size: 13px; line-height: 1.6; color: #9A8E80;
  background: repeating-linear-gradient(45deg, #EDE5DA 0 12px, #E7E0D7 12px 24px);
}

.tarjeta-flotante {
  position: absolute; left: -8px; bottom: -6px; max-width: 290px;
  background: rgba(255,255,255,.97);
  border: 1px solid rgba(255,255,255,.6);
  border-radius: var(--radio-sm);
  padding: 18px 22px;
  box-shadow: 0 26px 52px -28px rgba(0,0,0,.6);
}
.tarjeta-flotante__nombre { font-family: var(--serif); font-size: 18px; line-height: 1.35; color: var(--tinta); margin-bottom: 6px; }
.tarjeta-flotante__rol { font-size: 12.5px; line-height: 1.55; color: var(--texto-suave); }

/* ---------- 8. Tarjetas ---------- */
.encabezado-seccion { max-width: 62ch; margin-bottom: clamp(48px, 6vw, 80px); }
.encabezado-seccion .h-1, .encabezado-seccion .h-2 { max-width: 22ch; }

.encabezado-seccion--doble {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(24px, 4vw, 64px); align-items: end;
  max-width: none; margin-bottom: clamp(48px, 6vw, 84px);
}
.encabezado-seccion--doble .h-1 { max-width: 16ch; }
.encabezado-seccion--doble p { font-size: 16px; line-height: 1.8; color: var(--texto-suave); max-width: 38ch; }

.tarjeta {
  border-radius: 22px;
  padding: clamp(26px, 2.8vw, 36px);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease), background-color .45s var(--ease);
}

.tarjeta--sintoma {
  background: linear-gradient(180deg, #FDFBF8 0%, #F8F5F1 100%);
  border: 1px solid rgba(29,42,39,.07);
}
.tarjeta--sintoma:hover {
  transform: translateY(-5px);
  border-color: rgba(53,92,82,.28);
  box-shadow: 0 24px 44px -30px rgba(29,42,39,.5);
}
.tarjeta--sintoma h3 { font-family: var(--sans); font-weight: 700; font-size: 17px; line-height: 1.35; letter-spacing: 0; color: var(--tinta); margin-bottom: 12px; }
.regla { display: block; width: 30px; height: 2px; background: var(--verde); margin-bottom: 22px; }

/* Recorrido numerado */
.panel-cristal {
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 28px;
  padding: clamp(30px, 3.4vw, 46px);
  box-shadow: 0 40px 80px -56px rgba(29,42,39,.6);
}
.panel-cristal__titulo {
  font-family: var(--serif); font-size: 22px; font-weight: 400; letter-spacing: -0.01em;
  color: var(--verde); margin-bottom: 24px;
}
.pasos { display: flex; flex-direction: column; gap: 26px; }
.paso { display: flex; gap: 18px; align-items: flex-start; }
.paso__num {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  background: var(--verde); color: var(--crema);
  font-family: var(--serif); font-size: 16px;
  display: flex; align-items: center; justify-content: center;
}
.paso p { font-size: 16px; line-height: 1.7; color: var(--tinta-media); padding-top: 4px; }
.paso strong { color: var(--tinta); font-weight: 700; }

/* ---------- 9. Bloques del programa ---------- */
.rejilla--programa { grid-template-columns: repeat(2, 1fr); }
.tarjeta--bloque {
  background: linear-gradient(165deg, #FBF9F6 0%, #F4F7F4 100%);
  border: 1px solid rgba(53,92,82,.13);
  border-radius: var(--radio);
  padding: clamp(28px, 3vw, 38px);
}
.tarjeta--bloque:hover {
  transform: translateY(-6px);
  border-color: rgba(53,92,82,.34);
  box-shadow: 0 32px 60px -36px rgba(29,42,39,.55);
}
.tarjeta--bloque .kicker { font-size: 11px; letter-spacing: .16em; margin-bottom: 26px; }
.tarjeta--bloque .h-3 { margin-bottom: 16px; }
.tarjeta--bloque .p-sm { margin-bottom: 26px; }
.te-llevas {
  padding-top: 20px; border-top: 1px solid rgba(29,42,39,.1);
  font-size: 14px; line-height: 1.65; color: var(--texto);
}
.te-llevas strong { color: var(--verde); font-weight: 700; }
.nota-programa {
  margin-top: clamp(20px, 2.5vw, 28px);
  padding-top: 22px;
  border-top: 1px solid rgba(29,42,39,.1);
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--texto-suave);
  text-align: center;
}

/* Para quién sí / no */
.tarjeta--si {
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(53,92,82,.16);
  border-radius: 28px;
  padding: clamp(30px, 3.4vw, 46px);
  box-shadow: 0 34px 66px -44px rgba(29,42,39,.5);
}
.tarjeta--si:hover { transform: translateY(-4px); box-shadow: 0 42px 76px -44px rgba(29,42,39,.55); }
.tarjeta--no {
  background: rgba(255,255,255,.42);
  border: 1px dashed rgba(29,42,39,.22);
  border-radius: 28px;
  padding: clamp(30px, 3.4vw, 46px);
}
.tarjeta--no:hover { background: rgba(255,255,255,.6); border-color: rgba(140,84,58,.4); }
.tarjeta--si h3, .tarjeta--no h3 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(24px, 2.6vw, 30px); line-height: 1.25;
  letter-spacing: -0.01em; margin-bottom: 30px;
}
.tarjeta--si h3 { color: var(--verde); }
.tarjeta--no h3 { color: #8C543A; }
.lista-simple { display: flex; flex-direction: column; gap: 20px; }
.lista-simple p { font-size: 16px; line-height: 1.72; }
.tarjeta--si .lista-simple p { color: var(--tinta-media); }
.tarjeta--no .lista-simple p { color: var(--texto); }

/* ---------- 10. Conferencista ---------- */
.cifras {
  display: flex; flex-wrap: wrap; gap: 20px 44px;
  padding-top: 32px; margin-top: 40px;
  border-top: 1px solid rgba(29,42,39,.12);
}
.cifra__numero { font-family: var(--serif); font-weight: 300; font-size: 34px; line-height: 1; color: var(--verde); }
.cifra__etiqueta { margin-top: 10px; font-size: 12.5px; line-height: 1.5; color: var(--texto-suave); }
.bio p { margin-bottom: 22px; max-width: 54ch; }
.bio p:last-of-type { margin-bottom: 0; }
.bio strong { color: var(--tinta); font-weight: 700; }

/* ---------- 11. Testimonios ---------- */
.testimonio {
  margin: 0;
  background: var(--blanco);
  border: 1px solid rgba(29,42,39,.07);
  border-radius: var(--radio);
  padding: clamp(28px, 3vw, 38px);
  display: flex; flex-direction: column; gap: 26px;
  box-shadow: 0 26px 52px -40px rgba(29,42,39,.45);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.testimonio:hover { transform: translateY(-5px); box-shadow: 0 36px 64px -40px rgba(29,42,39,.5); }
.testimonio__comilla { font-family: var(--serif); font-size: 44px; line-height: .6; color: rgba(154,77,44,.4); height: 22px; }
.testimonio blockquote {
  margin: 0; font-family: var(--serif); font-weight: 300;
  font-size: 20px; line-height: 1.6; color: var(--tinta);
}
.testimonio figcaption {
  display: flex; align-items: center; gap: 14px; margin-top: auto;
  padding-top: 22px; border-top: 1px solid rgba(29,42,39,.08);
}
.avatar {
  width: 46px; height: 46px; flex: none; border-radius: 50%;
  object-fit: cover;
  background: repeating-linear-gradient(45deg, #EDE5DA 0 6px, #E7E0D7 6px 12px);
}
.testimonio__nombre { font-size: 14.5px; font-weight: 700; color: var(--tinta); }
.testimonio__lugar { margin-top: 3px; font-size: 12.5px; color: var(--texto-suave); }
.nota-testimonios { margin-top: 26px; font-size: 12.5px; line-height: 1.7; color: #7C8783; }

/* ---------- 12. Inscripción / precio ---------- */
.incluye { display: flex; flex-direction: column; max-width: 46ch; }
.incluye p {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid var(--linea);
  font-size: 17px; line-height: 1.7; color: var(--tinta-media);
}
.incluye p::before {
  content: "";
  flex: none;
  width: 7px; height: 7px;
  margin-top: 10px;
  border-radius: 50%;
  background: var(--verde);
}
.incluye p:last-child { border-bottom: 0; }

.tarjeta-precio {
  background: var(--blanco);
  border: 1px solid rgba(46,93,79,.18);
  border-radius: 30px;
  padding: clamp(30px, 3.4vw, 46px);
  box-shadow: 0 48px 90px -56px rgba(29,42,39,.6);
}
.tarjeta-precio__titulo {
  font-size: 15px; font-weight: 600; letter-spacing: .01em;
  color: var(--verde); margin-bottom: 8px;
}
.precio { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 20px 0 8px; }
.precio__anterior {
  font-family: var(--serif); font-weight: 300; font-size: 24px;
  color: var(--texto-suave); text-decoration: line-through;
  text-decoration-color: var(--terracota); text-decoration-thickness: 1.5px;
}
.precio__valor {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(46px, 5.6vw, 62px); line-height: 1;
  color: var(--tinta); letter-spacing: -0.02em;
}
.precio__moneda { font-size: 14px; color: var(--texto-suave); }
.precio__urgencia { font-size: 14.5px; font-weight: 600; color: var(--terracota); margin: 0 0 18px; }
.separador { height: 1px; background: rgba(29,42,39,.1); margin: 30px 0 28px; }
.ficha { display: flex; flex-direction: column; gap: 16px; margin-bottom: 34px; }
.ficha__fila { display: flex; justify-content: space-between; gap: 16px; font-size: 15px; }
.ficha__fila dt { color: var(--texto-suave); }
.ficha__fila dd { margin: 0; color: var(--tinta); font-weight: 600; text-align: right; }
.nota-pago { margin-top: 20px; font-size: 13px; line-height: 1.7; color: var(--texto-suave); text-align: center; }
.garantia {
  margin-top: 28px; padding: 24px clamp(18px, 3vw, 30px) 26px;
  background: rgba(53,92,82,.07);
  border: 1px solid rgba(53,92,82,.12);
  border-radius: 18px;
  text-align: center;
}
.garantia__titulo { font-size: 14.5px; font-weight: 700; color: var(--verde-oscuro); margin-bottom: 10px; }
/* Condiciones: 15 px, interlineado 1,75 y líneas de 60 caracteres como máximo (lectura cómoda en la tarjeta de 720 px) */
.garantia p { max-width: 60ch; margin-inline: auto; font-size: 15px; line-height: 1.75; color: var(--texto); }
.garantia p:not(.garantia__titulo) + p { margin-top: 12px; }
.garantia a {
  text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: 3px; text-decoration-color: rgba(46,93,79,.5);
}
.garantia a:hover, .garantia a:focus-visible { text-decoration-color: currentColor; }

/* ---------- 13. FAQ ---------- */
.faq { display: flex; flex-direction: column; gap: 12px; }
.faq__item {
  background: var(--blanco);
  border: 1px solid rgba(29,42,39,.07);
  border-radius: var(--radio-sm);
  box-shadow: 0 16px 34px -30px rgba(29,42,39,.5);
  overflow: hidden;
  transition: border-color .4s var(--ease);
}
.faq__item:hover { border-color: rgba(53,92,82,.24); }
.faq__boton {
  width: 100%;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 24px;
  padding: 26px clamp(22px, 2.6vw, 34px);
  background: none; border: 0; cursor: pointer; text-align: left;
  font-family: var(--sans); font-size: 17px; font-weight: 600; line-height: 1.5; color: var(--tinta);
  transition: opacity .3s ease;
}
.faq__boton:hover { opacity: .72; }
.faq__signo {
  flex: none; width: 26px; height: 26px; margin-top: 2px;
  border-radius: 50%; background: rgba(53,92,82,.09);
  color: var(--verde); font-size: 17px; line-height: 1; font-weight: 400;
  display: flex; align-items: center; justify-content: center;
}
.faq__respuesta {
  display: none;
  padding: 0 clamp(46px, 6vw, 74px) 30px clamp(22px, 2.6vw, 34px);
  font-size: 16px; line-height: 1.85; color: var(--texto);
}
.faq__item.abierto .faq__respuesta { display: block; }

/* ---------- 14. CTA final y footer ---------- */
.cta-final .contenedor { max-width: 860px; padding: clamp(64px,8vw,130px) var(--pad-x); text-align: center; }
.cta-final .h-2 { font-size: clamp(34px,5vw,62px); line-height: 1.1; letter-spacing: -0.025em; color: var(--blanco); margin-bottom: 28px; }
.cta-final__texto { max-width: 50ch; margin: 0 auto 44px; font-size: 17.5px; line-height: 1.85; color: rgba(241,237,231,.8); }
.cta-final .btn--claro { padding: 22px 48px; font-size: 17px; box-shadow: 0 24px 50px -24px rgba(0,0,0,.7); }
.cta-final__nota { margin-top: 22px; font-size: 13.5px; color: rgba(241,237,231,.62); }

.footer { background: var(--verde-profundo); color: #A9BBB4; }
.footer__inner {
  max-width: var(--ancho); margin: 0 auto;
  padding: clamp(44px,5vw,68px) var(--pad-x);
  display: flex; flex-wrap: wrap; gap: 24px 44px;
  align-items: center; justify-content: space-between;
}
.footer .marca__logo { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.2); width: 30px; height: 30px; font-size: 16px; }
.footer .marca__nombre { font-size: 14.5px; color: #EAEFEC; }
.footer__enlaces { display: flex; flex-wrap: wrap; gap: 14px 28px; font-size: 13.5px; }
.footer__enlaces a { color: #A9BBB4; }
.footer__enlaces a:hover { color: var(--terracota-claro); }
.footer__legal {
  width: 100%;
  /* La línea superior sigue a todo el ancho; el texto queda centrado en una columna de 700 px */
  padding: 28px max(0px, calc((100% - 700px) / 2)) 4px;
  border-top: 1px solid rgba(255,255,255,.09);
  text-align: center; text-wrap: balance;
  font-size: 13.5px; line-height: 1.8; letter-spacing: 0.005em; color: #9BABA5;
}

/* ---------- 15. Animaciones ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
  will-change: opacity, transform;
}
[data-reveal].visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  [data-reveal] { opacity: 1; transform: none; }
}

/* ---------- 16. Responsive ---------- */
/* Hero: una sola rejilla con áreas nombradas.
   Móvil (orden del HTML): título + edición → narrativa → foto, igual que antes.
   Escritorio/tablet: título + edición | foto, y debajo la narrativa a una columna centrada. */
.hero__rejilla { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "intro" "relato" "media"; }
.hero__intro  { grid-area: intro; min-width: 0; }
.hero__relato { grid-area: relato; min-width: 0; }
.hero__rejilla .hero__media { grid-area: media; margin-top: 40px; }

@media (min-width: 761px) {
  .hero__rejilla {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "intro media" "relato relato";
    column-gap: clamp(40px, 6vw, 88px);
    row-gap: clamp(72px, 8vw, 120px);
    align-items: center;
  }
  .hero__rejilla .hero__media { margin-top: 0; padding-bottom: 0; }
  .hero__intro .edicion { margin-bottom: 0; }

  /* Narrativa editorial: columna centrada de 880 px, todo alineado al mismo borde izquierdo */
  .hero__relato { justify-self: center; width: 100%; max-width: 880px; }
  .hero__relato .hero__lead {
    max-width: none; margin-bottom: 32px;
    font-size: clamp(24px, 2.2vw, 31px); line-height: 1.55; letter-spacing: -0.006em;
  }
  .hero__relato .hero__texto { max-width: 64ch; font-size: 19px; line-height: 1.85; }
  .hero__relato .hero__texto--corto { margin-bottom: 36px; }
  .hero__relato .hero__citas { margin: 0 0 36px; padding: 6px 0 6px 30px; }
  .hero__relato .hero__citas p { font-size: 21px; line-height: 1.65; margin-bottom: 12px; }
  .hero__relato .hero__citas p:last-child { margin-bottom: 0; }
  .hero__relato .hero__texto--cierre { margin-bottom: 36px; }
  .hero__relato .hero__acciones { margin-bottom: 0; }

  /* Datos prácticos: alineados con la columna de la narrativa, separados por una línea fina */
  .hero__pie .hero__datos {
    max-width: 880px; margin: 48px auto 0; padding-top: 24px;
    border-top: 1px solid var(--linea);
    justify-content: flex-start; text-align: left; font-size: 17px;
  }
}

@media (max-width: 760px) {
  .tarjeta-flotante { position: static; max-width: none; margin-top: 16px; left: auto; bottom: auto; }
  .hero__media { padding-bottom: 0; }
  .hero__acciones .btn { width: 100%; }
  .edicion { max-width: none; padding: 18px 20px 20px; }
  /* Encabezado compacto en celulares: el botón «Quiero reservar mi cupo» siempre en una línea */
  .marca__sub { display: none; }
  .header .btn--sm { white-space: nowrap; }
  .hero__citas { padding: 14px 20px; }
  .footer__inner { flex-direction: column; align-items: flex-start; }
  .rejilla--programa { grid-template-columns: 1fr; }
  /* Condiciones de cesión en celulares: mejora discreta sin alargar el bloque (columna estrecha) */
  .garantia p { font-size: 14.5px; line-height: 1.7; }
  .garantia p:not(.garantia__titulo) + p { margin-top: 10px; }
}

@media (max-width: 420px) {
  .header__inner { gap: 10px; }
  .header .btn--sm { padding: 10px 14px; font-size: 12.5px; white-space: nowrap; }
  .marca__sub { display: none; }
  /* Con «Quiero reservar mi cupo» el botón va en una línea; el nombre de marca puede bajar a dos */
  .marca__nombre { font-size: 15px; line-height: 1.15; }
}

@media (max-width: 359px) {
  .header .marca__texto { display: none; }   /* el logo (con su texto alternativo) identifica la marca */
}

/* ---------- Impresión ---------- */
@media print {
  .header, .hero__acciones, .faq__boton .faq__signo { display: none; }
  .faq__respuesta { display: block; }
  body { background: #fff; }
  .seccion { break-inside: avoid; }
}