/* Copiloto CS — capa visual premium
   Pegar DESPUÉS de styles.css. No toca JS ni flujos.
   Objetivo: que un gerente vea marca Liverpool, no intranet. */

@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:#E5006B;
  --br-d:#9A0850;
  --br-2:#6A1A4C;
  --br-s:#FCE4F0;
  --ink:#161018;
  --tx:#1C1418;
  --mu:#6B5B64;
  --bg:#F4EEEF;
  --card:#FFFBFC;
  --bo:#E8DDE2;
  --line:#D9C8D0;
  --gold:#B0894A;
  --gold-s:#F6EEDC;
  --nv:#120C10;
  --sh:0 18px 40px rgba(22,16,24,.07);
  --r:18px;
}

html,body{
  min-height:100%;
  background:
    radial-gradient(900px 420px at 8% -10%, rgba(229,0,107,.10), transparent 55%),
    radial-gradient(700px 380px at 100% 0%, rgba(106,26,76,.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(255,251,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), #F3C6DC 40%, var(--gold) 72%, var(--br-2));
}
.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(18,12,16,.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(229,0,107,.35) !important;
  box-shadow:0 24px 50px rgba(106,26,76,.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(22,16,24,.04) !important;
}
.cp-opt:hover{ border-color:var(--br) !important; }
.cp-btn-primary, .mr-cta-main, button.primary{
  background:linear-gradient(180deg,#F0187A,#C4005C) !important;
  box-shadow:0 10px 22px rgba(229,0,107,.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:#0E0A0C;
  --card:#1A1418;
  --tx:#F4EBEF;
  --mu:#B09AA4;
  --bo:#3A2C33;
  --nv:#0E0A0C;
  --sh:0 18px 40px rgba(0,0,0,.35);
}
body.dark{
  background:
    radial-gradient(800px 400px at 0% 0%, rgba(229,0,107,.16), transparent 50%),
    #0E0A0C !important;
}
body.dark .topbar{ background:rgba(18,12,16,.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(68,14,46,.10),0 2px 10px rgba(68,14,46,.04);
  --focus-ring:0 0 0 4px rgba(229,0,107,.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(229,0,107,.16),transparent 62%),
    radial-gradient(760px 520px at 108% 18%,rgba(106,26,76,.12),transparent 60%),
    radial-gradient(700px 420px at 55% 108%,rgba(176,137,74,.10),transparent 62%),
    linear-gradient(145deg,#f8f5f7 0%,#f3eef2 50%,#f9f6f8 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(106,26,76,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(106,26,76,.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(229,0,107,.35),transparent 60%),
    radial-gradient(760px 560px at 100% 100%,rgba(176,137,74,.20),transparent 60%),
    linear-gradient(145deg,#120b10 0%,#2d0f20 48%,#100a0e 100%) !important;
}
#accesoGate::before{
  width:700px !important;height:700px !important;
  background:radial-gradient(circle,rgba(255,51,145,.28),transparent 64%) !important;
  filter:blur(70px) !important;
}
#accesoGate::after{
  width:640px !important;height:640px !important;
  background:radial-gradient(circle,rgba(176,137,74,.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(229,0,107,.98),rgba(110,10,62,.96) 58%,rgba(35,12,27,.98)) !important;
}
/* Lluvia de estrellas — nebulosa rosa sobre fondo oscuro, detrás del texto */
.acceso-stars{
  position:absolute; inset:0;
  overflow:hidden;
  pointer-events:none;
  z-index:0;
  border-radius:inherit;
}
.acceso-stars .star{
  position:absolute;
  background:#fff;
  border-radius:50%;
  opacity:.2;
  box-shadow:0 0 4px 1px rgba(255,255,255,.55);
  animation-name:accesoTwinkle;
  animation-timing-function:ease-in-out;
  animation-iteration-count:infinite;
}
.acceso-stars .shoot{
  position:absolute;
  width:130px; height:2px;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.95));
  border-radius:2px;
  opacity:0;
  animation-name:accesoShoot;
  animation-timing-function:linear;
  animation-iteration-count:infinite;
}
@keyframes accesoTwinkle{
  0%,100%{opacity:.15; transform:scale(.7);}
  50%{opacity:.95; transform:scale(1.2);}
}
@keyframes accesoShoot{
  0%{opacity:0; transform:translate(-60px,-30px) rotate(32deg);}
  5%{opacity:1;}
  16%{opacity:0; transform:translate(260px,170px) rotate(32deg);}
  100%{opacity:0; transform:translate(260px,170px) rotate(32deg);}
}
@media (prefers-reduced-motion:reduce){
  .acceso-stars .star,.acceso-stars .shoot{animation:none !important; opacity:.35;}
}
/* Texto y contenido de accesoHead siempre por encima de la lluvia de estrellas */
#accesoIco,#accesoTitle,#accesoSub,.acceso-promises,#accesoClima{
  position:relative;
  z-index:1;
}
#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:40px !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:#44323d !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(106,26,76,.16) !important;
  border-radius:14px !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}
.acceso-input:hover{ border-color:rgba(229,0,107,.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,#ed0d74,#bd0058 70%,#8f0b4c) !important;
  box-shadow:0 14px 30px rgba(229,0,107,.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(106,26,76,.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(106,26,76,.10) !important;
  box-shadow:0 10px 40px rgba(52,11,36,.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,#e5006b 0%,#ef3b90 34%,#b0894a 72%,#6a1a4c 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(106,26,76,.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(68,14,46,.08) !important;
}
#btnViewCopiloto{
  background:linear-gradient(135deg,#21131c,#0f0b0e) !important;
  border:1px solid rgba(255,255,255,.14) !important;
  border-radius:10px !important;
  box-shadow:0 8px 22px rgba(18,12,16,.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(106,26,76,.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(229,0,107,.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(229,0,107,.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(229,0,107,.12);
  background:linear-gradient(145deg,rgba(255,255,255,.60),rgba(229,0,107,.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(229,0,107,.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(106,26,76,.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(106,26,76,.12) !important; }
.cp-dot.on{ width:56px !important;background:linear-gradient(90deg,var(--br),#f34b9a) !important;box-shadow:0 3px 10px rgba(229,0,107,.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(229,0,107,.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(106,26,76,.12) !important;
  border-radius:15px !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.86),0 5px 16px rgba(68,14,46,.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(106,26,76,.34);
  font-size:15px;
  opacity:0;
  transition:.18s var(--ease);
}
.cp-opt:hover{
  transform:translateY(-2px) !important;
  border-color:rgba(229,0,107,.50) !important;
  box-shadow:0 14px 32px rgba(106,26,76,.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(229,0,107,.12),rgba(106,26,76,.06)) !important;
  border:1px solid rgba(229,0,107,.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(106,26,76,.11) !important;
  box-shadow:0 12px 34px rgba(68,14,46,.055),inset 0 1px 0 rgba(255,255,255,.85) !important;
}
.cp-card-hd{
  background:linear-gradient(90deg,rgba(106,26,76,.055),rgba(229,0,107,.025)) !important;
  border-bottom:1px solid rgba(106,26,76,.08) !important;
}
.cp-card-main{ border-color:rgba(229,0,107,.24) !important;box-shadow:0 18px 46px rgba(106,26,76,.09) !important; }
.cp-banner{
  background:linear-gradient(135deg,#24141e,#3a1329 62%,#6a1a4c) !important;
  border:1px solid rgba(255,255,255,.14) !important;
  box-shadow:0 16px 38px rgba(44,12,30,.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,#ed0d74,#bd0058 68%,#8f0b4c) !important;
  box-shadow:0 12px 28px rgba(229,0,107,.25),inset 0 1px 0 rgba(255,255,255,.20) !important;
}
.cp-btn-outline{
  background:rgba(255,255,255,.58) !important;
  border-color:rgba(106,26,76,.15) !important;
}
.cp-btn-outline:hover{ background:#fff !important;border-color:rgba(229,0,107,.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(68,14,46,.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(31,10,23,.34) !important;
  backdrop-filter:blur(26px) saturate(1.15);
}
#objSearchOverlay{ background:rgba(26,8,18,.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(229,0,107,.34) !important;box-shadow:0 26px 60px rgba(83,15,54,.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(31,22,28,.72);
  --glass-strong:rgba(38,26,34,.90);
  --glass-line:rgba(255,255,255,.08);
  background:
    radial-gradient(900px 540px at -8% -8%,rgba(229,0,107,.18),transparent 62%),
    radial-gradient(760px 520px at 108% 18%,rgba(106,26,76,.19),transparent 60%),
    linear-gradient(145deg,#0f0a0d,#171015 52%,#0e090c) !important;
}
body.dark .topbar{ background:rgba(20,13,18,.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(42,29,37,.86),rgba(27,18,24,.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(35,24,31,.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; }
}