html[data-estilo="circuito"]{
  --neon:#05f7f7;
  --destello:#ffffff;
  --naranja:#ff7a1a;
  --radio:10px; --radio-s:8px;
  --traza:rgba(15,171,171,.35);

  --cabeza:color-mix(in srgb,var(--destello) 70%,var(--neon));
  --cola:transparent 0%,color-mix(in srgb,var(--cian) 10%,transparent) 30%,color-mix(in srgb,var(--neon) 38%,transparent) 62%,color-mix(in srgb,var(--cabeza) 85%,transparent) 92%,var(--cabeza) 100%;
}
html[data-estilo="circuito"][data-tema="claro"]{
  --neon:#087f80; --destello:#2b453f; --naranja:#c25400; --traza:rgba(8,127,128,.35);
}
html[data-estilo="circuito"] body{font-family:"Chakra Petch",system-ui,sans-serif}

html[data-estilo="circuito"] body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(to right,rgba(15,171,171,.05) 1px,transparent 1px) 0 0/30px 30px,
    linear-gradient(to bottom,rgba(15,171,171,.05) 1px,transparent 1px) 0 0/30px 30px,
    linear-gradient(180deg,rgba(7,9,13,.1),rgba(7,9,13,.6)),
    url("/web/fondo-placa.webp") center/cover no-repeat,
    #090909;
}
html[data-estilo="circuito"]{background:#090909}
html[data-estilo="circuito"][data-tema="claro"]{background:var(--fondo)}
html[data-estilo="circuito"] body{background:transparent}
html[data-estilo="circuito"][data-tema="claro"] body::before{
  background:
    linear-gradient(to right,rgba(8,127,128,.06) 1px,transparent 1px) 0 0/30px 30px,
    linear-gradient(to bottom,rgba(8,127,128,.06) 1px,transparent 1px) 0 0/30px 30px,
    var(--fondo);
}

html[data-estilo="circuito"]:not([data-tema="claro"]){--panel:rgba(12,18,24,.86);--panel2:rgba(20,30,40,.9);--cab-bg:rgba(5,8,11,.9)}

html[data-estilo="circuito"] .cab{border-bottom-color:transparent}
html[data-estilo="circuito"] .cab::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--traza) 20%,var(--traza) 80%,transparent),
             linear-gradient(90deg,var(--cola)) -12% 0/10% 100% no-repeat;
  animation:barrido 7s linear infinite;
}
@keyframes barrido{to{background-position:0 0,112% 0}}
@keyframes barrido-vuelta{from{background-position:0 0,112% 0}to{background-position:0 0,-12% 0}}
html[data-estilo="circuito"]:not([data-tema="claro"]) .cab-info{box-shadow:inset 0 0 18px rgba(5,247,247,.22);border:1px solid rgba(15,171,171,.25);background:rgba(0,0,0,.55)}
html[data-estilo="circuito"] .buscador input:focus{box-shadow:0 0 0 1px var(--cian),0 0 16px rgba(15,171,171,.35)}

html[data-estilo="circuito"]:not([data-tema="claro"]) .seccion-cab h2,
html[data-estilo="circuito"]:not([data-tema="claro"]) .listado-cab h1,
html[data-estilo="circuito"]:not([data-tema="claro"]) .arm-cab h1{
  color:#fff;text-shadow:0 0 1px #0fabab,0 0 4px #0fabab,0 0 10px rgba(15,171,171,.75),0 0 22px rgba(15,171,171,.35);
}
html[data-estilo="circuito"] .seccion-cab{align-items:center}
html[data-estilo="circuito"] .seccion-cab>:first-child{order:0}
html[data-estilo="circuito"] .seccion-cab>.ver-todo,
html[data-estilo="circuito"] .seccion-cab>button{order:2}

html[data-estilo="circuito"] .seccion-cab::before{
  content:"";order:1;flex:1;min-width:24px;height:9px;align-self:center;pointer-events:none;
  background:
    linear-gradient(90deg,var(--cola)) -14% 50%/12% 2px no-repeat,
    radial-gradient(circle,transparent 2px,var(--traza) 2.5px,var(--traza) 3.5px,transparent 4px) 100% 50%/9px 9px no-repeat,
    linear-gradient(var(--traza),var(--traza)) 0 50%/7px 7px no-repeat,
    linear-gradient(var(--traza),var(--traza)) 0 50%/calc(100% - 6px) 1px no-repeat;
  animation:pulso-pista 5.5s cubic-bezier(.5,0,.5,1) infinite;
}
@keyframes pulso-pista{0%{background-position:-14% 50%,100% 50%,0 50%,0 50%}70%,100%{background-position:114% 50%,100% 50%,0 50%,0 50%}}

html[data-estilo="circuito"] .seccion:nth-of-type(3n+2) .seccion-cab::before{animation-delay:-1.8s}
html[data-estilo="circuito"] .seccion:nth-of-type(3n) .seccion-cab::before{animation-delay:-3.6s}

@property --giro{syntax:"<angle>";initial-value:0deg;inherits:false}
html[data-estilo="circuito"] :is(.tarjeta-hero,.bloque){position:relative;isolation:isolate}

html[data-estilo="circuito"] .tarjeta-hero.grande::after{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;z-index:3;
  background:conic-gradient(from var(--giro),
    transparent 0deg 120deg,
    color-mix(in srgb,var(--cian) 12%,transparent) 138deg,
    color-mix(in srgb,var(--neon) 45%,transparent) 162deg,
    color-mix(in srgb,var(--destello) 85%,transparent) 176deg,
    var(--destello) 180deg,
    transparent 180deg 300deg,
    color-mix(in srgb,var(--cian) 12%,transparent) 318deg,
    color-mix(in srgb,var(--neon) 45%,transparent) 342deg,
    color-mix(in srgb,var(--destello) 85%,transparent) 356deg,
    var(--destello) 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;
  animation:giro 14s linear infinite;
}
@keyframes giro{to{--giro:360deg}}

html[data-estilo="circuito"] :is(.tarjeta-hero:not(.grande),.bloque)::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3;--luz:rgba(5,247,247,.75);
  box-shadow:inset 0 0 0 1.5px var(--luz),inset 0 0 18px color-mix(in srgb,var(--luz) 35%,transparent),0 0 14px color-mix(in srgb,var(--luz) 40%,transparent);
  opacity:.2;animation:respira 3.6s ease-in-out infinite alternate;will-change:opacity;
}
html[data-estilo="circuito"] .tarjeta-hero.soporte::after{--luz:rgba(57,255,122,.7)}
html[data-estilo="circuito"] .tarjeta-hero.gaming::after{--luz:rgba(181,140,255,.8);animation-delay:-1.8s}
html[data-estilo="circuito"] .bloque::after{animation-delay:-.9s}
@keyframes respira{to{opacity:1}}
@media (prefers-reduced-motion:reduce){ html[data-estilo="circuito"] :is(.tarjeta-hero,.bloque)::after{animation:none} }
html[data-estilo="circuito"]:not([data-tema="claro"]) :is(.tarjeta-hero,.bloque){border-color:rgba(15,171,171,.28);box-shadow:inset 0 0 30px rgba(5,247,247,.06)}

.piso{display:none}
html[data-estilo="circuito"] .tarjeta-hero.grande .piso{
  display:block;position:absolute;left:0;bottom:0;width:100%;height:40%;z-index:-1;pointer-events:none;overflow:visible;
  -webkit-mask:linear-gradient(to top,#000 30%,transparent 100%);mask:linear-gradient(to top,#000 30%,transparent 100%);
}
.piso line{stroke:rgba(5,247,247,.45);stroke-width:1;vector-effect:non-scaling-stroke;shape-rendering:geometricPrecision}
.piso .h line{stroke:rgba(5,247,247,.6)}
html[data-estilo="circuito"][data-tema="claro"] .piso line{stroke:rgba(8,127,128,.35)}
html[data-estilo="circuito"]:not([data-tema="claro"]) .tarjeta-hero.grande h2{text-shadow:0 0 12px rgba(15,171,171,.55)}

html[data-estilo="circuito"] .bloque::before{
  content:"";position:absolute;right:0;top:0;width:min(520px,70%);height:100%;z-index:-1;pointer-events:none;
  background:url("/web/circuito.svg") right center/cover no-repeat;opacity:.9;
  -webkit-mask:linear-gradient(to left,#000 30%,transparent);mask:linear-gradient(to left,#000 30%,transparent);
}
html[data-estilo="circuito"][data-tema="claro"] .bloque::before{opacity:.35}
html[data-estilo="circuito"] .arm-resumen.bloque::before{display:none}

@media (min-width:960px){ html[data-estilo="circuito"] .arm-resumen.bloque{position:sticky;top:84px} }

html[data-estilo="circuito"] :is(.cat,.prod,.marcas a,.modo,.arm-perfil,.info-extra .dato){position:relative;overflow:hidden}
html[data-estilo="circuito"] :is(.cat,.prod,.marcas a,.modo,.arm-perfil,.info-extra .dato)::before,
html[data-estilo="circuito"] :is(.cat,.prod,.marcas a,.modo,.arm-perfil,.info-extra .dato)::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:4;background-repeat:no-repeat;
}
html[data-estilo="circuito"] :is(.cat,.prod,.marcas a,.modo,.arm-perfil,.info-extra .dato)::before{
  background-image:linear-gradient(90deg,transparent,var(--neon)),linear-gradient(90deg,var(--neon),transparent);
  background-size:60% 2px,60% 2px;background-position:-150% 0,250% 100%;
}
html[data-estilo="circuito"] :is(.cat,.prod,.marcas a,.modo,.arm-perfil,.info-extra .dato)::after{
  background-image:linear-gradient(0deg,transparent,var(--neon)),linear-gradient(180deg,transparent,var(--neon));
  background-size:2px 60%,2px 60%;background-position:0 250%,100% -150%;
}

@media (hover:hover){
  html[data-estilo="circuito"] :is(.cat,.prod,.marcas a,.modo,.arm-perfil,.info-extra .dato):hover::before{background-position:250% 0,-150% 100%;transition:background-position .4s}
  html[data-estilo="circuito"] :is(.cat,.prod,.marcas a,.modo,.arm-perfil,.info-extra .dato):hover::after{background-position:0 -150%,100% 250%;transition:background-position .4s .1s}
  html[data-estilo="circuito"] :is(.cat,.prod,.marcas a):hover{border-color:rgba(5,247,247,.55);box-shadow:0 0 16px rgba(15,171,171,.3);transform:translateY(-3px);z-index:2}
  html[data-estilo="circuito"] .cat:hover img{filter:drop-shadow(0 0 6px rgba(5,247,247,.7))}
}
html[data-estilo="circuito"] :is(.cat,.prod,.marcas a){transition:border-color .2s,box-shadow .2s,transform .2s,background .15s}
html[data-estilo="circuito"] :is(.cat,.prod,.marcas a):active{border-color:var(--cian);box-shadow:0 0 14px rgba(15,171,171,.35)}
html[data-estilo="circuito"] .cat.todas{border-style:solid;border-color:rgba(15,171,171,.35)}

html[data-estilo="circuito"]:not([data-tema="claro"]) :is(.precio b,.total b,.arm-precio b,.elegir-precio b,.arm-barra-movil b){
  color:#fff;text-shadow:0 0 10px rgba(15,171,171,.45);font-variant-numeric:tabular-nums;
}

html[data-estilo="circuito"]:not([data-tema="claro"]) .ficha-precio b{color:var(--cian);text-shadow:0 0 10px rgba(15,171,171,.45);font-variant-numeric:tabular-nums}

html[data-estilo="circuito"]:not([data-tema="claro"]) .precio b.a-pedido{color:var(--cian-vivo);text-shadow:0 0 10px rgba(46,230,230,.45)}

html[data-estilo="circuito"] .pill{background:rgba(20,8,0,.75);color:var(--naranja);border:1px solid var(--naranja);box-shadow:0 0 10px rgba(255,122,26,.55),inset 0 0 6px rgba(255,122,26,.35)}

html[data-estilo="circuito"] .pill.usado{background:rgba(0,20,12,.78);color:var(--usado);border-color:var(--usado);box-shadow:0 0 10px color-mix(in srgb,var(--usado) 50%,transparent),inset 0 0 6px color-mix(in srgb,var(--usado) 30%,transparent)}
html[data-estilo="circuito"] .pill.consultar{background:rgba(10,14,18,.85);color:#c9d6dc;border-color:rgba(201,214,220,.4);box-shadow:none}
html[data-estilo="circuito"] .pill.ultimas{background:rgba(10,14,18,.85);color:#ffd48a;border-color:rgba(255,212,138,.45);box-shadow:none}
html[data-estilo="circuito"]:not([data-tema="claro"]) .precio.promo{border:1px solid rgba(255,122,26,.75);border-radius:8px;padding:6px 6px;box-shadow:0 0 12px rgba(255,122,26,.35),inset 0 0 10px rgba(255,122,26,.12)}
html[data-estilo="circuito"]:not([data-tema="claro"]) .precio.promo .efe{color:var(--naranja);text-shadow:0 0 8px rgba(255,122,26,.6)}

html[data-estilo="circuito"] :is(.ficha-foto,.mapa){position:relative}
html[data-estilo="circuito"] :is(.ficha-foto,.mapa)::before{
  content:"";position:absolute;inset:8px;pointer-events:none;z-index:2;
  --e:18px;--g:2px;--c:var(--neon);
  background:
    linear-gradient(var(--c),var(--c)) 0 0/var(--e) var(--g),linear-gradient(var(--c),var(--c)) 0 0/var(--g) var(--e),
    linear-gradient(var(--c),var(--c)) 100% 0/var(--e) var(--g),linear-gradient(var(--c),var(--c)) 100% 0/var(--g) var(--e),
    linear-gradient(var(--c),var(--c)) 0 100%/var(--e) var(--g),linear-gradient(var(--c),var(--c)) 0 100%/var(--g) var(--e),
    linear-gradient(var(--c),var(--c)) 100% 100%/var(--e) var(--g),linear-gradient(var(--c),var(--c)) 100% 100%/var(--g) var(--e);
  background-repeat:no-repeat;opacity:.8;filter:drop-shadow(0 0 4px var(--c));
}
html[data-estilo="circuito"] .mapa iframe{position:relative;z-index:1}

@media (hover:hover){
  html[data-estilo="circuito"] .btn-cian:hover{box-shadow:0 0 16px rgba(5,247,247,.5)}
  html[data-estilo="circuito"] .btn-borde:hover{border-color:var(--neon);box-shadow:0 0 12px rgba(15,171,171,.35)}
  html[data-estilo="circuito"] .btn-wa:hover{box-shadow:0 0 16px rgba(37,211,102,.45)}
}
html[data-estilo="circuito"] .chip[aria-pressed="true"]{box-shadow:0 0 12px rgba(15,171,171,.45)}

html[data-estilo="circuito"] .arm-barra{height:8px;background:rgba(15,171,171,.08);border:1px solid rgba(15,171,171,.25)}
html[data-estilo="circuito"] .arm-barra i{position:relative;box-shadow:0 0 10px currentColor}
html[data-estilo="circuito"] .arm-barra i.bien{color:var(--neon);background:linear-gradient(90deg,#0a7f7f,var(--neon))}
html[data-estilo="circuito"] .arm-barra i::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent) -40% 0/40% 100% no-repeat;animation:carga 2.6s linear infinite}
@keyframes carga{to{background-position:140% 0}}
html[data-estilo="circuito"] .arm-perfil[aria-checked="true"]{box-shadow:inset 0 0 0 1px var(--cian),0 0 14px rgba(15,171,171,.35)}

html[data-estilo="circuito"] .pie{position:relative;border-top-color:transparent;background:rgba(3,5,7,.92)}
html[data-estilo="circuito"] .pie::before{
  content:"";position:absolute;left:0;right:0;top:-1px;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--traza) 20%,var(--traza) 80%,transparent),
             linear-gradient(270deg,var(--cola)) 112% 0/10% 100% no-repeat;
  animation:barrido-vuelta 9s linear infinite;
}
html[data-estilo="circuito"] .fila::-webkit-scrollbar-thumb{background:rgba(15,171,171,.45)}

html.liviano *,html.liviano *::before,html.liviano *::after{animation:none!important;transition:none!important;
  text-shadow:none!important;filter:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
html.liviano :is(.tarjeta-hero,.bloque)::after{display:none!important}
html.liviano .logo-neon .luz{opacity:.85}