/* =========================================================
   Clave Digital · página «Marca personal» (01/10/2026)
   Se carga después de style.css: usa sus tokens y añade solo los de esta página.
   Hermana de la portada (misma noche, mismo azul de acción, mismas fuentes),
   con aire propio: portada solo de texto, más editorial, para expertos.
   Elemento memorable: los cuatro pasos que se colocan «en este orden».
   ========================================================= */

:root {
  /* ---- Tipografía propia de la página ---- */
  --mp-font-portada: 800 clamp(2.6rem, 7.2vw, 5.4rem) / 1.02 var(--font-titular);
  --mp-font-titulo:  700 clamp(1.75rem, 3.6vw, 2.6rem) / 1.15 var(--font-titular);
  --mp-font-titulo-grande: 800 clamp(2.1rem, 5vw, 3.6rem) / 1.06 var(--font-titular);
  --mp-font-ordinal: 800 clamp(3rem, 6vw, 4.5rem) / 1 var(--font-titular);
  --mp-font-burbuja: 700 clamp(1.5rem, 2.6vw, 2rem) / 1 var(--font-titular);

  /* ---- Fondos ---- */
  --mp-bg-portada: radial-gradient(ellipse 60% 70% at 85% 30%, rgba(61, 139, 255, 0.12), transparent 70%), linear-gradient(180deg, var(--noche-azul) 0%, var(--noche-900) 100%);

  /* ---- Medidas ---- */
  --mp-portada-min: min(92svh, 860px);
  --mp-titulo-medida: 15ch;
  --mp-mensaje-ancho: 340px;
  --mp-paso-desorden: 4deg;   /* giro máximo de un paso mientras está fuera de su sitio */

  /* ---- Movimiento del método ---- */
  --mp-orden-dur: 0.9s;
  --mp-orden-escalon: 0.12s;
  --mp-linea-dur: 0.7s;

  /* Contraste calculado (WCAG 2.x) el 01/10/2026 para esta página. Los cuatro pares
     de 01 - color.md, sobre los fondos que usa:
       --text-heading  / --noche-azul (portada)   17,28:1
       --text-neutral  / --noche-azul             14,20:1
       --text-subtle   / --noche-azul              7,61:1
       (01/10/2026: en las secciones alternas --bg-page-alt pasa a ser la banda, noche-800;
        los valores sobre ella están en style.css, «Ritmo de secciones», y todos pasan)
       --text-neutral  / --bg-page-alt            15,05:1 · --text-subtle / --bg-page-alt 8,07:1
       --text-inverse  / --bg-brand-bold           5,28:1 (botones y burbuja LANZAR)
       --text-inverse  / --azul-neon               8,17:1 (botón con brillo)
       --text-support  / --bg-page-alt             9,98:1 (ordinales 1-4 del método)
       --border-input  / --bg-page-alt             4,21:1 (reglas de los pasos, mínimo 3)
       --border-brand  / --bg-page                 5,75:1 (foco) */
}

/* ---------- Menú: la página en la que estás ---------- */
.menu > a[aria-current="page"] { color: var(--text-heading); text-decoration: underline; text-decoration-color: var(--border-brand); text-decoration-thickness: var(--linea); text-underline-offset: var(--sp-2); }
@media (max-width: 899.98px) {
  /* En el menú a pantalla completa el subrayado cruzaría la flecha: basta el color */
  .menu.abierto > a[aria-current="page"] { text-decoration: none; color: var(--text-brand); }
}

/* ---------- Titulares de esta página ----------
   Los de Vicky son frases, no rótulos: van en minúscula y grandes, como el
   manifiesto de «Por qué fiarte» de la portada. Los de 2-3 palabras («Por qué yo»,
   «Preguntas») siguen la regla de la casa: mayúsculas. */
.mp-titulo { font: var(--mp-font-titulo); letter-spacing: var(--tracking-titular); color: var(--text-heading); max-width: 22ch; }
.mp-titulo--grande { font: var(--mp-font-titulo-grande); max-width: 16ch; }

/* ---------- 1 · Gancho ---------- */
.mp-portada {
  display: flex; align-items: center;
  min-height: var(--mp-portada-min);
  padding: calc(var(--cabecera-alto) + var(--sp-12)) 0 var(--sp-16);
  background: var(--mp-bg-portada);
}
.mp-portada__rejilla { display: grid; grid-template-columns: 1fr; gap: var(--sp-12); align-items: end; }
.mp-portada__rejilla > * { min-width: 0; }
.mp-portada__titulo { font: var(--mp-font-portada); letter-spacing: var(--tracking-titular); max-width: var(--mp-titulo-medida); }
.mp-portada__titulo span { display: block; }
.mp-portada__sub { font: var(--font-body-l); color: var(--text-neutral); max-width: 46ch; margin-top: var(--sp-8); }
.mp-portada__accion { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-3); margin-top: var(--sp-8); }
.mp-portada__micro { font: var(--font-body-s); color: var(--text-subtle); }

/* La burbuja: el mismo gesto que la guía de la portada (QUIERO), con LANZAR */
.mp-mensaje {
  display: flex; flex-direction: column; gap: var(--sp-3);
  width: 100%; max-width: var(--mp-mensaje-ancho);
  padding: var(--sp-6); border-radius: var(--radio-md);
  background: var(--bg-surface); border: var(--borde-fino) solid var(--border-neutral);
  box-shadow: var(--sombra-panel);
}
.mp-mensaje__para { font: var(--font-body-s); color: var(--text-subtle); }
.mp-mensaje__burbuja { max-width: none; white-space: nowrap; font: var(--mp-font-burbuja); letter-spacing: var(--tracking-titular); padding: var(--sp-3) var(--sp-6); }

@media (max-width: 767.98px) {
  .mp-mensaje { display: none; }   /* en móvil el botón ya está a mano; la burbuja solo repetiría */
  .mp-portada__accion .boton { width: 100%; }
}
@media (min-width: 1024px) {
  .mp-portada__rejilla { grid-template-columns: 1fr auto; gap: var(--sp-16); align-items: center; }
}

/* ---------- 2 · Para quién es ---------- */
.mp-encaje { display: grid; grid-template-columns: 1fr; gap: var(--sp-8); }
.mp-encaje > * { min-width: 0; }
@media (min-width: 1024px) { .mp-encaje { grid-template-columns: 5fr 7fr; gap: var(--sp-16); align-items: start; } }
.mp-lista { border-top: var(--borde-fino) solid var(--border-neutral); }
.mp-lista li {
  padding: var(--sp-4) 0 var(--sp-4) var(--sp-8); position: relative;
  border-bottom: var(--borde-fino) solid var(--border-neutral);
  font: var(--font-body-l); color: var(--text-neutral); max-width: var(--medida);
}
.mp-lista li::before {
  content: ''; position: absolute; left: 0; top: calc(var(--sp-4) + 0.62em);
  width: var(--sp-4); height: var(--linea); background: var(--bg-brand-bold);
}
.mp-no {
  margin-top: var(--sp-8); padding-left: var(--sp-6);
  border-left: var(--borde-fino) solid var(--border-input);
  color: var(--text-subtle); max-width: var(--medida);
}
.mp-no strong { color: var(--text-heading); }

/* ---------- 3 · Historia, versión corta (01/10/2026): una columna centrada, versos de la portada ---------- */
.mp-historia-corta { max-width: calc(var(--quien-verso-ancho) + 2 * var(--margen-lateral)); }
.mp-historia-corta .mp-titulo { margin-bottom: var(--sp-6); }
.mp-historia-corta .quien__verso { display: flex; flex-direction: column; gap: var(--sp-6); }
/* (lo de abajo era del bloque largo con foto; sin uso desde el 01/10, se deja por si vuelve) */
.mp-historia__texto .mp-titulo { margin-bottom: var(--sp-4); }
.mp-historia__clave {
  font: var(--font-heading-m); letter-spacing: var(--tracking-titular); color: var(--text-heading);
  margin: var(--sp-4) 0; max-width: 34ch;
}

/* ---------- 4 · El método: «Cuatro pasos. En este orden.» ---------- */
.mp-pasos {
  position: relative;
  display: grid; grid-template-columns: 1fr; gap: var(--sp-8);
  margin-top: var(--sp-12);
}
.mp-pasos > * { min-width: 0; }
.mp-paso {
  position: relative; padding: var(--sp-6) 0 0 0;
  border-top: var(--borde-fino) solid var(--border-input);
  background: var(--bg-page-alt);   /* tapa la línea al cruzarse mientras se ordenan */
}
.mp-paso__num { display: block; font: var(--mp-font-ordinal); letter-spacing: var(--tracking-titular); color: var(--text-support); font-variant-numeric: tabular-nums; margin-bottom: var(--sp-4); }
.mp-paso__titulo { font: var(--font-heading-m); letter-spacing: var(--tracking-titular); margin-bottom: var(--sp-2); }
.mp-paso p { color: var(--text-neutral); max-width: 40ch; }
@media (min-width: 768px) { .mp-pasos { grid-template-columns: repeat(2, 1fr); column-gap: var(--sp-8); row-gap: var(--sp-12); } }
@media (min-width: 1024px) { .mp-pasos { grid-template-columns: repeat(4, 1fr); } }

/* La línea azul que recorre los pasos cuando ya están en su sitio */
.mp-pasos::before {
  content: ''; position: absolute; left: 0; right: 0; top: calc(-1 * var(--borde-fino));
  height: var(--linea); background: var(--bg-brand-bold); box-shadow: var(--glow-linea);
  transform: scaleX(0); transform-origin: left center; z-index: 1;
}
@media (max-width: 1023.98px) { .mp-pasos::before { display: none; } }

/* Estados que pone marca-personal.js:
   .desordenado: cada paso en el hueco de otro, algo girado (sin transición). Opacos:
   al cruzarse se tapan limpios, sin mezclar textos.
   .en-orden: cada uno vuelve a su sitio, el 1 primero, y luego se dibuja la línea. */
.mp-pasos.en-orden .mp-paso {
  transition: transform var(--mp-orden-dur) var(--curva-salida);
  transition-delay: calc(var(--mp-orden-i, 0) * var(--mp-orden-escalon));
}
.mp-pasos.en-orden::before, .mp-pasos.ordenado::before {
  transform: scaleX(1);
  transition: transform var(--mp-linea-dur) var(--curva-salida) calc(var(--mp-orden-dur) + 3 * var(--mp-orden-escalon));
}
.mp-pasos.ordenado::before { transition: none; }

.mp-metodo__cierre { margin-top: var(--sp-16); font: var(--font-heading-m); letter-spacing: var(--tracking-titular); color: var(--text-heading); max-width: 34ch; }

/* ---------- 5 · Por qué yo ---------- */
.mp-razones { display: grid; grid-template-columns: 1fr; gap: var(--sp-8); margin-top: var(--sp-12); }
.mp-razones > * { min-width: 0; }
@media (min-width: 768px) { .mp-razones { grid-template-columns: repeat(2, 1fr); column-gap: var(--sp-12); row-gap: var(--sp-12); } }
.mp-razones li { padding-top: var(--sp-6); border-top: var(--borde-fino) solid var(--border-neutral); }
.mp-razones__titulo { font: var(--font-heading-m); letter-spacing: var(--tracking-titular); margin-bottom: var(--sp-2); }
.mp-razones p { color: var(--text-neutral); max-width: var(--medida); }

/* ---------- 7 · Cierre ---------- */
.mp-cierre .cierre__texto { max-width: 48ch; }
.mp-cierre__linea { margin-top: var(--sp-4); font: var(--font-body-s); color: var(--text-subtle); }

/* ---------- Movimiento reducido: los pasos ya en orden ---------- */
@media (prefers-reduced-motion: reduce) {
  .mp-pasos .mp-paso { transform: none !important; }
  .mp-pasos::before { transform: scaleX(1); }
}