/*
Theme Name: UNMADE — Leydis Coaching
Theme URI: https://leydiscoaching.com
Author: Leydis Coaching
Description: Tema para leydiscoaching.com. Espacio digital para mujeres altamente productivas que emprenden y empiezan a notar ansiedad. Sistema visual construido sobre la identidad UNMADE — "Undoing to become": crema y taupe cálidos, un acento vino apagado, tipografía geométrica para la voz de marca y una sans humanista para lectura larga y calmada.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: leydiscoaching
*/

/* =========================================================
   0. FUENTES
   Jost      → voz de marca: titulares, wordmark, eyebrows
   Mulish    → lectura larga: cuerpo de texto, UI, formularios
   Lora it.  → calidez puntual: citas y testimonios
   Servidas con wp_enqueue_style() + preconnect desde functions.php
   (leydiscoaching_enqueue_assets) — sin @import aquí a propósito:
   un @import dentro del CSS retrasa el descubrimiento de la fuente
   hasta que el navegador ya parseó este archivo; un <link> propio
   se descubre en el primer barrido del HTML.
   ========================================================= */

/* =========================================================
   1. TOKENS DE DISEÑO
   ========================================================= */
:root {
  /* — Color: base cálida del logo — */
  --color-cream:        #F5EDE1;   /* fondo principal */
  --color-cream-soft:   #FBF7F0;   /* superficies, tarjetas */
  --color-cream-deep:   #EAE0CE;   /* secciones alternas, divisores */
  --color-taupe:        #8C7C68;   /* marca, títulos, íconos */
  --color-taupe-light:  #B7A996;   /* texto secundario, placeholders */
  --color-ink:          #4A4038;   /* cuerpo de texto — cálido, no gris puro */

  /* — Color: acento distintivo (vino apagado / rosewood) — */
  --color-accent:       #A15C61;
  --color-accent-dark:  #7C444A;
  --color-accent-soft:  #E8CCC8;

  --color-white: #FFFFFF;
  --color-border: #E2D5C3;

  /* — Color: negro, blanco y rosado — para landings de alto contraste
     (ej. registro a clase). Tonos fijos, no cambian con el modo oscuro,
     pensados para usarse deliberadamente sobre cualquier tema. — */
  --color-black:      #17130F;
  --color-black-soft: #241F19;
  --color-white-pure: #FFFFFF;
  --color-pink:        #F0AFC0;
  --color-pink-dark:   #DD8AA0;
  --color-pink-soft:   #FBE2E9;

  /* — Tipografía — */
  --font-display: 'Jost', 'Century Gothic', sans-serif;
  --font-body: 'Mulish', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-accent: 'Lora', Georgia, serif;

  --fs-h1: clamp(2.75rem, 2rem + 3vw, 4.5rem);
  --fs-h2: clamp(2rem, 1.6rem + 1.8vw, 3rem);
  --fs-h3: clamp(1.5rem, 1.3rem + 0.9vw, 2rem);
  --fs-h4: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --fs-h5: 1.125rem;
  --fs-h6: 1rem;
  --fs-lead: clamp(1.15rem, 1.05rem + 0.4vw, 1.35rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.9rem;
  --fs-caption: 0.78rem;

  --lh-tight: 1.15;
  --lh-display: 1.04; /* h1/h2: a --lh-tight le sobra aire cuando el tamaño es tan grande */
  --lh-snug: 1.4;
  --lh-relaxed: 1.75; /* lectura calmada, sin prisa */

  --ls-wide: 0.14em;
  --ls-normal: normal;

  /* — Espaciado — */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --space-3xl: 8rem;

  /* — Forma — */
  --radius-sm: 10px;
  --radius-md: 20px;
  --radius-full: 999px;

  /* — Elevación (muy suave, nada de sombras duras) — */
  --shadow-soft: 0 12px 32px -18px rgba(74, 64, 56, 0.28);
  --shadow-lift: 0 20px 45px -20px rgba(74, 64, 56, 0.32);
  --shadow-focus: 0 0 0 4px var(--color-accent-soft);

  /* — Movimiento — */
  --ease-calm: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 160ms;
  --dur-base: 260ms;
  --dur-slow: 520ms;

  --container-w: 1120px;

  /* — Escala de anchos de contenido: usar siempre una de estas en vez de
     max-width sueltos por sección, para que el ancho de lectura no varíe
     de una sección a otra sin motivo. — */
  --content-w-sm: 480px;   /* bloques compactos: mini-formularios, timeline */
  --content-w-md: 640px;   /* avisos, CTAs, bloques cortos de una idea */
  --content-w-lg: 720px;   /* contenido/artículo: entry-content, párrafos largos */
  --content-w-xl: 840px;   /* intros de hero anchas */
  --measure-narrow: 22ch;  /* frases grandes de una línea (big-line) */
  --measure-body: 62ch;    /* párrafo lead de varias líneas — igual al max-width base de <p> */

  color-scheme: light;
}

/* — Modo oscuro: mismo mundo cálido, sin negro puro — */
@media (prefers-color-scheme: dark) {
  :root {
    --color-cream:       #211D18;
    --color-cream-soft:  #2B2620;
    --color-cream-deep:  #35302A;
    --color-taupe:       #D8C9B4;
    --color-taupe-light: #8F8375;
    --color-ink:         #E8E0D2;

    --color-accent:      #C98189;
    --color-accent-dark: #E0A0A6;
    --color-accent-soft: #4A2F32;

    --color-white: #2B2620;
    --color-border: #4A4238;

    --shadow-soft: 0 12px 32px -16px rgba(0, 0, 0, 0.45);
    --shadow-lift: 0 20px 45px -18px rgba(0, 0, 0, 0.5);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --color-cream:       #211D18;
  --color-cream-soft:  #2B2620;
  --color-cream-deep:  #35302A;
  --color-taupe:       #D8C9B4;
  --color-taupe-light: #8F8375;
  --color-ink:         #E8E0D2;
  --color-accent:      #C98189;
  --color-accent-dark: #E0A0A6;
  --color-accent-soft: #4A2F32;
  --color-white: #2B2620;
  --color-border: #4A4238;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --color-cream:        #F5EDE1;
  --color-cream-soft:   #FBF7F0;
  --color-cream-deep:   #EAE0CE;
  --color-taupe:        #8C7C68;
  --color-taupe-light:  #B7A996;
  --color-ink:          #4A4038;
  --color-accent:       #A15C61;
  --color-accent-dark:  #7C444A;
  --color-accent-soft:  #E8CCC8;
  --color-white: #FFFFFF;
  --color-border: #E2D5C3;
  color-scheme: light;
}

/* =========================================================
   2. RESET / BASE
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

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

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--color-ink);
  background-color: var(--color-cream);
  -webkit-font-smoothing: antialiased;
  transition: background-color var(--dur-base) var(--ease-calm), color var(--dur-base) var(--ease-calm);
}

img, picture, svg, video { display: block; max-width: 100%; }

/* =========================================================
   3. TIPOGRAFÍA
   ========================================================= */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: var(--lh-tight);
  color: var(--color-taupe);
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); font-weight: 400; letter-spacing: 0.01em; line-height: var(--lh-display); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-display); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); font-weight: 600; }
h5 { font-size: var(--fs-h5); font-weight: 600; }
h6 { font-size: var(--fs-h6); font-weight: 600; }

p { max-width: 62ch; }
p + p { margin-top: var(--space-sm); }

.u-lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-snug);
  color: var(--color-ink);
  max-width: 42ch;
}

.u-small { font-size: var(--fs-small); }

.u-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-family: var(--font-display);
  font-size: var(--fs-caption);
  font-weight: 500;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-accent);
}

.u-caption {
  font-size: var(--fs-caption);
  color: var(--color-taupe-light);
  letter-spacing: 0.02em;
}

blockquote {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: var(--fs-lead);
  line-height: var(--lh-snug);
  color: var(--color-taupe);
  max-width: 46ch;
}

a {
  color: var(--color-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease-calm);
}
a:hover { color: var(--color-accent-dark); }

::selection {
  background: var(--color-accent-soft);
  color: var(--color-accent-dark);
}

/* =========================================================
   4. LAYOUT / UTILIDADES
   ========================================================= */
.container {
  width: 100%;
  max-width: var(--container-w);
  margin-inline: auto;
  padding-inline: var(--space-md);
}

.section {
  padding-block: var(--space-2xl);
}
.section--alt { background-color: var(--color-cream-soft); }
/* — Blanco fijo, no el crema/beige de --color-cream-soft — para secciones
   que piden explícitamente fondo blanco puro, sin importar el tema. El
   color de texto se fija también: en modo oscuro, --color-ink/--color-accent
   se vuelven claros (pensados para fondo oscuro) y quedarían casi
   ilegibles sobre este blanco fijo. Las .card de adentro no se tocan: su
   fondo/texto ya son un par que cambia junto con el tema y se sigue
   leyendo bien solos. — */
.section--white { background-color: var(--color-white-pure); color: var(--color-black); }
.section--white .u-eyebrow { color: #A15C61; }

.stack { display: flex; flex-direction: column; }
.cluster { display: flex; flex-wrap: wrap; align-items: center; }

.grid {
  display: grid;
  gap: var(--space-lg);
}
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }

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

.u-text-center { text-align: center; }

/* — Anchos de contenido estandarizados (ver escala arriba en :root) — */
.u-w-sm { max-width: var(--content-w-sm); margin-inline: auto; }
.u-w-md { max-width: var(--content-w-md); margin-inline: auto; }
.u-w-lg { max-width: var(--content-w-lg); margin-inline: auto; }
.u-w-xl { max-width: var(--content-w-xl); margin-inline: auto; }
.u-measure { max-width: var(--measure-body); margin-inline: auto; }
.u-measure-narrow { max-width: var(--measure-narrow); margin-inline: auto; }

/* =========================================================
   5. BOTONES
   ========================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 0.95em 1.9em;
  border-radius: var(--radius-full);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--dur-fast) var(--ease-calm),
              background-color var(--dur-base) var(--ease-calm),
              border-color var(--dur-base) var(--ease-calm),
              color var(--dur-base) var(--ease-calm),
              box-shadow var(--dur-base) var(--ease-calm);
}
.btn:active { transform: scale(0.98); }

.btn--lg {
  font-size: var(--fs-lead);
  padding: 1.15em 2.6em;
}

.btn--primary {
  background-color: var(--color-accent);
  color: var(--color-white);
}
.btn--primary:hover { background-color: var(--color-accent-dark); color: var(--color-white); }

.btn--secondary {
  background-color: transparent;
  border-color: var(--color-taupe);
  color: var(--color-taupe);
}
.btn--secondary:hover { background-color: var(--color-taupe); color: var(--color-cream-soft); }

.btn--ghost {
  background-color: transparent;
  color: var(--color-ink);
  padding-inline: 0.25em;
  border-radius: 0;
}
.btn--ghost::after { content: "→"; margin-left: var(--space-2xs); transition: transform var(--dur-fast) var(--ease-calm); }
.btn--ghost:hover { color: var(--color-accent); }
.btn--ghost:hover::after { transform: translateX(3px); }

/* =========================================================
   6. FORMULARIOS
   ========================================================= */
.field { display: flex; flex-direction: column; gap: var(--space-3xs); margin-bottom: var(--space-md); }

.field label {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--color-taupe);
}

.field input,
.field textarea,
.field select {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--color-ink);
  background-color: var(--color-cream-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.85em 1em;
  transition: border-color var(--dur-base) var(--ease-calm), box-shadow var(--dur-base) var(--ease-calm);
}

.field input::placeholder,
.field textarea::placeholder { color: var(--color-taupe-light); }

.field textarea { resize: vertical; min-height: 8.5em; }

.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: var(--shadow-focus);
}

.field--check { flex-direction: row; align-items: flex-start; gap: var(--space-xs); }
.field--check input { width: 1.15em; height: 1.15em; margin-top: 0.2em; accent-color: var(--color-accent); }
.field--check label { font-weight: 400; color: var(--color-ink); }

/* =========================================================
   7. TARJETAS
   ========================================================= */
.card {
  background-color: var(--color-cream-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  box-shadow: var(--shadow-soft);
  transition: transform var(--dur-base) var(--ease-calm), box-shadow var(--dur-base) var(--ease-calm);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }

.card .u-eyebrow { margin-bottom: var(--space-sm); }
.card h3 { margin-bottom: var(--space-xs); }
.card p { margin-bottom: var(--space-md); color: var(--color-ink); }

/* =========================================================
   8. INSIGNIAS / SWATCHES
   ========================================================= */
.badge {
  display: inline-flex;
  align-items: center;
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 0.35em 0.9em;
  border-radius: var(--radius-full);
  background-color: var(--color-accent-soft);
  color: var(--color-accent-dark);
}

.swatch {
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  overflow: hidden;
}
.swatch__fill { height: 96px; }
.swatch__meta { padding: var(--space-sm) var(--space-md); background: var(--color-cream-soft); }
.swatch__name { font-family: var(--font-display); color: var(--color-taupe); font-size: var(--fs-h6); }
.swatch__hex { font-size: var(--fs-caption); color: var(--color-taupe-light); letter-spacing: 0.03em; }

/* =========================================================
   9. CITA / TESTIMONIO
   ========================================================= */
.testimonial {
  text-align: center;
  max-width: 54ch;
  margin-inline: auto;
}
.testimonial blockquote { max-width: none; font-size: var(--fs-h4); }
.testimonial cite {
  display: block;
  margin-top: var(--space-md);
  font-style: normal;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--color-taupe);
}
.testimonial cite span {
  display: block;
  font-weight: 400;
  color: var(--color-taupe-light);
}

/* =========================================================
   10. HEADER / NAVEGACIÓN
   ========================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background-color: color-mix(in srgb, var(--color-cream) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-border);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-sm);
}

.brand {
  font-family: var(--font-display);
  font-size: 1.4rem;
  letter-spacing: var(--ls-wide);
  color: var(--color-taupe);
  text-decoration: none;
}

.main-navigation ul {
  list-style: none;
  display: flex;
  gap: var(--space-lg);
  padding: 0;
}
.main-navigation a {
  color: var(--color-ink);
  text-decoration: none;
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.main-navigation a:hover { color: var(--color-accent); }
/* — Botón dentro del nav (ej. "Acompañamiento 1 a 1" en la masterclass):
   .main-navigation a le gana a .btn--pink en color por especificidad, y en
   modo oscuro --color-ink es casi blanco — sobre fondo rosa quedaría casi
   ilegible. Se fija el color propio del botón, sin importar el tema. — */
.main-navigation a.btn--pink,
.main-navigation a.btn--pink:hover { color: var(--color-black); }

.theme-toggle {
  background: none;
  border: 1px solid var(--color-border);
  color: var(--color-taupe);
  border-radius: var(--radius-full);
  padding: 0.5em 1em;
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  font-weight: 600;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-calm), border-color var(--dur-fast) var(--ease-calm);
}
.theme-toggle:hover { color: var(--color-accent); border-color: var(--color-accent); }

.menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-taupe);
}

@media (max-width: 760px) {
  .main-navigation { display: none; }
  .main-navigation.is-open {
    display: flex;
    position: absolute;
    inset-inline: 0;
    top: 100%;
    background: var(--color-cream);
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-md);
  }
  .main-navigation.is-open ul { flex-direction: column; gap: var(--space-md); }
  .menu-toggle { display: block; }
}

/* =========================================================
   11. HERO
   ========================================================= */
.hero {
  padding-block: var(--space-3xl) var(--space-2xl);
  text-align: center;
}
.hero__wordmark {
  font-size: clamp(3rem, 2rem + 6vw, 6.5rem);
  font-weight: 400;
  letter-spacing: 0.12em;
  color: var(--color-taupe);
  margin-bottom: var(--space-2xs);
}
.hero__tagline {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--color-accent);
  font-size: var(--fs-h5);
  margin-bottom: var(--space-lg);
}
.hero__lead {
  margin-inline: auto;
  margin-bottom: var(--space-lg);
  text-align: left;
}
.hero .cluster { justify-content: center; gap: var(--space-sm); }

/* =========================================================
   12. FOOTER
   ========================================================= */
.site-footer {
  border-top: 1px solid var(--color-border);
  padding-block: var(--space-xl);
  background-color: var(--color-cream-deep);
}
.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  align-items: center;
  justify-content: space-between;
}
.site-footer a { color: var(--color-ink); }
.site-footer a:hover { color: var(--color-accent); }

/* =========================================================
   13. MOVIMIENTO
   ========================================================= */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--dur-slow) var(--ease-calm), transform var(--dur-slow) var(--ease-calm);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* =========================================================
   14. ACCESIBILIDAD
   ========================================================= */
:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-sm);
}

.skip-link {
  position: absolute;
  left: -9999px;
  background: var(--color-accent);
  color: var(--color-white);
  padding: 0.75em 1.25em;
  border-radius: var(--radius-sm);
  z-index: 100;
}
.skip-link:focus {
  left: var(--space-md);
  top: var(--space-md);
}

/* =========================================================
   15. RESPONSIVE
   ========================================================= */
@media (max-width: 600px) {
  .section { padding-block: var(--space-xl); }
  .hero { padding-block: var(--space-2xl) var(--space-xl); }
}

/* =========================================================
   16. LANDING DE CLASE — COMPONENTES
   Hero oscuro (negro/blanco/rosado) con video + formulario de
   registro, listas de beneficios, pasos numerados y franjas de CTA.
   ========================================================= */

/* — Botón rosado (acento fresco para CTAs de registro) — */
.btn--pink {
  background-color: var(--color-pink);
  color: var(--color-black);
}
.btn--pink:hover { background-color: var(--color-pink-dark); color: var(--color-black); }

/* — Sección oscura de alto contraste — */
.section--black {
  background-color: var(--color-black);
  color: var(--color-white-pure);
}
.section--black h1,
.section--black h2,
.section--black h3 { color: var(--color-white-pure); }
.section--black .u-lead { color: var(--color-white-pure); opacity: 0.88; }
.section--black .u-eyebrow { color: var(--color-pink); }

/* — Hero de registro: video + formulario lado a lado — */
.reg-hero {
  padding-block: var(--space-xl) var(--space-lg);
}
.reg-hero__head {
  text-align: center;
  margin-bottom: var(--space-xl);
}
.reg-hero__head .u-eyebrow { justify-content: center; margin-bottom: var(--space-3xs); }
.reg-hero__head h1 { max-width: 22ch; margin-inline: auto; }
.split {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--space-xl);
  align-items: center;
}
@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; }
}

.video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
  overflow: hidden;
  background-color: var(--color-black-soft);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: var(--shadow-lift);
}
.video-frame video,
.video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.form-card {
  background-color: var(--color-white-pure);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  box-shadow: var(--shadow-lift);
}
.form-card .field { margin-bottom: var(--space-sm); }
.form-card h3 { color: var(--color-black); margin-bottom: var(--space-3xs); }
.form-card .u-small { color: var(--color-taupe); margin-bottom: var(--space-md); }
.form-card .field input { background-color: var(--color-cream-soft); }
.form-card .btn { width: 100%; }
/* — JetFormBuilder agrega un texto "Opcional"/"Requerido" bajo cada campo
   (jet-form-builder__desc); el asterisco junto a la etiqueta ya marca los
   campos requeridos, así que este texto solo suma alto sin dar info nueva. — */
.form-card .jet-form-builder__desc { display: none; }

/* — Fondo de form-card es blanco fijo (no cambia con el tema): forzar
   texto siempre oscuro encima, incluyendo el markup que inyecta
   JetFormBuilder (clases variables según el form, por eso el selector
   genérico en vez de depender de una clase concreta del plugin). — */
.form-card,
.form-card label,
.form-card p,
.form-card span,
.form-card div,
.form-card li,
.form-card legend {
  color: var(--color-black);
}
.form-card label {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 600;
  margin-bottom: var(--space-3xs);
}
.form-card input,
.form-card textarea,
.form-card select {
  width: 100%;
  padding: 0.8em 1em;
  background-color: var(--color-cream-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-black);
  font-family: var(--font-body);
  font-size: 1rem;
  transition: border-color var(--dur-fast) var(--ease-calm), box-shadow var(--dur-fast) var(--ease-calm);
}
.form-card input::placeholder,
.form-card textarea::placeholder { color: var(--color-taupe); opacity: 1; }
.form-card input:focus,
.form-card textarea:focus,
.form-card select:focus {
  outline: none;
  border-color: var(--color-pink-dark);
  box-shadow: 0 0 0 3px var(--color-pink-soft);
}
.form-card [class*="row"] { margin-bottom: var(--space-sm); }
/* — Solo botones/enlaces/inputs reales, nunca el <form> ni un <div>
   contenedor: JetFormBuilder agrega modificadores como
   "jet-form-builder-form--ajax-submit" al propio <form>, y un selector
   [class*="submit"] sin restringir la etiqueta también lo pescaba a él,
   envolviendo todo el formulario en el estilo de botón (el bug del pill
   gigante rosado). — */
.form-card button[type="submit"],
.form-card input[type="submit"],
.form-card :is(button, a, input)[class*="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: var(--space-2xs);
  padding: 0.95em 1.9em;
  background-color: var(--color-pink);
  color: var(--color-black);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 700;
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background-color var(--dur-base) var(--ease-calm), transform var(--dur-fast) var(--ease-calm);
}
.form-card button[type="submit"]:hover,
.form-card input[type="submit"]:hover,
.form-card :is(button, a, input)[class*="submit"]:hover { background-color: var(--color-pink-dark); }
.form-card button[type="submit"]:active,
.form-card input[type="submit"]:active,
.form-card :is(button, a, input)[class*="submit"]:active { transform: scale(0.98); }

/* — Pestañas dentro de form-card (registro / login) — */
.form-tabs {
  display: flex;
  gap: var(--space-3xs);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-md);
}
.form-tabs__btn {
  flex: 1;
  padding-block: var(--space-xs);
  background-color: #F1EEE9;
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  font-family: var(--font-display);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--color-taupe);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-calm), border-color var(--dur-fast) var(--ease-calm), background-color var(--dur-fast) var(--ease-calm);
}
.form-tabs__btn:hover { color: var(--color-black); }
.form-tabs__btn[aria-selected="true"] {
  color: var(--color-black);
  background-color: var(--color-pink-soft);
  border-bottom-color: var(--color-pink-dark);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.form-tabs__panel[hidden] { display: none; }

/* — Lista de beneficios con check — */
.check-list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--space-sm);
}
.check-list li {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--fs-lead);
}
.check-list li::before {
  content: "✓";
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6em;
  height: 1.6em;
  border-radius: var(--radius-full);
  background-color: var(--color-pink-soft);
  color: var(--color-pink-dark);
  font-weight: 700;
  font-size: 0.75em;
}

/* — Lista de elementos en línea separados por barra vertical — */
.tag-list {
  list-style: none;
  padding: 0;
  margin-block: var(--space-md);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: var(--space-2xs);
}
.tag-list li {
  font-size: var(--fs-body);
  color: var(--color-ink);
  white-space: nowrap;
}
.tag-list li:not(:last-child)::after {
  content: "|";
  color: var(--color-taupe-light);
  margin-inline: var(--space-xs);
}
@media (max-width: 640px) {
  .tag-list {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2xs);
  }
  .tag-list li:not(:last-child)::after { content: none; }
}

/* — Resaltado tipo marcador — */
.u-highlight {
  background-color: var(--color-accent-soft);
  color: var(--color-accent-dark);
  font-weight: 700;
  padding-inline: 0.2em;
  border-radius: 4px;
}

/* — Subrayado curvo (énfasis ligero, un solo trazo, sin imágenes pesadas) — */
.u-underline-curve {
  position: relative;
  white-space: nowrap;
}
.u-underline-curve::after {
  content: "";
  position: absolute;
  left: -2%;
  right: -2%;
  bottom: -0.22em;
  height: 0.4em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24' preserveAspectRatio='none'%3E%3Cpath d='M2,20 Q100,-10 198,20' stroke='%23DD8AA0' stroke-width='5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
}

/* — Bloque de historia / gancho — */
.story-block {
  max-width: 60ch;
  margin-inline: auto;
}
.story-block p { margin-bottom: var(--space-sm); }
.story-block__punch {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--color-accent);
  font-size: var(--fs-h4);
}
.story-block__punch--big { font-size: var(--fs-h2); }

/* — Sección a pantalla completa (objeción, cierre) — */
.full-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.full-screen .container { display: flex; flex-direction: column; align-items: center; gap: var(--space-2xl); }
.objection-next {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2xs);
  color: var(--color-accent);
}
.objection-next__label {
  font-family: var(--font-display);
  font-size: var(--fs-h5);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
}
.objection-next__arrow {
  font-size: 1.5rem;
  line-height: 1;
  animation: objection-bounce 1.6s ease-in-out infinite;
}
@keyframes objection-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(8px); }
}
@media (prefers-reduced-motion: reduce) {
  .objection-next__arrow { animation: none; }
}

/* — Hilo narrativo: elementos conectados por una línea vertical,
   como el hilo de una historia que se va leyendo — */
.thread {
  position: relative;
  max-width: 60ch;
  margin-inline: auto;
  padding-left: 32px;
  border-left: 2px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}
.thread__item { position: relative; }
.thread__item::before {
  content: "";
  position: absolute;
  left: -39px;
  top: 0.45em;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-cream-soft);
}
.thread__item p + p { margin-top: var(--space-sm); }

/* — Tarjetas numeradas (pasos del método) — */
.step-card__number {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  color: var(--color-pink-dark);
  margin-bottom: var(--space-xs);
}
.step-card ul {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--space-2xs);
}
.step-card ul li {
  padding-left: var(--space-md);
  position: relative;
  color: var(--color-ink);
}
.step-card ul li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--color-pink-dark);
}

/* — Franja de CTA (reto/urgencia y cierre) — */
.cta-band {
  text-align: center;
  padding-block: var(--space-2xl);
}
.cta-band--black {
  background-color: var(--color-black);
  color: var(--color-white-pure);
}
.cta-band--black h2 { color: var(--color-white-pure); }
.cta-band--black .u-eyebrow { color: var(--color-pink); }
.cta-band__lead {
  max-width: 48ch;
  margin-inline: auto;
  margin-bottom: var(--space-lg);
  font-size: var(--fs-lead);
}

/* — Frase grande a pantalla completa (reto/urgencia) — */
.big-line {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 1.6rem + 4.5vw, 5rem);
  line-height: var(--lh-display);
  color: var(--color-white-pure);
}

/* =========================================================
   18. LANDING DE PAQUETES (sesiones 1:1)
   Timeline de etapas, tabla comparativa y tarjetas de plan.
   ========================================================= */

/* — Paleta de esta landing (hero + secciones por kit). Dos grupos de
   variables con reglas distintas:
   1) Colores de marca por kit (gris/verde-oliva/verde y lo que se deriva de
      ellos) — fijos a propósito, no cambian con el tema, igual que las
      landings de `formaciones`: son los colores exactos pedidos para cada
      plan, no una reinterpretación sobre el tema claro/oscuro.
   2) "Chrome" de página (fondo, texto de titulares, tarjetas) — antes
      también fijo, pero eso apagaba el toggle de modo oscuro en esta
      página entera. Ahora sí varía con el tema (ver los 3 bloques debajo),
      reutilizando los mismos tokens ya probados del resto del sitio
      (--color-cream/--color-ink/etc.) para no inventar una paleta oscura
      nueva a ciegas.
   --fondo-crema queda fuera del cambio: no es "fondo de página", es el
   texto claro que se lee sobre los fondos de color de cada kit (columnas
   de la tabla, secciones .kit-detail) — ese rol tampoco debe cambiar con
   el tema, por eso --pkg-bg existe aparte para el fondo real de sección.
   Vive en el body (ver body_class en page-sesiones-1-a-1.php) para que
   cualquier sección de la página pueda usarla, no solo el hero. — */
body.page-sesiones-paquetes {
  --pkg-bg:         #FBF6EF;
  --fondo-crema:      #FBF6EF;
  --fondo-crema-alt:  #F0E6D6;
  --texto-oscuro:   #2B2418;
  --terracota:      #7A4E40;
  --verde-oliva:    #5D6F50;
  --verde:          #3F8F5F;
  --gris-texto:     #8C8577;
  --tarjeta-fondo:  #FFFFFF;
  --tarjeta-borde:  #E8E2D6;
  --avatar-fondo:   #F0E6DA;
  --avatar-piel:    #C99A80;
  --anillo-inicio:  #6B5E48;
  --anillo-fin:     #4D7F57;

  /* — Color por kit: un solo lugar donde cambiar el color de un kit (dot del
     timeline, título de tarjeta, columna de la tabla, fondo de su sección) —
     en vez de tocar cada regla suelta. El tinte de fondo (10%) también se
     calcula una sola vez aquí, no en cada selector que lo usa. — */
  --kit-1-color: var(--gris-texto);
  --kit-3-color: var(--verde-oliva);
  --kit-2-color: color-mix(in srgb, var(--kit-1-color) 50%, var(--kit-3-color));
  --kit-1-tint: color-mix(in srgb, var(--kit-1-color) 10%, var(--color-white));
  --kit-2-tint: color-mix(in srgb, var(--kit-2-color) 10%, var(--color-white));
  --kit-3-tint: color-mix(in srgb, var(--kit-3-color) 10%, var(--color-white));
}

/* — Modo oscuro del "chrome" (fondo/titulares/tarjetas), en los mismos 3
   bloques que usa el resto del sitio: automático por preferencia del
   sistema, y los dos overrides explícitos del toggle (data-theme) que
   ganan por especificidad sin importar el orden. — */
@media (prefers-color-scheme: dark) {
  body.page-sesiones-paquetes {
    --pkg-bg:           #211D18;
    --fondo-crema-alt:  #35302A;
    --texto-oscuro:     #E8E0D2;
    --tarjeta-fondo:    #2B2620;
    --tarjeta-borde:    #4A4238;
    --terracota:        #C9A08C;
  }
}
:root[data-theme="dark"] body.page-sesiones-paquetes {
  --pkg-bg:           #211D18;
  --fondo-crema-alt:  #35302A;
  --texto-oscuro:     #E8E0D2;
  --tarjeta-fondo:    #2B2620;
  --tarjeta-borde:    #4A4238;
  --terracota:        #C9A08C;
}
:root[data-theme="light"] body.page-sesiones-paquetes {
  --pkg-bg:           #FBF6EF;
  --fondo-crema-alt:  #F0E6D6;
  --texto-oscuro:     #2B2418;
  --tarjeta-fondo:    #FFFFFF;
  --tarjeta-borde:    #E8E2D6;
  --terracota:        #7A4E40;
}

.hero-packages-section {
  background-color: var(--pkg-bg);
}
.hero-packages-section h1,
.hero-packages-section h2 { color: var(--texto-oscuro); }
.hero-packages-section .u-eyebrow { color: var(--terracota); }
.hero-packages-section .u-lead { color: var(--texto-oscuro); }

.stages-section {
  background-color: var(--fondo-crema-alt);
}
.stages-section h2 { color: var(--texto-oscuro); }
/* — Todos los botones de esta landing en rosa, no solo los del hero — */
body.page-sesiones-paquetes .btn--primary { background-color: var(--color-pink); color: var(--color-black); }
body.page-sesiones-paquetes .btn--primary:hover { background-color: var(--color-pink-dark); color: var(--color-black); }
body.page-sesiones-paquetes .btn--secondary { border-color: var(--color-pink-dark); color: var(--color-pink-dark); }
body.page-sesiones-paquetes .btn--secondary:hover { background-color: var(--color-pink); color: var(--color-black); }

/* — Hero: intro y foto a dos columnas iguales (50 / 50) — */
.hero-packages {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: var(--space-2xl);
}
.hero-packages__intro { min-width: 0; }
.hero-packages__intro > p.u-small { color: var(--gris-texto); }
.hero-packages__figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
}
.hero-packages__caption {
  font-size: var(--fs-small);
  color: var(--gris-texto);
  text-align: center;
}
.hero-packages__figure-ring {
  width: min(100%, 340px);
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--anillo-inicio), var(--anillo-fin));
  padding: 3px;
  display: flex;
}
.hero-packages__figure-gap {
  width: 100%;
  height: 100%;
  border-radius: var(--radius-md);
  background-color: var(--pkg-bg);
  padding: 10px;
  display: flex;
}
.hero-packages__figure img {
  width: 100%;
  height: 100%;
  border-radius: var(--radius-md);
  object-fit: cover;
  display: block;
}

/* — Barra de progreso segmentada (1 : 2 : 3 meses) + meses + tarjetas — */
.stage-progress__bar {
  display: flex;
  width: 100%;
  height: 10px;
  border-radius: var(--radius-full);
  overflow: hidden;
  margin-top: var(--space-xl);
}
.stage-progress__seg--1 { flex: 1; background-color: var(--kit-1-color); }
.stage-progress__seg--2 { flex: 2; background-color: var(--kit-2-color); }
.stage-progress__seg--3 { flex: 3; background-color: var(--kit-3-color); }

.stage-progress__months {
  display: flex;
  width: 100%;
  margin-top: var(--space-2xs);
}
.stage-progress__month {
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--gris-texto);
  text-align: center;
}
.stage-progress__month--1 { flex: 1; }
.stage-progress__month--2 { flex: 2; }
.stage-progress__month--3 { flex: 3; }

.stage-progress__card-icon-wrap {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-sm);
}
.stage-progress__card-icon-wrap--1 { background-color: var(--kit-1-color); }
.stage-progress__card-icon-wrap--2 { background-color: var(--kit-2-color); }
.stage-progress__card-icon-wrap--3 { background-color: var(--kit-3-color); }
.stage-progress__card-icon {
  display: block;
  width: 28px;
  height: 28px;
  color: var(--fondo-crema);
}
.stage-progress .card {
  text-align: center;
  background-color: var(--tarjeta-fondo);
  border: 1px solid var(--tarjeta-borde);
  box-shadow: none;
}
.stage-progress .card p { color: var(--gris-texto); }
.stage-progress .card--stage-1 h3 { color: var(--kit-1-color); }
.stage-progress .card--stage-2 h3 { color: var(--kit-2-color); }
.stage-progress .card--stage-3 h3 { color: var(--kit-3-color); }
.stage-progress__caption { color: var(--gris-texto); }

@media (max-width: 700px) {
  .hero-packages { grid-template-columns: 1fr; text-align: center; }
}

/* — Tabla comparativa de kits — */
.plan-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.plan-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  background-color: var(--color-white);
}
.plan-table th,
.plan-table td {
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--color-border);
  text-align: center;
}
.plan-table th:first-child,
.plan-table td:first-child { text-align: left; }
.plan-table thead th {
  font-family: var(--font-display);
  color: var(--color-ink);
  background-color: var(--color-white);
}
.plan-table tbody tr:last-child th,
.plan-table tbody tr:last-child td { border-bottom: none; }
.plan-table__month-row th,
.plan-table__month-row td {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--color-ink);
}
.plan-table__check { color: var(--verde, #3F8F5F); font-weight: 700; font-size: 1.1em; }

/* — Fila "Inversión": el precio final es lo que decide la compra, así que
   se destaca con más tamaño y peso que el resto de la tabla. — */
.plan-table__price-row th,
.plan-table__price-row td {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 700;
  padding-block: var(--space-md);
}
.plan-table__cross { color: color-mix(in srgb, var(--texto-oscuro, var(--color-ink)) 55%, transparent); }

/* — Fondo del color completo de cada etapa (mismo criterio que el timeline
   del hero), con texto claro encima para que se siga leyendo bien. Los
   selectores combinados (dos clases juntas, o clase+etiqueta) pisan a las
   reglas de más arriba —check/cross/month-row— sin depender del orden. — */
.plan-table__col--1 { background-color: var(--kit-1-color); color: var(--fondo-crema); }
.plan-table__col--2 { background-color: var(--kit-2-color); color: var(--fondo-crema); }
.plan-table__col--3 { background-color: var(--kit-3-color); color: var(--fondo-crema); }
.plan-table thead .plan-table__col--1 { background-color: var(--kit-1-color); color: var(--fondo-crema); font-weight: 600; }
.plan-table thead .plan-table__col--2 { background-color: var(--kit-2-color); color: var(--fondo-crema); font-weight: 600; }
.plan-table thead .plan-table__col--3 { background-color: var(--kit-3-color); color: var(--fondo-crema); font-weight: 600; }
.plan-table__check.plan-table__col--1,
.plan-table__check.plan-table__col--2,
.plan-table__check.plan-table__col--3 { color: var(--fondo-crema); }
.plan-table__cross.plan-table__col--1,
.plan-table__cross.plan-table__col--2,
.plan-table__cross.plan-table__col--3 {
  /* color-mix en vez de opacity: opacity atenúa toda la celda (incluido
     el fondo), no solo la X — el fondo debe quedar sólido, del mismo
     color que el resto del plan. */
  color: color-mix(in srgb, var(--fondo-crema) 55%, transparent);
}
.plan-table__month-row td.plan-table__col--1,
.plan-table__month-row td.plan-table__col--2,
.plan-table__month-row td.plan-table__col--3 { color: var(--fondo-crema); }
.plan-table__col--1 .woocommerce-Price-amount,
.plan-table__col--2 .woocommerce-Price-amount,
.plan-table__col--3 .woocommerce-Price-amount { color: inherit; }
.plan-table__kit-icon-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3xs);
  margin-bottom: var(--space-xs);
}
.plan-table__kit-icon-wrap {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-full);
  background-color: color-mix(in srgb, var(--fondo-crema) 18%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
}
.plan-table__kit-icon {
  width: 17px;
  height: 17px;
  color: var(--fondo-crema);
}
.plan-table__kit-label,
.plan-table__kit-name,
.plan-table__kit-duration {
  display: block;
  white-space: nowrap;
}
.plan-table__kit-label {
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.7;
  margin-bottom: var(--space-3xs);
}
.plan-table__kit-duration {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 400;
  opacity: 0.7;
  margin-top: var(--space-3xs);
}

/* — Móvil: nada de scroll horizontal. La columna de "Incluye" se oculta y
   cada fila pasa a ser una grilla de 3 (una por plan); el nombre de la
   característica, que antes vivía solo en esa columna, se repite dentro de
   cada celda vía data-label + ::before, en vez de triplicarlo en el HTML. — */
@media (max-width: 700px) {
  .plan-table-wrap { overflow-x: visible; }
  .plan-table { min-width: 0; }
  .plan-table,
  .plan-table thead,
  .plan-table tbody { display: block; width: 100%; }
  .plan-table thead tr,
  .plan-table tbody tr {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
  .plan-table thead th:first-child,
  .plan-table tbody th[scope="row"] { display: none; }
  .plan-table thead th,
  .plan-table td {
    display: block;
    padding: var(--space-xs) var(--space-2xs);
    font-size: var(--fs-caption);
  }
  /* En la grilla móvil cada columna mide ~1/3 del ancho de pantalla — muy
     poco para que el nombre largo del Plan 3 quepa en una sola línea sin
     desbordar. Se permite volver a envolver aquí (nowrap es cosa del
     encabezado de escritorio, donde sí hay espacio). */
  .plan-table__kit-label,
  .plan-table__kit-name,
  .plan-table__kit-duration { white-space: normal; }
  .plan-table__kit-name { font-size: var(--fs-small); }
  /* Sin la primera columna, todo lo que queda vive dentro de una celda de
     color (plan-table__col--N): texto siempre claro para que se lea bien. */
  .plan-table thead th,
  .plan-table td { color: var(--fondo-crema); }
  .plan-table td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--fondo-crema);
    opacity: 0.75;
    margin-bottom: var(--space-3xs);
    line-height: 1.25;
  }
  /* El nombre de la característica (data-label) ya dice de qué se trata:
     el check sobra ahí (se oculta, solo queda el nombre). Cuando NO está
     incluido no hace falta ni el nombre — con la X alcanza.
     color:transparent en vez de font-size:0: algunos navegadores móviles
     fuerzan un tamaño mínimo de letra e ignoran el font-size:0, pero
     nunca ignoran el color. — */
  /* Mismo nivel de especificidad que la regla que pinta el check de color
     claro más arriba (.plan-table__check.plan-table__col--N) — si no, esa
     regla le gana a esta sin importar el orden, y el check sigue visible. */
  .plan-table__check.plan-table__col--1,
  .plan-table__check.plan-table__col--2,
  .plan-table__check.plan-table__col--3 { color: transparent; }
  .plan-table td.plan-table__cross[data-label]::before { content: none; }
  /* La celda ya estira su alto al del resto de la fila (grid); centramos
     la X ahí dentro en vez de dejarla pegada arriba. Selector con la misma
     especificidad que ".plan-table td" (clase+etiqueta) — si no, esa regla
     de más arriba (que pone display:block) le gana y la X queda sin
     centrar, sin importar el orden. */
  .plan-table td.plan-table__cross {
    font-size: 1.1em;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* — Tarjetas de plan (kit) — */
.plan-card__price {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  color: var(--color-accent);
  margin-bottom: var(--space-3xs);
}
.plan-card__duration {
  color: var(--color-taupe);
  margin-bottom: var(--space-md);
}
.plan-card__sessions {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--space-sm);
  margin-block: var(--space-md);
}
.plan-card__sessions li { padding-left: var(--space-md); position: relative; }
.plan-card__sessions li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--color-accent);
}
.plan-card__sessions strong { color: var(--color-ink); }

/* — Una sección por kit: una sola columna de texto, ícono junto al
   nombre del plan (no una imagen aparte), fondo del color de esa etapa en
   el timeline (gris / verde oliva / verde), texto claro para contraste. — */
.kit-detail { padding-block: var(--space-2xl); color: var(--fondo-crema); }
.kit-detail--1 { background-color: var(--kit-1-color); }
.kit-detail--2 { background-color: var(--kit-2-color); }
.kit-detail--3 { background-color: var(--kit-3-color); }

.kit-detail__single {
  max-width: var(--content-w-lg);
  margin-inline: auto;
}

/* — Ícono arriba, texto abajo, todo centrado y en su propia línea (nombre
   y duración incluidos): así el nombre largo del Plan 3 nunca compite por
   ancho con el/los ícono(s) ni se corta a media palabra. — */
.kit-detail__heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

/* — Ícono(s) del kit: SVG propio en vez de foto — vectorial (nunca se
   pixela) e inline (sin petición HTTP aparte, no pesa nada) — chicos,
   junto al nombre del plan. Un plan que suma etapas (Plan 2, Plan 3) suma
   también los íconos de las etapas anteriores, uno junto al otro. — */
.kit-detail__icon-row {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
}
.kit-detail__icon-wrap {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  background-color: color-mix(in srgb, var(--fondo-crema) 15%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
}
.kit-detail__icon {
  width: 44%;
  height: 44%;
  color: var(--fondo-crema);
}

.kit-detail__plan-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3xs);
  margin-bottom: 0;
}
.kit-detail__plan-label,
.kit-detail__plan-name,
.kit-detail__plan-duration {
  display: block;
  color: var(--fondo-crema);
  white-space: nowrap;
}
.kit-detail__plan-label {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.7;
}
.kit-detail__plan-name {
  /* Más chico que un h2 normal a propósito: el nombre más largo
     ("Descubrimiento + Identificación + Creación") no entra en una sola
     línea al tamaño de h2 completo ni en pantalla angosta. */
  font-size: clamp(1rem, 0.75rem + 1.3vw, 1.5rem);
}
.kit-detail__plan-duration {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 400;
  opacity: 0.75;
}
.kit-detail__single h3 { color: var(--fondo-crema); font-size: var(--fs-h5); margin-top: var(--space-lg); margin-bottom: var(--space-2xs); }
.kit-detail__single .u-eyebrow { color: var(--fondo-crema); opacity: 0.85; }
.kit-detail__single .u-lead { color: var(--fondo-crema); }
.kit-detail__single p { color: var(--fondo-crema); opacity: 0.92; }
.kit-detail__single .plan-card__sessions strong,
.kit-detail__single .plan-card__sessions li::before { color: var(--fondo-crema); }
.kit-detail__price {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  color: var(--fondo-crema);
  margin-top: var(--space-md);
  margin-bottom: var(--space-xs);
}
.kit-detail__price-monthly {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 400;
  opacity: 0.75;
  margin-top: var(--space-3xs);
}
/* Botones de esta página: ver regla unificada en color rosa más arriba
   (body.page-sesiones-paquetes .btn--primary / .btn--secondary). */

.big-line--pink { color: var(--color-pink); }

/* =========================================================
   17. PÁGINAS DE BIENVENIDA A CADA PLAN (page-plan-N-*.php)
   Ícono(s) del plan (mismo criterio que .kit-detail__icon-row en
   page-sesiones-1-a-1.php: un plan que suma etapas suma también los
   íconos de las etapas anteriores) + título más chico que un h1 normal,
   porque el nombre completo del plan ("Plan 3: Descubrimiento +
   Identificación + Creación") no entra cómodo al tamaño de h1 por defecto.
   ========================================================= */
.plan-welcome__icon-row {
  display: flex;
  justify-content: center;
  gap: var(--space-2xs);
  margin-bottom: var(--space-md);
}
.plan-welcome__icon-wrap {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
}
/* — Mismos colores por etapa que la tabla comparativa y las secciones de
   kit en page-sesiones-1-a-1.php (gris / verde intermedio / verde oliva).
   Se repiten los valores exactos en vez de depender de las variables de
   ese body (--kit-N-color viven solo bajo body.page-sesiones-paquetes,
   estas páginas no tienen esa clase). — */
.plan-welcome__icon-wrap--1 { background-color: #8C8577; }
.plan-welcome__icon-wrap--2 { background-color: color-mix(in srgb, #8C8577 50%, #5D6F50); }
.plan-welcome__icon-wrap--3 { background-color: #5D6F50; }
.plan-welcome__icon {
  width: 28px;
  height: 28px;
  color: var(--color-white-pure);
}
.plan-welcome__title {
  margin-top: var(--space-sm);
  font-size: clamp(1.5rem, 1.15rem + 1.6vw, 2.25rem);
}

/* — "Hábito N" en la guía (page-guia-5-habitos-ocultos.php): más grande que
   un u-eyebrow normal, es el ancla visual de cada sección. — */
.habito-label {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-xs);
}