/* ============================================================
   360 Tech — 360 Suite
   Hero orbital (íconos girando 360) + explorador del espacio
   de trabajo + banda de soberanía europea + bento de features.
   Depende de site.css (tokens) · site-mocks.css (.mock)
   ============================================================ */

/* ============================================================
   HERO orbital
   ============================================================ */
.phero--suite{ text-align:center; overflow:hidden; padding-bottom:clamp(40px,7vh,88px); }
.phero--suite .wrap{ position:relative; z-index:1; }
.shero{ display:flex; flex-direction:column; align-items:center; }

.sorbit{ position:relative; width:min(720px,86vw); aspect-ratio:1/1; margin:0 auto; display:grid; place-items:center; }
.sorbit__glow{ position:absolute; inset:8%; border-radius:50%; background:radial-gradient(50% 50% at 50% 50%, rgba(17,195,189,.14), transparent 70%); }
.sorbit__ring{ position:absolute; border-radius:50%; border:1px dashed rgba(159,236,233,.14); }
.sorbit__ring--1{ inset:6%; }
.sorbit__ring--2{ inset:24%; border-style:solid; border-color:rgba(159,236,233,.06); }
.sorbit__ring--3{ inset:40%; }

/* satélites: rotate(θ) translateX(r) rotate(-θ) mantiene el ícono recto */
.sat{ position:absolute; top:50%; left:50%; width:0; height:0; animation:satOrbit var(--dur,56s) linear infinite; animation-delay:var(--delay,0s); }
.sat--rev{ animation-name:satOrbitRev; }
@keyframes satOrbit{ from{ transform:rotate(0) translateX(var(--r)) rotate(0); } to{ transform:rotate(360deg) translateX(var(--r)) rotate(-360deg); } }
@keyframes satOrbitRev{ from{ transform:rotate(0) translateX(var(--r)) rotate(0); } to{ transform:rotate(-360deg) translateX(var(--r)) rotate(360deg); } }
.sat__chip{ position:absolute; top:0; left:0; transform:translate(-50%,-50%); width:clamp(48px,6vw,64px); height:clamp(48px,6vw,64px); border-radius:18px; display:grid; place-items:center; color:var(--turq);
  background:linear-gradient(160deg, rgba(13,24,38,.94), rgba(7,12,20,.94)); border:1px solid var(--line-2);
  box-shadow:0 18px 40px -20px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.05); }
.sat__chip svg{ width:clamp(22px,2.8vw,28px); height:clamp(22px,2.8vw,28px); }
.sat__chip::after{ content:attr(data-l); position:absolute; top:calc(100% + 7px); left:50%; transform:translateX(-50%); font-family:var(--f-display); font-weight:300; font-size:.56rem; letter-spacing:.1em; text-transform:uppercase; color:var(--mut-2); white-space:nowrap; }
@media (prefers-reduced-motion:reduce){ .sat{ animation:none; } }

.sorbit__center{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:2; width:min(760px,86%); padding:0 10px; text-align:center; }
.sorbit__badge{ display:inline-flex; align-items:center; gap:9px; margin-bottom:14px; font-family:var(--f-display); font-weight:300; font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:var(--turq); }
.sorbit__badge i{ width:20px; height:1px; background:var(--turq); }
.sorbit__center h1{ font-family:var(--f-sans); font-weight:700; font-size:clamp(3rem,6.8vw,5.6rem); line-height:.96; letter-spacing:-.04em; text-wrap:balance; text-align:center; }
.shero__sub{ margin:clamp(40px,6vh,76px) auto 0; max-width:52ch; }
.phero--suite .phero__cta{ margin-top:30px; justify-content:center; }
.phero--suite .phero__meta{ margin-top:24px; justify-content:center; }

@media (max-width:600px){
  .sat__chip::after{ display:none; }
  .sorbit__center{ max-width:74%; }
}

/* ============================================================
   EXPLORADOR · espacio de trabajo (mock interactivo)
   ============================================================ */
.wsx{ margin-top:52px; }
.ws{ display:grid; grid-template-columns:158px 1fr; min-height:392px; }
.ws__side{ border-right:1px solid var(--line); padding:14px 12px; display:flex; flex-direction:column; gap:5px; background:rgba(6,12,20,.42); }
.ws__brand{ display:flex; align-items:center; gap:9px; padding:6px 8px 14px; }
.ws__brand .lg{ width:26px; height:26px; border-radius:8px; display:grid; place-items:center; color:var(--turq); background:rgba(17,195,189,.12); border:1px solid rgba(17,195,189,.28); }
.ws__brand .lg svg{ width:15px; height:15px; }
.ws__brand b{ font-family:var(--f-display); font-weight:300; font-size:.68rem; letter-spacing:.08em; color:#eaf5f7; }
.ws__app{ display:flex; align-items:center; gap:11px; padding:10px 11px; border-radius:10px; font-size:.82rem; color:var(--mut); cursor:pointer; transition:background .25s var(--ease), color .25s var(--ease); }
.ws__app .ic{ width:18px; height:18px; flex:none; color:var(--mut-2); transition:color .25s var(--ease); }
.ws__app:hover{ color:#eaf5f7; background:rgba(159,236,233,.04); }
.ws__app.on{ background:rgba(17,195,189,.12); color:#fff; }
.ws__app.on .ic{ color:var(--turq); }
.ws__side-foot{ margin-top:auto; padding:11px 10px 4px; border-top:1px solid var(--line); }
.ws__me{ display:flex; align-items:center; gap:9px; }
.ws__me .av{ width:24px; height:24px; border-radius:50%; background:linear-gradient(135deg,#13b7b1,#0f5a79); display:grid; place-items:center; font-size:.6rem; color:#03110f; font-weight:700; }
.ws__me span{ font-size:.68rem; color:var(--mut-2); }

.ws__main{ padding:0; display:flex; flex-direction:column; }
.ws__head{ display:flex; align-items:center; justify-content:space-between; padding:15px 18px; border-bottom:1px solid var(--line); }
.ws__head b{ font-family:var(--f-sans); font-weight:600; font-size:1rem; }
.ws__head .tag{ font-family:var(--f-display); font-weight:300; font-size:.56rem; letter-spacing:.1em; color:var(--turq); border:1px solid rgba(17,195,189,.3); border-radius:100px; padding:4px 11px; }
.ws__view{ padding:16px 18px 18px; }

/* entrada suave al cambiar de app */
@media (prefers-reduced-motion:no-preference){
  .ws__view{ animation:wsFade .45s var(--ease) both; }
}
@keyframes wsFade{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }

/* --- Correo --- */
.wm-row{ display:grid; grid-template-columns:26px 1fr auto; gap:12px; align-items:center; padding:11px 0; border-top:1px solid var(--line); }
.wm-row:first-child{ border-top:0; }
.wm-row .dot{ width:8px; height:8px; border-radius:50%; background:var(--turq); justify-self:center; }
.wm-row.read .dot{ background:rgba(159,236,233,.18); }
.wm-row .who{ font-size:.82rem; color:#fff; } .wm-row.read .who{ color:var(--mut); font-weight:400; }
.wm-row .subj{ font-size:.76rem; color:var(--mut); }
.wm-row .tm{ font-size:.68rem; color:var(--mut-2); font-family:var(--f-mono,Menlo,monospace); }
.wm-row .who b{ font-weight:600; }

/* --- Drive --- */
.wd-bar{ margin-bottom:14px; }
.wd-bar__t{ display:flex; justify-content:space-between; font-size:.72rem; color:var(--mut-2); margin-bottom:7px; }
.wd-bar__track{ height:8px; border-radius:5px; background:rgba(159,236,233,.1); overflow:hidden; }
.wd-bar__fill{ height:100%; border-radius:5px; background:linear-gradient(90deg,#0f5a79,#11c3bd); width:32%; }
.wd-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.wd-file{ border:1px solid var(--line); border-radius:12px; padding:14px 15px; background:rgba(10,17,29,.45); transition:border-color .25s var(--ease), background .25s var(--ease); }
.wd-file:hover{ border-color:var(--line-2); background:rgba(13,22,36,.6); }
.wd-file .ic{ width:38px; height:38px; border-radius:10px; display:grid; place-items:center; color:var(--turq); background:rgba(17,195,189,.1); border:1px solid rgba(17,195,189,.2); }
.wd-file .ic svg{ width:20px; height:20px; }
.wd-file b{ display:block; font-size:.82rem; margin-top:14px; color:#eaf5f7; font-weight:500; }
.wd-file span{ font-size:.66rem; color:var(--mut-2); }

/* --- Meet --- */
.wv-stage{ border:1px solid var(--line); border-radius:12px; background:rgba(6,11,20,.6); padding:12px; }
.wv-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.wv-cam{ aspect-ratio:4/3; border-radius:9px; position:relative; overflow:hidden; background:linear-gradient(150deg, rgba(17,195,189,.14), rgba(11,18,32,.85)); border:1px solid var(--line); display:grid; place-items:center; }
.wv-cam .ini{ width:34px; height:34px; border-radius:50%; display:grid; place-items:center; font-size:.72rem; font-weight:700; color:#03110f; background:linear-gradient(135deg,#13b7b1,#3fb6e0); }
.wv-cam.me{ border-color:rgba(17,195,189,.5); }
.wv-cam .nm{ position:absolute; left:7px; bottom:6px; font-size:.56rem; color:#cfe9ea; }
.wv-cam .live{ position:absolute; right:7px; top:6px; width:7px; height:7px; border-radius:50%; background:#3fe6e0; box-shadow:0 0 8px #3fe6e0; }
.wv-bar{ display:flex; align-items:center; justify-content:center; gap:9px; margin-top:12px; }
.wv-btn{ width:34px; height:34px; border-radius:50%; display:grid; place-items:center; color:#eaf5f7; background:rgba(159,236,233,.08); border:1px solid var(--line); }
.wv-btn svg{ width:16px; height:16px; }
.wv-btn.end{ background:#d3554f; color:#fff; border-color:transparent; }

/* --- Calendario --- */
.wc-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:7px; }
.wc-col{ border:1px solid var(--line); border-radius:10px; background:rgba(10,17,29,.4); padding:8px 7px; min-height:174px; display:flex; flex-direction:column; gap:6px; }
.wc-d{ font-family:var(--f-display); font-weight:300; font-size:.56rem; letter-spacing:.09em; text-transform:uppercase; color:var(--mut-2); text-align:center; padding-bottom:5px; border-bottom:1px solid var(--line); }
.wc-ev{ border-radius:7px; padding:7px 8px; font-size:.66rem; line-height:1.25; border-left:2px solid var(--turq); background:rgba(17,195,189,.1); color:#eaf5f7; }
.wc-ev span{ font-family:var(--f-mono,Menlo,monospace); font-size:.58rem; color:var(--turq); display:block; }
.wc-ev--b{ border-left-color:#3fb6e0; background:rgba(63,182,224,.1); } .wc-ev--b span{ color:#63c6e8; }

/* --- Web --- */
.wb-browser{ border:1px solid var(--line); border-radius:11px; overflow:hidden; background:rgba(6,11,20,.6); }
.wb-url{ display:flex; align-items:center; gap:8px; padding:9px 12px; border-bottom:1px solid var(--line); font-size:.72rem; color:var(--mut); }
.wb-url .lock{ width:12px; height:12px; color:var(--turq); }
.wb-url .u{ font-family:var(--f-mono,Menlo,monospace); color:#cfe9ea; }
.wb-hero{ padding:22px 18px; text-align:center; background:radial-gradient(80% 120% at 50% 0%, rgba(17,195,189,.12), transparent 70%); }
.wb-hero b{ display:block; font-family:var(--f-display); font-weight:400; font-size:1.15rem; color:#fff; }
.wb-hero span{ font-size:.72rem; color:var(--mut); }
.wb-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:9px; padding:12px; }
.wb-stat{ text-align:center; border:1px solid var(--line); border-radius:9px; padding:9px 6px; background:rgba(10,17,29,.45); }
.wb-stat b{ display:block; font-family:var(--f-display); font-size:.92rem; color:var(--turq); }
.wb-stat span{ font-size:.56rem; color:var(--mut-2); text-transform:uppercase; letter-spacing:.05em; }

@media (max-width:640px){
  .ws{ grid-template-columns:1fr; }
  .ws__side{ flex-direction:row; overflow-x:auto; border-right:0; border-bottom:1px solid var(--line); }
  .ws__brand, .ws__side-foot{ display:none; }
  .ws__app{ white-space:nowrap; }
  .wd-grid, .wv-grid, .wb-stats{ grid-template-columns:repeat(2,1fr); }
}

/* ============================================================
   BANDA · soberanía europea (motivo UE)
   ============================================================ */
.sov{ position:relative; }
.sov::before{ content:""; position:absolute; inset:0; left:calc(50% - 50vw); width:100vw; z-index:0;
  background:linear-gradient(180deg, transparent, rgba(12,22,38,.55) 22%, rgba(12,22,38,.55) 78%, transparent); }
.sov__in{ position:relative; z-index:1; display:grid; grid-template-columns:1fr 0.92fr; gap:clamp(34px,5vw,76px); align-items:center; }
.sov__pts{ margin-top:24px; display:flex; flex-direction:column; gap:13px; }
.sov__pt{ display:flex; gap:12px; align-items:flex-start; font-size:.96rem; color:var(--mut); line-height:1.45; }
.sov__pt .ck{ width:19px; height:19px; flex:none; margin-top:1px; color:var(--turq); }
.sov__pt .ck svg,
.ws__app .ic svg,
.wb-url .lock svg{ width:100%; height:100%; display:block; }
.sov__pt b{ color:#eaf5f7; font-weight:600; }

/* estrellas UE en círculo + nodo de datos */
.eu{ position:relative; width:min(420px,80%); aspect-ratio:1/1; margin:0 auto; display:grid; place-items:center; }
.eu__ring{ position:absolute; inset:14%; border-radius:50%; border:1px solid rgba(17,195,189,.2); }
.eu__ring--o{ inset:2%; border-style:dashed; border-color:rgba(159,236,233,.12); animation:euSpin 90s linear infinite; }
@keyframes euSpin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ .eu__ring--o{ animation:none; } }
.eu__star{ position:absolute; top:50%; left:50%; width:0; height:0; }
.eu__star i{ position:absolute; top:0; left:0; color:var(--turq); line-height:0; filter:drop-shadow(0 0 5px rgba(17,195,189,.6)); }
.eu__star i svg{ width:17px; height:17px; max-width:none; display:block; }
.eu__core{ position:relative; z-index:2; width:min(210px,62%); aspect-ratio:1/1; border-radius:34px; display:grid; place-items:center; text-align:center; padding:16px;
  background:radial-gradient(130% 130% at 30% 20%, rgba(17,195,189,.18), rgba(9,15,26,.94)); border:1px solid rgba(17,195,189,.34);
  box-shadow:0 34px 80px -34px rgba(17,195,189,.42), inset 0 1px 0 rgba(255,255,255,.06); }
.eu__map{ width:86%; height:auto; filter:drop-shadow(0 10px 22px rgba(17,195,189,.35)); }
.eu__map svg{ width:100%; height:auto; display:block; overflow:visible; }
.eu__dot{ fill:#11c3bd; }
.eu__pin{ fill:#f2fffe; }
.eu__ping{ fill:none; stroke:#7ff4f0; stroke-width:1.6; transform-box:fill-box; transform-origin:center; animation:euPing 2.6s var(--ease) infinite; }
@keyframes euPing{ 0%{ transform:scale(1); opacity:.9; } 70%{ transform:scale(3.4); opacity:0; } 100%{ opacity:0; } }
@media (prefers-reduced-motion:reduce){ .eu__ping{ animation:none; opacity:0; } }
.eu__cap{ position:absolute; bottom:14px; left:0; right:0; font-family:var(--f-display); font-weight:300; font-size:.54rem; letter-spacing:.16em; text-transform:uppercase; color:var(--mut-2); }
.eu__pulse{ position:absolute; inset:0; border-radius:34px; border:1px solid rgba(17,195,189,.4); animation:euPulse 3s var(--ease) infinite; }
@keyframes euPulse{ 0%{ transform:scale(1); opacity:.7; } 70%{ transform:scale(1.5); opacity:0; } 100%{ opacity:0; } }
@media (prefers-reduced-motion:reduce){ .eu__pulse{ animation:none; opacity:.3; } }

@media (max-width:860px){ .sov__in{ grid-template-columns:1fr; gap:34px; } .eu{ order:-1; width:min(320px,70%); } }

/* ============================================================
   BENTO · features rediseñadas
   ============================================================ */
.bento{ margin-top:52px; display:grid; grid-template-columns:repeat(6,1fr); gap:16px; }
.bcard{ position:relative; overflow:hidden; border:1px solid var(--line); border-radius:18px; padding:24px 24px; background:linear-gradient(180deg, rgba(13,22,36,.55), rgba(8,13,22,.36)); transition:transform .45s var(--ease), border-color .45s var(--ease); display:flex; flex-direction:column; }
.bcard:hover{ transform:translateY(-5px); border-color:var(--line-2); }
.bcard__ic{ width:46px; height:46px; border-radius:13px; display:grid; place-items:center; color:var(--turq); background:rgba(17,195,189,.09); border:1px solid rgba(17,195,189,.22); }
.bcard__ic svg{ width:24px; height:24px; }
.bcard h4{ font-family:var(--f-sans); font-weight:600; font-size:1.18rem; letter-spacing:-.015em; margin:18px 0 8px; }
.bcard p{ color:var(--mut); font-size:.94rem; line-height:1.5; }
.bcard__spec{ margin-top:auto; padding-top:16px; }
.bcard__spec b{ font-family:var(--f-display); font-weight:400; font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--turq); border:1px solid rgba(17,195,189,.26); background:rgba(17,195,189,.07); border-radius:100px; padding:5px 12px; }

/* distribución bento (2 destacadas grandes) */
.bcard--wide{ grid-column:span 3; }
.bcard--tall{ grid-column:span 3; }
.bcard--sm{ grid-column:span 2; }
.bcard--full{ grid-column:span 6; flex-direction:row; align-items:center; gap:22px; }
.bcard--full .bcard__ic{ flex:none; }
.bcard--full .bcard__tx{ flex:1; }
.bcard--full h4{ margin:0 0 6px; }
.bcard--full .bcard__spec{ margin:0 0 0 auto; padding:0; flex:none; }
.bcard--feat{ background:linear-gradient(150deg, rgba(17,195,189,.14), rgba(13,22,36,.4)); border-color:rgba(17,195,189,.24); }
.bcard--feat h4{ font-size:1.34rem; }
.bcard__big{ font-family:var(--f-display); font-weight:300; font-size:clamp(2.2rem,4vw,3rem); color:#fff; line-height:1; margin-top:6px; }
.bcard__glyph{ position:absolute; right:-18px; bottom:-18px; width:130px; height:130px; color:rgba(17,195,189,.06); }
.bcard__glyph svg{ width:100%; height:100%; }

@media (max-width:900px){
  .bento{ grid-template-columns:repeat(2,1fr); }
  .bcard--wide, .bcard--tall, .bcard--sm, .bcard--full{ grid-column:span 1; }
  .bcard--full{ flex-direction:column; align-items:flex-start; gap:0; }
  .bcard--full .bcard__spec{ margin-top:16px; }
}
@media (max-width:560px){ .bento{ grid-template-columns:1fr; } }