/* ============================================================
   360 Tech — páginas de producto (lenguaje Orbital 360)
   Depende de site.css (tokens, .btn, .kicker, .h1/.h2, .wrap…)
   ============================================================ */

/* ---- back / breadcrumb ---- */
.pcrumb{ display:flex; align-items:center; gap:10px; font-family:var(--f-display); font-weight:300; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--mut-2); }
.pcrumb a{ color:var(--mut-2); display:inline-flex; align-items:center; gap:7px; transition:color .3s, gap .3s var(--ease); }
.pcrumb a:hover{ color:var(--turq); gap:11px; }
.pcrumb a .ico{ width:15px; height:15px; }
.pcrumb .sep{ color:var(--mut-3); }
.pcrumb .cur{ color:var(--turq); }

/* ---- product hero ---- */
.phero{ position:relative; padding-top:calc(var(--nav-h,72px) + clamp(34px,6vh,74px)); padding-bottom:clamp(48px,8vh,96px); }
.phero__grid{ display:grid; grid-template-columns:0.92fr 1.08fr; gap:clamp(34px,5vw,72px); align-items:center; }
.phero__badge{ display:inline-flex; align-items:center; gap:12px; margin:22px 0 6px; }
.phero__badge .ico360{ width:50px; height:50px; border-radius:14px; display:flex; align-items:center; justify-content:center; background:rgba(17,195,189,.10); border:1px solid rgba(17,195,189,.24); color:var(--turq); }
.phero__badge .ico360 .ico{ width:27px; height:27px; }
.phero__badge b{ font-family:var(--f-display); font-weight:300; font-size:.66rem; letter-spacing:.22em; text-transform:uppercase; color:var(--mut); }
.phero__title{ margin:10px 0 0; font-size:clamp(2.9rem,6.2vw,5.2rem); }
.phero__sub{ margin-top:22px; max-width:46ch; }
.phero__cta{ margin-top:34px; display:flex; gap:14px; flex-wrap:wrap; }
.phero__meta{ margin-top:26px; display:flex; gap:12px; flex-wrap:wrap; }
.pchip{ font-family:var(--f-display); font-weight:300; font-size:.72rem; letter-spacing:.05em; color:var(--mut); border:1px solid var(--line); border-radius:100px; padding:7px 15px; background:rgba(10,17,29,.4); }

@media(max-width:900px){
  .phero__grid{ grid-template-columns:1fr; gap:40px; }
  .phero__sub{ max-width:60ch; }
}

/* ============================================================
   CONSOLA / CHAT (Diagnóstico IA)
   ============================================================ */
.console{
  position:relative; border-radius:20px; overflow:hidden;
  border:1px solid var(--line-2);
  background:linear-gradient(180deg, rgba(9,15,26,.96), rgba(5,9,16,.98));
  box-shadow:0 40px 90px -40px rgba(0,0,0,.9), 0 0 0 1px rgba(159,236,233,.04), inset 0 1px 0 rgba(255,255,255,.03);
}
.console__glow{ position:absolute; inset:0; z-index:0; pointer-events:none; background:radial-gradient(80% 60% at 82% -10%, rgba(67,231,225,.14), transparent 55%), radial-gradient(70% 60% at 10% 110%, rgba(91,63,176,.16), transparent 60%); }
.console__bar{ position:relative; z-index:1; display:flex; align-items:center; gap:10px; padding:13px 18px; border-bottom:1px solid var(--line); background:rgba(6,11,19,.6); }
.console__dot{ width:11px; height:11px; border-radius:50%; background:#20303f; }
.console__dot:nth-child(1){ background:#283a49; }
.console__title{ margin-left:8px; font-family:var(--f-mono,ui-monospace,SFMono-Regular,Menlo,monospace); font-size:.78rem; color:var(--mut-2); letter-spacing:.02em; }
.console__live{ margin-left:auto; display:inline-flex; align-items:center; gap:7px; font-family:var(--f-display); font-weight:300; font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:var(--turq); }
.console__live i{ width:7px; height:7px; border-radius:50%; background:var(--turq); box-shadow:0 0 0 0 rgba(17,195,189,.5); animation:pulse 2s infinite; }
@keyframes pulse{ 0%{box-shadow:0 0 0 0 rgba(17,195,189,.5)} 70%{box-shadow:0 0 0 8px rgba(17,195,189,0)} 100%{box-shadow:0 0 0 0 rgba(17,195,189,0)} }

.console__body{ position:relative; z-index:1; padding:24px 22px; min-height:430px; display:flex; flex-direction:column; gap:18px; }

/* messages */
.cmsg{ display:flex; gap:13px; max-width:100%; opacity:0; transform:translateY(8px); }
.cmsg.show{ opacity:1; transform:none; transition:opacity .5s var(--ease), transform .5s var(--ease); }
.cmsg__av{ width:34px; height:34px; flex:none; border-radius:10px; display:flex; align-items:center; justify-content:center; }
.cmsg--u{ flex-direction:row-reverse; }
.cmsg--u .cmsg__av{ background:rgba(255,255,255,.06); border:1px solid var(--line-2); color:var(--mut); }
.cmsg--u .cmsg__av .ico{ width:18px; height:18px; }
.cmsg--a .cmsg__av{ background:rgba(17,195,189,.12); border:1px solid rgba(17,195,189,.28); color:var(--turq); }
.cmsg--a .cmsg__av svg{ width:20px; height:20px; }
.cbub{ font-size:.98rem; line-height:1.5; padding:12px 16px; border-radius:14px; max-width:82%; }
.cmsg--u .cbub{ background:rgba(17,195,189,.12); border:1px solid rgba(17,195,189,.24); color:#eafcfb; border-top-right-radius:5px; }
.cmsg--a .cbub{ background:rgba(255,255,255,.03); border:1px solid var(--line); color:var(--white); border-top-left-radius:5px; }
.cbub b{ color:var(--turq-soft); font-weight:500; }

/* typing dots */
.ctyping{ display:inline-flex; gap:5px; align-items:center; padding:3px 2px; }
.ctyping i{ width:7px; height:7px; border-radius:50%; background:var(--mut-2); animation:ctb 1.2s infinite; }
.ctyping i:nth-child(2){ animation-delay:.15s } .ctyping i:nth-child(3){ animation-delay:.3s }
@keyframes ctb{ 0%,60%,100%{ opacity:.25; transform:translateY(0) } 30%{ opacity:1; transform:translateY(-3px) } }

/* analysis steps */
.csteps{ display:flex; flex-direction:column; gap:9px; margin-top:4px; }
.cstep{ display:flex; align-items:center; gap:11px; font-family:var(--f-mono,ui-monospace,Menlo,monospace); font-size:.82rem; color:var(--mut); opacity:0; transform:translateX(-6px); }
.cstep.show{ opacity:1; transform:none; transition:opacity .4s var(--ease), transform .4s var(--ease); }
.cstep__ic{ width:18px; height:18px; flex:none; border-radius:50%; display:none; align-items:center; justify-content:center; color:var(--turq); background:rgba(17,195,189,.12); border:1px solid rgba(17,195,189,.4); }
.cstep__ic svg{ width:11px; height:11px; }
.cstep.done .cstep__ic{ display:flex; }
.cstep.done .cstep__sp{ display:none; }
.cstep.done .cstep__lbl{ color:var(--white); }
.cstep__lbl{ transition:color .3s; }
.cstep__sp{ width:16px; height:16px; flex:none; border:1.6px solid var(--line-2); border-top-color:var(--turq); border-radius:50%; animation:spin .7s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg) } }

/* result card */
.cres{ margin-top:6px; border:1px solid rgba(17,195,189,.22); border-radius:16px; overflow:hidden; background:linear-gradient(180deg, rgba(13,26,32,.7), rgba(8,15,24,.6)); opacity:0; transform:translateY(10px); }
.cres.show{ opacity:1; transform:none; transition:opacity .55s var(--ease), transform .55s var(--ease); }
.cres__top{ display:flex; align-items:center; justify-content:space-between; padding:16px 18px; border-bottom:1px solid var(--line); }
.cres__k{ font-family:var(--f-display); font-weight:300; font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--mut-2); }
.cres__score{ display:flex; align-items:baseline; gap:3px; margin-top:3px; }
.cres__score b{ font-family:var(--f-sans); font-weight:700; font-size:2.3rem; letter-spacing:-.03em; color:var(--white); line-height:1; }
.cres__score i{ font-style:normal; color:var(--mut-2); font-size:.95rem; }
.cres__ring{ position:relative; width:64px; height:64px; }
.cres__ring svg{ width:64px; height:64px; transform:rotate(-90deg); }
.cres__ring circle{ fill:none; stroke-width:6; }
.cres__ring .bg{ stroke:rgba(159,236,233,.12); }
.cres__ring .fg{ stroke:var(--turq); stroke-linecap:round; stroke-dasharray:182; stroke-dashoffset:182; transition:stroke-dashoffset 1.3s var(--ease); }
.cres.show .cres__ring .fg{ stroke-dashoffset:49; }
.cres__lvl{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:var(--f-display); font-weight:400; font-size:.7rem; color:var(--turq); }
.cres__body{ padding:15px 18px 18px; }
.cres__lab{ font-family:var(--f-display); font-weight:300; font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:var(--mut-3); margin-bottom:11px; }
.cres__wins{ display:flex; flex-direction:column; gap:9px; }
.cwin{ display:flex; align-items:center; gap:11px; font-size:.9rem; color:var(--white); }
.cwin i{ width:6px; height:6px; border-radius:50%; background:var(--turq); flex:none; }
.cwin .tx{ flex:1; }
.cwin span:last-child{ margin-left:auto; font-family:var(--f-mono,ui-monospace,Menlo,monospace); font-size:.76rem; color:var(--turq); flex:none; }

.console__foot{ position:relative; z-index:1; display:flex; align-items:center; gap:12px; padding:14px 18px; border-top:1px solid var(--line); background:rgba(6,11,19,.5); }
.console__input{ flex:1; font-family:var(--f-sans); font-size:.9rem; color:var(--mut-3); }
.console__send{ width:34px; height:34px; border-radius:10px; flex:none; display:flex; align-items:center; justify-content:center; background:var(--turq); color:var(--black); }
.console__send .ico{ width:17px; height:17px; }

@media(max-width:900px){ .console__body{ min-height:0; } }

/* ============================================================
   TIMELINE — la semana (5 días)
   ============================================================ */
.week{ margin-top:56px; display:grid; grid-template-columns:repeat(5,1fr); gap:0; position:relative; }
.week::before{ content:""; position:absolute; left:6%; right:6%; top:34px; height:1px; background:linear-gradient(90deg, transparent, var(--line-2) 12%, var(--line-2) 88%, transparent); }
.wday{ position:relative; padding:0 16px; text-align:center; }
.wday__dot{ position:relative; z-index:1; width:16px; height:16px; margin:26px auto 0; border-radius:50%; background:var(--ink); border:1.5px solid var(--turq); box-shadow:0 0 0 5px rgba(5,8,14,1), 0 0 20px -4px rgba(17,195,189,.6); }
.wday__n{ font-family:var(--f-display); font-weight:300; font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:var(--turq); margin-top:20px; }
.wday__t{ font-family:var(--f-sans); font-weight:600; font-size:1.14rem; letter-spacing:-.01em; margin-top:8px; }
.wday__d{ color:var(--mut); font-size:.9rem; line-height:1.45; margin-top:8px; }
@media(max-width:820px){
  .week{ grid-template-columns:1fr; gap:0; }
  .week::before{ left:34px; right:auto; top:6%; bottom:6%; width:1px; height:auto; }
  .wday{ text-align:left; padding:22px 0 22px 62px; }
  .wday__dot{ position:absolute; left:27px; top:26px; margin:0; }
}

/* ============================================================
   DELIVERABLES — qué recibes
   ============================================================ */
.deliv{ margin-top:52px; display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.dcard{ position:relative; overflow:hidden; padding:30px 30px; border:1px solid var(--line); border-radius:18px; background:linear-gradient(180deg, rgba(13,22,36,.5), rgba(8,13,22,.34)); transition:transform .45s var(--ease), border-color .45s; }
.dcard:hover{ transform:translateY(-5px); border-color:var(--line-2); }
.dcard__ic{ width:48px; height:48px; border-radius:13px; display:flex; align-items:center; justify-content:center; background:rgba(17,195,189,.09); border:1px solid rgba(17,195,189,.22); color:var(--turq); }
.dcard__ic .ico{ width:25px; height:25px; }
.dcard h4{ font-family:var(--f-sans); font-weight:600; font-size:1.3rem; letter-spacing:-.015em; margin:20px 0 9px; }
.dcard p{ color:var(--mut); font-size:.98rem; line-height:1.5; }
@media(max-width:720px){ .deliv{ grid-template-columns:1fr; } }

/* deliverable cards on light (Solutions) band */
.band--sol .dcard{ background:linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.44)); border-color:rgba(6,20,26,.10); }
.band--sol .dcard:hover{ border-color:rgba(17,195,189,.45); }
.band--sol .dcard h4{ color:var(--sol-ink); }
.band--sol .dcard p{ color:var(--sol-mut); }
.band--sol .dcard__ic{ background:rgba(17,195,189,.14); border-color:rgba(17,195,189,.34); }

/* ============================================================
   AREAS — grid de áreas evaluadas
   ============================================================ */
.areas{ margin-top:48px; display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.area{ display:flex; align-items:center; gap:15px; padding:20px 22px; border:1px solid var(--line); border-radius:14px; background:rgba(10,17,29,.4); transition:transform .4s var(--ease), border-color .4s; }
.area:hover{ transform:translateY(-3px); border-color:var(--line-2); }
.area__ic{ width:40px; height:40px; flex:none; border-radius:11px; display:flex; align-items:center; justify-content:center; background:rgba(17,195,189,.09); border:1px solid rgba(17,195,189,.2); color:var(--turq); }
.area__ic .ico{ width:21px; height:21px; }
.area b{ font-weight:600; font-size:1.02rem; }
@media(max-width:820px){ .areas{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:520px){ .areas{ grid-template-columns:1fr; } }

/* ---- pull quote / diferenciador ---- */
.pquote{ max-width:900px; margin:0 auto; text-align:center; }
.pquote p{ font-family:var(--f-sans); font-weight:300; font-size:clamp(1.5rem,3vw,2.3rem); line-height:1.28; letter-spacing:-.02em; text-wrap:balance; }
.pquote p b{ color:var(--turq); font-weight:500; }

/* ---- variant cards (Nexo etc.) ---- */
.variants{ margin-top:52px; display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.vcard{ position:relative; padding:32px 30px; border:1px solid var(--line); border-radius:18px; background:linear-gradient(180deg, rgba(13,22,36,.5), rgba(8,13,22,.34)); transition:transform .45s var(--ease), border-color .45s; }
.vcard--hi{ border-color:rgba(17,195,189,.4); background:linear-gradient(180deg, rgba(16,32,40,.7), rgba(9,16,26,.5)); }
.vcard:hover{ transform:translateY(-5px); }
.vcard__tag{ font-family:var(--f-display); font-weight:300; font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; color:var(--turq); }
.vcard h4{ font-family:var(--f-sans); font-weight:600; font-size:1.5rem; letter-spacing:-.02em; margin:12px 0 10px; }
.vcard p{ color:var(--mut); font-size:.96rem; line-height:1.5; }
.vcard ul{ list-style:none; margin:20px 0 0; padding:20px 0 0; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:11px; }
.vcard li{ position:relative; padding-left:22px; font-size:.92rem; color:var(--mut); }
.vcard li::before{ content:""; position:absolute; left:0; top:.62em; width:12px; height:1.6px; border-radius:2px; background:var(--turq); }
@media(max-width:860px){ .variants{ grid-template-columns:1fr; } }

/* ============================================================
   FAQ (acordeón) — dentro del chat
   ============================================================ */
.faq{ display:flex; flex-direction:column; gap:10px; margin-top:6px; }
.faqi{ border:1px solid var(--line); border-radius:14px; background:rgba(10,17,29,.42); overflow:hidden; transition:border-color .3s; }
.faqi.open{ border-color:var(--line-2); }
.faqi__q{ display:flex; align-items:center; gap:14px; width:100%; text-align:left; padding:16px 18px; cursor:pointer; background:none; border:0; color:var(--white); font-family:var(--f-sans); font-weight:500; font-size:1rem; }
.faqi__q .pm{ margin-left:auto; position:relative; width:16px; height:16px; flex:none; }
.faqi__q .pm::before, .faqi__q .pm::after{ content:""; position:absolute; background:var(--turq); border-radius:2px; transition:transform .3s var(--ease), opacity .3s; }
.faqi__q .pm::before{ left:0; right:0; top:50%; height:2px; transform:translateY(-50%); }
.faqi__q .pm::after{ top:0; bottom:0; left:50%; width:2px; transform:translateX(-50%); }
.faqi.open .faqi__q .pm::after{ transform:translateX(-50%) scaleY(0); opacity:0; }
.faqi__a{ max-height:0; overflow:hidden; transition:max-height .4s var(--ease); }
.faqi.open .faqi__a{ max-height:260px; }
.faqi__a p{ padding:0 18px 18px; margin:0; color:var(--mut); font-size:.95rem; line-height:1.55; }

/* rich blocks sit flush when embedded in a chat message */
.msg__body .cres,
.msg__body .week,
.msg__body .deliv,
.msg__body .areas,
.msg__body .faq{ margin-top:18px; }
.msg__body .deliv{ grid-template-columns:1fr 1fr; }
.msg__body .console{ margin-top:16px; }

/* ---- hero principal (inicio del thread) ---- */
.dhero{ min-height:calc(100dvh - 150px); display:flex; flex-direction:column; justify-content:flex-start; align-items:flex-start; max-width:820px; padding:30px 0 48px; }
.dhero__badge{ display:inline-flex; align-items:center; gap:13px; margin-bottom:24px; }
.dhero__badge .ico360{ width:48px; height:48px; border-radius:13px; display:flex; align-items:center; justify-content:center; background:rgba(17,195,189,.1); border:1px solid rgba(17,195,189,.24); color:var(--turq); }
.dhero__badge .ico360 svg{ width:26px; height:26px; }
.dhero__badge b{ font-family:var(--f-display); font-weight:300; font-size:.64rem; letter-spacing:.22em; text-transform:uppercase; color:var(--mut); }
.dhero__title{ font-family:var(--f-sans); font-weight:700; font-size:clamp(3rem,7vw,5.6rem); line-height:.98; letter-spacing:-.04em; text-wrap:balance; }
.dhero__sub{ margin-top:24px; max-width:54ch; font-size:clamp(1.1rem,1.6vw,1.4rem); color:var(--mut); font-weight:300; line-height:1.5; text-wrap:pretty; }
.dhero__cta{ margin-top:40px; display:flex; gap:20px; align-items:center; flex-wrap:wrap; }
.dhero__hint{ display:inline-flex; align-items:center; gap:8px; color:var(--mut); font-size:.92rem; cursor:pointer; transition:color .3s, gap .3s var(--ease); }
.dhero__hint:hover{ color:var(--turq); gap:12px; }
.dhero__hint svg{ width:16px; height:16px; }
@media(max-width:900px){ .dhero{ min-height:auto; padding:40px 0; } }