@font-face{font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap;src:url(/fonts/inter-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap;src:url(/fonts/inter-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500 700;font-display:swap;src:url(/fonts/spacegrotesk-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500 700;font-display:swap;src:url(/fonts/spacegrotesk-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
/* BIO KINGDOM · Formulario de evaluación (sitio aparte).
   Diseño minimalista: una sola columna centrada, una sección a la vez, fondo con luz suave que cubre toda la pantalla. */
:root{
  --bg:#121212; --text:#F3F1EE; --mute:#B9B6B0; --dim:#8F8C86;
  --orange:#FF6A00; --amber:#FFB26B; --line:rgba(255,255,255,.11); --line2:rgba(255,255,255,.22);
  --red:#FF8A7A; --ease:cubic-bezier(.2,.8,.2,1);
  --display:'Space Grotesk',system-ui,sans-serif; --body:'Inter',system-ui,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font:400 17px/1.6 var(--body);-webkit-font-smoothing:antialiased;min-height:100vh;overflow-x:hidden}
a{color:inherit}
h1,h2{font-family:var(--display);line-height:1.04;letter-spacing:-.02em;margin:0;text-wrap:balance}

/* fondo: luz suave repartida por toda la pantalla (no solo a un lado) */
.bgfx{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:
  radial-gradient(120% 90% at 50% 50%,transparent 55%,rgba(0,0,0,.55) 100%)}
.bgfx i{position:absolute;border-radius:50%;filter:blur(40px);will-change:transform}
.bgfx .o1{width:62vmax;height:62vmax;left:-22vmax;top:-26vmax;background:radial-gradient(circle,rgba(255,106,0,.30),rgba(255,106,0,0) 64%);animation:d1 42s ease-in-out infinite alternate}
.bgfx .o2{width:58vmax;height:58vmax;right:-24vmax;bottom:-28vmax;background:radial-gradient(circle,rgba(255,140,40,.26),rgba(255,140,40,0) 64%);animation:d2 48s ease-in-out infinite alternate}
.bgfx .o3{width:34vmax;height:34vmax;left:50%;top:44%;margin:-17vmax 0 0 -17vmax;background:radial-gradient(circle,rgba(255,106,0,.08),rgba(255,106,0,0) 66%)}
.bgfx .grid{inset:0;border-radius:0;filter:none;background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);background-size:72px 72px;-webkit-mask-image:radial-gradient(70% 60% at 50% 45%,#000,transparent 78%);mask-image:radial-gradient(70% 60% at 50% 45%,#000,transparent 78%)}
@keyframes d1{to{transform:translate3d(6vmax,5vmax,0) scale(1.08)}}
@keyframes d2{to{transform:translate3d(-6vmax,-4vmax,0) scale(1.1)}}

/* barra superior */
.topbar{position:fixed;left:0;right:0;top:0;height:3px;z-index:30;background:rgba(255,255,255,.06)}
.topbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--orange),var(--amber));box-shadow:0 0 16px rgba(255,106,0,.8);transition:width .6s var(--ease)}
.fh{position:fixed;left:0;right:0;top:3px;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px max(22px,env(safe-area-inset-left,0px)) 14px max(22px,env(safe-area-inset-right,0px))}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;font:700 .98rem var(--display);letter-spacing:.1em}
.brand img{width:34px;height:34px;border-radius:9px}
.fh .right{display:flex;align-items:center;gap:16px}
.stepinfo{font:600 .86rem var(--display);letter-spacing:.14em;color:var(--mute);font-variant-numeric:tabular-nums}
.back{font:500 .88rem var(--display);color:var(--dim);text-decoration:none;transition:color .2s}
.back:hover{color:#fff}

/* flujo */
.flow{position:relative;z-index:1;max-width:660px;margin:0 auto;padding:112px max(22px,env(safe-area-inset-left,0px)) 150px max(22px,env(safe-area-inset-right,0px))}
.fstep{display:none}
.fstep.on{display:block;animation:stepin .55s var(--ease)}
@keyframes stepin{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.sec{font:600 .78rem var(--display);letter-spacing:.24em;text-transform:uppercase;color:var(--orange);margin:0 0 30px;display:flex;align-items:center;gap:12px}
.sec::before{content:"";width:26px;height:1px;background:var(--orange)}
.sub{color:var(--mute);margin:-12px 0 30px;font-size:.98rem;max-width:52ch}

/* bienvenida */
.welcome{text-align:center;padding-top:7vh}
.welcome.on{display:block}
.wlogo{width:72px;height:72px;border-radius:20px;margin:0 auto 34px;display:block;box-shadow:0 20px 60px -16px rgba(255,106,0,.7)}
.welcome h1{font-size:clamp(2.3rem,6vw,3.6rem)}
.welcome h1 em{font-style:normal;color:var(--orange);text-shadow:0 0 44px rgba(255,106,0,.55)}
.wsub{color:var(--mute);margin:18px auto 0;max-width:34ch}
.wcta{margin-top:40px}
body.is-welcome .fh .stepinfo{display:none}

/* campos */
.field{margin-bottom:34px}
.field>label,.field .lab{display:block;font:600 1.12rem/1.35 var(--display);margin-bottom:12px;color:#fff}
.rq{font-style:normal;color:var(--orange);margin-left:2px}
.field .hint{display:block;font:400 .88rem/1.4 var(--body);color:var(--dim);margin-top:5px}
.field input[type=text],.field input[type=email],.field input[type=tel],.field input[type=number],.field input[type=date],.field input[type=time],.field select,.field textarea{width:100%;padding:17px 18px;border:1px solid var(--line);border-radius:14px;font:inherit;font-size:1.02rem;background:rgba(255,255,255,.05);color:var(--text);transition:border-color .25s,box-shadow .25s,background .25s}
.field input[type=date],.field input[type=time]{color-scheme:dark}
.field select option{background:#222}
.field textarea{min-height:104px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:#8f8c86}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--line2)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--orange);background:rgba(255,106,0,.07);box-shadow:0 0 0 4px rgba(255,106,0,.16)}
.row-phone{display:grid;grid-template-columns:200px 1fr;gap:12px}
.row-weight{display:grid;grid-template-columns:1fr 210px;gap:12px}
.opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.field label.opt,.consent label.opt{display:flex;align-items:center;gap:14px;margin:0;font:500 .98rem/1.35 var(--body);border:1px solid var(--line);border-radius:14px;padding:15px 16px;cursor:pointer;background:rgba(255,255,255,.04);transition:.25s var(--ease);color:var(--text)}
.field label.opt:hover,.consent label.opt:hover{border-color:var(--line2);transform:translateY(-1px)}
.opt input{appearance:none;-webkit-appearance:none;width:22px;height:22px;flex:none;margin:0;border:2px solid #77726b;border-radius:50%;transition:.2s;background:transparent}
.opt input[type=checkbox]{border-radius:7px}
.opt input:checked{background:var(--orange);border-color:var(--orange);box-shadow:0 0 14px rgba(255,106,0,.6)}
.opt input[type=radio]:checked{box-shadow:inset 0 0 0 4.5px #161616,0 0 14px rgba(255,106,0,.6)}
.opt input[type=checkbox]:checked{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B1B1B' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12.5l4.5 4.5L19 7.5'/></svg>");background-size:70%;background-repeat:no-repeat;background-position:center}
.opt input:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
.field label.opt:has(input:checked),.consent label.opt:has(input:checked){border-color:rgba(255,106,0,.7);background:rgba(255,106,0,.1);box-shadow:0 0 0 1px rgba(255,106,0,.25),0 14px 36px -18px rgba(255,106,0,.55)}
.scale{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:8px}
.scale.s10{gap:6px}
.field .scale label{margin:0;font:400 1rem var(--body)}
.scale input{position:absolute;opacity:0;pointer-events:none}
.scale span{display:grid;place-items:center;height:52px;border:1px solid var(--line);border-radius:13px;font:600 1.05rem var(--display);cursor:pointer;background:rgba(255,255,255,.04);transition:.25s var(--ease)}
.scale.s10 span{height:48px;font-size:.98rem;border-radius:11px}
.scale span:hover{border-color:var(--line2);transform:translateY(-2px)}
.scale label.lit span{background:rgba(255,106,0,.16);border-color:rgba(255,106,0,.45)}
.scale input:checked+span{background:linear-gradient(180deg,#ff8a2b,var(--orange));border-color:var(--orange);color:#1B1B1B;box-shadow:0 10px 28px -10px rgba(255,106,0,.8)}
.scale input:focus-visible+span{outline:2px solid var(--amber);outline-offset:2px}
.scale-note{display:flex;justify-content:space-between;font-size:.82rem;color:var(--dim);margin-top:8px}
.cond{display:none;margin-top:-10px}.cond.on{display:block;animation:stepin .4s var(--ease)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.consent{margin-top:6px}
.consent label.opt{align-items:flex-start;margin-bottom:12px;line-height:1.5;font-size:.92rem;color:var(--mute)}
.consent label.opt input{margin-top:2px}
.consent a{color:var(--orange)}
.err{color:var(--red);font-size:.9rem;margin-top:8px;display:none}
.field.bad .err{display:block}.field.bad input,.field.bad select,.field.bad textarea{border-color:var(--red)}
.field.bad label.opt{border-color:rgba(255,138,122,.5)}

/* botones */
.nav-btns{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:14px 0 0;padding:26px 0 0}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:15px 32px;border-radius:14px;border:1px solid transparent;cursor:pointer;font:600 1.02rem var(--display);text-decoration:none;transition:.25s var(--ease)}
.btn-primary{background:linear-gradient(180deg,#ff8a2b,var(--orange));color:#1B1B1B;box-shadow:0 12px 36px -12px rgba(255,106,0,.85),inset 0 1px 0 rgba(255,255,255,.3)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 48px -10px rgba(255,106,0,.95),inset 0 1px 0 rgba(255,255,255,.4)}
.btn-primary:disabled{opacity:.6;cursor:wait;transform:none}
.btn-ghost{background:rgba(18,18,18,.5);color:var(--text);border-color:var(--line2)}
.btn-ghost:hover{border-color:rgba(255,106,0,.6)}
.btn:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
.note{margin:0 0 20px;border-left:3px solid var(--orange);background:rgba(255,255,255,.05);border-radius:0 12px 12px 0;padding:14px 18px;color:var(--mute);font-size:.94rem}

/* gracias */
.gr{position:relative;z-index:1;max-width:680px;margin:0 auto;padding:120px 22px 90px;text-align:center}
.gr .rings{width:140px;height:140px;margin:0 auto 26px;display:block}
.gr .rings circle.p{transition:stroke-dasharray 1.4s var(--ease) .2s}
.gr h1{font-size:clamp(2.1rem,5vw,3.2rem);margin-bottom:14px}
.gr .lead{color:var(--mute);max-width:46ch;margin:0 auto}
.tl{list-style:none;margin:40px 0 0;padding:0;text-align:left;display:grid;gap:12px}
.tl li{display:flex;gap:18px;align-items:center;padding:18px 20px;border-radius:18px;border:1px solid var(--line);background:rgba(255,255,255,.045);opacity:0;transform:translateY(14px);animation:stepin .7s var(--ease) forwards}
.tl li:nth-child(1){animation-delay:.5s}.tl li:nth-child(2){animation-delay:.7s}.tl li:nth-child(3){animation-delay:.9s}
.tl .n{width:36px;height:36px;border-radius:50%;background:var(--orange);color:#1B1B1B;display:grid;place-items:center;font:700 .95rem var(--display);flex:none;box-shadow:0 0 22px rgba(255,106,0,.55)}
.tl b{font:600 1.04rem var(--display)}
.gr .acts{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:34px}
.testmode{display:inline-block;margin-top:18px;font:600 .74rem var(--display);letter-spacing:.14em;text-transform:uppercase;padding:6px 12px;border-radius:999px;border:1px dashed rgba(255,106,0,.6);color:var(--orange)}
.legal{position:relative;z-index:1;max-width:660px;margin:0 auto;padding:0 22px 36px;color:var(--dim);font-size:.8rem;line-height:1.55;text-align:center}

@media(max-width:700px){
 .flow{padding-top:96px;padding-bottom:120px}
 .nav-btns{position:fixed;left:0;right:0;bottom:0;z-index:25;margin:0;padding:26px 22px calc(18px + env(safe-area-inset-bottom,0px));background:linear-gradient(180deg,rgba(18,18,18,0),rgba(18,18,18,.94) 36%)}
 .opts,.row-phone,.row-weight{grid-template-columns:1fr}
 .field{margin-bottom:30px}
 .btn{padding:14px 24px}
 .brand span{display:none}
}
@media(prefers-reduced-motion:reduce){.bgfx i{animation:none}.fstep.on,.cond.on,.tl li{animation:none;opacity:1;transform:none}.topbar i,.gr .rings circle.p{transition:none}}

/* rendimiento */
body::after{mix-blend-mode:normal;opacity:.04}
.bgfx i{filter:none;animation:none}
.o1{background:radial-gradient(circle,rgba(255,106,0,.26),rgba(255,106,0,0) 64%)}


/* estilo Apple */
:root{--display:'Space Grotesk','Inter',system-ui,sans-serif;--bg:#0b0b0c}
body{background:#0b0b0c;letter-spacing:-.011em}
body::after{display:none}
h1,h2,.sec,.field>label,.field .lab{font-family:var(--display);font-weight:600;letter-spacing:-.03em}
.welcome h1{font-size:clamp(2.6rem,7vw,4.6rem);letter-spacing:-.045em}
.welcome h1 em{text-shadow:none}
.sec{text-transform:none;letter-spacing:.08em;font-size:.85rem}.sec::before{display:none}
.btn{border-radius:980px}
.btn-primary{background:#ff6a00;box-shadow:none;color:#111}
.btn-primary:hover{background:#ff7d22;transform:scale(1.03);box-shadow:none}
.btn-ghost{background:transparent;border:1.5px solid rgba(255,255,255,.28)}
.field input[type=text],.field input[type=email],.field input[type=tel],.field input[type=number],.field input[type=date],.field input[type=time],.field select,.field textarea{background:#161618;border:1px solid transparent;border-radius:16px}
.field input:focus,.field select:focus,.field textarea:focus{background:#161618;border-color:#ff6a00;box-shadow:0 0 0 4px rgba(255,106,0,.18)}
.field label.opt,.consent label.opt{background:#161618;border:1px solid transparent;border-radius:16px}
.field label.opt:has(input:checked),.consent label.opt:has(input:checked){background:rgba(255,106,0,.12);border-color:#ff6a00;box-shadow:none}
.scale span{background:#161618;border:0;border-radius:14px}
.scale input:checked+span{background:#ff6a00;box-shadow:none}
.wlogo{box-shadow:none}
.tl li{background:#161618;border:0;border-radius:22px}
.tl .n{box-shadow:none}
/* v12: reserva de espacio para que la pantalla no salte al cargar */
.flow{min-height:100vh}

.field.bad input[type]:not([type=radio]):not([type=checkbox]),.field.bad select,.field.bad textarea{border-color:#FF8A7A!important}
