/* =============================================================================
   FORMACIÓN Y TALLER — Sección #formacion
   Códigos Solares
   =============================================================================

   Sección de conversión principal — tiene más peso visual que las anteriores:
   · Fondo: warm beige muy sutil (ivory + toque de beige-cálido)
   · Bordes dorados finos arriba y abajo
   · Sello solar de marca como watermark de fondo, baja opacidad
   · Botón sólido dorado (mismo estilo que el hero)
   · Sin íconos de línea — el peso lo lleva el botón y el espaciado

   Estructura:
     #formacion                   → <section>
       .formacion-inner           → wrapper centrado, máx 680px (más estrecho = más foco)
         .formacion-eyebrow
         .formacion-heading       → h2 principal
         .formacion-divider
         .formacion-body          → párrafo
         .formacion-ctas          → grupo de acciones (botón + link)
   ============================================================================= */

/* ── Layout de sección ────────────────────────────────────────────────────────── */
#formacion {
  position: relative;
  overflow: hidden;            /* contiene el sello de fondo */

  /* Fondo ligeramente más cálido que el ivory base */
  background-color: var(--surface-alt);  /* ivory mezclado con un toque de beige cálido */
  border-top:    1px solid rgba(var(--gold-leaf-rgb), 0.30);  /* #c6a15b @30% */
  border-bottom: 1px solid rgba(var(--gold-leaf-rgb), 0.30);

  padding: var(--space-xl) var(--space-md);

  /* Resetear placeholder de main.css */
  min-height: unset;
  display: block;
  align-items: unset;
  justify-content: unset;
  font-size: unset;
  color: unset;
  letter-spacing: unset;
  text-transform: none;
}

#formacion::before {
  content: none;  /* eliminar el pseudo-elemento de debug */
}

/* ── Sello solar de fondo (watermark) ────────────────────────────────────────── */
/* Pseudo-elemento con el mandala solar a baja opacidad, posicionado            */
/* a la derecha para no competir con el texto central.                           */
#formacion::after {
  content: '';
  position: absolute;
  right: -4%;
  top: 50%;
  transform: translateY(-50%);
  width: min(340px, 55vw);
  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.065;              /* muy sutil — atmosférico, no protagonista */
  pointer-events: none;
}

/* ── Inner wrapper — más estrecho para foco en el CTA ───────────────────────── */
.formacion-inner {
  position: relative;
  z-index: 1;                 /* sobre el ::after del sello */
  max-width: 620px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2rem;
}

/* ── Eyebrow ─────────────────────────────────────────────────────────────────── */
.formacion-eyebrow {
  font-family: var(--font-body);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  color: var(--accent-text);
  text-transform: uppercase;
}

/* ── Titular ─────────────────────────────────────────────────────────────────── */
/* Ligeramente más grande que los titulares de las secciones descriptivas       */
.formacion-heading {
  font-family: var(--font-heading);
  font-size: clamp(2.1rem, 4vw, 3rem);  /* un punto más grande que que-es/graficos */
  font-weight: 300;
  font-style: italic;
  text-transform: none;
  color: var(--text);
  line-height: 1.15;
  margin: 0;
}

/* ── Separador ───────────────────────────────────────────────────────────────── */
.formacion-divider {
  width: 2.5rem;
  height: 1px;
  background-color: var(--gold-leaf);
  opacity: 0.45;
  border: none;
  margin: 0;
}

/* ── Párrafo de cuerpo ───────────────────────────────────────────────────────── */
.formacion-body {
  font-family: var(--font-body);
  font-size: clamp(0.9rem, 1.2vw, 1rem);
  font-weight: 300;
  text-transform: none;
  letter-spacing: normal;
  color: var(--text);
  line-height: 1.85;
  margin: 0;
}

/* ── Grupo de CTAs ───────────────────────────────────────────────────────────── */
.formacion-ctas {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.1rem;
  margin-top: 0.5rem;          /* algo más de aire antes del bloque de acción */
}

/* ── Botón primario ──────────────────────────────────────────────────────────── */
/* Mismo token que .btn-primary del hero — consistencia */
.formacion-btn-primary {
  display: inline-block;
  padding: 0.9rem 2.5rem;
  background-color: var(--accent-fill);
  background-image: var(--accent-gradient);
  color: var(--on-accent);
  box-shadow: inset 0 -2px 0 var(--accent-line);
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background-color var(--ease-default), transform 0.2s ease,
              box-shadow 0.2s ease;
}

.formacion-btn-primary:hover {
  background-image: var(--accent-gradient-hover);
  transform: translateY(-2px);
  box-shadow: inset 0 -2px 0 var(--accent-line), 0 6px 24px rgba(var(--accent-fill-rgb), 0.25);
}

/* ── Link secundario discreto ────────────────────────────────────────────────── */
.formacion-link-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0.02em;
  color: var(--gold-shadow);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid rgba(var(--gold-shadow-rgb), 0.30);
  transition: color var(--ease-default), border-color var(--ease-default),
              gap var(--ease-default);
}

.formacion-link-secondary:hover {
  color: var(--accent-text);
  border-bottom-color: var(--gold-mid);
  gap: 0.55em;
}

/* ── Responsive ──────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  #formacion {
    padding: var(--space-lg) var(--space-sm);
  }

  /* En mobile el sello de fondo se achica y se centra */
  #formacion::after {
    right: unset;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(260px, 70vw);
    opacity: 0.05;
  }

  .formacion-heading {
    font-size: clamp(1.9rem, 6vw, 2.4rem);
  }

  .formacion-ctas {
    width: 100%;
  }

  .formacion-btn-primary {
    width: 100%;
    text-align: center;
  }
}