/* =============================================================================
   FORMACIÓN — Página formacion.html
   Códigos Solares
   =============================================================================

   Hereda el design system completo de main.css (tokens, reset, animaciones
   .from-left / .from-right / .in-view).

   Secciones propias de esta página:
     #fp-hero          → Hero estático con watermark y caja central
     #fp-aprender      → El recorrido: las seis clases (2 columnas: ícono + lista)
     #fp-estructura    → Cómo funciona (lista limpia con íconos)
     #fp-kit           → Instrumentos de Heliometría (2 columnas: ícono + texto)
     #fp-guia          → Quién guía (2 columnas: ícono + texto)
     #fp-inversion     → Inversión — dos formas de pago
     #fp-faq           → Preguntas frecuentes
     #fp-cierre        → Cierre + CTA final

   Naming convention: prefijo "fp-" (formacion-page) en todas las clases
   para evitar colisiones con las clases de la sección #formacion del home.
   ============================================================================= */

/* Botón, eyebrow, separador, titulares, párrafos e íconos decorativos
   vienen de components.css (clases c-*). */

/* ═══════════════════════════════════════════════════════════════════════════
   #fp-hero — Hero estático
   ═══════════════════════════════════════════════════════════════════════════ */

#fp-hero {
  --hero-mark: url('../assets/icons/simbolo-mandala-solar-rayos.png');
  --hero-panel-max: 580px;
  --hero-divider-gap: 2.5rem;
  --hero-sub-max: 460px;
  --hero-sub-gap: 2.5rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   #fp-aprender — Qué vas a aprender
   ═══════════════════════════════════════════════════════════════════════════ */

#fp-aprender {
  background-color: var(--surface);
  padding: var(--space-xl) var(--space-md);
  position: relative;
  min-height: unset;
  display: block;
  font-size: unset;
  color: unset;
  letter-spacing: unset;
  text-transform: none;
}

.fp-aprender-inner {
  max-width: 860px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.fp-aprender-row {
  display: flex;
  align-items: flex-start;
  gap: 3.5rem;
}

.fp-aprender-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.75rem;
}

/* Lista de las seis clases: número, título y una línea */
.fp-clases {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin: 0;
  padding: 0;
}

.fp-clase {
  font-family: var(--font-body);
  font-size: clamp(0.9rem, 1.2vw, 1rem);
  font-weight: 300;
  color: var(--text);
  line-height: 1.7;
}

.fp-clase-num {
  display: block;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--gold-shadow);
}

.fp-clase-titulo {
  display: block;
  font-family: var(--font-heading);
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  font-weight: 400;
  font-style: italic;
  line-height: 1.3;
}

/* ═══════════════════════════════════════════════════════════════════════════
   #fp-estructura — Cómo funciona
   ═══════════════════════════════════════════════════════════════════════════ */

#fp-estructura {
  background-color: var(--surface-alt);
  border-top:    1px solid rgba(var(--gold-leaf-rgb), 0.25);
  border-bottom: 1px solid rgba(var(--gold-leaf-rgb), 0.25);
  padding: var(--space-xl) var(--space-md);
  position: relative;
  overflow: hidden;
}

/* Watermark lateral derecha — sutil */
#fp-estructura::after {
  content: '';
  position: absolute;
  right: -2%;
  top: 50%;
  transform: translateY(-50%);
  width: min(300px, 45vw);
  aspect-ratio: 1;
  background-image: none; /* la marca de agua PNG cedió su lugar a los fondos de js/adornos.js */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.055;
  pointer-events: none;
}

.fp-estructura-inner {
  position: relative;
  z-index: 1;
  max-width: 860px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.fp-estructura-content {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  max-width: 620px;
}

.fp-estructura-body {
  font-family: var(--font-body);
  font-size: clamp(0.9rem, 1.2vw, 1rem);
  font-weight: 300;
  color: var(--text);
  line-height: 1.85;
  margin: 0;
}

/* Lista limpia: solo texto + ícono pequeño — sin tarjetas */
.fp-estructura-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: 0;
  margin: 0;
  border-top: 1px solid rgba(var(--gold-leaf-rgb), 0.20);
  padding-top: 1.5rem;
}

.fp-estructura-item {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--text);
  line-height: 1.5;
}

/* Ícono de línea pequeño junto a cada ítem */
.fp-estructura-item-icon {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  object-fit: contain;
  opacity: 0.5;
  display: block;
}

/* ═══════════════════════════════════════════════════════════════════════════
   #fp-kit — Tu kit de trabajo
   ═══════════════════════════════════════════════════════════════════════════ */

#fp-kit {
  background-color: var(--surface);
  padding: var(--space-xl) var(--space-md);
  position: relative;
}

.fp-kit-inner {
  max-width: 860px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

/* Ícono a la derecha vía row-reverse */
.fp-kit-row {
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-start;
  gap: 3.5rem;
}

.fp-kit-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.75rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   #fp-guia — Quién guía (usa las clases de fila de #fp-aprender)
   ═══════════════════════════════════════════════════════════════════════════ */

#fp-guia {
  background-color: var(--surface-alt);
  border-top: 1px solid rgba(var(--gold-leaf-rgb), 0.25);
  padding: var(--space-xl) var(--space-md);
  position: relative;
}

/* ═══════════════════════════════════════════════════════════════════════════
   #fp-faq — Preguntas frecuentes
   ═══════════════════════════════════════════════════════════════════════════ */

#fp-faq {
  background-color: var(--surface);
  padding: var(--space-xl) var(--space-md);
  position: relative;
}

.fp-faq-inner {
  max-width: 860px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.75rem;
}

.fp-faq-list {
  width: 100%;
  max-width: 620px;
  display: flex;
  flex-direction: column;
}

.fp-faq-item {
  padding: 1.5rem 0;
  border-top: 1px solid rgba(var(--gold-leaf-rgb), 0.20);
}

.fp-faq-pregunta {
  font-family: var(--font-heading);
  font-size: clamp(1.2rem, 2vw, 1.45rem);
  font-weight: 400;
  font-style: italic;
  color: var(--text);
  line-height: 1.3;
  margin: 0 0 0.5rem;
}

.fp-faq-respuesta {
  font-family: var(--font-body);
  font-size: clamp(0.9rem, 1.2vw, 1rem);
  font-weight: 300;
  color: var(--text);
  line-height: 1.85;
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   #fp-inversion — Tu inversión
   ═══════════════════════════════════════════════════════════════════════════ */

#fp-inversion {
  background-color: var(--surface-feature);
  border-top:    1px solid rgba(var(--gold-leaf-rgb), 0.18);
  border-bottom: 1px solid rgba(var(--gold-leaf-rgb), 0.18);
  padding: var(--space-xl) var(--space-md);
  position: relative;
  overflow: hidden;
}

/* Watermark centrado en fondo oscuro */
#fp-inversion::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(420px, 70vw);
  aspect-ratio: 1;
  background-image: none; /* la marca de agua PNG cedió su lugar a los fondos de js/adornos.js */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.045;
  pointer-events: none;
}

.fp-inversion-inner {
  position: relative;
  z-index: 1;
  max-width: 680px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2rem;
}

.fp-inversion-eyebrow {
  font-family: var(--font-body);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  color: var(--accent-text);
  text-transform: uppercase;
}

.fp-inversion-heading {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 300;
  font-style: italic;
  color: var(--on-feature);
  line-height: 1.15;
  margin: 0;
}

.fp-inversion-divider {
  width: 2.5rem;
  height: 1px;
  background-color: var(--gold-leaf);
  opacity: 0.35;
  border: none;
  margin: 0;
}

/* Contenedor de opciones — flex en desktop, stack en mobile */
.fp-inversion-opciones {
  display: flex;
  gap: 2rem;
  align-items: stretch;
  width: 100%;
}

/* Tarjeta de precio — texto limpio, borde sutil, sin sombra agresiva */
.fp-inversion-opcion {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: 1.75rem 2rem;
  border: 1px solid rgba(var(--gold-leaf-rgb), 0.20);
  background-color: var(--surface);
  border-radius: 2px;
}

/* Opción destacada (pago completo) — borde más visible */
.fp-inversion-opcion.is-featured {
  border-color: rgba(var(--gold-leaf-rgb), 0.45);
  background-color: rgba(var(--gold-leaf-rgb), 0.07);
}

.fp-inversion-opcion-label {
  font-family: var(--font-body);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--accent-text);
}

.fp-inversion-opcion-precio {
  font-family: var(--font-heading);
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 300;
  font-style: italic;
  color: var(--on-feature);
  line-height: 1.1;
  margin: 0;
}

.fp-inversion-opcion-nota {
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 300;
  color: rgba(var(--on-feature-rgb), 0.72);
  line-height: 1.6;
  margin: 0;
}

/* Badge "oferta" — discreta, no agresiva */
.fp-inversion-badge {
  align-self: flex-start;
  font-family: var(--font-body);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text);
  background-color: var(--gold-leaf);
  padding: 0.2rem 0.6rem;
  border-radius: 1px;
}

.fp-inversion-cta {
  margin-top: 0.5rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   #fp-cierre — Cierre y CTA final
   ═══════════════════════════════════════════════════════════════════════════ */

#fp-cierre {
  background-color: var(--surface);
  border-top: 1px solid rgba(var(--gold-leaf-rgb), 0.20);
  padding: calc(var(--space-xl) * 1.25) var(--space-md);
  position: relative;
  overflow: hidden;
}

#fp-cierre::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(280px, 60vw);
  aspect-ratio: 1;
  background-image: none; /* la marca de agua PNG cedió su lugar a los fondos de js/adornos.js */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.055;
  pointer-events: none;
}

.fp-cierre-inner {
  position: relative;
  z-index: 1;
  max-width: 560px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.75rem;
}

.fp-cierre-subtitle {
  font-family: var(--font-body);
  font-size: clamp(0.875rem, 1.2vw, 0.95rem);
  font-weight: 300;
  color: var(--gold-shadow);
  line-height: 1.75;
  max-width: 480px;
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE — ≤767px
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

  #fp-aprender { padding: var(--space-lg) var(--space-sm); }
  .fp-aprender-row {
    flex-direction: column;
    gap: 1.75rem;
  }

  #fp-estructura { padding: var(--space-lg) var(--space-sm); }
  #fp-estructura::after { display: none; }

  #fp-kit { padding: var(--space-lg) var(--space-sm); }
  .fp-kit-row {
    flex-direction: column;
    gap: 1.75rem;
  }

  #fp-inversion { padding: var(--space-lg) var(--space-sm); }
  .fp-inversion-opciones {
    flex-direction: column;
    gap: 1.25rem;
  }
  .fp-inversion-opcion {
    padding: 1.5rem 1.25rem;
  }

  #fp-guia { padding: var(--space-lg) var(--space-sm); }
  #fp-faq { padding: var(--space-lg) var(--space-sm); }

  #fp-cierre { padding: var(--space-lg) var(--space-sm); }
}