/* ============================================
   PREVIEW v2 — Rediseño visual completo
   Carga DESPUÉS de ../styles.css. Solo afecta las
   secciones marcadas -quiet/-v2 — el resto del sitio
   (Qué incluye, footer, etc.) permanece igual.
   ============================================ */

.preview-banner {
  position: sticky;
  top: 0;
  z-index: 999;
  background: #D4AF37;
  color: #000;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-align: center;
  padding: 7px 12px;
}

/* Header: se quitó el logo pequeño de la esquina — ya duplicaba (y
   saturaba) el logo grande del hero, justo debajo. Con un solo
   elemento (el botón de WhatsApp) el encabezado se alinea al borde
   derecho en vez de repartirse en dos puntas. */
.header-inner-quiet { justify-content: flex-end; }

/* ============ MODERNIZACIÓN GLOBAL (dentro de esta vista previa) ============
   Tipo Apple: negro plano, sin ningún glow/text-shadow, sin rombos.
   Estas reglas no son -quiet/-scoped a propósito: sustituyen, en toda
   la página, dos elementos que se repetían igual en cada sección
   (la pleca con rombo, y el bullet-diamante), y apagan el glow de los
   títulos — nada de esto cambia texto ni estructura, solo el trazo. */
.h-cinzel,
.hero-title {
  text-shadow: none !important;
}
.icon-wa { filter: none; }

/* Tipografía: el mismo par usado en preview-alt — Fraunces (serif
   editorial con carácter, incluye itálicas expresivas) para títulos e
   Inter para todo el cuerpo, en vez de una sola familia sans para
   todo. Como son variables, este cambio actualiza automáticamente
   cada título, subtítulo, cita y número de la página sin tocar cada
   regla por separado. El toque "premium" ahora lo da también la
   tipografía, no solo el dorado y el logo. */
:root {
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  /* Igualar TODO el negro: el sitio original alternaba #000000 puro
     (hero, problema, CTA final, footer) con #0a0806 (valor, método,
     incluye, sede) — un negro café muy sutil que, al lado del negro
     puro, se leía como si esas secciones tuvieran una luz encendida
     de fondo. Un solo punto de cambio para que todo el sitio sea el
     mismo negro. */
  --bg-alt: #000000;
}
/* Títulos: color sólido, no degradado dorado de relleno. El degradado
   (--heading-gradient) fue pensado para brillar CON el glow que ya se
   quitó — sin él, el texto se ve apagado/lavado, y además repetir el
   mismo relleno dorado en cada título de la página es justo el tipo
   de "dorado por todas partes" que se pidió evitar. Un ivory sólido
   y cálido, a máximo contraste sobre negro puro, lee más nítido, más
   vivo y más premium que un degradado sin brillo; el dorado sigue
   presente, pero solo como acento (pleca, números, comillas), nunca
   como el color del texto. */
.h-cinzel,
.hero-title {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: currentColor;
  color: var(--ivory);
}
.h-cinzel {
  font-weight: 600;
  font-optical-sizing: auto;
  letter-spacing: -0.005em;
}
.hero-title {
  font-weight: 600;
  font-optical-sizing: auto;
  letter-spacing: -0.005em;
}
.metodo-scene h3,
.feature-card h3 {
  letter-spacing: -0.005em;
}

/* Subtítulo/kicker de sección — retomado tal cual de preview-alt: una
   línea corta, en mayúsculas, con tracking amplio, en el acento vivo
   (carmín aquí, ember allá) justo encima del título. Da jerarquía sin
   agregar otro tamaño de texto nuevo al sistema. */
.kicker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--carmine);
  margin: 0 0 14px;
}
.kicker svg { width: 14px; height: 14px; color: #1877F2; flex-shrink: 0; }
.kicker.center { justify-content: center; }

/* Pleca moderna: una barra corta y sólida, sin rombo y sin degradado
   que se desvanece — reutiliza el mismo marcado (span, i, span) sin
   tocar el HTML de cada sección. */
.divider span { display: none; }
.divider i {
  width: 36px;
  height: 2px;
  background: var(--gold-body);
  border-radius: 1px;
  transform: none;
  box-shadow: none;
}

/* Bullet moderno: un punto sólido en vez del rombo girado. */
.mini-diamond {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  transform: none;
  box-shadow: none;
  background: var(--gold-body);
}

/* ============ Haz de escenario — indicador de progreso de scroll ============
   Reemplaza al micrófono viajero. Una línea vertical muy fina en el
   borde izquierdo que se "ilumina" de arriba hacia abajo conforme
   avanzas por la página — como si el reflector del escenario te
   siguiera. Dorado en general; se vuelve un rojo carmín muy sutil
   solo al llegar al CTA final, como una señal discreta de urgencia. */
.scroll-beam {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: rgba(212, 175, 55, 0.12);
  z-index: 300;
  pointer-events: none;
}
.scroll-beam-fill {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 0%;
  background: var(--gold-body);
  transition: background-color 0.6s ease;
}
.scroll-beam-fill.near-cta { background: var(--carmine); }
@media (max-width: 600px) {
  .scroll-beam { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-beam-fill { transition: none; }
}

/* ============ HERO — casi silencio ============ */
.hero-quiet { background: #000; }
.hero-quiet .hero-stage,
.hero-quiet .stage-floor,
.hero-quiet .spotlight { display: none; }

/* retired per feedback: no lit background even as an interactive touch
   — the hero is now flat black, full stop. Element kept inert in the
   DOM/JS (harmless) so nothing else needs to change. */
.hero-spotlight { display: none; }

.hero-quiet .hero-content { position: relative; z-index: 1; }

/* ---------- Apertura: solo el logo, sin reflectores ni atmósfera ----------
   Sin haz, sin video, sin luz de ningún tipo — el logo aparece solo,
   poco a poco, con un efecto dinámico propio (se materializa: entra
   desenfocado y pequeño, gana foco y tamaño a la vez). Nada es
   visible al cargar (todo el contenido del hero arranca en
   opacity:0, incluida la pleca). */
.hero-quiet { position: relative; }
.hero-quiet .divider-quiet { opacity: 0; }
.hero-quiet .hero-secondary { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .hero-quiet .hero-logo { animation: logoReveal 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.15s forwards; }
  .hero-quiet .hero-title { animation: riseIn 0.9s ease-out 1s forwards; }
  .hero-quiet .divider-quiet { animation: fadeOnly 0.6s ease-out 1.3s forwards; }
  .hero-quiet .hero-hook { animation: riseIn 0.9s ease-out 1.4s forwards; }
  .hero-quiet .hero-cta { animation: riseIn 0.9s ease-out 1.7s forwards; }
  .hero-quiet .hero-secondary { animation: fadeOnly 0.7s ease-out 1.9s forwards; }
  .hero-quiet .scroll-cue { animation: fadeOnly 0.9s ease-out 2.2s forwards, cueBob 2.4s ease-in-out 3.1s infinite; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-quiet .divider-quiet { opacity: 1; }
  .hero-quiet .hero-secondary { opacity: 1; }
}
/* El logo se "materializa": entra pequeño y desenfocado, y al mismo
   tiempo que gana foco, crece a su tamaño real y sube ligeramente —
   un efecto con movimiento propio, sin depender de ninguna luz. */
@keyframes logoReveal {
  0% { opacity: 0; transform: scale(0.8) translateY(16px); filter: blur(16px); }
  60% { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); }
}

/* mic: retired in favor of the scroll beam above */
.travel-mic-wrap { display: none; }

/* ---------- Acentos carmín puntuales (con propósito, no decoración) ---------- */
.cue-dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--carmine);
  margin-right: 7px;
  vertical-align: middle;
  margin-bottom: 2px;
}
.pin-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--carmine);
  margin-right: 6px;
  vertical-align: middle;
  margin-bottom: 1px;
}

/* quiet CTA: hairline border, no fill, no glow — only sharpens + lifts on hover */
.btn-quiet {
  background: transparent;
  border: 1px solid rgba(212, 175, 55, 0.5);
  color: var(--ivory);
  clip-path: none;
  box-shadow: none;
}
.btn-quiet:hover {
  filter: none;
  border-color: rgba(212, 175, 55, 0.95);
  transform: translateY(-2px);
}

/* Atajo "Ver el método" — retomado de preview-alt: un segundo enlace,
   más discreto que el botón principal, para quien todavía no está
   listo para reservar pero sí quiere ver de qué se trata el método
   antes de decidir. Salta directo a la sección. */
.hero-actions {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  justify-content: center;
}
.hero-secondary {
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--gold-light);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.hero-secondary span { transition: transform 0.3s ease; display: inline-block; }
.hero-secondary:hover { color: var(--ivory); }
.hero-secondary:hover span { transform: translateX(4px); }

/* ============ PROPUESTA DE VALOR — la cita de Craxton ============
   El único lugar (junto al Método) donde se permite un momento con
   más presencia: comillas grandes en carmín, un acento carmín fino a
   la izquierda (guiño al telón rojo del escenario), texto justificado
   y centrado de verdad (columna de ancho fijo, no inline-block
   descentrado), y una entrada palabra-por-palabra con blur al hacer
   scroll — ver script-preview.js. Sin blob de luz de fondo. */
.valor-quiet { position: relative; }
.valor-quiet .container { position: relative; text-align: center; }

.valor-quiet .quote-mark {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(3rem, 7vw, 4.5rem);
  line-height: 1;
  color: var(--carmine);
  margin-bottom: 4px;
}

.valor-quiet .quote-frame {
  position: relative;
  width: 100%;
  max-width: 620px;
  margin: 0 auto;
  padding-left: 22px;
  text-align: left;
}
.valor-quiet .quote-frame::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 2px;
  background: var(--carmine);
}
.valor-quiet .quote-buffett {
  text-shadow: none;
  text-align: justify;
  text-align-last: left;
}
.valor-quiet .quote-author { display: block; margin-top: 4px; }
.valor-quiet .valor-copy { text-align: center; }

/* Palabra por palabra: cada .qw arranca oculta y desenfocada; JS le da
   a cada una su propio transition-delay, así que al añadir .in-view en
   el bloque entero, las palabras se revelan en cascada — "de la nada,
   poco a poco". Si JS no corre, el texto nunca se envuelve en spans y
   se ve normal desde el inicio (no hay riesgo de quedar invisible). */
.qw {
  display: inline-block;
  opacity: 0;
  filter: blur(7px);
  transform: translateY(10px) scale(0.98);
  transition: opacity 0.55s ease, filter 0.55s ease, transform 0.55s ease;
}
.quote-buffett.in-view .qw {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0) scale(1);
}

/* Marco y cita del autor: entrada simple, un paso detrás del texto. */
.valor-quiet.fade-ready .quote-mark,
.valor-quiet.fade-ready .quote-author {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.6s ease 0.5s, transform 0.6s ease 0.5s;
}
.valor-quiet.in-view .quote-mark,
.valor-quiet.in-view .quote-author {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .qw, .valor-quiet .quote-mark, .valor-quiet .quote-author {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }
}

/* ============ MÉTODO 3V — escenas ancladas (solo escritorio) ============ */
.metodo-quiet { background: #000; overflow: hidden; }
.metodo-quiet .lead { color: var(--text-soft); }

.metodo-stage {
  position: relative;
  min-height: 62vh;
  margin-top: 56px;
  display: flex;
  flex-direction: column;
}
.metodo-stage.is-pinned { min-height: 84vh; }

.metodo-scenes {
  position: relative;
  flex: 1;
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.metodo-scene {
  position: relative;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: 0 24px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Desktop only: JS adds .is-pinned once it confirms a fine pointer +
   enough width, and only then do scenes stack on top of each other via
   a pinned GSAP timeline. On touch/mobile — where scroll-jacking pins
   are notoriously unreliable (browser chrome resize, address bar) — JS
   never pins; instead each scene just fades up in place as it enters
   view (see .metodo-scene.in-view below), the same safe pattern used
   everywhere else on the site. Either way content is never invisible. */
.metodo-stage.is-pinned .metodo-scene {
  position: absolute;
  inset: 0;
  padding-bottom: 0;
  justify-content: center;
}

/* Mobile/no-pin fallback path: JS adds .fade-ready only once it has
   successfully set up the (non-pinning) IntersectionObserver reveal —
   so scenes only ever start hidden when something is guaranteed to
   reveal them. Default (no JS, or desktop pin path) = fully visible. */
.metodo-stage.fade-ready .metodo-scene {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.metodo-stage.fade-ready .metodo-scene.in-view {
  opacity: 1;
  transform: translateY(0);
}
.metodo-stage.fade-ready .metodo-scenes { padding: 24px 0; }

.metodo-scene-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(3.2rem, 8vw, 6rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(212, 175, 55, 0.55);
  text-stroke: 1px rgba(212, 175, 55, 0.55);
  margin-bottom: 2px;
}

.metodo-scene-label {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-mid);
  margin-bottom: 14px;
}

.metodo-scene h3 {
  font-family: var(--font-display);
  color: var(--ivory);
  font-size: clamp(1.3rem, 2.6vw, 1.9rem);
  margin: 0 0 8px;
  font-weight: 700;
}

.metodo-scene-sub {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.98rem;
  color: var(--gold-light);
  margin: 0 0 16px;
}

.metodo-scene-body {
  font-size: 0.96rem;
  line-height: 1.6;
  color: var(--text-soft);
  max-width: 500px;
  margin: 0 auto;
}

.metodo-progress {
  display: none;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
  flex-shrink: 0;
}
.metodo-stage.is-pinned .metodo-progress { display: flex; }
.metodo-tick {
  width: 22px;
  height: 1px;
  background: rgba(212, 175, 55, 0.28);
  transition: background-color 0.4s ease, width 0.4s ease;
}
.metodo-tick.active { background: var(--gold-body); width: 34px; }

@media (max-width: 720px) {
  .metodo-stage { min-height: auto; }
  .metodo-scene { padding: 0 20px 32px; }
  .metodo-scenes { flex-direction: column; min-height: 0; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .metodo-stage.is-pinned .metodo-scene { position: static; }
  .metodo-scene { opacity: 1 !important; transform: none !important; }
}

/* ============ DIFERENCIADORES — tarjetas tipo Apple ============ */
.diferenciadores-quiet .cards-grid { gap: 20px; }
.feature-card {
  background: #000;
  border: 1px solid rgba(212, 175, 55, 0.14);
  border-radius: 4px;
  padding: 32px 26px;
  transition: border-color 0.35s ease, transform 0.35s ease;
}
.feature-card:hover {
  border-color: rgba(212, 175, 55, 0.4);
  transform: translateY(-5px);
}
.feature-num {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.1rem;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(212, 175, 55, 0.5);
  text-stroke: 1px rgba(212, 175, 55, 0.5);
  margin-bottom: 14px;
}
/* Entrada elegante: JS marca .nums-ready una vez que el
   IntersectionObserver está listo (si algo falla, los números se ven
   normal desde el inicio — nunca quedan invisibles). Un pequeño
   "overshoot" al aparecer, un beat después de que la tarjeta ya entró. */
.cards-grid.nums-ready .feature-num {
  opacity: 0;
  transform: scale(0.55) translateY(8px);
  transition: opacity 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.cards-grid.nums-ready .feature-num.num-in {
  opacity: 1;
  transform: scale(1) translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .feature-num { opacity: 1 !important; transform: none !important; }
}
.feature-card h3 {
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--ivory);
  font-size: 1.05rem;
  margin: 0 0 10px;
}
.feature-card p {
  font-size: 0.92rem;
  color: var(--text-soft);
  margin: 0;
}

/* ============ TESTIMONIOS — carrusel, tarjetas con fondo claro ============
   Retomado de preview-alt: un carril horizontal con scroll-snap (sin
   JS adicional, solo CSS) en vez de una grilla fija de 3 columnas.
   Las tarjetas rompen a propósito con el negro del resto del sitio —
   fondo claro (ivory) con texto oscuro, como si fueran recortes de
   papel reales pegados sobre la página, mucho más legibles que texto
   claro-sobre-negro para bloques largos de opinión ajena. */
.testimonio-quiet { text-align: left; }
.testi-track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 8px 28px 12px;
  margin-top: 10px;
  scrollbar-width: none;
}
.testi-track::-webkit-scrollbar { display: none; }
.testi-card {
  scroll-snap-align: start;
  flex: 0 0 min(400px, 84vw);
  background: var(--ivory);
  border-radius: 4px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
}
.testi-card .stars {
  font-size: 0.85rem;
  letter-spacing: 2px;
  color: var(--carmine);
  text-shadow: none;
  margin-bottom: 16px;
}
.testi-card blockquote {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.96rem;
  line-height: 1.62;
  color: #1c1710;
  margin: 0 0 18px;
  flex: 1;
  text-shadow: none;
}
.testi-card cite {
  font-family: var(--font-display);
  font-weight: 600;
  color: rgba(28, 23, 16, 0.6);
  font-size: 0.86rem;
}
@media (max-width: 640px) {
  .testi-track { padding: 8px 20px 12px; }
}

/* ============ SEDE — enlace discreto, sin mapa ============ */
.sede-directions {
  display: inline-block;
  margin-top: 14px;
  color: var(--gold-mid);
  font-size: 0.86rem;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.3s ease, border-color 0.3s ease;
}
.sede-directions:hover { color: var(--gold-body); border-color: var(--gold-body); }

/* ============ WHATSAPP FLOTANTE — punto de acento carmín ============ */
.wa-float { position: fixed; }
.wa-float-dot {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--carmine);
  border: 2px solid #000;
}

/* ============ HORARIOS — grupos disponibles ============
   Misma familia visual que .feature-card (tarjeta plana, borde dorado
   al 14%, se ilumina en hover) — solo con la lista de días/horario en
   vez de un párrafo, y su propio CTA para consultar fechas. */
.horarios { background: #000; }
.horarios-grid {
  margin-top: 44px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.horario-card {
  background: #000;
  border: 1px solid rgba(212, 175, 55, 0.14);
  border-radius: 4px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  transition: border-color 0.35s ease, transform 0.35s ease;
}
.horario-card:hover {
  border-color: rgba(212, 175, 55, 0.4);
  transform: translateY(-5px);
}
.horario-tag {
  align-self: flex-start;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--carmine);
  margin-bottom: 10px;
}
.horario-card h3 {
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--ivory);
  font-size: 1.05rem;
  margin: 0 0 20px;
}
.horario-days {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.horario-days li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(212, 175, 55, 0.14);
}
.horario-days li:last-child { border-bottom: none; padding-bottom: 0; }
.horario-day {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--gold-light);
  font-size: 1rem;
}
.horario-time {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--text-soft);
  font-size: 0.88rem;
  white-space: nowrap;
}
.horario-note {
  font-size: 0.86rem;
  color: var(--text-dim);
  margin: 0 0 24px;
}
.horario-cta { align-self: flex-start; margin-top: auto; }

@media (max-width: 720px) {
  .horarios-grid { grid-template-columns: 1fr; }
}