/* ============================================================
   SECCIONES.CSS — Raíz Digital
   Tratamiento visual específico de cada una de las 11 secciones.

   Lógica de color (heredada del logotipo, ver visual-system-guion-v1.1.md
   sección 1.3): el recorrido va de identidad (cian) → sistema/IA
   (dorado, contenido, nunca protagonista) → crecimiento (verde).
   Esa progresión se refleja aquí en acentos puntuales, no en
   fondos completos — el fondo general (--mk-fondo) se mantiene
   en toda la página para que la marca sea reconocible de principio
   a fin, y el color cambia solo en detalles (títulos, bordes, glow).

   NOTA: sin copy ni imágenes definitivas todavía, estos estilos
   son la base compositiva — se refinan cuando llegue el contenido
   real (Fase 4, pasos posteriores).
   ============================================================ */

/* 01 — HERO: primer contacto, identidad — acento cian */
.seccion--hero h1 {
  color: var(--mk-primario);
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1.15;
  margin-bottom: var(--mk-espacio-3);
}

.seccion--hero p {
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  color: var(--mk-texto);
  opacity: 0.85;
}

/* 02 — EL PROBLEMA: tono más sobrio, sin acentos de color */
.seccion--problema h2 {
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  color: var(--mk-texto);
}

/* 03 — LA FORMA DE PENSAR RAÍZ: transición, acento verde sutil */
.seccion--forma-de-pensar {
  border-top: 1px solid var(--mk-borde);
}

.seccion--forma-de-pensar h2 {
  color: var(--mk-secundario);
}

/* 04 — ECOSISTEMA (túnel 3D): esta sección es mayormente el propio
   túnel; el título queda arriba, discreto, para no competir con
   la pieza 3D que viene debajo. */
.seccion--ecosistema {
  padding-bottom: 0;
}

.seccion--ecosistema h2 {
  color: var(--mk-texto);
  text-align: center;
}

/* 05 — MAPA COMERCIAL RAÍZ: producto de diagnóstico, cian */
.seccion--mapa-comercial {
  background-color: var(--mk-superficie);
}

.seccion--mapa-comercial h2 {
  color: var(--mk-primario);
}

/* 06 — AGENTE COMERCIAL (MÍA): el núcleo del logo es dorado y
   contenido — aquí se refleja igual: acento dorado en detalles
   pequeños (borde, título), nunca como color dominante de fondo. */
.seccion--mia h2 {
  color: var(--mk-dorado);
}

.seccion--mia {
  border-left: 3px solid var(--mk-dorado);
  padding-left: calc(var(--mk-espacio-3) - 3px);
}

/* 07 — SISTEMA DE REACTIVACIÓN: verde, resultado/crecimiento */
.seccion--reactivacion h2 {
  color: var(--mk-secundario);
}

/* 08 — PARA QUIÉN ES RAÍZ: neutro, es una sección de encaje/filtro */
.seccion--para-quien {
  background-color: var(--mk-superficie);
}

/* 09 — DEMO (Pilates): tratamiento fotográfico real, sin acentos
   de color del sistema — esta sección es una aplicación concreta,
   no la identidad de marca (ver Brandbook, regla de posicionamiento) */
.seccion--demo h2 {
  color: var(--mk-texto);
}

/* 10 — CTA FINAL: cierre, combina cian y verde (todo el recorrido) */
.seccion--cta-final {
  text-align: center;
  background: linear-gradient(
    180deg,
    var(--mk-fondo) 0%,
    var(--mk-superficie) 100%
  );
}

.seccion--cta-final h2 {
  background: linear-gradient(90deg, var(--mk-primario), var(--mk-secundario));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
}

.seccion--cta-final form {
  display: flex;
  flex-direction: column;
  gap: var(--mk-espacio-2);
  max-width: 480px;
  margin: var(--mk-espacio-4) auto 0;
}

/* 11 — FOOTER: discreto, sin protagonismo visual */
.seccion--footer {
  border-top: 1px solid var(--mk-borde);
  font-size: 0.9rem;
  opacity: 0.7;
  text-align: center;
}