/* Solo lo de /method/. Los tokens y la base van en base.css; la
   cabecera y el pie, en chrome.css. Aqui no se repite nada de eso. */
/* ── Portada: se entra dentro de la letra ────────────────────────────────
   El titular es corto a proposito. Antes eran tres lineas gigantes mas
   subtitulo mas tres cifras y no cabia en una pantalla; ahora el titular cabe
   solo y las cifras salen POR DENTRO de la O, que es donde tienen sitio. */
.mh-hold{position:relative}
.sfx .mh-hold{height:calc(var(--vhu) * var(--h-mh, 4.4));z-index:0}
#mt-hero{position:relative;height:var(--vhu);min-height:520px;overflow:hidden;
 background:var(--dark);background-image:var(--dots-d);background-size:30px 30px}
.sfx #mt-hero{position:sticky;top:0}


.mh-title{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;
 align-items:center;justify-content:center;text-align:center;
 padding:calc(var(--navh) + 20px) clamp(20px,5vw,52px) clamp(30px,5vh,60px);
 will-change:transform,opacity,filter}
.mh-kick{display:block;font-family:var(--body);font-weight:600;font-size:clamp(11px,1.2vw,13px);
 letter-spacing:.2em;text-transform:uppercase;color:#F0794F;margin-bottom:clamp(10px,1.8vh,18px)}
.mh-kick::before{content:'';display:inline-block;width:24px;height:1px;background:#F0794F;
 vertical-align:middle;margin-right:10px}
.mh-h1{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:-.025em;
 line-height:.88;font-size:clamp(46px,min(11vw,16vh),172px);max-width:12ch;margin:0;color:var(--cream)}
.mh-h1 .o{display:inline}
.mh-h1 .bl{display:inline-block;width:0;height:0;vertical-align:baseline}
.mh-h1 .xw{white-space:nowrap}
.mh-lead{margin-top:clamp(18px,2.6vh,30px);max-width:52ch;font-size:clamp(15px,1.7vw,19px);
 line-height:1.6;color:rgba(236,229,219,.7)}

/* Lo que sale por dentro de la letra. En crema, no en el rojo de marca: por el
   ojo de la O se ve un trozo pequeno y un granate a ese tamano parece una
   mancha. El crema ademas da el contraste que pide el momento — se sale de lo
   oscuro y se entra en lo claro.
   Ningun tono blanco en el degradado: sobre el fondo oscuro, un centro casi
   blanco a media opacidad se lee como un foco, no como papel. Todo el rango
   se queda dentro de la familia crema de la marca. */
.mh-rev{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;
 color:var(--dark);
 background:radial-gradient(120% 90% at 50% 45%,var(--paper) 0%,var(--cream) 46%,var(--bg-alt) 100%)}
.sfx .mh-rev{position:absolute;inset:0;opacity:0}
.mh-in{position:relative;text-align:center;max-width:min(1100px,92vw);
 padding:clamp(40px,7vh,86px) clamp(20px,5vw,52px)}
.sfx .mh-in{opacity:0}
.mh-in h2{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:-.02em;
 line-height:.9;font-size:clamp(26px,min(4.4vw,6.4vh),64px);max-width:17ch;margin:0 auto;
 color:var(--dark)}
/* ── La cadena de los cuatro pasos ────────────────────────────────────────
   Cuatro nombres y tres traspasos, uno debajo de otro. La linea que los une NO
   es decoracion: es el argumento de la pagina. Va en <ol> porque es una
   secuencia de verdad — un lector de pantalla anuncia "lista de 7 elementos, en
   orden" y eso es exactamente lo que hay que entender.
   Se alinea a la izquierda dentro de un panel centrado: una cadena centrada
   pierde el eje vertical y deja de leerse como una cadena. */
.mh-cad{list-style:none;margin:clamp(26px,4vh,44px) auto 0;padding:0;
 width:max-content;max-width:100%;text-align:left}
.mh-paso{display:flex;align-items:baseline;gap:clamp(12px,1.6vw,20px)}
.mh-paso b{font-family:var(--display);font-weight:800;line-height:1;
 font-size:clamp(15px,1.6vw,19px);color:var(--accent);letter-spacing:.06em;
 min-width:2.4ch}
.mh-paso span{font-family:var(--display);font-weight:800;text-transform:uppercase;
 letter-spacing:-.01em;line-height:1;font-size:clamp(26px,3.4vw,44px);color:var(--dark)}
.mh-paso i{font-style:normal;font-family:var(--body);font-size:11px;font-weight:600;
 letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
 padding:4px 9px;border-radius:100px;box-shadow:inset 0 0 0 1px var(--line);
 align-self:center;margin-left:4px}

/* El traspaso: la linea vertical arranca bajo el numero del paso de arriba, y
   el texto va al lado. Sangria calculada con el mismo hueco que el paso, para
   que la linea caiga exactamente bajo la cifra. */
.mh-salto{position:relative;margin-left:calc(1.2ch + 1px);
 padding:clamp(9px,1.4vh,15px) 0 clamp(9px,1.4vh,15px) clamp(22px,2.4vw,32px);
 border-left:2px solid rgba(199,42,8,.28);
 font-size:clamp(13px,1.4vw,15px);line-height:1.45;color:var(--muted);max-width:38ch}
.mh-salto::before{content:'';position:absolute;left:-6px;bottom:-1px;
 width:10px;height:10px;border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);
 transform:rotate(45deg)}
@media(max-width:760px){
 .mh-cad{width:100%}
 .mh-salto{max-width:none}
}

/* ── El carrete de cifras ────────────────────────────────────────────────
   Las escenas de /about/ pero sin foto: aqui la protagonista es la cifra, a
   tamano descomunal, y lo que se releva es una tras otra sobre el mismo
   fondo. La foto no hace falta cuando el numero ya es la imagen. */
.ms-hold{position:relative}
.sfx .ms-hold{height:calc(var(--vhu) * var(--h-pasos, 4.8));z-index:1;
 margin-top:calc(var(--vhu) * -2)}
.ms-stage{position:relative;background:var(--dark);background-image:var(--dots-d);
 background-size:30px 30px;padding:clamp(40px,7vh,80px) 0}
.sfx #msStage{will-change:opacity,filter}
.sfx #mt-hero{will-change:opacity}
.sfx .ms-stage{position:sticky;top:0;height:var(--vhu);overflow:hidden;padding:0}

.ms-scenes{position:relative}
.sfx .ms-scenes{position:absolute;inset:0;display:grid;place-items:center;
 padding:calc(var(--navh) + 20px) clamp(20px,5vw,64px) clamp(30px,6vh,70px)}
.ms-scene{max-width:min(1240px,92vw);margin:0 auto;padding:clamp(30px,5vh,54px) clamp(20px,5vw,52px);
 border-bottom:1px solid rgba(236,229,219,.12)}
.ms-scene:last-child{border-bottom:0}
/* Dos columnas: la cifra a un lado y el texto al otro. Ademas de aprovechar
   el ancho, es lo que hace que se vea que entran desde lados opuestos — en
   una sola columna las dos velocidades no se distinguen. */
.sfx .ms-scene{grid-area:1/1;width:100%;padding:0;border-bottom:0;opacity:0;
 display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
 gap:clamp(20px,3.6vw,60px);align-items:center}
.sfx .ms-col{min-width:0}
@media(max-width:900px){
 .sfx .ms-scene{grid-template-columns:1fr;gap:clamp(12px,2vh,20px);align-content:center}
}
.sfx .ms-scene:first-child{opacity:1}

.ms-tag{font-size:11px;font-weight:700;letter-spacing:.19em;text-transform:uppercase;
 color:#F0794F;display:flex;align-items:center;gap:11px;flex-wrap:wrap;margin:0}
.ms-tag i{font-style:normal;font-weight:500;color:rgba(236,229,219,.45)}

/* El logotipo del cliente, en pastilla clara. Los logos son de tinta oscura y
   sobre el fondo de la escena desaparecerian; pasarlos a silueta crema
   destruiria los que tienen detalle dentro. La pastilla los deja intactos y
   ademas encaja con el lenguaje de tarjetas del resto del sitio. */
.ms-logo{display:inline-flex;align-items:center;justify-content:center;background:var(--paper);
 border-radius:16px;padding:clamp(12px,1.4vw,20px) clamp(16px,2vw,26px);
 width:clamp(190px,22vw,320px);height:clamp(96px,11vw,160px);
 margin-bottom:clamp(13px,2vh,20px);will-change:transform}
/* La caja es FIJA y la imagen la llena por dentro con object-fit:contain. Antes
   estaba con max-height/max-width y width:auto, y eso nunca agranda: un
   logotipo que viene a 127 px de ancho se pintaba a 127 px y punto, daba igual
   el hueco que tuviera. De ahi que se siguieran sin ver.
   Con la caja fija, el cuadrado usa todo el alto y el apaisado todo el ancho, y
   los cuatro acaban pesando lo mismo. El tamano de la caja esta puesto contra
   la resolucion real de los archivos —el mayor sube 1,15x, nada que se note—
   asi que no hay ninguno pixelado. */
.ms-logo img{width:100%;height:100%;object-fit:contain;display:block}

/* La cifra. Es lo unico que tiene que verse desde el otro lado de la sala. */
.ms-n{font-family:var(--display);font-weight:800;line-height:.78;letter-spacing:-.03em;
 font-size:clamp(88px,min(22vw,32vh),320px);margin:clamp(8px,1.4vh,18px) 0 0;
 white-space:nowrap;color:var(--cream);will-change:transform}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
 .ms-n{background-image:linear-gradient(180deg,#F0794F 0%,#F6A277 40%,#ECE5DB 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
}
.ms-n small{font-family:var(--body);font-weight:500;font-size:clamp(14px,1.6vw,20px);
 letter-spacing:0;-webkit-text-fill-color:rgba(236,229,219,.6);color:rgba(236,229,219,.6);
 margin-left:clamp(10px,1.4vw,18px)}
.ms-t{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:-.02em;
 line-height:.92;font-size:clamp(22px,min(3.6vw,5.4vh),54px);max-width:20ch;
 margin:0;color:var(--cream);will-change:transform}
.sfx .ms-col + .ms-col .ms-tag{margin-bottom:clamp(12px,2vh,20px)}
.ms-d{margin:clamp(10px,1.6vh,18px) 0 0;max-width:46ch;font-size:clamp(15px,1.6vw,18px);
 line-height:1.62;color:rgba(236,229,219,.68);will-change:transform}


/* ── Los cuatro pasos, sobre el fondo fijo ───────────────────────────────── */
.ms-paso{max-width:min(1240px,92vw);margin:0 auto;padding:clamp(30px,5vh,54px) clamp(20px,5vw,52px);
 border-bottom:1px solid rgba(236,229,219,.12)}
.ms-paso:last-child{border-bottom:0}
/* Dos columnas: el numero y el nombre a un lado, lo que pasa al otro. Ademas
   de aprovechar el ancho, es lo que hace que se vea que entran desde lados
   opuestos — en una sola columna las dos velocidades no se distinguen. */
.sfx .ms-paso{grid-area:1/1;width:100%;padding:0;border-bottom:0;opacity:0;
 display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
 gap:clamp(20px,3.6vw,60px);align-items:center}
.sfx .ms-col{min-width:0}
@media(max-width:900px){
 .sfx .ms-paso{grid-template-columns:1fr;gap:clamp(12px,2vh,20px);align-content:center}
}
.sfx .ms-paso:first-child{opacity:1}

.ms-n{font-family:var(--display);font-weight:800;line-height:.78;letter-spacing:-.03em;
 font-size:clamp(72px,min(17vw,26vh),240px);margin:0;color:var(--cream);will-change:transform}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
 .ms-n{background-image:linear-gradient(180deg,#F0794F 0%,#F6A277 40%,#ECE5DB 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
}
.ms-nombre{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:-.02em;
 line-height:.92;font-size:clamp(30px,min(5vw,7vh),72px);margin:clamp(4px,.8vh,10px) 0 0;
 color:var(--cream);will-change:transform}
.ms-t{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:-.02em;
 line-height:.98;font-size:clamp(19px,min(2.8vw,4.2vh),40px);max-width:24ch;
 margin:0 0 clamp(10px,1.6vh,18px);color:var(--cream);will-change:transform}
.ms-d{margin:0 0 clamp(12px,1.8vh,20px);max-width:52ch;font-size:clamp(14.5px,1.5vw,17px);
 line-height:1.65;color:rgba(236,229,219,.68);will-change:transform}
.ms-d b{color:var(--cream);font-weight:600}
/* Lista de comprobacion dentro de un paso. Marca de verificacion dibujada con
   bordes, no un caracter: un tipo de letra que no cargue deja el simbolo en
   cuadrado, y aqui lo que importa es que se lea como "esto se comprueba". */
.ms-check{list-style:none;margin:clamp(14px,2vh,20px) 0 0;display:grid;gap:9px}
.ms-check li{position:relative;padding-left:26px;font-size:clamp(13.5px,1.4vw,15px);
 line-height:1.5;color:rgba(236,229,219,.72)}
.ms-check li::before{content:'';position:absolute;left:2px;top:5px;width:11px;height:6px;
 border-left:2px solid #F0794F;border-bottom:2px solid #F0794F;transform:rotate(-45deg)}
.ms-check b{color:var(--cream);font-weight:600}
.ms-tags{display:flex;flex-wrap:wrap;gap:8px;will-change:transform}
.ms-tags span{font-size:11.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
 border:1px solid rgba(236,229,219,.22);border-radius:100px;padding:7px 14px;
 color:rgba(236,229,219,.62)}

/* ── Lo que no cambia: sube por delante y tapa los pasos ─────────────────── */
#mt-fijo{padding:clamp(56px,8vw,104px) 0 clamp(64px,9vw,120px);background:var(--bg);color:var(--dark)}
.sfx #mt-fijo{position:relative;z-index:1;margin-top:calc(var(--vhu) * -2);
 border-radius:clamp(20px,2.6vw,36px) clamp(20px,2.6vw,36px) 0 0;
 box-shadow:0 -30px 76px rgba(0,0,0,.62)}
.mt-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
 gap:clamp(14px,1.8vw,22px);margin-top:clamp(28px,4vh,46px)}
.mt-card{background:var(--paper);border:1px solid var(--line);border-radius:16px;
 padding:clamp(22px,2.6vw,30px)}
.mt-card h3{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:-.01em;
 line-height:1.05;font-size:clamp(18px,2vw,23px);margin-bottom:9px}
.mt-card p{font-size:14.5px;line-height:1.65;color:var(--muted)}

#mt-fin{background:var(--dark);color:var(--cream);text-align:center;padding:clamp(64px,9vw,110px) 0}
.sfx #mt-fin{position:relative;z-index:2}
#mt-fin h2{margin:0 auto;max-width:17ch}
#mt-fin .lead{margin-left:auto;margin-right:auto;color:rgba(236,229,219,.66)}
#mt-fin .eyebrow{color:#F0794F}#mt-fin .eyebrow::before{background:#F0794F}
.ms-go{margin-top:clamp(14px,2vh,20px);display:flex;flex-wrap:wrap;gap:8px 22px}
.ms-go .arrow{color:#F0794F}
.mt-lleva{list-style:none;max-width:620px;margin:clamp(22px,3.4vh,32px) auto 0;text-align:left;
 display:grid;gap:10px}
.mt-lleva li{position:relative;padding-left:26px;font-size:clamp(14px,1.5vw,16px);
 line-height:1.55;color:rgba(236,229,219,.78)}
.mt-lleva li::before{content:'';position:absolute;left:2px;top:8px;width:11px;height:6px;
 border-left:2px solid #F0794F;border-bottom:2px solid #F0794F;transform:rotate(-45deg)}
.mt-lleva b{color:var(--cream);font-weight:600}
.mt-cta{display:flex;flex-wrap:wrap;gap:13px;justify-content:center;margin-top:clamp(24px,4vh,38px)}
#mt-fin .btn-l{box-shadow:inset 0 0 0 1.5px rgba(236,229,219,.34);color:var(--cream)}
#mt-fin .btn-l:hover{box-shadow:inset 0 0 0 1.5px var(--cream)}
#mt-hero :focus-visible,#mt-fin :focus-visible{outline-color:var(--cream)}


/* ═══════════════════════════════════════════════════════════════════════════
   LA MAQUINA — el formulario de /method/

   No se parece al de /contact/ a proposito. Alli es una rejilla clasica con un
   billete que se rellena al lado; aqui el formulario ES el metodo: cuatro
   pantallas, una por paso, con los mismos nombres y la misma numeracion que la
   seccion de arriba. Se responde una pregunta cada vez y el riel se va
   llenando. La pagina explica que el orden es lo que importa — esto lo hace.

   Sin JS se ven las cuatro pantallas seguidas y el boton de enviar: el estado
   de "una cada vez" vive bajo .mtf-on, que la pone el guion solo cuando
   confirma que puede llevarlo. Nada arranca oculto.
   ═══════════════════════════════════════════════════════════════════════════ */
#mtf{background:var(--dark);color:var(--cream);background-image:var(--dots-d);
 background-size:28px 28px;padding:clamp(58px,8vw,110px) 0 clamp(70px,10vw,130px)}
#mtf .eyebrow{color:#F0794F}#mtf .eyebrow::before{background:#F0794F}
#mtf .h2{max-width:20ch}
#mtf .lead{color:rgba(236,229,219,.66);max-width:60ch}

/* La losa roja detras. Es lo que hace que la tarjeta no parezca un formulario
   sino una pieza montada encima de algo. */
.mtf-maq{position:relative;max-width:940px;margin:clamp(30px,4.5vw,52px) auto 0}
.mtf-slab{position:absolute;left:clamp(10px,1.6vw,20px);right:calc(-1 * clamp(10px,1.6vw,20px));
 top:clamp(10px,1.6vw,20px);bottom:calc(-1 * clamp(10px,1.6vw,20px));
 background:var(--accent);border-radius:clamp(16px,2.2vw,26px);pointer-events:none}
.mtf-f{position:relative;background:var(--paper);color:var(--dark);
 border-radius:clamp(16px,2.2vw,26px);padding:clamp(22px,3.6vw,48px);
 box-shadow:0 30px 80px rgba(0,0,0,.5)}

/* El riel: cuatro tramos, uno por paso. */
.mtf-riel{list-style:none;display:flex;gap:6px;margin:0 0 clamp(20px,3vw,34px)}
.mtf-riel li{flex:1;height:4px;border-radius:99px;background:rgba(26,8,4,.13);
 transition:background .35s}
.mtf-riel li.on{background:var(--accent)}

.mtf-p{border:0;padding:0;margin:0 0 clamp(26px,4vw,42px);min-width:0}
/* La leyenda es para el lector de pantalla, no para la vista: el numero y el
   nombre del paso ya lo dicen visualmente. */
.mtf-p legend{position:absolute;width:1px;height:1px;overflow:hidden;
 clip-path:inset(50%);white-space:nowrap}
.mtf-p:last-of-type{margin-bottom:0}
.mtf-cab{display:flex;align-items:baseline;gap:12px;margin-bottom:clamp(10px,1.6vw,16px)}
.mtf-num{font-family:var(--display);font-weight:800;font-size:clamp(30px,4.4vw,54px);
 line-height:.8;color:var(--accent);letter-spacing:-.02em}
.mtf-paso{font-family:var(--display);font-weight:800;text-transform:uppercase;
 letter-spacing:.14em;font-size:12px;color:var(--muted)}
.mtf-q{font-family:var(--display);font-weight:800;text-transform:uppercase;
 letter-spacing:-.02em;line-height:.94;font-size:clamp(25px,4.2vw,50px);
 margin:0 0 clamp(14px,2.2vw,24px)}
.mtf-ayuda{font-size:14px;color:var(--muted);margin:-6px 0 16px}

/* Campos: sin caja, solo una linea gorda. Escribir encima de un filete se
   parece mas a rellenar un parte que a rellenar un formulario web. */
.mtf-campo + .mtf-campo{margin-top:clamp(14px,2.2vw,22px)}
.mtf-l{display:block;font-size:11px;font-weight:700;letter-spacing:.16em;
 text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.mtf-i{width:100%;border:0;border-bottom:3px solid rgba(26,8,4,.18);background:transparent;
 font-family:var(--body);font-weight:500;color:var(--dark);
 font-size:clamp(17px,2.1vw,24px);padding:9px 2px;border-radius:0;
 transition:border-color .25s}
.mtf-i::placeholder{color:rgba(122,82,72,.45)}
.mtf-i:focus{outline:0;border-bottom-color:var(--accent)}
.mtf-i[aria-invalid="true"]{border-bottom-color:var(--accent)}

/* El paso 3 no es un desplegable: son botones grandes. En un movil un <select>
   con siete opciones es una ruleta del sistema; asi se lee todo de golpe. */
.mtf-op{display:grid;gap:8px}
.mtf-op button{display:block;width:100%;text-align:left;cursor:pointer;
 font-family:var(--body);font-size:15px;font-weight:500;line-height:1.4;
 color:var(--dark);background:rgba(26,8,4,.045);border:1.5px solid transparent;
 border-radius:12px;padding:13px 16px;min-height:48px;transition:background .2s,border-color .2s}
.mtf-op button:hover{background:rgba(26,8,4,.08)}
.mtf-op button[aria-pressed="true"]{border-color:var(--accent);background:rgba(199,42,8,.09)}

.mtf-pie{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
 margin-top:clamp(20px,3vw,32px);padding-top:clamp(18px,2.6vw,26px);
 border-top:1px solid var(--line)}
.mtf-atras{display:none;background:0;border:0;cursor:pointer;font-family:var(--body);
 font-size:14px;font-weight:600;color:var(--muted);padding:12px 4px;min-height:44px}
.mtf-atras:hover{color:var(--dark)}
.mtf-sig{display:none}
.mtf-tecla{font-size:12.5px;color:var(--muted)}
.mtf-tecla kbd{font-family:var(--body);font-weight:700;background:rgba(26,8,4,.07);
 border-radius:5px;padding:2px 6px;font-size:11.5px}
.mtf-nota{flex:1;min-width:200px;font-size:12.5px;color:var(--muted)}
.mtf-err{margin:14px 0 0;font-size:14px;font-weight:600;color:var(--accent-dk)}
.mtf-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

/* ── El estado "una pantalla cada vez" ── */
.mtf-on .mtf-p{display:none}
.mtf-on .mtf-p.act{display:block;animation:mtfEntra .42s cubic-bezier(.2,.7,.3,1) both}
.mtf-on .mtf-atras,.mtf-on .mtf-sig{display:inline-flex}
.mtf-on .mtf-atras[hidden]{display:none}
.mtf-on .mtf-enviar{display:none}
.mtf-on.fin .mtf-enviar{display:inline-flex}
.mtf-on.fin .mtf-sig{display:none}
@keyframes mtfEntra{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}

/* ── El parte firmado: la pantalla de gracias ── */
.mtf-ok{display:none;text-align:left}
.mtf-f.hecho .mtf-riel,.mtf-f.hecho .mtf-p,.mtf-f.hecho .mtf-pie{display:none}
.mtf-f.hecho .mtf-ok{display:block}
.mtf-sello{display:inline-block;font-family:var(--display);font-weight:800;
 text-transform:uppercase;letter-spacing:.12em;font-size:13px;color:var(--accent);
 border:2.5px solid var(--accent);border-radius:8px;padding:7px 13px;
 transform:rotate(-3deg);margin-bottom:18px}
.mtf-ok h3{font-family:var(--display);font-weight:800;text-transform:uppercase;
 letter-spacing:-.02em;font-size:clamp(24px,3.4vw,40px);line-height:.96;margin:0 0 14px}
.mtf-ok p{font-size:15px;line-height:1.65;color:var(--muted);margin:0 0 12px}
.mtf-ok p b{color:var(--dark);font-weight:600}

@media(max-width:620px){
 .mtf-cab{gap:9px}
 .mtf-slab{left:8px;right:-8px;top:8px;bottom:-8px}
}
@media(prefers-reduced-motion:reduce){.mtf-on .mtf-p.act{animation:none}}