/* ============================================================
   360 Tech — 360 Suite + GINA
   Hero centrado + scrollytelling de acciones (Lee, Organiza,
   Redacta, Extrae) con demos animados en fondo oscuro.
   Depende de site.css (tokens) · site-mocks.css (.mock)
   ============================================================ */

/* ============================================================
   HERO centrado + orbe GINA
   ============================================================ */
.phero--gina{ text-align:center; overflow:hidden; }
.phero--gina .phero__in{ max-width:840px; margin-inline:auto; display:flex; flex-direction:column; align-items:center; }
.phero--gina .phero__title{ font-size:clamp(2.9rem,6.4vw,5rem); }
.phero--gina .phero__sub{ max-width:56ch; margin-inline:auto; }
.phero--gina .phero__cta{ justify-content:center; }
.phero--gina .phero__meta{ justify-content:center; }
.phero--gina::before{
  content:""; position:absolute; z-index:0; left:50%; top:-12%; transform:translateX(-50%);
  width:min(1100px,120vw); height:640px; pointer-events:none;
  background:radial-gradient(50% 55% at 50% 40%, rgba(17,195,189,.16), transparent 70%);
}
.phero--gina .wrap{ position:relative; z-index:1; }

.gorb{ position:relative; width:104px; height:104px; margin:0 auto 6px; display:grid; place-items:center; }
.gorb__core{ width:76px; height:76px; border-radius:24px; display:grid; place-items:center; color:var(--turq);
  background:radial-gradient(130% 130% at 30% 20%, rgba(17,195,189,.32), rgba(11,18,32,.92));
  border:1px solid rgba(17,195,189,.4); box-shadow:0 20px 50px -18px rgba(17,195,189,.5), inset 0 1px 0 rgba(255,255,255,.08); }
.gorb__core svg{ width:38px; height:38px; }
.gorb__ring{ position:absolute; inset:0; border-radius:30px; border:1px solid rgba(17,195,189,.28); animation:gorbPulse 3.2s var(--ease) infinite; }
.gorb__ring:nth-child(2){ animation-delay:1.6s; }
@keyframes gorbPulse{ 0%{ transform:scale(.72); opacity:.9; } 70%{ transform:scale(1.35); opacity:0; } 100%{ opacity:0; } }
@media (prefers-reduced-motion:reduce){ .gorb__ring{ animation:none; opacity:.4; } }

/* ============================================================
   SCROLLYTELLING · escenas
   ============================================================ */
.gscene{ display:flex; flex-direction:column; }
.gscene__head{ text-align:center; max-width:720px; margin:0 auto; }

.ga{ position:relative; }
.ga::before{
  content:""; position:absolute; z-index:0; top:8%; bottom:8%; width:44vw; max-width:760px;
  background:radial-gradient(60% 60% at 50% 50%, rgba(17,195,189,.10), transparent 72%);
  right:calc(50% - 50vw); pointer-events:none; opacity:0; transition:opacity 1s var(--ease);
}
.ga--flip::before{ right:auto; left:calc(50% - 50vw); }
.ga.play::before{ opacity:1; }

.ga__in{ position:relative; z-index:1; display:grid; grid-template-columns:0.82fr 1.18fr; gap:clamp(30px,4.5vw,72px); align-items:center; padding-block:clamp(54px,8vh,104px); }
.ga--flip .ga__in{ grid-template-columns:1.18fr 0.82fr; }
.ga--flip .ga__text{ order:2; } .ga--flip .ga__demo{ order:1; }

.ga__eye{ display:flex; align-items:center; gap:12px; font-family:var(--f-display); font-weight:300; font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; color:var(--turq); }
.ga__eye .n{ color:var(--mut-2); }
.ga__eye .ln{ flex:1; height:1px; max-width:120px; background:linear-gradient(90deg,rgba(17,195,189,.45),transparent); }
.ga__text h3{ font-family:var(--f-sans); font-weight:600; font-size:clamp(1.8rem,3vw,2.6rem); letter-spacing:-.02em; line-height:1.06; margin:18px 0 15px; text-wrap:balance; }
.ga__text .lead{ color:var(--mut); font-size:1.04rem; line-height:1.6; max-width:42ch; }
.ga--flip .ga__eye .ln{ order:-1; background:linear-gradient(270deg,rgba(17,195,189,.45),transparent); }

/* demo frame reutiliza .mock */
.ga__demo .mock{ box-shadow:0 60px 130px -55px rgba(0,0,0,.92); }
.ga__demo .mock__body{ min-height:326px; }

/* ---- reveal primitives (gated a movimiento permitido) ---- */
.g-anim{ transition:opacity .55s var(--ease), transform .55s var(--ease); }
@media (prefers-reduced-motion:no-preference){
  .g-off{ opacity:0; transform:translateY(14px); }
  .g-off.g-off--pop{ transform:scale(.92); }
  .g-off.g-off--l{ transform:translateX(-16px); }
  .g-off.g-off--r{ transform:translateX(16px); }
}

/* ============================================================
   DEMO · Lee (chat / resumen)
   ============================================================ */
.gchat{ padding:18px 18px 20px; display:flex; flex-direction:column; gap:12px; }
.gc-row{ display:flex; }
.gc-row--u{ justify-content:flex-end; }
.gc-row--g{ justify-content:flex-start; }
.gc-bub{ max-width:78%; padding:11px 15px; border-radius:16px; font-size:.9rem; line-height:1.45; }
.gc-bub--u{ background:linear-gradient(180deg,#13b7b1,#0f9a95); color:#03110f; border-bottom-right-radius:5px; font-weight:500; }
.gc-typing{ display:inline-flex; gap:5px; align-items:center; padding:12px 15px; border:1px solid var(--line); border-radius:16px; border-bottom-left-radius:5px; background:rgba(10,17,29,.6); width:max-content; }
.gc-typing i{ width:7px; height:7px; border-radius:50%; background:var(--turq); opacity:.4; animation:gcDot 1.1s var(--ease) infinite; }
.gc-typing i:nth-child(2){ animation-delay:.18s; } .gc-typing i:nth-child(3){ animation-delay:.36s; }
@keyframes gcDot{ 0%,100%{ opacity:.3; transform:translateY(0); } 40%{ opacity:1; transform:translateY(-3px); } }
.gc-card{ width:88%; border:1px solid var(--line-2); border-radius:16px; border-bottom-left-radius:5px; background:rgba(8,14,24,.7); overflow:hidden; }
.gc-card__h{ display:flex; align-items:center; gap:9px; padding:12px 15px; border-bottom:1px solid var(--line); }
.gc-av{ width:24px; height:24px; 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); }
.gc-av svg{ width:14px; height:14px; }
.gc-card__h b{ font-family:var(--f-sans); font-weight:600; font-size:.9rem; }
.gc-meta{ margin-left:auto; font-family:var(--f-display); font-weight:300; font-size:.58rem; letter-spacing:.08em; color:var(--mut-2); }
.gc-li{ display:flex; gap:11px; align-items:flex-start; padding:11px 15px; font-size:.86rem; color:#eaf5f7; line-height:1.4; border-top:1px solid rgba(159,236,233,.05); }
.gc-li:first-of-type{ border-top:0; }
.gc-li i{ width:6px; height:6px; border-radius:50%; background:var(--turq); flex:none; margin-top:7px; }
.gc-foot{ padding:12px 15px; }
.gc-chip{ font-family:var(--f-display); font-weight:300; font-size:.62rem; letter-spacing:.06em; color:var(--turq); border:1px solid rgba(17,195,189,.3); background:rgba(17,195,189,.08); border-radius:100px; padding:5px 12px; }

/* ============================================================
   DEMO · Organiza (calendario semanal)
   ============================================================ */
.gcal{ padding:16px 16px 18px; }
.gcal__top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.gcal__top b{ font-family:var(--f-sans); font-weight:600; font-size:1rem; }
.gcal__pill{ font-family:var(--f-display); font-weight:300; font-size:.62rem; letter-spacing:.05em; color:var(--turq); border:1px solid rgba(17,195,189,.3); background:rgba(17,195,189,.1); border-radius:100px; padding:5px 12px; }
.gcal__grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:8px; }
.gcal__col{ border:1px solid var(--line); border-radius:11px; background:rgba(10,17,29,.4); padding:9px 8px; min-height:206px; display:flex; flex-direction:column; gap:7px; }
.gcal__d{ font-family:var(--f-display); font-weight:300; font-size:.58rem; letter-spacing:.1em; text-transform:uppercase; color:var(--mut-2); text-align:center; padding-bottom:5px; border-bottom:1px solid var(--line); }
.gev{ border-radius:8px; padding:8px 9px; font-size:.72rem; line-height:1.25; border-left:2px solid var(--turq); background:rgba(17,195,189,.1); color:#eaf5f7; }
.gev b{ display:block; font-weight:600; }
.gev span{ font-family:var(--f-mono,Menlo,monospace); font-size:.64rem; color:var(--turq); }
.gev--b{ border-left-color:#3fb6e0; background:rgba(63,182,224,.1); }
.gev--b span{ color:#63c6e8; }

/* ============================================================
   DEMO · Redacta (compositor de correo)
   ============================================================ */
.gmail{ padding:0; }
.gmail__f{ display:flex; align-items:center; gap:12px; padding:12px 16px; border-bottom:1px solid var(--line); font-size:.86rem; }
.gmail__f span{ font-size:.62rem; letter-spacing:.06em; text-transform:uppercase; color:var(--mut-2); min-width:52px; }
.gmail__f b{ font-weight:500; color:#eaf5f7; }
.gmail__cur{ display:inline-block; width:2px; height:1.05em; background:var(--turq); vertical-align:-2px; margin-left:1px; opacity:0; }
.gmail__cur.on{ opacity:1; animation:gmCur 1s steps(1) infinite; }
@keyframes gmCur{ 50%{ opacity:0; } }
.gmail__body{ padding:16px 18px; display:flex; flex-direction:column; gap:11px; min-height:150px; }
.gmail__body p{ font-size:.9rem; line-height:1.55; color:#dce9ec; margin:0; }
.gmail__body p:first-child{ color:#fff; }
.gmail__foot{ display:flex; align-items:center; gap:12px; padding:13px 16px; border-top:1px solid var(--line); }
.gmail__tag{ display:inline-flex; align-items:center; gap:7px; font-family:var(--f-display); font-weight:300; font-size:.64rem; letter-spacing:.04em; color:var(--turq); border:1px solid rgba(17,195,189,.28); background:rgba(17,195,189,.08); border-radius:100px; padding:6px 12px; }
.gmail__send{ margin-left:auto; font-family:var(--f-sans); font-weight:600; font-size:.82rem; color:#03110f; background:linear-gradient(180deg,#19d6cf,#11a7a2); border-radius:100px; padding:8px 20px; }
.gmail__send.pulse{ animation:gmSend 1.4s var(--ease) 1; }
@keyframes gmSend{ 0%{ box-shadow:0 0 0 0 rgba(17,195,189,.5); } 60%{ box-shadow:0 0 0 12px rgba(17,195,189,0); } }

/* ============================================================
   DEMO · Extrae (factura → datos)
   ============================================================ */
.gext{ display:grid; grid-template-columns:1fr 1fr; gap:0; min-height:326px; }
.gext__doc{ position:relative; border-right:1px solid var(--line); padding:18px 18px; overflow:hidden; background:rgba(6,11,20,.5); }
.gext__scan{ position:absolute; left:0; right:0; top:0; height:44px; pointer-events:none; opacity:0;
  background:linear-gradient(180deg, rgba(17,195,189,0), rgba(17,195,189,.22) 70%, rgba(17,195,189,.9) 98%);
  border-bottom:1.5px solid var(--turq); box-shadow:0 0 22px rgba(17,195,189,.5); }
.gext__scan.on{ opacity:1; animation:gextScan 2.6s var(--ease) 1 forwards; }
@keyframes gextScan{ 0%{ top:-44px; } 100%{ top:100%; } }
.gext__paper{ font-family:var(--f-mono,Menlo,monospace); font-size:.72rem; line-height:1.9; color:var(--mut); }
.gext__paper .h{ font-family:var(--f-sans); font-weight:600; font-size:.92rem; color:#eaf5f7; margin-bottom:6px; }
.gext__paper .r{ display:flex; justify-content:space-between; gap:12px; border-top:1px dashed rgba(159,236,233,.12); padding-top:4px; margin-top:4px; }
.gext__paper .r.tot{ color:#fff; border-top-style:solid; }
.gext__out{ padding:18px 18px; }
.gext__ot{ font-family:var(--f-display); font-weight:300; font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--turq); margin-bottom:14px; }
.gxrow{ display:grid; grid-template-columns:1fr auto 16px; gap:10px; align-items:center; padding:9px 0; border-top:1px solid var(--line); font-size:.82rem; }
.gxrow:first-of-type{ border-top:0; }
.gxrow .k{ color:var(--mut-2); font-size:.72rem; }
.gxrow .v{ color:#eaf5f7; font-family:var(--f-mono,Menlo,monospace); text-align:right; }
.gxrow .ck{ width:15px; height:15px; color:var(--turq); }
.gxrow .v.big{ color:#fff; font-size:.94rem; }

/* ============================================================
   responsive
   ============================================================ */
@media (max-width:900px){
  .ga__in, .ga--flip .ga__in{ grid-template-columns:1fr; gap:30px; }
  .ga--flip .ga__text{ order:0; } .ga--flip .ga__demo{ order:0; }
  .ga::before{ display:none; }
}
@media (max-width:560px){
  .gcal__grid{ grid-template-columns:repeat(3,1fr); }
  .gcal__col:nth-child(n+4){ display:none; }
  .gext{ grid-template-columns:1fr; }
  .gext__doc{ border-right:0; border-bottom:1px solid var(--line); }
}