/* Inicio experiencial de The AI Operator: bienvenida (3 aperturas) + preguntas + recorrido. Prefijo io- */
.io{position:fixed;inset:0;z-index:100;background:#080a0c;color:#e8efe8;overflow:hidden;font-family:system-ui,-apple-system,Segoe UI,sans-serif;opacity:0;transition:opacity .9s ease}
.io.on{opacity:1}
.io canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.io-frases{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;padding:0 8vw;text-align:center}
.io-f{position:absolute;max-width:900px;font-size:clamp(28px,5.4vw,66px);line-height:1.08;font-weight:600;letter-spacing:-.035em;opacity:0;transform:scale(1.07) translateY(10px);filter:blur(12px);
  transition:opacity 1.3s ease,transform 1.6s cubic-bezier(.16,.8,.2,1),filter 1.3s ease;background:linear-gradient(180deg,#fff 20%,#9fb09f 130%);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 40px rgba(34,208,76,.25)}
.io-f.on{opacity:1;transform:none;filter:none}.io-f.off{opacity:0;transform:scale(.97) translateY(-8px);filter:blur(10px)}
.io-f em{font-style:normal;background:linear-gradient(100deg,#b8ffcb,#22D04C 70%);-webkit-background-clip:text;background-clip:text;color:transparent}
.io-f.peq{font-size:clamp(15px,2vw,21px);font-weight:400;color:#8fa08f;letter-spacing:.14em;text-transform:uppercase}
.io-marca{position:absolute;left:50%;top:67%;transform:translate(-50%,-50%) scale(.96);text-align:center;opacity:0;transition:opacity 1.4s ease,transform 1.8s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.io-marca.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.io-marca .arriba{font-size:clamp(13px,1.8vw,18px);letter-spacing:.34em;text-transform:uppercase;color:#8fa08f;margin-bottom:18px}
.io-marca .nombre{font-size:clamp(34px,7vw,84px);font-weight:700;letter-spacing:.06em;line-height:1;background:linear-gradient(100deg,#f0fff4 0%,#f0fff4 38%,#22D04C 50%,#f0fff4 62%,#f0fff4 100%);background-size:260% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:io-brillo 3.4s ease-in-out infinite}
.io-marca .nombre b{font-weight:700}
.io-marca .sub{margin-top:22px;font-size:clamp(14px,1.9vw,20px);color:#8fa08f}
.io-diam{width:clamp(54px,8vw,92px);height:auto;margin:0 auto 22px;display:block;filter:drop-shadow(0 0 22px rgba(34,208,76,.55));animation:io-late 2.6s ease-in-out infinite}
@keyframes io-brillo{0%{background-position:130% 0}100%{background-position:-130% 0}}
@keyframes io-late{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
.io-btn{background:linear-gradient(180deg,#8dffb3,#2be46a 60%,#16b852);color:#03140a;border:0;border-radius:999px;padding:14px 34px;font:600 16px/1 inherit;font-family:inherit;cursor:pointer;box-shadow:0 0 0 0 rgba(34,208,76,.5);animation:io-pulso 2.4s infinite}
@keyframes io-pulso{70%{box-shadow:0 0 0 18px rgba(34,208,76,0)}100%{box-shadow:0 0 0 0 rgba(34,208,76,0)}}
.io-btn.sec{background:transparent;color:#8fa08f;border:1px solid #1f261f;animation:none}
.io-cta{position:absolute;left:0;right:0;bottom:11vh;display:flex;justify-content:center;opacity:0;transition:opacity 1s ease;pointer-events:none}
.io-cta.on{opacity:1;pointer-events:auto}
.io-saltar{position:absolute;right:20px;top:18px;background:none;border:0;color:#5d6a5d;font:14px inherit;font-family:inherit;cursor:pointer;z-index:3}
.io-saltar:hover{color:#8fa08f}
.io-sonido{position:absolute;left:20px;top:18px;background:none;border:0;color:#5d6a5d;font:14px inherit;font-family:inherit;cursor:pointer;z-index:3}
.io-gate{position:absolute;inset:0;display:grid;place-items:center;text-align:center;background:#080a0c;z-index:4;cursor:pointer}
.io-gate p{color:#8fa08f;margin:16px 0 0;letter-spacing:.12em;font-size:13px;text-transform:uppercase}
/* preguntas */
.io-q{position:absolute;inset:0;display:grid;place-items:center;padding:24px;z-index:2}
.io-qc{width:min(560px,100%);opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.io-qc.on{opacity:1;transform:none}
.io-prog{display:flex;gap:6px;margin-bottom:26px}.io-prog i{flex:1;height:3px;border-radius:3px;background:#1a211a;overflow:hidden}.io-prog i.ok{background:#22D04C;box-shadow:0 0 12px rgba(34,208,76,.6)}
.io-qc h2{font-size:clamp(24px,4vw,36px);line-height:1.15;margin:0 0 8px;font-weight:600}
.io-qc .ayuda{color:#8fa08f;margin:0 0 22px}
.io-op{display:block;width:100%;text-align:left;background:rgba(17,21,17,.8);border:1px solid #1f261f;color:#e8efe8;border-radius:14px;padding:15px 18px;margin:0 0 10px;font:16px inherit;font-family:inherit;cursor:pointer;transition:border-color .2s,transform .2s,background .2s;backdrop-filter:blur(6px)}
.io-op:hover{border-color:#22D04C;transform:translateX(4px)}.io-op.sel{border-color:#22D04C;background:rgba(34,208,76,.12)}
.io-op small{display:block;color:#8fa08f;margin-top:3px}
.io-qc input{width:100%;background:rgba(12,16,12,.8);border:1px solid #1f261f;color:#e8efe8;border-radius:14px;padding:15px 18px;font:18px inherit;font-family:inherit;margin-bottom:16px}
.io-qc input:focus{outline:none;border-color:#22D04C}
.io-sig{display:flex;gap:10px;margin-top:14px;align-items:center}
/* recorrido */
.rc{position:fixed;inset:0;z-index:90;pointer-events:none}
.rc-velo{position:absolute;inset:0;background:rgba(2,5,2,.78);transition:clip-path .7s cubic-bezier(.2,.7,.2,1)}
.rc-aro{position:absolute;border:2px solid #22D04C;border-radius:14px;box-shadow:0 0 30px rgba(34,208,76,.55),inset 0 0 18px rgba(34,208,76,.25);transition:all .7s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.rc-card{position:absolute;width:min(360px,calc(100vw - 32px));background:#0b100b;border:1px solid #1f3a24;border-radius:18px;padding:18px 20px 16px;pointer-events:auto;box-shadow:0 20px 60px rgba(0,0,0,.6),0 0 40px rgba(34,208,76,.12);transition:all .7s cubic-bezier(.2,.7,.2,1);opacity:0}
.rc-card.on{opacity:1}
.rc-card .guia{display:flex;gap:12px;align-items:flex-start}.rc-card .guia svg{flex:none;width:44px;height:auto;filter:drop-shadow(0 0 12px rgba(34,208,76,.6));animation:io-late 2.6s ease-in-out infinite}
.rc-card h3{margin:0 0 4px;font-size:18px}.rc-card p{margin:0;color:#b6c4b6;font-size:15px;line-height:1.45}
.rc-card .pie{display:flex;justify-content:space-between;align-items:center;margin-top:14px;color:#5d6a5d;font-size:13px}
.rc-card .pie button{font-family:inherit}
@media (prefers-reduced-motion:reduce){.io-marca .nombre,.io-diam,.io-btn,.rc-card .guia svg{animation:none}}

.io-abajo .io-frases{place-items:end center;padding-bottom:12vh}

.io-gl{position:absolute;inset:0;width:100%;height:100%;display:block;transition:opacity .2s linear}