/* ============================================================
   JESS MARTIN — Web pública (boceto v3 · premium)
   Sistema "El Hilo" + escala tipográfica valiente + foto como
   escenario con UI de la academia flotando (refs: Lenus,
   Netmaster, ZONIXX). Paleta academia: cream · sage · warm · ink.
   ============================================================ */

:root {
  --cream: #faf7f0;
  --white: #ffffff;
  --sage: #a8c99b;
  --sage-deep: #5f7f4f;
  --warm: #d4a056;
  --ink: #1b2924;
  --ink-soft: #3d4a44;
  --mute: #647073;
  --border: rgba(27, 41, 36, 0.1);

  --font-display: "Fraunces", serif;
  --font-body: "Manrope", sans-serif;

  --pad: clamp(20px, 5vw, 72px);
  --radius: 24px;
  /* Sin sombras (decisión Humberto): separación por borde crema fuerte */
  --line-cream: 1.5px solid #e9dfc9;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: var(--sage); color: var(--ink); }

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

h2 {
  font-family: var(--font-display);
  font-size: clamp(38px, 5.5vw, 72px);
  line-height: 1.02;
  font-weight: 500;
  letter-spacing: -0.02em;
}
h1 em, h2 em, .final-title em { font-style: italic; color: var(--sage-deep); }

.eyebrow {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sage-deep);
  margin-bottom: 16px;
}
.eyebrow.center { text-align: center; }
.eyebrow-light { color: var(--sage); }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 30px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
    background-color 0.25s, color 0.25s, border-color 0.25s;
  will-change: transform;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-ink { background: var(--ink); color: #fff; }
.btn-ink:hover { background: var(--sage-deep); }

.btn-warm {
  background: var(--warm);
  color: var(--ink);
}
.btn-warm:hover { background: #dcae6d; }

.btn-line {
  color: var(--ink);
  padding: 15px 6px;
  border-radius: 0;
  border-bottom: 1.5px solid var(--ink);
}
.btn-line:hover { color: var(--sage-deep); border-color: var(--sage-deep); transform: none; }
.btn-arrow { display: inline-block; transition: transform 0.25s; }
.btn-line:hover .btn-arrow { transform: translateX(4px); }

.btn-big { padding: 20px 44px; font-size: 17px; }
.btn-compact { padding: 13px 26px; font-size: 14.5px; margin-top: 22px; }

/* Índice fantasma en las cards de programa (siempre entero, nunca pisa el título) */
.pcard { position: relative; overflow: hidden; }
.pcard-idx {
  position: absolute;
  top: 10px;
  right: 16px;
  z-index: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 44px;
  line-height: 1;
  color: rgba(27, 41, 36, 0.07);
  pointer-events: none;
  transition: color 0.3s;
}
.pcard:hover .pcard-idx { color: rgba(212, 160, 86, 0.38); }

/* Badge glass sobre la foto del curso estrella */
.pcf-badge {
  position: absolute;
  left: 18px;
  bottom: 18px;
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-radius: 999px;
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  border: 1px solid rgba(27, 41, 36, 0.08);
}
.pcf-badge-num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 20px;
  color: var(--sage-deep);
}

/* ---------- Ornamento: círculos finos ---------- */
.orn-circles { position: absolute; width: clamp(150px, 16vw, 220px); pointer-events: none; }

/* ---------- Nav ---------- */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  padding: 18px var(--pad);
  transition: background-color 0.35s, box-shadow 0.35s, padding 0.35s;
}
/* Glassmorfismo al bajar (ref. Lenus): translúcido + blur alto + saturación,
   el contenido se intuye difuminado tras la barra. Saturate realza los
   colores que sangran a través del cristal. */
.nav.scrolled {
  background: linear-gradient(
    to bottom,
    rgba(250, 247, 240, 0.72),
    rgba(250, 247, 240, 0.55)
  );
  -webkit-backdrop-filter: blur(22px) saturate(1.7);
  backdrop-filter: blur(22px) saturate(1.7);
  border-bottom: 1px solid rgba(27, 41, 36, 0.08);
  padding: 14px var(--pad);
  border-radius: 0 0 22px 22px;
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: 1320px;
  margin: 0 auto;
}
/* Logo definitivo (monograma jm + wordmark, PNG 752x178 en dos versiones):
   la de fondo oscuro (letras claras) vive sobre el hero; la de fondo claro
   entra en cross-fade cuando la barra se vuelve cristal al scrollear. */
.nav-brand { display: grid; text-decoration: none; }
.nav-brand .brand-logo {
  grid-area: 1 / 1;
  height: 44px;
  width: auto;
  transition: opacity 0.35s;
}
.nav .brand-logo-light { opacity: 0; }
.nav.scrolled .brand-logo-dark { opacity: 0; }
.nav.scrolled .brand-logo-light { opacity: 1; }

.nav-links { display: flex; gap: 32px; }
.nav-links a {
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 16px;
  font-weight: 600;
  transition: color 0.2s;
}
.nav-links a:hover { color: var(--sage-deep); }
.nav-cta { padding: 13px 26px; font-size: 15.5px; }

/* Sobre el hero oscuro (sin scroll): nav en blanco, CTA invertida */
.nav:not(.scrolled) .brand-mark { color: #fff; }
.nav:not(.scrolled) .brand-mark em { color: var(--sage); }
.nav:not(.scrolled) .nav-links a { color: rgba(255, 255, 255, 0.92); }
.nav:not(.scrolled) .nav-links a:hover { color: #fff; }
.nav:not(.scrolled) .nav-cta { background: #fff; color: var(--ink); }
.nav:not(.scrolled) .nav-cta:hover { background: var(--warm); }
/* El menu lateral entra a 1000px, no a 760. Entre medias la barra no cabia:
   los enlaces se partian por dentro ("La academia" a dos lineas), la barra
   pasaba de 51 a 76px y empujaba el contenido. Ya pasaba antes de anadir
   "Acceso alumnas". En tablet una hamburguesa es lo normal. */
@media (max-width: 1000px) { .nav-links { display: none; } }

/* ── Hamburguesa + menú móvil ── */
.nav-burger { display: none; flex-direction: column; gap: 5px; padding: 8px; margin-left: 6px; background: none; border: none; cursor: pointer; }
.nav-burger span { display: block; width: 24px; height: 2px; border-radius: 2px; background: var(--ink); transition: transform .3s ease, opacity .2s ease; }
.nav:not(.scrolled) .nav-burger span { background: #fff; }
/* Con el menú abierto el fondo es crema: la X debe ser oscura SIEMPRE, también
   cuando el nav aún no ha hecho scroll (antes quedaba blanca sobre crema). */
.nav .nav-burger[aria-expanded="true"] span,
.nav:not(.scrolled) .nav-burger[aria-expanded="true"] span { background: var(--ink); }
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav-drawer {
  position: fixed; inset: 0; z-index: 90; background: #faf7f0;
  padding: 84px 28px 32px; overflow-y: auto;
  transform: translateY(-100%); transition: transform .35s cubic-bezier(.22,1,.36,1);
}
.nav-drawer.open { transform: translateY(0); }
.nav-drawer nav { display: flex; flex-direction: column; gap: 2px; }
.nav-drawer a { padding: 15px 4px; font-size: 18px; font-weight: 600; color: var(--ink); border-bottom: 1px solid rgba(27,41,36,.07); }
.nav-drawer a.btn { margin-top: 18px; border-bottom: none; justify-content: center; font-size: 15px; }
@media (max-width: 1000px) { .nav-burger { display: flex; } .nav-cta { display: none; } }
/* Tiene que ir con el corte de la hamburguesa (1000px, lineas 217 y 239). Se
   quedo en 761 al subirlo: entre 761 y 1000 salia el boton, se escondian los
   enlaces y el cajon seguia con display:none, asi que en tablet la web se
   quedaba sin ninguna navegacion. */
@media (min-width: 1001px) { .nav-drawer { display: none !important; } }

/* ---------- Hero (visual, foto a sangre — ref. Fitspark) ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.hero-bg { position: absolute; inset: 0; }
.hero-bg img,
.hero-bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
  filter: saturate(0.94);
  transform-origin: center;
  will-change: transform;
}
.hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(27, 41, 36, 0.62) 0%,
    rgba(27, 41, 36, 0.42) 34%,
    rgba(27, 41, 36, 0.72) 72%,
    rgba(27, 41, 36, 0.86) 100%
  );
}
.hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 var(--pad) clamp(96px, 13vh, 150px);
}
.hero-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(46px, 7.6vw, 104px);
  line-height: 1.0;
  letter-spacing: -0.02em;
  color: #fff;
}
.hero-title em { color: var(--sage); }
.hero-title .line { display: block; overflow: hidden; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.hero-title .line > span { display: inline-block; will-change: transform; }

.hero-sub {
  margin-top: 20px;
  max-width: 46ch;
  font-size: clamp(15px, 1.8vw, 17.5px);
  color: rgba(255, 255, 255, 0.9);
}
.hero-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  margin-top: 30px;
}
.hero-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }

.btn-glass {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.45);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.btn-glass:hover { background: rgba(255, 255, 255, 0.22); }

@media (max-width: 900px) {
  .hero-foot { flex-direction: column; align-items: flex-start; }
}

/* Tarjetas flotantes (UI de la academia) */
.float-card {
  position: absolute;
  z-index: 5;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(8px);
  border-radius: 16px;
  padding: 14px 18px;
  border: var(--line-cream);
  display: flex;
  align-items: center;
  gap: 12px;
  will-change: transform;
}
.fc-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mute);
}
.fc-value { font-weight: 800; font-size: 15px; color: var(--ink); white-space: nowrap; }
.fc-arrow { color: var(--sage-deep); }
.fc-check {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--sage-deep);
  color: #fff;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.fc-check svg { width: 14px; height: 14px; }

/* Cifras dentro de la lámina del manifiesto */
.sheet-stats {
  margin: clamp(44px, 6vw, 64px) auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(22px, 4vw, 56px);
  max-width: 720px;
}
.hs-item { text-align: center; }
.hs-num {
  font-family: var(--font-display);
  font-size: clamp(30px, 3.4vw, 44px);
  font-weight: 500;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.hs-label { margin-top: 6px; font-size: 12.5px; font-weight: 700; color: var(--mute); white-space: nowrap; }
.hs-div { width: 1px; height: 46px; background: var(--border); }

/* El Hilo rodea el "7" de programas (motivo de marca en las cifras) */
.circle-stat { position: relative; display: inline-block; }
.circle-stat svg {
  position: absolute;
  inset: -0.22em -0.5em;
  width: calc(100% + 1em);
  height: calc(100% + 0.44em);
  overflow: visible;
  pointer-events: none;
}
.circle-stat svg path {
  stroke: var(--warm);
  stroke-width: 2;
  fill: none;
  vector-effect: non-scaling-stroke;
}

/* ---------- Manifiesto (lámina redondeada sobre el hero) ---------- */
.manifesto {
  position: relative;
  background: var(--white);
  padding: clamp(80px, 11vh, 140px) var(--pad) clamp(90px, 12vh, 150px);
  overflow: hidden;
}
.sheet {
  border-radius: 40px 40px 0 0;
  margin-top: -44px;
  z-index: 3;
}
.manifesto-orn { top: clamp(24px, 5vw, 60px); right: clamp(16px, 6vw, 90px); opacity: 0.55; }
.manifesto-eyebrow {
  text-align: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(17px, 1.8vw, 21px);
  color: var(--mute);
  margin-bottom: 18px;
}
.manifesto-eyebrow::after {
  content: "";
  display: block;
  width: 54px;
  height: 1px;
  background: var(--border);
  margin: 18px auto 0;
}
.manifesto-text {
  position: relative;
  max-width: 940px;
  margin: 0 auto;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(28px, 4.2vw, 52px);
  line-height: 1.24;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.manifesto-text .w { opacity: 0.12; display: inline-block; }

/* inline-block: el overlay absoluto necesita una caja única
   (un span inline que salta de línea rompe la elipse) */
.circled { position: relative; display: inline-block; }
.circled svg {
  position: absolute;
  inset: -0.34em -0.55em;
  width: calc(100% + 1.1em);
  height: calc(100% + 0.68em);
  pointer-events: none;
  overflow: visible;
}
.circled svg path {
  stroke: var(--warm);
  stroke-width: 2;
  fill: none;
  vector-effect: non-scaling-stroke;
}
.manifesto-sign {
  text-align: center;
  margin: 30px auto 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 22px;
  color: var(--sage-deep);
}

/* ---------- Programas ---------- */
.programs { position: relative; background: var(--cream); overflow: hidden; }

/* Lazo gigante de fondo (ref. Humberto): siempre detrás del contenido */
.ribbon {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.programs-head {
  max-width: 1320px;
  margin: 0 auto;
  padding: clamp(30px, 6vw, 70px) var(--pad) clamp(28px, 4vw, 48px);
}
.programs-head-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}
/* Rejilla de programas estilo RADIANT: cards limpias, sin foto */
.programs-grid {
  max-width: 1320px;
  margin: 0 auto;
  padding: 8px var(--pad) clamp(60px, 9vw, 110px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
  gap: clamp(14px, 1.8vw, 24px);
}
.pcard {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: var(--white);
  border-radius: 20px;
  border: var(--line-cream);
  padding: 26px 26px 24px;
  text-decoration: none;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s;
}
.pcard:hover {
  transform: translateY(-4px);
  border-color: var(--sage);
}
.pcard h3 {
  position: relative;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 21px;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--ink);
  padding-right: 56px;
}
.pcard-meta {
  margin-top: 7px;
  font-size: 14px;
  color: var(--mute);
}
.pill {
  display: inline-flex;
  align-items: center;
  margin-top: 16px;
  border-radius: 999px;
  padding: 6px 13px;
  font-size: 12.5px;
  font-weight: 700;
  background: rgba(27, 41, 36, 0.06);
  color: var(--ink-soft);
}
.pill-warm { background: rgba(212, 160, 86, 0.18); color: #8a6524; }
/* Jerarquía por nivel: la puerta de entrada (Principiante) es la que destaca */
.pill-sage { background: rgba(168, 201, 155, 0.34); color: var(--sage-deep); }
.pill-outline { background: transparent; border: 1px solid rgba(27, 41, 36, 0.22); color: var(--mute); }

/* Curso estrella destacado con foto (jerarquía dentro de la rejilla) */
.pcard-featured {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 11fr) minmax(0, 10fr);
  /* .pcard trae align-items:flex-start (flex); en grid rompería el stretch
     de la foto y dejaría la card "incompleta" */
  align-items: stretch;
  padding: 0;
  overflow: hidden;
  border: var(--line-cream);
}
.pcf-media { position: relative; min-height: 380px; overflow: hidden; }
.pcf-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 35%;
  filter: saturate(0.98) contrast(1.03);
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.pcard-featured:hover .pcf-media img { transform: scale(1.04); }
.pcard-featured:hover { transform: none; }
.pcf-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(28px, 4vw, 52px);
}
.pcf-body .pill { margin-top: 0; }
.pcf-body h3 {
  margin-top: 18px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.08;
  letter-spacing: -0.015em;
}
.pcf-desc {
  margin-top: 12px;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 44ch;
}
.pcf-body .pcard-meta { margin-top: 14px; }
.pcf-body .program-link { margin-top: 22px; }
.pcard-featured:hover .btn-arrow { transform: translateX(4px); }
@media (max-width: 760px) {
  .pcard-featured { grid-template-columns: 1fr; }
  .pcf-media { min-height: 0; aspect-ratio: 16 / 9; position: relative; }
}

/* Card fantasma (ref. RADIANT "+ Nueva plantilla") */
.pcard-ghost {
  background: transparent;
  box-shadow: none;
  border: 1.5px dashed rgba(27, 41, 36, 0.28);
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 132px;
}
.pcard-ghost:hover {
  box-shadow: none;
  transform: none;
  border-color: var(--sage-deep);
  background: rgba(255, 255, 255, 0.55);
}
.pcard-ghost-text {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--ink);
  max-width: 20ch;
}
.program-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-size: 13.5px;
  font-weight: 800;
  color: var(--ink);
  border-bottom: 1.5px solid var(--ink);
  padding-bottom: 3px;
}
.pcard-ghost:hover .btn-arrow { transform: translateX(4px); }
/* La card fantasma cierra la fila en pantallas anchas (sin huecos muertos) */
@media (min-width: 1080px) {
  .pcard-ghost { grid-column: span 2; min-height: 0; }
}

/* ---------- Método (filas editoriales, ref. ZONIXX) ---------- */
/* Fondo blanco: la foto (con su crema propio) resalta como card */
.method { background: var(--white); padding: clamp(80px, 12vw, 160px) var(--pad); }
.method-inner { max-width: 1180px; margin: 0 auto; }
.method-head { max-width: 720px; }
.method-tagline {
  margin-top: 20px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 19px;
  color: var(--mute);
}

/* Tabs interactivos del método: fila activa desplegada + escenario de foto */
.method-tabs {
  margin-top: clamp(40px, 5vw, 60px);
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: stretch;
}
.mtabs { display: flex; flex-direction: column; gap: 12px; justify-content: center; }
.mtab {
  display: flex;
  align-items: flex-start;
  gap: clamp(16px, 2vw, 26px);
  text-align: left;
  border: 0;
  background: transparent;
  border-radius: 20px;
  padding: clamp(18px, 2.4vw, 28px);
  cursor: pointer;
  transition: background-color 0.35s, border-color 0.35s;
}
.mtab.is-active { background: var(--cream); border-color: #e9dfc9; }
.mtab-num {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1;
  color: rgba(27, 41, 36, 0.25);
  transition: color 0.35s;
  flex-shrink: 0;
  width: 1.6em;
}
.mtab.is-active .mtab-num { color: var(--sage-deep); }
.mtab-body { display: block; min-width: 0; }
.mtab-kicker {
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute);
}
.mtab-title {
  display: block;
  margin-top: 4px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(20px, 2.2vw, 27px);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.mtab-text {
  display: block;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  margin-top: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
  transition: max-height 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s, margin-top 0.35s;
}
.mtab.is-active .mtab-text { max-height: 160px; opacity: 1; margin-top: 10px; }

.mstage {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  /* Ratio ORIGINAL de las fotos de Jess (1215×1512 ≈ 4:5): cero recorte */
  aspect-ratio: 4 / 5;
  align-self: center;
  border: var(--line-cream);
}
.mstage-media { position: absolute; inset: 0; }
.mstage-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.95);
  opacity: 0;
  transform: scale(1.04);
}
.mstage-img.is-active { opacity: 1; transform: scale(1); }
.mstage-chip {
  position: absolute;
  left: 16px;
  bottom: 16px;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-radius: 999px;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  border: 1px solid rgba(27, 41, 36, 0.08);
  max-width: calc(100% - 32px);
}
.mstage-chip-num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 18px;
  color: var(--sage-deep);
}
@media (max-width: 860px) {
  .method-tabs { grid-template-columns: 1fr; }
  .mstage { aspect-ratio: 4 / 5; order: -1; }
}

/* ---------- Sobre Jess ---------- */
.about { background: var(--white); padding: clamp(90px, 13vw, 170px) var(--pad); }
.about-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(60px, 7vw, 100px);
  align-items: center;
}
.about-media { position: relative; }
.about-photo-main {
  border-radius: var(--radius);
  overflow: hidden;
  /* Ratio original de la foto (768×1281): Jess entera, sin parallax que recorte */
  aspect-ratio: 768 / 1281;
  border: var(--line-cream);
}
.about-photo-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.92);
}
.about-photo-small {
  position: absolute;
  right: -12%;
  bottom: -14%;
  width: 52%;
  border-radius: 18px;
  overflow: hidden;
  aspect-ratio: 4/3;
  border: 6px solid var(--white);
}
.about-photo-small img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.92); }

.about-quote {
  position: relative;
  margin-top: 26px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(20px, 2.4vw, 26px);
  line-height: 1.35;
  color: var(--sage-deep);
  padding-left: 20px;
  border-left: 2px solid var(--warm);
}
.quote-mark { font-size: 1.4em; line-height: 0; vertical-align: -0.25em; margin-right: 2px; }
.about-text { margin-top: 24px; display: grid; gap: 16px; color: var(--ink-soft); }
.about-content .btn { margin-top: 30px; }
@media (max-width: 820px) {
  .about-inner { grid-template-columns: 1fr; }
  .about-media { max-width: 400px; margin-right: 10%; }
}

/* ---------- Academia (bloque oscuro premium) ---------- */
.academy {
  position: relative;
  background: var(--ink);
  color: #fff;
  padding: clamp(90px, 13vw, 170px) var(--pad);
  overflow: hidden;
}
.academy-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.academy h2 { color: #fff; }
.academy h2 em { color: var(--sage); }
.academy-inner {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(48px, 6vw, 90px);
  align-items: center;
}
.academy-features { margin-top: 30px; list-style: none; display: grid; gap: 18px; }
.academy-features li {
  padding-left: 32px;
  position: relative;
  color: rgba(255, 255, 255, 0.78);
  font-size: 16px;
}
.academy-features li::before {
  content: "";
  position: absolute;
  left: 2px; top: 8px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--warm);
}
.academy-features strong { color: #fff; }
.academy-content .btn { margin-top: 34px; }

.academy-phone { position: relative; display: flex; justify-content: center; }
/* Mockup real de la app (PNG con alfa, ya viene inclinado en 3D) */
.academy-mockup {
  position: relative;
  z-index: 2;
  width: min(430px, 88vw);
  height: auto;
  will-change: transform;
}
.phone-screen {
  background: var(--cream);
  border-radius: 34px;
  padding: 26px 18px 20px;
  min-height: 520px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ps-eyebrow { font-size: 10px; font-weight: 800; letter-spacing: 0.14em; color: var(--sage-deep); }
.ps-title { font-family: var(--font-display); font-size: 24px; font-weight: 500; margin-top: 4px; color: var(--ink); }
.ps-card { background: #fff; border: 1px solid var(--border); border-radius: 18px; padding: 16px; }
.ps-card-eyebrow { font-size: 9px; font-weight: 800; letter-spacing: 0.14em; color: var(--mute); margin-bottom: 10px; }
.ps-days { display: flex; gap: 6px; justify-content: space-between; }
.ps-days span {
  width: 32px; height: 40px;
  display: grid; place-items: center;
  border-radius: 10px;
  font-size: 11px; font-weight: 700;
  color: var(--mute);
  background: var(--cream);
}
.ps-days span.on { background: rgba(168, 201, 155, 0.35); color: var(--sage-deep); }
.ps-days span.today { outline: 2px solid var(--ink); background: var(--white); color: var(--ink); }
.ps-lesson { display: flex; gap: 12px; align-items: center; }
.ps-week { display: flex; gap: 12px; align-items: center; }
.ps-ring { width: 44px; height: 44px; flex-shrink: 0; }
.ps-thumb {
  width: 62px; height: 62px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--sage) 0%, var(--sage-deep) 100%);
  flex-shrink: 0;
}
.ps-lesson-title { font-weight: 800; font-size: 14px; color: var(--ink); }
.ps-lesson-sub { font-size: 12px; color: var(--mute); margin-top: 2px; }
.ps-cta {
  margin-top: auto;
  background: var(--ink);
  color: #fff;
  text-align: center;
  border-radius: 999px;
  padding: 15px;
  font-weight: 700;
  font-size: 14px;
}
.fc-phone-done {
  right: -6px;
  bottom: 16%;
  top: auto;
  z-index: 3;
  background: #e9f0e4;
  border: 1px solid rgba(95, 127, 79, 0.28);
}
@media (max-width: 820px) {
  .academy-inner { grid-template-columns: 1fr; }
}

/* ---------- Testimonios ---------- */
.testimonials {
  position: relative;
  background: var(--cream);
  padding: clamp(80px, 11vw, 140px) 0 clamp(90px, 13vw, 160px);
  overflow: hidden;
}
.testimonials-mark {
  position: absolute;
  top: -0.12em;
  left: 2vw;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(180px, 26vw, 380px);
  line-height: 1;
  color: rgba(95, 127, 79, 0.12);
  pointer-events: none;
  user-select: none;
}
/* Cabecera alineada al contenedor, como el resto de secciones */
.testimonials-head {
  position: relative;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 var(--pad);
  text-align: center;
}
.testimonials-head h2 { margin-top: 4px; }
/* padding en el contenedor (no en el track) para no romper la costura del loop */
.marquee { overflow: hidden; margin-top: 34px; padding-left: var(--pad); }
.marquee-track {
  display: flex;
  align-items: stretch;
  /* Altura definida de la fila: iguala tarjetas y fotos, y permite que la
     foto resuelva su 100% sin irse a su tamaño natural */
  height: clamp(240px, 19vw, 268px);
  gap: 22px;
  width: max-content;
  padding: 4px 0;
  animation: marquee 36s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.t-card {
  width: clamp(300px, 34vw, 420px);
  background: var(--white);
  border-radius: 18px;
  border: var(--line-cream);
  padding: 28px 30px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
}
.t-card p {
  font-family: var(--font-display);
  font-size: clamp(19px, 1.8vw, 22px);
  line-height: 1.4;
  font-weight: 400;
}
.t-card footer { display: flex; align-items: center; gap: 12px; }
.t-avatar {
  width: 42px; height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 17px;
  flex-shrink: 0;
}
.av-sage { background: rgba(168, 201, 155, 0.35); color: var(--sage-deep); }
.av-warm { background: rgba(212, 160, 86, 0.28); color: #8a6524; }
.av-ink { background: var(--ink); color: #fff; }
.t-name { display: block; font-weight: 800; font-size: 14px; }
.t-tag { display: block; font-size: 12px; color: var(--mute); margin-top: 2px; }

/* Variantes de color (ritmo visual en el marquee) */
.t-card-ink { background: var(--ink); border-color: transparent; color: #fff; }
.t-card-ink .t-name { color: #fff; }
.t-card-ink .t-tag { color: var(--sage); }
.t-card-sage { background: rgba(168, 201, 155, 0.24); border-color: transparent; }

/* Fotos intercaladas en el marquee */
.t-photo {
  align-self: stretch;
  border-radius: 18px;
  overflow: hidden;
  flex-shrink: 0;
}
/* Misma altura que las tarjetas, pero SIN recortar: la altura la marca la
   fila y la anchura la pone la propia foto según su proporción */
.t-photo img {
  display: block;
  height: 100%;
  width: auto;
  max-width: none;
  filter: saturate(0.92);
}

/* ---------- CTA final ---------- */
.final {
  position: relative;
  background: var(--ink);
  color: #fff;
  padding: clamp(110px, 18vh, 220px) var(--pad);
  overflow: hidden;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.final::before {
  content: "";
  position: absolute;
  width: 60vw; height: 60vw;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(95, 127, 79, 0.45) 0%, transparent 65%);
  top: -20vw; right: -20vw;
  pointer-events: none;
}
.final-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.final-inner { max-width: 940px; margin: 0 auto; text-align: center; position: relative; }
.final-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(34px, 8vw, 100px);
  line-height: 1.03;
  letter-spacing: -0.02em;
}
.final-title em { color: var(--sage); }
.final-title .line { display: block; overflow: hidden; padding-bottom: 0.1em; margin-bottom: -0.1em; }
/* nowrap: cada línea es una unidad — evita viudas tipo "día" suelta en móvil */
.final-title .line > span { display: inline-block; white-space: nowrap; will-change: transform; }

.circle-word { position: relative; }
.circle-word svg {
  position: absolute;
  inset: -0.3em -0.55em;
  width: calc(100% + 1.1em);
  height: calc(100% + 0.6em);
  overflow: visible;
  pointer-events: none;
}
.circle-word svg path {
  stroke: var(--warm);
  stroke-width: 2.5;
  fill: none;
  vector-effect: non-scaling-stroke;
}

.final-sub {
  margin: 26px auto 0;
  max-width: 46ch;
  color: rgba(255, 255, 255, 0.82);
  font-size: clamp(16px, 2vw, 18px);
}
.final .btn { margin-top: 40px; }

/* ---------- Footer ---------- */
.footer { background: var(--ink); color: rgba(255, 255, 255, 0.7); border-top: 1px solid rgba(255, 255, 255, 0.09); }
.footer-inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 34px var(--pad);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 40px;
  justify-content: space-between;
}
.brand-logo-footer { height: 42px; width: auto; display: block; }
.footer-links { display: flex; gap: 22px; flex-wrap: wrap; }
.footer-links a { color: rgba(255, 255, 255, 0.7); text-decoration: none; font-size: 13.5px; font-weight: 600; }
.footer-links a:hover { color: #fff; }
.footer-legal {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.45);
  /* En movil la linea partia por cualquier sitio y dejaba un "·" colgando al
     final. Asi el copyright y los tres enlaces son dos bloques que caen
     enteros a su propia linea. */
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 3px 10px;
}
.footer-legal-enlaces { white-space: nowrap; }
/* Sin esta regla los enlaces legales se quedaban con el azul del navegador,
   ilegible sobre el verde oscuro. Van mas claros que el copyright para que se
   note que se pueden pulsar, pero sin competir con la navegacion del pie. */
.footer-legal a {
  color: rgba(255, 255, 255, 0.62);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
  padding-bottom: 1px;
  margin: 0 3px; /* el punto separador quedaba pegado a los subrayados */
  transition: color 0.18s ease, border-color 0.18s ease;
}
.footer-legal a:hover { color: #fff; border-bottom-color: rgba(255, 255, 255, 0.55); }
.footer-legal a:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.75);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- Estados iniciales GSAP (solo con JS) ---------- */
html.gsap [data-reveal] { opacity: 0; transform: translateY(28px); }
html.gsap .hero-title .line > span { transform: translateY(112%); }
html.gsap .hero-sub, html.gsap .hero-ctas { opacity: 0; transform: translateY(18px); }
html.gsap .float-card { opacity: 0; transform: translateY(24px) scale(0.94); }
html.gsap .final-title .line > span { transform: translateY(112%); }


/* ---------- Panel de detalle de programa ---------- */
.pmodal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(14px, 3vw, 40px);
  background: rgba(27, 41, 36, 0.45);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.pmodal-backdrop.is-open { display: flex; }
.pmodal {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  width: min(880px, 100%);
  max-height: min(86vh, 640px);
  background: var(--white);
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(27, 41, 36, 0.08);
}
.pmodal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  border: 1px solid var(--border);
  transition: transform 0.2s;
}
.pmodal-close:hover { transform: rotate(90deg); }
.pmodal-media { position: relative; min-height: 320px; }
.pmodal-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.95);
}
.pmodal-body {
  padding: clamp(26px, 4vw, 44px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  overflow-y: auto;
}
.pmodal-body .pill { margin-top: 0; }
.pmodal-body h3 {
  margin-top: 16px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.pmodal-desc { margin-top: 12px; font-size: 15.5px; line-height: 1.6; color: var(--ink-soft); }
.pmodal-list { margin-top: 18px; list-style: none; display: grid; gap: 10px; }
.pmodal-list li {
  position: relative;
  padding-left: 26px;
  font-size: 14.5px;
  color: var(--ink-soft);
}
.pmodal-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(168, 201, 155, 0.5);
  box-shadow: inset 0 0 0 3px var(--white);
  border: 1.5px solid var(--sage-deep);
}
.pmodal-body .pcard-meta { margin-top: 18px; }
.pmodal-body .btn-compact { margin-top: 20px; }
.pmodal-price { margin-top: 16px; font-size: 30px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); }
.pmodal-body .pmodal-price + .btn-compact { margin-top: 12px; }

/* ===== Página Programas (tienda) ===== */
.shop { padding-top: 96px; }
.shop-hero { max-width: 820px; margin: 0 auto; padding: 48px 24px 8px; text-align: center; }
.shop-hero h1 { font-family: "Fraunces", Georgia, serif; font-weight: 400; font-size: clamp(34px, 4vw, 52px); line-height: 1.04; letter-spacing: -0.02em; color: var(--ink); margin-top: 10px; }
.shop-hero h1 em { font-style: italic; color: var(--sage-deep); }
.shop-hero-sub { max-width: 620px; margin: 18px auto 0; color: var(--ink-soft); font-size: 16px; line-height: 1.6; }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; max-width: 1160px; margin: 40px auto 0; padding: 0 24px; }
.shop-card { display: flex; flex-direction: column; background: #fff; border: 1px solid rgba(27,41,36,0.08); border-radius: 22px; overflow: hidden; transition: transform .35s ease, box-shadow .35s ease; }
.shop-card:hover { transform: translateY(-5px); box-shadow: 0 22px 48px rgba(27,41,36,0.12); }
.shop-card-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--sage); }
.shop-card-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }
.shop-card-pill { position: absolute; top: 14px; left: 14px; background: rgba(255, 255, 255, 0.94); color: var(--ink); border: none; box-shadow: 0 3px 12px rgba(27, 41, 36, 0.22); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); font-weight: 700; }
.shop-card-pill.pill-warm { background: var(--warm); color: #4a3410; }
.shop-card-body { display: flex; flex-direction: column; flex: 1; padding: 20px 22px 22px; }
.shop-card-body h3 { font-family: "Fraunces", Georgia, serif; font-weight: 500; font-size: 21px; line-height: 1.15; letter-spacing: -0.015em; color: var(--ink); }
.shop-card-meta { margin-top: 8px; font-size: 12px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.03em; }
.shop-card-desc { margin-top: 12px; font-size: 14.5px; line-height: 1.55; color: var(--ink-soft); flex: 1; }
.shop-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 20px; }
.shop-card-price { font-size: 25px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); }
.shop-card-soon { font-size: 15px; font-weight: 600; color: var(--ink-soft); }
.shop-cta { max-width: 720px; margin: 64px auto 0; padding: 0 24px 100px; text-align: center; }
.shop-cta-text { font-size: 18px; line-height: 1.55; color: var(--ink); }
.shop-cta-text em { font-style: italic; color: var(--sage-deep); }
.shop-cta .btn-big { margin-top: 22px; }
@media (max-width: 640px) { .shop-grid { grid-template-columns: 1fr; } .shop { padding-top: 80px; } }
@media (max-width: 760px) {
  .pmodal { grid-template-columns: 1fr; max-height: 90vh; overflow-y: auto; }
  .pmodal-media { min-height: 0; aspect-ratio: 16 / 9; }
  .pmodal-body { overflow: visible; }
}

/* ---------- El Hilo interactivo (canvas que sigue al cursor) ---------- */
#ribbons {
  position: fixed;
  inset: 0;
  z-index: 58; /* sobre el contenido, bajo nav (100) y panel (120) */
  pointer-events: none;
}
@media (pointer: coarse), (max-width: 899px) {
  #ribbons { display: none; }
}

/* ---------- Loader de marca ---------- */
.loader {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--ink);
}
.loader.is-on { display: flex; }
.loader-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.loader-mono {
  height: clamp(130px, 22vh, 200px);
  width: auto;
}
.loader-word {
  font-family: var(--font-body);
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #fff;
}
.loader-word .lw-mint { color: var(--sage); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marquee-track { animation: none; flex-wrap: wrap; width: auto; }
  .marquee { padding-right: var(--pad); }
  #ribbons, .loader { display: none !important; }
  html.gsap [data-reveal],
  html.gsap .hero-title .line > span,
  html.gsap .hero-sub, html.gsap .hero-ctas,
  html.gsap .float-card,
  html.gsap .final-title .line > span { opacity: 1; transform: none; }
}


/* ============ PÁGINAS LEGALES ============
   Documento largo y sobrio. Sin adornos: aquí lo que importa es que se lea. */

/* Cabecera minima de las paginas sueltas (legales, guia, gracias).
   guia.html y gracias-guia.html llevaban estas reglas dentro de su propio
   <style>. Las legales copiaron el marcado pero no los estilos, y como solo
   cargan styles.css el logo salia a su tamano real —752 px— pegado a la
   esquina y cortado. Va aqui para que valga en todas. */
.lm-top,
.ty-top {
  padding: 24px var(--pad) 8px;
  display: flex;
  justify-content: center;
}
.lm-top img,
.ty-top img {
  height: 46px;
  width: auto;
  max-width: 100%;
  display: block;
}

.legal {
  background: var(--cream);
  padding: clamp(28px, 6vw, 64px) var(--pad) clamp(56px, 9vw, 104px);
}
.legal-inner {
  max-width: 720px;
  margin: 0 auto;
}
.legal-eyebrow {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sage-deep);
  margin: 0 0 12px;
}
.legal h1 {
  font-family: var(--font-display);
  font-size: clamp(30px, 5vw, 44px);
  line-height: 1.1;
  color: var(--ink);
  margin: 0 0 10px;
  font-weight: 600;
}
.legal-fecha {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--mute);
  margin: 0 0 12px;
  padding-bottom: 26px;
  border-bottom: var(--line-cream);
}
.legal-lead {
  font-family: var(--font-body);
  font-size: 17.5px;
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 26px 0 0;
}
.legal h2 {
  font-family: var(--font-display);
  font-size: clamp(21px, 3vw, 26px);
  line-height: 1.25;
  color: var(--ink);
  font-weight: 600;
  margin: 42px 0 12px;
}
.legal h3 {
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  margin: 26px 0 8px;
}
.legal p,
.legal li {
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.72;
  color: var(--ink-soft);
}
.legal p { margin: 0 0 14px; }
.legal ul { margin: 0 0 16px; padding-left: 22px; }
.legal li { margin-bottom: 9px; }
.legal strong { color: var(--ink); font-weight: 700; }
.legal a { color: var(--sage-deep); text-decoration: underline; text-underline-offset: 2px; }
.legal a:hover { color: var(--ink); }

.legal-tabla {
  width: 100%;
  border-collapse: collapse;
  margin: 6px 0 18px;
  font-family: var(--font-body);
  font-size: 15px;
}
.legal-tabla th,
.legal-tabla td {
  text-align: left;
  padding: 11px 12px 11px 0;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  line-height: 1.55;
  color: var(--ink-soft);
}
.legal-tabla th {
  font-weight: 700;
  color: var(--ink);
  font-size: 13px;
  letter-spacing: 0.02em;
}
/* En móvil la tabla se desborda: que ruede ella, no la página. */
@media (max-width: 640px) {
  .legal-tabla { display: block; overflow-x: auto; white-space: nowrap; }
  .legal-tabla td { white-space: normal; min-width: 150px; }
}


/* ============ ACCESO ALUMNAS (nav) ============
   Enlace de texto, no boton: no puede competir con "Empieza hoy", que es la
   accion que trae dinero. Debajo de 1000px se esconde igual que .nav-links,
   porque ahi manda el menu lateral. */
.nav-acceso {
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 15px;
  font-weight: 700;
  padding: 10px 4px;
  border-bottom: 1.5px solid transparent;
  transition: color 0.2s, border-color 0.2s;
  white-space: nowrap;
}
.nav-acceso:hover { color: var(--sage-deep); border-bottom-color: var(--sage-deep); }
/* Los dos van juntos. Sueltos en .nav-inner, que reparte con space-between,
   "Acceso alumnas" se quedaba solo en mitad del hueco y parecia perdido. */
.nav-derecha { display: flex; align-items: center; gap: 20px; }
@media (max-width: 1000px) { .nav-derecha { display: none; } }
.nav:not(.scrolled) .nav-acceso { color: rgba(255, 255, 255, 0.92); }
.nav:not(.scrolled) .nav-acceso:hover { color: #fff; border-bottom-color: #fff; }
@media (max-width: 1000px) { .nav-acceso { display: none; } }


/* ============ CONTACTO ============ */
.contacto {
  background: var(--cream);
  padding: clamp(28px, 6vw, 60px) var(--pad) clamp(56px, 9vw, 100px);
}
.contacto-inner { max-width: 1160px; margin: 0 auto; }

/* A todo el ancho: el titular y la linea de debajo son cortos, asi que aqui
   no hay problema de renglon largo. */
.contacto-cab { max-width: none; }
.contacto-cab h1 {
  margin: 12px 0 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(38px, 6vw, 60px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: balance;
}
.contacto-cab h1 em { font-style: italic; color: var(--sage-deep); }
.contacto-lead {
  margin: 18px 0 0;
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink-soft);
}

.contacto-grid {
  margin-top: clamp(34px, 5vw, 54px);
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(28px, 4vw, 52px);
  align-items: start;
}
@media (max-width: 960px) { .contacto-grid { grid-template-columns: 1fr; } }

/* ---------- Formulario ---------- */
.contacto-form-caja {
  background: var(--white);
  border: var(--line-cream);
  border-radius: var(--radius);
  padding: clamp(24px, 3.4vw, 38px);
}
.contacto-campo { display: flex; flex-direction: column; gap: 7px; margin-bottom: 20px; }
.contacto-campo label {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.01em;
}
.contacto-form input,
.contacto-form select,
.contacto-form textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 16px; /* 16px o menos hace que iOS haga zoom al enfocar */
  line-height: 1.5;
  color: var(--ink);
  background: var(--cream);
  border: 1.5px solid #e4dac4;
  border-radius: 13px;
  padding: 13px 15px;
  transition: border-color 0.18s, box-shadow 0.18s;
  -webkit-appearance: none;
  appearance: none;
}
.contacto-form textarea { resize: vertical; min-height: 132px; }
/* La flecha del desplegable, dibujada: sin esto queda la nativa del sistema,
   que en cada navegador es distinta y rompe el conjunto. */
.contacto-form select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%233d4a44' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 42px;
  cursor: pointer;
}
.contacto-form input:focus,
.contacto-form select:focus,
.contacto-form textarea:focus {
  outline: none;
  border-color: var(--sage-deep);
  box-shadow: 0 0 0 3px rgba(168, 201, 155, 0.3);
}
.contacto-ayuda { font-size: 13.5px; line-height: 1.45; color: var(--mute); }

/* Campo trampa: fuera de la vista y fuera del recorrido del teclado, pero
   sin display:none, que algunos bots detectan. */
.contacto-form input.contacto-hp {
  position: absolute;
  left: -9999px;
  top: 0;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

.contacto-form button[type="submit"] { width: 100%; margin-top: 4px; }
.contacto-form button[disabled] { opacity: 0.65; cursor: default; transform: none; }

.contacto-msg { margin: 14px 0 0; font-size: 15px; line-height: 1.5; color: var(--ink-soft); }
.contacto-msg:empty { margin: 0; }
.contacto-msg.err { color: #a3452c; font-weight: 600; }

.contacto-legal {
  margin: 22px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  line-height: 1.6;
  color: var(--mute);
}
.contacto-legal a { color: var(--sage-deep); text-decoration: underline; text-underline-offset: 2px; }
.contacto-legal a:hover { color: var(--ink); }

/* ---------- Enviado ---------- */
.contacto-hecho { text-align: center; padding: 18px 0 6px; }
.contacto-hecho-icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--sage);
  color: var(--ink);
}
.contacto-hecho-icono svg { width: 26px; height: 26px; }
.contacto-hecho h2 {
  margin: 18px 0 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 28px;
  color: var(--ink);
}
.contacto-hecho p {
  margin: 12px auto 22px;
  max-width: 42ch;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* ---------- Otras vías ---------- */
.contacto-aparte { display: flex; flex-direction: column; gap: 18px; }
.contacto-bloque {
  background: var(--white);
  border: var(--line-cream);
  border-radius: 18px;
  padding: 24px 26px;
}
.contacto-bloque h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 21px;
  line-height: 1.25;
  color: var(--ink);
}
.contacto-bloque p {
  margin: 10px 0 0;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink-soft);
}
.contacto-bloque a:not(.btn) { color: var(--sage-deep); text-decoration: underline; text-underline-offset: 2px; }
.contacto-bloque a:not(.btn):hover { color: var(--ink); }
.contacto-bloque .btn { margin-top: 16px; }
.contacto-bloque-destacado { background: rgba(168, 201, 155, 0.16); border-color: rgba(95, 127, 79, 0.22); }


/* ============ BARRA: que no se parta en pantallas medianas ============
   Entre 1000px (donde aparece el menu lateral) y ~1100px la barra se quedaba
   sin sitio y saltaba a dos filas: se estiraba de 51 a 76px y empujaba el
   contenido de debajo. Ya pasaba antes de anadir "Acceso alumnas"; con el
   enlace empezaba antes todavia. Se aprieta el espaciado en ese tramo en vez
   de esconder nada, porque ahi no hay menu lateral donde refugiar los
   enlaces. */
@media (max-width: 1100px) and (min-width: 1001px) {
  .nav-links { gap: 20px; }
  .nav-links a { font-size: 15px; }
  .nav-acceso { font-size: 14px; padding: 10px 2px; }
  .nav-cta { padding: 11px 20px; font-size: 14.5px; }
  .nav-inner { gap: 14px; }
}


/* La barra es fixed: la seccion de contacto tiene que dejarle sitio o le tapa
   el arranque. Igual que hace .shop en la pagina de programas. */
.contacto { padding-top: clamp(104px, 9vw, 140px); }
@media (max-width: 1000px) { .contacto { padding-top: 100px; } }