/*
Theme Name: NUA
Theme URI: https://nuamedicina.com
Description: Theme custom de venta de NUA — escuela de Ayurveda online (rebrand de Ronda Lunar). Sin page builders, CSS propio con tokens.
Author: StudiaHub
Author URI: https://studiahub.com
Version: 0.2.0
Requires at least: 6.0
Requires PHP: 8.0
Text Domain: nua
*/

/* ==========================================================================
   Fuentes self-hosted (woff2 en assets/fonts/). Sin CDN externo ni build
   step: las rutas son relativas a este style.css (raíz del theme).
   - Gilda Display (serif) → títulos. Un solo peso (400).
   - Lora (serif)          → itálicas (font-style: italic).
   - General Sans (sans)   → cuerpo. Pesos 400/500/600/700.
   ========================================================================== */
@font-face {
  font-family: "Gilda Display";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/gilda-display-400.woff2") format("woff2");
}

@font-face {
  font-family: "Lora";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/lora-italic-400.woff2") format("woff2");
}

@font-face {
  font-family: "Lora";
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/lora-italic-600.woff2") format("woff2");
}

@font-face {
  font-family: "General Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/general-sans-400.woff2") format("woff2");
}

@font-face {
  font-family: "General Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/general-sans-500.woff2") format("woff2");
}

@font-face {
  font-family: "General Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/general-sans-600.woff2") format("woff2");
}

@font-face {
  font-family: "General Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/general-sans-700.woff2") format("woff2");
}

/* ==========================================================================
   Tokens — sistema de diseño NÜA. Portado de la marca (tokens.css +
   variante-01.css del proyecto de branding). Único cambio pedido: el color
   spot terracota se reemplaza por CURRY.
   ========================================================================== */
:root {
  /* ---- Paleta de marca ---- */
  --verde-profundo: #34413c; /* logo, títulos, fondos protagonistas */
  --crema: #f4eee4; /* fondo cálido de sección, el aire editorial */
  --beige-nude: #e7d9c9; /* fondos de sección, tarjetas, bloques cálidos */
  --arena: #d3c4b0; /* greige · divisores, bordes suaves, líneas finas */
  --verde-medio: #556b4e; /* verde medio · hover de links/botones */
  --verde-seco: #7c8770; /* acento · links, itálicas, tags, subrayados */
  --tinta: #2c2a26; /* texto de lectura sobre fondos claros */
  --ghost: #fbfaf7; /* sustrato: fondo de página (no es color de marca) */
  --curry: #c8962d; /* color spot (reemplaza terracota): isotipo + CTA */
  --curry-dark: #ae8227; /* curry más oscuro · hover del botón primario */
  --verde-salvia: #d7ded2; /* verde salvia claro · fondos de sección suaves (Nadia, jul-2026) */

  /* ---- Roles semánticos ---- */
  --color-bg: var(--ghost);
  --color-text: var(--tinta);
  --color-title: var(--verde-profundo);
  --color-accent: var(--verde-seco); /* acento general: links, itálicas, tags */
  --color-surface: var(--crema); /* superficie de tarjetas cálidas */
  --color-border: var(--arena); /* líneas finas (arena, siempre) */
  --color-muted: rgba(44, 42, 38, 0.62); /* texto secundario / labels */

  /* ---- Tipografía ---- */
  --font-heading: "Gilda Display", "Times New Roman", Georgia, serif; /* títulos H1–H3 */
  --font-body: "General Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* cuerpo */
  --font-italic: "Lora", Georgia, serif; /* itálicas (usar con font-style: italic) */

  /* Escala fluida (modular ~1.25) */
  --fs-kicker: 0.78rem;
  --fs-small: 0.92rem;
  --fs-body: 1.125rem; /* 18px · lectura generosa */
  --fs-lead: clamp(1.2rem, 0.9rem + 1.1vw, 1.6rem);
  --fs-h3: clamp(1.5rem, 1.15rem + 1.3vw, 2.1rem);
  --fs-h2: clamp(2.3rem, 1.4rem + 3.2vw, 3.8rem); /* hasta ~61px (Nadia, jul-2026) */
  --fs-h1: clamp(2.6rem, 1.6rem + 4.6vw, 5rem);
  --fs-display: clamp(4rem, 2rem + 11vw, 10rem);

  --lh-body: 1.65;
  --lh-tight: 1.06;
  --measure: 68ch; /* medida de línea ~65-75 caracteres */
  --tracking-kicker: 0.2em;

  /* ---- Radios — TOPE 8px (nada más redondeado que esto) ---- */
  --radius-sm: 4px;
  --radius: 6px;
  --radius-lg: 8px;
  --radius-md: var(--radius); /* alias que consume checkout.css */
  /* Redondeo generoso para cards/paneles del home (estética de referencia,
     supera el tope de 8px del sistema — decisión de Nadia jul-2026). */
  --radius-card: 28px;
  --radius-panel: 42px;

  /* ---- Bordes / sombras ---- */
  --border-width: 1px;
  --shadow-card: 0 10px 30px rgba(52, 65, 60, 0.07);
  --shadow-lg: 0 34px 80px rgba(52, 65, 60, 0.1);

  /* ---- Espaciado y layout ---- */
  --gutter: clamp(1.25rem, 0.5rem + 3vw, 3rem);
  --section-pad: clamp(4.5rem, 2rem + 8vw, 9rem);
  --container: 1200px;
  --container-max: var(--container); /* alias que consume checkout.css */

  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;

  /* ---- Campos / formularios ---- */
  --color-focus-ring: rgba(124, 135, 112, 0.28); /* alpha del acento (verde-seco) */
  --color-error: #b3261e;
  --field-pad-y: 0.7rem;
  --field-pad-x: 0.9rem;
  --transition: 150ms ease;

  /* ---- Columna de resumen oscura (checkout) ---- */
  --color-summary-bg: var(--verde-profundo);
  --color-summary-text: var(--crema);
  --color-summary-muted: rgba(244, 238, 228, 0.62);
  --color-summary-border: rgba(244, 238, 228, 0.16); /* divisores de tabla: deliberadamente tenue */

  /* Superficies DENTRO del resumen oscuro. Sobre el verde profundo, un borde
     tenue no alcanza para que un campo o una tarjeta se lean como tales: hay
     que darles superficie. Los campos se hunden (más oscuros), las tarjetas
     seleccionables se elevan (más claras). El borde fuerte es para lo que el
     visitante tiene que poder tocar. */
  --color-summary-field: rgba(0, 0, 0, 0.22);
  --color-summary-raised: rgba(244, 238, 228, 0.06);
  --color-summary-border-strong: rgba(244, 238, 228, 0.3);

  /* ---- Barra selector de moneda (checkout) ---- */
  --color-currency-bg: var(--curry);
  --color-currency-text: var(--verde-profundo);
}

/* ==========================================================================
   Reset mínimo + base
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 10rem; /* el header sticky (~154px) no tapa las secciones ancladas */
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-synthesis: none; /* nunca bold/itálica falsos */
}

/* ---- Tipografía ---- */
h1,
h2,
h3,
h4 {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 400; /* las serif de un solo peso: nunca el bold 700 del browser */
  line-height: var(--lh-tight);
  color: var(--color-title);
  letter-spacing: -0.015em;
}

h1 {
  font-size: var(--fs-h1);
}
h2 {
  font-size: var(--fs-h2);
}
h3 {
  font-size: var(--fs-h3);
}
h4 {
  font-size: var(--fs-lead);
}

/* Itálicas de énfasis: Lora, siempre en curry (decisión de Nadia).
   Si algún lugar necesita otro color, se override puntualmente.
   font-size-adjust iguala la altura-x de Lora a la de General Sans (0.53):
   sin esto, la itálica se ve más chica cuando cae inline con el cuerpo. */
em {
  font-family: var(--font-italic);
  font-style: italic;
  color: var(--curry);
  font-size-adjust: 0.53;
}

/* Títulos de obra (ej. el libro): itálica Lora pero en el color de lectura,
   no en curry. El "se percibe más chico" era el curry apagado (bajo contraste
   sobre crema): al pasar a tinta gana presencia. Medido: la altura-x de Lora
   ya iguala a General Sans, así que NO hace falta agrandar. */
.work-title {
  color: var(--color-text);
}

p {
  margin: 0;
}

a {
  color: var(--color-accent);
  text-decoration: none;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  transition: color var(--transition);
}

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

/* ==========================================================================
   Layout — contenedor central
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ==========================================================================
   Botones — radios del sistema (6–8px, sin pills)
   ========================================================================== */
/* Base común a TODAS las variantes: geometría Y tipografía idénticas.
   Las variantes solo cambian color y relleno; nada más.
   Tipografía tomada de la marca (`.btn-pill` de base.css): 12px, mayúsculas,
   0.16em. El peso 600 lo pidió Nadia: a 12px la caja necesita más peso. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  min-height: 3rem; /* alto idéntico en las 3 variantes */
  padding: 0 1.6rem; /* padding horizontal fijo (rem, no em) */
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  line-height: 1;
  border: var(--border-width) solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color var(--transition),
    color var(--transition);
}

/* En pantallas chicas el texto puede partirse: con nowrap, un botón de texto
   largo ("Ver el programa basado en el libro") fija un ancho mínimo mayor que
   la pantalla y desborda todo el layout. */
@media (max-width: 600px) {
  .btn {
    white-space: normal;
    padding-block: 0.7rem;
    line-height: 1.25;
    text-align: center;
  }
}

/* Primario: curry — la acción principal */
.btn-primary {
  background: var(--curry);
  color: #fff;
}
.btn-primary:hover {
  background: var(--curry-dark);
}

/* Secundario sólido: verde profundo */
.btn-secondary {
  background: var(--verde-profundo);
  color: var(--crema);
}
.btn-secondary:hover {
  background: var(--verde-medio);
}

/* Secundario outline: verde profundo */
.btn-ghost {
  border-color: var(--verde-profundo);
  color: var(--verde-profundo);
  background: transparent;
}
.btn-ghost:hover {
  background: var(--verde-profundo);
  color: var(--crema);
}

/* ==========================================================================
   Main — aire debajo del header
   --------------------------------------------------------------------------
   Como no mostramos el título de página en ningún lado, el contenido quedaba
   pegado al header. Le damos aire arriba en todas las páginas menos el home
   (que puede tener un hero full-bleed y no quiere ese gap).
   ========================================================================== */
body:not(.home) .site-main {
  margin-top: var(--space-lg);
}

/* El contenido de página (loop estándar, carrito de Woo, etc.) va al ancho del
   contenedor y centrado; sin esto el carrito por bloques de Woo se iba full
   width. El checkout/gracias tienen su propio layout y no usan .entry-content. */
.entry-content {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-md);
}

/* ==========================================================================
   Header — barra sticky con blur, logo, nav y CTA
   ========================================================================== */
/* Tirita + header quedan fijos juntos. */
.site-top {
  position: sticky;
  top: 0;
  z-index: 20;
}
/* Tira fina superior: dos accesos con ícono, separados por un divisor. */
.top-bar {
  background: var(--verde-profundo);
}
.top-bar__inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.9rem;
  padding-block: 0.3rem;
}
.top-bar__link {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-size: 0.72rem; /* más chico que un kicker */
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--crema);
  text-decoration: none;
  transition: color var(--transition);
}
.top-bar__link:hover {
  color: #fff;
}
.top-bar__icon {
  flex: none;
  width: auto;
  height: 1.15em;
}
.top-bar__divider {
  width: 1px;
  height: 0.9rem;
  background: rgba(244, 238, 228, 0.3); /* crema translúcido */
}

.site-header {
  background: rgba(251, 250, 247, 0.88); /* ghost con alpha para el blur */
  backdrop-filter: blur(16px);
  border-bottom: var(--border-width) solid var(--color-border);
}
/* El header se achica levemente al scrollear (site.js pone .is-scrolled). */
.site-header__inner,
.site-logo__img {
  transition:
    padding var(--transition),
    height var(--transition);
}
.is-scrolled .site-header__inner {
  padding-block: var(--space-sm);
}
.is-scrolled .site-logo__img {
  height: 3.8rem;
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  padding-block: var(--space-md);
}

.site-logo {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto; /* nunca encoger: el reset (img{max-width:100%}) deja que
                     flex le coma el ancho y deforma el logo. */
}

.site-logo__img {
  height: 4.8rem;
  width: auto;
  max-width: none; /* guard contra el max-width:100% del reset */
}

/* Tipografía del menú — UNA sola declaración para desktop y mobile.
   Es el mismo componente: no puede tener dos tratamientos. */
.site-nav__list,
.mobile-nav__list {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-small);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.site-nav a,
.mobile-nav__list a {
  color: var(--color-title);
  font-weight: 500;
}
.site-nav__list a {
  font-weight: 500; /* un peso más que el 400 heredado */
}
.site-nav a:hover,
.mobile-nav__list a:hover {
  color: var(--color-accent);
}

/* ---- Menú hamburguesa (solo mobile) ----------------------------------
   Usa la API popover nativa: sin JS, y trae gratis Esc, cerrar al tocar
   afuera y el manejo de foco. El botón y el panel viven en header.php y
   están ocultos arriba de 900px. */
.nav-toggle {
  display: none; /* solo mobile */
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  margin-right: calc(var(--space-xs) * -1); /* alinea el ícono al borde óptico */
  padding: 0;
  background: none;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--color-title);
  cursor: pointer;
}

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block;
  width: 22px;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--transition), opacity var(--transition);
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
}
.nav-toggle__bars {
  position: relative;
}
.nav-toggle__bars::before {
  transform: translateY(-7px);
}
.nav-toggle__bars::after {
  transform: translateY(7px);
}

/* Variante cerrar: la barra del medio se va y las otras dos se cruzan */
.nav-toggle--close .nav-toggle__bars {
  background: transparent;
}
.nav-toggle--close .nav-toggle__bars::before {
  transform: rotate(45deg);
}
.nav-toggle--close .nav-toggle__bars::after {
  transform: rotate(-45deg);
}

/* Panel */
.mobile-nav {
  /* :popover-open lo muestra; cerrado, el UA lo oculta */
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--crema);
  color: var(--color-title);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.mobile-nav::backdrop {
  background: rgba(52, 65, 60, 0.4);
}

.mobile-nav__inner {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  padding: var(--space-md) var(--gutter) var(--space-xl);
}

.mobile-nav__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  min-height: 4.8rem; /* espeja el alto del logo del header */
}

/* La tipografía la hereda de la declaración compartida con .site-nav__list
   (arriba, en el header). Acá solo el layout en columna. */
.mobile-nav__list {
  display: flex;
  flex-direction: column;
  margin-top: var(--space-lg);
}

.mobile-nav__list li + li {
  border-top: var(--border-width) solid var(--color-border);
}

/* El padding generoso mantiene el área táctil grande aunque el texto
   sea chico, igual que en desktop. */
.mobile-nav__list a {
  display: block;
  padding: var(--space-md) 0;
}

/* El CTA va al fondo del panel, debajo de todos los ítems */
.mobile-nav__cta {
  margin-top: auto;
  padding-top: var(--space-lg);
  display: flex;
}

.mobile-nav__cta .btn {
  width: 100%;
}

@media (max-width: 900px) {
  /* Abajo de 900px: solo logo + hamburguesa. El menú de texto y el CTA
     se mudan adentro del panel. */
  .site-nav,
  .site-header__cta {
    display: none;
  }

  .nav-toggle {
    display: inline-flex;
  }

  /* Header más fino en mobile: menos aire y logo más chico. */
  .site-header__inner {
    padding-block: var(--space-sm);
  }
  .site-logo__img {
    height: 3.4rem;
  }
  /* Al scrollear se achica un poco más. */
  .is-scrolled .site-header__inner {
    padding-block: 0.7rem;
  }
  .is-scrolled .site-logo__img {
    height: 2.9rem;
  }
}

@media (min-width: 901px) {
  /* Arriba de 900px el panel no existe, ni siquiera como popover */
  .mobile-nav {
    display: none;
  }
}

/* ==========================================================================
   Home · Hero — asimétrico: copy a la izquierda, retrato a la derecha.
   Bloque crema sobre el ghost de la página (el cambio de fondo hace de
   divisor, sin línea). El isotipo curry desborda la esquina de la foto.
   ========================================================================== */
.home-hero {
  background: var(--crema);
  padding-block: clamp(3rem, 1.5rem + 5vw, 6rem);
}

/* El hero es full-bleed y va pegado al header. Gon le da un margin-top a
   .site-main en las páginas (body:not(.home)) para que el contenido no quede
   pegado al header — pero cuando el home se sirve como página (/inicio/) ese
   margen abre un hueco entre el header y el hero. Si el main ARRANCA con el
   hero, no quiere ese aire: lo anulamos en la fuente, sin margen negativo. */
.site-main:has(> .home-hero:first-child) {
  margin-top: 0;
}

.hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: center;
}

.hero__eyebrow {
  display: block;
  font-size: var(--fs-kicker);
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--verde-seco);
  margin-bottom: var(--space-md);
}

/* Título en dos alturas: el gancho grande y la promesa en cuerpo menor.
   Los dos dentro del h1 — es un solo título, no un título + bajada. */
.hero__title {
  font-size: inherit; /* el tamaño lo fijan los dos spans de adentro */
}

.hero__title-hook {
  display: block;
  font-size: clamp(2.3rem, 1.5rem + 2.6vw, 3.6rem); /* frase larga: más chico que el gancho corto anterior */
  line-height: 1.1; /* legible en varias líneas */
  letter-spacing: -0.01em;
}

.hero__title-promise {
  display: block;
  margin-top: 0.5em;
  font-size: clamp(1.6rem, 1.15rem + 1.4vw, 2.3rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.hero__lead {
  max-width: 46ch;
  margin-top: var(--space-md);
  color: var(--color-text);
}
/* Tres beneficios, cada uno con un check-circle curry. */
.hero__points {
  display: grid;
  gap: 0.7rem;
  max-width: 46ch;
  margin-top: var(--space-md);
  list-style: none; /* sin la viñeta nativa del <ul> */
  padding-left: 0;
}

.hero__points strong {
  font-weight: 500; /* destacado Medium, como el resto de la marca */
}
.hero__points li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  color: var(--color-text);
}
.hero__check {
  flex: none;
  width: 1.3em;
  height: 1.3em;
  margin-top: 0.12em; /* alinea el ícono con la primera línea del texto */
  color: var(--curry); /* el círculo usa currentColor; el tilde va blanco */
}

/* Destacado suave: Medium (500) de General Sans, para separar la idea sin
   el golpe del bold pleno. Peso real, nunca sintético. */
.hero__lead strong {
  font-weight: 500;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

.hero__microcopy {
  margin-top: var(--space-md);
  max-width: 44ch;
  font-size: var(--fs-small);
  color: var(--color-muted);
}

/* ---- Retrato ---- */
.hero__media {
  position: relative;
}

.hero__photo {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-panel); /* mismo radio redondeado que la foto del libro */
  overflow: hidden;
  background: var(--beige-nude);
  box-shadow: var(--shadow-card);
}

.hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Ruedita: sello circular de la marca — "CIENCIA & NATURALEZA · NÜA ·"
   girando alrededor, en verde profundo y sin disco (como en el manual).
   Cuelga de la esquina sup-izq de la foto, corrida hacia la crema para que
   el texto quede legible sobre fondo claro y no sobre el follaje. */
.hero__stamp {
  position: absolute;
  top: -42px;
  right: -54px;
  z-index: 2;
  width: clamp(104px, 11vw, 132px);
  aspect-ratio: 1;
}

.hero__stamp text {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12.8px; /* en unidades del viewBox (120): escala con el SVG */
  letter-spacing: 1.87px; /* calibrado para que el texto cierre el círculo sin hueco */
  text-transform: uppercase;
  fill: var(--verde-profundo);
  /* gira lento y parejo alrededor del centro del viewBox (60,60) */
  transform-box: view-box;
  transform-origin: 60px 60px;
  animation: hero-stamp-spin 26s linear infinite;
}

@keyframes hero-stamp-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Respeta a quien pidió menos movimiento: sin giro. */
@media (prefers-reduced-motion: reduce) {
  .hero__stamp text {
    animation: none;
  }
}

@media (max-width: 900px) {
  .hero__grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  /* En una columna el retrato va primero: la cara antes que el texto. */
  .hero__media {
    order: -1;
  }

  .hero__photo {
    aspect-ratio: 5 / 4;
  }

  /* En mobile no hay margen lateral para que cuelgue: la corro adentro,
     arriba a la derecha (zona más clara de la foto), y un poco más chica. */
  .hero__stamp {
    top: -30px;
    left: auto;
    right: 8px;
    width: 92px;
  }
}

/* ==========================================================================
   Home · Tira de autoridad — Flor y Sandra. Fondo ghost (casi blanco); el
   separador con el hero (crema) es una duna suave (SVG .authority__dune). Foto
   izquierda / texto derecha, invertido respecto al hero para variar el ritmo.
   ========================================================================== */
.home-authority {
  position: relative; /* ancla la duna al borde superior */
  background: var(--ghost);
  padding-block: var(--section-pad);
}

/* Duna divisoria hero → autoridad: SVG a ancho completo pegado al borde
   superior, relleno crema para continuar el hero y bajar en curva sobre el
   blanco. preserveAspectRatio=none la estira al ancho. Decorativa: no roba
   clics ni desplaza el contenido (el padding-top de la sección siempre supera
   su alto, así que nunca lo tapa). */
.authority__dune {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: clamp(3.5rem, 7vw, 7rem);
  pointer-events: none;
}

.authority__dune path {
  fill: var(--crema);
}

.authority__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: stretch; /* la foto se estira al alto del texto, sin aire flotante */
}

.authority__media {
  display: flex;
}

.authority__photo {
  width: 100%;
  min-height: 100%;
  border-radius: var(--radius-panel); /* mismo radio redondeado que la foto del libro */
  overflow: hidden;
  background: var(--arena);
  box-shadow: var(--shadow-card);
}

.authority__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Foto apaisada en contenedor vertical: el recorte es horizontal.
     Centrado muestra del 20% al 80% → las dos caras entran (Flor ~31%,
     Sandra ~71%) y se van los bordes cargados. Ajustar el 1er valor
     para correr el encuadre a izquierda (<50%) o derecha (>50%). */
  object-position: 50% 50%;
}

.authority__eyebrow {
  display: block;
  font-size: var(--fs-kicker);
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--verde-medio);
  margin-bottom: var(--space-md);
}

.authority__title {
  max-width: 20ch;
  line-height: 1.16; /* más aire que el 1.06 base: es un título corrido de 3 renglones */
}

.authority__lead {
  margin-top: var(--space-md);
  color: var(--color-text);
  font-weight: 500; /* destacado Medium, el mismo peso que el hero */
}

/* En el párrafo destacado, el título del libro acompaña el peso: Lora itálica
   600 (Lora solo tiene 400 y 600, así que 500 mapearía a 400 — se fuerza 600). */
.authority__lead .work-title {
  font-weight: 600;
}

.authority__text {
  margin-top: var(--space-sm);
  color: var(--color-text);
}

/* Chips de credibilidad. Pastilla crema (elección de Nadia), letra chica,
   sin borde fuerte: así NO se leen como botones. */
.authority__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin: var(--space-lg) 0 0;
  padding: 0;
  list-style: none;
}

.authority__badges li {
  padding: 0.35rem 0.85rem;
  background: var(--crema); /* crema (elección de Nadia) */
  border-radius: 999px; /* píldora (decisión de Nadia; excede el tope de 8px del sistema) */
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--color-text);
}

@media (max-width: 900px) {
  .authority__grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
}

/* ==========================================================================
   Home · BOCETO de secciones. Layout base y consistente sobre los tokens;
   se pule bloque por bloque. Helpers compartidos primero, luego lo propio
   de cada sección.
   ========================================================================== */

/* ---- Bloque de sección + ritmo de fondos ---- */
.home-block {
  padding-block: var(--section-pad);
}
.home-block--ghost {
  background: var(--ghost);
}
.home-block--crema {
  background: var(--crema);
}
.home-block--nude {
  background: var(--beige-nude);
}
.home-block--salvia {
  background: var(--verde-salvia);
}
.home-block--verde {
  background: linear-gradient(140deg, var(--crema), var(--verde-salvia));
  color: var(--color-text);
}

/* ---- Encabezado de sección ---- */
.section-head {
  margin-bottom: var(--space-xl);
}
/* Encabezado centrado: el título ocupa el ancho (grande, ~68px) y la bajada
   va centrada y más angosta debajo. */
.section-head--center {
  text-align: center;
}
.section-head--center .section-lead {
  max-width: 52ch;
  margin-inline: auto;
}
.section-head--split {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(2rem, 1rem + 3vw, 4rem);
  align-items: end;
  margin-bottom: var(--space-xl);
}
@media (max-width: 820px) {
  .section-head--split {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }
}

.section-eyebrow {
  display: block;
  font-size: var(--fs-kicker);
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--verde-medio);
  margin-bottom: var(--space-sm);
}
/* Eyebrow con ícono adelante (ej. el libro): alinea el glifo con el texto.
   El gap iguala el blanco VISUAL entre palabras (advance del espacio ~0.41em +
   el letter-spacing ~0.2em que va tras la última letra), no solo el advance:
   si no, el aire ícono–texto se ve menor que el de entre palabras. */
.section-eyebrow--with-icon {
  display: flex;
  align-items: center;
  gap: 0.6em;
}
/* Los SVG conservan el lienzo original de Phosphor (1024×1024): así todos se
   escalan igual y el grosor del trazo es idéntico entre íconos. La altura sube
   para compensar el aire del lienzo (el dibujo ocupa ~3/4). */
.eyebrow-icon {
  flex: none;
  width: auto;
  height: 1.6em;
}
/* Título de sección "chico": el tamaño que tenían los títulos ANTES de
   agrandarlos (≈48px máx). No confundir con --fs-h3 (34px), que es para
   subtítulos de card (pilares, paneles). */
.section-title--h3,
.authority__title {
  font-size: clamp(1.9rem, 1.4rem + 2.2vw, 3rem);
}
/* El título del método corta en 2 renglones. */
.home-metodo {
  padding-top: clamp(4.5rem, 2rem + 5vw, 6.5rem); /* la mitad del espacio que había quitado */
}
.home-metodo .section-title {
  max-width: 34ch; /* el título nuevo es una frase larga: más ancho para 3 renglones */
  margin-inline: auto;
}

.metodo__promise {
  max-width: 46ch;
  margin: var(--space-sm) auto 0;
  font-family: var(--font-italic);
  font-style: italic;
  font-size: var(--fs-lead);
  line-height: 1.4;
  color: var(--color-text); /* misma bajada itálica que .libro__quote: tamaño real y color de texto, no curry */
}

.home-metodo .section-lead strong {
  font-weight: 500; /* "bold" de marca = Medium */
}
.section-lead {
  max-width: 52ch;
  color: var(--color-text);
  text-wrap: balance; /* evita el renglón final de una o dos palabras sueltas */
}
/* En los headings centrados: más aire entre título y bajada, y la bajada
   tan ancha como el título (no angosta). */
.section-head--center .section-lead {
  max-width: 62ch;
  margin-top: var(--space-md);
  margin-inline: auto;
}

/* ---- Fila de botones ---- */
.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}
.btn-row--center {
  justify-content: center;
}

/* ---- Método · 4 pilares (estética ref. V14: cards redondeadas translúcidas
   con círculo decorativo en la esquina y elevación en hover) ---- */
.pillar-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (max-width: 900px) {
  .pillar-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 520px) {
  .pillar-grid {
    grid-template-columns: 1fr;
  }
}

.pillar {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: rgba(251, 250, 247, 0.65); /* ghost translúcido */
  border: var(--border-width) solid rgba(52, 65, 60, 0.16);
  border-radius: var(--radius-card);
  transition:
    transform var(--transition),
    background-color var(--transition);
}
.pillar:hover {
  transform: translateY(-6px);
  background: var(--ghost);
}
/* Foto de la card: banda apaisada arriba, recorte centrado. 15/8 deja la foto
   a 2/3 del alto que tenía en 5/4 (era muy alta, sobre todo en mobile). */
.pillar__media {
  aspect-ratio: 15 / 8;
  overflow: hidden;
  background: var(--beige-nude); /* color mientras carga la foto */
}
.pillar__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pillar__body {
  flex: 1;
  padding: 1.5rem;
}
.pillar__num {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: var(--curry);
}
.pillar__title {
  margin-top: var(--space-xs);
  margin-bottom: var(--space-xs);
}
.pillar p {
  font-size: var(--fs-small);
}

@media (prefers-reduced-motion: reduce) {
  .pillar {
    transition: background-color var(--transition);
  }
  .pillar:hover {
    transform: none;
  }
}

/* ---- Libro ---- */
/* Eyebrow "Nuestro libro": chip blanco con texto e ícono en curry (spot de
   marca; el ícono hereda el color por currentColor). width fit-content para que
   la pastilla se ajuste al contenido y no ocupe todo el ancho. */
.home-libro {
  position: relative; /* ancla la duna divisoria del borde inferior */
}
/* Duna divisoria libro → programa: SVG a ancho completo en el borde inferior,
   relleno ghost (= el fondo del programa) que sube en curva sobre el degradé
   del libro. Misma curva que la del hero, apoyada abajo (el ghost sube). */
.libro__dune {
  position: absolute;
  bottom: 0;
  left: 0;
  display: block;
  width: 100%;
  height: clamp(3.5rem, 7vw, 7rem);
  pointer-events: none;
}
.libro__dune path {
  fill: var(--ghost);
}
/* Eyebrow "Nuestro libro": sin pastilla, en el color del texto (el ícono lo
   hereda por currentColor). */
.home-libro .section-eyebrow {
  margin-bottom: var(--space-md); /* un poco más de aire hasta el título */
  color: var(--color-text);
}
.libro__grid {
  position: relative; /* por encima de la duna divisoria del borde inferior */
  z-index: 1;
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: stretch; /* la columna de la tapa se estira al alto del texto */
}
/* Aire entre el título y la bajada, y entre párrafos */
.libro__copy p {
  margin-top: var(--space-md);
}
@media (max-width: 820px) {
  .libro__grid {
    grid-template-columns: 1fr;
  }
}
/* La foto es un render ambientado del libro (4:5, con su propio fondo): va como
   una tarjeta enmarcada (esquinas redondeadas + sombra) sobre el verde, arriba,
   al ras del texto. */
.libro__cover {
  display: flex;
  align-items: flex-start; /* la foto arranca arriba, al ras del texto (no centrada) */
  justify-content: center;
}
.libro__cover-frame > img {
  width: 100%;
  aspect-ratio: 1122 / 1402;
}

.libro__cover-frame {
  position: relative; /* ancla el sello a la tapa, no al contenedor */
  width: 100%;
}

/* Sello editorial "Penguin Random House 2025": disco crema sobre la esquina
   sup-derecha de la tapa; el anillo de texto gira y el logo queda fijo. */
.libro__seal {
  position: absolute;
  /* anclado a la esquina sup-derecha del LIBRO (no del lienzo): los márgenes
     transparentes del recorte son ~5% arriba y ~11% a la derecha. */
  top: 5%;
  right: 11.4%;
  transform: translate(42%, -42%);
  z-index: 3;
  width: clamp(94px, 9vw, 118px);
  aspect-ratio: 1; /* cuadrado garantizado: los hijos van absolutos, no lo estiran */
  border-radius: 50%;
  background: var(--crema);
  box-shadow: var(--shadow-card);
}

.libro__seal-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.libro__seal-ring text {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12.8px; /* unidades del viewBox (120) */
  letter-spacing: 1.85px; /* calibrado para cerrar el círculo sin hueco */
  text-transform: uppercase;
  fill: var(--verde-profundo);
  transform-box: view-box;
  transform-origin: 60px 60px;
  animation: hero-stamp-spin 24s linear infinite;
}

.libro__seal-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 36%; /* el logo es vertical: 36% del ancho lo deja dentro del anillo */
  height: auto;
}

@media (prefers-reduced-motion: reduce) {
  .libro__seal-ring text {
    animation: none;
  }
}
/* El chip "Nuestro libro" va dentro del texto en desktop; en mobile se muestra
   el que está antes de la tapa. */
.libro__chip--movil {
  display: none;
}
@media (max-width: 820px) {
  .libro__chip--movil {
    display: block;
  }
  .libro__chip--desktop {
    display: none;
  }
  /* En una columna la foto no necesita ocupar todo el ancho: la limito y,
     como el contenedor centra, queda centrada. */
  .libro__cover-frame {
    max-width: 420px;
  }
}
.libro__quote {
  margin: var(--space-md) 0 var(--space-lg); /* arriba, igual que el gap entre párrafos */
  padding: 0;
  border: 0;
  font-family: var(--font-italic);
  font-style: italic;
  font-size: var(--fs-lead);
  line-height: 1.4;
  color: var(--color-text); /* itálica en el color de texto general, no curry */
}

/* ---- Programa destacado · card blanca redondeada sobre crema (ref. V14) ---- */
.home-programa {
  padding-top: var(--space-xl); /* menos aire arriba: sobre el fondo claro (ghost) el padding grande se leía como demasiado espacio blanco */
}
.programa__card {
  background: var(--crema);
  border: var(--border-width) solid rgba(52, 65, 60, 0.14);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-lg);
  padding: clamp(2rem, 1rem + 4vw, 3.6rem);
}
.programa__grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr; /* izquierda más ancha: el título entra en un renglón */
  gap: clamp(2rem, 1rem + 3.5vw, 3.4rem);
  align-items: center; /* la columna izquierda queda centrada respecto al marquee */
}
@media (max-width: 820px) {
  .programa__grid {
    grid-template-columns: 1fr;
  }
}
/* Fila superior de la card: etiqueta a la izquierda, estado a la derecha. */
.programa__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}
/* "Programa online" y la fecha, juntos a la izquierda y separados por una barra. */
.programa__header-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.7rem;
}
.programa__header-sep {
  color: rgba(52, 65, 60, 0.3);
  font-weight: 400;
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  /* misma tipografía que los eyebrow: kicker, tracking amplio y peso 600 */
  font-size: var(--fs-kicker);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-kicker);
}
.pill__icon {
  flex: none;
  width: auto;
  height: 1.6em; /* lienzo 1024 completo: ver nota en .eyebrow-icon */
}
.pill--solid {
  background: var(--verde-profundo);
  color: var(--crema);
}
/* Etiqueta sin pastilla: solo ícono + texto, al ras del borde del contenido. */
.pill--ghost {
  padding-inline: 0;
  background: none;
  color: var(--verde-profundo);
}
.pill--soft {
  background: var(--beige-nude);
  color: var(--verde-profundo);
}
/* Pill "en vivo" (Inscripción abierta): verde claro, mayúsculas y un punto que
   late a la izquierda como indicador de estado. */
.pill--live {
  background: rgba(85, 107, 78, 0.15); /* verde claro translúcido (verde-medio al 15%) */
  color: var(--verde-medio);
}
.pill__dot {
  position: relative;
  flex: none;
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: var(--verde-medio); /* verde sobre el pill claro */
}
.pill__dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: inherit;
  animation: pill-pulse 1.8s ease-out infinite;
}
@keyframes pill-pulse {
  from {
    transform: scale(1);
    opacity: 0.65;
  }
  to {
    transform: scale(2.6);
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pill__dot::after {
    animation: none;
  }
}
/* El puntito que late, reusado en el CTA del header: toma el color del texto del botón */
.site-header__cta .pill__dot,
.mobile-nav__cta .pill__dot {
  background: currentColor;
}
/* Selector con la especificidad de `.programa__copy p` para ganarle su margen. */
.programa__copy .programa__subtitle {
  margin-top: 0.2rem;
  font-family: var(--font-italic);
  font-style: italic;
  font-size-adjust: 0.53; /* iguala la altura-x de Lora con General Sans */
  font-size: var(--fs-lead); /* mismo tamaño que la itálica del libro */
  color: var(--curry);
}
.programa__copy p {
  margin-top: var(--space-sm);
}
/* Destacados del cuerpo: Medium (500), nunca 700 (regla de marca). */
.programa__copy strong {
  font-weight: 500;
}
/* Specs con ícono (fecha, cupos, formato): grilla 2×2, ícono curry + texto. */
.programa__specs {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: start;
  gap: 0.7rem 1.6rem;
  margin: var(--space-md) 0 0;
  padding: 0;
  list-style: none;
}
.spec {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-size: var(--fs-small);
}
.spec__icon {
  flex: none;
  width: auto;
  height: 1.6em; /* lienzo 1024 completo: ver nota en .eyebrow-icon */
  color: var(--curry);
}
/* En mobile: cada spec en su fila, a todo el ancho (en 2×2 se apretaban). */
@media (max-width: 600px) {
  .programa__specs {
    grid-template-columns: 1fr;
  }
}
.programa__reconoces {
  background: var(--ghost); /* ghost sobre la card crema para que la sub-caja se despegue */
  border-radius: var(--radius-card);
  padding: clamp(1.5rem, 1rem + 2vw, 2.2rem);
}
.programa__reconoces-title {
  margin-bottom: var(--space-md);
  font-family: var(--font-body); /* General Sans: no compite con la serif del título del curso */
  font-size: clamp(1.45rem, 1.15rem + 1vw, 1.8rem); /* un poco menor que el título */
  color: var(--verde-profundo);
}
.check-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Ítems separados por línea fina, con viñeta ✕ curry */
.check-list li {
  position: relative;
  padding: 0.85rem 0 0.85rem 1.7rem;
  font-size: var(--fs-small);
  border-bottom: var(--border-width) solid rgba(52, 65, 60, 0.12);
}
.check-list li:last-child {
  border-bottom: 0;
}
.check-list li::before {
  content: "\2715"; /* ✕ */
  position: absolute;
  left: 0;
  top: 0.85rem;
  color: var(--curry);
}

/* Marquee vertical de situaciones: el título queda fijo y la lista rota en
   loop. El viewport recorta a ~5 ítems con un fundido arriba/abajo; el track
   (2 sets idénticos) corre -50% = un set, para un loop sin costura. */
.reconoces-viewport {
  overflow: hidden;
  height: 23.5rem; /* ~5 ítems visibles */
  -webkit-mask: linear-gradient(180deg, transparent 0, #000 4%, #000 96%, transparent 100%);
  mask: linear-gradient(180deg, transparent 0, #000 4%, #000 96%, transparent 100%);
}
.reconoces-track {
  animation: reconoces-scroll 50s linear infinite; /* lento, para poder leer */
}
/* Al pasar el mouse, la lista frena para leer con calma. */
.reconoces-viewport:hover .reconoces-track {
  animation-play-state: paused;
}
.reconoces-track li:last-child {
  border-bottom: var(--border-width) solid rgba(52, 65, 60, 0.12); /* uniforme para el loop */
}
@keyframes reconoces-scroll {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-50%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .reconoces-track {
    animation: none;
  }
}
/* Tira editorial de 3 fotos cuadradas en la columna izquierda, bajo el subtítulo. */
.programa__gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-sm);
  margin: var(--space-md) 0;
}
.programa__gallery-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-card);
}

/* ---- Testimonios · carrusel de globos de diálogo ----
   Swipe con el dedo en mobile (scroll nativo: anda en iOS sin trucos) y flechas
   en desktop (assets/js/site.js). Sin auto-scroll: lo controla el usuario. */
/* El encabezado va seguido de la fila de flechas del carrusel: con el margen xl
   por defecto quedaba demasiado aire hasta los testimonios. */
.home-testimonios .section-head {
  margin-bottom: var(--space-md);
}
.testimonial-carousel__head {
  display: flex;
  justify-content: flex-end;
  margin-bottom: var(--space-md);
}
.testimonial-carousel__nav {
  display: flex;
  gap: var(--space-xs);
}
.carousel-btn {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: var(--border-width) solid rgba(52, 65, 60, 0.16);
  border-radius: 50%;
  background: #fff;
  color: var(--verde-profundo);
  cursor: pointer;
  transition:
    background-color var(--transition),
    opacity var(--transition);
}
.carousel-btn:hover:not(:disabled) {
  background: var(--verde-salvia);
}
.carousel-btn:disabled {
  opacity: 0.35;
  cursor: default;
}
.carousel-btn svg {
  width: 0.8rem;
  height: 0.8rem;
}
.testimonial-carousel__viewport {
  display: flex;
  gap: var(--space-md);
  overflow-x: auto;
  /* la primera card se alinea con el container; las demás asoman por el borde */
  padding-inline: max(var(--gutter), (100vw - var(--container)) / 2);
  padding-block: var(--space-sm);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch; /* momentum en iOS */
}
.testimonial-carousel__viewport::-webkit-scrollbar {
  display: none;
}
/* Copias del contenido para el loop infinito: no generan caja propia, sus
   cards participan del flex del viewport. */
.testimonial-carousel__dupe {
  display: contents;
}
.testimonial {
  flex: 0 0 clamp(260px, 80vw, 330px);
  margin: 0; /* el <figure> trae margin del navegador; sin esto suma +80px al gap */
}
/* Globo blanco, con la colita apuntando abajo a la izquierda */
.testimonial__bubble {
  position: relative;
  padding: clamp(1.4rem, 1rem + 1.5vw, 1.9rem);
  background: #fff;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}
.testimonial__bubble::after {
  content: "";
  position: absolute;
  bottom: -14px;
  left: 30px;
  border-width: 14px 14px 0 0;
  border-style: solid;
  border-color: #fff transparent transparent transparent;
}
.testimonial__stars {
  margin-bottom: var(--space-sm);
  color: var(--curry);
  font-size: 0.9rem;
  letter-spacing: 0.14em;
}
.testimonial blockquote {
  margin: 0;
  font-size: var(--fs-small);
  line-height: var(--lh-body);
}
.testimonial blockquote::before {
  content: "\201C";
}
.testimonial blockquote::after {
  content: "\201D";
}
/* Autora: avatar con la inicial + nombre, debajo del globo */
.testimonial__author {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: calc(14px + var(--space-sm)); /* deja pasar la colita */
  padding-left: 0.6rem;
}
.testimonial__avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--verde-salvia);
  color: var(--verde-profundo);
  font-size: 0.95rem;
  font-weight: 500;
}
.testimonial__name {
  font-weight: 500;
  color: var(--verde-profundo);
}

/* ---- Programas y caminos · selector de pestañas CSS puro (ref. V14) ---- */
.paths {
  position: relative;
}
/* Los radios: ocultos pero enfocables (posición absoluta para no ocupar). */
.paths__radio {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

/* Barra de pestañas: al ancho del panel, redondeada (píldora) */
.paths__tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin: 0 0 var(--space-lg);
  padding: 6px;
  background: var(--crema);
  border: var(--border-width) solid rgba(52, 65, 60, 0.12);
  border-radius: 999px;
}
@media (max-width: 720px) {
  .paths__tabs {
    grid-template-columns: 1fr;
    /* Apilados, el radio de píldora (999px) deforma el contenedor en un óvalo
       alto. Lo bajamos al radio del tab (24px) más el padding (6px). */
    border-radius: 30px;
  }
}
.paths__tab {
  min-height: 3rem; /* mismo alto que los botones */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1rem;
  border-radius: 999px; /* redondeado (píldora) */
  font-size: 0.75rem; /* tamaño y estilo de los botones */
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  line-height: 1.2;
  text-align: center;
  color: var(--color-muted);
  cursor: pointer;
  transition:
    background-color var(--transition),
    color var(--transition);
}
/* Pestaña activa (según el radio marcado) */
#path-1:checked ~ .paths__tabs label[for="path-1"],
#path-2:checked ~ .paths__tabs label[for="path-2"],
#path-3:checked ~ .paths__tabs label[for="path-3"] {
  background: var(--curry);
  color: #fff; /* blanco, igual que los botones primarios */
  box-shadow: 0 10px 24px rgba(52, 65, 60, 0.18);
}
/* Anillo de foco cuando el radio está enfocado por teclado */
.paths__radio:focus-visible ~ .paths__tabs {
  outline: 2px solid var(--verde-seco);
  outline-offset: 3px;
}

/* Desplegable de categorías: en mobile reemplaza los tabs (más claro para
   navegar). Solo aparece con JS (`.paths--js`); sin JS quedan los tabs. */
.paths__select {
  display: none;
}
@media (max-width: 720px) {
  .paths--js .paths__tabs {
    display: none;
  }
  .paths--js .paths__select {
    display: block;
    width: 100%;
    min-height: 3rem;
    margin: 0 0 var(--space-lg);
    padding: 0 2.75rem 0 1.25rem;
    border: var(--border-width) solid transparent;
    border-radius: 30px;
    background-color: var(--curry);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1.2rem center;
    background-size: 0.85rem;
    color: #fff;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(52, 65, 60, 0.18);
  }
  .paths--js .paths__select:focus-visible {
    outline: 2px solid var(--verde-seco);
    outline-offset: 3px;
  }
}

/* Paneles: se muestra solo el del radio marcado. Fondo con degradé tonal
   sutilísimo (crema → salvia), como la referencia. */
.paths__panel {
  display: none;
  flex-direction: column;
  gap: var(--space-lg); /* entre intro, grilla de opciones y link */
  padding: clamp(1.75rem, 1rem + 3vw, 3rem);
  background: linear-gradient(140deg, var(--crema), var(--verde-salvia));
  border: var(--border-width) solid rgba(52, 65, 60, 0.12);
  border-radius: var(--radius-panel);
}
#path-1:checked ~ .paths__panels #panel-1,
#path-2:checked ~ .paths__panels #panel-2,
#path-3:checked ~ .paths__panels #panel-3 {
  display: flex;
}
.paths__copy h3 {
  margin-top: var(--space-sm); /* separa el eyebrow del título */
  font-size: var(--fs-h3);
}
.paths__copy p {
  margin-top: var(--space-md);
  color: var(--color-text);
}
/* Link al pie del panel, alineado a la izquierda como el intro */
.paths__panel > .text-link {
  display: none; /* oculto a pedido de Nadia (jul-2026); vuelve quitando esta línea */
  align-self: start;
  color: var(--curry);
}

/* Opciones: cards blancas redondeadas con foto + nombre + flecha, en 2 columnas */
.paths__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}
@media (max-width: 820px) {
  .paths__list {
    grid-template-columns: 1fr;
  }
}
.paths__item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: 1.05rem 1.4rem;
  background: var(--ghost);
  border: var(--border-width) solid rgba(52, 65, 60, 0.1);
  border-radius: var(--radius-card);
  color: var(--verde-profundo);
  transition:
    transform var(--transition),
    box-shadow var(--transition);
}
.paths__item:hover {
  transform: translateX(4px);
  box-shadow: var(--shadow-card);
}
.paths__item-thumb {
  width: 5.5rem;
  height: 5.5rem;
  border-radius: 12px;
  background-color: var(--verde-seco); /* respaldo si la foto no cargara */
  object-fit: cover;
}
.paths__item-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.paths__item-name {
  font-family: var(--font-heading);
  font-size: var(--fs-lead);
  line-height: 1.15;
}
.paths__item-desc {
  font-size: var(--fs-small);
  line-height: 1.3;
  color: var(--color-muted);
}
.paths__item-arrow {
  color: var(--verde-seco);
}
@media (prefers-reduced-motion: reduce) {
  .paths__item {
    transition: box-shadow var(--transition);
  }
  .paths__item:hover {
    transform: none;
  }
}

/* Link de texto con flecha (reutilizable) */
.text-link {
  display: inline-block;
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--verde-seco);
}
.text-link::after {
  content: " \2192";
}

/* ---- Test / lead magnet ---- */
/* Secuencia de cards sobre el mismo lienzo ghost: "Elegí por dónde empezar",
   el test y el podcast. Cada bloque cierra sin aire abajo y el siguiente abre
   con el gap de una card, así se leen como cards hermanas y no como secciones
   sueltas. La duna de fundadoras cierra la secuencia. */
.home-programas {
  padding-bottom: var(--space-xl); /* aire antes del bloque siguiente (antes 0, quedaba pegado) */
}
.home-test {
  padding-top: var(--space-lg);
  padding-bottom: 0;
}
.home-podcast {
  position: relative; /* ancla la foto full-bleed y el sello */
  overflow: hidden; /* recorta la foto que sangra al borde derecho */
  padding-block: var(--space-xl); /* menos alto: antes la banda quedaba enorme */
  background: linear-gradient(140deg, var(--crema), var(--verde-salvia)); /* banda full-width */
}
/* Divisor entre los cursos (de pago, arriba) y los recursos gratuitos (el test y
   el podcast): eyebrow centrado con una línea fina a cada lado. */
.resources-divider {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 0.6rem + 1.5vw, 2rem);
  margin-top: var(--space-md); /* un poco más de aire desde los cursos */
  margin-bottom: calc(var(--space-lg) + var(--space-md));
}
.resources-divider__line {
  flex: 1;
  height: 0;
  border-top: 2px dotted rgba(52, 65, 60, 0.3);
}
.resources-divider__label {
  margin-bottom: 0; /* anula el margin del eyebrow; el flex maneja el espaciado */
  white-space: nowrap;
}
.test-card {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  column-gap: clamp(2rem, 1rem + 3vw, 3.5rem);
  row-gap: var(--space-md);
  align-items: start; /* copy y formulario arrancan a la altura del título */
  padding: clamp(2rem, 1rem + 3vw, 3.5rem);
  background: var(--crema);
  border: var(--border-width) solid rgba(52, 65, 60, 0.12); /* mismo borde que la card de arriba */
  border-radius: var(--radius-panel);
  color: var(--color-text);
}
/* Eyebrow a ancho completo arriba: así el formulario queda al ras del título. */
.test-card > .section-eyebrow {
  grid-column: 1 / -1;
  margin-bottom: 0; /* el row-gap del grid maneja el espacio */
}
@media (max-width: 820px) {
  .test-card {
    grid-template-columns: 1fr;
  }
}
/* El h2 es el título principal del bloque, en el tamaño intermedio (mismo que
   .section-title--h3: el título del libro y del programa). */
.test-card h2 {
  max-width: 30ch;
  font-size: clamp(1.9rem, 1.4rem + 2.2vw, 3rem);
}
.test-card p {
  max-width: 52ch;
  margin-top: var(--space-md);
}
/* Bajada bajo el título: el gancho que antes era el h2, ahora como subtítulo.
   En itálica y al tamaño de la cita del libro (--fs-lead); la itálica ya la
   separa del cuerpo, sin necesidad de un piso propio. */
.test-card p.test-card__lead {
  max-width: 40ch;
  margin-top: var(--space-sm);
  font-family: var(--font-italic);
  font-style: italic;
  font-size: var(--fs-lead);
  line-height: 1.4;
}

/* Formulario del test. Por ahora es solo el markup: la conexión se define
   después (CF7/Brevo, como el del blog). */
.test-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
/* Línea que introduce el formulario. Especificidad para ganarle a `.test-card p`. */
.test-form .test-form__intro {
  margin-top: 0; /* el gap del formulario maneja el espacio */
  font-size: var(--fs-small);
}
.test-form input {
  padding: 0.8rem 1rem;
  border: var(--border-width) solid rgba(52, 65, 60, 0.18);
  border-radius: var(--radius-lg);
  background: var(--ghost);
  font: inherit;
  color: var(--color-text);
}
.test-form input::placeholder {
  color: var(--color-muted);
}
.test-form .btn {
  width: 100%;
  margin-top: var(--space-xs);
  justify-content: center;
  text-align: center;
}

/* ---- Fundadoras · cada médica en una card horizontal (foto | texto).
   Horizontal = ancha y baja: se ve completa sin scrollear. ---- */
.home-fundadoras {
  position: relative; /* ancla la duna del borde superior */
}

.home-fundadoras .btn-row {
  display: none; /* botón "Conocé más" oculto a pedido de Nadia (jul-2026); vuelve quitando esta línea */
}
/* Duna divisoria test → fundadoras: el ghost de arriba baja en curva sobre el
   crema del bloque. Misma curva que la del hero. */
.fundadoras__dune {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: clamp(3.5rem, 7vw, 7rem);
  pointer-events: none;
}
.fundadoras__dune path {
  fill: var(--ghost);
}
.founder-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
}
.founder {
  display: grid;
  grid-template-columns: 0.75fr 1.25fr; /* foto | texto, más aire para el texto */
  align-items: stretch; /* la foto llena su columna al alto que imponga el texto */
  background: var(--ghost);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
/* La foto llena su columna a la altura de la card (que la define el texto): así
   una bio larga nunca se recorta. Sin aspect-ratio fijo en desktop; object-fit
   cover mantiene la imagen sin deformar. En mobile pasa a 3:2 (apilada). */
.founder__photo {
  background: var(--beige-nude);
}
.founder__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Las caras están en el tercio superior; este encuadre alto evita que el
     recorte les corte la cara. */
  object-position: 50% 20%;
}
.founder__body {
  padding: clamp(1.25rem, 1rem + 1.2vw, 1.75rem);
}
.founder__name {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--fs-lead); /* entra en un renglón, no parte el nombre */
  line-height: 1.1;
  color: var(--verde-profundo);
}
.founder__body p {
  font-size: var(--fs-small); /* bio compacta */
}
/* En tablet: una card por fila pero SIGUE horizontal (foto | texto). Dos cards
   horizontales acá no entran: el texto se apretaba y se recortaba contra el
   overflow:hidden de la card. */
@media (max-width: 900px) {
  .founder-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 720px) {
  /* En mobile: una card por fila, foto arriba y texto abajo, centrada. */
  .founder-grid {
    grid-template-columns: 1fr;
    max-width: 420px;
    margin-inline: auto;
  }
  .founder {
    grid-template-columns: 1fr;
  }
  .founder__photo {
    aspect-ratio: 3 / 2;
  }
}
.founder__credential {
  display: block;
  margin: 0.2rem 0 var(--space-sm);
  font-size: var(--fs-small);
  color: var(--color-muted);
}

/* Mini ecualizador en lugar del ícono del eyebrow: 4 barras que laten como un
   visualizador de audio, en el color del eyebrow. Mismo alto que .eyebrow-icon. */
.eq-mini {
  display: inline-flex;
  align-items: flex-end;
  align-self: baseline;
  gap: 2px;
  height: 1.6em;
  /* Las barras son cajas vacías: no tienen línea base propia, así que la
     alineación automática las deja por debajo del texto. Las subimos hasta
     apoyarlas en la línea base (en em, para que acompañe al tamaño del texto). */
  transform: translateY(-0.4em);
}
.eq-mini span {
  width: 2.5px;
  border-radius: 2px;
  background: currentColor;
  transform-origin: bottom;
  animation: eq-mini 1s ease-in-out infinite alternate;
}
.eq-mini span:nth-child(1) { height: 40%; }
.eq-mini span:nth-child(2) { height: 70%; animation-delay: 0.18s; }
.eq-mini span:nth-child(3) { height: 100%; animation-delay: 0.35s; }
.eq-mini span:nth-child(4) { height: 55%; animation-delay: 0.1s; }
.eq-mini span:nth-child(5) { height: 85%; animation-delay: 0.28s; }
.eq-mini span:nth-child(6) { height: 45%; animation-delay: 0.05s; }
@keyframes eq-mini {
  from { transform: scaleY(0.4); }
  to { transform: scaleY(1); }
}

/* Variante para el ítem "Podcast" del menú: más chico y realineado al texto del link */
.eq-mini--nav {
  height: 1em;
  gap: 1.5px;
  margin-right: 0.4em;
  transform: translateY(0.06em);
}
.eq-mini--nav span {
  width: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .eq-mini span { animation: none; }
}

/* ---- Comunidad ---- */
/* Título al ancho del bloque (no encajonado a la izquierda); los párrafos,
   a medida de lectura. */
.comunidad__title {
  max-width: 30ch;
}
.comunidad__inner p {
  max-width: 56ch;
  margin-top: var(--space-md);
}

/* ==========================================================================
   Footer — verde profundo, logo + tagline + legal
   ========================================================================== */
.site-footer {
  background: var(--verde-profundo);
  color: rgba(244, 238, 228, 0.72);
  padding-top: clamp(3rem, 1.5rem + 3.5vw, 5rem); /* menos aire arriba que una sección */
  padding-bottom: var(--space-md); /* poco espacio después del legal */
  font-size: var(--fs-small);
}

.site-footer__inner {
  display: grid;
  grid-template-columns: 1.4fr 0.9fr 1.3fr;
  gap: var(--space-xl);
  align-items: start;
}
@media (max-width: 820px) {
  .site-footer__inner {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
}

.site-footer__logo {
  display: block;
  width: 120px;
  aspect-ratio: 123.1 / 74;
  background: var(--crema); /* recolorea el wordmark a crema sobre el verde */
  -webkit-mask: url("assets/img/nua-01.svg") no-repeat center / contain;
  mask: url("assets/img/nua-01.svg") no-repeat center / contain;
}

.site-footer__tagline {
  margin-top: var(--space-sm);
  max-width: 32ch;
}

/* Título de columna (Navegación / Sumate a la comunidad) */
.site-footer__heading {
  display: block;
  margin-bottom: var(--space-sm);
  font-size: var(--fs-kicker);
  font-weight: 600;
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  color: var(--crema);
}

/* Menú del footer: lista vertical */
.site-footer__menu {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.site-footer__menu a {
  color: rgba(244, 238, 228, 0.72);
  text-decoration: none;
  transition: color var(--transition);
}
.site-footer__menu a:hover {
  color: var(--crema);
}

/* Newsletter */
.site-footer__news p {
  margin: 0 0 var(--space-md);
  max-width: 36ch;
}
.footer-news {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}
.footer-news input {
  flex: 1 1 12rem;
  min-width: 0;
  padding: 0.75rem 1rem;
  border: var(--border-width) solid rgba(244, 238, 228, 0.25);
  border-radius: var(--radius-lg);
  background: rgba(244, 238, 228, 0.06);
  color: var(--crema);
  font: inherit;
}
.footer-news input::placeholder {
  color: rgba(244, 238, 228, 0.5);
}
.footer-news .btn {
  flex: none;
}

/* Línea inferior con el legal */
.site-footer__bottom {
  margin-top: var(--space-xl);
  padding-top: var(--space-md);
  border-top: var(--border-width) solid rgba(244, 238, 228, 0.15);
}
.site-footer__legal {
  margin: 0;
}

/* ==========================================================================
   Placeholder de arranque — lo usa index.php (fallback). Se borra cuando
   todos los templates reales estén hechos.
   ========================================================================== */
.placeholder {
  min-height: 100vh;
  display: grid;
  place-content: center;
  justify-items: center; /* centra el logo (img es bloque, no lo centra text-align) */
  text-align: center;
  gap: var(--space-md);
  padding: var(--space-md);
}

.placeholder__logo {
  width: min(260px, 62vw);
  height: auto;
}

.placeholder p {
  margin: 0;
  opacity: 0.7;
}

/* ---- Podcast · banda full-width, foto que sangra a la derecha ---- */
.podcast__copy {
  position: relative;
  z-index: 1; /* por encima de la foto */
  max-width: 35rem; /* el título "Medicina de Brujas" entra en una línea (512px) */
}
.podcast__copy p {
  margin-top: var(--space-sm);
  max-width: 42ch;
  color: var(--color-text);
}
.podcast__copy p strong {
  font-weight: 500;
}

/* Stats del show (datos de Spotify) */
.podcast__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem; /* menos espacio entre las cards */
  max-width: 32rem; /* como máximo el ancho del título "Medicina de Brujas" */
  margin-top: var(--space-lg);
}
.podcast__stat {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.25rem;
  padding: 0.65rem 0.75rem;
  background: rgba(255, 255, 255, 0.72);
  border-radius: 12px; /* menos redondeado (estilo Spotify) */
  box-shadow: var(--shadow-card);
}
.podcast__stat-line {
  display: flex;
  align-items: baseline; /* la palabrita al lado del número, alineada abajo */
  gap: 0.4rem;
}
.podcast__stat-star {
  position: absolute;
  left: 0; /* borde izq de la estrella alineado con "en Spotify" */
  bottom: 100%;
  margin-bottom: -4px;
  width: 0.9rem;
  height: 0.9rem;
  color: var(--curry);
}
/* En mobile ocultamos la estrella: queda solo "4.9 en Spotify" */
@media (max-width: 640px) {
  .podcast__stat-star {
    display: none;
  }
}

/* Tercera "card": solo el badge de Spotify (sin caja ni texto); las otras dos se igualan a su alto */
.podcast__stat--spotify {
  padding: 0.35rem 0.5rem; /* menos padding: el logo llena la card */
  color: inherit;
  text-decoration: none;
}
.podcast__spotify-logo {
  width: 100%;
  height: auto;
  aspect-ratio: 1099 / 415;
}
.podcast__stat-num {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(1.6rem, 1.1rem + 1.3vw, 2.4rem);
  line-height: 0.8;
  color: var(--color-text);
}
.podcast__stat-plus {
  color: var(--curry);
  font-size: 0.68em;
}
.podcast__stat-label {
  position: relative; /* ancla la estrella (absoluta) encima, alineada a su izquierda */
  font-size: var(--fs-small);
  color: var(--color-text);
  white-space: nowrap;
}
.podcast__copy .btn-row {
  margin-top: var(--space-lg);
}

/* Foto full-bleed a la derecha (fuera del container, llega al borde) */
.podcast__media {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(46%, 640px);
  pointer-events: none;
}
.podcast__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* se funde con el degradé por el borde izquierdo */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 42%);
  mask-image: linear-gradient(to right, transparent 0%, #000 42%);
}

/* Sello giratorio "podcast #1" sobre el borde izquierdo de la foto */
.podcast__seal {
  position: absolute;
  left: -34px;
  top: 4rem; /* alineada arriba con el eyebrow "PODCAST" */
  z-index: 2;
  width: clamp(104px, 11vw, 128px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--verde-profundo);
  color: var(--crema);
  box-shadow: var(--shadow-card);
}
.podcast__seal-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.podcast__seal-ring text {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  fill: currentColor;
  transform-box: view-box;
  transform-origin: 60px 60px;
  animation: hero-stamp-spin 22s linear infinite;
}
.podcast__seal-center {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}
.podcast__seal-kicker {
  font-family: var(--font-body);
  font-size: 0.5rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.85;
}
.podcast__seal-num {
  font-family: var(--font-heading);
  font-size: clamp(1.7rem, 1.1rem + 1.6vw, 2.3rem);
  line-height: 1;
  margin-top: 0.12em;
}
@media (prefers-reduced-motion: reduce) {
  .podcast__seal-ring text {
    animation: none;
  }
}

/* Mobile / tablet angosto: la foto se apila abajo, a todo el ancho */
@media (max-width: 1100px) {
  .home-podcast {
    overflow: visible; /* deja que el sello sobresalga por arriba del bloque */
    padding-block: var(--space-xl) 0; /* sin espacio verde debajo de la foto: llega hasta la cinta */
  }
  .podcast__media {
    position: static; /* el sello ya no va sobre la foto, sino arriba en el bloque */
    width: 100%;
    aspect-ratio: 16 / 9;
    margin-top: var(--space-lg);
  }
  .podcast__media img {
    object-position: center top; /* el micrófono está arriba en la foto */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 55%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 55%);
  }
  .podcast__seal {
    top: -1rem; /* sobresale un poco hacia arriba del bloque */
    left: auto;
    right: var(--gutter); /* alineado a la derecha con la card de Spotify */
    bottom: auto;
    /* más grande (≈ ancho de una card); en anchos chicos se achica para no tapar el título */
    width: clamp(88px, 82vw - 282px, 144px);
    font-size: clamp(88px, 82vw - 282px, 144px); /* el centro (#1) escala con el sello */
  }
  .podcast__seal-num {
    font-size: 0.3em;
  }
  .podcast__seal-kicker {
    font-size: 0.09em;
  }
}

/* ---- Entrada del contenido ----
   Fundido corto con un leve desplazamiento cuando el bloque aparece en pantalla.
   El estado oculto depende de `.has-reveal`, que agrega el JS: sin JS (o sin
   IntersectionObserver) el contenido se ve normal, nunca queda invisible. */
.has-reveal .reveal {
  opacity: 0;
  transform: translateY(30px);
}
/* La transición vive en el estado final: así ocultar es instantáneo (nada se
   desvanece al cargar) y solo se anima la aparición. */
.has-reveal .reveal.is-visible {
  opacity: 1;
  transform: none;
  transition:
    opacity 1s ease,
    transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (prefers-reduced-motion: reduce) {
  .has-reveal .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Entrada del hero al cargar. Va aparte del reveal por scroll: el hero siempre
   está en pantalla al entrar, así que se anima solo al cargar y en CSS puro (no
   depende del JS). Mismo lenguaje que el resto: fundido + leve desplazamiento. */
@keyframes hero-in {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.hero__eyebrow,
.hero__title,
.hero__lead,
.hero__points,
.hero__actions,
.hero__microcopy,
.hero__media {
  animation: hero-in 1.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.hero__eyebrow {
  animation-delay: 0.06s;
}
.hero__title {
  animation-delay: 0.19s;
}
.hero__media {
  animation-delay: 0.25s;
}
.hero__lead {
  animation-delay: 0.4s;
}
.hero__points {
  animation-delay: 0.48s;
}
.hero__actions {
  animation-delay: 0.55s;
}
.hero__microcopy {
  animation-delay: 0.68s;
}
@media (prefers-reduced-motion: reduce) {
  .hero__eyebrow,
  .hero__title,
  .hero__lead,
  .hero__points,
  .hero__actions,
  .hero__microcopy,
  .hero__media {
    animation: none;
  }
}

/* ---- Programa · encabezado en mobile ----
   Arriba queda solo "Programa online" y, a su misma altura y alineado con el
   contenido, el punto de estado. La fecha baja a continuación de las fotos. */
.programa__fecha--movil {
  display: none;
}
@media (max-width: 640px) {
  .programa__header-sep,
  .programa__fecha--desktop {
    display: none;
  }
  .programa__header .pill--live {
    padding: 0;
    background: none;
  }
  .programa__header .pill--live .pill__label {
    display: none;
  }
  .programa__header .pill--live .pill__dot {
    width: 10px;
    height: 10px;
  }
  .programa__fecha--movil {
    display: block;
    margin-top: var(--space-md);
  }
}

/* En mobile la barra superior no se alinea a la derecha: con el ancho justo,
   centrada queda mejor repartida. */
@media (max-width: 640px) {
  .top-bar__inner {
    justify-content: center;
  }
}

/* Con sesión iniciada, WordPress agrega su barra de administración: en escritorio
   es fija (32px) y taparía la tira superior, que se pega a top:0. Por eso el
   sticky arranca debajo de ella. Abajo de 782px WordPress la vuelve estática y
   deja de tapar, así que ahí volvemos a 0. Solo afecta a usuarios logueados. */
.admin-bar .site-top {
  top: 32px;
}
@media (max-width: 782px) {
  .admin-bar .site-top {
    top: 0;
  }
}

/* ---- Botón de formulario mientras se envía ----
   Contact Form 7 le pone el atributo [inert] a los elementos que llevan la
   clase `inert-on-submitting` mientras el envío está en curso, y se lo saca
   solo al terminar. Ese atributo bloquea el click, pero no cambia el aspecto:
   sin esta regla el botón se sigue viendo activo aunque ya no responda, que es
   justo lo que empuja a clickear de nuevo y duplica el lead.

   El envío tarda unos segundos porque WP Fusion habla con Brevo de forma
   sincrónica, así que la ventana para el doble click es real, no teórica.

   No se define `cursor`: [inert] ya deja al elemento fuera del hit-testing, el
   puntero nunca se posa sobre él y el cursor no llegaría a verse.

   Vale para cualquier formulario del sitio, no solo el de la landing. */
.wpcf7-form input[type="submit"][inert],
.wpcf7-form button[type="submit"][inert] {
  opacity: 0.55;
}


/* ---- Cinta de temas · divisor entre el podcast y el método (marquee CSS puro).
   Cuatro sets idénticos dentro del track; corre -50% (dos sets) para un loop
   sin costura ni huecos en pantallas anchas. Verde, texto blanco. */
.topic-marquee {
  overflow: hidden;
  padding-block: clamp(0.85rem, 0.6rem + 0.8vw, 1.3rem);
  background: var(--verde-seco);
  color: #fff;
}
.topic-marquee__track {
  display: flex;
  width: max-content;
  animation: topic-marquee-scroll 60s linear infinite;
}
.topic-marquee__set {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
}
.topic-marquee__item {
  white-space: nowrap;
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.topic-marquee__sep {
  margin-inline: clamp(1.25rem, 0.7rem + 1.8vw, 2.75rem);
  color: rgba(255, 255, 255, 0.5);
}
@keyframes topic-marquee-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
/* Accesibilidad: si se pide menos movimiento, la cinta queda quieta. */
@media (prefers-reduced-motion: reduce) {
  .topic-marquee__track {
    animation: none;
  }
}


/* ==========================================================================
   BLOQUES GUARDADOS — fuera del home, preservados para reaprovechar.
   El HTML vive en template-parts/guardados/ (no se renderiza), así que estas
   reglas no se aplican. Cómo reactivar: ver el README de esa carpeta.
   ========================================================================== */

/* ---- Validación · 2 columnas sobre degradé claro (ref. V14) ---- */
.home-validacion {
  padding-bottom: clamp(4rem, 2rem + 5.5vw, 7rem); /* aire antes de la cinta, para equilibrar con el de arriba */
}
.validacion__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 1rem + 5vw, 5rem);
  align-items: start;
}
@media (max-width: 820px) {
  .validacion__grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
}
.validacion__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
/* Bajada destacada: itálica Lora, tamaño intermedio (ni la chica original ni
   la grande): da presencia a la columna sin dispararla. */
.validacion__lead {
  font-family: var(--font-italic);
  font-style: italic;
  font-size-adjust: 0.53;
  font-size: clamp(1.2rem, 1rem + 0.75vw, 1.55rem);
  line-height: 1.5;
  color: var(--color-text);
}
/* El párrafo que sigue: tinta plena (antes iba atenuado y perdía contraste). */
.validacion__body p:not(.validacion__lead) {
  color: var(--color-text);
}


/* ---- CTA final · bloque verde con dos círculos decorativos (ref. V14) ---- */
.home-cta-final {
  position: relative;
  overflow: hidden;
}
.home-cta-final::before,
.home-cta-final::after {
  content: "";
  position: absolute;
  border: var(--border-width) solid rgba(52, 65, 60, 0.12);
  border-radius: 50%;
}
.home-cta-final::before {
  width: 460px;
  height: 460px;
  top: -170px;
  left: -240px;
}
.home-cta-final::after {
  width: 350px;
  height: 350px;
  bottom: -190px;
  right: -180px;
}
.cta-final__inner {
  position: relative; /* por encima de los círculos */
  z-index: 1;
  max-width: var(--container);
  margin-inline: auto;
  text-align: center;
}
.cta-final__title {
  max-width: 30ch; /* al tamaño display, ~3-4 renglones (no una palabra por línea) */
  margin-inline: auto;
  color: var(--verde-profundo);
}
.cta-final__inner p {
  max-width: 52ch;
  margin: var(--space-md) auto 0;
  color: var(--color-text);
}