/* ============================================================
   SOLUCIONES GLOBALES — estilos
   Todo se escala con --ph (alto del celular) para que laptop y
   móvil se vean con las mismas proporciones, sin scroll.
   ============================================================ */

/* Tipografía LASTICA: sube el archivo a /fonts y descomenta esto.
@font-face{
  font-family:'Lastica';
  src:url('../fonts/Lastica.woff2') format('woff2');
  font-display:swap;
}
*/

#sg{
  --font:'Lastica','Michroma','Eurostile','Segoe UI',sans-serif;
  --ui:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --ph:min(80vh,1100px,190vw);
  --ctrl:15vh;
  position:fixed;inset:0;z-index:9999;
  background:#000;color:#fff;
  font-family:var(--font);
  display:grid;grid-template-rows:1fr var(--ctrl);
  overflow:hidden;
  -webkit-tap-highlight-color:transparent;
  user-select:none;-webkit-user-select:none;
}
@supports (height:1dvh){#sg{--ph:min(80dvh,1100px,190vw);--ctrl:15dvh}}
#sg *,#sg *::before,#sg *::after{box-sizing:border-box;margin:0;padding:0}
html,body{background:#000;overscroll-behavior:none}

/* ---------- Fondo: cuadrícula bajando, baja opacidad ---------- */
#sg .bg{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);
  background-size:clamp(34px,6vmin,64px) clamp(34px,6vmin,64px);
  animation:gridDown 5s linear infinite;
  -webkit-mask-image:radial-gradient(ellipse at 50% 45%,#000 18%,transparent 72%);
          mask-image:radial-gradient(ellipse at 50% 45%,#000 18%,transparent 72%);
  opacity:0;transition:opacity 1.4s ease;
}
@keyframes gridDown{to{background-position:0 clamp(34px,6vmin,64px),0 0}}

/* ---------- Fondo de circuitos (detalle sutil) ---------- */
#sg #sg-circuit{
  position:absolute;inset:0;width:100%;height:100%;
  opacity:0;transition:opacity 2s ease;pointer-events:none;
  -webkit-mask-image:radial-gradient(ellipse at 50% 48%,rgba(0,0,0,.25) 12%,#000 70%);
          mask-image:radial-gradient(ellipse at 50% 48%,rgba(0,0,0,.25) 12%,#000 70%);
}
#sg:not([data-state="intro"]) #sg-circuit{opacity:.8}

/* ---------- Intro ---------- */
/* El logo nace grande en el centro; al terminar sube y se reduce (clase .home) */
#sg .brand{
  position:absolute;left:50%;top:50%;z-index:20;pointer-events:none;
  transform:translate(-50%,-55%) scale(1);transform-origin:50% 0;
  display:flex;flex-direction:column;align-items:center;gap:2.4vmin;
  transition:top 1s cubic-bezier(.6,0,.2,1),transform 1s cubic-bezier(.6,0,.2,1),opacity .6s ease;
}
#sg .brand.home{top:max(3.2vh,14px);transform:translate(-50%,0) scale(var(--k,.45))}
#sg:not([data-mod=""]) .brand{opacity:0}
#sg-intro{display:block}
.intro-title{
  white-space:nowrap;text-align:center;
  font-size:clamp(14px,3.1vmin,26px);letter-spacing:.28em;
  opacity:0;transition:opacity 1s ease;
}
.intro-title.on{opacity:1}

/* ---------- Escena ---------- */
#sg .stage{position:relative;display:grid;place-items:center;z-index:2;min-height:0;opacity:0;transition:opacity 1.2s ease .3s}
#sg:not([data-state="intro"]) .bg,
#sg:not([data-state="intro"]) .stage{opacity:1}

/* ---------- Celular ---------- */
#sg .phone{
  --u:calc(var(--ph) / 52);
  position:relative;height:var(--ph);aspect-ratio:9/18.5;
  font-size:var(--u);
  border-radius:calc(var(--u)*4.6);
  padding:calc(var(--u)*.6);
  background:linear-gradient(145deg,#4a4a4d 0%,#111 35%,#1b1b1d 65%,#555 100%);
  box-shadow:0 0 0 calc(var(--u)*.12) #000,0 0 calc(var(--u)*7) rgba(255,255,255,.07),0 calc(var(--u)*3) calc(var(--u)*8) rgba(0,0,0,.8);
  animation:float 7s ease-in-out infinite;
  transition:opacity .6s ease,transform .6s ease,visibility 0s;
}
@keyframes float{50%{transform:translateY(-1.1%)}}
#sg:not([data-mod="ia"]) .phone{opacity:0;visibility:hidden;pointer-events:none}
#sg .phone .btn{position:absolute;background:#2a2a2c;border-radius:2px;width:calc(var(--u)*.35)}
#sg .phone .b1{left:calc(var(--u)*-.3);top:12%;height:3%}
#sg .phone .b2{left:calc(var(--u)*-.3);top:18%;height:6%}
#sg .phone .b3{left:calc(var(--u)*-.3);top:26%;height:6%}
#sg .phone .b4{right:calc(var(--u)*-.3);top:21%;height:10%}

#sg .screen{position:relative;width:100%;height:100%;border-radius:calc(var(--u)*4.1);background:#000;overflow:hidden;isolation:isolate}
#sg .screen::after{ /* reflejo con el celular apagado */
  content:"";position:absolute;inset:0;z-index:9;pointer-events:none;
  background:linear-gradient(125deg,rgba(255,255,255,.09) 0%,transparent 38%);
}
#sg .island{position:absolute;z-index:8;top:calc(var(--u)*1.3);left:50%;translate:-50% 0;width:calc(var(--u)*7.4);height:calc(var(--u)*2.1);background:#000;border-radius:99px;box-shadow:0 0 0 1px #0a0a0a}
#sg .status{position:absolute;z-index:7;top:calc(var(--u)*1.35);left:calc(var(--u)*2.4);right:calc(var(--u)*2.4);display:flex;justify-content:space-between;align-items:center;font:600 calc(var(--u)*1)/1 var(--ui);opacity:0;transition:opacity .8s ease .3s}
#sg .bat{width:calc(var(--u)*2.1);height:calc(var(--u)*1);border:1px solid rgba(255,255,255,.6);border-radius:3px;padding:1px}
#sg .bat b{display:block;height:100%;width:80%;background:#fff;border-radius:1px}
#sg .homebar{position:absolute;z-index:8;bottom:calc(var(--u)*.9);left:50%;translate:-50% 0;width:34%;height:calc(var(--u)*.4);background:#fff;border-radius:9px;opacity:0;transition:opacity .8s ease .3s}
#sg[data-state="boot"] .status,#sg[data-state="load"] .status,#sg[data-state="chat"] .status,#sg[data-state="admin"] .status,#sg[data-state="crm"] .status,#sg[data-state="off"] .status,#sg[data-state="final"] .status,#sg[data-state="end"] .status,
#sg[data-state="boot"] .homebar,#sg[data-state="load"] .homebar,#sg[data-state="chat"] .homebar,#sg[data-state="admin"] .homebar,#sg[data-state="crm"] .homebar,#sg[data-state="off"] .homebar,#sg[data-state="final"] .homebar,#sg[data-state="end"] .homebar{opacity:.9}

/* Capas de pantalla */
#sg .lyr{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--u)*2);opacity:0;visibility:hidden;transition:opacity .7s ease,visibility 0s .7s}
#sg[data-state="boot"] .lyr.boot,
#sg[data-state="load"] .lyr.load,
#sg[data-state="admin"] .lyr.load,
#sg[data-state="chat"] .lyr.chat,
#sg[data-state="crm"] .lyr.crm,
#sg[data-state="final"] .lyr.final,
#sg[data-state="end"] .lyr.final{opacity:1;visibility:visible;transition:opacity 1.1s ease}
#sg[data-state="crm"] .lyr.crm{opacity:1;visibility:visible;transition:opacity .7s ease}
#sg[data-state="off"] .lyr{transition:opacity .45s ease,visibility 0s .45s}
/* mensaje final */
#sg .lyr.final{background:#000;gap:calc(var(--u)*2.2);padding:0 9%;text-align:center}
#sg .final .mb{width:calc(var(--u)*7);height:calc(var(--u)*7);border-radius:50%;background:#fff;color:#000;display:grid;place-items:center;font-size:calc(var(--u)*3.6);font-weight:700;box-shadow:0 0 calc(var(--u)*5) rgba(255,255,255,.6);animation:glow 2.6s ease-in-out infinite}
#sg .final h3{font-size:calc(var(--u)*2.5);line-height:1.25;letter-spacing:.06em;text-transform:uppercase;font-weight:400}
#sg .final p{font-family:var(--font);text-transform:uppercase;font-size:calc(var(--u)*1.2);letter-spacing:.08em;line-height:1.6;color:#fff;opacity:.9}

#sg .boot img,#sg .load img{width:62%;height:auto;filter:drop-shadow(0 0 calc(var(--u)*2) rgba(255,255,255,.55))}
#sg .boot img{animation:glow 2.6s ease-in-out infinite}
@keyframes glow{50%{filter:drop-shadow(0 0 calc(var(--u)*3.4) rgba(255,255,255,.95))}}
#sg .boot p,#sg .load p{font-size:calc(var(--u)*1.3);letter-spacing:.14em;text-transform:uppercase;text-align:center;line-height:1.5;padding:0 12%}
#sg .load img{width:42%}
#sg .bar{width:62%;height:calc(var(--u)*.55);border-radius:9px;background:rgba(255,255,255,.14);overflow:hidden}
#sg .bar i{display:block;height:100%;width:0;background:#fff;border-radius:9px;box-shadow:0 0 calc(var(--u)*1.2) #fff}
#sg .pct{opacity:.7}

/* Chat */
#sg .lyr.chat{justify-content:flex-start;align-items:stretch;gap:0;background:#0b0b0c;padding-top:calc(var(--u)*4.6);font-family:var(--ui)}
#sg .chat header{display:flex;align-items:center;gap:calc(var(--u)*1);padding:calc(var(--u)*.8) calc(var(--u)*1.5);border-bottom:1px solid rgba(255,255,255,.1)}
#sg .chat header img{width:calc(var(--u)*3.2);height:calc(var(--u)*3.2);object-fit:contain;padding:calc(var(--u)*.5);border-radius:50%;background:#000;border:1px solid rgba(255,255,255,.7)}
#sg .chat header strong{display:block;font-size:calc(var(--u)*1.3);font-weight:600}
#sg .chat header small{font-size:calc(var(--u)*.95);color:#8e8e93;display:flex;align-items:center;gap:calc(var(--u)*.4)}
#sg .chat header small::before{content:"";width:calc(var(--u)*.7);height:calc(var(--u)*.7);border-radius:50%;background:#34c759}
#sg .msgs{flex:1;min-height:0;overflow-y:auto;scrollbar-width:none;padding:calc(var(--u)*1.2);display:flex;flex-direction:column;gap:calc(var(--u)*.8);scroll-behavior:smooth}
#sg .msgs::-webkit-scrollbar{display:none}
#sg .msgs::before{content:"";margin-top:auto}
#sg .m{max-width:84%;padding:calc(var(--u)*.85) calc(var(--u)*1.2);font-size:calc(var(--u)*1.2);line-height:1.38;white-space:pre-line;border-radius:calc(var(--u)*1.6);animation:pop .35s ease both;word-wrap:break-word}
@keyframes pop{from{opacity:0;transform:translateY(calc(var(--u)*1)) scale(.96)}}
#sg .m.bot{align-self:flex-start;background:#1c1c1e;border-bottom-left-radius:calc(var(--u)*.4)}
#sg .m.user{align-self:flex-end;background:#fff;color:#000;border-bottom-right-radius:calc(var(--u)*.4)}
#sg .m.dots{display:flex;gap:calc(var(--u)*.45);padding:calc(var(--u)*1.1) calc(var(--u)*1.3)}
#sg .m.dots i{width:calc(var(--u)*.7);height:calc(var(--u)*.7);border-radius:50%;background:#8e8e93;animation:blink 1.1s infinite}
#sg .m.dots i:nth-child(2){animation-delay:.18s}#sg .m.dots i:nth-child(3){animation-delay:.36s}
@keyframes blink{0%,60%,100%{opacity:.25}30%{opacity:1}}
#sg .m.sys{align-self:center;max-width:92%;background:transparent;border:1px dashed rgba(255,255,255,.3);color:#c7c7cc;font-size:calc(var(--u)*1.05);display:flex;align-items:center;gap:calc(var(--u)*.7);border-radius:99px;text-align:left}
#sg .m.sys .sp{flex:none;width:calc(var(--u)*1.1);height:calc(var(--u)*1.1);border:2px solid #555;border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite}
#sg .m.sys.ok .sp{animation:none;border:0;width:auto;height:auto}
#sg .m.sys.ok .sp::before{content:"✓";color:#34c759;font-weight:700}
@keyframes spin{to{rotate:360deg}}
#sg .m.img{padding:calc(var(--u)*.5);background:#fff;color:#000}
#sg .rcpt{width:calc(var(--u)*13);background:#f2f2f2;border-radius:calc(var(--u)*1);padding:calc(var(--u)*1);color:#111;font-size:calc(var(--u)*.95);line-height:1.5}
#sg .rcpt b{display:block;font-size:calc(var(--u)*1.1);margin-bottom:calc(var(--u)*.4)}
#sg .rcpt i{display:block;height:calc(var(--u)*.4);background:#cfcfd4;border-radius:9px;margin-top:calc(var(--u)*.5)}
#sg .chat footer{display:flex;align-items:center;gap:calc(var(--u)*.8);padding:calc(var(--u)*.8) calc(var(--u)*1.2) calc(var(--u)*2.4)}
#sg .inp{flex:1;min-height:calc(var(--u)*3);display:flex;align-items:center;padding:0 calc(var(--u)*1.3);border:1px solid rgba(255,255,255,.18);border-radius:99px;font-size:calc(var(--u)*1.1);color:#fff;overflow:hidden;white-space:nowrap}
#sg .inp #inpText{overflow:hidden;text-overflow:clip}
#sg .inp:has(#inpText:empty){color:#636366}
#sg .inp:has(#inpText:empty)::before{content:"Mensaje";color:#636366}
#sg .caret{width:1px;height:calc(var(--u)*1.3);background:#fff;margin-left:1px;animation:blink 1s steps(1) infinite}
#sg .send{width:calc(var(--u)*3);height:calc(var(--u)*3);flex:none;border-radius:50%;background:#fff;position:relative}
#sg .send::before{content:"";position:absolute;left:50%;top:50%;translate:-45% -50%;border-left:calc(var(--u)*1) solid #000;border-top:calc(var(--u)*.65) solid transparent;border-bottom:calc(var(--u)*.65) solid transparent}

/* ---------- Panel administrativo (CRM) ---------- */
#sg .lyr.crm{justify-content:flex-start;align-items:stretch;gap:0;background:#0b0b0c;padding-top:calc(var(--u)*4.6);font-family:var(--ui)}
#sg .ch{display:flex;justify-content:space-between;align-items:center;padding:calc(var(--u)*.8) calc(var(--u)*1.5);border-bottom:1px solid rgba(255,255,255,.1)}
#sg .ch strong{display:block;font-size:calc(var(--u)*1.6);font-weight:700}
#sg .ch small{font-size:calc(var(--u)*.95);color:#8e8e93}
#sg .ch img{width:calc(var(--u)*3);height:calc(var(--u)*3);object-fit:contain}
#sg .cbody{flex:1;min-height:0;position:relative;overflow:hidden}
#sg .view{position:absolute;inset:0;padding:calc(var(--u)*1.1) calc(var(--u)*1.2);display:flex;flex-direction:column;gap:calc(var(--u)*.8);animation:vin .5s both}
@keyframes vin{from{opacity:0;transform:translateX(calc(var(--u)*1.5))}}
#sg .st{opacity:0}
#sg .go .st{animation:stin .5s both;animation-delay:calc(var(--i)*110ms + 120ms)}
@keyframes stin{from{opacity:0;transform:translateY(calc(var(--u)*1))}to{opacity:1;transform:none}}
#sg .tabs{display:flex;border-top:1px solid rgba(255,255,255,.1);padding:calc(var(--u)*.7) calc(var(--u)*.4) calc(var(--u)*2.3)}
#sg .tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:calc(var(--u)*.35);font-size:calc(var(--u)*.95);color:#6e6e73;transition:color .3s}
#sg .tab svg{width:calc(var(--u)*2.3);height:calc(var(--u)*2.3);fill:none;stroke:currentColor;stroke-width:1.7;stroke-linejoin:round}
#sg .tab.on{color:#fff}
#sg .tab.on svg{filter:drop-shadow(0 0 calc(var(--u)*.5) rgba(255,255,255,.8))}
#sg .finger{position:absolute;z-index:6;left:0;top:0;width:calc(var(--u)*2.8);height:calc(var(--u)*2.8);border-radius:50%;background:rgba(255,255,255,.3);border:1.5px solid #fff;box-shadow:0 0 calc(var(--u)*1.4) rgba(255,255,255,.55);pointer-events:none;opacity:0;transition:transform .8s cubic-bezier(.5,0,.2,1),opacity .3s}
#sg .finger.tap{animation:fing .38s}
@keyframes fing{50%{scale:.65;background:rgba(255,255,255,.85)}}
/* chats */
#sg .row{display:flex;align-items:center;gap:calc(var(--u)*1);padding:calc(var(--u)*.7) 0;border-bottom:1px solid rgba(255,255,255,.07)}
#sg .av{flex:none;width:calc(var(--u)*3.6);height:calc(var(--u)*3.6);border-radius:50%;background:#232326;display:grid;place-items:center;font-size:calc(var(--u)*1.15);font-weight:600}
#sg .row .tx{flex:1;min-width:0}
#sg .row b{display:block;font-size:calc(var(--u)*1.2)}
#sg .row .tx span{display:block;font-size:calc(var(--u)*1.02);color:#8e8e93;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#sg .mt{display:flex;flex-direction:column;align-items:flex-end;gap:calc(var(--u)*.4)}
#sg .mt small{font-size:calc(var(--u)*.9);color:#8e8e93}
#sg .mt em{font-style:normal;background:#fff;color:#000;border-radius:99px;min-width:calc(var(--u)*1.7);height:calc(var(--u)*1.7);display:grid;place-items:center;font-size:calc(var(--u)*1);font-weight:700}
/* kanban */
#sg .kb{flex:1;display:grid;grid-template-columns:repeat(3,1fr);gap:calc(var(--u)*.6);align-content:start}
#sg .col{background:#141416;border-radius:calc(var(--u)*1);padding:calc(var(--u)*.6);display:flex;flex-direction:column;gap:calc(var(--u)*.5);min-height:calc(var(--u)*24)}
#sg .col h4{font-size:calc(var(--u)*.85);font-weight:600;color:#a1a1a6;letter-spacing:.05em;text-transform:uppercase;display:flex;justify-content:space-between;padding:calc(var(--u)*.2) calc(var(--u)*.1) calc(var(--u)*.3)}
#sg .kc{background:#232326;border-radius:calc(var(--u)*.7);padding:calc(var(--u)*.7);font-size:calc(var(--u)*.95);line-height:1.3}
#sg .kc small{display:block;color:#8e8e93;font-size:calc(var(--u)*.82);margin-top:calc(var(--u)*.2)}
#sg .kc.hot{outline:1px solid #fff;box-shadow:0 0 calc(var(--u)*1.4) rgba(255,255,255,.3)}
/* agenda */
#sg .agh{display:flex;justify-content:space-between;align-items:baseline}
#sg .agh b{font-size:calc(var(--u)*1.4)}#sg .agh small{font-size:calc(var(--u)*.95);color:#8e8e93}
#sg .ag{flex:1;max-height:calc(var(--u)*26);display:grid;grid-template-columns:calc(var(--u)*3.2) repeat(5,1fr);grid-template-rows:calc(var(--u)*2.4) repeat(5,1fr);gap:calc(var(--u)*.3)}
#sg .dh{display:grid;place-items:center;font-size:calc(var(--u)*1);color:#8e8e93;font-weight:600}
#sg .dh.now{color:#000;background:#fff;border-radius:calc(var(--u)*.7)}
#sg .hr{font-size:calc(var(--u)*.85);color:#6e6e73;align-self:start;grid-column:1}
#sg .cl{background:#121214;border-radius:calc(var(--u)*.4)}
#sg .ap{background:#2c2c30;border-radius:calc(var(--u)*.6);display:grid;place-items:center;font-size:calc(var(--u)*.88);font-weight:600;text-align:center;padding:calc(var(--u)*.2);z-index:1;margin:calc(var(--u)*.15)}
#sg .ap.hot{background:#fff;color:#000;box-shadow:0 0 calc(var(--u)*1.6) rgba(255,255,255,.5)}
/* catálogo */
#sg .cat{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--u)*.8)}
#sg .pr{background:#141416;border-radius:calc(var(--u)*1.1);overflow:hidden}
#sg .im{aspect-ratio:1.25;background:linear-gradient(135deg,#2c2c30,#0e0e10);display:grid;place-items:center;color:#555}
#sg .im svg{width:35%;fill:none;stroke:currentColor;stroke-width:1.4}
#sg .pb{padding:calc(var(--u)*.8);display:flex;flex-direction:column;gap:calc(var(--u)*.3)}
#sg .pb b{font-size:calc(var(--u)*1.1)}#sg .pb span{font-size:calc(var(--u)*1.05);color:#c7c7cc}
#sg .pb em{font-style:normal;font-size:calc(var(--u)*.88);color:#34c759}
#sg .pb em.low{color:#ff9f0a}
/* IA */
#sg .card2{background:#141416;border-radius:calc(var(--u)*1.1);padding:calc(var(--u)*1);display:flex;flex-direction:column;gap:calc(var(--u)*.7)}
#sg .iah{display:flex;justify-content:space-between;align-items:baseline}
#sg .iah small{font-size:calc(var(--u)*1);color:#a1a1a6}#sg .iah b{font-size:calc(var(--u)*2.2)}
#sg .ia1 svg{width:100%;height:calc(var(--u)*5);overflow:visible}
#sg .card2{padding:calc(var(--u)*.8) calc(var(--u)*1);gap:calc(var(--u)*.5)}
#sg .view{gap:calc(var(--u)*.6)}
#sg .ln{fill:none;stroke:#fff;stroke-width:1.6;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1;filter:drop-shadow(0 0 3px #fff)}
#sg .go .ln{animation:draw 1.6s ease .3s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
#sg .ar{fill:rgba(255,255,255,.08)}
#sg .rw{display:flex;align-items:center;gap:calc(var(--u)*.7);font-size:calc(var(--u)*1)}
#sg .rw>span{flex:0 0 38%;color:#d1d1d6;line-height:1.2}
#sg .rw small{flex:none;width:calc(var(--u)*3);text-align:right;color:#a1a1a6;font-size:calc(var(--u)*.95)}
#sg .trk{flex:1;height:calc(var(--u)*.7);background:#262629;border-radius:9px;overflow:hidden}
#sg .trk i{display:block;height:100%;width:0;background:#fff;border-radius:9px;transition:width 1.3s cubic-bezier(.2,.8,.2,1) .5s}
#sg .lb{font-size:calc(var(--u)*.95);color:#a1a1a6;letter-spacing:.03em}
#sg .rw.cc{justify-content:space-between}#sg .rw.cc>span{flex:1}
#sg .rw em{font-style:normal;font-size:calc(var(--u)*.9);padding:calc(var(--u)*.25) calc(var(--u)*.8);border-radius:99px;border:1px solid #555;color:#a1a1a6}
#sg .rw em.hi{background:#fff;color:#000;border-color:#fff;font-weight:700}
#sg .notice{position:absolute;z-index:7;left:calc(var(--u)*1.2);right:calc(var(--u)*1.2);bottom:calc(var(--u)*6.4);background:#fff;color:#000;border-radius:calc(var(--u)*1.5);padding:calc(var(--u)*1) calc(var(--u)*1.2);display:flex;gap:calc(var(--u)*.9);align-items:center;font-size:calc(var(--u)*1.1);line-height:1.3;font-weight:600;transform:translateY(160%);opacity:0;transition:transform .6s cubic-bezier(.2,1.2,.3,1),opacity .4s;box-shadow:0 0 calc(var(--u)*3) rgba(255,255,255,.35)}
#sg .notice.on{transform:none;opacity:1}
#sg .notice b{flex:none;width:calc(var(--u)*2.8);height:calc(var(--u)*2.8);border-radius:50%;background:#000;color:#fff;display:grid;place-items:center;font-size:calc(var(--u)*1.4)}

/* ---------- Planes ---------- */
#sg .plans{
  --u:calc(var(--ph) / 52);
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--u)*2);
  font-size:var(--u);opacity:0;visibility:hidden;transition:opacity .6s ease,visibility 0s .6s;z-index:3
}
#sg[data-state="plans"] .plans{opacity:1;visibility:visible;transition:opacity .7s ease .4s}
#sg[data-state="plans"] .phone{opacity:0;visibility:hidden;transform:scale(.94);animation:none;transition:opacity .5s ease,transform .5s ease,visibility 0s .5s}
#sg .card{
  width:min(calc(var(--u)*30),90vw);padding:calc(var(--u)*2) calc(var(--u)*2.2);text-align:center;
  border:1px solid rgba(255,255,255,.85);border-radius:calc(var(--u)*1.6);
  background:linear-gradient(160deg,rgba(255,255,255,.1),rgba(255,255,255,.02));
  box-shadow:0 0 calc(var(--u)*6) rgba(255,255,255,.1);backdrop-filter:blur(6px)
}
#sg .plogo{width:calc(var(--u)*7);height:auto;margin-bottom:calc(var(--u)*.8)}
#sg .card h2{font-size:calc(var(--u)*1.25);letter-spacing:.26em;font-weight:400;text-transform:uppercase;opacity:.85}
#sg .price{margin:calc(var(--u)*.9) 0 calc(var(--u)*.3);display:flex;justify-content:center}
#sg .price span{position:relative;font-size:calc(var(--u)*3.6);line-height:1.1;white-space:nowrap;transition:opacity .6s ease .2s}
#sg .price span::after{content:"";position:absolute;left:-5%;right:-5%;top:54%;height:max(2px,calc(var(--u)*.3));background:#fff;border-radius:9px;box-shadow:0 0 calc(var(--u)*.8) rgba(255,255,255,.7);transform:scaleX(0);transform-origin:left;transition:transform .8s cubic-bezier(.6,0,.2,1)}
#sg .promo .price span::after{transform:scaleX(1)}
#sg .promo .price span{opacity:.5}
#sg .once{font-size:calc(var(--u)*1.05);letter-spacing:.2em;text-transform:uppercase;opacity:.7;margin-bottom:calc(var(--u)*1.3)}
#sg .card ul{list-style:none;text-align:left;display:grid;gap:calc(var(--u)*.7);font-family:var(--ui);font-size:calc(var(--u)*1.25)}
#sg .card li{display:flex;gap:calc(var(--u)*.9);line-height:1.3}
#sg .card li::before{content:"✓";flex:none;font-weight:700}
#sg .monthly{margin-top:calc(var(--u)*1.5);padding-top:calc(var(--u)*1.3);border-top:1px solid rgba(255,255,255,.25);display:flex;align-items:baseline;justify-content:center;gap:calc(var(--u)*.5)}
#sg .monthly span{font-size:calc(var(--u)*3);line-height:1;white-space:nowrap}
#sg .monthly small{font-size:calc(var(--u)*1.4);opacity:.75}
#sg .plans{gap:calc(var(--u)*1.2)}
#sg .disclaimer{font-size:calc(var(--u)*1.1);letter-spacing:.12em;text-transform:uppercase;text-align:center;padding:0 6vw;opacity:0;transform:translateY(calc(var(--u)*.8));transition:opacity .8s ease .15s,transform .8s ease .15s;text-shadow:0 0 calc(var(--u)*1.4) rgba(255,255,255,.4)}
#sg .limited{font-family:var(--font);font-size:calc(var(--u)*.95);letter-spacing:.12em;text-transform:uppercase;text-align:center;opacity:0;transition:opacity .8s ease .6s;color:#d1d1d6}
#sg .promo .disclaimer{opacity:1;transform:none}
#sg .promo .limited{opacity:.85}

/* ---------- Botones ---------- */
#sg .ctrl{position:relative;z-index:5}
#sg .grp{position:absolute;inset:0;display:flex;justify-content:center;align-items:flex-start;gap:clamp(10px,2.4vmin,22px);padding:0 5vw;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .45s ease,visibility 0s .45s}
#sg[data-grp="home"]    .grp[data-g="home"],
#sg[data-grp="iamenu"]  .grp[data-g="iamenu"],
#sg[data-grp="pick"]    .grp[data-g="pick"],
#sg[data-grp="end"]     .grp[data-g="end"],
#sg[data-grp="plans"]   .grp[data-g="plans"],
#sg[data-grp="progend"] .grp[data-g="progend"],
#sg[data-grp="webend"]  .grp[data-g="webend"]{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .8s ease}
#sg button{
  flex:1 1 0;max-width:clamp(140px,34vmin,230px);
  font-family:var(--font);text-transform:uppercase;letter-spacing:.2em;
  font-size:clamp(11px,2.1vmin,16px);color:#fff;background:rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.9);border-radius:99px;
  padding:1.15em .6em;cursor:pointer;touch-action:manipulation;
  transition:background .25s,color .25s,transform .15s,box-shadow .25s;
  box-shadow:0 0 18px rgba(255,255,255,.08)
}
#sg button:active{transform:scale(.96);background:#fff;color:#000}
@media (hover:hover){#sg button:hover{background:#fff;color:#000;box-shadow:0 0 24px rgba(255,255,255,.35)}}
#sg button:focus-visible{outline:2px solid #fff;outline-offset:3px}

#sg button{white-space:nowrap}
#sg .grp[data-g="home"] button{max-width:none;letter-spacing:.14em;font-size:clamp(10px,1.9vmin,15px);padding:1.2em .5em}
/* Todos los botones: misma altura y centrado (nada descuadrado) */
#sg button{display:grid;place-items:center;min-height:clamp(46px,7.2vh,60px);line-height:1.1;text-align:center}
#sg .grp[data-g="home"] button{align-self:flex-start}

/* ---------- Fondos más dinámicos: la cuadrícula y el resplandor cambian por módulo ---------- */
#sg .glow{position:absolute;inset:-25%;pointer-events:none;opacity:0;transition:opacity 2s ease;
  background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.075),transparent 38%),radial-gradient(circle at 75% 70%,rgba(255,255,255,.05),transparent 36%);
  animation:drift 16s ease-in-out infinite alternate}
#sg:not([data-state="intro"]) .glow{opacity:1}
@keyframes drift{from{transform:translate(-4%,-3%) scale(1)}to{transform:translate(5%,4%) scale(1.12)}}
#sg[data-mod="ia"] .bg{animation:gridUp 7s linear infinite}
#sg[data-mod="prog"] .bg{animation:gridDiag 10s linear infinite}
#sg[data-mod="web"] .bg{animation:gridSide 9s linear infinite}
@keyframes gridUp{to{background-position:0 calc(-1*clamp(34px,6vmin,64px)),0 0}}
@keyframes gridDiag{to{background-position:clamp(34px,6vmin,64px) clamp(34px,6vmin,64px),clamp(34px,6vmin,64px) clamp(34px,6vmin,64px)}}
@keyframes gridSide{to{background-position:0 0,clamp(34px,6vmin,64px) 0}}
#sg[data-mod="prog"] .glow{animation-duration:9s}
#sg[data-mod="web"] .glow{animation-duration:12s}


/* ================= MÓDULO PROGRAMACIÓN (globo) ================= */
#sg .globe{--b:min(25vw,14vh);position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity 1s ease,visibility 0s 1s}
@supports (height:1dvh){#sg .globe{--b:min(25vw,14dvh)}}
#sg[data-mod="prog"] .globe{opacity:1;visibility:visible;transition:opacity 1.2s ease}
#sg .globe canvas{position:absolute;inset:0;width:100%;height:100%}
#sg .orb{position:absolute;left:50%;top:20%;width:0;height:0}
#sg .ball{position:absolute;left:0;top:0;width:var(--b);height:var(--b);margin:calc(var(--b)/-2) 0 0 calc(var(--b)/-2);border-radius:50%;background:#fff;color:#000;display:grid;place-items:center;
  box-shadow:0 0 calc(var(--b)*.5) rgba(255,255,255,.65),0 0 calc(var(--b)*1.2) rgba(255,255,255,.25);transform:scale(0);opacity:0;transition:transform .55s cubic-bezier(.3,1.5,.5,1),opacity .35s}
#sg .ball.on{transform:scale(1);opacity:1;animation:bob 2.6s ease-in-out .55s infinite}
@keyframes bob{50%{translate:0 calc(var(--b)*-.09)}}
#sg .ball svg{width:52%;height:52%;fill:none;stroke:#000;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
#sg .orb h4{position:absolute;left:0;top:calc(var(--b)/2 + 1.6vh);width:92vw;max-width:640px;transform:translateX(-50%);text-align:center;font-weight:400;font-size:clamp(14px,min(4.6vw,2.7vh),26px);letter-spacing:.14em;text-transform:uppercase;line-height:1.3;opacity:0;transition:opacity .5s}
#sg .orb h4.on{opacity:1}
#sg .pmsg{position:absolute;left:0;right:0;top:44%;transform:translateY(-50%) scale(.45);text-align:center;padding:0 7vw;opacity:0;filter:blur(10px);transition:transform 1.8s cubic-bezier(.2,.8,.2,1),opacity 1.3s ease,filter 1.5s ease}
#sg .pmsg.on{transform:translateY(-50%) scale(1);opacity:1;filter:none}
#sg .pmsg h2{font-weight:400;font-size:clamp(20px,min(7.4vw,4.8vh),46px);letter-spacing:.07em;text-transform:uppercase;line-height:1.25;text-shadow:0 0 24px rgba(255,255,255,.4)}
#sg .pmsg p{margin-top:2.2vh;font-size:clamp(14px,min(4.6vw,2.8vh),26px);letter-spacing:.18em;text-transform:uppercase;color:#d1d1d6}

/* ================= MÓDULO SITIOS WEB (laptop) ================= */
#sg .laptop{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2.5vh;opacity:0;visibility:hidden;transition:opacity 1s ease,visibility 0s 1s}
#sg[data-mod="web"] .laptop{opacity:1;visibility:visible;transition:opacity 1s ease}
#sg .lmsg{min-height:12vh;display:grid;place-items:center;max-width:92vw;padding:0 4vw;text-align:center;text-transform:uppercase;letter-spacing:.09em;line-height:1.3;font-size:clamp(16px,min(5.6vw,3.6vh),38px);opacity:0;transform:translateY(14px) scale(.96);transition:opacity 1.2s ease,transform 1.2s ease}
#sg .lmsg.on{opacity:1;transform:none;text-shadow:0 0 22px rgba(255,255,255,.45)}
#sg .lap{--lw:min(88vw,82vh);--lu:calc(var(--lw)/42);width:var(--lw);font-size:var(--lu);perspective:calc(var(--lw)*2.6)}
@supports (height:1dvh){#sg .lap{--lw:min(88vw,82dvh)}#sg .lmsg{min-height:12dvh}}
#sg .lid{width:100%;aspect-ratio:16/10;padding:calc(var(--lu)*.9);border-radius:calc(var(--lu)*1.5) calc(var(--lu)*1.5) calc(var(--lu)*.4) calc(var(--lu)*.4);
  background:linear-gradient(145deg,#4a4a4d,#141416 40%,#2a2a2c);box-shadow:0 0 calc(var(--lu)*6) rgba(255,255,255,.08);
  transform-origin:50% 100%;transition:transform 1.4s cubic-bezier(.55,0,.3,1),opacity .4s ease 1.1s}
#sg .lid.closed{transform:rotateX(-88deg);opacity:0}
#sg .lscr{position:relative;width:100%;height:100%;background:#000;border-radius:calc(var(--lu)*.8);overflow:hidden}
#sg .base{position:relative;height:calc(var(--lu)*1.3);margin:0 -3.5%;background:linear-gradient(#6b6b70,#1c1c1e);border-radius:0 0 calc(var(--lu)*2) calc(var(--lu)*2);box-shadow:0 calc(var(--lu)*1.6) calc(var(--lu)*3) rgba(0,0,0,.85)}
#sg .base i{position:absolute;left:50%;top:0;translate:-50% 0;width:16%;height:calc(var(--lu)*.5);background:#2a2a2c;border-radius:0 0 calc(var(--lu)*.7) calc(var(--lu)*.7)}
#sg .lboot{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--lu)*1.8);transition:opacity .7s ease}
#sg .lboot.off{opacity:0;pointer-events:none}
#sg .lboot img{width:22%;filter:drop-shadow(0 0 calc(var(--lu)*1.6) rgba(255,255,255,.6))}
#sg .lboot p{font-size:calc(var(--lu)*1.15);letter-spacing:.16em;text-transform:uppercase}
#sg .lboot .bar{width:42%;height:calc(var(--lu)*.45)}
#sg .slides{position:absolute;inset:0}
#sg .sl{position:absolute;inset:0;padding:calc(var(--lu)*2.2) calc(var(--lu)*2.8) calc(var(--lu)*3.4);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:calc(var(--lu)*2.4);align-items:center;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility 0s .3s}
#sg .sl .tx{min-width:0}
#sg .sl .tx h3{overflow-wrap:normal;word-break:normal;hyphens:none}
#sg .sl.on{opacity:1;visibility:visible;transition:opacity .5s ease .35s}
@media (max-width:640px) and (orientation:portrait){
  #sg .lap{--lw:min(97vw,82vh)}
  #sg .sl{padding:calc(var(--lu)*1.8) calc(var(--lu)*2) calc(var(--lu)*3.2);gap:calc(var(--lu)*1.6)}
  #sg .sl .tx h3{font-size:calc(var(--lu)*2.4)}
  #sg .sl .tx p{font-size:calc(var(--lu)*1.5)}
  #sg .sl .tx small{font-size:calc(var(--lu)*1.1)}
}
#sg .sl .tx small{display:block;margin-bottom:calc(var(--lu)*.8);font-size:calc(var(--lu)*.95);letter-spacing:.22em;color:#8e8e93}
#sg .sl .tx h3{font-weight:400;font-size:calc(var(--lu)*2.1);letter-spacing:.06em;text-transform:uppercase;line-height:1.2;margin-bottom:calc(var(--lu)*1)}
#sg .sl .tx p{font-family:var(--ui);font-size:calc(var(--lu)*1.2);line-height:1.45;color:#d1d1d6}
#sg .vz{position:relative;aspect-ratio:4/3;width:100%;background:#0d0d0f;border:1px solid rgba(255,255,255,.15);border-radius:calc(var(--lu)*1);padding:calc(var(--lu)*.9);overflow:hidden;font-family:var(--ui);box-shadow:0 0 calc(var(--lu)*3) rgba(255,255,255,.06)}
#sg .dots{position:absolute;left:50%;bottom:calc(var(--lu)*1.1);translate:-50% 0;display:flex;gap:calc(var(--lu)*.6)}
#sg .dots i{width:calc(var(--lu)*.6);height:calc(var(--lu)*.6);border-radius:99px;background:#4a4a4d;transition:all .4s}
#sg .dots i.on{background:#fff;width:calc(var(--lu)*2)}
@keyframes slin{from{opacity:0;transform:translateY(calc(var(--lu)*.9)) scale(.96)}}
/* visual: web */
#sg .v-web .tb{display:flex;gap:calc(var(--lu)*.4);margin-bottom:calc(var(--lu)*.7)}
#sg .v-web .tb i{width:calc(var(--lu)*.6);height:calc(var(--lu)*.6);border-radius:50%;background:#444}
#sg .v-web .hero{height:38%;border-radius:calc(var(--lu)*.6);margin-bottom:calc(var(--lu)*.7);background:linear-gradient(135deg,#34343a,#111);display:grid;place-items:center}
#sg .v-web .hero b{display:block;width:38%;height:calc(var(--lu)*.8);background:#fff;border-radius:99px}
#sg .v-web .cols{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(var(--lu)*.6);height:34%}
#sg .v-web .cols div{background:#1c1c1f;border-radius:calc(var(--lu)*.5)}
#sg .on .v-web .hero{animation:slin .7s .3s both}
#sg .on .v-web .cols div{animation:slin .6s both}
#sg .on .v-web .cols div:nth-child(1){animation-delay:.8s}#sg .on .v-web .cols div:nth-child(2){animation-delay:1s}#sg .on .v-web .cols div:nth-child(3){animation-delay:1.2s}
/* visual: tienda */
#sg .v-shop .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(var(--lu)*.6);margin-top:calc(var(--lu)*3)}
#sg .v-shop .pc{background:#1c1c1f;border-radius:calc(var(--lu)*.6);padding:calc(var(--lu)*.5)}
#sg .v-shop .pc u{display:block;aspect-ratio:1;background:linear-gradient(135deg,#3a3a40,#151517);border-radius:calc(var(--lu)*.4)}
#sg .v-shop .pc b{display:block;height:calc(var(--lu)*.45);width:70%;background:#777;margin-top:calc(var(--lu)*.5);border-radius:9px}
#sg .v-shop .pc em{display:block;height:calc(var(--lu)*.45);width:40%;background:#fff;margin-top:calc(var(--lu)*.35);border-radius:9px}
#sg .v-shop .cart{position:absolute;right:calc(var(--lu)*1);top:calc(var(--lu)*.8);width:calc(var(--lu)*2.6);height:calc(var(--lu)*2.6)}
#sg .v-shop .cart svg{width:100%;height:100%;fill:none;stroke:#fff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
#sg .v-shop .badge{position:absolute;top:calc(var(--lu)*-.4);right:calc(var(--lu)*-.5);width:calc(var(--lu)*1.4);height:calc(var(--lu)*1.4);border-radius:50%;background:#fff;color:#000;display:grid;place-items:center;font-size:calc(var(--lu)*.9);font-weight:700}
#sg .v-shop .pay{position:absolute;left:calc(var(--lu)*1);right:calc(var(--lu)*1);bottom:calc(var(--lu)*1);height:calc(var(--lu)*2.3);border-radius:99px;background:#fff;color:#000;display:grid;place-items:center;font-family:var(--font);font-size:calc(var(--lu)*.95);letter-spacing:.2em}
#sg .on .v-shop .pc{animation:slin .6s both}
#sg .on .v-shop .pc:nth-child(1){animation-delay:.4s}#sg .on .v-shop .pc:nth-child(2){animation-delay:.6s}#sg .on .v-shop .pc:nth-child(3){animation-delay:.8s}
#sg .on .v-shop .badge{animation:slin .5s 1.5s both}
#sg .on .v-shop .pay{animation:slin .6s 2.1s both}
/* visual: SEO */
#sg .v-seo .sb{display:flex;align-items:center;gap:calc(var(--lu)*.6);height:calc(var(--lu)*2.5);padding:0 calc(var(--lu)*1);border:1px solid #666;border-radius:99px;font-size:calc(var(--lu)*1);margin-bottom:calc(var(--lu)*.9)}
#sg .v-seo .typ{display:inline-block;overflow:hidden;white-space:nowrap;width:0}
#sg .on .v-seo .typ{animation:typing 1.6s steps(23) .4s forwards}
@keyframes typing{to{width:23ch}}
#sg .v-seo .rs{position:relative;height:calc(100% - calc(var(--lu)*3.6))}
#sg .v-seo .rs div{position:absolute;left:0;right:0;height:30%;padding:calc(var(--lu)*.7) calc(var(--lu)*.9);border-radius:calc(var(--lu)*.6);background:#1c1c1f;font-size:calc(var(--lu)*.95);display:flex;flex-direction:column;gap:calc(var(--lu)*.45)}
#sg .v-seo .rs i{display:block;height:calc(var(--lu)*.45);background:#666;border-radius:9px;width:80%}#sg .v-seo .rs i+i{width:55%;opacity:.6}
#sg .v-seo .r1{top:0}#sg .v-seo .r2{top:35%}
#sg .v-seo .me{top:70%;background:#fff!important;color:#000;font-weight:700}
#sg .v-seo .me i{background:#000}
#sg .on .v-seo .r1{animation:dn1 1.1s 2.1s both}#sg .on .v-seo .r2{animation:dn2 1.1s 2.1s both}#sg .on .v-seo .me{animation:up 1.1s 2.1s both}
@keyframes dn1{to{top:35%}}@keyframes dn2{to{top:70%}}@keyframes up{to{top:0}}
/* visual: GEO */
#sg .v-geo{display:flex;flex-direction:column;gap:calc(var(--lu)*.8);font-size:calc(var(--lu)*.98);line-height:1.4}
#sg .v-geo .q{align-self:flex-end;max-width:88%;padding:calc(var(--lu)*.6) calc(var(--lu)*.9);border-radius:calc(var(--lu)*1) calc(var(--lu)*1) calc(var(--lu)*.2) calc(var(--lu)*1);background:#fff;color:#000}
#sg .v-geo .a{padding:calc(var(--lu)*.8) calc(var(--lu)*1);border-radius:calc(var(--lu)*1) calc(var(--lu)*1) calc(var(--lu)*1) calc(var(--lu)*.2);background:#1c1c1f}
#sg .v-geo .a mark{background:none;color:#fff;font-weight:700;border-bottom:1px solid #fff}
#sg .v-geo .st{color:#fff;letter-spacing:.2em;margin-top:calc(var(--lu)*.3);opacity:1}
#sg .on .v-geo .q{animation:slin .6s .3s both}
#sg .on .v-geo .a{animation:slin .8s 1.7s both}
/* visual: marketing */
#sg .v-mkt{display:flex;flex-direction:column}
#sg .v-mkt .kpi{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:calc(var(--lu)*.6)}
#sg .v-mkt .kpi b{font-size:calc(var(--lu)*2.7)}#sg .v-mkt .kpi small{font-size:calc(var(--lu)*.95);color:#a1a1a6}
#sg .v-mkt .mb{flex:1;display:flex;align-items:flex-end;gap:calc(var(--lu)*.7);border-bottom:1px solid #444}
#sg .v-mkt .mb i{flex:1;height:var(--h);background:#fff;border-radius:calc(var(--lu)*.3) calc(var(--lu)*.3) 0 0;transform-origin:bottom;opacity:.85}
#sg .on .v-mkt .mb i{animation:grow 1s var(--d) both}
@keyframes grow{from{transform:scaleY(0)}}
#sg .v-mkt .kpi b{opacity:1}
#sg .on .v-mkt .kpi{animation:slin .6s .3s both}

/* Pantallas bajas (laptop pequeña / móvil horizontal) */
@media (max-height:520px){#sg{--ph:min(66vh,1100px,190vw);--ctrl:22vh}}
@supports (height:1dvh){@media (max-height:520px){#sg{--ph:min(66dvh,1100px,190vw);--ctrl:22dvh}}}
@media (prefers-reduced-motion:reduce){#sg .bg,#sg .phone,#sg .boot img{animation:none}}

/* ================= MÓVIL VERTICAL ================= */
@media (max-width:640px) and (orientation:portrait){
  #sg{--ctrl:max(16vh,118px);--ph:min(80vh,1100px,190vw)}
  #sg .grp{align-items:flex-start;padding:1.6vh 5vw 0;gap:12px}
  #sg button{min-height:58px;font-size:13px;letter-spacing:.13em;padding:0 .5em;max-width:none}
  #sg .grp[data-g="home"]{flex-direction:column;align-items:center;gap:12px;inset:auto 0 0 0;padding-bottom:max(3vh,env(safe-area-inset-bottom,0px))}
  #sg .grp[data-g="home"] button{flex:none;width:min(84vw,340px);align-self:center;font-size:14px}
  /* Sitios Web en móvil: en vez de laptop, un celular */
  #sg .lap{--lw:min(86vw,34vh);--lu:calc(var(--lw)/24);perspective:none}
  #sg .lmsg{min-height:10vh}
  #sg .lid{aspect-ratio:9/18.5;border-radius:calc(var(--lu)*4.2);padding:calc(var(--lu)*.55);
    background:linear-gradient(145deg,#4a4a4d,#111 35%,#1b1b1d 65%,#555);
    box-shadow:0 0 0 calc(var(--lu)*.1) #000,0 0 calc(var(--lu)*5) rgba(255,255,255,.08);transform-origin:50% 50%}
  #sg .lid.closed{transform:scale(.96);opacity:0}
  #sg .lscr{border-radius:calc(var(--lu)*3.7)}
  #sg .lscr::before{content:"";position:absolute;z-index:6;top:calc(var(--lu)*1.1);left:50%;translate:-50% 0;width:calc(var(--lu)*6.6);height:calc(var(--lu)*1.9);background:#000;border-radius:99px;box-shadow:0 0 0 1px #0d0d0d}
  #sg .base{display:none}
  #sg .lboot img{width:42%}#sg .lboot .bar{width:62%}#sg .lboot p{font-size:calc(var(--lu)*1.1)}
  #sg .sl{grid-template-columns:minmax(0,1fr);align-content:center;padding:calc(var(--lu)*5) calc(var(--lu)*1.7) calc(var(--lu)*3.4);gap:calc(var(--lu)*1.3)}
  #sg .sl .tx h3{font-size:calc(var(--lu)*2.2)}
  #sg .sl .tx p{font-size:calc(var(--lu)*1.28);line-height:1.4}
  #sg .sl .tx small{font-size:calc(var(--lu)*.95);margin-bottom:calc(var(--lu)*.5)}
  #sg .dots{bottom:calc(var(--lu)*1.6)}
}
@supports (height:1dvh){@media (max-width:640px) and (orientation:portrait){
  #sg{--ctrl:max(16dvh,118px);--ph:min(80dvh,1100px,190vw)}
  #sg .lap{--lw:min(86vw,34dvh)}#sg .lmsg{min-height:10dvh}
}}