/* ==========================================================================
   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::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); }

/* Botón de cuenta ("Ingresar" / "Mi cuenta" — ver home-dynamic.js). Vive
   fuera de .nav-links para seguir visible en celular sin abrir el menú.
   Misma tipografía que la nav (mayúsculas, tracking) pero en pastilla
   btn-primary con ícono, un poco más grande que el btn-sm anterior, para
   que se lea como LA acción de la barra y no como un ítem más. */
.nav-account {
  padding: 0.7rem 1.35rem;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.nav-account svg { flex-shrink: 0; }

.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-right { gap: var(--space-3); }
  .nav-account { padding: 0.6rem 1rem; font-size: 0.75rem; letter-spacing: 0.08em; }
}

/* En pantallas angostas no entran logo + texto + hamburguesa: queda solo
   el ícono de persona. El texto pasa a visually-hidden (no display:none)
   para que el botón conserve su nombre accesible. */
@media (max-width: 480px) {
  .nav-account { padding: 0.6rem; }
  .nav-account-label {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
  }
}

/* ---------- 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;
}
/* With Carla's photo (SiteSettings.carla_photo): a 4:5 portrait frame.
   object-fit: cover fills it from any upload without distortion; the
   focal point sits a little above centre, where a portrait's face is. */
.avatar-frame--photo {
  aspect-ratio: 4 / 5;
  overflow: hidden;
}
.avatar-frame--photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
}
@media (max-width: 900px) {
  .avatar-frame--photo { max-width: 280px; }
}
.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); }
/* Póster propio de un video bloqueado (Video.poster, servido desde /media/
   con un nombre al azar — nunca la miniatura de YouTube, que lleva el ID
   del video en la URL). Atenuado igual que .video-facade bloqueado; el
   chip y el candado (z-index 2 y 1) quedan por encima. */
.video-poster {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  filter: grayscale(0.35) brightness(0.75);
}
.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;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-4);
  padding-block: var(--space-3);
}
/* Franja de cuenta compacta: avatar + plan a la izquierda, "Editar perfil"
   contra el borde derecho, a todo ancho en cualquier pantalla. (El logo
   ya está en el header del sitio y el saludo en "Tu espacio" — no se
   repiten acá.) Un nombre de plan largo hace wrap en vez de empujar el
   botón afuera de la pantalla. */
.member-user { display: flex; align-items: center; gap: 0.7rem; min-width: 0; flex: 1 1 100%; }
.member-user > div { min-width: 0; }
.member-user .testimonial-avatar { width: 44px; height: 44px; }
.member-user .btn { margin-left: auto; flex-shrink: 0; }
.member-user .plan-label { font-size: 0.78rem; color: var(--color-gold); overflow-wrap: anywhere; }

.member-hero {
  padding-block: var(--space-6);
}

/* Llamado a pasarse al plan anual dentro de la tarjeta de membresía del
   panel: un recuadro suave (celeste de la paleta) con su botón, para que
   se vea sin gritar. Solo aparece si la miembra puede hacer el cambio. */
.upgrade-callout {
  margin-top: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--color-pool-light);
}
.upgrade-callout .upgrade-callout-title { font-weight: 600; color: var(--color-pool-dark); }
.upgrade-callout p { font-size: 0.9rem; }
.upgrade-callout p + p { margin-top: 0.35rem; color: var(--color-text); }
.upgrade-callout .btn { margin-top: 0.75rem; }
.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);
}