/* EQ Muscle Logic — estilos del sitio
   Una sola apariencia, oscura por decisión de marca (paleta de las Convenciones de entregables). */
@font-face{font-family:"Chakra Petch";font-weight:500;font-display:swap;src:url(fonts/chakra-petch-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Chakra Petch";font-weight:600;font-display:swap;src:url(fonts/chakra-petch-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Chakra Petch";font-weight:700;font-display:swap;src:url(fonts/chakra-petch-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Archivo";font-weight:400;font-display:swap;src:url(fonts/archivo-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Archivo";font-weight:500;font-display:swap;src:url(fonts/archivo-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Archivo";font-weight:600;font-display:swap;src:url(fonts/archivo-latin-600-normal.woff2) format("woff2")}

:root{
  --bg:#111110; --panel:#191918; --panel-2:#201F1E; --line:#2C2B2A; --line-2:#3A3937;
  --fg:#EDEBE9; --fg-2:#C9C5C1; --fg-3:#9A958F;
  --red:#E31E26; --red-hi:#EA1C25; --red-lo:#B11B22; --red-text:#FF5A5F;
  --cyan:#3FB6CC; --amber:#D9A441; --green:#2FB57A;
  --display:"Chakra Petch",ui-monospace,"SF Mono",Menlo,monospace;
  --body:"Archivo","Helvetica Neue",Arial,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--cyan)}
a:hover{color:#7FD3E2}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
h1,h2,h3{font-family:var(--display);font-weight:700;text-wrap:balance;margin:0}
p{margin:0}

.wrap{max-width:1200px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.eyebrow{font-family:var(--display);font-size:14px;letter-spacing:.2em;text-transform:uppercase;color:var(--red-text)}
.h2{font-size:clamp(32px,4vw,44px);line-height:1.1;text-transform:uppercase}
.lead{max-width:62ch;color:var(--fg-2)}
.muted{color:var(--fg-3)}

/* Botones */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 30px;border-radius:4px;
  font-family:var(--display);font-weight:700;font-size:16px;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;cursor:pointer;border:0}
.btn-red{background:var(--red);color:#fff}
.btn-red:hover{background:var(--red-hi);color:#fff}
.btn-ghost{background:none;border:1px solid var(--line-2);color:var(--fg)}
.btn-ghost:hover{border-color:var(--fg-3);color:var(--fg)}

/* Barra superior */
.top{border-bottom:1px solid var(--line);background:var(--bg);position:sticky;top:0;z-index:10}
.top .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 24px;padding-block:12px}
.top .marca img{height:42px;width:auto}
.top nav{display:flex;flex-wrap:wrap;align-items:center;gap:4px 26px}
.top nav a{font-family:var(--display);font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg);text-decoration:none;padding:10px 0}
.top nav a:hover{color:var(--red-text)}
.top nav a.btn{padding:0 20px;min-height:44px;font-size:14px;color:#fff}
@media (max-width:760px){
  .top nav a:not(.btn){display:none}
  .top{position:static}
}

/* Panal de fondo */
.panal{position:relative;overflow:hidden}
.panal>canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.panal>.wrap{position:relative}

/* Encabezado */
.hero .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:48px;padding-block:80px 88px}
.hero-txt{flex:999 1 520px;min-width:0;display:flex;flex-direction:column;gap:26px}
.hero h1{font-size:clamp(44px,6.2vw,80px);line-height:1.02;text-transform:uppercase;letter-spacing:-.01em}
.hero h1 span{color:var(--red)}
.hero .lead{font-size:20px}
.hero-foto{flex:1 1 380px;display:flex;justify-content:center}
.hero-foto img{width:100%;max-width:440px}
.acciones{display:flex;flex-wrap:wrap;gap:14px;margin-top:6px}

section{scroll-margin-top:80px}
.bloque{padding-block:96px}
.borde{border-top:1px solid var(--line)}
.fondo{background:var(--panel);border-block:1px solid var(--line)}
.cabeza{display:flex;flex-direction:column;gap:12px;margin-bottom:44px}

/* Perfiles */
.perfiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}
.perfil{display:flex;flex-direction:column;gap:14px;padding:28px;background:var(--panel);border:1px solid var(--line);border-radius:6px;text-decoration:none;color:var(--fg);transition:border-color .2s}
.perfil:hover{border-color:var(--red-lo);color:var(--fg)}
.perfil b{font-family:var(--display);font-size:22px;line-height:1.2}
.perfil span{color:var(--fg-2);font-size:16px}
.perfil em{margin-top:auto;font-style:normal;font-family:var(--display);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan)}
.hexnum{width:34px;height:38px}

/* Método */
.principios{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.principio{display:flex;flex-wrap:wrap;gap:12px 40px;padding-block:32px;border-bottom:1px solid var(--line)}
.principio .n{flex:0 0 72px;font-family:var(--display);font-weight:700;font-size:44px;line-height:1;color:var(--red)}
.principio .t{flex:999 1 420px;min-width:0;display:flex;flex-direction:column;gap:10px}
.principio h3{font-size:26px;line-height:1.2}
.principio p{max-width:72ch;color:var(--fg-2)}
.citas{display:flex;flex-wrap:wrap;gap:6px 16px;font-family:var(--display);font-size:14px;letter-spacing:.06em}
.citas span{color:var(--fg-3)}
.criterio{font-family:var(--display);font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--amber)}

/* Pasos */
.pasos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px}
.paso{display:flex;flex-direction:column;gap:10px;padding:24px;background:var(--bg);border:1px solid var(--line);border-radius:6px}
.paso small{font-family:var(--display);font-size:13px;letter-spacing:.16em;color:var(--fg-3)}
.paso b{font-family:var(--display);font-size:22px}
.paso span{color:var(--fg-2);font-size:16px}
.dos{margin-top:56px;display:flex;flex-wrap:wrap;gap:36px 64px}
.dos>div{flex:1 1 300px;min-width:0}
.dos h3{font-size:24px;text-transform:uppercase;margin-bottom:20px}
.chk{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.chk li{display:flex;gap:14px;align-items:flex-start}
.chk svg{flex:none;margin-top:2px}

/* App */
.capturas{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:36px}
.captura{margin:0;display:flex;flex-direction:column;gap:18px}
.marco{align-self:center;width:100%;max-width:320px;padding:10px;background:var(--panel);border:1px solid var(--line);border-radius:28px}
.marco img{border-radius:20px;width:100%}
.captura figcaption{display:flex;flex-direction:column;gap:6px}
.captura b{font-family:var(--display);font-size:20px}
.captura span{color:var(--fg-2);font-size:16px}

/* Herramientas (banda) */
.banda .wrap{display:flex;flex-wrap:wrap;gap:32px 64px;align-items:center;padding-block:80px}
.banda .wrap>div:first-child{flex:999 1 460px;min-width:0;display:flex;flex-direction:column;gap:14px}
.enlaces{flex:1 1 320px;display:flex;flex-direction:column;gap:12px}
.enlaces a{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:18px 22px;background:var(--bg);border:1px solid var(--line-2);border-radius:6px;color:var(--fg);text-decoration:none;font-family:var(--display);font-weight:600;font-size:18px}
.enlaces a:hover{border-color:var(--fg-3);color:var(--fg)}
.enlaces a span{color:var(--cyan)}

/* Quién soy */
.yo .wrap{display:flex;flex-wrap:wrap;gap:48px;align-items:center}
.yo .wrap>div:first-child{flex:1 1 240px;display:flex;justify-content:center}
.yo img{width:100%;max-width:280px}
.yo .wrap>div:last-child{flex:999 1 480px;min-width:0;display:flex;flex-direction:column;gap:18px}
.yo p{max-width:68ch;color:var(--fg-2)}

/* Cierre */
.cierre .wrap{max-width:900px;padding-block:104px;display:flex;flex-direction:column;align-items:center;gap:22px;text-align:center}
.cierre h2{font-size:clamp(36px,5vw,56px);line-height:1.05;text-transform:uppercase}

/* Pie */
.pie{border-top:1px solid var(--line)}
.pie .wrap{padding-block:36px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px 32px;font-size:14px;color:var(--fg-3)}
.pie .izq{display:flex;flex-wrap:wrap;align-items:center;gap:10px 24px}
.pie img{height:30px;width:auto}
.pie a{color:var(--fg-2)}
.pie p{max-width:52ch}

/* Formulario */
.form-wrap{max-width:760px;margin:0 auto;padding-block:72px 96px;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.form-wrap h1{font-size:clamp(38px,5vw,52px);line-height:1.05;text-transform:uppercase;margin:12px 0 14px}
form{display:flex;flex-direction:column;gap:30px;margin-top:40px}
.fila{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.campo{display:flex;flex-direction:column;gap:8px}
.campo label,legend{font-family:var(--display);font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-2)}
.campo small{color:var(--fg-3);font-size:14px}
input[type=text],input[type=tel],select,textarea{min-height:50px;padding:0 14px;background:var(--panel);border:1px solid var(--line-2);border-radius:4px;color:var(--fg);font:inherit;width:100%}
textarea{padding:12px 14px;resize:vertical;min-height:110px}
input:focus,select:focus,textarea:focus{border-color:var(--cyan);outline:none}
fieldset{margin:0;padding:0;border:0;display:flex;flex-direction:column;gap:12px}
legend{padding:0;margin-bottom:12px}
.opciones{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.opcion{position:relative}
.opcion input{position:absolute;opacity:0;inset:0;cursor:pointer}
.opcion span{display:flex;align-items:center;min-height:52px;padding:12px 16px;background:var(--panel);border:1px solid var(--line-2);border-radius:4px;font-size:16px}
.opcion input:checked+span{background:rgba(227,30,38,.14);border-color:var(--red);color:#fff}
.opcion input:focus-visible+span{outline:2px solid var(--cyan);outline-offset:2px}
.acepto{display:flex;gap:12px;align-items:flex-start;color:var(--fg-2);font-size:16px}
.acepto input{width:22px;height:22px;margin:2px 0 0;accent-color:var(--red);flex:none}
.error{color:var(--red-text);font-size:15px}
.aviso{padding:16px 18px;background:var(--panel);border:1px solid var(--line);border-radius:6px;color:var(--fg-2);font-size:15px}
.listo{display:flex;flex-direction:column;gap:18px;padding:36px;background:var(--panel);border:1px solid var(--line);border-radius:6px;margin-top:40px}
.listo h2{font-size:30px;text-transform:uppercase}

/* Texto legal */
.legal{max-width:760px;margin:0 auto;padding-block:72px 96px;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.legal h1{font-size:clamp(34px,4.5vw,46px);text-transform:uppercase;margin:12px 0 24px}
.legal h2{font-size:22px;margin:36px 0 12px}
.legal p,.legal li{color:var(--fg-2);max-width:68ch}
.legal p+p{margin-top:12px}
.legal ul{padding-left:22px;margin:12px 0 0;display:flex;flex-direction:column;gap:8px}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}