/* Pop-up de salida · diagnóstico «dónde se te escapan los clientes» (P229/P230) */
.fmx{position:fixed;inset:0;z-index:9000;display:flex;align-items:center;justify-content:center;padding:34px 16px 16px;overflow-y:auto;pointer-events:none}
.fmx[hidden]{display:none!important}
.fmx-veil{position:fixed;inset:0;background:rgba(24,26,19,.74);opacity:0;transition:opacity .35s ease;pointer-events:auto}
.fmx.on .fmx-veil{opacity:1}
/* la tarjeta no recorta: así el borde rasgado puede salir por encima */
.fmx-sheet{position:relative;width:min(560px,100%);margin:auto;background:var(--ink,#181A13);color:var(--paper,#F0E4C8);
  padding:34px clamp(24px,5vw,40px) 30px;pointer-events:auto;transform:translateY(40px);opacity:0;
  transition:transform .5s cubic-bezier(.215,.61,.355,1),opacity .35s ease}
.fmx.on .fmx-sheet{transform:none;opacity:1}
.fmx-sheet::before{content:"";position:absolute;inset:0;background:url("../assets/textures/paper-fibre.png");background-size:420px;mix-blend-mode:screen;opacity:.045;pointer-events:none}
/* borde rasgado: el mismo papel tinta que sigue hacia arriba, cortado de forma irregular */
.fmx-sheet::after{content:"";position:absolute;left:0;right:0;bottom:100%;height:22px;background:var(--ink,#181A13);
  -webkit-mask:url("../assets/textures/torn-edge-mask-fix.png") center/100% 100% no-repeat;mask:url("../assets/textures/torn-edge-mask-fix.png") center/100% 100% no-repeat;
  transform:scaleY(-1);pointer-events:none}
.fmx-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;position:relative}
.fmx-top img{width:28px;height:28px}
.fmx-x{background:none;border:0;color:var(--oat,#E3CEA4);font:600 11px/1 var(--mono,"IBM Plex Mono",monospace);letter-spacing:.16em;text-transform:uppercase;cursor:pointer;padding:8px 0}
.fmx-x:hover{color:var(--ochre,#D0893B)}
.fmx-body{position:relative}
.fmx-tag{font:600 12px/1.4 var(--mono,"IBM Plex Mono",monospace);letter-spacing:.16em;text-transform:uppercase;color:var(--ochre,#D0893B);margin:0 0 12px}
.fmx h2{font:900 clamp(32px,5.6vw,48px)/.93 var(--head,"Barlow Condensed",sans-serif);text-transform:uppercase;color:var(--bone,#FCEBCA);margin:0 0 16px;letter-spacing:-.01em}
.fmx h3{font:900 clamp(24px,4vw,32px)/1 var(--head,"Barlow Condensed",sans-serif);text-transform:uppercase;color:var(--bone,#FCEBCA);margin:0 0 20px}
.fmx p{font:400 16px/1.55 var(--body,"IBM Plex Sans",sans-serif);margin:0 0 18px;max-width:48ch}
.fmx strong{color:var(--bone,#FCEBCA)}
.fmx-blocks{display:grid;grid-template-columns:1fr 1fr;gap:8px 18px;margin:0 0 24px;padding:0;list-style:none;font:400 12px/1.4 var(--mono,"IBM Plex Mono",monospace);letter-spacing:.1em;text-transform:uppercase;color:var(--oat,#E3CEA4)}
.fmx-blocks li{display:flex;gap:10px;align-items:center}
.fmx-blocks li::before{content:"";width:11px;height:11px;background:var(--ochre,#D0893B);flex:none;animation:fmxTitila 2.4s steps(1,end) infinite}
.fmx-blocks li:nth-child(2)::before{animation-delay:.6s}
.fmx-blocks li:nth-child(3)::before{animation-delay:1.2s}
.fmx-blocks li:nth-child(4)::before{animation-delay:1.8s}
@keyframes fmxTitila{0%,100%{opacity:1}12%{opacity:.18}24%{opacity:1}}
/* progreso: 8 celdas, como la retícula */
.fmx-prog{display:flex;gap:4px;margin:0 0 20px}
.fmx-prog i{flex:1;height:4px;background:rgba(240,228,200,.18)}
.fmx-prog i.on{background:var(--ochre,#D0893B)}
.fmx-opts{display:grid;gap:8px;margin:0}
.fmx-opt{display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:transparent;border:1px solid rgba(240,228,200,.32);color:var(--paper,#F0E4C8);
  font:400 16px/1.35 var(--body,"IBM Plex Sans",sans-serif);padding:14px 16px;border-radius:0;cursor:pointer;transition:border-color .15s,background .15s}
.fmx-opt::before{content:"";width:12px;height:12px;border:1.5px solid var(--oat,#E3CEA4);flex:none}
.fmx-opt:hover,.fmx-opt:focus-visible{border-color:var(--ochre,#D0893B);outline:none}
.fmx-opt.sel{background:rgba(208,137,59,.12);border-color:var(--ochre,#D0893B)}
.fmx-opt.sel::before{background:var(--ochre,#D0893B);border-color:var(--ochre,#D0893B)}
.fmx-back{background:none;border:0;color:var(--oat,#E3CEA4);font:400 12px/1 var(--mono,"IBM Plex Mono",monospace);letter-spacing:.1em;text-transform:uppercase;cursor:pointer;padding:16px 0 0}
.fmx-back:hover{color:var(--ochre,#D0893B)}
/* resultado */
.fmx-score{display:flex;align-items:baseline;gap:10px;margin:0 0 6px}
.fmx-score b{font:900 clamp(64px,12vw,96px)/.85 var(--head,"Barlow Condensed",sans-serif);color:var(--bone,#FCEBCA)}
.fmx-score span{font:600 14px/1 var(--mono,"IBM Plex Mono",monospace);letter-spacing:.12em;color:var(--oat,#E3CEA4)}
.fmx-bars{display:grid;gap:9px;margin:18px 0 22px;padding:0;list-style:none}
.fmx-bars li{display:grid;grid-template-columns:150px 1fr 34px;align-items:center;gap:12px;font:400 11px/1 var(--mono,"IBM Plex Mono",monospace);letter-spacing:.1em;text-transform:uppercase;color:var(--oat,#E3CEA4)}
.fmx-bars em{display:block;height:8px;background:rgba(240,228,200,.14);position:relative}
.fmx-bars em i{position:absolute;inset:0 auto 0 0;background:var(--paper,#F0E4C8)}
.fmx-bars li.weak{color:var(--ochre,#D0893B)}
.fmx-bars li.weak em i{background:var(--rust,#A44819)}
.fmx-bars b{font-weight:600;text-align:right}
.fmx form{display:grid;gap:10px}
.fmx input{width:100%;background:transparent;border:1px solid rgba(240,228,200,.4);color:var(--bone,#FCEBCA);font:400 16px/1.2 var(--body,"IBM Plex Sans",sans-serif);padding:14px;border-radius:0;outline:none}
.fmx input::placeholder{color:rgba(227,206,164,.62)}
.fmx input:focus{border-color:var(--ochre,#D0893B)}
.fmx .fmx-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.fmx-btn{margin-top:6px;background:var(--rust,#A44819);color:var(--bone,#FCEBCA);border:0;border-radius:0;padding:17px 18px;font:900 20px/1 var(--head,"Barlow Condensed",sans-serif);letter-spacing:.04em;text-transform:uppercase;text-align:left;cursor:pointer;display:flex;justify-content:space-between;width:100%;text-decoration:none}
.fmx-btn:hover{background:var(--ochre,#D0893B);color:var(--ink,#181A13)}
.fmx-btn[disabled]{opacity:.6;cursor:wait}
.fmx-err{font:600 12px/1.4 var(--mono,"IBM Plex Mono",monospace);color:var(--ochre,#D0893B);min-height:1em;margin:0}
.fmx-fix{margin:0 0 24px;padding:0;list-style:none;counter-reset:f;display:grid;gap:14px}
.fmx-fix li{counter-increment:f;display:grid;grid-template-columns:34px 1fr;gap:8px;font:400 15px/1.5 var(--body,"IBM Plex Sans",sans-serif)}
.fmx-fix li::before{content:"0" counter(f);font:900 26px/1 var(--head,"Barlow Condensed",sans-serif);color:var(--rust,#A44819)}
.fmx-next{border-top:1px solid rgba(240,228,200,.25);padding-top:20px}
.fmx-alt{display:block;margin-top:14px;font:400 12px/1.5 var(--mono,"IBM Plex Mono",monospace);color:var(--oat,#E3CEA4)}
.fmx-fade{animation:fmxIn .35s cubic-bezier(.215,.61,.355,1) both}
@keyframes fmxIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(max-width:480px){.fmx{padding:26px 0 0;align-items:flex-end}.fmx-sheet{margin:auto 0 0}.fmx-blocks{grid-template-columns:1fr}.fmx-bars li{grid-template-columns:132px 1fr 30px}}
@media(prefers-reduced-motion:reduce){.fmx-sheet,.fmx-veil{transition:none}.fmx-fade,.fmx-blocks li::before{animation:none}}

/* foco: sin el azul del navegador; contorno de marca solo al navegar con teclado (P235) */
.fmx-sheet:focus{outline:none}
.fmx button:focus,.fmx a:focus{outline:none}
.fmx button:focus-visible,.fmx a:focus-visible{outline:2px solid var(--ochre,#D0893B);outline-offset:3px}
.fmx-blocks-l{font:600 11px/1.4 var(--mono,"IBM Plex Mono",monospace)!important;letter-spacing:.16em;text-transform:uppercase;color:rgba(227,206,164,.7);margin:0 0 10px!important}
.fmx-load{height:10px;background:rgba(240,228,200,.14);margin:26px 0 16px;position:relative;overflow:hidden}
.fmx-load i{position:absolute;inset:0 auto 0 0;width:0;background:var(--ochre,#D0893B)}
.fmx-load-t{font:400 13px/1.4 var(--mono,"IBM Plex Mono",monospace)!important;letter-spacing:.1em;text-transform:uppercase;color:var(--oat,#E3CEA4);margin:0 0 8px!important;min-height:1.4em}
.fmx-note{font:400 11px/1.5 var(--mono,"IBM Plex Mono",monospace)!important;letter-spacing:.08em;color:rgba(227,206,164,.62);margin:12px 0 0!important}
.fmx-gate-t{margin:26px 0 14px!important}
.fmx-load-t.done{color:var(--ochre,#D0893B)}
