/* Mejoras visuales (borrador): 1) franja superior azul noche con mensajes que rotan,
   2) "Productos en oferta" en franja azul noche con cuenta regresiva real hasta el lunes,
   3) títulos de sección con etiqueta pequeña en cian y línea degradada. Colores COMERTEC: #081033 · #00d9ff · #7c3aed. */

/* ---------- 1. Franja superior (va dentro del encabezado fijo) ---------- */
body{padding-top:34px;}
html{scroll-padding-top:104px;}
header{padding-top:calc(48px + env(safe-area-inset-top,0px))!important;}
.franja{position:absolute;top:0;left:0;right:0;height:34px;display:flex;align-items:center;justify-content:center;overflow:hidden;
  background:linear-gradient(90deg,#081033,#0b1440 50%,#081033);border-bottom:1px solid rgba(0,217,255,.18);}
.franja::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(420px 34px at 50% 50%,rgba(124,58,237,.35),transparent 70%);}
.franja-msg{position:relative;display:inline-flex;align-items:center;gap:10px;max-width:calc(100% - 32px);
  font-size:.8rem;font-weight:600;letter-spacing:.02em;color:#dff8ff;text-decoration:none;white-space:nowrap;
  transition:opacity .45s ease,transform .45s ease;}
.franja-msg span{overflow:hidden;text-overflow:ellipsis;}
.franja-msg::before{content:'';flex:0 0 7px;height:7px;border-radius:50%;background:#00d9ff;box-shadow:0 0 10px #00d9ff,0 0 18px rgba(0,217,255,.6);}
.franja-msg:hover span{text-decoration:underline;}
.franja-msg.sale{opacity:0;transform:translateY(-6px);}
.franja-msg.entra{opacity:0;transform:translateY(6px);transition:none;}
@media(max-width:560px){.franja-msg{font-size:.72rem;}}

/* ---------- 2. Ofertas en franja azul noche ---------- */
#ofertas{position:relative;isolation:isolate;overflow:hidden;color:#f5f7fa;padding:64px 0 70px;margin-top:10px;
  background:
    radial-gradient(900px 420px at 88% -10%,rgba(124,58,237,.38),transparent 60%),
    radial-gradient(700px 380px at 0% 110%,rgba(0,217,255,.18),transparent 60%),
    linear-gradient(180deg,#081033 0%,#0b1440 100%);}
#ofertas::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(rgba(0,217,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(0,217,255,.06) 1px,transparent 1px);
  background-size:46px 46px;-webkit-mask-image:linear-gradient(180deg,#000,transparent 85%);mask-image:linear-gradient(180deg,#000,transparent 85%);}
#ofertas .sec-head h2{color:#f5f7fa;}
#ofertas .sec-head .sub{color:#b8c1d0;}
#ofertas .ceja{color:#00d9ff;}
#ofertas .product-card{box-shadow:0 14px 34px -14px rgba(0,0,0,.55);border-color:rgba(255,255,255,.12);}
#ofertas .sec-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:18px 32px;}
#ofertas .sec-head-txt{flex:1 1 420px;min-width:0;}
#ofertas .sec-head .sub{max-width:600px;}
.cuenta-ofertas{flex:0 0 auto;display:inline-flex;align-items:center;gap:10px;padding:10px 16px;border-radius:14px;
  background:rgba(8,16,51,.6);border:1px solid rgba(0,217,255,.35);box-shadow:0 0 24px rgba(0,217,255,.12) inset;}
.cuenta-ofertas .et{font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:#9fb4d8;font-weight:600;}
.cuenta-ofertas .t{display:inline-flex;align-items:baseline;gap:3px;}
.cuenta-ofertas b{font-family:'Space Grotesk',sans-serif;font-size:1.35rem;color:#fff;min-width:1.6ch;text-align:right;
  text-shadow:0 0 14px rgba(0,217,255,.45);}
.cuenta-ofertas small{font-size:.72rem;color:#9fb4d8;margin-right:6px;}
/* sello de descuento en rojo (en todo el sitio) */
.p-dto{background:#e11d48!important;color:#fff!important;border:0!important;}

/* ---------- 3. Títulos de sección ---------- */
.ceja{display:inline-flex;align-items:center;gap:8px;font-size:.72rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:#0077a8;margin-bottom:8px;}
.ceja::before{content:'';width:18px;height:2px;border-radius:2px;background:linear-gradient(90deg,#00d9ff,#7c3aed);}
.sec-head h2::after{content:'';display:block;width:56px;height:3px;border-radius:3px;margin-top:12px;
  background:linear-gradient(90deg,#00d9ff,#3b82f6,#7c3aed);}

/* ---------- 9. Tarjetas de producto: borde neón al pasar el mouse ---------- */
.product-card{position:relative;}
.product-card::after{content:'';position:absolute;inset:0;z-index:4;pointer-events:none;border-radius:inherit;padding:2px;
  background:linear-gradient(135deg,#00d9ff,#3b82f6 45%,#7c3aed);
  -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 exclude,linear-gradient(#000 0 0);
  opacity:0;transition:opacity .3s ease;}
@media (hover:hover) and (pointer:fine){
  .product-card:hover{border-color:transparent;
    box-shadow:0 0 0 1px rgba(0,217,255,.15),0 18px 40px -12px rgba(59,130,246,.45),0 0 28px -4px rgba(124,58,237,.35)!important;}
  .product-card:hover::after,.product-card:focus-within::after{opacity:1;}
  #ofertas .product-card:hover{box-shadow:0 0 0 1px rgba(0,217,255,.25),0 20px 44px -12px rgba(0,217,255,.35),0 0 36px -2px rgba(124,58,237,.55)!important;}
}
.product-card:focus-within::after{opacity:1;}

/* ---------- 4. Por qué COMERTEC: iconos con neón y fondo con manchas de color muy suaves ---------- */
#porque{background:
  radial-gradient(620px 320px at 8% 25%,rgba(0,217,255,.10),transparent 65%),
  radial-gradient(620px 320px at 92% 80%,rgba(124,58,237,.11),transparent 65%);}
#porque .pillar{position:relative;overflow:hidden;background:#fff;box-shadow:0 10px 26px -14px rgba(11,18,32,.25);
  transition:transform .28s cubic-bezier(.22,.61,.36,1),box-shadow .28s ease;}
#porque .pillar::before{content:'';position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,#00d9ff,#3b82f6,#7c3aed);}
#porque .pillar-icon{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:1.25rem;color:#fff;margin-bottom:16px;background:linear-gradient(135deg,#00d9ff,#3b82f6 50%,#7c3aed);
  box-shadow:0 0 0 5px rgba(0,217,255,.10),0 0 18px rgba(0,217,255,.45),0 0 32px rgba(124,58,237,.30);}
@media (hover:hover) and (pointer:fine){
  #porque .pillar:hover{transform:translateY(-4px);box-shadow:0 18px 36px -14px rgba(59,130,246,.40),0 0 24px -6px rgba(124,58,237,.35);}
}

/* ---------- 5. Marcas que manejamos: logos oficiales deslizándose sobre azul noche ---------- */
.marcas-band{position:relative;isolation:isolate;overflow:hidden;padding:56px 0 60px;color:#f5f7fa;
  background:
    radial-gradient(700px 300px at 15% 0%,rgba(0,217,255,.14),transparent 60%),
    radial-gradient(700px 320px at 90% 100%,rgba(124,58,237,.30),transparent 60%),
    linear-gradient(180deg,#081033,#0b1440);}
.marcas-band .sec-head h2{color:#f5f7fa;}
.marcas-band .sec-head .sub{color:#b8c1d0;}
.marcas-band .ceja{color:#00d9ff;}
.marquee{position:relative;overflow:hidden;padding:6px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}
.marquee-track{display:flex;gap:18px;width:max-content;animation:marquee 42s linear infinite;}
@keyframes marquee{to{transform:translateX(calc(-50% - 9px));}}
/* Ficha "vidrio pulido" + "destello de vitrina": sin sombra oscura. Solo la ficha que tiene el mouse encima brilla:
   al salir, el aro y el destello se apagan al instante (la transición existe solo al entrar). */
.marca-chip{position:relative;overflow:hidden;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  height:70px;min-width:150px;padding:0 26px;border-radius:16px;text-decoration:none;border:0;
  background:linear-gradient(180deg,#fff 0%,#f3f6fb 55%,#e9eef6 100%);
  box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(8,16,51,.07),0 0 0 1px rgba(255,255,255,.35);
  transition:transform .2s ease;}
.marca-chip::after{content:'';position:absolute;top:-30%;bottom:-30%;left:-60%;width:38%;z-index:3;pointer-events:none;
  transform:skewX(-20deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.95) 45%,rgba(0,217,255,.28) 60%,transparent);
  transition:none;}
.marca-chip:hover,.marca-chip:focus-visible{transform:translateY(-3px);
  box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(255,255,255,.95),0 0 0 6px rgba(255,255,255,.08);
  transition:transform .35s cubic-bezier(.22,.61,.36,1),box-shadow .25s ease;}
.marca-chip:hover::after,.marca-chip:focus-visible::after{left:130%;transition:left .8s cubic-bezier(.22,.61,.36,1);}
.marca-chip .brand-logo{max-height:30px;width:auto;position:relative;z-index:2;}
@media(max-width:560px){.marca-chip{height:58px;min-width:120px;padding:0 18px;} .marca-chip .brand-logo{max-height:24px;}}

/* ---------- 6. Seguridad electrónica: azul noche con red de partículas ---------- */
#soluciones{position:relative;isolation:isolate;overflow:hidden;color:#f5f7fa;padding:70px 0;
  background:
    radial-gradient(700px 360px at 85% 50%,rgba(124,58,237,.30),transparent 60%),
    radial-gradient(600px 320px at 10% 90%,rgba(0,217,255,.14),transparent 60%),
    linear-gradient(180deg,#081033,#0b1440);}
#soluciones canvas.red{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;}
#soluciones h2{color:#f5f7fa;}
#soluciones .sub{color:#b8c1d0;}
#soluciones .sol-item{background:rgba(255,255,255,.06);border:1px solid rgba(0,217,255,.22);color:#b8c1d0;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:border-color .25s ease,background .25s ease;}
#soluciones .sol-item strong{color:#fff;}
#soluciones .sol-item:hover{border-color:rgba(0,217,255,.6);background:rgba(255,255,255,.09);}

/* ---------- 7. Cierre "¿Buscas un equipo específico?" con degradado de marca ---------- */
.cta-final{position:relative;overflow:hidden;color:#fff;border-top:0;
  background:linear-gradient(120deg,#00a8d6 0%,#3b82f6 45%,#7c3aed 100%);}
.cta-final::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(500px 220px at 20% 0%,rgba(255,255,255,.22),transparent 70%),radial-gradient(500px 240px at 85% 100%,rgba(8,16,51,.35),transparent 70%);}
.cta-final .wrap{position:relative;}
.cta-final h2{color:#fff;}
.cta-final .sub{color:rgba(255,255,255,.9);}
.cta-final .btn{background:#fff;color:#081033;box-shadow:0 10px 24px -8px rgba(8,16,51,.5);}
.cta-final .btn:hover{box-shadow:0 0 0 4px rgba(255,255,255,.25),0 12px 28px -8px rgba(8,16,51,.6);}

/* ---------- 8. Pie de página en azul noche (todas las páginas) ---------- */
footer{position:relative;color:#b8c1d0;border-top:0!important;
  background:radial-gradient(700px 260px at 90% 0%,rgba(124,58,237,.22),transparent 60%),linear-gradient(180deg,#081033,#060b24)!important;}
footer::before{content:'';position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,#00d9ff,#3b82f6,#7c3aed);}
footer h4,footer .foot-col h4{color:#fff;}
footer a,footer .foot-col a,footer .foot-col p,footer .pie-legal a{color:#b8c1d0;}
footer a:hover,footer a:focus-visible,footer .pie-legal a:hover{color:#00d9ff;}
footer .foot-bottom{border-top-color:rgba(255,255,255,.10);color:#9fb4d8;}
footer .pie-sic,footer .pie-id{color:#9fb4d8;}
footer .pie-sic a{color:#00d9ff;}

@media (prefers-reduced-motion: reduce){.franja-msg{transition:none;} .product-card::after{transition:none;}
  .marquee-track{animation:none;flex-wrap:wrap;justify-content:center;width:auto;} .marquee{-webkit-mask-image:none;mask-image:none;}
  .marca-chip[data-copia]{display:none;}}

/* Enlace a Preguntas frecuentes en el pie */
footer .pie-faq{margin:0 0 12px;}
footer .pie-faq a{color:#00d9ff;font-weight:600;font-size:.86rem;}
footer .pie-faq a:hover,footer .pie-faq a:focus-visible{text-decoration:underline;}

/* ---------- Estados de carga ---------- */
/* 1. Tarjetas esqueleto: van en el HTML de cada cuadrícula y el catálogo las reemplaza al dibujar los productos */
.sk-card{pointer-events:none;}
.sk-card .product-thumb,.sk-l{background:linear-gradient(100deg,#e7ebf1 30%,#f4f6fa 50%,#e7ebf1 70%);background-size:300% 100%;animation:sk-brillo 1.3s ease-in-out infinite;}
.sk-l{display:block;height:12px;border-radius:6px;margin:0 0 10px;}
.sk-l.c{width:45%;}.sk-l.b{height:40px;border-radius:8px;margin:12px 0 0;}.sk-l.m{width:75%;height:16px;}.sk-l.p{width:55%;height:20px;margin-top:16px;}
@keyframes sk-brillo{0%{background-position:100% 0}100%{background-position:0 0}}
/* Ficha de producto: la caja de la foto con brillo hasta que el producto se dibuja */
.pd-media:empty{background:linear-gradient(100deg,#e7ebf1 30%,#f4f6fa 50%,#e7ebf1 70%);background-size:300% 100%;animation:sk-brillo 1.3s ease-in-out infinite;}
/* 2. Fotos de producto: brillo suave mientras cargan y aparición suave al terminar */
.product-thumb.has-img,.pd-media.has-img,.sug-img.has-img{background-image:linear-gradient(100deg,rgba(231,235,241,.9) 30%,rgba(244,246,250,.9) 50%,rgba(231,235,241,.9) 70%);
  background-size:300% 100%;animation:sk-brillo 1.3s ease-in-out infinite;}
.product-thumb.has-img.foto-lista,.pd-media.has-img.foto-lista,.sug-img.has-img.foto-lista{animation:none;background-image:none;}
.thumb-img,.pd-foto,.sug-img img{opacity:0;transition:opacity .35s ease;}
.thumb-img.cargo,.pd-foto.cargo,.sug-img img.cargo{opacity:1;}
/* 3. Botones que esperan al servidor: indicador giratorio mientras están desactivados */
#bPagar:disabled,#pEnviar:disabled,#eEnviar:disabled{cursor:progress;opacity:.85;}
#bPagar:disabled::before,#pEnviar:disabled::before,#eEnviar:disabled::before{content:'';width:16px;height:16px;flex:0 0 16px;border-radius:50%;
  border:2px solid currentColor;border-right-color:transparent;animation:giro .7s linear infinite;display:inline-block;vertical-align:-3px;margin-right:8px;}
@keyframes giro{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){.pd-media:empty,.sk-card .product-thumb,.sk-l,.product-thumb.has-img,.pd-media.has-img,.sug-img.has-img{animation:none;}
  #bPagar:disabled::before,#pEnviar:disabled::before,#eEnviar:disabled::before{animation:none;border-right-color:currentColor;opacity:.5;}
  .thumb-img,.pd-foto,.sug-img img{transition:none;}}

/* ---------- Mejoras de compra (oct-2026) ---------- */
/* 1. Ficha: entrega estimada bajo los botones */
.pd-entrega{display:grid;gap:4px;margin:14px 0 0;padding:12px 14px;border-radius:12px;background:rgba(34,197,94,.08);border:1px solid rgba(34,197,94,.25);
  font-size:.86rem;line-height:1.45;color:#3b4554;}
.pd-entrega b{color:#15803d;}
.pd-entrega span:first-child::before{content:'🚚';margin-right:6px;}
/* 2. Celular: barra fija "Comprar ahora" en la ficha */
.pd-barra{display:none;}
@media(max-width:760px){
  .pd-barra{display:flex;align-items:center;gap:12px;position:fixed;left:0;right:0;bottom:0;z-index:1040;padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));
    background:rgba(255,255,255,.96);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid rgba(11,18,32,.10);
    box-shadow:0 -8px 24px rgba(11,18,32,.08);transform:translateY(110%);transition:transform .25s ease;}
  .pd-barra.on{transform:none;}
  .pd-barra-info{flex:1;min-width:0;display:flex;flex-direction:column;}
  .pd-barra-nombre{font-size:.78rem;color:#5b6472;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .pd-barra-precio{font:700 1.05rem 'Space Grotesk',sans-serif;color:#0b1220;}
  .pd-barra-btn{flex:0 0 auto;padding:12px 18px;border-radius:10px;font-weight:700;font-size:.92rem;color:#fff;background:#ff7a00;box-shadow:0 6px 18px rgba(255,122,0,.35);}
  body.con-barra{padding-bottom:72px;}
  body.con-barra .wa-flotante{bottom:84px;}
}
/* 3. Aviso "Agregado al carrito" */
.t-agregado{position:fixed;z-index:1095;right:18px;top:84px;width:min(380px,calc(100vw - 28px));display:grid;grid-template-columns:auto 1fr auto;gap:10px 12px;
  align-items:center;padding:12px 14px;border-radius:14px;background:#fff;border:1px solid rgba(11,18,32,.10);box-shadow:0 18px 40px rgba(11,18,32,.16);
  opacity:0;transform:translateY(-10px);pointer-events:none;transition:opacity .25s ease,transform .25s ease;}
.t-agregado.on{opacity:1;transform:none;pointer-events:auto;}
.t-ag-foto{width:52px;height:52px;object-fit:contain;border-radius:8px;background:#fff;}
.t-ag-txt{display:flex;flex-direction:column;min-width:0;}
.t-ag-txt b{color:#15803d;font-size:.9rem;}
.t-ag-txt span{font-size:.82rem;color:#3b4554;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.t-ag-btns{grid-column:1 / -1;display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.t-ag-ver,.t-ag-pagar{padding:10px;border-radius:9px;font-weight:700;font-size:.86rem;text-align:center;cursor:pointer;}
.t-ag-ver{background:#fff;border:1px solid rgba(11,18,32,.15);color:#0b1220;}
.t-ag-pagar{background:#ff7a00;color:#fff;border:none;}
.t-ag-cerrar{grid-column:3;grid-row:1;align-self:start;background:none;border:none;font-size:1.3rem;line-height:1;color:#5b6472;cursor:pointer;padding:0 2px;}
@media(max-width:760px){.t-agregado{right:14px;left:14px;width:auto;top:auto;bottom:16px;transform:translateY(10px);}
  body.con-barra .t-agregado{bottom:86px;}}
/* 4. Pago en celular: sin la burbuja de WhatsApp, que tapa campos (la ayuda por WhatsApp sigue en la página) */
@media(max-width:760px){body:has(main.pg) .wa-flotante{display:none;}}
/* 5. Banners más bajos en celular, para ver productos sin bajar tanto */
@media(max-width:760px){
  .head.bn-video,.head.bn-img{padding:24px 0 170px;}
  .head.bn-video .bn-vid{height:170px;}
  .head.bn-video::after{background:linear-gradient(180deg,var(--fill) 0%,var(--fill) calc(100% - 170px),rgba(3,10,20,0) calc(100% - 110px));}
  .head.bn-portatiles{background:linear-gradient(180deg,var(--fill) 0%,var(--fill) calc(100% - 170px),rgba(1,4,12,0) calc(100% - 110px)),
      url(../img/banners/portatiles.webp) right bottom / auto 170px no-repeat,var(--fill);}
  .head.bn-video h1,.head.bn-img h1{font-size:1.9rem;}
  .hero-img-wrap{min-height:210px;}
  .hero-cta{padding:16px 0 26px;gap:10px;}
  .hero-cta .btn{flex:1 1 0;justify-content:center;padding:12px 10px;font-size:.88rem;}
}
@media (prefers-reduced-motion: reduce){.pd-barra,.t-agregado{transition:none;}}