/* CS Value Center Suburbia — capa visual premium
   Pegar DESPUÉS de styles.css. No toca JS ni flujos.
   Objetivo: que un gerente vea marca Suburbia, no intranet.
   Adaptado del remaster de Liverpool — paleta morada Suburbia
   (--br/--br-d/--br-2/--br-s tomados de styles.css, sin acentos dorados). */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Montserrat:wght@450;500;600;700;800&display=swap');

:root{
  --br:#5A2575;
  --br-d:#3B0D55;
  --br-2:#7B2082;
  --br-s:#f3eefa;
  --ink:#17101C;
  --tx:#1C1420;
  --mu:#6B5D70;
  --bg:#F1EEF5;
  --card:#FBFAFC;
  --bo:#E4DCEA;
  --line:#D6C8DE;
  --nv:#15091B;
  --sh:0 18px 40px rgba(20,14,26,.07);
  --r:18px;
}

html,body{
  min-height:100%;
  background:
    radial-gradient(900px 420px at 8% -10%, rgba(90,37,117,.10), transparent 55%),
    radial-gradient(700px 380px at 100% 0%, rgba(123,32,130,.08), transparent 50%),
    var(--bg) !important;
  color:var(--tx);
  letter-spacing:-.01em;
}
body{ min-height:100vh; }

/* Tipografía: Montserrat para UI, serif solo en títulos de escenario */
.cp-head h1,
.hpc-title,
#accesoTitle,
.welcome-title,
.gar-intro-t{
  font-family:'Cormorant Garamond', Georgia, serif !important;
  font-weight:600 !important;
  letter-spacing:-.03em !important;
  line-height:1.15 !important;
}

.cp-head h1{ font-size:34px !important; color:var(--tx) !important; }
.cp-head p{ font-size:14.5px !important; color:var(--mu) !important; max-width:520px; margin-left:auto; margin-right:auto; }

/* Topbar: barra de boutique, no toolbar de sistema */
.topbar{
  background:rgba(250,248,252,.86) !important;
  backdrop-filter:saturate(1.2) blur(16px);
  border-bottom:1px solid var(--line) !important;
  box-shadow:none !important;
}
.topbar::before{
  content:"";
  position:absolute; left:0; right:0; top:0; height:2px;
  background:linear-gradient(90deg, var(--br), #D9BEE8 40%, var(--br-2) 72%, var(--br-d));
}
.app-name{
  font-size:13px !important;
  font-weight:800 !important;
  letter-spacing:.08em !important;
  text-transform:uppercase;
  color:var(--tx) !important;
}
.view-toggle{
  background:transparent !important;
  border:none !important;
  gap:4px !important;
}
.view-toggle button:not(#btnViewCopiloto){
  background:transparent !important;
  border:none !important;
  color:var(--mu) !important;
  font-size:12.5px !important;
  font-weight:650 !important;
  opacity:1 !important;
  padding:8px 12px !important;
}
.view-toggle button:not(#btnViewCopiloto).on{
  color:var(--tx) !important;
  box-shadow:inset 0 -2px 0 var(--br);
}
#btnViewCopiloto{
  background:var(--ink) !important;
  color:#fff !important;
  box-shadow:0 8px 20px rgba(20,12,22,.18) !important;
  padding:9px 18px !important;
  font-size:12.5px !important;
}

/* Home: escenario, no grid de botones */
#homeView .cp-wrap{ max-width:1080px !important; padding-top:48px !important; }
.home-product-card{
  background:var(--card) !important;
  border:1px solid var(--line) !important;
  border-radius:22px !important;
  padding:28px 22px 24px !important;
  box-shadow:var(--sh) !important;
  min-height:280px;
}
.home-product-card:hover{
  transform:translateY(-4px) !important;
  border-color:rgba(90,37,117,.35) !important;
  box-shadow:0 24px 50px rgba(123,32,130,.12) !important;
}
.hpc-title{ font-size:28px !important; margin-top:8px !important; }
.hpc-desc{ font-size:13.5px !important; line-height:1.55 !important; color:var(--mu) !important; }

/* Cards / copiloto */
.cp-card, .card, .mr-plan-wrap, .mr-assist-wrap, .gar-card, .cp-opt{
  border-color:var(--line) !important;
  border-radius:16px !important;
  box-shadow:0 8px 24px rgba(20,14,26,.04) !important;
}
.cp-opt:hover{ border-color:var(--br) !important; }
.cp-btn-primary, .mr-cta-main, button.primary{
  background:linear-gradient(180deg,#8B2FA0,#5A2575) !important;
  box-shadow:0 10px 22px rgba(90,37,117,.28) !important;
}

/* Acceso: ya era el mejor frame; lo unificamos */
#accesoCard{
  border:1px solid rgba(255,255,255,.2);
  box-shadow:0 40px 90px rgba(0,0,0,.45) !important;
}
#accesoTitle{ font-size:34px !important; }

/* Modo oscuro: vino, no slate Tailwind */
body.dark{
  --bg:#120A15;
  --card:#1D1420;
  --tx:#F1EAF5;
  --mu:#A896AF;
  --bo:#332339;
  --nv:#120A15;
  --sh:0 18px 40px rgba(0,0,0,.35);
}
body.dark{
  background:
    radial-gradient(800px 400px at 0% 0%, rgba(90,37,117,.16), transparent 50%),
    #120A15 !important;
}
body.dark .topbar{ background:rgba(20,12,22,.88) !important; }

/* Quitar "sistema operativo" */
kbd{ font-size:10px; opacity:.7; }

/* ==========================================================
   PIF VALUE CENTER — LIQUID GLASS 2026
   Una capa de dirección visual enfocada en velocidad comercial,
   jerarquía y confianza. Conserva todos los flujos existentes.
   ========================================================== */

:root{
  --glass:rgba(255,255,255,.72);
  --glass-strong:rgba(255,255,255,.90);
  --glass-line:rgba(255,255,255,.78);
  --glass-shadow:0 22px 70px rgba(58,14,74,.10),0 2px 10px rgba(58,14,74,.04);
  --focus-ring:0 0 0 4px rgba(90,37,117,.13);
  --ease:cubic-bezier(.2,.8,.2,1);
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  font-family:'Montserrat',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif !important;
  background:
    radial-gradient(900px 520px at -8% -8%,rgba(90,37,117,.16),transparent 62%),
    radial-gradient(760px 520px at 108% 18%,rgba(123,32,130,.12),transparent 60%),
    radial-gradient(700px 420px at 55% 108%,rgba(123,32,130,.10),transparent 62%),
    linear-gradient(145deg,#F7F4F9 0%,#F1EEF7 50%,#F8F6FA 100%) !important;
  background-attachment:fixed !important;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  opacity:.25;
  background-image:linear-gradient(rgba(123,32,130,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(123,32,130,.035) 1px,transparent 1px);
  background-size:42px 42px;
  mask-image:linear-gradient(to bottom,black,transparent 70%);
}

button,input,select,textarea{ font:inherit; }
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:none !important;
  box-shadow:var(--focus-ring) !important;
}

/* Acceso: una portada comercial, no un formulario de sistema */
#accesoGate{
  background:
    radial-gradient(900px 600px at 4% 0%,rgba(90,37,117,.35),transparent 60%),
    radial-gradient(760px 560px at 100% 100%,rgba(123,32,130,.20),transparent 60%),
    linear-gradient(145deg,#15081A 0%,#3B0D55 48%,#110710 100%) !important;
}
#accesoGate::before{
  width:700px !important;height:700px !important;
  background:radial-gradient(circle,rgba(139,47,176,.28),transparent 64%) !important;
  filter:blur(70px) !important;
}
#accesoGate::after{
  width:640px !important;height:640px !important;
  background:radial-gradient(circle,rgba(123,32,130,.20),transparent 66%) !important;
  filter:blur(80px) !important;
}
#accesoCard{
  max-width:980px !important;
  min-height:570px;
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(380px,.95fr);
  background:rgba(255,255,255,.82) !important;
  border:1px solid rgba(255,255,255,.34) !important;
  border-radius:32px !important;
  box-shadow:0 44px 120px rgba(0,0,0,.48),inset 0 1px 0 rgba(255,255,255,.7) !important;
  backdrop-filter:blur(26px) saturate(1.18) !important;
  -webkit-backdrop-filter:blur(26px) saturate(1.18) !important;
}
#accesoHead{
  min-height:570px;
  padding:48px 50px !important;
  text-align:left !important;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  overflow:hidden;
  background:
    linear-gradient(160deg,rgba(90,37,117,.98),rgba(91,15,110,.96) 58%,rgba(21,10,28,.98)) !important;
}
#accesoHead::before{
  content:"";
  position:absolute;
  width:340px;height:340px;
  border-radius:50%;
  right:-120px;top:-100px;
  background:linear-gradient(145deg,rgba(255,255,255,.24),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28);
}
#accesoHead::after{
  content:"";
  position:absolute;
  width:210px;height:210px;
  border-radius:50%;
  right:40px;bottom:-130px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);
}
.acceso-brand-seal{
  position:absolute !important;
  left:42px !important;
  top:34px !important;
  right:auto !important;
  padding:8px 13px !important;
  border-radius:14px !important;
  background:rgba(255,255,255,.93) !important;
  box-shadow:0 10px 30px rgba(0,0,0,.15) !important;
}
.acceso-brand-seal img{ height:32px !important; }
#accesoClock{
  top:40px !important;
  right:42px !important;
  color:rgba(255,255,255,.74) !important;
  font-size:12px !important;
  letter-spacing:.08em;
}
#accesoIco{
  width:auto !important;height:auto !important;
  margin:24px 0 18px !important;
  padding:7px 13px;
  border:1px solid rgba(255,255,255,.34);
  border-radius:999px;
  background:rgba(255,255,255,.12);
  color:#fff;
  font-size:11px !important;
  font-weight:900;
  letter-spacing:.14em;
}
#accesoTitle{
  max-width:420px;
  margin:0 0 14px !important;
  font-family:inherit !important;
  font-size:clamp(34px,4vw,52px) !important;
  font-weight:800 !important;
  line-height:1.02 !important;
  letter-spacing:-.055em !important;
}
#accesoSub{
  max-width:410px;
  font-size:15px !important;
  line-height:1.65 !important;
  color:rgba(255,255,255,.76);
}
.acceso-promises{
  display:grid;
  gap:10px;
  width:100%;
  max-width:420px;
  margin-top:30px;
}
.acceso-promises>div{
  display:grid;
  grid-template-columns:34px 90px 1fr;
  align-items:center;
  gap:8px;
  padding:11px 13px;
  border:1px solid rgba(255,255,255,.17);
  border-radius:14px;
  background:rgba(255,255,255,.08);
  backdrop-filter:blur(10px);
}
.acceso-promises span{ font-size:9px;font-weight:800;letter-spacing:.12em;color:rgba(255,255,255,.48); }
.acceso-promises b{ font-size:12px;color:#fff; }
.acceso-promises small{ font-size:10.5px;line-height:1.35;color:rgba(255,255,255,.68); }
#accesoBody{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:52px 48px !important;
  background:rgba(255,255,255,.58);
}
.acceso-label{
  color:#3A2436 !important;
  font-size:10.5px !important;
  letter-spacing:.08em !important;
}
.acceso-input{
  min-height:52px;
  padding:13px 15px !important;
  background:rgba(255,255,255,.76) !important;
  border:1px solid rgba(123,32,130,.16) !important;
  border-radius:14px !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}
.acceso-input:hover{ border-color:rgba(90,37,117,.34) !important; }
.acceso-input:focus{ border-color:var(--br) !important;box-shadow:var(--focus-ring) !important; }
#accesoContinuarBtn{
  min-height:52px;
  border-radius:14px !important;
  background:linear-gradient(135deg,#8B2FA0,#5A2575 70%,#3B0D55) !important;
  box-shadow:0 14px 30px rgba(90,37,117,.28),inset 0 1px 0 rgba(255,255,255,.28) !important;
}
#accesoFoot{ margin-top:13px !important;line-height:1.55 !important; }
.acceso-productos-strip{
  margin-top:20px !important;
  padding-top:18px !important;
  border-top:1px solid rgba(123,32,130,.10) !important;
}

/* Navegación: menos ruido, mejor jerarquía */
.topbar{
  position:sticky !important;
  top:0;
  z-index:180;
  min-height:72px;
  background:rgba(255,255,255,.70) !important;
  border-bottom:1px solid rgba(123,32,130,.10) !important;
  box-shadow:0 10px 40px rgba(45,10,62,.055) !important;
  backdrop-filter:blur(22px) saturate(1.2) !important;
  -webkit-backdrop-filter:blur(22px) saturate(1.2) !important;
}
.topbar::before{ height:3px !important;background:linear-gradient(90deg,#5A2575 0%,#9B4FA8 34%,#7B2082 72%,#3B0D55 100%) !important; }
.ti{ min-height:72px !important;max-width:1480px !important;padding:0 24px !important;gap:20px !important; }
.ti>div:first-child img{ height:34px !important; }
.app-name{ font-size:11px !important;letter-spacing:.12em !important; }
.view-toggle{
  padding:4px !important;
  border:1px solid rgba(123,32,130,.10) !important;
  border-radius:14px !important;
  background:rgba(255,255,255,.48) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}
.view-toggle button{
  min-height:38px;
  border-radius:10px !important;
  letter-spacing:-.01em;
}
.view-toggle button:not(#btnViewCopiloto).on{
  color:var(--br) !important;
  background:#fff !important;
  box-shadow:0 4px 14px rgba(58,14,74,.08) !important;
}
#btnViewCopiloto{
  background:linear-gradient(135deg,#1F0F26,#0D0710) !important;
  border:1px solid rgba(255,255,255,.14) !important;
  border-radius:10px !important;
  box-shadow:0 8px 22px rgba(20,12,22,.17),inset 0 1px 0 rgba(255,255,255,.12) !important;
}
#accesosRapidos button,#accesosRapidosHD button,.ti>div:last-child>button{
  background:rgba(255,255,255,.58) !important;
  border:1px solid rgba(123,32,130,.12) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}
#accesosRapidos button:hover,#accesosRapidosHD button:hover,.ti>div:last-child>button:hover{
  border-color:rgba(90,37,117,.35) !important;
  background:#fff !important;
}

/* Hero PIF */
#copilotoView .cp-wrap{ max-width:1040px !important;padding:30px 24px 130px !important; }
.cp-head{
  position:relative;
  overflow:hidden;
  padding:34px 36px 30px;
  margin-bottom:18px !important;
  text-align:left !important;
  border:1px solid var(--glass-line);
  border-radius:26px;
  background:
    radial-gradient(440px 260px at 98% 0%,rgba(90,37,117,.14),transparent 68%),
    linear-gradient(145deg,rgba(255,255,255,.88),rgba(255,255,255,.58));
  box-shadow:var(--glass-shadow);
  backdrop-filter:blur(22px) saturate(1.15);
  -webkit-backdrop-filter:blur(22px) saturate(1.15);
}
.cp-head::after{
  content:"";
  position:absolute;
  top:-70px;right:-42px;
  width:230px;height:230px;
  border-radius:50%;
  border:1px solid rgba(90,37,117,.12);
  background:linear-gradient(145deg,rgba(255,255,255,.60),rgba(90,37,117,.05));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
  pointer-events:none;
}
.cp-eyebrow{
  position:relative;
  z-index:1;
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:12px;
  color:var(--br);
  font-size:10px;
  font-weight:850;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.cp-eyebrow::before{ content:"";width:7px;height:7px;border-radius:50%;background:var(--br);box-shadow:0 0 0 5px rgba(90,37,117,.10); }
.cp-head h1{
  position:relative;
  z-index:1;
  justify-content:flex-start !important;
  margin:0 0 8px !important;
  font-family:inherit !important;
  font-size:clamp(27px,3vw,40px) !important;
  font-weight:800 !important;
  letter-spacing:-.045em !important;
}
.cp-head h1 img{ height:40px !important; }
.cp-head p{
  position:relative;
  z-index:1;
  max-width:690px !important;
  margin:0 !important;
  font-size:14px !important;
  line-height:1.62 !important;
}
.cp-hero-meta{
  position:relative;
  z-index:1;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:20px;
}
.cp-hero-meta span{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:34px;
  padding:7px 11px;
  border:1px solid rgba(123,32,130,.10);
  border-radius:10px;
  background:rgba(255,255,255,.60);
  color:var(--mu);
  font-size:10.5px;
  font-weight:700;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}
.cp-hero-meta b{ color:var(--tx);font-size:12px; }

/* Flujo: progreso claro y decisiones escaneables */
.cp-progress{
  justify-content:flex-start !important;
  margin:0 4px 18px !important;
  padding:8px 12px;
}
.cp-dot{ width:38px !important;height:4px !important;border-radius:999px !important;background:rgba(123,32,130,.12) !important; }
.cp-dot.on{ width:56px !important;background:linear-gradient(90deg,var(--br),#C88AD9) !important;box-shadow:0 3px 10px rgba(90,37,117,.22); }
.cp-progress-label{ margin-left:10px !important;font-size:10px !important;letter-spacing:.05em;text-transform:uppercase; }
.cp-step.on{
  padding:24px;
  border:1px solid rgba(255,255,255,.72);
  border-radius:24px;
  background:rgba(255,255,255,.56);
  box-shadow:var(--glass-shadow);
  backdrop-filter:blur(20px) saturate(1.12);
  -webkit-backdrop-filter:blur(20px) saturate(1.12);
}
.cp-step-label{
  margin-bottom:14px !important;
  color:var(--tx) !important;
  font-size:11px !important;
  letter-spacing:.08em !important;
}
.cp-step-label::before{ content:"";width:7px;height:7px;border-radius:50%;background:var(--br);box-shadow:0 0 0 5px rgba(90,37,117,.09); }
.cp-video-hint{ line-height:1.6 !important; }
.cp-opt-grid-10{
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:10px !important;
}
.cp-opt{
  position:relative;
  min-height:68px !important;
  padding:14px 16px !important;
  background:rgba(255,255,255,.76) !important;
  border:1px solid rgba(123,32,130,.12) !important;
  border-radius:15px !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.86),0 5px 16px rgba(58,14,74,.035) !important;
  transition:transform .18s var(--ease),border-color .18s ease,box-shadow .18s ease !important;
}
.cp-opt::after{
  content:"→";
  position:absolute;
  right:15px;
  top:50%;
  transform:translateY(-50%) translateX(-3px);
  color:rgba(123,32,130,.34);
  font-size:15px;
  opacity:0;
  transition:.18s var(--ease);
}
.cp-opt:hover{
  transform:translateY(-2px) !important;
  border-color:rgba(90,37,117,.50) !important;
  box-shadow:0 14px 32px rgba(123,32,130,.09),inset 0 1px 0 #fff !important;
}
.cp-opt:hover::after{ opacity:1;transform:translateY(-50%) translateX(0); }
.cp-opt .cp-tx{ padding-right:20px; }
.cp-opt .cp-tx b{ font-size:12.5px !important;line-height:1.38; }
.cp-3col{ grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:12px !important; }
.cp-vert{ align-items:flex-start !important; }
.cp-vert .cp-ico{
  width:36px !important;height:36px !important;
  font-size:18px !important;
  background:linear-gradient(145deg,rgba(90,37,117,.12),rgba(123,32,130,.06)) !important;
  border:1px solid rgba(90,37,117,.12);
}
.cp-back{ color:var(--mu) !important;margin-bottom:14px !important; }
.cp-back:hover{ color:var(--br) !important; }

/* Cards y llamadas a la acción */
.cp-card,.card,.mr-plan-wrap,.mr-assist-wrap,.gar-card{
  overflow:hidden;
  background:rgba(255,255,255,.78) !important;
  border:1px solid rgba(123,32,130,.11) !important;
  box-shadow:0 12px 34px rgba(58,14,74,.055),inset 0 1px 0 rgba(255,255,255,.85) !important;
}
.cp-card-hd{
  background:linear-gradient(90deg,rgba(123,32,130,.055),rgba(90,37,117,.025)) !important;
  border-bottom:1px solid rgba(123,32,130,.08) !important;
}
.cp-card-main{ border-color:rgba(90,37,117,.24) !important;box-shadow:0 18px 46px rgba(123,32,130,.09) !important; }
.cp-banner{
  background:linear-gradient(135deg,#1E0E26,#3B0D55 62%,#7B2082) !important;
  border:1px solid rgba(255,255,255,.14) !important;
  box-shadow:0 16px 38px rgba(40,10,54,.22),inset 0 1px 0 rgba(255,255,255,.12) !important;
}
.cp-btn,.cp-tool-btn,.mr-cta-main{
  border-radius:12px !important;
  transition:transform .16s var(--ease),box-shadow .16s ease,filter .16s ease !important;
}
.cp-btn:hover,.cp-tool-btn:hover,.mr-cta-main:hover{ transform:translateY(-1px); }
.cp-btn-primary,.mr-cta-main,button.primary{
  background:linear-gradient(135deg,#8B2FA0,#5A2575 68%,#3B0D55) !important;
  box-shadow:0 12px 28px rgba(90,37,117,.25),inset 0 1px 0 rgba(255,255,255,.20) !important;
}
.cp-btn-outline{
  background:rgba(255,255,255,.58) !important;
  border-color:rgba(123,32,130,.15) !important;
}
.cp-btn-outline:hover{ background:#fff !important;border-color:rgba(90,37,117,.42) !important; }

/* Herramientas flotantes: discretas hasta que se necesitan */
#objSearchFab,#floatClose>button{
  border:1px solid rgba(255,255,255,.24) !important;
  box-shadow:0 16px 38px rgba(58,14,74,.22),inset 0 1px 0 rgba(255,255,255,.20) !important;
  backdrop-filter:blur(14px);
}
#objSearchBox{
  background:rgba(255,255,255,.90) !important;
  border:1px solid rgba(255,255,255,.82) !important;
  border-radius:24px !important;
  box-shadow:0 36px 100px rgba(28,9,38,.34) !important;
  backdrop-filter:blur(26px) saturate(1.15);
}
#objSearchOverlay{ background:rgba(24,8,30,.58) !important;backdrop-filter:blur(14px) !important; }

/* Selector de producto */
#homeView .cp-wrap{ max-width:1120px !important;padding-top:34px !important; }
.home-product-grid{ gap:16px !important; }
.home-product-card{
  min-height:300px;
  background:linear-gradient(145deg,rgba(255,255,255,.86),rgba(255,255,255,.58)) !important;
  border:1px solid rgba(255,255,255,.76) !important;
  border-radius:24px !important;
  box-shadow:var(--glass-shadow) !important;
  backdrop-filter:blur(18px);
}
.home-product-card:hover{ border-color:rgba(90,37,117,.34) !important;box-shadow:0 26px 60px rgba(75,20,90,.14) !important; }
.hpc-title{ font-family:inherit !important;font-size:25px !important;font-weight:800 !important;letter-spacing:-.04em !important; }

/* Dark mode retains glass depth and contrast */
body.dark{
  --glass:rgba(30,21,34,.72);
  --glass-strong:rgba(36,24,40,.90);
  --glass-line:rgba(255,255,255,.08);
  background:
    radial-gradient(900px 540px at -8% -8%,rgba(90,37,117,.18),transparent 62%),
    radial-gradient(760px 520px at 108% 18%,rgba(123,32,130,.19),transparent 60%),
    linear-gradient(145deg,#130A18,#1C1420 52%,#100915) !important;
}
body.dark .topbar{ background:rgba(22,13,24,.76) !important;border-color:rgba(255,255,255,.06) !important; }
body.dark .view-toggle{ background:rgba(255,255,255,.035) !important;border-color:rgba(255,255,255,.07) !important; }
body.dark .view-toggle button:not(#btnViewCopiloto).on{ background:rgba(255,255,255,.08) !important;color:#fff !important; }
body.dark .cp-head,
body.dark .cp-step.on,
body.dark .home-product-card{
  background:linear-gradient(145deg,rgba(40,27,44,.86),rgba(26,17,30,.68)) !important;
  border-color:rgba(255,255,255,.08) !important;
}
body.dark .cp-opt,
body.dark .cp-card,
body.dark .card,
body.dark .gar-card{
  background:rgba(33,22,38,.84) !important;
  border-color:rgba(255,255,255,.08) !important;
  box-shadow:0 16px 38px rgba(0,0,0,.20),inset 0 1px 0 rgba(255,255,255,.05) !important;
}
body.dark .cp-hero-meta span{ background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.07); }
body.dark .cp-head::after{ border-color:rgba(255,255,255,.07);background:rgba(255,255,255,.025); }
body.dark .cp-btn-outline{ background:rgba(255,255,255,.04) !important;border-color:rgba(255,255,255,.09) !important; }

@media (max-width:1180px){
  .ti{ gap:12px !important;padding:0 16px !important; }
  .view-toggle button{ padding-left:10px !important;padding-right:10px !important; }
  #accesosRapidos{ display:none !important; }
}

@media (max-width:900px){
  #accesoCard{ grid-template-columns:1fr;max-width:560px !important;min-height:0; }
  #accesoHead{ min-height:260px;padding:90px 34px 28px !important; }
  #accesoTitle{ font-size:34px !important; }
  .acceso-promises{ display:none; }
  #accesoBody{ padding:30px 34px 34px !important; }
  .ti>div:first-child .app-name{ display:none; }
  .cp-opt-grid-10{ grid-template-columns:1fr !important; }
}

@media (max-width:780px){
  #copilotoView .cp-wrap{ padding:18px 14px 110px !important; }
  .cp-head{ padding:26px 22px 24px; }
  .cp-head h1{ font-size:28px !important; }
  .cp-hero-meta{ gap:6px; }
  .cp-hero-meta span{ flex:1;min-width:145px; }
  .cp-step.on{ padding:18px 14px; }
  .cp-3col{ grid-template-columns:1fr !important; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ scroll-behavior:auto !important;animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important; }
}