/* Manifiesto: una frase de posicionamiento justo bajo la constelación, con dos entradas (trabajo y herramientas). Comparte el fondo del héroe. */
.mf{position:relative;padding:clamp(72px,11vh,128px) 8vw;background:transparent;color:#E6D5C3}   /* sin fondo propio: deja ver el mismo fondo fijo (manchas y partículas) del héroe */
.mf-grilla{max-width:1100px;margin:0 auto}
.mf h2{font:600 clamp(38px,5vw,72px)/1.02 var(--hu-serif);margin:0 0 26px;color:#E6D5C3;max-width:20ch}
.mf h2:focus{outline:none}
.mf p{font-size:18px;line-height:1.65;color:#C8BFB1;margin:0 0 16px;max-width:60ch}
.mf p.mf-lead{font-size:clamp(20px,1.9vw,24px);font-weight:600;color:#E6D5C3}
.mf-acciones{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px!important}
/* El botón se mueve y brilla con UNA sola duración y UNA sola curva: antes el movimiento (.45 s, curva de resorte) y el brillo (.3 s) terminaban en momentos distintos y se notaba un salto.
   El desplazamiento es de 2 px enteros (sin medios píxeles) y la capa queda promovida (will-change) para que el texto no cambie de rasterizado cuando la transición termina. */
.mf-cta{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 26px;border-radius:999px;background-color:#E8927A;color:#1F3A3D;font-weight:700;text-decoration:none;will-change:transform;backface-visibility:hidden;transition:transform .3s ease-out,background-color .3s ease-out,color .3s ease-out}
.mf-cta--b{background-color:transparent;color:#E6D5C3;box-shadow:inset 0 0 0 2px #E6D5C3}
.mf-cta svg{width:18px;height:18px}
.mf-cta:hover,.mf-cta:focus-visible{background-color:#F2B09D;color:#1F3A3D;transform:translateY(-2px)}
.mf-cta:focus-visible{outline:2px solid #E6D5C3;outline-offset:4px}
@media (prefers-reduced-motion:reduce){.mf-cta{transition:background-color .3s,color .3s}.mf-cta:hover,.mf-cta:focus-visible{transform:none}}