/* ============================================================
   ORB Studio — Landing
   Todo lo NUEVO va acá. orb.css y mockui.css son copias del
   catálogo y NO se editan: si algo hay que cambiar, se pisa acá.
   ============================================================ */

/* ---------- REVEAL: invertido a prueba de sin-JS ----------
   orb.css:161 define .reveal{opacity:0}. Sin JS la página quedaría
   invisible. Acá se invierte: visible por defecto, y sólo se esconde
   cuando landing.js confirmó que está vivo poniendo html.js         */
.reveal{opacity:1;transform:none}
html.js .reveal:not(.in){opacity:0;transform:translateY(20px)}

/* ---------- base ---------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--text);color:var(--bg);
  padding:12px 18px;border-radius:0 0 10px 0;font-weight:600}
.skip:focus{left:0}
.btn:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--text);outline-offset:3px;border-radius:6px}

body{background:var(--bg);
  background-image:radial-gradient(60% 40% at 15% 0%,rgba(255,255,255,.7),transparent 70%),
                   radial-gradient(50% 40% at 90% 8%,rgba(241,236,229,.85),transparent 70%);
  background-attachment:fixed}

/* ---------- NAV ---------- */
.lnav{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:13px 22px;color:var(--text);
  background:color-mix(in srgb,var(--bg) 78%,transparent);
  backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom:1px solid transparent;transition:border-color .3s,background .3s}
.lnav.stuck{border-bottom-color:var(--border)}
.lnav-links{display:flex;align-items:center;gap:4px}
.lnav-links a{font-size:14px;font-weight:500;padding:9px 12px;border-radius:9px;color:var(--text-muted)}
.lnav-links a:hover{color:var(--text);background:var(--surface-2)}
.lnav-cta{color:var(--text)!important;border:1px solid var(--border-strong);font-weight:600!important}
.lnav-cta:hover{background:var(--text)!important;color:var(--bg)!important}
@media(max-width:640px){
  .lnav{padding:11px 16px}
  .lnav-links a:not(.lnav-cta){display:none}
}

/* ============================================================
   E1 · HERO
   El orbe sobresale del contenedor a propósito (sangra por arriba
   y por la derecha). body{overflow-x:hidden} de orb.css:20 lo contiene.
   ============================================================ */
.e1{position:relative;min-height:calc(100svh - 56px);display:flex;flex-direction:column;
  justify-content:center;padding:70px 0 110px;overflow:hidden}
.e1-orb{position:absolute;top:-14%;right:-16%;width:min(760px,108vw);pointer-events:none;
  opacity:.42;z-index:0;filter:saturate(0)}
.e1-orb svg{width:100%;height:auto;display:block}
.e1-copy{position:relative;z-index:2}
.e1-copy .eyebrow{display:block;margin-bottom:20px}
.e1 h1{font-size:clamp(40px,8.2vw,86px);font-weight:800;letter-spacing:-.04em;line-height:.96;
  margin:0 0 22px;max-width:16ch}
.e1-sub{font-size:clamp(16px,2vw,21px);color:var(--text-muted);max-width:40ch;line-height:1.55;margin-bottom:34px}
.e1-btns{display:flex;flex-wrap:wrap;gap:12px}
.e1-btns .btn{min-width:210px}

.e1-cue{position:absolute;bottom:38px;left:50%;transform:translateX(-50%);z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:9px;
  font-family:var(--fm);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-muted)}
.e1-cue i{display:block;width:1px;height:34px;background:linear-gradient(var(--text-muted),transparent);
  animation:cue 2.4s ease-in-out infinite}
@keyframes cue{0%,100%{transform:scaleY(.4);transform-origin:top;opacity:.4}50%{transform:scaleY(1);opacity:1}}

/* barra de precarga de frames — informativa, nunca bloqueante */
.loadbar{position:absolute;bottom:0;left:0;right:0;height:2px;background:transparent;z-index:3;
  opacity:0;transition:opacity .4s}
.loadbar.on{opacity:1}
.loadbar i{display:block;height:100%;width:0;background:var(--primary);transition:width .25s ease-out}

@media(max-width:760px){
  .e1{min-height:auto;padding:56px 0 92px}
  .e1-orb{top:-6%;right:-38%;width:150vw;opacity:.3}
  .e1-btns .btn{min-width:min(280px,100%);flex:1 1 auto}
}

/* ============================================================
   E2 + E3 · IPHONE QUE GIRA
   svh, NUNCA dvh. Con dvh el stage se re-dimensiona cuando la barra
   de Safari se colapsa y el índice de frame salta a mitad del scroll.
   No lo "arregles" cambiándolo.
   ============================================================ */
/* PISTA CORTA A PROPÓSITO.
   Con 340svh el giro pedía ~1400px de scroll (unas 14 vueltas de rueda) y
   los últimos frames de la frenada se comían ~300px sin movimiento visible:
   se leía como que la animación se colgó. Con 220svh el giro entero entra
   en ~7 vueltas de rueda y la frenada cuesta ~1,4. No volver a agrandarla. */
.e23{position:relative;height:220vh;height:220svh}
.spin-stage{position:sticky;top:0;height:100vh;height:100svh;
  display:grid;place-items:center;overflow:hidden}
#fx{position:relative;z-index:2;width:100%;height:100%;display:block}
html.no-frames #fx{display:none}

#phoneshadow{position:absolute;z-index:1;bottom:16%;left:50%;transform:translateX(-50%);
  width:min(300px,42vw);height:26px;border-radius:50%;
  background:radial-gradient(50% 50% at 50% 50%,rgba(26,24,21,.30),transparent 72%);
  filter:blur(14px);opacity:.55;pointer-events:none}

/* fallback estático (mockui .device) — visible hasta que los frames carguen */
.nf-device{position:absolute;z-index:2;display:none}
html.no-frames .nf-device{display:block}
.nf-device .device-screen{background:#0d0c0b}
.nf-screen{width:100%;height:100%}

/* overlay de texto: JS le pone left/top/width/height a partir de SCREEN_UV */
#screen{position:absolute;z-index:4;pointer-events:none;
  display:flex;flex-direction:column;justify-content:center;
  color:var(--bg);--sw:240px;
  padding:calc(var(--sw)*.11) calc(var(--sw)*.09);
  gap:calc(var(--sw)*.07)}
#screen .sc-k{display:block;font-family:var(--fm);font-size:calc(var(--sw)*.052);
  letter-spacing:.16em;text-transform:uppercase;opacity:.55;margin-bottom:calc(var(--sw)*.035)}
#screen p{font-size:calc(var(--sw)*.078);line-height:1.45;font-weight:600;margin:0}
#screen .sc-arrow{align-self:center;opacity:.4}
#screen .sc-arrow svg{width:calc(var(--sw)*.10);height:calc(var(--sw)*.10);display:block}
/* estado inicial: los tres bloques ocultos; el rAF les sube la opacidad */
html.js #screen>*{opacity:0}

/* sin frames y sin JS el overlay tiene que caer dentro del .device del fallback */
html.no-frames #screen{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(278px,76vw);height:min(576px,62vh);--sw:min(278px,76vw)}
html.no-frames #screen>*{opacity:1}

@media(max-width:760px){ .e23{height:180vh;height:180svh} }

/* ============================================================
   E4 · TABLET / QUIÉNES SOMOS
   ============================================================ */
.e4{padding:96px 0 92px}
.tablet{position:relative;width:100%;background:#1A1815;border-radius:26px;padding:14px;
  box-shadow:0 40px 90px -46px rgba(0,0,0,.6),0 0 0 1px rgba(26,24,21,.06)}
.tablet::after{content:"";position:absolute;left:50%;bottom:6px;transform:translateX(-50%);
  width:64px;height:3px;border-radius:2px;background:rgba(255,255,255,.14)}
.tablet-screen{background:var(--surface);border-radius:16px;padding:clamp(28px,5vw,64px)}
.tablet-screen .eyebrow{display:block;margin-bottom:16px}
.e4 h2{font-size:clamp(30px,5vw,54px);font-weight:800;letter-spacing:-.035em;line-height:1;margin-bottom:22px}
.e4-lead{font-size:clamp(16px,1.9vw,21px);line-height:1.62;color:var(--text-muted);max-width:62ch;margin-bottom:18px}
.e4-punch{font-size:clamp(17px,2.1vw,24px);line-height:1.45;font-weight:700;letter-spacing:-.02em;
  max-width:46ch;margin-bottom:28px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips .chip{font-family:var(--fm);font-size:11px;letter-spacing:.06em;padding:8px 14px;
  border:1px solid var(--border-strong);border-radius:20px;color:var(--text-muted)}
.tablet-cap{text-align:center;font-size:14px;color:var(--text-muted);margin-top:22px}
@media(max-width:760px){
  .e4{padding:64px 0 60px}
  /* En el celu el tablet es un objeto visual, no un contenedor: el texto
     sale afuera porque un 1024px escalado a 340px es ilegible. */
  .tablet{padding:9px;border-radius:18px}
  .tablet-screen{padding:26px 20px}
}

/* ============================================================
   E5 · SISTEMAS  (usa .cat-grid/.prod-card de orb.css)
   ============================================================ */
.e5{padding-top:20px;padding-bottom:96px}
.e5-sub{font-size:16px;color:var(--text-muted);margin:-16px 0 30px;max-width:52ch}
.e5 .prod-card{border-radius:var(--radius-lg)}
.e5 .prod-card .pc-ico{width:60px;height:60px;border-radius:18px}
.e5 .prod-card .pc-ico svg{width:29px;height:29px}

/* ============================================================
   MÉTODO
   ============================================================ */
.e6{padding-top:12px;padding-bottom:90px}
.proc{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);gap:14px;padding:0;margin:0}
.pstep{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:22px 20px}
.pstep .pn{font-family:var(--fm);font-size:12px;font-weight:700;color:var(--bg);background:var(--text);
  width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.pstep h3{font-size:16px;font-weight:700;letter-spacing:-.01em;margin-bottom:7px}
.pstep p{font-size:13.5px;line-height:1.5;color:var(--text-muted)}
.proc-note{margin-top:22px;font-size:15px;color:var(--text-muted)}
.proc-note b{color:var(--text)}
@media(max-width:1000px){.proc{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.proc{grid-template-columns:1fr}}

/* ============================================================
   FAQ
   ============================================================ */
.faq{padding-top:12px;padding-bottom:96px}
.faq-list{display:grid;gap:10px;max-width:820px}
.faq-i{background:var(--surface);border:1px solid var(--border);border-radius:14px;
  transition:border-color .15s,box-shadow .15s}
.faq-i[open]{border-color:var(--border-strong);box-shadow:var(--shadow-soft)}
.faq-i summary{cursor:pointer;list-style:none;padding:19px 22px;font-size:16.5px;font-weight:600;
  letter-spacing:-.01em;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px}
.faq-i summary::-webkit-details-marker{display:none}
.faq-i summary::after{content:"";flex-shrink:0;width:11px;height:11px;
  border-right:2px solid var(--text-muted);border-bottom:2px solid var(--text-muted);
  transform:rotate(45deg) translateY(-2px);transition:transform .2s}
.faq-i[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.faq-i p{padding:0 22px 21px;font-size:15px;line-height:1.62;color:var(--text-muted);max-width:64ch}

/* ============================================================
   E7 · CONTACTO
   ============================================================ */
.e7{background:var(--text);color:var(--bg);padding:88px 0 92px;border-radius:28px 28px 0 0;margin-top:20px}
.e7 .eyebrow{display:block;color:rgba(248,245,242,.55);margin-bottom:16px}
.e7 h2{font-size:clamp(28px,4.6vw,50px);font-weight:800;letter-spacing:-.035em;line-height:1.04;
  margin-bottom:18px;max-width:20ch}
.e7-sub{font-size:clamp(15px,1.8vw,19px);color:rgba(248,245,242,.68);max-width:48ch;
  line-height:1.6;margin-bottom:34px}
.e7-btns{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:22px}
.e7 .btn-primary{background:var(--bg);color:var(--text);box-shadow:3px 3px 0 rgba(248,245,242,.28)}
.e7 .btn-primary:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 rgba(248,245,242,.28)}
.e7 .btn-ghost{background:transparent;border-color:rgba(248,245,242,.35);color:var(--bg)}
.e7 .btn-ghost:hover{background:rgba(248,245,242,.1)}
.e7 .btn:focus-visible{outline-color:var(--bg)}
.e7-note{font-family:var(--fm);font-size:12px;letter-spacing:.05em;color:rgba(248,245,242,.5)}
@media(max-width:640px){
  .e7{padding:64px 0 68px;border-radius:22px 22px 0 0}
  .e7-btns .btn{width:100%}
}

.foot{margin-top:0;border-top:none;background:var(--text)}
.foot .brand,.foot .fnote{color:rgba(248,245,242,.62)}
.foot .brand b{color:var(--bg)}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
  /* animateMotion no se pausa por CSS: se saca el cometa y queda la elipse */
  #orbComet{display:none}
  .e1-cue i{animation:none}
  /* sin runway: una sola pantalla estática */
  .e23{height:100vh;height:100svh}
  html.js #screen>*{opacity:1}
  html.js .reveal:not(.in){opacity:1;transform:none}
}