/* Control Center 7.8 - Conversion / AI / SEO / Cloudflare Ready */

:root{
  --cc78-bg:#01040b;
  --cc78-panel:#050f1d;
  --cc78-panel2:#071727;
  --cc78-line:rgba(91,175,208,.18);
  --cc78-line2:rgba(255,255,255,.06);
  --cc78-text:#f4fbff;
  --cc78-muted:#96adbf;
  --cc78-accent:#0d8198;
  --cc78-accent2:#0a3e74;
  --cc78-soft:rgba(13,129,152,.12);
  --cc78-shadow:0 26px 74px rgba(0,0,0,.34);
}

html{scroll-padding-top:96px}
body{
  background:
    radial-gradient(circle at 12% -8%,rgba(13,129,152,.09),transparent 30%),
    radial-gradient(circle at 92% 0%,rgba(10,62,116,.08),transparent 26%),
    linear-gradient(180deg,#01040b,#030915 48%,#01040b)!important;
}

/* Logo definitivo: sin marco cortante */
.brand-logo{
  overflow:visible!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  min-width:360px!important;
  min-height:92px!important;
  height:92px!important;
  padding:0!important;
}
.brand-logo::before{display:none!important}
.brand-logo img{
  max-width:360px!important;
  max-height:88px!important;
  width:auto!important;
  height:auto!important;
  object-fit:contain!important;
  object-position:center!important;
  filter:drop-shadow(0 0 18px rgba(30,150,200,.18)) drop-shadow(0 8px 20px rgba(0,0,0,.35))!important;
}
.topbar,.topbar-inner{
  height:102px!important;
  overflow:visible!important;
}
.topbar{
  background:rgba(1,4,11,.88)!important;
  border-bottom:1px solid rgba(91,175,208,.13)!important;
}

/* Hero logo sin caja que corte */
.logo-panel,
.logo-panel-final{
  min-height:560px!important;
  padding:0!important;
  overflow:visible!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
.logo-panel::before,
.logo-panel::after,
.logo-panel-final::before,
.logo-panel-final::after{display:none!important}
.logo-panel img,
.logo-panel-final img{
  width:min(100%,620px)!important;
  max-height:520px!important;
  height:auto!important;
  object-fit:contain!important;
  object-position:center!important;
  border-radius:36px!important;
  filter:drop-shadow(0 0 24px rgba(13,129,152,.16)) drop-shadow(0 24px 52px rgba(0,0,0,.45))!important;
}

.hero{
  background:
    radial-gradient(circle at 14% 16%,rgba(13,129,152,.11),transparent 30%),
    linear-gradient(115deg,rgba(5,15,29,.96),rgba(1,5,13,.98) 54%,rgba(5,14,28,.96))!important;
}
.hero-grid{
  grid-template-columns:minmax(440px,650px) minmax(0,1fr)!important;
  gap:42px!important;
}
.hero h1{
  max-width:13ch!important;
  font-size:clamp(42px,5.2vw,82px)!important;
}
.hero p{font-size:clamp(16px,1.3vw,20px)!important;color:#c9d8e4!important}

/* Beneficios premium */
.cc78-benefits{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin:18px auto;
}
.cc78-benefits article{
  display:grid;
  grid-template-columns:42px 1fr;
  gap:10px;
  align-items:center;
  padding:16px;
  border-radius:22px;
  border:1px solid var(--cc78-line);
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.018));
  box-shadow:0 16px 42px rgba(0,0,0,.20);
}
.cc78-benefits span{
  width:42px;height:42px;display:grid;place-items:center;border-radius:16px;
  background:rgba(13,129,152,.12);border:1px solid rgba(91,175,208,.16);
}
.cc78-benefits strong{font-family:Orbitron,system-ui;font-size:13px}
.cc78-benefits small{grid-column:2;color:var(--cc78-muted);line-height:1.25}

/* Búsqueda por intención */
.cc78-intent{
  display:grid;
  grid-template-columns:minmax(220px,320px) 1fr;
  gap:16px;
  align-items:center;
  margin:20px auto 12px;
  padding:20px;
  border-radius:26px;
  border:1px solid var(--cc78-line);
  background:linear-gradient(180deg,rgba(5,15,29,.82),rgba(2,8,18,.96));
}
.cc78-intent h2{margin:0;font-family:Orbitron,system-ui;font-size:clamp(22px,2vw,30px)}
.cc78-intent-grid{
  display:flex;gap:10px;overflow-x:auto;padding:2px 0 4px;
}
.cc78-intent-grid button{
  flex:0 0 auto;
  min-height:44px;
  border-radius:999px;
  padding:0 14px;
  border:1px solid rgba(91,175,208,.18);
  background:rgba(255,255,255,.04);
  color:#e8f8ff;
  font-weight:900;
  cursor:pointer;
}
.cc78-intent-grid button:hover{background:rgba(13,129,152,.12);border-color:rgba(91,175,208,.32)}

/* Catálogo y cards */
.grid{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))!important}
.card{
  min-height:100%;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.card:hover{transform:translateY(-3px)}
.thumb{aspect-ratio:1/1!important;height:auto!important}
.title{font-size:13px!important;line-height:1.22!important}
.price{font-size:22px!important}
.add-btn{min-height:44px!important}

/* Producto más vendedor */
.product-page-hero{margin-top:24px!important}
.product-buy-card h1{font-size:clamp(30px,3vw,48px)!important}
.product-discount-note{
  border-radius:18px!important;
  padding:14px!important;
  background:linear-gradient(135deg,rgba(13,129,152,.12),rgba(10,62,116,.10))!important;
}
.mobile-product-bar{
  position:fixed;left:12px;right:12px;bottom:82px;z-index:120;
  display:none;align-items:center;justify-content:space-between;gap:12px;
  padding:12px;border-radius:20px;
  background:rgba(3,10,19,.94);
  border:1px solid rgba(91,175,208,.18);
  box-shadow:0 20px 42px rgba(0,0,0,.34);
  backdrop-filter:blur(16px);
}
.mobile-product-bar strong{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  font-size:12px;line-height:1.1;color:#f4fbff;
}
.mobile-product-bar span{color:#73e3f1;font-weight:950}
.mobile-product-bar button{height:44px!important;border-radius:14px!important;padding:0 16px!important}

/* IA local más útil */
.cc-ai-suggestions{display:flex;flex-wrap:wrap;gap:6px;padding:8px 0}
.cc-ai-suggestions button{
  border:1px solid rgba(91,175,208,.18);
  background:rgba(255,255,255,.04);
  color:#e6f6fc;
  border-radius:999px;
  min-height:30px;
  padding:0 10px;
  font-size:12px;
  font-weight:850;
}

/* Performance / Accesibilidad */
.showcase,.combo-offers,.catalog,.service-cards,.cc78-benefits,.cc78-intent,.footer{
  content-visibility:auto;
  contain-intrinsic-size:1px 620px;
}
.card,.combo-card,.related-card{contain:layout paint}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid rgba(100,220,235,.75)!important;
  outline-offset:3px!important;
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

@media(max-width:980px){
  .topbar,.topbar-inner{height:88px!important}
  .brand-logo{min-width:280px!important;height:82px!important;min-height:82px!important}
  .brand-logo img{max-width:280px!important;max-height:78px!important}
  .hero-grid{grid-template-columns:1fr!important;gap:24px!important}
  .logo-panel,.logo-panel-final{min-height:430px!important}
  .logo-panel img,.logo-panel-final img{width:min(100%,460px)!important;max-height:390px!important}
  .cc78-benefits{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cc78-intent{grid-template-columns:1fr}
}
@media(max-width:720px){
  .container{width:min(100% - 18px,1500px)}
  .topbar,.topbar-inner{height:82px!important}
  .brand-logo{min-width:220px!important;height:76px!important;min-height:76px!important}
  .brand-logo img{max-width:220px!important;max-height:72px!important}
  .hero{border-radius:26px!important}
  .hero h1{font-size:clamp(32px,9vw,46px)!important;max-width:100%!important}
  .logo-panel,.logo-panel-final{min-height:340px!important}
  .logo-panel img,.logo-panel-final img{width:min(100%,350px)!important;max-height:300px!important}
  .cc78-benefits{grid-template-columns:1fr}
  .cc78-benefits article{grid-template-columns:38px 1fr;padding:13px}
  .cc78-benefits small{grid-column:2}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  .card .title{font-size:11.5px!important}
  .price{font-size:18px!important}
  .mobile-product-bar{display:flex}
  .mobile-product-bar .primary-cta{white-space:nowrap}
}
@media(max-width:440px){
  .brand-logo{min-width:184px!important}
  .brand-logo img{max-width:184px!important;max-height:66px!important}
  .logo-panel,.logo-panel-final{min-height:292px!important}
  .logo-panel img,.logo-panel-final img{width:min(100%,305px)!important;max-height:250px!important}
}

/* 7.8.1 logo full-fix */
.brand-logo{display:flex!important;align-items:center!important;justify-content:flex-start!important;padding-inline:8px!important}
.brand-logo img{display:block!important;background:transparent!important}
.hero-visual,.logo-panel,.logo-panel-final{display:flex!important;align-items:center!important;justify-content:center!important}
@media (min-width:981px){
  .brand-logo{min-width:400px!important;height:96px!important;min-height:96px!important}
  .brand-logo img{max-width:400px!important;max-height:92px!important}
}
@media (max-width:980px){
  .brand-logo{justify-content:flex-start!important}
}