/* ── Tipografía ────────────────────────────────────────────────────
   El sitio usa la tipografía de Apple, San Francisco, pero NO se
   sirve desde acá: Apple la licencia sólo para apps de sus
   plataformas, no como fuente web, así que sus archivos no se pueden
   subir al hosting. Lo que se hace es pedírsela al sistema:

     -apple-system / BlinkMacSystemFont  → en Mac, iPhone y iPad el
       navegador devuelve la San Francisco que ya tiene instalada. Es
       la de Apple, de verdad, y no descarga nada.
     Inter → el que entra desde Windows o Android no tiene SF. Inter
       es libre, está en Google Fonts y es casi idéntica (mismas
       proporciones y el mismo aire neutro), así que la página se ve
       igual en las dos veredas.

   Inter va como fuente variable (300..800): un solo archivo cubre
   todos los pesos que usa el sitio, en vez de bajar seis. Ojo con
   esto al agregar estilos — cualquier peso intermedio (590, 650) es
   válido y no obliga a tocar el @import.

   Reemplazó a Poppins el 27/07/2026. Poppins es geométrica y bastante
   más ancha: al cambiar, los títulos ocupan menos y se ven un punto
   más chicos, por eso los tamaños y los letter-spacing de abajo se
   reajustaron a la vez. Si algún día se vuelve atrás, hay que
   revisarlos también.
   ────────────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300..800&display=swap');

/* ══════════════════════════════════════════
   TOKENS & RESET
══════════════════════════════════════════ */
:root{
  --black:#111;--white:#fff;--gray-bg:#f5f5f5;--gray-border:#e0e0e0;
  --gray-text:#666;--accent:#0071e3;--accent-dk:#0058b0;
  --font:-apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text','Inter',
    'Segoe UI',Roboto,'Helvetica Neue',Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font);color:var(--black);background:var(--white);font-size:15px;
  /* SF e Inter traen las mismas ligaduras y alternativas tipográficas que usa
     Apple: 'cv11' da la a y la g de un piso (las de SF), 'ss01' afina los
     dos puntos y la coma. En Mac no hacen nada porque SF ya viene así. */
  font-feature-settings:'cv11' 1,'ss01' 1;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  letter-spacing:-.011em}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}

/* ══════════════════════════════════════════
   ANNOUNCE BAR
══════════════════════════════════════════ */
.announce{
  background:var(--black);color:var(--white);
  font-size:11.5px;padding:8px 0;overflow:hidden;
  white-space:nowrap;letter-spacing:.05em;
  /* z-index 300 = arriba del .mega-scrim (199), igual que el header. Si no,
     al abrirse el mega menú la barra se desenfocaba junto con la página. */
  position:relative;z-index:300;
}
.announce-track{
  display:inline-block;
  animation:ticker 32s linear infinite;
}
.announce-track span{margin:0 32px}
@keyframes ticker{
  0%{transform:translateX(60vw)}
  100%{transform:translateX(-100%)}
}

/* ══════════════════════════════════════════
   HEADER
══════════════════════════════════════════ */
header{
  position:sticky;top:0;z-index:300;
  background:var(--white);
  border-bottom:1px solid var(--gray-border);
}
.hdr{
  max-width:1280px;margin:0 auto;
  display:flex;align-items:center;
  justify-content:space-between;
  padding:0 24px;height:90px;gap:8px;
}
.logo{font-size:20px;font-weight:700;letter-spacing:-.04em;flex-shrink:0}
.logo em{font-style:normal;color:var(--accent)}

/* nav */
nav{display:flex;align-items:stretch}
/* static a propósito: así el contenedor del .mega es el <header> y el panel
   sale a todo el ancho y pegado al borde de abajo del header, no del apartado */
.ni{position:static;display:flex;align-items:center}
.ni>a,.nbtn{
  position:relative;z-index:0;
  display:flex;align-items:center;gap:3px;
  height:90px;padding:0 15px;
  font-size:12.5px;font-weight:500;
  color:var(--black);background:none;border:none;
  cursor:pointer;white-space:nowrap;
  transition:color .16s ease;font-family:var(--font);
}
/* Sin píldora negra: apple.com no la tiene, el apartado solo cambia de color. */
.ni>a:hover,.nbtn:hover,
.ni:hover>a{color:var(--accent)}
.ni>a.hi{color:var(--accent);font-weight:700}
.caret{width:8px;height:8px;opacity:.45;margin-top:1px}

/* mega dropdown */
.dd{
  display:none;position:absolute;top:100%;left:0;
  background:var(--white);
  border:1px solid var(--gray-border);
  border-top:2px solid var(--black);
  min-width:180px;padding:6px 0;
  box-shadow:0 12px 32px rgba(0,0,0,.1);z-index:400;
}
.ni:hover .dd{display:block}
.dd a{
  display:block;padding:8px 17px;font-size:12px;
  transition:background .1s,color .1s;
}
.dd a:hover{background:var(--gray-bg);color:var(--accent)}
.dd-sep{border:none;border-top:1px solid var(--gray-border);margin:5px 0}

/* header icons */
.hicons{display:flex;align-items:center;gap:14px}
.hicons a{
  display:flex;align-items:center;
  color:var(--black);transition:color .13s;
  position:relative;
}
.hicons a:hover{color:var(--accent)}
.hicons svg{width:20px;height:20px}
.cbadge{
  background:var(--accent);color:#fff;
  font-size:9px;font-weight:700;border-radius:50%;
  width:15px;height:15px;display:flex;align-items:center;
  justify-content:center;position:absolute;top:-4px;right:-6px;
}

/* ══════════════════════════════════════════
   HERO — fullwidth image banners
══════════════════════════════════════════ */
.hero{position:relative;overflow:hidden;background:#000;height:520px}
.hslide{
  position:absolute;inset:0;opacity:0;
  transition:opacity .75s ease;
}
.hslide.on{opacity:1}

/* Slide backgrounds using CSS gradients + emoji decoration (replace with real images) */
.hbg{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
}
/* slide 1 – dark blue iPhone */
.hbg.s0{background:radial-gradient(ellipse at 72% 42%,#1e4fd6 0%,#0d1f6b 45%,#060a2b 100%)}
/* slide 2 – deep purple MacBook */
.hbg.s1{background:radial-gradient(ellipse at 68% 45%,#6d28d9 0%,#3a1178 48%,#120636 100%)}
/* slide 3 – dark teal Plan Canje */
.hbg.s2{background:radial-gradient(ellipse at 62% 42%,#7c3aed 0%,#4c1d95 48%,#170a3a 100%)}
/* slide 4 – warm dark Samsung */
.hbg.s3{background:radial-gradient(ellipse at 68% 44%,#4338ca 0%,#221a6e 48%,#0a0a2e 100%)}
/* slide 5 – envíos */
.hbg.s4{background:radial-gradient(ellipse at 60% 45%,#5b6cf5 0%,#3524a8 48%,#120a3a 100%)}

/* glow orb */
.hglow{
  position:absolute;border-radius:50%;
  filter:blur(115px);opacity:.34;pointer-events:none;
}
.hglow.blue{width:520px;height:520px;background:#2f6bff;top:-90px;right:6%}
.hglow.purple{width:500px;height:500px;background:#8b3cff;top:-50px;right:12%}
.hglow.teal{width:480px;height:480px;background:#9333ea;top:-60px;right:9%}
.hglow.orange{width:470px;height:470px;background:#4f46e5;top:-55px;right:10%}
.hglow.indigo{width:480px;height:480px;background:#6366f1;top:-70px;right:8%}

/* deco emoji (swap for product cutout PNGs) */
.hdeco{
  position:absolute;right:8%;top:46%;
  transform:translateY(-50%);
  font-size:210px;opacity:.16;
  user-select:none;z-index:1;
  line-height:1;
  filter:drop-shadow(0 18px 60px rgba(120,90,255,.55));
}

.hcontent{
  position:relative;z-index:2;
  max-width:1280px;margin:0 auto;
  padding:0 72px;color:#fff;
  height:100%;display:flex;
  flex-direction:column;justify-content:center;
}
.heyebrow{
  font-size:10px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent);margin-bottom:14px;
}
.htitle{
  font-size:clamp(32px,4.6vw,60px);
  font-weight:700;line-height:1.04;
  letter-spacing:-.03em;margin-bottom:14px;
}
.hsub{
  font-size:15px;color:rgba(255,255,255,.6);
  max-width:360px;margin-bottom:26px;line-height:1.55;
}
.hcta{
  display:inline-flex;align-items:center;gap:6px;
  font-size:13px;font-weight:700;padding:12px 26px;
  border-radius:4px;letter-spacing:.03em;
  transition:transform .14s,background .13s;
}
.hcta.w{background:#fff;color:#000}
.hcta.w:hover{background:#e8e8e8;transform:translateY(-1px)}
.hcta.b{background:var(--accent);color:#fff}
.hcta.b:hover{background:var(--accent-dk);transform:translateY(-1px)}

.hdots{
  position:absolute;bottom:22px;right:32px;
  display:flex;align-items:center;gap:9px;z-index:5;
}
.hdot{
  width:34px;height:34px;border-radius:50%;
  background:transparent;border:1.5px solid rgba(255,255,255,.55);
  color:rgba(255,255,255,.9);
  font-size:13px;font-weight:600;line-height:1;
  font-family:var(--font);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;padding:0;
  transition:width .28s ease,background .2s,color .2s,border-color .2s;
}
.hdot:hover{border-color:#fff;color:#fff}
.hdot.on{
  width:52px;border-radius:999px;
  background:#fff;color:#111;border-color:#fff;
}

/* ══════════════════════════════════════════
   CATEGORY SLIDER (tarjetas con flechas)
══════════════════════════════════════════ */
.cats{
  border-bottom:1px solid var(--gray-border);
  padding:34px 0;
  background:var(--gray-bg);
}
.catslider{
  max-width:1280px;margin:0 auto;
  padding:0 24px;position:relative;
}
.cats-row{
  display:flex;gap:18px;
  overflow-x:auto;scroll-behavior:smooth;
  scrollbar-width:none;
  padding:10px 4px 16px;
}
.cats-row::-webkit-scrollbar{display:none}
.cat{
  flex:0 0 auto;width:250px;
  display:flex;flex-direction:column;
  background:#fff;border-radius:14px;
  padding:18px 18px 16px;
  transition:box-shadow .18s,transform .18s;
}
.cat:hover{
  box-shadow:0 10px 30px rgba(0,0,0,.10);
  transform:translateY(-3px);
}
.cat-img{
  height:190px;
  display:flex;align-items:center;justify-content:center;
}
.cat-img img{width:100%;height:100%;object-fit:contain}
.cat-foot{
  display:flex;align-items:center;justify-content:space-between;
  gap:10px;padding:16px 2px 0;
  min-height:50px;
}
.cat-lbl{font-size:16px;font-weight:700;letter-spacing:-.01em;color:var(--black)}
.cat-go{
  flex:none;width:34px;height:34px;border-radius:50%;
  background-color:var(--black);
  opacity:0;transform:scale(.5);
  transition:opacity .18s,transform .18s,background-color .18s;
  /* La flechita es un SVG y NO el carácter › que trae el HTML (ese queda
     oculto con font-size:0). Una letra se apoya en la línea base y lleva su
     propio espacio a los lados, así que el flex centraba la caja del glifo y
     no el dibujito: quedaba corrida. Y corregirlo a mano no alcanzaba, porque
     cada fuente lo dibuja distinto (SF en Mac, Inter en Windows) y el ajuste
     sólo podía quedar bien en una. En el SVG el trazo va centrado en el
     viewBox por construcción, así que queda igual en todos lados. */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.75 5.5 15.25 12 8.75 18.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:center;
  background-size:16px 16px;
  font-size:0;
}
.cat:hover .cat-go{opacity:1;transform:scale(1)}
.cat-go:hover{background-color:var(--accent)}
/* en táctiles no hay hover: flechitas y navegación quedan siempre visibles */
@media(hover:none){
  .cat-go{opacity:1;transform:scale(1)}
  .catnav,.offnav,.rvnav{opacity:1;pointer-events:auto}
}
/* flechas de navegación del carrusel: ocultas hasta pasar el mouse */
.catnav{
  position:absolute;top:125px;
  transform:translateY(-50%);
  width:44px;height:44px;border-radius:50%;
  background:#fff;border:1px solid var(--gray-border);
  color:var(--black);cursor:pointer;z-index:5;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 16px rgba(0,0,0,.12);
  transition:background .15s,transform .15s,opacity .18s;
  opacity:0;pointer-events:none;
}
.catslider:hover .catnav{opacity:1;pointer-events:auto}
.catnav:hover{background:var(--gray-bg);transform:translateY(-50%) scale(1.06)}
.catnav svg{width:20px;height:20px}
.catnav.prev{left:8px}
.catnav.next{right:8px}
@media(max-width:580px){
  .cat{width:200px;padding:14px 14px 12px}
  .cat-img{height:150px}
  .catnav{top:100px}
}

/* ══════════════════════════════════════════
   CARRUSEL DE OFERTAS (flyers)
══════════════════════════════════════════ */
.offers{position:relative}
.offers-row{
  display:flex;gap:16px;
  overflow-x:auto;scroll-behavior:smooth;
  scrollbar-width:none;padding:4px 2px;
}
.offers-row::-webkit-scrollbar{display:none}
.offer{
  flex:0 0 auto;width:380px;max-width:82vw;
  aspect-ratio:4/5;border-radius:18px;overflow:hidden;
  position:relative;color:#fff;
  display:flex;align-items:flex-end;justify-content:center;
  box-shadow:0 8px 26px rgba(0,0,0,.10);
  transition:transform .18s,box-shadow .18s;
}
.offer:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(0,0,0,.16)}
.offer img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* placeholders de degradado (mientras no haya flyer real) */
.offer.o1{background:linear-gradient(150deg,#6d28d9,#4361ff)}
.offer.o2{background:linear-gradient(150deg,#7c3aed,#9333ea)}
.offer.o3{background:linear-gradient(150deg,#2f6bff,#12d0c3)}
.offer.o4{background:linear-gradient(150deg,#4338ca,#7c3aed)}
.offer.o5{background:linear-gradient(150deg,#0071e3,#5b6cf5)}
.offer-tag{
  position:relative;z-index:2;margin-bottom:22px;
  font-size:15px;font-weight:700;letter-spacing:.02em;
  background:rgba(0,0,0,.28);padding:8px 16px;border-radius:999px;
}
.offnav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:44px;height:44px;border-radius:50%;
  background:#fff;border:1px solid var(--gray-border);
  color:var(--black);cursor:pointer;z-index:5;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 16px rgba(0,0,0,.14);
  transition:background .15s,transform .15s,opacity .18s;
  opacity:0;pointer-events:none;
}
.offers:hover .offnav{opacity:1;pointer-events:auto}
.offnav:hover{background:var(--gray-bg);transform:translateY(-50%) scale(1.06)}
.offnav svg{width:20px;height:20px}
.offnav.prev{left:-6px}
.offnav.next{right:-6px}
@media(max-width:580px){
  .offer{width:280px}
}

/* ══════════════════════════════════════════
   RESEÑAS DE GOOGLE
   El carrusel es propio y su CSS va inline en index.html (lo usa sólo el
   home). Acá queda nada más el alto mínimo de la sección.
══════════════════════════════════════════ */
.reviews-widget{min-height:60px}

/* ══════════════════════════════════════════
   DESTACADOS (mosaico bento)
══════════════════════════════════════════ */
.bento{
  display:grid;gap:16px;
  grid-template-columns:1.15fr 1fr 1fr;
  grid-template-rows:repeat(3,168px);
}
.b-air{grid-column:1;grid-row:1/4}
.b-mac{grid-column:2;grid-row:1/3}
.b-jbl{grid-column:3;grid-row:1}
.b-pencil{grid-column:3;grid-row:2}
.b-ipad{grid-column:2/4;grid-row:3}
.btile{
  position:relative;overflow:hidden;border-radius:16px;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:22px;color:#fff;
  background-size:cover;background-position:center;
  transition:transform .18s,box-shadow .18s;
}
.btile:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(0,0,0,.18)}
.btile::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.38))}
.btile>*{position:relative;z-index:2}
/* video o imagen oficial de fondo del tile */
.btile-media{
  position:absolute;inset:0;z-index:0 !important;
  width:100%;height:100%;object-fit:cover;
}
/* tiles claros: producto sobre fondo claro, texto oscuro y sin velo */
.btile.light{color:var(--black)}
.btile.light::after{background:none}
.btile.light .btile-btn{background:var(--black);color:#fff}
.btile-body{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.btile h3{font-size:22px;font-weight:700;letter-spacing:-.02em;line-height:1.1}
.btile-btn{background:#fff;color:#111;font-size:12.5px;font-weight:700;
  padding:9px 18px;border-radius:999px}
.btile:hover .btile-btn{background:var(--accent);color:#fff}
/* fondos por tile */
.b-air{background:#0a0a0c}
.b-mac{background:#0a0a0c}
.b-jbl{background:linear-gradient(150deg,#ff6a00,#c2330a)}
.b-jbl .btile-media{
  object-fit:contain;padding:14px 14px 40px;
  animation:jblfloat 4s ease-in-out infinite;
}
@keyframes jblfloat{
  0%,100%{transform:translateY(0) rotate(0deg)}
  50%{transform:translateY(-8px) rotate(-2deg)}
}
.b-pencil{background:#0a0a0c}
.b-ipad{background:#0a0a0c}
@media(max-width:760px){
  .bento{grid-template-columns:1fr 1fr;grid-template-rows:none}
  .b-air,.b-mac,.b-jbl,.b-pencil,.b-ipad{
    grid-column:auto;grid-row:auto;min-height:160px}
  .b-air,.b-ipad{grid-column:1/3}
}
.pbadge.agotado{background:#333;color:#fff}

/* ══════════════════════════════════════════
   SERVICIOS (carrusel imagen + texto)
══════════════════════════════════════════ */
/* Layout en 2 columnas: pila de fotos + texto */
.svcx2{
  display:grid;grid-template-columns:0.92fr 1fr;
  gap:52px;align-items:center;
}
/* Mazo de tarjetas que se baraja (estilo Artifact) */
.svcx2-stack{position:relative;aspect-ratio:1/1;width:100%}
.svcdeck-card{
  position:absolute;inset:0;border-radius:16px;
  border:8px solid #fff;
  background-size:cover;background-position:center;
  display:flex;align-items:center;justify-content:center;
  transform-origin:center;
  will-change:transform,opacity;
  transition:transform .55s cubic-bezier(.22,.61,.36,1),
             opacity .4s ease, box-shadow .55s ease;
  overflow:hidden;
}
.svcdeck-card span{font-size:120px;filter:drop-shadow(0 10px 24px rgba(0,0,0,.28))}
/* video de fondo de cada tarjeta del mazo */
.svcdeck-card video{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
  border-radius:8px;
}
/* posiciones del mazo: pos-0 = adelante, pos-3 = fondo */
.svcdeck-card.pos-0{transform:rotate(-1.6deg) translate(0,0)       scale(1);    z-index:40;opacity:1;box-shadow:0 26px 60px rgba(0,0,0,.24)}
.svcdeck-card.pos-1{transform:rotate(3.6deg)  translate(12px,12px) scale(.955); z-index:30;opacity:1;box-shadow:0 18px 42px rgba(0,0,0,.17)}
.svcdeck-card.pos-2{transform:rotate(-5deg)   translate(-8px,20px) scale(.915); z-index:20;opacity:1;box-shadow:0 14px 32px rgba(0,0,0,.14)}
.svcdeck-card.pos-3{transform:rotate(6deg)    translate(8px,28px)  scale(.88);  z-index:10;opacity:1;box-shadow:0 10px 24px rgba(0,0,0,.12)}
/* SIGUIENTE: la de arriba se levanta y se hunde DETRÁS del mazo (estilo Artifact) */
.svcdeck-card.toback{animation:svcToBack .6s cubic-bezier(.4,0,.2,1) forwards}
@keyframes svcToBack{
  0%  {transform:rotate(-1.6deg) translate(0,0)      scale(1);    z-index:60; box-shadow:0 26px 60px rgba(0,0,0,.24)}
  42% {transform:rotate(-2.6deg) translate(0,-13%)   scale(1.05); z-index:60; box-shadow:0 42px 82px rgba(0,0,0,.30)}
  43% {z-index:5}
  100%{transform:rotate(6deg)    translate(8px,28px) scale(.88);  z-index:5;  box-shadow:0 10px 24px rgba(0,0,0,.12)}
}
/* ANTERIOR: la del fondo se levanta y sube al frente (reverso) */
.svcdeck-card.tofront{animation:svcToFront .6s cubic-bezier(.4,0,.2,1) forwards}
@keyframes svcToFront{
  0%  {transform:rotate(6deg)    translate(8px,28px) scale(.88);  z-index:60; box-shadow:0 10px 24px rgba(0,0,0,.12)}
  55% {transform:rotate(-2.6deg) translate(0,-13%)   scale(1.05); z-index:60; box-shadow:0 42px 82px rgba(0,0,0,.30)}
  100%{transform:rotate(-1.6deg) translate(0,0)      scale(1);    z-index:60; box-shadow:0 26px 60px rgba(0,0,0,.24)}
}
/* reveal del texto al cambiar: fade + slide, con stagger título→descripción */
.svcx2-text .svcx-title{transition:opacity .34s ease, transform .34s cubic-bezier(.22,.61,.36,1)}
.svcx2-text .svcx-desc {transition:opacity .34s ease, transform .34s cubic-bezier(.22,.61,.36,1);transition-delay:.06s}
.svcx2-text.swap .svcx-title,
.svcx2-text.swap .svcx-desc{opacity:0;transform:translateY(16px);transition-duration:.2s;transition-delay:0s}
/* fondos placeholder */
.si-empresas{background:linear-gradient(150deg,#3a3f4c,#12141c)}
.si-canje{background:linear-gradient(150deg,#4361ff,#7c3aed)}
.si-pedido{background:linear-gradient(150deg,#4aa8ff,#8bd3ff)}
.si-envios{background:linear-gradient(150deg,#0071e3,#00c2a8)}
.svcx-eye{
  font-size:12px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gray-text);margin-bottom:14px;
}
.svcx-title{
  font-size:clamp(30px,4vw,46px);font-weight:700;
  letter-spacing:-.03em;line-height:1.05;margin-bottom:18px;
}
.svcx-desc{
  font-size:15.5px;line-height:1.65;color:#555;
  max-width:440px;margin-bottom:28px;
}
.svcx-nav{display:flex;gap:12px}
.svcx-nav button{
  width:46px;height:46px;border-radius:50%;
  background:#fff;border:1px solid var(--gray-border);
  color:var(--black);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .15s,transform .15s,border-color .15s;
}
.svcx-nav button:hover{background:var(--black);color:#fff;border-color:var(--black);transform:translateY(-1px)}
.svcx-nav svg{width:18px;height:18px}
@media(max-width:760px){
  .svcx2{grid-template-columns:1fr;gap:30px}
  .svcx2-stack{max-width:340px;margin:0 auto}
}

/* ══════════════════════════════════════════
   MARQUEE BAND (Poppins Bold azul)
══════════════════════════════════════════ */
.band{
  background:var(--gray-bg);
  padding:36px 0;overflow:hidden;
  border-top:1px solid var(--gray-border);
  border-bottom:1px solid var(--gray-border);
}
.band-track{
  display:flex;
  animation:mq 22s linear infinite;
  white-space:nowrap;
}
.bitem{
  display:inline-flex;align-items:center;
  padding:0 34px;
  font-size:clamp(30px,5vw,52px);
  font-weight:700;            /* Poppins Bold */
  letter-spacing:-.02em;line-height:1.5;
  color:var(--accent);        /* azul del sitio */
}
@keyframes mq{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ══════════════════════════════════════════
   SECTION SHARED
══════════════════════════════════════════ */
.wrap{max-width:1280px;margin:0 auto;padding:0 24px}
.sec{margin:60px 0}
.sechdr{
  display:flex;align-items:baseline;
  justify-content:space-between;margin-bottom:24px;
}
.sectitle{font-size:22px;font-weight:700;letter-spacing:-.03em}
.seclink{font-size:13px;font-weight:600;color:var(--accent)}
.seclink:hover{text-decoration:underline}

/* ══════════════════════════════════════════
   PRODUCT SLIDER (horizontal scroll)
══════════════════════════════════════════ */
.pslider{
  display:flex;gap:14px;
  overflow-x:auto;padding-bottom:4px;
  scrollbar-width:none;
}
.pslider::-webkit-scrollbar{display:none}
.pcard{
  border:1px solid var(--gray-border);border-radius:8px;
  overflow:hidden;cursor:pointer;background:var(--white);
  flex-shrink:0;width:220px;
  transition:box-shadow .2s,transform .2s;
  /* Desde que cada producto tiene su URL, la tarjeta es un <a> de verdad
     (así se indexa y se puede abrir en otra pestaña). Sin esto heredaría
     el celeste y el subrayado de los links. */
  display:block;text-decoration:none;color:inherit;
}
/* El filtro oculta con el atributo hidden, que el navegador resuelve con
   un display:none de baja prioridad: el display:block de arriba se lo comía
   y las tarjetas filtradas seguían a la vista. */
.pcard[hidden]{display:none}
.pcard:hover{
  box-shadow:0 8px 26px rgba(0,0,0,.1);
  transform:translateY(-3px);
}
.pimg{
  background:#fff;height:185px;padding:14px;
  display:flex;align-items:center;
  justify-content:center;font-size:64px;
}
.pimg img{width:100%;height:100%;object-fit:contain}
.pinfo{padding:13px}
.pbrand{
  font-size:10px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--gray-text);margin-bottom:3px;
}
.pname{font-size:13px;font-weight:600;margin-bottom:8px;line-height:1.3}
/* "2 colores · 2 capacidades": las opciones que hay que elegir en la ficha.
   Va en las tarjetas de un modelo con variantes, y explica el "Desde $…". */
.popts{font-size:12px;color:#8a8a8f;margin:-4px 0 8px}
.pprice{font-size:16px;font-weight:700;letter-spacing:-.02em}
.pold{
  font-size:11px;color:var(--gray-text);
  text-decoration:line-through;margin-left:4px;font-weight:400;
}
.pbadge{
  display:inline-block;font-size:9px;font-weight:700;
  padding:2px 6px;border-radius:3px;margin-bottom:5px;
  letter-spacing:.04em;
}
.pbadge.nuevo{background:#e8f4ff;color:var(--accent)}
.pbadge.oferta{background:#fff0f0;color:#c00}
.pbadge.usado{background:#f5f0e8;color:#7a5000}
.pbadge.stock{background:#f0fce8;color:#2a7a00}

/* ══════════════════════════════════════════
   SERVICES — 3 horizontal cards (Artifact style)
══════════════════════════════════════════ */
.svcgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.svc{
  border-radius:10px;padding:36px 30px;
  display:flex;flex-direction:column;gap:11px;
  cursor:pointer;transition:transform .18s;
  overflow:hidden;position:relative;
}
.svc:hover{transform:translateY(-3px)}
.svc.dark{background:var(--black);color:#fff}
.svc.blue{background:var(--accent);color:#fff}
.svc.light{background:var(--gray-bg);color:var(--black);
  border:1px solid var(--gray-border)}
.svc-eye{
  font-size:10px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;opacity:.55;
}
.svc h3{font-size:19px;font-weight:700;letter-spacing:-.02em}
.svc p{font-size:13px;line-height:1.6;opacity:.8}
.svc-ico{font-size:32px}
.svc-lnk{
  font-size:12.5px;font-weight:700;margin-top:4px;
  display:inline-flex;align-items:center;gap:4px;
}
.svc.dark .svc-lnk{color:rgba(255,255,255,.7)}
.svc.dark .svc-lnk:hover{color:#fff}
.svc.blue .svc-lnk{color:rgba(255,255,255,.85)}
.svc.light .svc-lnk{color:var(--accent)}

/* ══════════════════════════════════════════
   HOW TO BUY
══════════════════════════════════════════ */
.how{background:var(--gray-bg);padding:64px 24px}
.how-in{max-width:1100px;margin:0 auto;text-align:center}
.how h2{font-size:42px;font-weight:700;letter-spacing:-.03em;margin-bottom:48px}
.howgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.howstep{
  position:relative;overflow:hidden;cursor:pointer;
  background:linear-gradient(145deg,#7c3aed,#6d28d9);
  border-radius:16px;padding:28px 24px 32px;
  display:flex;flex-direction:column;align-items:flex-start;gap:14px;
  text-align:left;color:#fff;
  transition:transform .28s ease,box-shadow .28s ease;
}
.howstep>*{position:relative;z-index:1}
.howstep::before{
  content:"";position:absolute;top:0;left:0;
  width:55%;height:100%;z-index:2;pointer-events:none;
  background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.38),transparent 80%);
  transform:translateX(-150%) skewX(-18deg);
  transition:transform .75s ease;
}
.howstep:hover{
  transform:translateY(-6px);
  box-shadow:0 18px 40px rgba(109,40,217,.38);
}
.howstep:hover::before{transform:translateX(350%) skewX(-18deg)}
.hownum{
  width:44px;height:44px;background:#fff;color:#7c3aed;
  border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:18px;font-weight:700;flex-shrink:0;
}
.howstep h3{font-size:17px;font-weight:700;line-height:1.2}
.howstep p{font-size:13px;line-height:1.6;opacity:.85}

/* ══════════════════════════════════════════
   TRUST BAR (4 items, Artifact style)
══════════════════════════════════════════ */
.trust{
  border-top:1px solid var(--gray-border);
  border-bottom:1px solid var(--gray-border);
  padding:28px 24px;
}
.trustgrid{
  max-width:1280px;margin:0 auto;
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:0;
}
.titem{
  display:flex;flex-direction:column;align-items:center;
  gap:4px;text-align:center;padding:16px 20px;
  border-right:1px solid var(--gray-border);
}
.titem:last-child{border-right:none}
.tico{font-size:24px;margin-bottom:4px}
.titem strong{font-size:13px;font-weight:700;color:var(--black)}
.titem span{font-size:12px;color:var(--gray-text)}

/* ══════════════════════════════════════════
   FAQ
══════════════════════════════════════════ */
.faqsec{padding:60px 0}
.faqgrid{
  display:grid;grid-template-columns:1fr 1.15fr;
  gap:52px;align-items:start;
}
.faq-head h2{font-size:38px;font-weight:700;letter-spacing:-.03em;margin-bottom:14px}
.faq-head .fsub{font-size:14px;color:var(--gray-text);line-height:1.6}
.faq-panel{background:var(--gray-bg);border-radius:16px;padding:6px 28px}
.faqitem{border-bottom:1px solid var(--gray-border)}
.faqitem:last-child{border-bottom:none}
.faqbtn{
  width:100%;background:none;border:none;text-align:left;
  padding:19px 0;font-size:14.5px;font-weight:600;
  cursor:pointer;display:flex;justify-content:space-between;
  align-items:center;gap:16px;font-family:var(--font);
  color:var(--black);transition:color .13s;
}
.faqbtn:hover{color:var(--accent)}
.faqico{
  flex:none;width:28px;height:28px;border-radius:50%;
  background:var(--white);border:1px solid var(--gray-border);
  color:var(--black);
  display:flex;align-items:center;justify-content:center;
  transition:transform .25s ease,background .15s,color .15s,border-color .15s;
}
.faqico svg{width:14px;height:14px}
.faqbtn:hover .faqico{border-color:var(--accent);color:var(--accent)}
.faqitem.open .faqico{transform:rotate(180deg);background:var(--black);color:#fff;border-color:var(--black)}
.faqa{
  display:none;padding:0 0 18px;
  font-size:13.5px;color:var(--gray-text);line-height:1.7;
}
.faqa ul{margin:8px 0 0 18px;display:flex;flex-direction:column;gap:4px}
.faqitem.open .faqa{display:block}
@media(max-width:760px){
  .faqgrid{grid-template-columns:1fr;gap:22px}
  .faq-head h2{font-size:28px}
}

/* ══════════════════════════════════════════
   BENEFICIOS (3 columnas)
══════════════════════════════════════════ */
.feat3{
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
  padding:34px 0 10px;text-align:center;
}
.feat3-item{display:flex;flex-direction:column;align-items:center;gap:10px;padding:0 24px}
.feat3-ico{width:30px;height:30px;color:var(--black)}
.feat3-item h3{font-size:16px;font-weight:700;letter-spacing:-.01em}
.feat3-item p{font-size:13.5px;color:var(--gray-text);line-height:1.6;max-width:290px}
@media(max-width:760px){
  .feat3{grid-template-columns:1fr;gap:30px}
}

/* ══════════════════════════════════════════
   PLAN CANJE (réplica "usados" de Artifact)
══════════════════════════════════════════ */
/* Hero */
.pc-hero{position:relative;overflow:hidden;text-align:center;color:#fff;padding:88px 24px;
  background:linear-gradient(150deg,#0071e3 0%,#00a3c4 55%,#00c2a8 100%)}
.pc-hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(820px 380px at 50% -25%,rgba(255,255,255,.28),transparent 62%)}
.pc-hero-in{position:relative;z-index:1;max-width:760px;margin:0 auto}
.pc-eyebrow{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;opacity:.9;margin-bottom:16px}
.pc-hero h1{font-size:clamp(32px,6vw,56px);font-weight:700;letter-spacing:-.03em;line-height:1.04}
.pc-hero .pc-sub{margin:18px auto 0;max-width:520px;font-size:clamp(15px,2.3vw,18px);line-height:1.6;opacity:.94}
.pc-cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:32px}
.pc-btn{display:inline-flex;align-items:center;gap:9px;padding:15px 30px;border-radius:999px;
  font-weight:700;font-size:15px;transition:transform .15s ease,box-shadow .2s ease,background .2s ease;
  /* sirve tanto para <a> como para <button> (el "Cotizá tu equipo" del hero
     abre el formulario, así que es un <button>): reset del estilo nativo */
  border:none;cursor:pointer;font-family:var(--font);text-decoration:none}
.pc-btn svg{width:20px;height:20px}
.pc-btn-wa{background:#25d366;color:#fff;box-shadow:0 12px 30px rgba(37,211,102,.4)}
.pc-btn-wa:hover{transform:translateY(-2px);box-shadow:0 16px 36px rgba(37,211,102,.5)}

/* Secciones claras estilo Artifact (mismo gris) */
.pc-sec{padding:70px 24px;background:#ededed}
.pc-sec-in{max-width:1120px;margin:0 auto}
.pc-head{text-align:center;margin-bottom:48px}
.pc-head h2{font-size:clamp(26px,4vw,38px);font-weight:700;letter-spacing:-.03em;color:var(--black)}
.pc-head p{margin:12px auto 0;max-width:540px;font-size:15px;color:#555;line-height:1.6}

/* ── 3 pasos con iconos violeta de línea ── */
.pc-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;max-width:1080px;margin:0 auto;text-align:center}
.pc-step{display:flex;flex-direction:column;align-items:center;gap:18px;padding:0 14px}
.pc-step-ico{width:62px;height:62px;flex-shrink:0}
.pc-step h3{font-size:22px;font-weight:700;letter-spacing:-.02em;color:var(--black)}
.pc-step p{font-size:14.5px;line-height:1.65;color:#333;max-width:290px;margin:0 auto}
.pc-step p a{color:var(--accent);text-decoration:underline;font-weight:600}
@media(max-width:760px){.pc-steps{grid-template-columns:1fr;gap:46px}}

/* ── Categorías: tarjetas cuadradas con scroll horizontal ── */
.pc-catwrap{max-width:1200px;margin:0 auto}
.pc-cattitle{font-size:clamp(24px,3.4vw,32px);font-weight:700;letter-spacing:-.03em;color:var(--black);
  padding:0 8px;margin-bottom:26px}
.pc-catscroll{display:flex;gap:20px;overflow-x:auto;padding:4px 8px 16px;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.pc-catscroll::-webkit-scrollbar{height:6px}
.pc-catscroll::-webkit-scrollbar-thumb{background:#bfbfbf;border-radius:6px}
.pc-catcard{flex:0 0 auto;width:min(300px,72vw);aspect-ratio:1/1;border-radius:14px;
  position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;
  scroll-snap-align:start;background:linear-gradient(160deg,#c6c6ca,#a7a7ac);
  background-size:cover;background-position:center;transition:transform .2s ease,box-shadow .2s ease}
.pc-catcard:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(0,0,0,.16)}
.pc-catcard b{position:relative;z-index:1;font-size:clamp(24px,3vw,32px);font-weight:700;
  color:#fff;letter-spacing:-.02em;text-shadow:0 2px 14px rgba(0,0,0,.4)}

/* ── Tabla comparativa "Con / Sin" ── */
.cmp{position:relative;max-width:760px;margin:0 auto}
.cmp table{width:100%;border-collapse:separate;border-spacing:0 10px;table-layout:fixed}
.cmp col.c-lbl{width:44%}
.cmp col.c-col{width:28%}
.cmp thead th{padding-bottom:8px;vertical-align:bottom}
.cmp-pill{display:inline-flex;align-items:center;justify-content:center;background:#fff;
  border-radius:999px;padding:12px 26px;min-height:58px;box-shadow:0 10px 26px rgba(0,0,0,.12)}
.cmp-pill img{height:34px;width:auto;display:block}
.cmp-pill.bad{font-size:36px;line-height:1}
.cmp-colname{display:block;margin-top:16px;font-size:17px;font-weight:700;color:var(--black);text-align:center}
.cmp tbody td{padding:17px 8px}
.cmp .lbl{font-size:16px;font-weight:600;color:var(--black);text-align:left;padding-left:22px}
.cmp .v{text-align:center}
.cmp tr.stripe td{background:rgba(0,0,0,.055)}
.cmp tr.stripe td:first-child{border-radius:16px 0 0 16px}
.cmp tr.stripe td:last-child{border-radius:0 16px 16px 0}
.cmp-check{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;
  border-radius:50%;background:linear-gradient(145deg,#7c3aed,#5b7cf0);color:#fff}
.cmp-check svg{width:16px;height:16px}
.cmp-x{display:inline-flex;color:#e5484d}
.cmp-x svg{width:20px;height:20px}
/* marco violeta-azul que resalta la columna "Con" (solo borde, interior transparente) */
.cmp-highlight{position:absolute;top:0;bottom:0;left:calc(44% - 8px);width:calc(28% + 16px);
  border-radius:34px;pointer-events:none;border:2.5px solid transparent;
  background:linear-gradient(transparent,transparent) padding-box,
             linear-gradient(180deg,#7c3aed,#4d7cff) border-box}
@media(max-width:620px){
  .cmp .lbl{font-size:13px;padding-left:8px}
  .cmp-colname{font-size:12.5px}
  .cmp-pill{padding:9px 12px;min-height:46px}
  .cmp-pill img{height:24px}
  .cmp-pill.bad{font-size:26px}
  .cmp-highlight{border-radius:26px}
}

/* CTA final */
.pc-final{background:var(--black);color:#fff;text-align:center;padding:66px 24px}
.pc-final h2{font-size:clamp(24px,4vw,36px);font-weight:700;letter-spacing:-.03em}
.pc-final p{margin:14px auto 0;max-width:460px;font-size:15px;opacity:.72;line-height:1.6}
.pc-final .pc-cta-row{margin-top:28px}

/* ══════════════════════════════════════════
   NEWSLETTER
══════════════════════════════════════════ */
.nl{background:var(--black);color:#fff;padding:54px 24px;text-align:center}
.nl h2{font-size:24px;font-weight:700;letter-spacing:-.03em;margin-bottom:7px}
.nl p{font-size:13.5px;opacity:.6;margin-bottom:24px}
.nlform{display:flex;justify-content:center;max-width:400px;margin:0 auto}
.nlform input{
  flex:1;padding:12px 15px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.08);color:#fff;
  font-size:13.5px;border-radius:4px 0 0 4px;
  outline:none;font-family:var(--font);
}
.nlform input::placeholder{color:rgba(255,255,255,.35)}
.nlform input:focus{border-color:var(--accent)}
.nlform button{
  background:var(--accent);color:#fff;border:none;
  padding:12px 20px;font-size:12px;font-weight:700;
  cursor:pointer;border-radius:0 4px 4px 0;
  font-family:var(--font);letter-spacing:.05em;
  transition:background .13s;
}
.nlform button:hover{background:var(--accent-dk)}

/* ══════════════════════════════════════════
   FOOTER
══════════════════════════════════════════ */
footer{background:#080808;color:rgba(255,255,255,.62);padding:50px 24px 26px}
.ftinner{max-width:1280px;margin:0 auto}
.ftcols{
  display:grid;grid-template-columns:2fr 1fr 1fr 1fr;
  gap:36px;padding-bottom:34px;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.ftbrand .logo{color:#fff;margin-bottom:11px;font-size:19px}
.ftbrand p{font-size:12.5px;line-height:1.65;max-width:240px}
.ftsocial{display:flex;gap:9px;margin-top:16px}
.ftsocial a{
  width:38px;height:38px;
  border:1px solid rgba(255,255,255,.14);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,.72);
  transition:border-color .13s,color .13s,background .13s;
}
.ftsocial a svg{width:18px;height:18px}
.ftsocial a:hover{border-color:var(--accent);color:#fff;background:var(--accent)}
.ftcol h4{
  font-size:11px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:#fff;margin-bottom:12px;
}
.ftcol ul{list-style:none;display:flex;flex-direction:column;gap:7px}
.ftcol ul li a{font-size:12.5px;transition:color .13s}
.ftcol ul li a:hover{color:#fff}
.ftbot{
  padding-top:22px;display:flex;
  justify-content:space-between;align-items:center;
  font-size:11.5px;opacity:.38;flex-wrap:wrap;gap:6px;
}

/* ══════════════════════════════════════════
   WHATSAPP FAB
══════════════════════════════════════════ */
.wabtn{
  position:fixed;bottom:22px;right:22px;
  background:#25D366;color:#fff;border-radius:50%;
  width:52px;height:52px;
  display:flex;align-items:center;justify-content:center;
  font-size:24px;z-index:1000;
  box-shadow:0 4px 18px rgba(37,211,102,.38);
  transition:transform .18s,box-shadow .18s;
}
.wabtn:hover{transform:scale(1.1);box-shadow:0 6px 26px rgba(37,211,102,.52)}

/* ══════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════ */
@media(max-width:960px){
  .howgrid{grid-template-columns:repeat(2,1fr)}
  .svcgrid{grid-template-columns:1fr}
  .trustgrid{grid-template-columns:repeat(2,1fr)}
  .ftcols{grid-template-columns:1fr 1fr;gap:24px}
  nav{display:none}
}
@media(max-width:580px){
  .hero{height:360px}
  .hcontent{padding:0 22px}
  .htitle{font-size:27px}
  .ftcols{grid-template-columns:1fr}
  .cats-row{justify-content:flex-start}
}

.logo-link { display:flex; align-items:center; flex-shrink:0; }
.logo-img  { height:120px; width:auto; display:block;
             filter:brightness(0); /* white PNG → black */ }
.logo-footer .logo-img { filter:brightness(0) invert(1); /* black → white */ margin-bottom:11px; }

/* ══ MEGA MENU — estilo Apple ══
   Ya no se abre con :hover puro: lo maneja main.js, porque apple.com hace dos
   cosas que el CSS solo no puede:
     1. la altura del panel se interpola (baja y sube como una cortina), y
     2. si pasás de un apartado a otro con el menú YA abierto, no se cierra:
        la altura se acomoda sola y el contenido hace cross-fade, sin repetir
        la cascada (esa solo corre en la primera apertura).
   El HTML de las 14 páginas no cambia: el JS mueve los .mega que ya existen
   adentro de un único .mega-stage y crea el scrim. Si el JS no corre, más
   abajo está el fallback :hover de siempre. */

/* fondo: la página de atrás queda desenfocada, como en apple.com.
   z-index 199 = debajo del header (300), así el header nunca se desenfoca. */
.mega-scrim{
  position:fixed;inset:0;z-index:199;
  background:rgba(250,250,250,.25);
  -webkit-backdrop-filter:saturate(150%) blur(16px);
  backdrop-filter:saturate(150%) blur(16px);
  opacity:0;visibility:hidden;
  transition:opacity .26s ease, visibility 0s linear .26s;
}
.mega-scrim.on{
  opacity:1;visibility:visible;
  transition:opacity .3s ease, visibility 0s;
}

/* el "escenario": lo único que anima altura. Anclado al header (que es sticky,
   así que hace de contenedor) con top:calc(100% + 1px) para quedar siempre
   justo debajo, con o sin barra de anuncios arriba. */
.mega-stage{
  position:absolute;
  top:calc(100% + 1px); /* +1px = el border-bottom del header */
  left:0;right:0;
  z-index:250;
  height:0;
  overflow:hidden;
  background:#f0f0f0;
  border-bottom:1px solid #ddd;
  visibility:hidden;
  /* cerrar: más rápido que abrir, para que no se sienta pesado */
  transition:height .2s cubic-bezier(.32,.72,0,1),
             visibility 0s linear .2s;
}
.mega-stage.on{
  /* .22s: en la referencia el panel tarda 0,14s en bajar (3,86 → 4,00 de la
     3ª grabación). Estaba en .38s y era la mitad de la lentitud. */
  visibility:visible;
  transition:height .22s cubic-bezier(.32,.72,0,1), visibility 0s;
}
/* saltar de un apartado a otro: la altura se acomoda más rápido */
.mega-stage.on.swap{
  transition:height .22s cubic-bezier(.32,.72,0,1), visibility 0s;
}

/* los paneles: todos apilados en el mismo lugar dentro del escenario.
   visibility:hidden (no display:none) para que el JS pueda medir su alto. */
.mega{
  position:absolute;
  top:0;left:0;right:0;
  padding:40px 0 48px;
  opacity:0;visibility:hidden;
  transition:opacity .14s ease, visibility 0s linear .14s;
}
.mega.on{
  opacity:1;visibility:visible;
  transition:opacity .22s ease, visibility 0s;
}

/* ── Fallback sin JS ──
   Si main.js no corrió, el panel sigue colgando del apartado: se abre con
   :hover como antes y sin animación de altura, pero se abre. */
.ni > .mega{
  top:calc(100% + 1px);
  background:#f0f0f0;
  border-top:1px solid #ddd;
  border-bottom:1px solid #ddd;
}
.ni:hover > .mega{ opacity:1;visibility:visible; }
.ni:hover > .mega .mega-col > *{ opacity:1; }

.mega-inner {
  max-width:1280px;margin:0 auto;
  padding:0 48px;
  display:grid;
  gap:48px;
}
.mega-inner.cols2 { grid-template-columns: repeat(2,1fr); }
.mega-inner.cols3 { grid-template-columns: repeat(3,1fr); }
.mega-inner.cols4 { grid-template-columns: repeat(4,1fr); }
.mega-inner.cols5 { grid-template-columns: repeat(5,1fr); gap:32px; }

/* ── Panel de Categorías (drawer lateral izquierdo) ── */
.catpanel-overlay {
  position:fixed; inset:0;
  background:rgba(0,0,0,.45);
  z-index:300;
  opacity:0; visibility:hidden;
  transition:opacity .3s ease;
}
.catpanel-overlay.open { opacity:1; visibility:visible; }
.catpanel {
  position:fixed; top:0; left:0; bottom:0;
  width:580px; max-width:88vw;
  background:#fff;
  z-index:310;
  transform:translateX(-100%);
  transition:transform .32s cubic-bezier(.4,0,.2,1);
  padding:26px 44px 44px;
  overflow-y:auto;
  box-shadow:2px 0 28px rgba(0,0,0,.14);
}
.catpanel.open { transform:translateX(0); }
.catpanel-close {
  width:52px; height:52px; border-radius:50%;
  border:1px solid #ddd; background:#fff; color:#111;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:30px;
  transition:background .2s ease;
}
.catpanel-close:hover { background:#f4f4f4; }
.catpanel-close svg { width:20px; height:20px; }
.catpanel-list { display:flex; flex-direction:column; }
.catpanel-list a {
  display:flex; align-items:center; justify-content:space-between;
  padding:17px 2px;
  font-size:1.75rem; font-weight:700; line-height:1.15;
  color:#111; text-decoration:none;
  border-bottom:1px solid #f1f1f1;
}
.catpanel-list a:hover { color:var(--accent); }
.catpanel-arrow {
  flex:none;
  width:30px; height:30px; border-radius:50%;
  background:#f0f0f0; color:#111;
  display:flex; align-items:center; justify-content:center;
  font-size:1.15rem; font-weight:600;
}
.catpanel-list a:hover .catpanel-arrow { background:var(--accent); color:#fff; }
body.cats-open { overflow:hidden; }
@media (max-width:600px){
  .catpanel { padding:22px 26px 40px; }
  .catpanel-list a { font-size:1.4rem; padding:15px 2px; }
}

.mega-col {}
.mega-col-label {
  font-size:12px;font-weight:500;
  color:#999;letter-spacing:.01em;
  margin-bottom:16px;
}
.mega-col a {
  display:block;
  font-size:18px;font-weight:700;
  color:var(--black);line-height:1.2;
  padding:6px 0;
}
.mega-col a:hover { color:var(--accent); }
.mega-col a.small {
  font-size:14px;font-weight:500;color:#555;
}
.mega-col a.small:hover { color:var(--accent); }

/* ── Entrada en cascada de los links del mega menú ──
   Como el theme Artifact (grabación de Ricardo del 21/7): la ola baja FILA
   POR FILA y las columnas van sincronizadas — en el cuadro 8,05s "Ver todo"
   y "Arquitectura" están las dos negras, "Asus" y "Diseño" las dos a medias.
   Y es solo fade: el texto NO se desliza (el interlineado se mantiene parejo
   en 36/35px durante toda la entrada).
   El retardo lo calcula main.js y lo deja en --d.

   Los tiempos salen de medir la 3ª grabación cuadro a cuadro: la fila 1
   aparece a los 4,06s, la 2 a los 4,10, la 3 a los 4,13, la 4 a los 4,16
   (paso de 0,035s) y a los 4,30 ya está todo. O sea ~0,26s de punta a punta.
   Antes teníamos paso de 0,05s y fundido de 0,22s = 0,52s: el doble, y por
   eso se sentía lento. */
.mega-col > * {
  opacity:0;
  transition:opacity .1s ease, color .12s;
}
.mega.on .mega-col > * {
  opacity:1;
  transition:opacity .13s ease, color .12s;
  transition-delay:var(--d, 0s);
}

/* Saltando de un apartado a otro con el menú abierto: Apple NO repite la
   cascada, solo cruza el contenido. Va después de los nth-child a propósito:
   misma especificidad, gana el último. */
.mega.on.swap .mega-col > * {
  transition:opacity .2s ease, transform .2s ease, color .12s;
  transition-delay:0s !important;
}

@media (prefers-reduced-motion:reduce){
  .mega-stage, .mega-stage.on, .mega-stage.on.swap,
  .mega-scrim, .mega-scrim.on,
  .mega, .mega.on, .mega-col > *, .mega.on .mega-col > * {
    transition-duration:0s !important;
    transition-delay:0s !important;
    transform:none !important;
  }
}

/* override old small dropdown.
   La segunda regla es para después de que el JS se lleva el .mega afuera
   del .ni: ahí :has(.mega) deja de matchear, pero la clase queda. */
.ni:has(.mega) .dd,
.ni.has-mega .dd { display:none !important; }

/* ══════════════════════════════════════════
   CATÁLOGO CON FILTROS (barra lateral + grilla)
   Se usa en el apartado Samsung de celulares.html.
   El filtrado lo hace main.js leyendo los data-* de cada .pcard.
══════════════════════════════════════════ */
.ctlg{
  display:grid;
  grid-template-columns:232px 1fr;
  gap:40px;
  align-items:start;
  margin-top:26px;
}

/* ── barra lateral ── */
.ctlg-side{position:sticky;top:120px}
.ctlg-side-hdr{
  display:flex;align-items:center;justify-content:space-between;
  padding-bottom:14px;margin-bottom:4px;
  font-size:14px;font-weight:600;color:var(--black);
}
.ctlg-side-hdr span{display:flex;align-items:center;gap:9px}
.ctlg-side-hdr svg{width:17px;height:17px}
.ctlg-limpiar{
  background:none;border:none;padding:0;cursor:pointer;
  font-family:var(--font);font-size:12.5px;font-weight:600;
  color:var(--accent);text-decoration:underline;
}

.ctlg-gr{border-top:1px solid #e6e6e6}
.ctlg-gr-btn{
  width:100%;display:flex;align-items:center;justify-content:space-between;
  padding:16px 2px;background:none;border:none;cursor:pointer;
  font-family:var(--font);font-size:14px;font-weight:600;color:var(--black);
  text-align:left;
}
/* el caret va dentro de un círculo gris: el padding lo achica ópticamente
   sin tocar el viewBox, y el border-box evita que el círculo crezca */
.ctlg-gr-caret{
  width:26px;height:26px;flex-shrink:0;color:#4a4a4a;
  box-sizing:border-box;padding:9px 7px;
  background:#efefef;border-radius:50%;
  transition:transform .22s ease,background .15s;
}
.ctlg-gr-btn:hover .ctlg-gr-caret{background:#e2e2e2}
.ctlg-gr-btn[aria-expanded="false"] .ctlg-gr-caret{transform:rotate(-90deg)}
/* grupo abierto: el círculo del caret se pone oscuro, como en la referencia */
.ctlg-gr-btn[aria-expanded="true"] .ctlg-gr-caret{background:#111;color:#fff}
.ctlg-gr-btn[aria-expanded="true"]:hover .ctlg-gr-caret{background:#000}
/* el cuerpo se abre y cierra con una altura interpolada, la pone main.js */
.ctlg-gr-body{overflow:hidden;transition:height .24s cubic-bezier(.32,.72,0,1)}
.ctlg-gr-body-in{padding-bottom:14px}

.ctlg-opt{
  display:flex;align-items:center;gap:10px;
  padding:7px 2px;cursor:pointer;
  font-size:13.5px;color:#333;
}
.ctlg-opt:hover{color:var(--black)}
.ctlg-opt input{
  appearance:none;-webkit-appearance:none;
  width:17px;height:17px;flex-shrink:0;margin:0;
  border:1.5px solid #ccc;border-radius:4px;background:#fff;
  cursor:pointer;position:relative;
  transition:border-color .15s,background .15s;
}
.ctlg-opt input:hover{border-color:#999}
.ctlg-opt input:checked{background:var(--black);border-color:var(--black)}
.ctlg-opt input:checked::after{
  content:'';position:absolute;left:5px;top:1.5px;
  width:4px;height:9px;border:solid #fff;border-width:0 2px 2px 0;
  transform:rotate(45deg);
}
.ctlg-opt span{flex:1}
.ctlg-opt em{font-style:normal;font-size:12px;color:#aaa}

/* ── filtro de Precio: slider de dos manijas + campos mín/máx ──
   Los topes los calcula main.js desde los precios del catálogo, así el
   mismo markup sirve para todas las páginas sin números escritos a mano. */
.ctlg-precio{padding:12px 3px 4px}
.ctlg-slider{position:relative;height:24px}
.ctlg-slider-track{position:absolute;top:10px;left:0;right:0;height:4px;background:#dcdcdc;border-radius:2px}
.ctlg-slider-fill{position:absolute;top:10px;height:4px;background:#111;border-radius:2px}
/* los dos <input range> van superpuestos y transparentes: se ve el track de
   arriba y sólo sus manijas reciben el mouse (pointer-events por manija) */
.ctlg-slider input[type=range]{
  position:absolute;top:0;left:0;width:100%;height:24px;margin:0;
  background:none;pointer-events:none;-webkit-appearance:none;appearance:none;
}
.ctlg-slider input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;pointer-events:auto;cursor:grab;
  width:18px;height:18px;border-radius:50%;background:#111;border:2px solid #fff;
  box-shadow:0 1px 4px rgba(0,0,0,.28);
}
.ctlg-slider input[type=range]::-moz-range-thumb{
  pointer-events:auto;cursor:grab;
  width:18px;height:18px;border-radius:50%;background:#111;border:2px solid #fff;
  box-shadow:0 1px 4px rgba(0,0,0,.28);
}
.ctlg-slider input[type=range]:active::-webkit-slider-thumb{cursor:grabbing}
.ctlg-precio-campos{display:flex;align-items:center;gap:10px;margin-top:16px}
.ctlg-precio-campo{
  flex:1;display:flex;align-items:center;gap:5px;
  border:1.5px solid #ddd;border-radius:9px;padding:9px 12px;
}
.ctlg-precio-campo:focus-within{border-color:#111}
.ctlg-precio-campo span{color:#aaa;font-size:14px}
.ctlg-precio-campo input{
  width:100%;min-width:0;border:none;outline:none;background:none;
  font-family:var(--font);font-size:14px;color:var(--black);text-align:right;
  -moz-appearance:textfield;appearance:textfield;
}
.ctlg-precio-campo input::-webkit-outer-spin-button,
.ctlg-precio-campo input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.ctlg-precio-campos em{font-style:normal;color:#888;font-size:13px}

/* ── barra de arriba y grilla ── */
.ctlg-barra{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;margin-bottom:22px;min-height:34px;
}
.ctlg-conteo{font-size:13.5px;color:#777}
.ctlg-orden{display:flex;align-items:center;gap:8px;font-size:13.5px;color:#777}
.ctlg-orden select{
  font-family:var(--font);font-size:13.5px;font-weight:600;color:var(--black);
  border:1px solid #ddd;border-radius:999px;
  padding:8px 34px 8px 14px;background:#fff;cursor:pointer;
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none' stroke='%23111' stroke-width='1.8'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;
}
.ctlg-orden select:focus{outline:none;border-color:#999}

.ctlg-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}
.ctlg-grid .pcard{width:auto;min-width:0}
.ctlg-vacio{margin-top:30px;color:#888;font-size:14px}

/* botón de filtros: solo aparece en pantallas chicas */
.ctlg-abrir{
  display:none;align-items:center;gap:9px;
  margin-bottom:18px;padding:11px 18px;
  font-family:var(--font);font-size:14px;font-weight:600;color:var(--black);
  background:#fff;border:1px solid #ddd;border-radius:999px;cursor:pointer;
}
.ctlg-abrir svg{width:17px;height:17px}

@media(max-width:1000px){
  .ctlg-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
  .ctlg{grid-template-columns:1fr;gap:0}
  .ctlg-abrir{display:inline-flex}
  .ctlg-side{
    position:static;
    overflow:hidden;height:0;
    transition:height .26s cubic-bezier(.32,.72,0,1);
  }
  .ctlg-side.abierta{height:auto;margin-bottom:26px}
  .ctlg-barra{flex-wrap:wrap;gap:10px}
}
@media(max-width:520px){
  .ctlg-grid{grid-template-columns:1fr}
}

/* ── Secciones de categoría (esqueleto navegable) ── */
.catsec{scroll-margin-top:110px}
.catsec .sub{scroll-margin-top:110px;margin-top:26px}
.catsec .sub:first-of-type{margin-top:18px}
.catsec .sub-title{
  font-size:17px;font-weight:700;color:var(--black);
  margin-bottom:6px;padding-bottom:6px;border-bottom:1px solid var(--gray-border);
}
.catsec .soon{color:var(--gray-text);font-size:15px}
.catsec .sublist{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.catsec .sublist span{
  font-size:13px;color:var(--gray-text);
  background:var(--gray-bg);border:1px solid var(--gray-border);
  border-radius:999px;padding:4px 12px;
}

/* ── migas: de la página de marca de vuelta a Celulares ── */
.ctlg-crumb{font-size:13px;color:var(--gray-text);margin:-6px 0 4px}
.ctlg-crumb a{color:var(--gray-text);text-decoration:none}
.ctlg-crumb a:hover{color:var(--black);text-decoration:underline}
.ctlg-crumb span{margin:0 6px;color:#c4c4c4}

/* ── atajos a cada marca, arriba del catálogo unificado ── */
.marcanav{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 4px}
.marcanav a{
  display:flex;flex-direction:column;gap:2px;
  padding:11px 18px;min-width:132px;
  border:1px solid var(--gray-border);border-radius:12px;
  text-decoration:none;background:#fff;
  transition:border-color .15s,box-shadow .15s,transform .15s;
}
.marcanav a:hover{
  border-color:#c9c9c9;transform:translateY(-2px);
  box-shadow:0 4px 14px rgba(0,0,0,.07);
}
.marcanav span{font-size:15px;font-weight:700;color:var(--black)}
.marcanav em{font-style:normal;font-size:12.5px;color:var(--gray-text)}

/* ── Motorola: todavía sin equipos cargados ── */
.moto-soon{margin-top:22px;max-width:560px}
.moto-soon .soon{color:var(--gray-text);font-size:15px;line-height:1.55}
.moto-soon .soon-sub{color:var(--gray-text);font-size:14px;line-height:1.55;margin-top:8px}
.btn-wa{
  display:inline-block;margin-top:16px;padding:11px 22px;
  background:var(--black);color:#fff;text-decoration:none;
  border-radius:999px;font-size:14px;font-weight:600;
  transition:opacity .15s;
}
.btn-wa:hover{opacity:.85}

/* ==== Hero estilo Artifact (Tecno Libres) ==== */
.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(circle at 2px 2px,rgba(255,255,255,.10) 1.4px,transparent 2px) 0 0/32px 32px;
  -webkit-mask:linear-gradient(to left,#000,transparent 58%);mask:linear-gradient(to left,#000,transparent 58%);opacity:.6}
.hbadge{display:inline-flex;align-items:center;gap:7px;align-self:flex-start;
  font-size:12px;font-weight:700;letter-spacing:.01em;color:#fff;line-height:1;
  padding:8px 15px;border-radius:999px;margin-bottom:16px;
  background:linear-gradient(90deg,#7c3aed,#2f6bff);
  box-shadow:0 8px 24px rgba(90,70,255,.45)}
.htitle .hl{background:linear-gradient(90deg,#a9b8ff,#d0aaff);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hcta.grad{align-self:flex-start;background:linear-gradient(90deg,#7c3aed,#2f6bff);color:#fff;border-radius:999px;
  padding:13px 30px;box-shadow:0 10px 28px rgba(90,70,255,.42)}
.hcta.grad:hover{filter:brightness(1.09);transform:translateY(-1px)}
@media(max-width:640px){.hdeco{font-size:120px;right:2%}.hbadge{font-size:10px;padding:6px 12px}}
/* Grid de accesos en la página Categorías */
.catgrid{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}

/* ══ PÁGINA DE PRODUCTO  /products/<slug> ══════════════════════════
   Las genera deploy/build.js a partir del catálogo de tienda.js.
   Es la misma ficha que muestra el panel de tienda.js (prefijo tls-),
   pero como página propia: acá tiene URL, la indexa Google y se puede
   mandar por WhatsApp. Prefijo prod- para no chocar con .pcard, que
   son las tarjetas de la grilla. */
.prod{display:grid;grid-template-columns:1.1fr 1fr;gap:44px;align-items:start;margin-top:22px}
.prod-gal{background:var(--gray-bg);border-radius:20px;padding:30px;position:sticky;top:96px}
.prod-galmain{height:420px;display:flex;align-items:center;justify-content:center}
.prod-galmain img{max-width:100%;max-height:100%;object-fit:contain}
.prod-thumbs{display:flex;gap:9px;margin-top:16px;overflow-x:auto;padding-bottom:3px}
.prod-thumbs button{flex-shrink:0;width:62px;height:62px;padding:7px;border-radius:11px;cursor:pointer;
  background:var(--white);border:1.5px solid var(--gray-border);transition:border-color .15s}
.prod-thumbs button:hover{border-color:#b8b8bd}
.prod-thumbs button.on{border-color:var(--black)}
.prod-thumbs img{width:100%;height:100%;object-fit:contain}
.prod-marca{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:#8a8a93;margin:0 0 8px}
.prod-nombre{font-size:30px;font-weight:700;letter-spacing:-.02em;line-height:1.2;margin:0 0 14px}
.prod-precio{font-size:29px;font-weight:700;letter-spacing:-.02em;margin:0 0 6px}
.prod-cuotas{font-size:13px;color:var(--gray-text);margin:0 0 20px}
.prod-desc{font-size:15px;line-height:1.6;color:#555;margin:0 0 26px}
.prod-btn{width:100%;padding:16px;border:none;border-radius:12px;cursor:pointer;font-family:var(--font);
  font-size:15px;font-weight:700;color:var(--white);background:var(--black);transition:.16s}
.prod-btn:hover{background:#000;transform:translateY(-1px)}
.prod-wa{display:block;width:100%;padding:16px;border-radius:12px;margin-top:11px;text-align:center;
  font-size:15px;font-weight:700;color:var(--white);background:#22c55e;text-decoration:none;transition:.16s}
.prod-wa:hover{background:#16a34a;transform:translateY(-1px)}
.prod-datos{list-style:none;padding:22px 0 0;margin:26px 0 0;border-top:1px solid var(--gray-border)}
.prod-datos li{display:flex;justify-content:space-between;gap:16px;font-size:14px;padding:9px 0;color:#555}
.prod-datos li span:last-child{font-weight:600;color:var(--black);text-align:right}
@media(max-width:900px){
  .prod{grid-template-columns:1fr;gap:28px}
  .prod-gal{position:static;padding:22px}
  .prod-galmain{height:300px}
  .prod-nombre{font-size:24px}
  .prod-precio{font-size:25px}
}

/* ══════════════════════════════════════════
   BUSCADOR DEL HEADER (la lupita)
   El panel lo arma main.js y vive en las 66 páginas, así que el CSS va acá
   y no inline como el resto de lo que sólo usa el home.

   Se despliega hacia abajo desde el borde del header y a todo el ancho, como
   el de apple.com: es la misma caída de los mega-menús del nav, así que la
   lupita se comporta como el resto del header. Antes era una ventanita
   flotante en el medio de la pantalla, que no se parecía a nada del sitio.

   ⚠️ Dónde termina el header lo mide main.js y lo pasa en --bsc-top: cambia
   según el alto de la barra de avisos y según si la página está scrolleada
   (el header es sticky), así que no se puede dejar fijo en 90px.
══════════════════════════════════════════ */
.bsc{
  position:fixed;inset:0;z-index:1200;
  visibility:hidden;
  /* al cerrar, la visibilidad espera a que termine el deslizamiento; si se
     cortara de una, el panel desaparecería sin la animación de vuelta */
  transition:visibility 0s .34s;
}
.bsc.open{visibility:visible;transition:visibility 0s}
body.bsc-open{overflow:hidden}
.bsc-bg{
  position:absolute;top:var(--bsc-top,90px);left:0;right:var(--bsc-sb,0px);bottom:0;
  background:rgba(0,0,0,.42);
  opacity:0;transition:opacity .34s ease;
}
.bsc.open .bsc-bg{opacity:1}
/* La ventana por la que asoma el panel: recorta la parte que todavía no bajó.
   El panel arranca corrido hacia arriba y este overflow lo esconde. */
.bsc-drop{
  position:absolute;top:var(--bsc-top,90px);left:0;right:var(--bsc-sb,0px);
  max-height:calc(100vh - var(--bsc-top,90px));
  overflow:hidden;
}
.bsc-panel{
  background:var(--white);
  border-bottom:1px solid var(--gray-border);
  max-height:calc(100vh - var(--bsc-top,90px));
  display:flex;flex-direction:column;
  transform:translateY(-100%);
  transition:transform .34s cubic-bezier(.32,.72,0,1);
}
.bsc.open .bsc-panel{transform:translateY(0)}
/* mismo ancho y mismo padding que .hdr: así la lupa del panel cae justo
   debajo del logo, como en apple.com */
.bsc-in{
  max-width:1280px;margin:0 auto;padding:0 24px;width:100%;
  display:flex;flex-direction:column;min-height:0;
}
.bsc-top{display:flex;align-items:center;gap:14px;padding:26px 0 16px;flex:none}
.bsc-lupa{width:25px;height:25px;color:var(--gray-txt);flex:none}
.bsc-input{
  flex:1;min-width:0;border:0;outline:0;background:none;
  font-family:inherit;font-size:34px;font-weight:400;letter-spacing:-.022em;
  color:var(--black);
}
.bsc-input::placeholder{color:var(--gray-txt)}
.bsc-input::-webkit-search-cancel-button{display:none}
.bsc-x{
  flex:none;border:0;background:var(--gray-bg);cursor:pointer;
  width:34px;height:34px;border-radius:50%;
  color:var(--black);font-size:13px;line-height:1;
}
.bsc-x:hover{background:var(--gray-border)}
/* Los resultados no se estiran a los 1280 del header: una fila de 1200 px con
   el precio en la otra punta se lee mal. */
.bsc-res{overflow-y:auto;padding-bottom:34px;max-width:580px}
.bsc-hint{margin:10px 0 26px;color:var(--gray-txt);font-size:15px;line-height:1.6}
.bsc-tit{margin:14px 0 4px;font-size:13px;font-weight:400;color:var(--gray-txt)}
.bsc-lista{display:flex;flex-direction:column}
/* el margen negativo compensa el padding: así la flechita y la foto quedan
   alineadas con la lupa y con el título de arriba, y el fondo del hover
   igual sobresale a los costados */
.bsc-it{
  display:flex;align-items:center;gap:14px;
  margin:0 -10px;padding:9px 10px;border-radius:12px;
  text-decoration:none;color:var(--black);
}
.bsc-it:hover{background:var(--gray-bg)}
.bsc-it img,.bsc-nofoto{
  flex:none;width:44px;height:44px;object-fit:contain;
  background:#fff;border-radius:8px;
}
.bsc-fl{flex:none;width:17px;height:17px;color:var(--black)}
.bsc-it-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.bsc-it-txt b{font-size:15px;font-weight:600;letter-spacing:-.01em}
.bsc-it-txt i{font-style:normal;font-size:13px;color:var(--gray-txt)}
.bsc-it-precio{flex:none;font-size:14px;font-weight:600;white-space:nowrap}
/* las secciones llevan flecha en vez de foto y el texto es más grande, como
   los "Enlaces rápidos" de apple.com */
.bsc-pag .bsc-it-txt b{font-size:16px}
@media(max-width:580px){
  .bsc-input{font-size:22px}
  .bsc-top{padding:18px 0 12px}
  .bsc-it img,.bsc-nofoto{width:38px;height:38px}
}