/* Home TeoTec: botón TIENDA, etiqueta NUEVO y banda de herramientas gratis (v1, 2026-10-19) */

/* ---- Botón TIENDA del navbar: rojo + «respira» (brillo que pulsa) ---- */
.btn-tienda-cyber{background:#ff003c;color:#fff!important;padding:8px 22px!important;font-family:'Orbitron',sans-serif;font-weight:900;text-decoration:none!important;border-bottom:none!important;box-shadow:none!important;outline:none!important;clip-path:polygon(15px 0,100% 0,100% calc(100% - 15px),calc(100% - 15px) 100%,0 100%,0 15px);transition:all .3s;animation:auto-press 2s infinite;display:inline-block}
.btn-tienda-cyber:hover{background:#fcee0a;color:#000!important;clip-path:polygon(0 0,100% 0,100% 100%,0 100%);animation:none}
@keyframes auto-press{0%{transform:scale(1) translateY(0)}4%{transform:scale(.95) translateY(2px)}8%{transform:scale(1) translateY(0)}100%{transform:scale(1) translateY(0)}}
.nav-item.tienda-li{animation:tienda-breathe 2.6s ease-in-out infinite}
@keyframes tienda-breathe{0%,100%{filter:drop-shadow(0 0 2px rgba(255,0,60,.35))}50%{filter:drop-shadow(0 0 13px rgba(255,0,60,.95))}}
.nav-nuevo{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:8px;background:#7CFFB2;color:#06292a;font:800 9px 'Orbitron',sans-serif;letter-spacing:.5px;vertical-align:middle}

/* ---- Banda «Herramientas gratis» (diseño del mockup: icono animado sobre el borde) ---- */
.hx-grid{--border:rgba(102,252,241,.22);--cyan:#66fcf1;--white:#f8f9fa;--ok:#7CFFB2;--warn:#ffd166;--dim:#9aa0a6;--muted:#c5c6c7}
.hx-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px 14px;margin-top:22px}
.hx-card{position:relative;display:flex;flex-direction:column;justify-content:center;background:linear-gradient(135deg,rgba(27,30,37,.95) 0%,rgba(18,20,25,.98) 100%);border:1px solid var(--border);border-radius:14px;padding:22px 18px 16px;color:var(--white)!important;text-decoration:none;font-weight:700;font-family:'Orbitron',sans-serif;font-size:15px;letter-spacing:.3px;transition:all .3s cubic-bezier(.2,.8,.2,1);overflow:visible}
.hx-card:hover{border-color:var(--cyan);transform:translateY(-3px);box-shadow:0 10px 24px rgba(0,0,0,.5),0 0 16px rgba(102,252,241,.18)}
.hx-card small{display:block;color:var(--dim);font:500 13.5px 'Rajdhani',sans-serif;letter-spacing:0;margin-top:4px;line-height:1.35}
.hx-card .hx-act{display:inline-flex;align-items:center;gap:6px;font:700 11px 'Orbitron';color:var(--cyan);letter-spacing:1px;margin-top:10px;opacity:.85;transition:all .2s}
.hx-card:hover .hx-act{opacity:1;transform:translateX(3px)}
.hx-badge{position:absolute;top:-18px;right:18px;width:44px;height:44px;border-radius:12px;background:#0c0e12;border:1.5px solid var(--cyan);display:flex;align-items:center;justify-content:center;box-shadow:0 0 14px rgba(102,252,241,.3),inset 0 0 8px rgba(102,252,241,.12);transition:all .35s cubic-bezier(.34,1.56,.64,1);z-index:2}
.hx-card:hover .hx-badge{transform:scale(1.15) rotate(3deg);border-color:#fff;box-shadow:0 0 22px var(--cyan)}
.svg-mg-usb .mg-spark{stroke:var(--cyan);fill:var(--cyan);filter:drop-shadow(0 0 5px var(--cyan));animation:usb-spark-flash 1.2s infinite ease-in-out;transform-origin:center}
@keyframes usb-spark-flash{0%,100%{opacity:.3;transform:scale(.9)}50%{opacity:1;transform:scale(1.15);filter:drop-shadow(0 0 8px #fff)}}
.svg-mg-usb .mg-electron{fill:var(--cyan);animation:electron-flow 1.5s infinite linear}
.svg-mg-usb .mg-electron.e2{animation-delay:.5s}
.svg-mg-usb .mg-electron.e3{animation-delay:1s}
@keyframes electron-flow{0%{transform:translateY(8px);opacity:0}20%{opacity:1}80%{opacity:1}100%{transform:translateY(-8px);opacity:0}}
.svg-mg-battery .bat-liquid{fill:url(#batGradRel);animation:battery-fill-drain 3.2s infinite cubic-bezier(.4,0,.2,1);transform-origin:bottom}
@keyframes battery-fill-drain{0%,10%{transform:scaleY(.2)}50%,75%{transform:scaleY(.92)}90%,100%{transform:scaleY(.2)}}
.svg-mg-battery .bat-pulse-line{stroke:var(--white);stroke-dasharray:40;stroke-dashoffset:40;animation:heart-pulse 2s infinite ease-in-out}
@keyframes heart-pulse{0%{stroke-dashoffset:40;opacity:0}40%{stroke-dashoffset:0;opacity:1}70%{opacity:1}100%{stroke-dashoffset:-40;opacity:0}}
.svg-mg-cpu .cpu-radar{transform-origin:16px 16px;animation:radar-sweep 2.2s linear infinite}
@keyframes radar-sweep{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
.svg-mg-cpu .cpu-needle{transform-origin:16px 20px;animation:needle-twitch 1.8s infinite ease-in-out}
@keyframes needle-twitch{0%,100%{transform:rotate(-30deg)}40%{transform:rotate(45deg)}60%{transform:rotate(25deg)}80%{transform:rotate(50deg)}}
.svg-mg-cpu .cpu-pin{animation:pin-glow 1.4s infinite alternate}
@keyframes pin-glow{0%{opacity:.3}100%{opacity:1;stroke:var(--cyan)}}
.svg-mg-shop .shop-cube{animation:cube-levitate 2.5s infinite ease-in-out;transform-origin:center}
@keyframes cube-levitate{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-4px) rotate(4deg)}}
.svg-mg-shop .shop-holo-ring{animation:holo-scan 2.5s infinite ease-in-out;transform-origin:16px 24px}
@keyframes holo-scan{0%,100%{transform:scale(.85);opacity:.4;stroke:var(--cyan)}50%{transform:scale(1.15);opacity:1;stroke:#fff}}
.hx-grid{max-width:940px;margin:0 auto;gap:38px 24px}
.hx-card{padding:30px 26px 22px!important;font-size:18px!important;min-height:150px}
.hx-card small{font-size:16px!important;margin-top:8px!important}
.hx-card .hx-act{font-size:12px!important;margin-top:16px!important}
.hx-badge{width:54px!important;height:54px!important;top:-24px!important;right:24px!important}
@media(max-width:700px){.hx-grid{grid-template-columns:1fr!important}}

/* ---- Navbar más compacto: con TIENDA y HERRAMIENTAS hay 7 ítems; por debajo de 1200 px pasa a menú «hamburguesa» ---- */
@media(min-width:1200px){
 #mainNav .navbar-nav .nav-link{margin:0 1px;padding-left:.5rem;padding-right:.5rem;letter-spacing:.2px;font-size:.72rem}
 #mainNav .btn-cyber{padding:8px 14px;font-size:.78rem}
 #mainNav .btn-tienda-cyber{padding:7px 16px!important}
 #mainNav .navbar-brand img{width:132px;height:auto;margin-right:.25rem!important}
}
@media(min-width:1440px){
 #mainNav .navbar-nav .nav-link{margin:0 5px;padding-left:.6rem;padding-right:.6rem;letter-spacing:.6px;font-size:.78rem}
 #mainNav .btn-cyber{padding:10px 20px;font-size:.9rem}
 #mainNav .navbar-brand img{width:160px}
}
@media(max-width:1199.98px){.nav-item.tienda-li{margin:.35rem 0}}
/* ---- Ícono «Cómo llegar» (Google Maps) en lugar de VISITANOS ---- */
.nav-maps{display:inline-flex;align-items:center;justify-content:center;gap:10px;width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.28);color:#fff!important;text-decoration:none!important;transition:transform .25s,border-color .25s,box-shadow .25s,background .25s}
.nav-maps:hover,.nav-maps:focus-visible{background:rgba(234,67,53,.14);border-color:#ea4335;box-shadow:0 0 16px rgba(234,67,53,.55);transform:translateY(-2px)}
.nav-maps .maps-pin{overflow:visible;transform-origin:50% 100%}
.nav-maps:hover .maps-pin,.nav-maps:focus-visible .maps-pin{animation:maps-bote .6s ease-out}
.maps-li .nav-maps .maps-pin .maps-cuerpo{filter:drop-shadow(0 0 3px rgba(234,67,53,.6))}
@keyframes maps-bote{0%{transform:translateY(0)}35%{transform:translateY(-5px)}60%{transform:translateY(0)}80%{transform:translateY(-2px)}100%{transform:translateY(0)}}
.nav-maps-txt{display:none;font:700 .78rem 'Orbitron',sans-serif;letter-spacing:.5px}
@media(max-width:1199.98px){.nav-maps{width:auto;height:auto;border-radius:24px;padding:9px 18px;margin:.35rem 0}.nav-maps-txt{display:inline}}
@media(prefers-reduced-motion:reduce){.nav-maps:hover .maps-pin,.nav-maps:focus-visible .maps-pin{animation:none}.nav-maps{transition:none}}
#mainNav .dropdown-menu .dropdown-item{white-space:normal}
#mainNav .dropdown-menu .dropdown-item small{display:block}
@media(prefers-reduced-motion:reduce){.btn-tienda-cyber,.nav-item.tienda-li{animation:none!important}}

/* ---- Logo = botón «Volver al inicio» (discreto: solo al pasar el mouse / enfocar, como los enlaces del menú) ---- */
#mainNav .navbar-brand{position:relative;cursor:pointer;transition:transform .25s,filter .25s}
#mainNav .navbar-brand:hover,#mainNav .navbar-brand:focus-visible{transform:translateY(-1px);filter:drop-shadow(0 0 9px rgba(102,252,241,.55));outline:none}
#mainNav .navbar-brand::after{content:"";position:absolute;left:0;bottom:-7px;height:2px;width:0;background:#66fcf1;box-shadow:0 0 8px #66fcf1;transition:width .3s}
#mainNav .navbar-brand:hover::after,#mainNav .navbar-brand:focus-visible::after{width:100%}
#mainNav .navbar-brand::before{content:"VOLVER AL INICIO";position:absolute;left:0;top:100%;margin-top:12px;padding:4px 9px;border:1px solid rgba(102,252,241,.6);border-radius:6px;background:#0c0e12;color:#66fcf1;font:700 10px 'Orbitron',sans-serif;letter-spacing:.8px;white-space:nowrap;opacity:0;transform:translateY(-4px);pointer-events:none;transition:opacity .2s,transform .2s;z-index:5}
#mainNav .navbar-brand:hover::before,#mainNav .navbar-brand:focus-visible::before{opacity:1;transform:translateY(0)}
@media(hover:none){#mainNav .navbar-brand::before,#mainNav .navbar-brand::after{display:none}}
@media(prefers-reduced-motion:reduce){#mainNav .navbar-brand,#mainNav .navbar-brand::before,#mainNav .navbar-brand::after{transition:none}#mainNav .navbar-brand:hover{transform:none}}

/* Desplegables del navbar: más anchos y con títulos más chicos, sin partir el texto (2026-10-19) */
@media(min-width:1200px){
#mainNav .dropdown-menu{min-width:22rem}
#mainNav .dropdown-menu .dropdown-item{padding:.62rem 1rem!important}
#mainNav .dropdown-menu .dropdown-item .font-tech{font-size:.8rem;letter-spacing:.4px;line-height:1.25;white-space:nowrap}
#mainNav .dropdown-menu .dropdown-item small{font-size:.76rem;line-height:1.3;white-space:nowrap}
#mainNav .dropdown-menu .dropdown-item i.fs-5{font-size:1.05rem!important;width:1.4rem;text-align:center;margin-right:.8rem!important}
}
@media(max-width:1199.98px){
#mainNav .dropdown-menu .dropdown-item .font-tech{font-size:.78rem;letter-spacing:.4px}
#mainNav .dropdown-menu .dropdown-item small{font-size:.76rem}
}