/* ==========================================================================
   Recreo Bienestar — hoja de estilos principal
   Plataforma de bienestar — demostración
   Paleta cálida, tipografía elegante, componentes redondeados y contenidos.
   Sin dependencias externas (sin CDN, sin frameworks).
   ========================================================================== */

/* ---------- Tipografía (auto-alojada, Phase 3.6) ----------
   Archivos variables (eje "wght" 300–700) descargados de Google Fonts y
   servidos desde este mismo dominio — sin solicitud externa en cada
   carga de página. Un solo archivo por familia/estilo cubre todo el rango
   de peso usado en el sitio. Subconjunto "latin" únicamente (cubre acentos
   y ñ del español; se omiten cirílico/vietnamita/griego para no bajar
   peso innecesario). */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-normal.c47ff12887a3.woff2") format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-italic.3e2c4175a96d.woff2") format('woff2');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/montserrat-normal.311d352d9323.woff2") format('woff2');
}
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/montserrat-italic.7921052ef928.woff2") format('woff2');
}

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

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
}

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

ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }

button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }

input, textarea { font: inherit; color: inherit; }

h1, h2, h3, h4, p, figure { margin: 0; }

/* ---------- Design tokens ---------- */
:root {
  /* Color — cálida y suave (paleta original, sin tocar salvo lo indicado) */
  /* Reconciliado con la paleta autoritativa de Carla (Fase 3.7): mismos
     roles, solo se actualizó el valor hex de cada variable que tenía un
     color equivalente en su paleta ("earth-light"/"earth-text" abajo).
     --color-bg-alt, --color-border, --color-gold(-light), --color-secondary
     (-light) y --color-locked no tienen equivalente en la paleta de Carla
     (pool/mint/earth) — se dejan sin tocar a propósito. */
  --color-bg: #F7F4F0; /* earth-light (era #FBF5EF) */
  --color-bg-alt: #F3E7D9;
  --color-surface: #FFFFFF;
  --color-text: #4A4036; /* earth-text (era #3B2E2A) */
  --color-text-muted: #8C7A6B; /* earth-dark (era #7A6A62) */
  /* earth-mid de la paleta de Carla (#D9C8B8): sin variable existente que
     jugara ese rol sin romper contraste — --color-bg-alt es la más
     parecida semánticamente, pero textos con --color-text-muted encima
     (.section-head p, .placeholder-note, etc.) caerían a ~1.6:1 de
     contraste sobre #D9C8B8, muy por debajo de WCAG AA. Se agrega como
     variable nueva en vez de forzarla sobre un rol con texto encima;
     queda disponible para usos puramente decorativos (bordes, acentos). */
  --color-earth-mid: #D9C8B8;
  /* Primary brand color (Phase 3.7): shifted from the original terracotta
     (#AD5A41/#8F4936/#D98F73 — kept only as a comment for history) to the
     turquoise/pool-blue accent from Carla's approved visual reference.
     Everything that uses --color-primary (buttons, focus rings, nav
     underline, links) follows automatically — deliberately a token
     change, not a hunt through every rule that used it. */
  --color-primary: #2A8293;
  --color-primary-dark: #1F6472;
  --color-primary-light: #4CB1C4;
  --color-secondary: #7E8F70;
  --color-secondary-light: #E3E9DB;
  --color-gold: #B5893F;
  --color-gold-light: #F1E4C5;
  --color-border: #E8DCCE;
  --color-locked: #6E625B;

  /* Acento añadido (Phase 3.6, dirección visual de referencia de Carla) —
     capa adicional sobre la paleta cálida existente, no un reemplazo. */
  --color-pool: #4CB1C4;
  --color-pool-dark: #2A8293;
  --color-pool-light: #DCF0F3;
  --color-mint: #B5E3D8;
  --color-mint-light: #E2F4F0;

  --shadow-soft: 0 4px 20px rgba(59, 46, 42, 0.08);
  --shadow-lift: 0 12px 32px rgba(59, 46, 42, 0.14);

  --radius-sm: 10px;
  --radius-md: 20px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  /* Cormorant Garamond / Montserrat auto-alojadas arriba; se conserva la
     pila anterior como respaldo si por algún motivo el archivo no carga. */
  --font-heading: 'Cormorant Garamond', Georgia, 'Iowan Old Style', 'Palatino Linotype', 'Book Antiqua', serif;
  --font-body: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4.5rem;
  --space-8: 6.5rem;

  --container-w: 1180px;
  --transition: 220ms ease;
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 400;
  line-height: 1.15;
  color: var(--color-text);
}

h1 { font-size: clamp(2.4rem, 1.7rem + 3vw, 4.6rem); }
h2 { font-size: clamp(1.9rem, 1.5rem + 1.6vw, 2.8rem); }
h3 { font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.55rem); }

/* Acento itálico liviano dentro de un título — el detalle editorial más
   repetido en la referencia (ej. "tu <em>expansión</em>"). */
h1 em, h2 em, .accent {
  font-style: italic;
  font-weight: 300;
  color: var(--color-pool-dark);
}

p { color: var(--color-text); }
p.lede { font-size: 1.15rem; color: var(--color-text-muted); }
p.quote { font-size: 1.3rem; font-weight: 300; font-style: italic; color: var(--color-text-muted); }

.container {
  max-width: var(--container-w);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

.section { padding-block: var(--space-8); }
.section--alt { background: var(--color-bg-alt); }
/* Blanco puro (--color-surface), para secciones que deben destacar sobre
   el fondo cálido/crema por defecto del body — ej. "Sobre mí" y
   "Contacto" (Fase 3.7). */
.section--white { background: var(--color-surface); }
.section--tight { padding-block: var(--space-6); }

.section-head {
  max-width: 640px;
  margin-bottom: var(--space-6);
}
.section-head--center { margin-inline: auto; text-align: center; }

.eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-primary);
  font-weight: 600;
  margin-bottom: var(--space-2);
}

.section-head p { color: var(--color-text-muted); margin-top: var(--space-3); }

/* ---------- Accesibilidad ---------- */
.skip-link {
  position: absolute;
  left: -999px;
  top: auto;
  background: var(--color-primary);
  color: #fff;
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-sm);
  z-index: 1000;
}
.skip-link:focus {
  left: var(--space-3);
  top: var(--space-3);
}

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

:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ---------- Animación de entrada al hacer scroll ----------
   Ver js/main.js: un IntersectionObserver agrega .visible cuando el
   elemento entra en pantalla. La media query de prefers-reduced-motion
   ya definida arriba anula la transición para quien la desactivó — el
   contenido igual aparece, solo que sin animación. */
.fade-in {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}
.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Botones ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.6rem;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 0.95rem;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }

.btn-primary {
  background: var(--color-primary);
  color: #fff;
  box-shadow: var(--shadow-soft);
}
.btn-primary:hover { background: var(--color-primary-dark); box-shadow: var(--shadow-lift); }

.btn-ghost {
  background: transparent;
  color: var(--color-text);
  border: 1px solid var(--color-border);
}
.btn-ghost:hover { border-color: var(--color-primary); color: var(--color-primary); }

.btn-block { width: 100%; }
.btn-sm { padding: 0.6rem 1.15rem; font-size: 0.85rem; }

/* ---------- Encabezado / navegación ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(251, 245, 239, 0.92);
  backdrop-filter: saturate(160%) blur(8px);
  border-bottom: 1px solid var(--color-border);
}

.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-3);
}

.logo {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  letter-spacing: 0.02em;
  color: var(--color-text);
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.logo em { font-style: italic; color: var(--color-pool-dark); }
.logo-mark {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: var(--font-heading);
  font-size: 1rem;
  flex-shrink: 0;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.nav-links a {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
  color: var(--color-text);
  position: relative;
  padding-block: 0.25rem;
}
/* .nav-links a { color: var(--color-text) } (0,1,1) beats .btn-primary's
   color:#fff (0,1,0), so "Acceder" rendered dark-on-teal (~2.3:1). This
   scoped override (0,2,1) wins back the white label without touching
   .nav-links a itself, which real nav links still depend on. */
.nav-links a.btn-primary { color: #fff; }
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--color-primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition);
}
.nav-links a:hover::after,
.nav-links a:focus-visible::after { transform: scaleX(1); }

/* Enlaces "utilitarios" (Videoteca) integrados en la nav pública sin
   competir visualmente con los 4 ítems principales de marca — Fase 3.7. */
.nav-links a.nav-link-muted { color: var(--color-text-muted); font-weight: 500; }
.nav-links a.nav-link-muted::after { background: var(--color-text-muted); }

.nav-right { display: flex; align-items: center; gap: var(--space-5); }

.nav-toggle {
  display: none;
  width: 42px; height: 42px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  display: block;
  width: 18px; height: 2px;
  background: var(--color-text);
  position: relative;
  transition: transform var(--transition), opacity var(--transition);
}
.nav-toggle span::before { position: absolute; top: -6px; }
.nav-toggle span::after { position: absolute; top: 6px; }

@media (max-width: 860px) {
  .nav-toggle { display: inline-flex; }
  .nav-links {
    position: fixed;
    inset: 0 0 auto 0;
    top: 64px;
    flex-direction: column;
    align-items: flex-start;
    background: var(--color-surface);
    padding: var(--space-4);
    gap: var(--space-4);
    box-shadow: var(--shadow-lift);
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: transform var(--transition), opacity var(--transition);
  }
  .nav-links.is-open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  .nav-links .btn-primary { width: 100%; justify-content: center; }
}

/* ---------- Hero ----------
   Composición centrada con degradado (dirección de referencia, Phase
   3.6) — antes era un grid de dos columnas con un panel decorativo "RB";
   ahora es un solo bloque centrado, más editorial. */
.hero {
  min-height: 68vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-block: var(--space-8) var(--space-7);
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--color-mint-light) 0%, var(--color-bg) 55%, var(--color-pool-light) 100%);
  z-index: 0;
}

.hero-grid {
  position: relative;
  z-index: 1;
  max-width: 780px;
  margin-inline: auto;
}

.hero-copy .eyebrow { letter-spacing: 0.3em; }
.hero-copy p.lede { margin-top: var(--space-4); max-width: 56ch; margin-inline: auto; }
.hero-copy p.quote { margin-top: var(--space-4); }
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); margin-top: var(--space-5); }
/* Visual uppercase only (CSS text-transform), not literal caps in the
   HTML — keeps the markup/screen-reader text in normal sentence case
   while matching the reference's all-caps CTA treatment. */
.hero-actions .btn { text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.85rem; }

.hero-badges {
  display: flex;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-6);
  flex-wrap: wrap;
}
.hero-badge {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.hero-badge svg { width: 18px; height: 18px; color: var(--color-secondary); flex-shrink: 0; }

/* ---------- Tarjetas genéricas ---------- */
.grid {
  display: grid;
  gap: var(--space-4);
}
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 980px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; }
}

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  transition: box-shadow 0.3s ease-out, transform 0.3s ease-out;
}
.card:hover { box-shadow: var(--shadow-lift); transform: translateY(-5px); }

.icon-tile {
  width: 46px; height: 46px;
  border-radius: var(--radius-sm);
  background: var(--color-secondary-light);
  color: var(--color-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-3);
}
.icon-tile svg { width: 24px; height: 24px; }

.card h3 { margin-bottom: var(--space-2); }
.card p { color: var(--color-text-muted); font-size: 0.95rem; }

/* ---------- Presentación / Sobre Carla ---------- */
.split {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: var(--space-6);
  align-items: center;
}
.split--reverse { grid-template-columns: 1.15fr 0.85fr; }
.split--reverse .split-media { order: 2; }
@media (max-width: 900px) {
  .split, .split--reverse { grid-template-columns: 1fr; }
  .split--reverse .split-media { order: 0; }
}

.avatar-frame {
  aspect-ratio: 1;
  border-radius: var(--radius-lg);
  background: linear-gradient(150deg, var(--color-secondary-light), var(--color-bg-alt));
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
  max-width: 340px;
  margin-inline: auto;
}
.avatar-mono {
  width: 116px; height: 116px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary));
  color: #fff;
  font-family: var(--font-heading);
  font-size: 2.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Cita destacada de Carla (SiteSettings.carla_bio_highlight, Phase 3.7) —
   tratamiento visual propio, separado de los párrafos de la biografía
   principal (.lede y el párrafo suelto de más abajo). */
.bio-highlight {
  margin-top: var(--space-4);
  padding-left: var(--space-4);
  border-left: 3px solid var(--color-pool);
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-style: italic;
  font-weight: 400;
  color: var(--color-pool-dark);
  line-height: 1.5;
}

.placeholder-note {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: var(--space-4);
  padding: 0.5rem 0.9rem;
  border-radius: var(--radius-pill);
  background: var(--color-bg-alt);
  color: var(--color-text-muted);
  font-size: 0.82rem;
  border: 1px dashed var(--color-border);
}

/* ---------- Programas ---------- */
.program-card { position: relative; }
.program-card .tag-soon {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
}

.tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius-pill);
}
.tag-soon { background: var(--color-gold-light); color: var(--color-gold); }
.tag-free { background: var(--color-secondary-light); color: var(--color-secondary); }
.tag-locked { background: #ECE6DE; color: var(--color-locked); }
.tag-demo { background: var(--color-bg-alt); color: var(--color-text-muted); border: 1px dashed var(--color-border); }

/* ---------- Videoteca ---------- */
.video-tabs {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
}
.video-tab {
  padding: 0.55rem 1.1rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  font-size: 0.88rem;
  color: var(--color-text-muted);
  transition: all var(--transition);
}
.video-tab[aria-pressed="true"] {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.video-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}
@media (max-width: 760px) { .video-row { grid-template-columns: 1fr; } }

.video-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.video-frame {
  position: relative;
  background: #1c1512;
  aspect-ratio: 16 / 9;
}
.video-frame.is-vertical { aspect-ratio: 9 / 16; }

.video-frame iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
}

.video-facade {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
  cursor: pointer;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.video-facade::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(30,20,16,0.05), rgba(30,20,16,0.55));
}
.play-btn {
  position: relative;
  z-index: 1;
  width: 60px; height: 60px;
  border-radius: 50%;
  background: rgba(255,255,255,0.92);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--transition), background var(--transition);
}
.video-facade:hover .play-btn { transform: scale(1.08); background: #fff; }
.play-btn svg { width: 22px; height: 22px; margin-left: 3px; }

.video-locked .video-facade { filter: grayscale(0.35) brightness(0.75); }
.video-locked .play-btn { background: rgba(255,255,255,0.85); color: var(--color-locked); }
.lock-chip {
  position: absolute;
  top: var(--space-3); left: var(--space-3);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: rgba(28, 21, 18, 0.72);
  color: #fff;
  font-size: 0.75rem;
  padding: 0.35rem 0.7rem;
  border-radius: var(--radius-pill);
}
.lock-chip svg { width: 13px; height: 13px; }

.video-meta { padding: var(--space-4); }
.video-meta h3 { font-size: 1.02rem; margin-bottom: 0.35rem; }
.video-meta p { font-size: 0.85rem; color: var(--color-text-muted); }

.video-progress {
  margin-top: var(--space-3);
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--color-bg-alt);
  overflow: hidden;
}
.video-progress-bar {
  height: 100%;
  background: var(--color-secondary);
  border-radius: var(--radius-pill);
}

/* ---------- Membresías (Columna Sana, Phase 3.7) ----------
   Tres variantes visuales cicladas por MembershipPlan.visual_variant
   (ver home-dynamic.js), no por índice — a diferencia de las tarjetas de
   Propuestas, cada plan tiene una presentación fija y con sentido
   comercial (estándar / destacado / premium), elegida por Carla desde el
   Admin, no rotada automáticamente. */
.plan-card {
  display: flex;
  flex-direction: column;
  text-align: left;
  position: relative;
}
.plan-card.is-featured {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-lift);
  position: relative;
}
.plan-eyebrow {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--color-text-muted);
  margin-bottom: 0.35rem;
}
.plan-name { font-family: var(--font-heading); font-size: 1.7rem; margin-bottom: var(--space-1); }
.plan-price {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  color: var(--color-primary);
  margin: var(--space-2) 0 var(--space-4);
}
.plan-price small { font-family: var(--font-body); font-size: 0.75rem; color: var(--color-text-muted); display: block; margin-top: 0.2rem; }
.plan-features { margin: var(--space-4) 0; display: flex; flex-direction: column; gap: 0.6rem; }
.plan-features li { display: flex; gap: 0.6rem; font-size: 0.92rem; align-items: flex-start; }
.plan-features svg { width: 16px; height: 16px; color: var(--color-secondary); flex-shrink: 0; margin-top: 3px; }
.plan-card .btn { margin-top: auto; }

/* Etiqueta superpuesta al borde superior (MembershipPlan.badge, ej. "Más
   recomendado") — solo se renderiza si el campo no está vacío. */
.plan-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-pool-dark);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.4rem 1.1rem;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  box-shadow: var(--shadow-soft);
}

/* Variante "destacado": tarjeta menta, usada para el plan más recomendado. */
.plan-card--highlighted {
  background: var(--color-mint-light);
  border: 2px solid var(--color-mint);
}
.plan-card--highlighted .plan-price { color: var(--color-pool-dark); }
.plan-card--highlighted .plan-features svg { color: var(--color-pool-dark); }

/* Variante "premium": tarjeta oscura marrón, para el plan integrador. */
.plan-card--premium {
  background: var(--color-text);
  border-color: var(--color-text);
  color: var(--color-bg);
}
.plan-card--premium .plan-eyebrow { color: var(--color-pool); }
.plan-card--premium .plan-name,
.plan-card--premium .plan-price { color: #fff; }
.plan-card--premium .plan-features li { color: rgba(255,255,255,0.85); }
.plan-card--premium .plan-features svg { color: var(--color-pool); }
.plan-card--premium .btn-primary { background: var(--color-pool); color: var(--color-text); }
.plan-card--premium .btn-primary:hover { background: var(--color-pool-dark); color: #fff; }

/* ---------- Propuestas (Offering — Phase 3.6) ----------
   Grilla de productos de pago único, con un acento de color por tarjeta
   (ciclado en home-dynamic.js) — inspirado en la referencia de Carla,
   pero con datos reales desde /api/offerings/, nunca hardcodeados. */
.offerings-section {
  background: var(--color-text);
  color: var(--color-bg);
}
.offerings-section .section-head .eyebrow { color: var(--color-mint); }
.offerings-section .section-head h2 { color: #fff; }
.offerings-section .section-head p { color: rgba(255,255,255,0.65); }

.offering-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
.offering-card:hover { box-shadow: none; } /* el hover cálido no se lee sobre fondo oscuro */
/* Color base: sin esto, el <h3> cae en la regla global h1-h4 { color:
   var(--color-text) } (marrón oscuro) heredando por encima el fondo
   oscuro de .offerings-section — texto invisible en las tarjetas sin
   acento (índices 0 y 3 del ciclo en home-dynamic.js). Las variantes
   --pool/--earth de abajo sobrescriben este valor explícitamente. */
.offering-name { font-family: var(--font-heading); font-size: 1.7rem; margin-bottom: 0.4rem; color: var(--color-gold-light); }
.offering-card p.lede { font-size: 0.88rem; font-style: italic; opacity: 0.7; margin: 0 0 var(--space-4); color: inherit; }
.offering-price { font-family: var(--font-heading); font-size: 1.5rem; color: #fff; margin-bottom: var(--space-4); }
.offering-actions { display: flex; flex-direction: column; gap: 0.6rem; margin-top: auto; }
.offering-actions a {
  display: block;
  text-align: center;
  padding: 0.9rem 1rem;
  border-radius: var(--radius-pill);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  transition: all var(--transition);
}
.offering-actions .is-primary { background: var(--color-mint); color: var(--color-text); }
.offering-actions .is-primary:hover { background: #fff; }
.offering-actions .is-outline { border: 1px solid var(--color-mint); color: var(--color-mint); }
.offering-actions .is-outline:hover { background: var(--color-mint); color: var(--color-text); }
/* Pago todavía no habilitado (sin payment_url_ars/usd cargado — Fase 4):
   el botón queda visualmente presente pero marcado como no disponible,
   en vez de desaparecer, como pide la referencia. No es un <a>, así que
   no hay href al que apuntar ni click que capturar. */
.offering-actions .is-disabled {
  border: 1px dashed rgba(255,255,255,0.3);
  color: rgba(255,255,255,0.5);
  cursor: default;
}

/* Acentos por tarjeta — ciclados por índice, no por significado fijo. */
.offering-card--pool .offering-name { color: var(--color-pool); }
.offering-card--pool .offering-actions .is-primary { background: var(--color-pool); color: #fff; }
.offering-card--pool .offering-actions .is-outline { border-color: var(--color-pool); color: var(--color-pool); }
.offering-card--pool .offering-actions .is-outline:hover { background: var(--color-pool); color: #fff; }
.offering-card--earth .offering-name { color: var(--color-gold-light); }
.offering-card--earth .offering-actions .is-primary { background: var(--color-gold-light); color: var(--color-text); }
.offering-card--earth .offering-actions .is-outline { border-color: var(--color-gold-light); color: var(--color-gold-light); }
.offering-card--earth .offering-actions .is-outline:hover { background: var(--color-gold-light); color: var(--color-text); }

/* ---------- Reseñas (Testimonial — Phase 3.8) ----------
   Carrusel horizontal con scroll-snap nativo, sin librería externa. Los
   nombres de clase usan el prefijo "testimonial-" a propósito, distinto
   de .testimonial-avatar (círculo de inicial del área de miembras) más
   abajo — mismo prefijo, propósito no relacionado, sin colisión: esa
   clase quedó de la sección de Testimonios retirada en Phase 3.6, esta
   es la nueva sección (con datos reales desde /api/testimonials/). */
.testimonial-track {
  display: flex;
  gap: var(--space-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--space-4);
  padding-bottom: var(--space-3);
  -webkit-overflow-scrolling: touch;
}
.testimonial-track::-webkit-scrollbar { height: 8px; }
.testimonial-track::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: var(--radius-pill); }

/* Ancho fijo por tarjeta (no % del contenido, sino del propio track, que
   conserva el ancho del container gracias a overflow-x: auto) — clamp()
   deja ver ~3 tarjetas completas + un adelanto de la 4ª en desktop, y
   ronda el 82% del viewport en mobile (una tarjeta casi completa +
   adelanto de la siguiente). */
.testimonial-card {
  scroll-snap-align: start;
  flex: 0 0 auto;
  width: clamp(260px, 29%, 340px);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
@media (max-width: 760px) {
  .testimonial-card { width: 82%; }
}

.testimonial-stars {
  display: flex;
  gap: 0.15rem;
  color: var(--color-border);
  font-size: 1.1rem;
  line-height: 1;
}
.testimonial-stars .star--filled { color: var(--color-gold); }

.testimonial-text {
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--color-text-muted);
  flex-grow: 1;
  position: relative;
  max-height: calc(1.55em * 6); /* ~6 líneas — clamp visual, el texto completo
                                   sigue en el DOM (lo necesita el modal) */
  overflow: hidden;
}
/* Solo cuando home-dynamic.js detecta que el texto excede las 6 líneas
   (scrollHeight > clientHeight) agrega este modificador: reseñas cortas
   que ya entran completas no llevan fade ni botón "Leer más". */
.testimonial-text--clamped::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: calc(1.55em * 2); /* difumina ~2 de las 6 líneas */
  /* --color-surface porque .testimonial-card hereda el fondo de .card
     (blanco por defecto) — si la paleta cambia, este fade la sigue. */
  background: linear-gradient(to bottom, transparent, var(--color-surface) 85%);
  pointer-events: none;
}

.testimonial-readmore {
  align-self: flex-start;
  margin-top: calc(var(--space-2) * -1);
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-primary);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.testimonial-readmore:hover,
.testimonial-readmore:focus-visible { text-decoration: underline; }

.testimonial-author {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  color: var(--color-text);
}

/* ---------- Carrusel de reseñas: flechas (desktop) ---------- */
.testimonial-carousel {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.testimonial-carousel .testimonial-track { flex: 1 1 auto; min-width: 0; }

.testimonial-arrow {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-primary);
  font-size: 1.4rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: box-shadow 0.2s ease-out, transform 0.2s ease-out;
}
.testimonial-arrow:hover { box-shadow: var(--shadow-soft); transform: translateY(-2px); }
.testimonial-arrow:disabled { opacity: 0.35; cursor: default; box-shadow: none; transform: none; }
/* El swipe táctil alcanza en mobile/tablet angosto — mismo corte que el
   ancho de tarjeta mobile (.testimonial-card) más arriba. */
@media (max-width: 760px) {
  .testimonial-arrow { display: none; }
}

/* ---------- Modal de reseña completa ---------- */
.testimonial-modal-box { max-width: 480px; text-align: left; }
.testimonial-modal-box .testimonial-stars { justify-content: center; margin-bottom: var(--space-3); }
.testimonial-modal-text {
  color: var(--color-text-muted);
  white-space: pre-line;
  margin-bottom: var(--space-4);
}
.testimonial-modal-box .testimonial-author { text-align: center; }

/* ---------- Podcast ---------- */
.podcast-link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-pool-dark);
}
.podcast-link:hover { text-decoration: underline; }
.podcast-link svg { width: 16px; height: 16px; }

/* ---------- Avatar circular ----------
   .testimonial-avatar quedó con este nombre por su primer uso (la
   sección de Testimonios, retirada en Phase 3.6), pero sigue en uso real
   como el círculo de inicial del área de miembras (dashboard.html,
   accounts templates) — no renombrar sin actualizar esos templates. */
.testimonial-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--color-bg-alt);
  color: var(--color-primary);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading);
  flex-shrink: 0;
}

/* ---------- Contacto ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
}
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }

.field { margin-bottom: var(--space-4); }
.field label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 0.4rem; }
.field input, .field textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
}
.field input:focus, .field textarea:focus { border-color: var(--color-primary); }
.field textarea { min-height: 120px; resize: vertical; }

.form-note {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  margin-top: var(--space-3);
}
/* .form-status reemplaza al .form-success sin usar de fases previas
   (Fase 3.9) — mismo look para el caso de éxito, + una variante de error
   para cuando falla el POST a /api/contacto/ (ver js/main.js). */
.form-status {
  display: none;
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
}
.form-status.is-visible { display: block; }
.form-status--success { background: var(--color-secondary-light); color: var(--color-secondary); }
/* Mismo tratamiento neutro/apagado que .tag-locked (más abajo) para "algo
   no se pudo" — nada de rojo de alarma, consistente con la paleta cálida
   del resto del sitio. */
.form-status--error { background: #ECE6DE; color: var(--color-locked); }

/* Honeypot anti-bot del formulario de contacto (Fase 3.9): oculto para
   quien ve la página (y para lectoras de pantalla, vía aria-hidden en el
   wrapper en index.html), pero sigue presente en el DOM/markup para que
   un bot que completa todos los campos que encuentra caiga en la
   trampa. Patrón "visually-hidden" en vez de display:none — algunos
   scrapers simples ya saltean los campos display:none. */
.field--honeypot {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.contact-info-item {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.contact-info-item .icon-tile { margin-bottom: 0; flex-shrink: 0; }
.contact-info-item h3 { font-size: 0.95rem; margin-bottom: 0.2rem; }
.contact-info-item p { font-size: 0.9rem; color: var(--color-text-muted); }

/* ---------- CTA final ---------- */
.cta-band {
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  color: #fff;
  border-radius: var(--radius-lg);
  padding: var(--space-7) var(--space-6);
  text-align: center;
}
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255,255,255,0.85); margin-top: var(--space-3); }
.cta-band .btn-primary { background: #fff; color: var(--color-primary); margin-top: var(--space-5); }
.cta-band .btn-primary:hover { background: var(--color-bg); }

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--color-border);
  padding-block: var(--space-6) var(--space-4);
  background: var(--color-bg-alt);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--space-5);
  margin-bottom: var(--space-6);
}
@media (max-width: 760px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }

.footer-col h4 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: var(--space-3); color: var(--color-text-muted); }
.footer-col ul { display: flex; flex-direction: column; gap: 0.55rem; }
.footer-col a { font-size: 0.92rem; color: var(--color-text); }
.footer-col a:hover { color: var(--color-primary); }
.footer-brand p { color: var(--color-text-muted); font-size: 0.9rem; margin-top: var(--space-3); max-width: 32ch; }

.footer-legal {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-4);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: 0.78rem;
  color: var(--color-text-muted);
}
.footer-legal .demo-note { max-width: 60ch; }

/* ---------- Badges de plataforma ---------- */
.badge-preview {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: 0.75rem;
  padding: 0.3rem 0.75rem;
  border-radius: var(--radius-pill);
}
.badge-preview svg { width: 13px; height: 13px; color: var(--color-gold); }

/* ---------- Modal (contenido bloqueado) ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(28, 21, 18, 0.55);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: var(--space-4);
}
.modal-overlay.is-open { display: flex; }
.modal-box {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  max-width: 420px;
  width: 100%;
  text-align: center;
  box-shadow: var(--shadow-lift);
  position: relative;
}
.modal-close {
  position: absolute;
  top: var(--space-3); right: var(--space-3);
  width: 34px; height: 34px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--color-border);
}
.modal-box .icon-tile { margin-inline: auto; }
.modal-box p { color: var(--color-text-muted); margin: var(--space-3) 0 var(--space-5); }

/* ---------- Área de miembras ---------- */
.member-header {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}
.member-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-3);
}
.member-user { display: flex; align-items: center; gap: 0.7rem; }
.member-user .testimonial-avatar { width: 44px; height: 44px; }
.member-user .name { font-weight: 600; font-size: 0.95rem; }
.member-user .plan-label { font-size: 0.78rem; color: var(--color-gold); }

.member-hero {
  padding-block: var(--space-6);
}
.member-hero h1 { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); }

.category-tabs {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-5);
}

.login-wrap {
  min-height: calc(100vh - 72px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: var(--space-7);
}
.login-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-7) var(--space-6);
  max-width: 420px;
  width: 100%;
  box-shadow: var(--shadow-soft);
  text-align: center;
}
.login-card .logo { justify-content: center; margin-bottom: var(--space-4); }
.login-card h1 { font-size: 1.6rem; margin-bottom: var(--space-2); }
.login-card > p { color: var(--color-text-muted); margin-bottom: var(--space-5); font-size: 0.92rem; }
.login-form { text-align: left; }
.login-divider {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-block: var(--space-4);
  color: var(--color-text-muted);
  font-size: 0.8rem;
}
.login-divider::before, .login-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-border);
}