/* Control Center 7.6 - Logo Fit + Pro UX
   Capa final separada para evitar seguir acumulando overrides dentro de main.css.
*/

:root{
  --cc-bg-final:#010309;
  --cc-panel-final:#040d19;
  --cc-panel-soft:#071321;
  --cc-line-final:rgba(55,154,178,.18);
  --cc-accent-final:#0f8aa0;
  --cc-accent-2:#0a477d;
  --cc-accent-soft:rgba(15,138,160,.12);
  --cc-text-final:#f1f8fc;
  --cc-muted-final:#91a8b8;
}

/* Base visual más limpia y menos cansadora */
html,body{
  background:
    radial-gradient(circle at 18% -8%,rgba(15,138,160,.075),transparent 30%),
    radial-gradient(circle at 88% 0%,rgba(10,71,125,.07),transparent 28%),
    linear-gradient(180deg,#010309,#020711 48%,#010309) !important;
  color:var(--cc-text-final)!important;
}

/* Header: el logo conserva tamaño pero nunca se corta */
.topbar{
  height:86px!important;
  overflow:visible!important;
}
.topbar-inner{
  height:86px!important;
  overflow:visible!important;
  align-items:center!important;
}
.brand-logo{
  height:82px!important;
  min-width:310px!important;
  display:flex!important;
  align-items:center!important;
  overflow:visible!important;
  padding:4px 0!important;
}
.brand-logo img{
  height:78px!important;
  width:auto!important;
  max-width:305px!important;
  object-fit:contain!important;
  object-position:center!important;
  display:block!important;
  padding:4px 0!important;
  filter:drop-shadow(0 0 10px rgba(15,138,160,.20))!important;
}

/* Hero: mismo impacto, más aire para que se vea completo */
.hero-grid{
  grid-template-columns:minmax(390px,560px) minmax(0,1fr)!important;
  align-items:center!important;
}
.logo-panel-final,
.logo-panel{
  min-height:470px!important;
  overflow:visible!important;
  padding:28px!important;
  display:grid!important;
  place-items:center!important;
  isolation:isolate!important;
}
.logo-panel-final::before,
.logo-panel::before,
.logo-panel-final::after,
.logo-panel::after{
  pointer-events:none!important;
}
.logo-panel-final img,
.logo-panel img{
  width:min(100%,520px)!important;
  height:auto!important;
  max-height:420px!important;
  object-fit:contain!important;
  object-position:center!important;
  transform-origin:center!important;
  animation:ccLogoSoftPulse 5s ease-in-out infinite!important;
  filter:drop-shadow(0 0 18px rgba(15,138,160,.16))!important;
}
@keyframes ccLogoSoftPulse{
  0%,100%{transform:translateY(0) scale(.985);filter:drop-shadow(0 0 14px rgba(15,138,160,.14));}
  50%{transform:translateY(-3px) scale(1);filter:drop-shadow(0 0 22px rgba(15,138,160,.20));}
}

/* Botones más premium: llamativos, pero sin encandilar */
.primary-cta,
.add-btn,
.smart-reco-add,
.repair-submit,
.service-order-btn,
.whatsapp-send,
.service-cards button,
.combo-actions button{
  background:linear-gradient(135deg,#0b7188,#0a3f75)!important;
  color:#f3fcff!important;
  border:1px solid rgba(166,235,246,.11)!important;
  box-shadow:0 12px 26px rgba(5,62,88,.16)!important;
}
.primary-cta:hover,
.add-btn:hover,
.smart-reco-add:hover,
.repair-submit:hover,
.service-order-btn:hover,
.whatsapp-send:hover,
.service-cards button:hover,
.combo-actions button:hover{
  background:linear-gradient(135deg,#0e8296,#0b4b86)!important;
  box-shadow:0 16px 34px rgba(5,62,88,.22)!important;
}

/* Cards y secciones con menos ruido visual */
.card,
.combo-card,
.service-cards article,
.showcase,
.combo-offers,
.service-top,
.catalog,
.product-buy-card,
.product-image-card{
  background:
    radial-gradient(circle at 0 0,rgba(15,138,160,.045),transparent 30%),
    linear-gradient(180deg,rgba(4,13,25,.94),rgba(1,7,15,.985))!important;
  border-color:var(--cc-line-final)!important;
}
.card:hover,
.combo-card:hover,
.service-cards article:hover{
  transform:translateY(-2px);
  border-color:rgba(91,190,210,.26)!important;
}

/* Tipografía y lectura */
.hero h1,
.service-top h2,
.combo-head h2,
.product-buy-card h1{
  letter-spacing:-.045em!important;
  text-wrap:balance;
}
.title,
.related-card strong,
.smart-reco-text b{
  text-wrap:balance;
}

/* UX y accesibilidad */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline:2px solid rgba(100,220,235,.8)!important;
  outline-offset:3px!important;
}
button,
a,
.card,
.combo-card{
  -webkit-tap-highlight-color:rgba(15,138,160,.15);
}

/* Rendimiento: aislar render de bloques largos */
.showcase,
.combo-offers,
.catalog,
.service-cards,
.footer{
  content-visibility:auto;
  contain-intrinsic-size:1px 640px;
}
.card,
.combo-card{
  contain:layout paint;
}

/* Imágenes: evitar saltos y cortes */
img{
  max-width:100%;
}
.thumb img,
.related-pic img,
.smart-reco-photo img,
.product-image-card img{
  object-fit:contain!important;
  decoding:auto;
}

/* Asistente IA: menos invasivo y mejor integrado */
.cc-ai-button{
  background:linear-gradient(135deg,#0b7188,#0a3f75)!important;
  box-shadow:0 12px 30px rgba(5,62,88,.22)!important;
}
.cc-ai-panel{
  border-color:var(--cc-line-final)!important;
  background:linear-gradient(180deg,rgba(4,13,25,.98),rgba(1,7,15,.99))!important;
}

/* Mobile final */
@media(max-width:980px){
  .topbar{height:76px!important;}
  .topbar-inner{height:76px!important;overflow:visible!important;}
  .brand-logo{height:74px!important;min-width:230px!important;}
  .brand-logo img{height:70px!important;max-width:230px!important;}

  .hero-grid{grid-template-columns:1fr!important;}
  .logo-panel-final,
  .logo-panel{
    min-height:360px!important;
    padding:22px!important;
  }
  .logo-panel-final img,
  .logo-panel img{
    width:min(100%,390px)!important;
    max-height:315px!important;
  }
}
@media(max-width:640px){
  .topbar{height:70px!important;}
  .topbar-inner{height:70px!important;}
  .brand-logo{height:68px!important;min-width:190px!important;}
  .brand-logo img{height:64px!important;max-width:190px!important;}
  .cart-chip{height:40px!important;}

  .logo-panel-final,
  .logo-panel{
    min-height:315px!important;
    padding:18px!important;
    border-radius:26px!important;
  }
  .logo-panel-final img,
  .logo-panel img{
    width:min(100%,350px)!important;
    max-height:275px!important;
  }
  .hero h1{
    font-size:clamp(30px,9vw,42px)!important;
  }
  .grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}
@media(max-width:420px){
  .brand-logo{min-width:168px!important;}
  .brand-logo img{height:58px!important;max-width:168px!important;}
  .logo-panel-final,
  .logo-panel{
    min-height:285px!important;
    padding:16px!important;
  }
  .logo-panel-final img,
  .logo-panel img{
    max-height:245px!important;
  }
}

/* Si el usuario/telefono prefiere menos movimiento, se respeta */
@media(prefers-reduced-motion:reduce){
  .logo-panel-final img,
  .logo-panel img{
    animation:none!important;
  }
}.topbar.is-scrolled{
  background:rgba(1,3,9,.94)!important;
  box-shadow:0 10px 34px rgba(0,0,0,.28)!important;
}
.cc-ai-suggestions{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  padding:6px 0 8px;
}
.cc-ai-suggestions button{
  min-height:30px;
  border:1px solid rgba(91,190,210,.16);
  border-radius:999px;
  background:rgba(255,255,255,.045);
  color:#d7eef5;
  font-size:12px;
  font-weight:800;
  padding:0 10px;
  cursor:pointer;
}
.cc-ai-suggestions button:hover{
  background:rgba(15,138,160,.12);
}