/* ═══════════════════════════════════════
   ÍNDICE — busca cualquiera de estos títulos (Ctrl+F) para saltar ahí:
   TOKENS · RESET · UTILIDADES · TIPOGRAFÍA · LAYOUT · BOTONES ·
   HILO DORADO · REVEAL · PROGRESS BAR · NAV · HERO · MARQUEE · INTRO ·
   MÉTODO · ALTER EGO · SOBRE LILI · MENTORIA 1:1 · TESTIMONIOS ·
   LEAD MAGNET · CONTACTO · FOOTER · FLOATING BUTTONS · RESPONSIVE
   Cada bloque de estilos corresponde a la sección con el mismo id/clase
   en index.html (ej. "#contacto" en el HTML ↔ "CONTACTO" aquí).
═══════════════════════════════════════ */

/* ═══════════════════════════════════════
   TOKENS — Reprograma tu Belleza™
   Paleta: Quiet Luxury Femenino
═══════════════════════════════════════ */
:root {
  /* Bases cálidas — NUNCA negro puro */
  --ivory:      #F7F3EE;   /* fondo principal */
  --cream:      #EDE5D8;   /* secciones alternadas */
  --linen:      #E6DDD0;   /* bordes suaves, separadores */
  --parchment:  #F2EDE5;   /* tarjetas, formularios */

  /* Profundidad — oscuros cálidos */
  --cacao:      #3D2B1F;   /* texto principal */
  --moka:       #5C3D2B;   /* texto secundario profundo */
  --topo:       #7A6358;   /* texto muted */
  --mocha-dark: #2A1C12;   /* nav fondo oscuro */

  /* Acentos */
  --champagne:  #C4956A;   /* dorado champagne — CTA, detalles */
  --champagne-lt:#D9B896;  /* dorado claro */
  --terracotta: #8B6147;   /* moka terracota acento */
  --nude:       #D4B5A0;   /* nude rosa — separadores, fondos suaves */
  --nude-pale:  #EAD9CC;   /* nude muy claro */

  /* Tipografías */
  --display:    'Cormorant Garamond', serif;
  --body:       'Montserrat', sans-serif;

  /* Ease */
  --ease:       cubic-bezier(0.25, 0, 0, 1);
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  font-family: var(--body);
  font-weight: 300;
  background: var(--ivory);
  color: var(--cacao);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ── UTILIDADES ── */
/* !important a propósito: .is-hidden es la clase de "ocultar" universal del
   sitio — debe ganar siempre, aunque el elemento tenga otra clase que
   también fije "display" y aparezca más abajo en este archivo (ej.
   .admin-grid { display: grid }, que sin esto ganaba por orden de cascada
   a igual especificidad y dejaba visible un bloque que debía estar oculto). */
.is-hidden { display: none !important; }
/* Honeypot anti-bots (login_hp/reg_hp/etc., ver rtb_is_bot() en
   php/helpers.php): con solo position:absolute + left:-9999px seguía
   teniendo layout, así que el Autofill de Chrome (direcciones/contactos
   guardados) lo rellenaba igualmente aunque estuviera fuera de pantalla —
   el checkeo del honeypot en main.js entonces abortaba el envío del
   formulario en silencio (sin petición de red ni error visible) en
   cualquier navegador con datos de autocompletado guardados, mientras que
   en una ventana de incógnito (sin datos guardados) funcionaba bien.
   display:none sí excluye el campo del Autofill en todos los navegadores,
   y sigue siendo invisible para los bots simples que no interpretan CSS. */
.hp-wrap { position: absolute; left: -9999px; display: none; }
.text-champagne-lt { color: var(--champagne-lt); font-weight: 400; }

/* ── TIPOGRAFÍA ── */
.display-lg {
  font-family: var(--display);
  font-size: clamp(36px, 4.5vw, 64px);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -0.3px;
}
.eyebrow {
  font-family: var(--body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 4px;
  text-transform: uppercase;
  /* --champagne (2.42:1 sobre --ivory) no cumple el contraste mínimo de
     accesibilidad (WCAG AA, 4.5:1) — --terracotta sí (4.88:1) y ya es
     parte de la paleta de marca. Los eyebrows sobre fondo oscuro (cacao)
     tienen su propio override con --champagne-lt, que ahí sí cumple
     (7.19:1) y se queda igual. */
  color: var(--terracotta);
}
.body-lg {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.85;
  color: var(--topo);
}

/* ── LAYOUT ── */
.wrap     { max-width: 1180px; margin: 0 auto; padding: 0 60px; }
.wrap-xs  { max-width: 640px;  margin: 0 auto; padding: 0 60px; }

/* ── BOTONES ──
   .btn es la clase base; se combina con una de color:
   .btn-dark (cacao) · .btn-champagne (dorado) · .btn-outline-dark (borde cacao)
*/
.btn {
  display: inline-block;
  font-family: var(--body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  text-decoration: none;
  /* Sin esto el texto quedaba pegado a la izquierda en cualquier sitio
     donde el botón se estira más ancho que su contenido — ej.
     .ae-cta-group en columna (<=480px), donde flex-direction:column +
     align-items:stretch (por defecto) fuerza al <a> a ocupar todo el
     ancho. */
  text-align: center;
  padding: 16px 36px;
  transition: all 0.4s var(--ease);
  cursor: pointer;
  border: none;
  position: relative;
  overflow: hidden;
}
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.12);
  transform: translateX(-101%);
  transition: transform 0.4s var(--ease);
}
.btn:hover::after { transform: translateX(0); }

.btn-dark {
  background: var(--cacao);
  color: var(--ivory);
}
.btn-dark:hover { background: var(--moka); transform: translateY(-2px); }

.btn-champagne {
  background: var(--champagne);
  color: var(--ivory);
}
.btn-champagne:hover { background: var(--terracotta); transform: translateY(-2px); }

.btn-outline-dark {
  border: 1px solid var(--cacao);
  color: var(--cacao);
  background: transparent;
  padding: 15px 36px;
}
.btn-outline-dark:hover { background: var(--cacao); color: var(--ivory); transform: translateY(-2px); }

/* ── HILO DORADO (firma visual) ── */
.golden-thread {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}
.golden-thread::before,
.golden-thread::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--champagne), transparent);
}
.golden-thread.left::before { max-width: 40px; }
.golden-thread.full::before, .golden-thread.full::after { max-width: none; }

/* ── REVEAL ── */
.rv {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}
.rv.on { opacity: 1; transform: translateY(0); }
.rv-left { opacity: 0; transform: translateX(-24px); transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out); }
.rv-left.on { opacity: 1; transform: translateX(0); }
.rv-right{ opacity: 0; transform: translateX(24px);  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out); }
.rv-right.on { opacity: 1; transform: translateX(0); }
.d1 { transition-delay: 0.08s; }
.d2 { transition-delay: 0.16s; }
.d3 { transition-delay: 0.24s; }
.d4 { transition-delay: 0.32s; }
.d5 { transition-delay: 0.40s; }

/* ── PROGRESS BAR ── */
#progress-bar {
  position: fixed; top: 0; left: 0; right: 0;
  height: 1.5px;
  background: var(--champagne);
  z-index: 999;
  transform-origin: left;
  transform: scaleX(0);
}

/* ════════════════════════════════════════
   NAV
════════════════════════════════════════ */
/* El nav siempre lleva fondo opaco (antes era transparente hasta hacer
   scroll, pensado para "flotar" sobre la foto del hero) — con foto real
   detrás, la mitad del nav quedaba sobre la foto y la otra mitad sobre el
   fondo claro de la sección, dando un contraste desigual y poco legible.
   .scrolled ahora solo controla el padding (nav algo más compacto al bajar). */
#mainNav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 28px 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(247,243,238,0.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 1px 0 var(--linen);
  transition: padding 0.4s, box-shadow 0.4s;
}
#mainNav.scrolled {
  padding: 16px 60px;
}
.nav-logo {
  font-family: var(--display);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 1.5px;
  color: var(--cacao);
  line-height: 1.2;
  text-decoration: none;
  text-transform: uppercase;
}
.nav-logo em { font-style: italic; color: var(--champagne); display: block; font-size: 12px; letter-spacing: 2px; }
.nav-links {
  display: flex;
  gap: 32px;
  list-style: none;
}
.nav-links a {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--moka);
  text-decoration: none;
  position: relative;
  transition: color 0.3s;
}
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -4px; left: 0;
  width: 0; height: 1px;
  background: var(--champagne);
  transition: width 0.4s var(--ease);
}
.nav-links a:hover { color: var(--champagne); }
.nav-links a:hover::after { width: 100%; }
.nav-cta {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ivory);
  background: var(--cacao);
  padding: 12px 24px;
  text-decoration: none;
  transition: background 0.3s, transform 0.3s;
}
.nav-cta:hover { background: var(--champagne); transform: translateY(-1px); }

/* Mobile nav */
.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}
.nav-hamburger span {
  display: block;
  width: 22px; height: 1px;
  background: var(--cacao);
  transition: 0.3s;
}
.mobile-nav {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--ivory);
  z-index: 99;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 32px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s;
}
.mobile-nav.open { opacity: 1; pointer-events: all; }
.mobile-nav a {
  font-family: var(--display);
  font-size: 36px;
  font-weight: 300;
  color: var(--cacao);
  text-decoration: none;
  transition: color 0.3s;
}
.mobile-nav a:hover { color: var(--champagne); }

/* Avatar junto al nombre en el enlace "Mi cuenta" del nav (desktop y móvil). */
.nav-avatar-link { display: inline-flex; align-items: center; gap: 8px; }
.nav-avatar, .nav-avatar-placeholder-sm {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  flex-shrink: 0;
}
.nav-avatar { object-fit: cover; }
.nav-avatar-placeholder-sm {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--linen);
  color: var(--champagne);
  font-family: var(--display);
  font-size: 12px;
  font-style: italic;
}
.mobile-nav .nav-avatar,
.mobile-nav .nav-avatar-placeholder-sm { width: 32px; height: 32px; }
.mobile-nav .nav-avatar-placeholder-sm { font-size: 18px; }

/* Menú "Perfil de usuario / Panel de administración" bajo el avatar del
   nav (solo cuentas admin, ver rtb_construirDropdownPerfil() en main.js). */
.nav-avatar-dropdown {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--ivory);
  border: 1px solid var(--linen);
  box-shadow: 0 8px 24px rgba(61,43,31,0.14);
  padding: 8px;
  min-width: 200px;
}
.nav-avatar-dropdown a {
  display: block;
  padding: 10px 14px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--cacao);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s, color 0.2s;
}
.nav-avatar-dropdown a:hover { background: var(--cream); color: var(--champagne); }
.nav-avatar-dropdown-salir { border-top: 1px solid var(--linen); margin-top: 4px; padding-top: 12px !important; }
.nav-links li:has(.nav-avatar-dropdown) { position: relative; }
.nav-links .nav-avatar-dropdown { position: absolute; top: calc(100% + 14px); right: 0; z-index: 110; }
.mobile-nav .nav-avatar-dropdown { align-items: center; margin-top: -16px; }

/* ════════════════════════════════════════
   HERO
════════════════════════════════════════ */
.hero {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-columns: 55% 45%;
  overflow: clip;
  position: relative;
}
.hero-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 140px 72px 100px 60px;
  background: var(--ivory);
  position: relative;
  z-index: 1;
}
.hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 36px;
}
.hero-eyebrow::before {
  content: '';
  width: 40px; height: 1px;
  background: var(--champagne);
  flex-shrink: 0;
}
.hero-title {
  font-family: var(--display);
  font-size: clamp(44px, 5vw, 80px);
  font-weight: 300;
  line-height: 1.0;
  color: var(--cacao);
  margin-bottom: 12px;
  letter-spacing: -0.5px;
}
.hero-title-italic {
  font-family: var(--display);
  font-size: clamp(44px, 5vw, 80px);
  font-weight: 300;
  font-style: italic;
  line-height: 1.05;
  color: var(--champagne);
  margin-bottom: 36px;
  letter-spacing: -0.5px;
  display: block;
}
.hero-body {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.85;
  color: var(--topo);
  max-width: 420px;
  margin-bottom: 48px;
}
.hero-ctas {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 64px;
}
.hero-quote {
  padding-top: 32px;
  border-top: 1px solid var(--linen);
}
.hero-quote-text {
  font-family: var(--display);
  font-size: 18px;
  font-weight: 300;
  font-style: italic;
  color: var(--champagne);
  line-height: 1.5;
}
.hero-quote-by {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--nude);
  margin-top: 10px;
}
.hero-right {
  position: relative;
  overflow: hidden;
  background: var(--nude);
}
.hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* contain (no cover): la foto se ve siempre entera, sin recortes, sea
     cual sea la proporción de pantalla; el hueco que deja se rellena con
     el fondo de .hero-right y el velo de .hero-photo-bg. */
  object-fit: contain;
}
.hero-photo-bg {
  position: absolute;
  inset: 0;
  /* Velo de color sobre la foto real (mismos tonos que antes de tener foto,
     ahora traslúcidos para dejarla ver). */
  background: linear-gradient(160deg, rgba(234,217,204,0.5) 0%, rgba(237,229,216,0.12) 40%, rgba(230,221,208,0.5) 100%);
}
/* Subtle botanical pattern */
.hero-photo-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 80% at 55% 40%, rgba(196,149,106,0.08) 0%, transparent 70%),
    radial-gradient(ellipse 40% 60% at 80% 80%, rgba(212,181,160,0.15) 0%, transparent 60%);
}
.hero-photo-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 48px 40px;
}
.hero-photo-tag {
  background: rgba(247,243,238,0.92);
  padding: 20px 28px;
  border-left: 2px solid var(--champagne);
  backdrop-filter: blur(8px);
  width: 100%;
  max-width: 280px;
  align-self: flex-start;
}
.hero-photo-tag-label {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--champagne);
  margin-bottom: 6px;
}
.hero-photo-tag-text {
  font-family: var(--display);
  font-size: 17px;
  font-weight: 300;
  color: var(--cacao);
  line-height: 1.3;
}
/* Decorative SVG botanical */
.hero-botanical {
  position: absolute;
  top: 10%; right: 5%;
  width: 160px;
  opacity: 0.18;
}
/* ════════════════════════════════════════
   MARQUEE
════════════════════════════════════════ */
.marquee-strip {
  background: var(--cacao);
  padding: 16px 0;
  overflow: hidden;
}
.marquee-track {
  display: flex;
  gap: 56px;
  width: max-content;
  animation: marquee 35s linear infinite;
}
.marquee-item {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(247,243,238,0.55);
  white-space: nowrap;
  flex-shrink: 0;
}
.marquee-dia {
  width: 4px; height: 4px;
  background: var(--champagne);
  transform: rotate(45deg);
  flex-shrink: 0;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ════════════════════════════════════════
   INTRO / FRASE CENTRAL
════════════════════════════════════════ */
#intro {
  padding: 100px 0;
  background: var(--ivory);
  text-align: center;
}
#intro .wrap-xs { text-align: center; }
.intro-grid {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: 60px;
  align-items: center;
  margin-top: 60px;
}
.intro-divider-v { background: var(--linen); }
.intro-quote-text {
  font-family: var(--display);
  font-size: clamp(28px, 3.5vw, 46px);
  font-weight: 300;
  line-height: 1.2;
  color: var(--cacao);
  text-align: left;
}
.intro-quote-text em { font-style: italic; color: var(--champagne); }
.intro-right { text-align: left; }
.intro-right p {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.9;
  color: var(--topo);
  margin-bottom: 12px;
}
.intro-right p strong { font-weight: 500; color: var(--moka); }

/* ════════════════════════════════════════
   MÉTODO
════════════════════════════════════════ */
#metodo {
  padding: 100px 0;
  background: var(--cream);
}
.metodo-header {
  text-align: center;
  margin-bottom: 80px;
}
.metodo-header h2 { color: var(--cacao); margin-top: 16px; }
.metodo-header .body-lg { max-width: 520px; margin: 16px auto 0; }
.metodo-pillars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--linen);
}
.metodo-pillar {
  background: var(--cream);
  padding: 52px 36px;
  text-align: center;
  transition: background 0.4s, transform 0.4s var(--ease-out);
  position: relative;
  overflow: hidden;
}
.metodo-pillar::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--champagne);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease-out);
}
.metodo-pillar:hover { background: var(--ivory); }
.metodo-pillar:hover::before { transform: scaleX(1); }
.pillar-icon {
  width: 52px; height: 52px;
  border: 1px solid var(--nude);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
  color: var(--mocha-dark);
  transition: border-color 0.3s, background 0.3s;
}
.pillar-icon svg { display: block; }
.metodo-pillar:hover .pillar-icon {
  border-color: var(--champagne);
  background: rgba(196,149,106,0.08);
}
.pillar-name {
  font-family: var(--body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--champagne);
  margin-bottom: 12px;
}
.pillar-desc {
  font-size: 14px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--topo);
}

/* ════════════════════════════════════════
   ALTER EGO — Producto estrella
════════════════════════════════════════ */
#alter-ego {
  padding: 0;
  background: var(--ivory);
  overflow: hidden;
}
.alter-ego-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 680px;
}
.alter-ego-photo {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--nude-pale) 0%, var(--cream) 50%, var(--linen) 100%);
}
.alter-ego-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 70% at 40% 50%, rgba(196,149,106,0.12) 0%, transparent 60%);
}
.alter-ego-botanical {
  position: absolute;
  bottom: 0; left: 0;
  width: 50%;
  opacity: 0.12;
}
/* Elegante pattern en la foto */
.ae-photo-content {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ae-circle {
  width: 260px; height: 260px;
  border-radius: 50%;
  border: 1px solid rgba(196,149,106,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  position: relative;
}
.ae-circle::before {
  content: '';
  position: absolute;
  inset: 12px;
  border-radius: 50%;
  border: 1px solid rgba(196,149,106,0.2);
}
.ae-circle-text {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 500;
  font-style: italic;
  color: var(--mocha-dark);
  text-align: center;
  line-height: 1.3;
}
.ae-circle-sub {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--moka);
}
.alter-ego-content {
  padding: 80px 72px 80px 72px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--cacao);
}
.alter-ego-content .eyebrow { color: var(--champagne-lt); margin-bottom: 16px; }
.alter-ego-content h2 {
  font-family: var(--display);
  font-size: clamp(32px, 3.5vw, 52px);
  font-weight: 300;
  line-height: 1.1;
  color: var(--ivory);
  margin-bottom: 8px;
}
.alter-ego-content h2 em {
  font-style: italic;
  color: var(--champagne-lt);
  display: block;
}
.alter-ego-content p {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.85;
  color: rgba(247,243,238,0.65);
  max-width: 420px;
  margin-bottom: 40px;
  margin-top: 20px;
}
.ae-includes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 44px;
}
.ae-include-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.ae-include-dot {
  width: 5px; height: 5px;
  background: var(--champagne);
  transform: rotate(45deg);
  flex-shrink: 0;
  margin-top: 7px;
}
.ae-include-text {
  font-size: 13px;
  font-weight: 300;
  color: rgba(247,243,238,0.7);
  line-height: 1.5;
}
.ae-cta-group { display: flex; gap: 14px; flex-wrap: wrap; }

/* Disponibilidad real de plazas (ver php/plazas-alter-ego.php) */
.ae-availability { margin-bottom: 20px; }
.ae-availability-bar {
  width: 100%;
  max-width: 320px;
  height: 4px;
  background: rgba(247,243,238,0.15);
  overflow: hidden;
  margin-bottom: 10px;
}
.ae-availability-fill {
  height: 100%;
  width: 0%;
  background: var(--champagne);
  transition: width 0.8s var(--ease-out);
}
.ae-availability-text {
  font-size: 13px;
  font-weight: 500;
  color: var(--champagne);
  letter-spacing: 0.3px;
}
.ae-availability-text strong { color: var(--ivory); font-weight: 600; }
.ae-availability.is-full .ae-availability-fill { background: rgba(247,243,238,0.4); }
.ae-availability.is-full .ae-availability-text { color: rgba(247,243,238,0.7); }

/* Selector de evento (fecha + ciudad), ver php/plazas-alter-ego.php */
.ae-eventos-selector { margin-bottom: 28px; }
.ae-eventos-lista { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.ae-evento-card {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  background: var(--ivory);
  border: 1px solid var(--linen);
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color 0.3s, background 0.3s;
}
.ae-evento-card:hover { border-color: var(--champagne); }
.ae-evento-card.is-selected { border-color: var(--champagne); background: var(--cream); }
.ae-evento-card.is-lleno { opacity: 0.5; cursor: default; }
.ae-evento-card input[type="radio"] { flex-shrink: 0; }
.ae-evento-fecha { font-family: var(--display); font-size: 17px; color: var(--cacao); }
.ae-evento-ciudad { font-size: 13px; color: var(--topo); }
.ae-evento-precio { font-size: 13px; font-weight: 600; color: var(--champagne); margin-left: auto; }
.ae-evento-plazas { font-size: 11px; color: var(--topo); letter-spacing: 0.3px; }
@media (max-width: 480px) {
  .ae-evento-precio { margin-left: 0; }
}

/* ════════════════════════════════════════
   SOBRE LILI
════════════════════════════════════════ */
#lili {
  padding: 100px 0;
  background: var(--parchment);
}
.lili-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.lili-photo-col { position: relative; }
.lili-photo-frame {
  position: relative;
  aspect-ratio: 3/4;
  background: linear-gradient(160deg, var(--nude-pale) 0%, var(--cream) 50%, var(--linen) 100%);
  overflow: hidden;
}
.lili-photo-frame::before {
  content: '';
  position: absolute;
  top: 20px; left: 20px; right: -20px; bottom: -20px;
  border: 1px solid rgba(196,149,106,0.25);
  pointer-events: none;
}
.lili-photo-frame::after {
  content: 'Lili Moral';
  position: absolute;
  bottom: 20px; right: 20px;
  font-family: var(--display);
  font-size: 13px;
  font-style: italic;
  color: var(--champagne);
  letter-spacing: 1px;
}
.lili-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.lili-right .eyebrow { margin-bottom: 16px; }
.lili-right h2 {
  font-family: var(--display);
  font-size: clamp(30px, 3.5vw, 48px);
  font-weight: 300;
  line-height: 1.1;
  color: var(--cacao);
  margin-bottom: 10px;
}
.lili-right h2 em { font-style: italic; color: var(--champagne); }
.lili-body {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.9;
  color: var(--topo);
  margin-bottom: 16px;
}
.lili-quote-block {
  padding: 24px 28px;
  border-left: 2px solid var(--champagne);
  background: rgba(196,149,106,0.06);
  margin: 32px 0;
}
.lili-quote-text {
  font-family: var(--display);
  font-size: 20px;
  font-weight: 300;
  font-style: italic;
  color: var(--moka);
  line-height: 1.5;
}
.lili-credentials {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 40px;
  border-top: 1px solid var(--linen);
}
.lili-cred {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--linen);
}
.lili-cred-dot {
  width: 6px; height: 6px;
  background: var(--champagne);
  transform: rotate(45deg);
  flex-shrink: 0;
}
.lili-cred-text {
  font-size: 13px;
  font-weight: 400;
  color: var(--moka);
}

/* ════════════════════════════════════════
   MENTORIA 1:1
════════════════════════════════════════ */
#mentoria {
  padding: 100px 0;
  background: var(--cream);
}
.mentoria-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.mentoria-left .eyebrow { margin-bottom: 16px; }
.mentoria-left h1,
.mentoria-left h2 {
  font-family: var(--display);
  font-size: clamp(30px, 3.5vw, 48px);
  font-weight: 300;
  line-height: 1.1;
  color: var(--cacao);
  margin-bottom: 24px;
}
.mentoria-left p {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.9;
  color: var(--topo);
  margin-bottom: 16px;
}
.mentoria-pillars {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 32px 0 40px;
  border-top: 1px solid var(--linen);
}
.mentoria-item {
  display: flex;
  gap: 18px;
  padding: 18px 0;
  border-bottom: 1px solid var(--linen);
  transition: background 0.3s;
}
.mentoria-item:hover { background: rgba(196,149,106,0.04); }
.mentoria-item-num {
  font-family: var(--display);
  font-size: 28px;
  font-weight: 300;
  color: rgba(196,149,106,0.3);
  line-height: 1;
  flex-shrink: 0;
  width: 36px;
}
.mentoria-item-title {
  font-family: var(--body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--moka);
  margin-bottom: 4px;
}
.mentoria-item-desc {
  font-size: 13px;
  font-weight: 300;
  color: var(--topo);
  line-height: 1.6;
}
.mentoria-right {
  background: var(--ivory);
  padding: 56px;
  border-top: 2px solid var(--champagne);
  position: relative;
}
.mentoria-coming-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--champagne);
  background: rgba(196,149,106,0.1);
  padding: 6px 14px;
  margin-bottom: 24px;
  border: 1px solid rgba(196,149,106,0.2);
}
.mentoria-right h2,
.mentoria-right h3 {
  font-family: var(--display);
  font-size: 28px;
  font-weight: 300;
  color: var(--cacao);
  line-height: 1.2;
  margin-bottom: 16px;
}
.mentoria-right p {
  font-size: 14px;
  font-weight: 300;
  line-height: 1.85;
  color: var(--topo);
  margin-bottom: 32px;
}
.mentoria-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 36px;
}
.mentoria-list-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.mentoria-list-item::before {
  content: '◆';
  font-size: 8px;
  color: var(--champagne);
  margin-top: 5px;
  flex-shrink: 0;
}
.mentoria-list-item span {
  font-size: 14px;
  font-weight: 300;
  color: var(--topo);
  line-height: 1.5;
}
.mentoria-nota {
  font-size: 12px;
  color: var(--nude);
  font-style: italic;
  margin-top: 12px;
  text-align: center;
}

/* ════════════════════════════════════════
   TESTIMONIOS (preparado para futuro)
════════════════════════════════════════ */
#testimonios {
  padding: 100px 0;
  background: var(--ivory);
  text-align: center;
}
.testimonios-intro { max-width: 560px; margin: 0 auto 72px; }
.testimonios-intro h2 { margin-top: 14px; color: var(--cacao); }
.testimonios-intro p { font-size: 15px; font-weight: 300; line-height: 1.85; color: var(--topo); margin-top: 16px; }
.test-coming-msg {
  background: rgba(196,149,106,0.06);
  border: 1px solid rgba(196,149,106,0.2);
  padding: 48px 56px;
  max-width: 680px;
  margin: 0 auto 60px;
}
.test-coming-icon {
  font-family: var(--display);
  font-size: 48px;
  font-weight: 300;
  font-style: italic;
  color: var(--champagne-lt);
  line-height: 1;
  margin-bottom: 16px;
}
.test-coming-text {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 300;
  font-style: italic;
  color: var(--moka);
  line-height: 1.5;
  margin-bottom: 10px;
}
.test-coming-sub {
  font-size: 13px;
  font-weight: 300;
  color: var(--topo);
  line-height: 1.7;
}
/* Future testimonial cards — ready for real ones */
.test-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 56px;
}
.test-card {
  background: var(--cream);
  padding: 40px;
  text-align: left;
  border-bottom: 2px solid transparent;
  transition: border-color 0.4s, transform 0.4s var(--ease-out), box-shadow 0.4s;
  position: relative;
}
.test-card:hover {
  border-bottom-color: var(--champagne);
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(196,149,106,0.12);
}
.test-card::before {
  content: '\201C';
  font-family: var(--display);
  font-size: 80px;
  font-weight: 300;
  color: var(--champagne);
  opacity: 0.15;
  position: absolute;
  top: 16px; left: 28px;
  line-height: 1;
  pointer-events: none;
}
.test-text {
  font-family: var(--display);
  font-size: 18px;
  font-weight: 300;
  font-style: italic;
  color: var(--moka);
  line-height: 1.6;
  margin-bottom: 24px;
}
.test-author { display: flex; align-items: center; gap: 14px; }
.test-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--champagne), var(--terracotta));
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display);
  font-size: 16px;
  color: var(--ivory);
  flex-shrink: 0;
}
.test-name { font-size: 13px; font-weight: 500; color: var(--cacao); }
.test-desc { font-size: 11px; color: var(--champagne); margin-top: 2px; }

/* ════════════════════════════════════════
   LEAD MAGNET
════════════════════════════════════════ */
#lead-magnet {
  padding: 100px 0;
  background: var(--cacao);
  position: relative;
  overflow: hidden;
}
#lead-magnet::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 50% 60% at 20% 50%, rgba(196,149,106,0.12) 0%, transparent 60%),
    radial-gradient(ellipse 40% 50% at 80% 50%, rgba(196,149,106,0.08) 0%, transparent 60%);
  pointer-events: none;
}
.lead-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.lead-left .eyebrow { color: var(--champagne-lt); margin-bottom: 16px; }
.lead-left h2 {
  font-family: var(--display);
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 300;
  line-height: 1.1;
  color: var(--ivory);
  margin-bottom: 20px;
}
.lead-left h2 em { font-style: italic; color: var(--champagne-lt); }
.lead-left p {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.9;
  color: rgba(247,243,238,0.6);
  margin-bottom: 40px;
}
.lead-guia-preview {
  background: linear-gradient(135deg, var(--nude-pale), var(--cream));
  padding: 48px 40px;
  text-align: center;
  position: relative;
}
.lead-guia-num {
  font-size: 80px;
  font-weight: 700;
  color: rgba(196,149,106,0.15);
  font-family: var(--display);
  line-height: 1;
  margin-bottom: 8px;
}
.lead-guia-title {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 400;
  color: var(--cacao);
  line-height: 1.3;
  margin-bottom: 4px;
}
.lead-guia-sub {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--champagne);
  margin-top: 8px;
}
.lead-form {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.lead-form-row {
  display: flex;
  gap: 0;
}
.lead-input {
  flex: 1;
  background: rgba(247,243,238,0.08);
  border: 1px solid rgba(196,149,106,0.3);
  border-right: none;
  color: var(--ivory);
  font-family: var(--body);
  font-size: 13px;
  font-weight: 300;
  padding: 16px 20px;
  outline: none;
  transition: border-color 0.3s, background 0.3s;
}
.lead-input:focus { border-color: var(--champagne); background: rgba(196,149,106,0.1); }
.lead-input::placeholder { color: rgba(247,243,238,0.35); }
.lead-input.err { border-color: #C0392B; }
.lead-submit {
  background: var(--champagne);
  color: var(--ivory);
  border: none;
  font-family: var(--body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 16px 24px;
  cursor: pointer;
  transition: background 0.3s;
  white-space: nowrap;
}
.lead-submit:hover { background: var(--terracotta); }
.lead-gdpr {
  font-size: 11px;
  font-weight: 300;
  color: rgba(247,243,238,0.35);
  margin-top: 12px;
  line-height: 1.5;
}
.lead-gdpr a { color: var(--champagne-lt); }
.lead-error { display: none; font-size: 12px; color: #E8A398; margin-top: 10px; line-height: 1.5; }
.lead-error.show { display: block; }
.lead-error a { color: var(--champagne-lt); }
.lead-success {
  display: none;
  text-align: center;
  padding: 32px;
}
.lead-success.show { display: block; }
.lead-success-icon {
  font-family: var(--display);
  font-size: 40px;
  font-style: italic;
  color: var(--champagne-lt);
  margin-bottom: 12px;
}
.lead-success-text {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 300;
  color: var(--ivory);
  margin-bottom: 8px;
}
.lead-success-sub {
  font-size: 13px;
  font-weight: 300;
  color: rgba(247,243,238,0.55);
}

/* ════════════════════════════════════════
   CONTACTO
════════════════════════════════════════ */
#contacto {
  padding: 100px 0;
  background: var(--parchment);
}
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 80px;
  align-items: start;
}
.contact-left .eyebrow { margin-bottom: 16px; }
.contact-left h2 {
  font-family: var(--display);
  font-size: clamp(28px, 3vw, 44px);
  font-weight: 300;
  line-height: 1.15;
  color: var(--cacao);
  margin-bottom: 20px;
}
.contact-left p {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.9;
  color: var(--topo);
  margin-bottom: 40px;
}
.contact-details {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 40px;
}
.cd-item { display: flex; gap: 16px; align-items: flex-start; }
.cd-icon {
  width: 40px; height: 40px;
  border: 1px solid var(--linen);
  display: flex; align-items: center; justify-content: center;
  color: var(--champagne); font-size: 14px;
  flex-shrink: 0;
  transition: border-color 0.3s, background 0.3s;
}
.cd-item:hover .cd-icon { border-color: var(--champagne); background: rgba(196,149,106,0.06); }
.cd-label { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--nude); margin-bottom: 3px; }
.cd-value { font-size: 14px; font-weight: 400; color: var(--moka); }
.contact-instagram {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  background: rgba(196,149,106,0.06);
  border: 1px solid var(--linen);
  transition: border-color 0.3s, background 0.3s;
  text-decoration: none;
}
.contact-instagram:hover { border-color: var(--champagne); background: rgba(196,149,106,0.1); }
.contact-instagram-icon { font-size: 20px; }
.contact-instagram-text { font-size: 13px; font-weight: 400; color: var(--moka); }
.contact-instagram-handle { font-size: 13px; color: var(--champagne); }

/* Nota de confidencialidad */
.contact-note {
  margin-top: 32px;
  padding: 20px 22px;
  background: rgba(196,149,106,0.06);
  border-left: 2px solid var(--champagne);
}
.contact-note p {
  font-size: 13px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--topo);
}
.contact-note strong {
  font-weight: 500;
  color: var(--champagne);
}

/* Form */
.contact-form-wrap {
  background: var(--ivory);
  padding: 52px;
  border-top: 2px solid var(--champagne);
}
.f-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.f-group { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; }
/* --nude (1.74:1 sobre --ivory) no cumple el contraste mínimo de
   accesibilidad (WCAG AA, 4.5:1) para texto — --topo sí (5.06:1) y ya
   significa "texto muted" en la paleta, así que se reutiliza aquí en vez
   de inventar un tono nuevo. Cambio acotado a esta clase a propósito: el
   resto de la paleta (incl. otros usos de --nude fuera de formularios)
   se queda igual. */
.f-label { font-size: 10px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; color: var(--topo); }
.f-input, .f-textarea, .f-select {
  background: var(--ivory);
  border: 1px solid var(--linen);
  color: var(--cacao);
  font-family: var(--body);
  font-size: 14px;
  font-weight: 300;
  padding: 13px 16px;
  outline: none;
  width: 100%;
  transition: border-color 0.3s;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
}
.f-input:focus, .f-textarea:focus, .f-select:focus { border-color: var(--champagne); }
.f-input::placeholder, .f-textarea::placeholder { color: rgba(90,60,40,0.2); }
.f-input.err, .f-textarea.err { border-color: #C0392B; }
.f-textarea { resize: vertical; min-height: 110px; }
.f-err { font-size: 11px; color: #C0392B; margin-top: 2px; display: none; }
.f-err.show { display: block; }
.f-hint { font-size: 11px; color: var(--topo); margin-top: 4px; }
.f-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23C4956A' stroke-width='1.2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
  cursor: pointer;
}
.f-select option { background: var(--ivory); color: var(--cacao); }

/* Campo de teléfono con prefijo de país (bandera + "+código"), ver
   rtb_mejorarCampoTelefono() en main.js. */
.f-tel-row { display: flex; gap: 10px; }
.f-tel-prefijo { flex: 0 0 auto; width: auto; max-width: 130px; padding-right: 30px; }
.f-tel-row .f-input { flex: 1 1 auto; min-width: 0; }
@media (max-width: 480px) {
  .f-tel-prefijo { max-width: 105px; font-size: 12px; padding-left: 10px; padding-right: 26px; }
}
.gdpr-row { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 22px; }
.gdpr-box { width: 15px; height: 15px; accent-color: var(--champagne); cursor: pointer; flex-shrink: 0; margin-top: 3px; }
.gdpr-txt { font-size: 12px; font-weight: 300; line-height: 1.6; color: var(--topo); }
.gdpr-txt a { color: var(--champagne); }
.f-err-gdpr { font-size: 11px; color: #C0392B; display: none; margin-bottom: 12px; }
.f-err-gdpr.show { display: block; }
.form-error { font-size: 12px; color: #C0392B; display: none; margin-bottom: 14px; line-height: 1.6; }
.form-error.show { display: block; }
.form-error a { color: var(--champagne); }
.f-submit {
  width: 100%;
  font-family: var(--body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--ivory);
  background: var(--cacao);
  border: none;
  padding: 18px;
  cursor: pointer;
  transition: background 0.3s, transform 0.3s;
}
.f-submit:hover { background: var(--champagne); transform: translateY(-2px); }
.form-success { display: none; text-align: center; padding: 48px 20px; }
.form-success.show { display: block; }
.form-success-sym { font-family: var(--display); font-size: 44px; font-style: italic; color: var(--champagne); margin-bottom: 16px; }
.form-success-title { font-family: var(--display); font-size: 26px; font-weight: 300; color: var(--cacao); margin-bottom: 10px; }
.form-success-sub { font-size: 14px; font-weight: 300; color: var(--topo); }
.account-support-note { font-size: 12px; color: var(--topo); margin-top: 24px; }
.account-support-note a { color: var(--champagne); }
.account-forgot-link { text-align: center; margin-top: 14px; }
.link-btn {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--body);
  font-size: 12px;
  color: var(--champagne);
  text-decoration: underline;
  cursor: pointer;
}
.link-btn:hover { color: var(--cacao); }

/* ════════════════════════════════════════
   FOOTER
════════════════════════════════════════ */
footer {
  background: var(--mocha-dark);
  padding: 72px 0 36px;
}
.footer-top {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 56px;
  padding-bottom: 56px;
  border-bottom: 1px solid rgba(196,149,106,0.12);
  margin-bottom: 32px;
}
.footer-logo {
  font-family: var(--display);
  font-size: 17px;
  font-weight: 400;
  letter-spacing: 1.5px;
  color: var(--ivory);
  text-transform: uppercase;
  line-height: 1.3;
  margin-bottom: 6px;
}
.footer-logo em { font-style: italic; color: var(--champagne); display: block; font-size: 13px; }
.footer-tagline {
  font-size: 13px;
  font-weight: 300;
  line-height: 1.7;
  color: rgba(247,243,238,0.4);
  max-width: 200px;
  margin-top: 12px;
}
.footer-social {
  display: flex;
  gap: 10px;
  margin-top: 24px;
}
.footer-social-link {
  width: 36px; height: 36px;
  border: 1px solid rgba(196,149,106,0.2);
  display: flex; align-items: center; justify-content: center;
  color: rgba(247,243,238,0.5);
  text-decoration: none;
  font-size: 14px;
  transition: border-color 0.3s, color 0.3s;
}
.footer-social-link:hover { border-color: var(--champagne); color: var(--champagne); }
.footer-col-title {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--champagne);
  margin-bottom: 20px;
}
.footer-links { display: flex; flex-direction: column; gap: 10px; }
.footer-links a {
  font-size: 13px;
  font-weight: 300;
  color: rgba(247,243,238,0.45);
  text-decoration: none;
  transition: color 0.3s;
}
.footer-links a:hover { color: var(--champagne); }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.footer-copy { font-size: 11px; font-weight: 300; color: rgba(247,243,238,0.2); }
.footer-legal { display: flex; gap: 20px; }
.footer-legal a { font-size: 11px; font-weight: 300; color: rgba(247,243,238,0.2); text-decoration: none; transition: color 0.3s; }
.footer-legal a:hover { color: var(--champagne); }

/* ════════════════════════════════════════
   FLOATING BUTTONS
════════════════════════════════════════ */
.float-wrap {
  position: fixed;
  bottom: 32px; right: 32px;
  display: flex; flex-direction: column; gap: 10px;
  z-index: 200;
}
.float-btn {
  width: 50px; height: 50px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  text-decoration: none;
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s;
}
.float-btn:hover { transform: scale(1.1) translateY(-2px); }
.float-ig {
  background: linear-gradient(135deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
  box-shadow: 0 4px 18px rgba(220,39,67,0.35);
}
.float-wa {
  background: #25D366;
  box-shadow: 0 4px 18px rgba(37,211,102,0.35);
  animation: waBounce 3.5s ease-in-out infinite;
}
.float-btn svg { width: 22px; height: 22px; fill: white; }
@keyframes waBounce {
  0%,100% { box-shadow: 0 4px 18px rgba(37,211,102,0.35); }
  50% { box-shadow: 0 4px 28px rgba(37,211,102,0.6), 0 0 0 6px rgba(37,211,102,0.1); }
}
#backTop {
  position: fixed;
  bottom: 32px; left: 32px;
  width: 44px; height: 44px;
  border: 1px solid var(--linen);
  background: var(--ivory);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 200;
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.4s, transform 0.4s, background 0.3s, border-color 0.3s;
  pointer-events: none;
}
#backTop.show { opacity: 1; transform: translateY(0); pointer-events: all; }
#backTop:hover { background: var(--champagne); border-color: var(--champagne); }
#backTop:hover svg { stroke: white; }
#backTop svg { width: 18px; height: 18px; fill: none; stroke: var(--champagne); stroke-width: 1.5; stroke-linecap: round; }

/* ════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════ */
@media (max-width: 1024px) {
  .wrap { padding: 0 40px; }
  #mainNav { padding: 20px 40px; }
  #mainNav.scrolled { padding: 14px 40px; }
  .hero { grid-template-columns: 1fr; }
  /* aspect-ratio 3/4 = proporción real de assets/img/hero.jpg (1086x1448):
     con object-fit:contain esto deja el contenedor con la misma forma que
     la foto, así no queda margen vacío a los lados ni se recorta nada. */
  .hero-right { aspect-ratio: 3 / 4; min-height: 0; }
  .intro-grid { grid-template-columns: 1fr; gap: 40px; }
  .intro-divider-v { display: none; }
  .metodo-pillars { grid-template-columns: 1fr 1fr; }
  .alter-ego-grid { grid-template-columns: 1fr; }
  .alter-ego-photo { min-height: 400px; }
  .lili-grid { grid-template-columns: 1fr; gap: 48px; }
  .mentoria-layout { grid-template-columns: 1fr; gap: 48px; }
  .lead-grid { grid-template-columns: 1fr; gap: 48px; }
  .contact-layout { grid-template-columns: 1fr; gap: 48px; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 40px; }
  .test-grid { grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width: 768px) {
  #mainNav { padding: 18px 24px; }
  #mainNav.scrolled { padding: 14px 24px; }
  .nav-links, .nav-cta { display: none; }
  .nav-hamburger { display: flex; }
  .mobile-nav { display: flex; }
  .wrap, .wrap-xs { padding: 0 24px; }
  #intro, #metodo, #lili, #mentoria, #testimonios, #lead-magnet, #contacto { padding: 72px 0; }
  .hero-left { padding: 110px 24px 60px; }
  .hero-title { font-size: clamp(40px, 10vw, 60px); }
  .hero-ctas { flex-direction: column; }
  .hero-ctas a, .hero-ctas button { text-align: center; }
  /* Cartel más compacto en móvil. */
  .hero-photo-placeholder { padding: 28px 20px; }
  .hero-photo-tag { max-width: 200px; padding: 14px 18px; }
  .hero-photo-tag-text { font-size: 14px; }
  .metodo-pillars { grid-template-columns: 1fr; }
  .alter-ego-content { padding: 56px 32px; }
  .ae-includes { grid-template-columns: 1fr; }
  .contact-form-wrap { padding: 32px 24px; }
  .f-row { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; gap: 12px; text-align: center; }
  .float-wrap { bottom: 20px; right: 20px; }
  #backTop { bottom: 20px; left: 20px; }
  .mentoria-right { padding: 36px 24px; }
  .lead-form-row { flex-direction: column; }
  .lead-input { border-right: 1px solid rgba(196,149,106,0.3); }
}
@media (max-width: 480px) {
  .ae-cta-group { flex-direction: column; }
  .footer-legal { flex-wrap: wrap; justify-content: center; gap: 12px; }
}

/* ── ACCESIBILIDAD: usuarios con reduce-motion ── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rv, .rv-left, .rv-right,
  .float-wa, .marquee-track {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ════════════════════════════════════════
   PÁGINA LEGAL (política de privacidad, etc.)
   Página independiente y sencilla: cabecera mínima + prosa + pie mínimo,
   reutilizando tokens de color/tipografía en vez del nav/footer completos.
════════════════════════════════════════ */

/* Espacio reservado bajo el #mainNav (position:fixed) cuando se reutiliza
   en páginas de detalle sin hero propio que ya traiga su padding-top (el
   hero de index.html no lo necesita porque ya tiene el suyo). Altura
   medida con el nav real -no colapsado- en desktop/móvil. */
.nav-spacer { height: 110px; }
@media (max-width: 768px) { .nav-spacer { height: 90px; } }

.legal-back {
  font-family: var(--body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--moka);
  text-decoration: none;
  transition: color 0.3s;
}
.legal-back:hover { color: var(--champagne); }
.legal-hero {
  padding: 88px 24px 64px;
  text-align: center;
  background: linear-gradient(180deg, var(--cream) 0%, var(--ivory) 100%);
}
.legal-hero .golden-thread { justify-content: center; max-width: 260px; margin: 0 auto 24px; }
.legal-hero .eyebrow { display: block; margin-bottom: 4px; }
.legal-hero h1 {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(36px, 6vw, 56px);
  color: var(--cacao);
  line-height: 1.15;
}
.legal-updated {
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--champagne);
  margin-top: 16px;
}
.legal-intro {
  max-width: 640px;
  margin: 0 auto 64px;
  padding: 0 24px;
  font-size: 17px;
  font-weight: 300;
  line-height: 1.85;
  color: var(--moka);
  text-align: center;
}
.legal-content {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 24px 100px;
}
.legal-section {
  display: flex;
  gap: 28px;
  padding: 44px 0;
  border-top: 1px solid var(--linen);
}
.legal-section:first-child { border-top: none; padding-top: 0; }
.legal-section-num {
  flex-shrink: 0;
  width: 48px;
  font-family: var(--display);
  font-size: 34px;
  font-weight: 300;
  line-height: 1;
  color: rgba(196,149,106,0.32);
}
.legal-section-body { flex: 1; min-width: 0; }
.legal-content h2 {
  font-family: var(--display);
  font-weight: 500;
  font-size: 23px;
  color: var(--cacao);
  margin: 0 0 16px;
}
.legal-content p, .legal-content li {
  font-size: 15px;
  line-height: 1.85;
  color: var(--topo);
  margin-bottom: 14px;
}
.legal-content ul { list-style: none; padding-left: 4px; margin-bottom: 14px; }
.legal-content li { position: relative; padding-left: 20px; }
.legal-content li::before {
  content: '◆';
  position: absolute;
  left: 0;
  top: 1px;
  font-size: 8px;
  color: var(--champagne);
}
.legal-content strong { color: var(--cacao); font-weight: 500; }
.legal-content a { color: var(--champagne); text-decoration-color: rgba(196,149,106,0.4); }
.legal-content a:hover { color: var(--terracotta); }
.legal-footer {
  background: var(--mocha-dark);
  padding: 48px 24px;
  text-align: center;
}
.legal-footer-logo {
  font-family: var(--display);
  font-size: 15px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ivory);
  margin-bottom: 12px;
}
.legal-footer-logo em { font-style: italic; color: var(--champagne); }
.legal-footer p {
  font-size: 12px;
  color: rgba(247,243,238,0.45);
  margin-bottom: 20px;
}
.legal-footer-social { display: flex; justify-content: center; gap: 10px; margin-bottom: 20px; }
.legal-footer .legal-back { color: rgba(247,243,238,0.7); }
.legal-footer .legal-back:hover { color: var(--champagne); }
.legal-footer-credit { margin-top: 16px; margin-bottom: 0; font-size: 11px; color: rgba(247,243,238,0.25); }
.legal-footer-credit a { color: rgba(247,243,238,0.4); text-decoration: none; transition: color 0.3s; }
.legal-footer-credit a:hover { color: var(--champagne); }
@media (max-width: 768px) {
  .legal-hero { padding: 64px 24px 48px; }
  .legal-section { gap: 16px; padding: 32px 0; }
  .legal-section-num { width: 34px; font-size: 26px; }
}

/* Páginas de detalle de servicio (Crea tu Alter Ego, Mentoría 1:1):
   reutilizan .legal-content/.legal-section para los apartados y añaden
   estas dos secciones de página completa. */
.alter-ego-content h1 { font-family: var(--display); font-weight: 300; font-size: clamp(30px, 4vw, 44px); color: var(--ivory); line-height: 1.15; margin-bottom: 20px; }
.detail-section { padding: 88px 0 24px; text-align: center; }
.reservar-section { padding: 88px 0 100px; background: var(--parchment); }
.reservar-section .golden-thread { justify-content: center; }

/* Página "historia completa" de Lili: foto centrada y contenida (reutiliza
   el marco decorativo de .lili-photo-frame, pero sin el grid a 2 columnas). */
.story-photo-wrap { max-width: 320px; margin: 0 auto 56px; }
.legal-content p.story-lead { font-size: 18px; color: var(--cacao); font-family: var(--display); font-style: italic; line-height: 1.6; }

/* Selector de horario de la Mentoría 1:1 (/mentoria-1-1/) */
.mt-horarios { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 8px; }
.mt-horario-btn {
  font-family: var(--body);
  font-size: 13px;
  font-weight: 500;
  padding: 12px;
  border: 1px solid rgba(196,149,106,0.4);
  background: transparent;
  color: var(--cacao);
  cursor: pointer;
  transition: all 0.3s;
}
.mt-horario-btn:hover:not(:disabled) { background: rgba(196,149,106,0.1); }
.mt-horario-btn.is-selected { background: var(--champagne); color: var(--ivory); border-color: var(--champagne); }
.mt-horario-btn:disabled { opacity: 0.35; cursor: not-allowed; text-decoration: line-through; }
.mt-precio-tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--champagne);
  background: rgba(196,149,106,0.12);
  padding: 6px 14px;
  margin-bottom: 16px;
}

/* Instrucciones de pago por Bizum (Alter Ego y Mentoría 1:1). Fase de pago
   manual: no hay pasarela automatizada, así que estos pasos + el check de
   confirmación son lo que reemplaza al "checkout". */
.bizum-box {
  background: var(--cream);
  border: 1px solid rgba(196,149,106,0.35);
  padding: 28px 26px;
  margin-bottom: 32px;
}
.ae-login-required {
  background: var(--cream);
  border: 1px solid rgba(196,149,106,0.35);
  padding: 36px 26px;
  margin-bottom: 32px;
  text-align: center;
}
.ae-login-required p { color: var(--cacao); margin-bottom: 20px; }
.bizum-box-title {
  font-family: var(--body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--champagne);
  margin-bottom: 16px;
}
.bizum-box-steps { list-style: none; counter-reset: bizum-step; padding: 0; margin: 0; }
.bizum-box-steps li {
  counter-increment: bizum-step;
  position: relative;
  padding-left: 36px;
  margin-bottom: 14px;
  font-size: 14px;
  color: var(--cacao);
  line-height: 1.6;
}
.bizum-box-steps li:last-child { margin-bottom: 0; }
.bizum-box-steps li::before {
  content: counter(bizum-step);
  position: absolute;
  left: 0;
  top: 0;
  width: 22px;
  height: 22px;
  border: 1px solid var(--champagne);
  color: var(--champagne);
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bizum-box strong { color: var(--terracotta); }
.bizum-phone {
  display: inline-block;
  font-family: var(--body);
  font-weight: 600;
  font-size: 16px;
  color: var(--cacao);
  background: var(--ivory);
  padding: 4px 10px;
  border: 1px solid rgba(196,149,106,0.4);
  letter-spacing: 0.5px;
  white-space: nowrap;
}
.bizum-concept {
  display: inline-block;
  font-family: var(--body);
  font-style: italic;
  color: var(--moka);
  background: var(--ivory);
  padding: 2px 8px;
  border: 1px dashed rgba(196,149,106,0.5);
}

/* Input de archivo (comprobante de pago) y radios de modalidad, en la
   misma línea visual que el resto de campos del formulario (Mentoría y
   Alter Ego). */
.f-file {
  width: 100%;
  font-family: var(--body);
  font-size: 13px;
  font-weight: 300;
  color: var(--topo);
  background: var(--ivory);
  border: 1px solid var(--linen);
  padding: 11px 14px;
}
.f-file::file-selector-button {
  font-family: var(--body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ivory);
  background: var(--champagne);
  border: none;
  padding: 8px 14px;
  margin-right: 14px;
  cursor: pointer;
  transition: background 0.3s;
}
.f-file::file-selector-button:hover { background: var(--terracotta); }

.f-radio-group { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.f-radio-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 300;
  color: var(--cacao);
  cursor: pointer;
}
.f-radio-item input[type="radio"] { accent-color: var(--champagne); cursor: pointer; width: 15px; height: 15px; }

/* Página /cuenta/: pestañas Iniciar sesión / Crear cuenta, y el bloque de
   "ya conectado" reutiliza .form-success (mismo patrón que los demás
   formularios del sitio). */
.account-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 32px;
  border-bottom: 1px solid var(--linen);
}
.account-tab {
  font-family: var(--body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--topo);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 0 4px 14px;
  margin-bottom: -1px;
  cursor: pointer;
  transition: color 0.3s, border-color 0.3s;
}
.account-tab:hover { color: var(--champagne); }
.account-tab.is-active { color: var(--cacao); border-bottom-color: var(--champagne); }
#cuentaLoggedIn .btn { margin-top: 8px; }

/* ════════════════════════════════════════
   REELS (sección #reels en index.html)
   Tarjetas que enlazan al Reel real en Instagram — sin reproductor
   embebido, misma línea que el resto de tarjetas del sitio (testimonios).
════════════════════════════════════════ */
#reels { padding: 100px 0; background: var(--cream); text-align: center; }
.reels-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 56px;
}
.reel-card {
  display: block;
  position: relative;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  background: var(--linen);
  text-decoration: none;
}
.reel-card-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s var(--ease-out); }
.reel-card:hover .reel-card-img { transform: scale(1.05); }
.reel-card-title {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 24px 16px 16px;
  background: linear-gradient(0deg, rgba(45,30,20,0.85) 0%, rgba(45,30,20,0) 100%);
  color: var(--ivory);
  font-family: var(--body);
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  line-height: 1.4;
}
@media (max-width: 1024px) {
  .reels-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  #reels { padding: 72px 0; }
  .reels-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 40px; }
}

.section-gap-lg { margin-top: 64px; }

/* ════════════════════════════════════════
   GESTIÓN DE REELS (/cuenta/, solo visible si esAdmin)
════════════════════════════════════════ */
.admin-reels-list { display: flex; flex-direction: column; gap: 16px; margin-top: 32px; }
.admin-reel-item {
  display: flex;
  flex-direction: column;
  background: var(--ivory);
  border: 1px solid var(--linen);
  padding: 12px 16px;
}
.admin-reel-item-view { display: flex; align-items: center; gap: 16px; }
.admin-reel-item-img { width: 56px; height: 56px; object-fit: cover; flex-shrink: 0; }
.admin-reel-item-info { flex: 1; min-width: 0; font-size: 14px; color: var(--cacao); }
.admin-reel-item-info a { color: var(--champagne); font-size: 12px; }
.admin-reel-item-fecha { font-size: 11px; color: var(--topo); }
.admin-reel-item-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.admin-reel-item-move {
  width: 30px;
  height: 30px;
  border: 1px solid var(--linen);
  background: var(--ivory);
  color: var(--cacao);
  font-size: 11px;
  cursor: pointer;
  transition: background 0.3s, border-color 0.3s;
}
.admin-reel-item-move:hover:not(:disabled) { background: var(--linen); border-color: var(--champagne); }
.admin-reel-item-move:disabled { opacity: 0.3; cursor: default; }
.admin-reel-item-edit {
  font-family: var(--body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--champagne);
  background: none;
  border: 1px solid var(--champagne);
  padding: 8px 14px;
  cursor: pointer;
  transition: background 0.3s, color 0.3s;
  flex-shrink: 0;
}
.admin-reel-item-edit:hover { background: var(--champagne); color: var(--ivory); }
.admin-reel-item-confirm {
  font-family: var(--body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ivory);
  background: var(--cacao);
  border: 1px solid var(--cacao);
  padding: 8px 14px;
  cursor: pointer;
  transition: background 0.3s, border-color 0.3s;
  flex-shrink: 0;
}
.admin-reel-item-confirm:hover:not(:disabled) { background: var(--champagne); border-color: var(--champagne); }
.admin-reel-item-confirm:disabled { opacity: 0.5; cursor: default; }
.admin-reel-item-del {
  font-family: var(--body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #C0392B;
  background: none;
  border: 1px solid #C0392B;
  padding: 8px 14px;
  cursor: pointer;
  transition: background 0.3s, color 0.3s;
  flex-shrink: 0;
}
.admin-reel-item-del:hover { background: #C0392B; color: var(--ivory); }
.admin-reel-item-edit-form { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--linen); }
.admin-reel-edit-buttons { display: flex; flex-wrap: wrap; gap: 12px; }
.admin-reel-edit-buttons .f-submit { flex: 2 1 220px; white-space: nowrap; }
.admin-reel-edit-buttons .btn-outline-dark { flex: 1 1 160px; }
@media (max-width: 560px) {
  .admin-reel-item-view { flex-wrap: wrap; }
  .admin-reel-item-actions { width: 100%; justify-content: flex-end; }
}

/* ════════════════════════════════════════
   MIS RESERVAS (/cuenta/, historial de clienta)
════════════════════════════════════════ */
.reservas-calendario { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 24px; }
.reservas-cal-mes { background: var(--ivory); border: 1px solid var(--linen); padding: 14px 10px; }
.reservas-cal-titulo {
  font-family: var(--body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--champagne);
  text-align: center;
  margin-bottom: 10px;
}
.reservas-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.reservas-cal-cab { font-size: 9px; font-weight: 600; color: var(--topo); text-align: center; padding: 2px 0; }
.reservas-cal-dia { font-size: 11px; color: var(--cacao); text-align: center; padding: 4px 0; }
.reservas-cal-dia.tiene-evento {
  font-weight: 700;
  color: var(--ivory);
  background: var(--champagne);
  border-radius: 50%;
}
@media (max-width: 560px) {
  .reservas-calendario { grid-template-columns: 1fr; gap: 20px; }
}
.reservas-list { display: flex; flex-direction: column; gap: 12px; margin-top: 32px; }
.reserva-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--ivory);
  border: 1px solid var(--linen);
  padding: 14px 16px;
}
.reserva-item strong {
  font-family: var(--body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--champagne);
}
.reserva-detalle { font-size: 14px; color: var(--cacao); }
.reserva-estado-pago {
  display: inline-block;
  align-self: flex-start;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 3px 8px;
  margin-top: 2px;
  border: 1px solid var(--terracotta);
  color: var(--terracotta);
}
.reserva-estado-pago.is-confirmado { border-color: #4C7A50; color: #4C7A50; }
.reserva-item-actions { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 10px; }
.reserva-reprogramar-btn {
  font-family: var(--body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--champagne);
  background: none;
  border: 1px solid var(--champagne);
  padding: 7px 14px;
  cursor: pointer;
  transition: background 0.3s, color 0.3s;
}
.reserva-reprogramar-btn:hover { background: var(--champagne); color: var(--ivory); }
.reserva-cancelar-btn {
  font-family: var(--body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #C0392B;
  background: none;
  border: 1px solid #C0392B;
  padding: 7px 14px;
  cursor: pointer;
  transition: background 0.3s, color 0.3s;
}
.reserva-cancelar-btn:hover:not(:disabled) { background: #C0392B; color: var(--ivory); }
.reserva-cancelar-btn:disabled { opacity: 0.5; cursor: default; }
.reserva-reprogramar-form { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--linen); display: flex; flex-direction: column; gap: 12px; }
.reserva-reprogramar-msg { font-size: 12px; min-height: 14px; }
.reserva-reprogramar-msg.is-error { color: #C0392B; }

/* ════════════════════════════════════════
   GESTIÓN DE MASTERCLASS Y MENTORÍA (/cuenta/, solo visible si esAdmin)
════════════════════════════════════════ */
.mtcfg-dias { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.mtcfg-dia-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--cacao);
  background: var(--ivory);
  border: 1px solid var(--linen);
  padding: 8px 12px;
  cursor: pointer;
}
.mtcfg-dia-item:has(input:checked) { border-color: var(--champagne); background: var(--cream); }

/* ════════════════════════════════════════
   SELECTOR "PERFIL DE USUARIO / PANEL DE ADMINISTRACIÓN" (/cuenta/, solo
   cuentas admin) — alterna entre #cuentaPanelUsuario y #cuentaPanelAdmin,
   ver rtb_actualizarSelectorPerfil() en main.js.
════════════════════════════════════════ */
.cuenta-panel-switch {
  display: flex;
  justify-content: center;
  gap: 8px;
  max-width: 640px;
  margin: 0 auto 48px;
  padding: 0 60px;
}
.cuenta-panel-tab {
  font-family: var(--body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--topo);
  background: none;
  border: 1px solid var(--linen);
  padding: 12px 22px;
  cursor: pointer;
  transition: background 0.3s, color 0.3s, border-color 0.3s;
}
.cuenta-panel-tab:hover { border-color: var(--champagne); color: var(--champagne); }
.cuenta-panel-tab.is-active { background: var(--cacao); border-color: var(--cacao); color: var(--ivory); }
@media (max-width: 480px) {
  .cuenta-panel-switch { flex-direction: column; padding: 0 24px; }
}

/* ════════════════════════════════════════
   PANEL DE ADMINISTRACIÓN — grid de 3 columnas (/cuenta/)
   Las 5 secciones de gestión (Reels, Masterclass, Mentoría, Histórico,
   Blog) son tarjetas .contact-form-wrap dentro de este grid, en vez de
   apilarse en una sola columna estrecha. Dentro de una tarjeta de este
   grid nunca hay sitio para un f-row a dos columnas ni para dos botones
   de acción en línea sin desbordar (aunque la ventana sea muy ancha, la
   tarjeta en sí no lo es) — por eso esas reglas van sin media query,
   siempre activas dentro de .admin-grid.
════════════════════════════════════════ */
.wrap.admin-grid {
  /* Más ancho que el .wrap normal (1180px, pensado para el contenido
     editorial del resto del sitio) — el panel de administración necesita
     más espacio horizontal: 3 tarjetas por fila y una tabla del histórico
     con 10 columnas (incluida "Acciones", con edición inline) no caben
     cómodas en un ancho menor. */
  max-width: 1920px;
}
.admin-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  align-items: start;
  padding-top: 24px;
  padding-bottom: 100px;
}
/* Sin min-width:0 una tarjeta con contenido intrínsecamente ancho (la
   tabla de 9 columnas del Histórico, la toolbar del editor RTE...) fuerza
   la pista del grid a expandirse más allá del viewport — el bug clásico
   de CSS Grid que rompía el panel en móvil, porque el overflow-x:auto de
   .historial-tabla-wrap nunca llegaba a activarse. */
.admin-grid > .contact-form-wrap { min-width: 0; }
.admin-grid .contact-form-wrap { padding: 32px 28px; }
.admin-grid .f-row { grid-template-columns: 1fr; }
.admin-grid .admin-reel-item-view { flex-wrap: wrap; }
.admin-grid .admin-reel-item-actions { width: 100%; justify-content: flex-end; }
/* El Histórico contable y la Gestión del Blog son bloques con tablas y
   formularios largos — necesitan más ancho que 1/3 de columna, así que
   ocupan la fila completa del grid. */
.admin-grid .historial-card,
.admin-grid .admin-full-width { grid-column: 1 / -1; }
@media (max-width: 980px) {
  .admin-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .admin-grid { grid-template-columns: 1fr; gap: 24px; }
  .admin-grid .contact-form-wrap { padding: 28px 20px; }
}

/* ════════════════════════════════════════
   DIFERENCIACIÓN DE SECCIONES DEL PANEL ADMIN (/cuenta/)
   Cada bloque de gestión usa un tono distinto de la paleta de marca (fondo
   suave, borde superior, eyebrow y línea dorada) para distinguirlos de un
   vistazo. Los fondos son el mismo acento de cada sección a muy baja
   opacidad sobre --ivory, para mantener la estética "quiet luxury" (nada
   de colores planos ni saturados) y que el texto (siempre --cacao/--moka)
   se siga leyendo perfectamente.
════════════════════════════════════════ */
#reelsAdminWrap { background: rgba(196,149,106,0.08); }

#masterclassAdminWrap { background: rgba(139,97,71,0.08); border-top-color: var(--terracotta); }
#masterclassAdminWrap .eyebrow { color: var(--terracotta); }
#masterclassAdminWrap .golden-thread::before,
#masterclassAdminWrap .golden-thread::after { background: linear-gradient(90deg, transparent, var(--terracotta), transparent); }

#mentoriaAdminWrap { background: rgba(61,43,31,0.06); border-top-color: var(--cacao); }
#mentoriaAdminWrap .eyebrow { color: var(--cacao); }
#mentoriaAdminWrap .golden-thread::before,
#mentoriaAdminWrap .golden-thread::after { background: linear-gradient(90deg, transparent, var(--cacao), transparent); }

#historialAdminWrap { background: rgba(42,28,18,0.05); border-top-color: var(--mocha-dark); }
#historialAdminWrap .eyebrow { color: var(--mocha-dark); }
#historialAdminWrap .golden-thread::before,
#historialAdminWrap .golden-thread::after { background: linear-gradient(90deg, transparent, var(--mocha-dark), transparent); }

/* ════════════════════════════════════════
   TIPOGRAFÍA MÁS GRANDE EN EL PANEL ADMIN (/cuenta/, solo dentro de
   .admin-grid) — el resto del sitio (formularios públicos, "Mis
   reservas"/"Mis datos") mantiene su tamaño normal.
════════════════════════════════════════ */
.admin-grid .eyebrow { font-size: 15px; font-weight: 700; letter-spacing: 1px; }
.admin-grid .f-label { font-size: 12px; }
.admin-grid .f-input,
.admin-grid .f-textarea,
.admin-grid .f-select { font-size: 15px; }
.admin-grid .f-hint,
.admin-grid .f-err,
.admin-grid .gdpr-txt { font-size: 12px; }
.admin-grid .legal-updated { font-size: 14px; }
.admin-grid .reserva-detalle,
.admin-grid .admin-reel-item-info { font-size: 15px; }
.admin-grid .admin-reel-item-edit,
.admin-grid .admin-reel-item-confirm,
.admin-grid .admin-reel-item-del { font-size: 12px; }
.admin-grid .mtcfg-dia-item { font-size: 14px; }
.admin-grid .historial-tabla { font-size: 14px; }
.admin-grid .historial-tabla th { font-size: 11px; }

/* ════════════════════════════════════════
   TABLA DEL HISTÓRICO CONTABLE (/cuenta/, admin)
════════════════════════════════════════ */
.historial-toolbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; }
.historial-toolbar .legal-updated { margin: 0; }
.historial-tabla-wrap { overflow-x: auto; }
.historial-tabla { width: 100%; border-collapse: collapse; font-size: 13px; }
.historial-tabla th {
  text-align: left;
  font-family: var(--body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--mocha-dark);
  background: var(--cream);
  padding: 10px 12px;
  white-space: nowrap;
  border-bottom: 2px solid var(--mocha-dark);
}
.historial-tabla td { padding: 10px 12px; border-bottom: 1px solid var(--linen); color: var(--cacao); white-space: nowrap; }
.historial-tabla tbody tr:hover { background: var(--cream); }
.historial-tabla tfoot td {
  padding: 10px 12px;
  font-weight: 600;
  background: var(--cream);
  border-top: 2px solid var(--mocha-dark);
  color: var(--mocha-dark);
  white-space: nowrap;
}
.historial-tabla tfoot tr.historial-total-general td { background: var(--mocha-dark); color: var(--ivory); }
/* Edición inline de un movimiento (botón "Editar" en cada fila) — inputs
   compactos para no romper el ancho de la tabla, la propia
   .historial-tabla-wrap ya resuelve el desbordamiento con scroll. */
.historial-edit-input {
  width: 100%;
  min-width: 70px;
  padding: 4px 6px;
  font-family: var(--body);
  font-size: 12px;
  color: var(--cacao);
  background: var(--ivory);
  border: 1px solid var(--nude);
}
.historial-edit-acciones { display: flex; gap: 6px; white-space: nowrap; }

/* Contador simple (descargas de la guía / suscriptores del Blog) — más
   discreto que .historial-resumen-total a propósito, porque ese está
   pensado como cierre visual del bloque contable, no para reutilizarse
   aquí. */
.admin-stat-total { font-family: var(--display); font-size: 20px; color: var(--terracotta); margin: 0 0 16px; }
.admin-stat-total strong { color: var(--mocha-dark); }

/* Resumen agregado (Alter Ego + Mentoría), a propósito después de las dos
   tablas y su "TOTAL RECAUDADO" — es el cierre visual del bloque contable,
   por eso destaca más que cualquier fila de las tablas. */
.historial-resumen-total {
  margin: 24px 0 0;
  padding: 18px 24px;
  background: var(--mocha-dark);
  color: var(--ivory);
  font-family: var(--display);
  font-size: 22px;
  font-weight: 600;
  text-align: center;
}
@media (max-width: 560px) {
  .historial-resumen-total { font-size: 17px; padding: 14px 16px; }
}

/* ════════════════════════════════════════
   MIS DATOS (/cuenta/, perfil de clienta)
════════════════════════════════════════ */
.form-success-inline {
  font-size: 13px;
  color: #4C7A50;
  text-align: center;
  margin-bottom: 14px;
}
.profile-avatar-row {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 32px;
}
.profile-avatar,
.profile-avatar-placeholder {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  flex-shrink: 0;
}
.profile-avatar { object-fit: cover; }
.profile-avatar-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--linen);
  color: var(--champagne);
  font-family: var(--display);
  font-size: 32px;
  font-style: italic;
}
.profile-avatar-upload { flex: 1; min-width: 0; }
.profile-avatar[hidden],
.profile-avatar-placeholder[hidden] { display: none; }
@media (max-width: 480px) {
  .profile-avatar-row { gap: 16px; }
  .profile-avatar, .profile-avatar-placeholder { width: 64px; height: 64px; }
}

/* ════════════════════════════════════════
   BLOG (público — blog/index.php, blog/articulo.php)
════════════════════════════════════════ */
.blog-list-wrap { max-width: 1100px; margin: 0 auto; padding: 0 24px 100px; }
.blog-list-vacio { text-align: center; padding: 40px 24px 60px; }
.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 32px; }
.blog-card {
  display: flex;
  flex-direction: column;
  background: var(--ivory);
  border: 1px solid var(--linen);
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
.blog-card:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(61, 43, 31, 0.1); }
/* La tarjeta entera era un único <a> — se dividió en .blog-card-link (solo
   la imagen+texto, para que siga siendo "toda la tarjeta clicable" al
   artículo) y .blog-card-share como hermano, aparte, porque un <a> con
   botones de compartir dentro de otro <a> es HTML inválido y el navegador
   rompe la estructura del enlace. */
.blog-card-link { display: flex; flex-direction: column; flex: 1; text-decoration: none; color: inherit; }
.blog-card-img { width: 100%; aspect-ratio: 16/10; overflow: hidden; background: var(--cream); }
/* contain (no cover): la imagen destacada se ve siempre entera, sin
   recortar la cara — mismo criterio que .hero-photo. El hueco que deja
   se rellena con el fondo --cream del contenedor. */
.blog-card-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.blog-card-img-fallback {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-style: italic; font-size: 40px;
  color: var(--champagne);
}
.blog-card-body { padding: 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.blog-card-categoria { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--moka); font-weight: 500; }
.blog-card-titulo { font-family: var(--display); font-size: 22px; font-weight: 500; color: var(--cacao); line-height: 1.25; }
.blog-card-extracto { font-size: 14px; line-height: 1.7; color: var(--topo); flex: 1; }
.blog-card-fecha { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--champagne); margin-top: auto; }

.blog-card-share { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 0 24px 22px; }
.blog-share-label { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--topo); margin-right: 2px; }
/* Botones circulares solo-icono (antes eran cajas con borde + texto en
   mayúsculas, muy pesadas visualmente) — el nombre de cada red va en
   title/aria-label (tooltip nativo al pasar el ratón + lectores de
   pantalla), no como texto visible. Cada red hace hover con su color de
   marca; "Copiar enlace" usa --champagne (acento del sitio) al no tener
   color de marca propio. */
.blog-share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: var(--moka);
  background: var(--cream);
  border: none;
  cursor: pointer;
  transition: transform 0.2s var(--ease-out), background 0.2s, color 0.2s;
}
.blog-share-btn svg { width: 15px; height: 15px; flex-shrink: 0; }
.blog-share-btn:hover { transform: translateY(-2px); color: var(--ivory); }
.blog-share-btn.is-whatsapp:hover { background: #25D366; }
.blog-share-btn.is-facebook:hover { background: #1877F2; }
.blog-share-btn.is-x:hover { background: #000; }
.blog-share-copy:hover { background: var(--champagne); }
.blog-article-share {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 36px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--linen);
}

.blog-article-hero h1 { max-width: 760px; margin: 0 auto; }
.blog-article-img { margin-bottom: 40px; background: var(--cream); }
/* contain (no cover): igual que .blog-card-img, la foto se ve siempre
   entera, sin recortar la cara. */
.blog-article-img img { width: 100%; height: auto; max-height: 480px; object-fit: contain; display: block; margin: 0 auto; }
.blog-article-body h2 { font-family: var(--display); font-weight: 500; font-size: 23px; color: var(--cacao); margin: 32px 0 16px; }
.blog-article-body h3 { font-family: var(--display); font-weight: 500; font-size: 20px; color: var(--cacao); margin: 28px 0 14px; }
.blog-article-body h4 { font-family: var(--body); font-weight: 600; font-size: 14px; letter-spacing: 1px; text-transform: uppercase; color: var(--moka); margin: 24px 0 12px; }
.blog-article-body p { font-size: 16px; line-height: 1.9; color: var(--topo); margin-bottom: 18px; }
.blog-article-body ul, .blog-article-body ol { padding-left: 22px; margin-bottom: 18px; color: var(--topo); }
.blog-article-body li { font-size: 16px; line-height: 1.85; margin-bottom: 8px; }
.blog-article-body strong { color: var(--cacao); font-weight: 500; }
.blog-article-body a { color: var(--champagne); text-decoration-color: rgba(196,149,106,0.4); }
.blog-article-body a:hover { color: var(--terracotta); }
.blog-article-body blockquote {
  border-left: 2px solid var(--champagne);
  padding: 4px 0 4px 20px;
  margin: 28px 0;
  font-family: var(--display);
  font-style: italic;
  font-size: 19px;
  color: var(--cacao);
}
.blog-article-cta {
  background: var(--parchment);
  border-top: 2px solid var(--champagne);
  padding: 44px 36px;
  margin: 48px 0 32px;
  text-align: center;
}
.blog-article-cta h2 { font-family: var(--display); font-weight: 300; font-size: clamp(24px, 3vw, 34px); color: var(--cacao); margin: 8px 0 14px; }
.blog-article-cta p { max-width: 480px; margin: 0 auto 24px; }
.blog-article-cta-btns { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.blog-article-back { text-align: center; margin-top: 24px; }
.blog-newsletter { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--linen); }
.blog-newsletter-titulo { font-size: 13px; font-weight: 600; color: var(--cacao); margin-bottom: 14px; text-align: center; }
.blog-newsletter-row { display: flex; gap: 10px; margin-bottom: 6px; }
.blog-newsletter-row .f-input { flex: 1; }
.blog-newsletter-row .btn { flex-shrink: 0; padding: 0 26px; white-space: nowrap; }
.blog-newsletter .gdpr-row { margin-top: 12px; }
.blog-newsletter .gdpr-txt { font-size: 11px; }
@media (max-width: 480px) {
  .blog-newsletter-row { flex-direction: column; }
  .blog-newsletter-row .btn { padding: 16px; }
}
@media (max-width: 640px) {
  .blog-grid { grid-template-columns: 1fr; }
  .blog-article-cta { padding: 32px 20px; }
}

/* ════════════════════════════════════════
   GESTIÓN DEL BLOG (/cuenta/, solo visible si esAdmin)
   Editor de texto enriquecido casero (contenteditable + execCommand) — sin
   dependencias externas, coherente con "no build tools" del proyecto. El
   HTML que produce se sanea en el servidor (rtb_sanitizar_html_articulo)
   antes de guardarse.
════════════════════════════════════════ */
#blogAdminWrap { background: rgba(92,61,43,0.07); border-top-color: var(--moka); }
#blogAdminWrap .eyebrow { color: var(--moka); }
#blogAdminWrap .golden-thread::before,
#blogAdminWrap .golden-thread::after { background: linear-gradient(90deg, transparent, var(--moka), transparent); }

.rte-toolbar { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px; background: var(--cream); border: 1px solid var(--linen); border-bottom: none; }
.rte-btn {
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  background: var(--ivory);
  border: 1px solid var(--linen);
  color: var(--cacao);
  font-family: var(--body);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.rte-btn:hover { background: var(--champagne); color: var(--ivory); border-color: var(--champagne); }
.rte-btn.is-active { background: var(--cacao); color: var(--ivory); border-color: var(--cacao); }
.rte-editor {
  min-height: 220px;
  max-height: 480px;
  overflow-y: auto;
  padding: 16px;
  background: var(--ivory);
  border: 1px solid var(--linen);
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.75;
  color: var(--cacao);
}
.rte-editor:focus { outline: 2px solid var(--champagne); outline-offset: -2px; }
.rte-editor h2, .rte-editor h3, .rte-editor h4 { font-family: var(--display); color: var(--cacao); margin: 14px 0 8px; }
.rte-editor p { margin-bottom: 10px; }
.rte-editor ul, .rte-editor ol { padding-left: 24px; margin-bottom: 10px; }
.rte-editor blockquote { border-left: 2px solid var(--champagne); padding-left: 16px; font-style: italic; color: var(--moka); margin: 12px 0; }
.rte-editor a { color: var(--champagne); }
.rte-editor:empty::before { content: attr(data-placeholder); color: var(--topo); opacity: 0.6; }
.rte-contador { margin: 6px 0 0; font-size: 12px; color: var(--topo); text-align: right; }
.rte-contador.is-excedido { color: #C0392B; font-weight: 600; }

.blog-admin-estado {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 3px 8px;
  margin-left: 8px;
  border: 1px solid var(--champagne);
  color: var(--champagne);
}
.blog-admin-estado.is-publicado { border-color: #4C7A50; color: #4C7A50; }