/* ═══════════════════════════════════════════════════════════════
   ESTILO "ENERGÍA" — el lenguaje de la franja "Ofertas recién llegadas"
   llevado a toda la tienda: cinta amarilla inclinada, rayas que avanzan,
   stickers que se balancean y títulos gruesos en mayúsculas.
   Cada sección usa el color de SU categoría (--c), así no todo es rojo.
   Se carga DESPUÉS de common.css. Las cintas, stickers y etiquetas también
   están en el HTML de cada página: sin este archivo saldrían como texto suelto.
   ═══════════════════════════════════════════════════════════════ */
:root{ --en-amarillo:#FFE066; --en-vino:#8A0014; }

/* ── Cinta amarilla inclinada (la de la franja roja) ── */
.en-cinta{position:relative;z-index:2;width:104%;margin-left:-2%;background:var(--en-amarillo);color:var(--en-vino);
  transform:rotate(-1.1deg);overflow:hidden;white-space:nowrap;box-shadow:0 8px 22px rgba(40,0,0,.18);}
.en-cinta-track{display:inline-flex;gap:30px;padding:9px 0 8px;font-weight:900;font-size:13px;letter-spacing:2.2px;
  text-transform:uppercase;animation:enCinta 32s linear infinite;}
@keyframes enCinta{to{transform:translateX(-50%);}}

/* ── Rayas diagonales que avanzan (fondo de las bandas de color) ── */
.en-rayas-fondo{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.09;
  background-image:linear-gradient(-45deg,#fff 25%,transparent 25%,transparent 50%,#fff 50%,#fff 75%,transparent 75%);
  background-size:56px 56px;animation:enRayas 1.8s linear infinite;}
@keyframes enRayas{to{background-position:56px 0;}}
@keyframes enRayasFinas{to{background-position:16px 0;}}

/* ── Sticker redondo que se balancea ── */
.en-sticker{position:relative;flex-shrink:0;width:66px;height:66px;border-radius:50%;display:grid;place-items:center;
  background:var(--en-amarillo);color:var(--c,#C8102E);font-size:28px;line-height:1;
  box-shadow:0 8px 20px rgba(0,0,0,.2);animation:enBamboleo 2.6s ease-in-out infinite;}
.en-sticker svg{width:28px;height:28px;}
.en-sticker::before{content:'';position:absolute;inset:-6px;border-radius:50%;border:2px dashed currentColor;opacity:.55;animation:enGira 9s linear infinite;}
.en-sticker.sm{width:52px;height:52px;font-size:22px;background:var(--c,#0EA5E9);color:#fff;}
.en-sticker.sm svg{width:24px;height:24px;}
.en-sticker.sm::before{border-color:var(--c,#0EA5E9);opacity:.5;}
@keyframes enBamboleo{0%,100%{transform:rotate(-12deg) scale(1);}50%{transform:rotate(8deg) scale(1.07);}}
@keyframes enGira{to{transform:rotate(360deg);}}
.en-live{flex-shrink:0;width:8px;height:8px;border-radius:50%;background:currentColor;display:inline-block;animation:enLatido 1.6s infinite;}
@keyframes enLatido{0%{box-shadow:0 0 0 0 rgba(255,255,255,.45);opacity:1;}70%{opacity:.55;}100%{box-shadow:0 0 0 10px rgba(255,255,255,0);opacity:1;}}

/* ── Cabeceras de sección del inicio (Laptops, Monitores, Más vendidos…) ── */
.en-head{align-items:center!important;margin-bottom:22px!important;}
.en-head-izq{display:flex;align-items:center;gap:16px;min-width:0;}
.en-head .prow-eyebrow{display:flex;align-items:center;gap:8px;color:var(--c);margin-bottom:6px;}
.en-head .prow-eyebrow::before{content:none;}
.en-head .prow-title{font-size:clamp(28px,3.3vw,42px);font-weight:900;text-transform:uppercase;letter-spacing:-.8px;line-height:1;}
.en-head .prow-title::after{width:74px;height:6px;bottom:-13px;border-radius:4px;opacity:1;
  background-image:linear-gradient(-45deg,var(--c) 25%,transparent 25%,transparent 50%,var(--c) 50%,var(--c) 75%,transparent 75%);
  background-color:color-mix(in srgb,var(--c) 30%,transparent);background-size:16px 16px;animation:enRayasFinas .9s linear infinite;
  transition:width .45s cubic-bezier(.2,.8,.2,1);}
.en-head:hover .prow-title::after{width:130px;}

/* ── "Explora por categoría": fotos grandes con el nombre encima ── */
#categorias-section .cat-grid{gap:18px;}
#categorias-section .cat-tile{--c:var(--blue);height:290px;border:none;border-radius:20px;background:#0B0F16;
  box-shadow:0 14px 34px rgba(10,22,40,.18);isolation:isolate;}
#categorias-section .cat-tile-img{position:absolute;inset:0;height:auto;background:#0B0F16;}
#categorias-section .cat-tile::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(5,8,15,.05) 30%,rgba(5,8,15,.9) 100%);}
#categorias-section .cat-tile-icon{z-index:3;background:var(--c);color:#fff;border-radius:10px;box-shadow:0 6px 16px rgba(0,0,0,.25);}
#categorias-section .cat-tile-info{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:16px 18px 18px;}
#categorias-section .cat-tile-name{color:#fff!important;font-size:21px;font-weight:900;text-transform:uppercase;letter-spacing:-.3px;line-height:1.05;}
#categorias-section .cat-tile-sub{color:rgba(255,255,255,.82);font-size:13px;margin-top:3px;}
#categorias-section .cat-tile-bar{height:5px;width:34px;border-radius:4px;}
#categorias-section .cat-tile-arrow{color:#fff!important;}
#categorias-section .cat-tile:hover{transform:translateY(-8px) rotate(-.7deg);box-shadow:0 24px 50px color-mix(in srgb,var(--c) 40%,transparent);}
#categorias-section .cat-tile:hover .cat-tile-bar{width:100%;}
.cat-tile-count{position:absolute;top:12px;right:12px;z-index:3;background:var(--en-amarillo);color:#10151C;font-weight:900;font-size:11.5px;
  padding:4px 10px;border-radius:20px;box-shadow:0 4px 12px rgba(0,0,0,.25);transform:rotate(4deg);}
.cat-tile-count:empty{display:none;}

/* ── Servicio técnico del inicio y héroes de Servicio / Políticas ── */
.service-inner,.svc-hero-in,.pol-hero-in{position:relative;overflow:hidden;}
.service-inner > *:not(.en-rayas-fondo),.svc-hero-in > *:not(.en-rayas-fondo),.pol-hero-in > *:not(.en-rayas-fondo){position:relative;z-index:1;}
.service-text h2,.svc-hero h1,.pol-hero h1{text-transform:uppercase;font-weight:900;letter-spacing:-.8px;}
.service-icon{background:var(--en-amarillo)!important;color:#0369A1!important;border:none!important;border-radius:50%!important;
  width:74px!important;height:74px!important;box-shadow:0 10px 26px rgba(0,0,0,.3);animation:enBamboleo 2.6s ease-in-out infinite;}
.en-hero-sticker{position:absolute!important;top:28px;right:34px;z-index:2!important;--c:#0369A1;}

/* ── Página de categoría: banda del color de la categoría ── */
.catpage-hero.en-banda{max-width:none;margin:0 0 22px;padding:26px 0 0;position:relative;overflow:hidden;isolation:isolate;color:#fff;
  background:var(--c);background:linear-gradient(125deg,color-mix(in srgb,var(--c) 62%,#000) 0%,var(--c) 58%,color-mix(in srgb,var(--c) 72%,#fff) 100%);}
.catpage-hero-in{position:relative;z-index:1;max-width:1440px;margin:0 auto;padding:0 40px 30px;}
.catpage-hero .catpage-bc,.catpage-hero .catpage-bc a{color:rgba(255,255,255,.85)!important;}
.catpage-hero .en-head-izq{margin-top:12px;}
.catpage-hero .catpage-title{font-size:clamp(34px,4.6vw,58px);font-weight:900;text-transform:uppercase;letter-spacing:-1px;line-height:1;color:#fff;
  text-shadow:0 5px 24px rgba(0,0,0,.25);}
.catpage-hero .catpage-count{display:inline-block;margin-top:12px;background:var(--en-amarillo);color:#10151C;font-weight:900;font-size:12.5px;
  padding:5px 12px;border-radius:20px;transform:rotate(-1.5deg);}
/* la punta izquierda baja ~13px por la inclinación: espacio para que el banner no la corte */
.catpage-hero .en-cinta{margin:4px 0 16px -2%;}

/* ── Categoría gamer (ícono "gamer", hoy Laptop Gamer): morado puro con brillo neón, estilo ROG Strix ── */
.catpage-hero.en-banda.en-gamer{
  background:
    radial-gradient(560px 280px at 86% 0%,color-mix(in srgb,var(--c) 60%,transparent),transparent 70%),
    radial-gradient(420px 220px at 64% 115%,rgba(255,0,212,.28),transparent 70%),
    linear-gradient(115deg,#06000d 0%,#140027 36%,color-mix(in srgb,var(--c) 52%,#000) 68%,var(--c) 100%);}
/* cortes diagonales de neón, como las líneas de las laptops ROG */
.catpage-hero.en-gamer::after{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 0 63%,color-mix(in srgb,var(--c) 45%,#fff) 63% 63.18%,transparent 63.18% 66%,
    color-mix(in srgb,var(--c) 70%,transparent) 66% 66.1%,transparent 66.1%);
  filter:drop-shadow(0 0 6px var(--c));}
.en-gamer .en-rayas-fondo{opacity:.05;}
.catpage-hero.en-gamer .catpage-title{text-shadow:0 0 24px color-mix(in srgb,var(--c) 85%,transparent),0 0 2px rgba(255,255,255,.6);}
.catpage-hero.en-gamer .en-sticker{background:#10001f;color:#E9C2FF;
  box-shadow:0 0 0 2px var(--c),0 0 28px color-mix(in srgb,var(--c) 80%,transparent);}
.catpage-hero.en-gamer .en-sticker::before{border-color:var(--c);opacity:.9;}
.en-head.en-gamer .en-sticker.sm{box-shadow:0 0 0 2px #fff,0 0 22px color-mix(in srgb,var(--c) 75%,transparent);}
#categorias-section .cat-tile.en-gamer .cat-tile-icon{box-shadow:0 0 18px color-mix(in srgb,var(--c) 85%,transparent);}
#categorias-section .cat-tile.en-gamer .cat-tile-bar{box-shadow:0 0 12px var(--c);}
#categorias-section .cat-tile.en-gamer::after{
  background:linear-gradient(180deg,rgba(5,0,15,.05) 30%,color-mix(in srgb,var(--c) 30%,rgba(6,0,16,.93)) 100%);}
/* en modo oscuro, el color de la categoría sobre fondo negro se aclara un poco para que se lea */
[data-theme="dark"] .en-head .prow-eyebrow{color:color-mix(in srgb,var(--c) 65%,#fff);}

/* ── Cinta debajo del menú (ficha de producto) ── */
.en-cinta-top{overflow:hidden;padding:6px 0 10px;}

/* ── Ficha de producto ── */
.p-save-inline{background:var(--en-amarillo)!important;color:var(--en-vino)!important;font-weight:900!important;border:none!important;
  border-radius:10px!important;box-shadow:0 6px 16px rgba(184,134,11,.3)!important;animation:enBamboleo 2.6s ease-in-out infinite;}
.specs-label,.includes-label{font-weight:900!important;text-transform:uppercase;letter-spacing:.4px;position:relative;padding-bottom:10px;}
.specs-label::after,.includes-label::after{content:'';position:absolute;left:0;bottom:0;width:56px;height:5px;border-radius:4px;
  background-image:linear-gradient(-45deg,var(--blue) 25%,transparent 25%,transparent 50%,var(--blue) 50%,var(--blue) 75%,transparent 75%);
  background-color:rgba(14,165,233,.25);background-size:16px 16px;animation:enRayasFinas .9s linear infinite;}
.related-title{text-transform:uppercase;font-weight:900!important;letter-spacing:-.5px;}
/* Destello que cruza los botones de compra cada tanto */
.btn-add-cart,.btn-buy-wa,.btn-vermas{position:relative;overflow:hidden;}
.btn-add-cart::after,.btn-buy-wa::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.45) 50%,transparent 62%);
  transform:translateX(-130%);animation:enDestello 4.5s ease-in-out infinite;}
.btn-buy-wa::after{animation-delay:1.2s;}
@keyframes enDestello{0%,70%{transform:translateX(-130%);}100%{transform:translateX(130%);}}

/* ── Pie de página oscuro, con la cinta arriba ── */
footer{background:#0A0F18!important;color:#C9D3E1;border-top:none!important;padding-top:0!important;position:relative;overflow:hidden;}
footer .en-cinta{width:calc(100% + 100px);margin:0 0 44px -50px;}
footer .ft-title{color:#fff!important;}
footer .ft-links a,footer .ft-about{color:#AAB6C8!important;}
footer .ft-links a:hover{color:var(--en-amarillo)!important;}
footer .ft-inner{border-bottom-color:rgba(255,255,255,.1)!important;}
footer .ft-pagos-tit{color:#fff!important;}
footer .ft-pago{background:rgba(255,255,255,.06)!important;border-color:rgba(255,255,255,.16)!important;color:#fff!important;}
footer .ft-bottom{color:#8B97AA!important;}
footer .logo-text,footer .logo-sub{color:#fff!important;}

@media(max-width:1024px){
  #categorias-section .cat-tile{height:230px;}
}
@media(max-width:640px){
  .en-cinta-track{font-size:11px;padding:7px 0 6px;}
  .en-sticker{width:54px;height:54px;font-size:22px;}
  .en-sticker svg{width:22px;height:22px;}
  .en-sticker.sm{width:42px;height:42px;}
  .en-sticker.sm svg{width:19px;height:19px;}
  .en-head-izq{gap:12px;}
  .en-head .prow-title{font-size:26px;}
  #categorias-section .cat-tile{height:190px;border-radius:16px;}
  #categorias-section .cat-tile-name{font-size:17px;}
  #categorias-section .cat-tile-sub{font-size:11.5px;}
  .catpage-hero-in{padding:0 16px 22px;}
  .catpage-hero .catpage-title{font-size:32px;}
  .catpage-hero.en-gamer::after{content:none;} /* en pantalla angosta la línea de neón cruzaba el título */
  .en-hero-sticker{top:16px;right:16px;}
  footer .en-cinta{width:calc(100% + 60px);margin:0 0 34px -30px;}
}
@media(prefers-reduced-motion:reduce){
  .en-cinta-track,.en-rayas-fondo,.en-sticker,.en-sticker::before,.en-live,.service-icon,.p-save-inline,
  .en-head .prow-title::after,.specs-label::after,.includes-label::after,.btn-add-cart::after,.btn-buy-wa::after{animation:none!important;}
}