/* =========================================================
   AmorAcciōn — hoja de estilos principal
   ---------------------------------------------------------
   Paleta oficial (no cambiar sin decisión de marca):
     Verde profundo : #1C3D2E
     Terracota      : #C4622D
     Crema cálido   : #F4EFE4
   Tipografía:
     Titulares : Bebas Neue
     Cuerpo    : DM Sans
   Organización del archivo:
     1. Variables y reset
     2. Tipografía base
     3. Botones
     4. Header y navegación
     5. Hero
     6. Secciones genéricas
     7. Bio (Quién es izēki)
     8. Método SPAM (resumen en index)
     9. Acompañamientos (jerarquía de ofertas)
    10. Testimonios
    11. Comunidad Garopaba
    12. FAQ
    13. CTA final
    14. Footer
    15. Página #VAMOS JUNTOS (documento de venta)
    16. Blog y Pódcast
    17. Animaciones al scroll
    18. Responsive (tablet / desktop)
   ========================================================= */

/* ---------- 1. Variables y reset ---------- */
:root {
  --verde: #1C3D2E;
  --verde-oscuro: #142E22;      /* variante para fondos hero/etapas */
  --terracota: #C4622D;
  --terracota-oscuro: #A34F22;  /* hover de botones */
  --crema: #F4EFE4;
  --crema-claro: #FCFAF4;       /* tarjetas sobre fondo crema */
  --tinta: #26241F;             /* texto sobre crema */
  --tinta-suave: #5C5850;       /* texto secundario sobre crema */
  --crema-suave: rgba(244, 239, 228, 0.75); /* texto secundario sobre verde */

  --fuente-titulo: "Bebas Neue", "Arial Narrow", sans-serif;
  --fuente-cuerpo: "DM Sans", "Helvetica Neue", Arial, sans-serif;

  --ancho-max: 1100px;
  --radio: 14px;
  --sombra: 0 10px 30px rgba(28, 61, 46, 0.10);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Compensa el header fijo cuando se navega con anclas (#metodo, etc.) */
  scroll-padding-top: 90px;
}

body {
  margin: 0;
  font-family: var(--fuente-cuerpo);
  font-size: 1.0625rem; /* 17px */
  line-height: 1.65;
  color: var(--tinta);
  background: var(--crema);
  -webkit-font-smoothing: antialiased;
}

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

/* ---------- 2. Tipografía base ---------- */
h1, h2, h3, .display {
  font-family: var(--fuente-titulo);
  font-weight: 400;           /* Bebas no tiene bold real */
  letter-spacing: 0.02em;
  line-height: 1.05;
  margin: 0 0 0.5em;
  text-transform: uppercase;
}

h1 { font-size: clamp(2.6rem, 8vw, 4.5rem); }
h2 { font-size: clamp(2rem, 6vw, 3.2rem); }
h3 { font-size: clamp(1.4rem, 4vw, 1.9rem); }

p { margin: 0 0 1em; }

a { color: var(--terracota); }

/* Etiqueta pequeña arriba de los títulos de sección ("kicker") */
.kicker {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--terracota);
  margin-bottom: 0.8rem;
}

/* Texto secundario / aclaraciones */
.nota { font-size: 0.9rem; color: var(--tinta-suave); }

/* ---------- 3. Botones ---------- */
.btn {
  display: inline-block;
  font-family: var(--fuente-cuerpo);
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  text-align: center;
  padding: 0.9rem 1.8rem;
  border-radius: 999px;
  border: 2px solid transparent;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
}

/* Botón primario: SIEMPRE terracota. Es la única señal de "acción" del sitio. */
.btn--terracota {
  background: var(--terracota);
  color: #fff;
}
.btn--terracota:hover { background: var(--terracota-oscuro); }

/* Botón secundario sobre fondo verde */
.btn--ghost {
  background: transparent;
  color: var(--crema);
  border-color: var(--crema);
}
.btn--ghost:hover { background: rgba(244, 239, 228, 0.12); }

/* Botón secundario sobre fondo crema */
.btn--borde {
  background: transparent;
  color: var(--verde);
  border-color: var(--verde);
}
.btn--borde:hover { background: rgba(28, 61, 46, 0.08); }

/* ---------- 4. Header y navegación ---------- */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--verde);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
}

.header__inner {
  max-width: var(--ancho-max);
  margin: 0 auto;
  padding: 0.7rem 1.2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

/* Lockup de marca — REGLA: "izēki • molina / amoracciōn" va SIEMPRE
   en Montserrat (nunca en Bebas). Dos líneas: nombre en terracota,
   marca en tono apagado, todo en minúsculas. */
.lockup {
  font-family: "Montserrat", var(--fuente-cuerpo);
  font-weight: 800;
  text-transform: lowercase;
  letter-spacing: 0.01em;
  line-height: 1.15;
  text-decoration: none;
  display: inline-flex;
  flex-direction: column;
  font-size: 1rem;
}
/* Las dos líneas ocupan el MISMO ANCHO (bloque alineado, como el logo):
   "amoracciōn" va más grande y "izēki • molina" se estira con
   letter-spacing para llegar exactamente al mismo borde. */
.lockup__nombre {
  color: var(--terracota);
  letter-spacing: 0.053em;
}
.lockup__marca {
  color: rgba(244, 239, 228, 0.5);
  font-size: 1.24em;
  line-height: 1.05;
}

/* Botón hamburguesa (solo visible en mobile, ver media queries) */
.nav-toggle {
  background: none;
  border: 0;
  padding: 0.4rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.nav-toggle span {
  width: 26px;
  height: 2px;
  background: var(--crema);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
/* Hamburguesa → cruz cuando el menú está abierto */
.nav.open ~ .nav-toggle span:nth-child(1),
body.menu-abierto .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.menu-abierto .nav-toggle span:nth-child(2) { opacity: 0; }
body.menu-abierto .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Menú: en mobile es un panel desplegable debajo del header */
.nav {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--verde);
  border-top: 1px solid rgba(244, 239, 228, 0.15);
  padding: 0.5rem 1.2rem 1.2rem;
}
.nav.open { display: block; }

/* OJO: el selector es ".nav > ul" (solo el listado de primer nivel).
   Si fuera ".nav ul" alcanzaría también al submenú y lo dejaría
   siempre visible (pisa su display:none por especificidad). */
.nav > ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

/* :not(.btn) evita pisar el estilo del botón terracota "Escribime" */
.nav a:not(.btn),
.nav .submenu-toggle {
  display: block;
  width: 100%;
  text-align: left;
  font-family: var(--fuente-cuerpo);
  font-size: 1rem;
  font-weight: 700;
  color: var(--crema);
  text-decoration: none;
  padding: 0.6rem 0.4rem;
  background: none;
  border: 0;
  cursor: pointer;
}
.nav a:not(.btn):hover, .nav .submenu-toggle:hover { color: #fff; }

/* Blog y Pódcast con MENOS peso visual que Acompañamientos (decisión de jerarquía) */
.nav .nav--liviano a {
  font-weight: 400;
  color: var(--crema-suave);
  font-size: 0.95rem;
}

/* Submenú de Acompañamientos */
.has-submenu { position: relative; }
.submenu-toggle::after { content: " ▾"; font-size: 0.8em; }
.submenu {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0 0 0 1rem;
  border-left: 2px solid var(--terracota);
}
.has-submenu.open .submenu { display: block; }
.submenu a { font-weight: 400; font-size: 0.95rem; }

/* CTA de WhatsApp dentro del menú */
.nav .nav-cta {
  margin-top: 0.8rem;
}
.nav .nav-cta .btn { width: 100%; }

/* ---------- 5. Hero ---------- */
.hero {
  background: var(--verde);
  color: var(--crema);
  padding: 3.5rem 1.2rem 4rem;
}

.hero__inner {
  max-width: var(--ancho-max);
  margin: 0 auto;
  display: grid;
  gap: 2.5rem;
  align-items: center;
}

.hero .kicker { color: var(--terracota); }
.hero h1 { color: var(--crema); }
.hero h1 em {
  font-style: normal;
  color: var(--terracota);
}

.hero__sub {
  font-size: 1.15rem;
  max-width: 34rem;
  color: var(--crema-suave);
}

.hero__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  margin-top: 1.5rem;
}

/* Link secundario de bajo peso (no compite con el CTA primario) */
.link-suave {
  color: var(--crema-suave);
  font-size: 0.95rem;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.link-suave:hover { color: var(--crema); }

.hero__foto img {
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  width: 100%;
  max-height: 560px;
  object-fit: cover;
}

/* Etiqueta "Lanza agosto 2026" */
.badge {
  display: inline-block;
  background: var(--terracota);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  margin-bottom: 1rem;
}

/* ---------- 6. Secciones genéricas ---------- */
.seccion { padding: 4.5rem 1.2rem; }
.seccion__inner { max-width: var(--ancho-max); margin: 0 auto; }

.seccion--verde {
  background: var(--verde);
  color: var(--crema);
}
.seccion--verde h2, .seccion--verde h3 { color: var(--crema); }
.seccion--verde p { color: var(--crema-suave); }

.seccion--crema { background: var(--crema); }

/* Franja angosta (para la sección Comunidad, de menor jerarquía) */
.seccion--angosta { padding: 3rem 1.2rem; }

/* ---------- 7. Bio ---------- */
/* El nombre en la bio sigue la regla del lockup: Montserrat, minúsculas */
.nombre-marca {
  font-family: "Montserrat", var(--fuente-cuerpo);
  font-weight: 800;
  text-transform: lowercase;
  letter-spacing: -0.01em;
  color: var(--terracota);
  font-size: clamp(2rem, 6vw, 3rem);
}
/* ---------- 8. Método SPAM (resumen en index) ---------- */
.spam-grid {
  display: grid;
  gap: 1.2rem;
  margin: 2.5rem 0;
}

.spam-card {
  background: rgba(244, 239, 228, 0.06);
  border: 1px solid rgba(244, 239, 228, 0.18);
  border-radius: var(--radio);
  padding: 1.6rem 1.4rem;
}
.spam-card__letra {
  font-family: var(--fuente-titulo);
  font-size: 3rem;
  line-height: 1;
  color: var(--terracota);
  display: block;
  margin-bottom: 0.4rem;
}
.spam-card h3 { font-size: 1.3rem; margin-bottom: 0.4rem; }
.spam-card p { font-size: 0.98rem; margin: 0; }

/* Arco de transformación (línea con flechas) */
.arco {
  font-family: var(--fuente-titulo);
  font-size: clamp(1.1rem, 3vw, 1.5rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--crema);
  text-align: center;
  margin: 2.5rem auto;
  max-width: 46rem;
  line-height: 1.7;
}
.arco b { color: var(--terracota); font-weight: 400; }

/* ---------- 9. Acompañamientos ---------- */
/* Tarjeta ancla: #VAMOS JUNTOS. La ÚNICA con borde terracota y badge.
   Si algún día cambia la oferta principal, mover estas clases a la nueva. */
.oferta-ancla {
  background: var(--verde);
  color: var(--crema);
  border: 3px solid var(--terracota);
  border-radius: var(--radio);
  padding: 2.2rem 1.6rem;
  box-shadow: var(--sombra);
  margin-bottom: 1.5rem;
}
.oferta-ancla h3 {
  color: var(--crema);
  font-size: clamp(1.8rem, 5vw, 2.6rem);
}
.oferta-ancla p { color: var(--crema-suave); }

.oferta-ancla__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 1rem 0 1.4rem;
  padding: 0;
  list-style: none;
}
.oferta-ancla__meta li {
  font-size: 0.85rem;
  font-weight: 700;
  border: 1px solid rgba(244, 239, 228, 0.35);
  border-radius: 999px;
  padding: 0.3rem 0.9rem;
}

.oferta-ancla__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}

/* Tarjetas medianas: 1:1 y Masaje */
.ofertas-grid {
  display: grid;
  gap: 1.2rem;
}
.oferta {
  background: var(--crema-claro);
  border: 1px solid rgba(28, 61, 46, 0.14);
  border-radius: var(--radio);
  padding: 1.8rem 1.5rem;
  display: flex;
  flex-direction: column;
}
.oferta h3 { color: var(--verde); }
.oferta p { color: var(--tinta-suave); flex-grow: 1; }
.oferta .btn { align-self: flex-start; }

.oferta__tipo {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--terracota);
  margin-bottom: 0.3rem;
}

/* ---------- 10. Testimonios ---------- */
/* Tarjetas claras, alto contraste. NUNCA texto sobre imagen. */
.testimonios-grid {
  display: grid;
  gap: 1.2rem;
  margin-top: 2rem;
}
.testimonio {
  background: var(--crema-claro);
  border: 1px solid rgba(28, 61, 46, 0.12);
  border-radius: var(--radio);
  padding: 1.6rem 1.4rem;
  box-shadow: var(--sombra);
}
.testimonio__cita {
  font-size: 1rem;
  color: var(--tinta);
  margin-bottom: 1.2rem;
}
.testimonio__persona {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
/* Avatar: si no hay foto, se usa el círculo con iniciales (fallback automático) */
.testimonio__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--verde);
  color: var(--crema);
  font-family: var(--fuente-titulo);
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.testimonio__avatar img { width: 100%; height: 100%; object-fit: cover; }
.testimonio__nombre { font-weight: 700; color: var(--verde); }
.testimonio__rol { font-size: 0.85rem; color: var(--tinta-suave); }

/* ---------- 11. Comunidad (pestañas: presencial / online) ---------- */
.comunidad-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin: 1.6rem 0 0;
}
.comunidad-tab {
  font-family: var(--fuente-cuerpo);
  font-weight: 700;
  font-size: 0.92rem;
  padding: 0.7rem 1.4rem;
  border-radius: 999px;
  border: 2px solid rgba(244, 239, 228, 0.35);
  background: transparent;
  color: var(--crema-suave);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.comunidad-tab:hover { border-color: var(--crema); color: var(--crema); }
.comunidad-tab.is-activa {
  background: var(--terracota);
  border-color: var(--terracota);
  color: #fff;
}
.comunidad-panel { margin-top: 1.8rem; }
.comunidad-panel[hidden] { display: none; }

.comunidad-grid {
  display: grid;
  gap: 1.2rem;
  margin-top: 1.5rem;
}
.circulo {
  border: 1px solid rgba(244, 239, 228, 0.25);
  border-radius: var(--radio);
  padding: 1.4rem 1.3rem;
}
.circulo h3 { font-size: 1.3rem; }
.circulo p { font-size: 0.95rem; margin-bottom: 1rem; }

/* ---------- 12. FAQ ---------- */
/* Usa <details>/<summary> nativo: accesible y sin JavaScript */
.faq details {
  background: var(--crema-claro);
  border: 1px solid rgba(28, 61, 46, 0.14);
  border-radius: var(--radio);
  margin-bottom: 0.8rem;
  overflow: hidden;
}
.faq summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--verde);
  padding: 1.1rem 1.3rem;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-family: var(--fuente-titulo);
  font-size: 1.5rem;
  color: var(--terracota);
  transition: transform 0.2s ease;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p {
  padding: 0 1.3rem 1.2rem;
  margin: 0;
  color: var(--tinta-suave);
}

/* ---------- 13. CTA final ---------- */
.cta-final { text-align: center; }
.cta-final h2 { font-size: clamp(2.4rem, 7vw, 4rem); }
.cta-final__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  margin: 2rem 0 1.5rem;
}
/* Mención liviana a blog/pódcast: chica a propósito, no compite con el CTA */
.cta-final__extra {
  font-size: 0.9rem;
  color: var(--crema-suave);
}
.cta-final__extra a { color: var(--crema-suave); }

/* ---------- 14. Footer ---------- */
.footer {
  background: var(--verde-oscuro);
  color: var(--crema-suave);
  padding: 2.5rem 1.2rem;
  font-size: 0.9rem;
}
.footer__inner {
  max-width: var(--ancho-max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.footer a { color: var(--crema); text-decoration: none; }
.footer a:hover { text-decoration: underline; }
.footer__redes {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
}
.footer .lockup { font-size: 0.95rem; }

/* ---------- 15. Página #VAMOS JUNTOS (documento de venta) ---------- */
/* Sistema propio del documento: hero y etapas sobre verde oscuro, resto crema */
.vj-hero {
  background: var(--verde-oscuro);
  color: var(--crema);
  padding: 4.5rem 1.2rem 5rem;
  text-align: center;
}
.vj-hero h1 { color: var(--crema); }
.vj-hero .hero__sub { margin: 0 auto; }
.vj-hero .hero__acciones { justify-content: center; }

/* Las 4 letras: una tarjeta grande por letra */
.letra {
  background: var(--crema-claro);
  border: 1px solid rgba(28, 61, 46, 0.14);
  border-left: 6px solid var(--terracota);
  border-radius: var(--radio);
  padding: 2rem 1.6rem;
  margin-bottom: 1.5rem;
}
.letra__inicial {
  font-family: var(--fuente-titulo);
  font-size: 4.5rem;
  line-height: 1;
  color: var(--terracota);
  display: block;
}
.letra h3 { color: var(--verde); margin-top: 0.3rem; }
.letra blockquote {
  margin: 1rem 0;
  padding-left: 1rem;
  border-left: 2px solid rgba(28, 61, 46, 0.2);
  color: var(--tinta-suave);
  font-size: 1rem;
}

/* Timeline de las 6 etapas (sobre fondo verde oscuro) */
.timeline {
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
  position: relative;
}
.timeline::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: rgba(244, 239, 228, 0.25);
}
.etapa {
  position: relative;
  padding: 0 0 2.2rem 3rem;
}
.etapa::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 6px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--terracota);
  border: 3px solid var(--verde-oscuro);
}
.etapa__num {
  font-family: var(--fuente-titulo);
  font-size: 1rem;
  letter-spacing: 0.15em;
  color: var(--terracota);
}
.etapa h3 { font-size: 1.4rem; margin: 0.2rem 0 0.5rem; }
.etapa p { font-size: 0.98rem; margin-bottom: 0.4rem; }
.etapa .etapa__eje {
  font-style: italic;
  color: var(--terracota);
  font-size: 0.95rem;
}

/* ---------- 15b. Secciones del documento de venta #VAMOS JUNTOS ----------
   (video, punto de partida, ¿es para vos?, bio completa, qué incluye,
    cita ancla, precios y garantía) */

/* Video de presentación (placeholder hasta tener el video real) */
.video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--verde-oscuro);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.video-frame .play {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: var(--terracota);
  position: relative;
}
.video-frame .play::after {
  content: "";
  position: absolute;
  left: 56%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 13px 0 13px 22px;
  border-color: transparent transparent transparent #fff;
}
.video-frame .video-nota {
  position: absolute;
  bottom: 14px;
  left: 18px;
  color: var(--crema-suave);
  font-size: 0.8rem;
}

/* El punto de partida (sobre verde) */
.dolor-frase {
  font-size: clamp(1.9rem, 5vw, 3rem);
  max-width: 22ch;
}
.dolor-frase em { font-style: normal; color: var(--terracota); }
.dolor-grid {
  display: grid;
  gap: 1.2rem;
  margin-top: 2.2rem;
}
.dolor-item {
  border: 1px solid rgba(244, 239, 228, 0.25);
  border-radius: var(--radio);
  padding: 1.4rem 1.3rem;
}
.dolor-item .ix {
  font-family: var(--fuente-titulo);
  font-size: 1.1rem;
  color: var(--terracota);
  letter-spacing: 0.1em;
  display: block;
  margin-bottom: 0.5rem;
}
.dolor-item p { margin: 0 0 0.3rem; font-size: 0.97rem; }
.dolor-item p strong { color: var(--crema); }

/* ¿Es para vos? — dos columnas sí / no */
.paravos-grid {
  display: grid;
  gap: 1.2rem;
  margin-top: 2rem;
}
.paravos-col {
  background: var(--crema-claro);
  border: 1px solid rgba(28, 61, 46, 0.14);
  border-radius: var(--radio);
  padding: 1.6rem 1.5rem;
}
.paravos-label {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.paravos-label--si { color: var(--terracota); }
.paravos-label--no { color: var(--tinta-suave); }
.paravos-lista {
  list-style: none;
  margin: 0;
  padding: 0;
}
.paravos-lista li {
  position: relative;
  padding: 0 0 0.9rem 1.7rem;
  font-size: 0.97rem;
  color: var(--tinta);
}
.paravos-lista li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--terracota);
  font-weight: 700;
}
.paravos-lista--no li { color: var(--tinta-suave); }
.paravos-lista--no li::before { content: "✕"; color: var(--tinta-suave); }

/* Bio completa de izēki. Pensada para fondo oscuro por defecto;
   agregar la clase .bio-larga--claro (ver overrides más abajo) para
   usarla sobre una sección de fondo crema. */
.bio-larga {
  display: grid;
  gap: 2rem;
  align-items: start;
}
.bio-larga__foto img {
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  /* la foto acompaña el scroll en desktop */
}
.bio-larga__alt {
  font-family: var(--fuente-cuerpo);
  font-size: 0.55em;
  font-weight: 400;
  text-transform: none;
  color: var(--crema-suave);
  letter-spacing: 0;
}
.bio-larga__roles {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1rem 0 1.6rem;
}
.bio-larga__roles span {
  border: 1px solid rgba(244, 239, 228, 0.3);
  border-radius: 999px;
  padding: 0.3rem 0.9rem;
  font-size: 0.8rem;
  color: var(--crema-suave);
}
.bio-larga__texto p { font-size: 1rem; }
.bio-enfasis p, p.bio-enfasis {
  color: var(--crema) !important;
  font-weight: 700;
}
.formacion {
  margin-top: 1.8rem;
  border-top: 1px solid rgba(244, 239, 228, 0.2);
  padding-top: 1.2rem;
}
.formacion__label {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--terracota);
}
.formacion ul {
  list-style: none;
  margin: 0.8rem 0 0;
  padding: 0;
}
.formacion li {
  position: relative;
  padding: 0 0 0.5rem 1.4rem;
  font-size: 0.92rem;
  color: var(--crema-suave);
}
.formacion li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--terracota);
}

/* "Ver más": botón que despliega el resto de la bio (js/main.js §5) */
.bio-vermas { margin-top: 0.6rem; }
.bio-larga__mas { margin-top: 1.8rem; }
.bio-larga__mas[hidden] { display: none; }

/* Variante clara de .bio-larga, para usarla sobre fondo crema
   (ej. la sección "Quién acompaña" de la home) */
.bio-larga--claro .bio-larga__alt { color: var(--tinta-suave); }
.bio-larga--claro .bio-larga__roles span {
  border-color: rgba(28, 61, 46, 0.25);
  color: var(--tinta-suave);
}
.bio-larga--claro p.bio-enfasis,
.bio-larga--claro .bio-enfasis p {
  color: var(--verde) !important;
}
.bio-larga--claro .formacion { border-top-color: rgba(28, 61, 46, 0.15); }
.bio-larga--claro .formacion li { color: var(--tinta-suave); }

/* Etiqueta chica de cada letra del método */
.letra__tag {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  margin: 0.2rem 0 0.4rem;
}

/* Qué incluye */
.incluye-grid {
  display: grid;
  gap: 1.2rem;
  margin-top: 2rem;
}
.inc-item {
  display: flex;
  gap: 1rem;
  background: var(--crema-claro);
  border: 1px solid rgba(28, 61, 46, 0.14);
  border-radius: var(--radio);
  padding: 1.3rem 1.3rem;
}
.inc-check {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--terracota);
  color: #fff;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
}
.inc-item h4 {
  margin: 0 0 0.3rem;
  font-family: var(--fuente-cuerpo);
  font-size: 1.05rem;
  color: var(--verde);
}
.inc-item p { margin: 0; font-size: 0.92rem; color: var(--tinta-suave); }

/* Cita ancla (franja verde) */
.ancla-cita {
  text-align: center;
  max-width: 42rem;
  margin: 0 auto;
}
.ancla-cita p {
  font-family: var(--fuente-titulo);
  text-transform: uppercase;
  font-size: clamp(1.5rem, 4.5vw, 2.5rem);
  line-height: 1.2;
  color: var(--crema);
  margin: 0 0 0.35em;
}
.ancla-cita p b { color: var(--terracota); font-weight: 400; }

/* Precios escalonados */
.precios-grid {
  display: grid;
  gap: 1.4rem;
  margin-top: 2.2rem;
}
.precio {
  position: relative;
  background: var(--crema-claro);
  border: 1px solid rgba(28, 61, 46, 0.14);
  border-radius: var(--radio);
  padding: 2rem 1.5rem 1.7rem;
  display: flex;
  flex-direction: column;
}
.precio--destacado { border: 3px solid var(--terracota); }
.precio__badge {
  position: absolute;
  top: -14px;
  left: 1.4rem;
}
.precio__ventana { font-weight: 700; color: var(--verde); }
.precio__monto {
  font-family: var(--fuente-titulo);
  font-size: 3.4rem;
  line-height: 1;
  color: var(--verde);
  margin: 0.4rem 0 0.2rem;
}
.precio__monto span {
  font-size: 1.3rem;
  color: var(--terracota);
  margin-right: 0.3rem;
}
.precio__meta { font-size: 0.85rem; color: var(--tinta-suave); margin-bottom: 1rem; }
.precio ul {
  list-style: none;
  margin: 0 0 1.4rem;
  padding: 0;
  flex-grow: 1;
}
.precio li {
  position: relative;
  padding: 0 0 0.5rem 1.5rem;
  font-size: 0.92rem;
  color: var(--tinta);
}
.precio li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--terracota);
  font-weight: 700;
}
.pago-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 2rem;
  justify-content: space-between;
  border-top: 1px solid rgba(28, 61, 46, 0.15);
  border-bottom: 1px solid rgba(28, 61, 46, 0.15);
  padding: 0.9rem 0;
  margin-top: 2.2rem;
  font-size: 0.85rem;
  color: var(--tinta-suave);
}
.precios-nota {
  text-align: center;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.85rem;
  color: var(--terracota);
  margin-top: 1.6rem;
}

/* Garantía (sobre verde oscuro) */
.garantia {
  max-width: 44rem;
  margin: 0 auto;
  text-align: center;
}
.garantia blockquote {
  margin: 1rem 0;
  font-size: clamp(1.1rem, 2.5vw, 1.35rem);
  font-style: italic;
  line-height: 1.6;
  color: var(--crema);
}
.garantia__firma {
  font-family: "Montserrat", var(--fuente-cuerpo);
  font-weight: 700;
  text-transform: lowercase;
  color: var(--terracota);
}

@media (min-width: 720px) {
  .dolor-grid { grid-template-columns: repeat(2, 1fr); }
  .paravos-grid { grid-template-columns: 3fr 2fr; }
  .bio-larga { grid-template-columns: 2fr 3fr; }
  .bio-larga__foto { position: sticky; top: 90px; }
  .incluye-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .precios-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- 15c. Página "gracias-por-registrarte" (Charla Laboratorio) ---------- */

/* Confirmación de estado, arriba de todo */
.confirmacion {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  flex-wrap: wrap;
}
.confirmacion__check {
  flex-shrink: 0;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--terracota);
  color: #fff;
  font-size: 1.7rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.confirmacion__avatar {
  flex-shrink: 0;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--terracota);
}

/* Checklist de pasos reales */
.progreso {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--terracota);
}
.paso {
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
  background: var(--crema-claro);
  border: 1px solid rgba(28, 61, 46, 0.14);
  border-radius: var(--radio);
  padding: 1.4rem 1.3rem;
  margin-top: 1.1rem;
}
.paso--critico { border: 2px solid var(--terracota); }
.paso__check {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 2px solid rgba(28, 61, 46, 0.4);
  background: transparent;
  color: transparent;
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.paso.hecho .paso__check {
  background: var(--terracota);
  border-color: var(--terracota);
  color: #fff;
}
.paso__cuerpo h3 {
  font-family: var(--fuente-cuerpo);
  font-size: 1.1rem;
  color: var(--verde);
  text-transform: none;
  letter-spacing: 0;
  margin: 0 0 0.4rem;
}
.paso__cuerpo p { font-size: 0.95rem; color: var(--tinta-suave); }
.paso__etiqueta {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--terracota);
  margin-bottom: 0.4rem;
}
.paso.hecho .paso__cuerpo h3 { text-decoration: line-through; opacity: 0.75; }

/* Tabla de husos horarios */
.husos { margin-top: 1.5rem; }
.huso {
  display: flex;
  align-items: baseline;
  gap: 1.2rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid rgba(244, 239, 228, 0.2);
}
.huso__hora {
  font-family: var(--fuente-titulo);
  font-size: 1.9rem;
  color: var(--terracota);
  min-width: 4.2rem;
  line-height: 1;
}
.huso__paises { font-size: 0.95rem; color: var(--crema-suave); letter-spacing: 0.06em; }

/* Panel expandible del freebie */
.freebie-panel { margin-top: 1.8rem; }
.freebie-panel[hidden] { display: none; }
.freebie-panel h3 {
  color: var(--verde);
  margin-top: 2rem;
}
.freebie-panel .freebie-kicker {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--terracota);
  margin: 2rem 0 0.3rem;
}
.freebie-panel ul {
  list-style: none;
  margin: 0 0 1em;
  padding: 0;
}
.freebie-panel ul li {
  position: relative;
  padding: 0 0 0.7rem 1.4rem;
}
.freebie-panel ul li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--terracota);
}

/* CTA sticky al pie (siempre visible) */
.cta-sticky {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  background: var(--verde-oscuro);
  padding: 0.75rem 1.2rem;
  display: flex;
  justify-content: center;
  box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.25);
}
.cta-sticky .btn { width: 100%; max-width: 26rem; }
/* deja lugar para la barra sticky al final de la página */
body.con-cta-sticky { padding-bottom: 84px; }

/* ---------- 16. Blog y Pódcast ---------- */
.pagina-hero {
  background: var(--verde);
  color: var(--crema);
  padding: 3.5rem 1.2rem;
  text-align: center;
}
.pagina-hero h1 { color: var(--crema); font-size: clamp(2.2rem, 7vw, 3.5rem); }
.pagina-hero p { color: var(--crema-suave); max-width: 36rem; margin: 0 auto; }

.blog-grid {
  display: grid;
  gap: 1.4rem;
}
.post-card {
  background: var(--crema-claro);
  border: 1px solid rgba(28, 61, 46, 0.14);
  border-radius: var(--radio);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.post-card img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.post-card__cuerpo { padding: 1.3rem 1.3rem 1.5rem; display: flex; flex-direction: column; flex-grow: 1; }
.post-card__fecha { font-size: 0.8rem; color: var(--tinta-suave); text-transform: uppercase; letter-spacing: 0.1em; }
.post-card h3 { font-size: 1.3rem; margin: 0.4rem 0 0.5rem; }
.post-card h3 a { color: var(--verde); text-decoration: none; }
.post-card h3 a:hover { color: var(--terracota); }
.post-card p { font-size: 0.95rem; color: var(--tinta-suave); flex-grow: 1; }

/* Artículo individual del blog */
.articulo {
  max-width: 44rem;
  margin: 0 auto;
  padding: 3rem 1.2rem 4rem;
}
.articulo h1 { font-size: clamp(2.2rem, 6vw, 3.2rem); color: var(--verde); }
.articulo img { border-radius: var(--radio); margin: 1.5rem 0; }

/* ====== BLOG · plantilla de post unificada (Editorial, alineado a la izquierda) ======
   Imagen a color, sola, arriba sobre el verde; el texto del blog debajo. */
.post-top { background: var(--verde); padding: 2.6rem 1.3rem; }
.post-figura { max-width: 52rem; margin: 0 auto; border-radius: 14px; overflow: hidden;
               box-shadow: 0 20px 55px rgba(0, 0, 0, 0.38); }
.post-figura img { display: block; width: 100%; height: clamp(220px, 44vh, 460px); object-fit: cover; }
.post-wrap { max-width: 40rem; margin: 0 auto; padding: 2.6rem 1.3rem 4rem; text-align: left; }
.post-eyebrow { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 0.72rem;
                letter-spacing: 0.2em; text-transform: uppercase; color: var(--terracota); }
.post-titulo { font-family: 'Bebas Neue', sans-serif; color: var(--verde);
               font-size: clamp(2.4rem, 7vw, 4rem); line-height: 1; margin: 0.5rem 0 1.2rem; }
.post-byline { display: flex; align-items: center; gap: 0.7rem; font-size: 0.9rem; color: var(--tinta-suave); }
.post-byline img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; }
.post-byline b { color: var(--verde); font-weight: 700; }
.post-rule { width: 56px; height: 3px; background: var(--terracota); border: 0; margin: 1.6rem 0 2rem; border-radius: 3px; }
.post-p { font-size: 1.14rem; line-height: 1.8; color: #33413a; margin: 0 0 0.5rem; }
.post-p.pausa { margin-top: 1.6rem; }
.post-p strong { color: var(--verde); }
.post-firma { margin-top: 2.4rem; font-family: 'Montserrat', sans-serif; font-weight: 700; color: var(--terracota); }
.post-cierre { margin-top: 3rem; display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }

/* Prefooter · invitación al blog (home) */
.prefooter-blog__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem; flex-wrap: wrap; }

/* Embeds de Spotify: contenedor con proporción fija para evitar saltos de layout */
.podcast-embed {
  margin-bottom: 1.4rem;
  border-radius: var(--radio);
  overflow: hidden;
}
.podcast-embed iframe {
  display: block;
  width: 100%;
  border: 0;
}

/* ---------- 16b. El Campo (fondo animado, ver js/campo.js) ---------- */
/* Cada sección marcada con data-campo recibe un canvas de fondo.
   El contenido queda SIEMPRE por encima (z-index 1). */
[data-campo] {
  position: relative;
  overflow: hidden;
}
[data-campo] > *:not(.campo-canvas) {
  position: relative;
  z-index: 1;
}
.campo-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
/* Atmósfera extra en las secciones verdes: dos manchas de luz muy
   tenues (terracota + sombra) que derivan despacio, como respiración. */
[data-campo="oscuro"]::before {
  content: "";
  position: absolute;
  inset: -25%;
  pointer-events: none;
  background:
    radial-gradient(ellipse 40% 45% at 22% 28%, rgba(196, 98, 45, 0.10), transparent 70%),
    radial-gradient(ellipse 50% 55% at 80% 75%, rgba(0, 0, 0, 0.28), transparent 70%);
  animation: campo-deriva 26s ease-in-out infinite alternate;
}
@keyframes campo-deriva {
  from { transform: translate3d(-2.5%, -1.5%, 0) scale(1); }
  to   { transform: translate3d(2.5%, 2%, 0) scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  [data-campo="oscuro"]::before { animation: none; }
}

/* ---------- 17. Animaciones al scroll ---------- */
/* .reveal arranca invisible; js/main.js le agrega .visible al entrar en pantalla */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.visible {
  opacity: 1;
  transform: none;
}
/* Respeta la preferencia del sistema de reducir movimiento */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- 18. Responsive ---------- */
/* Tablet en adelante */
@media (min-width: 720px) {
  .hero__inner { grid-template-columns: 1.2fr 1fr; }
  .spam-grid { grid-template-columns: repeat(2, 1fr); }
  .ofertas-grid { grid-template-columns: repeat(2, 1fr); }
  .testimonios-grid { grid-template-columns: repeat(2, 1fr); }
  .comunidad-grid { grid-template-columns: repeat(2, 1fr); }
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
  .footer__inner { flex-direction: row; justify-content: space-between; align-items: center; }
}

/* Desktop: el menú deja de ser panel y pasa a barra horizontal */
@media (min-width: 1000px) {
  .nav-toggle { display: none; }
  .nav {
    display: block;
    position: static;
    background: none;
    border: 0;
    padding: 0;
  }
  .nav > ul {
    flex-direction: row;
    align-items: center;
    gap: 1.4rem;
  }
  .nav a:not(.btn), .nav .submenu-toggle { width: auto; padding: 0.4rem 0; font-size: 0.95rem; }
  .nav .nav-cta { margin: 0; }
  .nav .nav-cta .btn { width: auto; padding: 0.55rem 1.3rem; font-size: 0.9rem; }

  /* Submenú desplegable flotante en desktop.
     top:100% (sin separación) para que el mouse pueda bajar del botón
     al panel sin pasar por un "hueco" que cierre el hover. */
  .submenu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--verde);
    border: 1px solid rgba(244, 239, 228, 0.2);
    border-radius: 0 0 10px 10px;
    padding: 0.5rem 1rem;
    min-width: 260px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
  }
  .has-submenu:hover .submenu,
  .has-submenu.open .submenu { display: block; }

  .spam-grid { grid-template-columns: repeat(4, 1fr); }
  /* 2x2: son 4 testimonios — con 3 columnas quedaba uno huérfano */
  .testimonios-grid { grid-template-columns: repeat(2, 1fr); }
  .blog-grid { grid-template-columns: repeat(3, 1fr); }
}