/* ── 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;
}
/* ── el logo de la marca, en vez del nombre en texto (22/08/2026) ──
   Pedido de Ricardo. Reemplaza al <p class="pbrand"> en las 8 marcas que
   tienen logo oficial; las otras 10 (las perfumerías y Amazfit) siguen con el
   texto, porque no publican un SVG y dibujarlo sería inventar una marca.
   Qué marca lleva qué clase está en deploy/marcas.js.

   ⚠️ LA ALTURA NO ES IGUAL PARA TODOS, a propósito. Los SVG vienen con el
   viewBox recortado a su contenido (ver marcas.js), así que el `height` de acá
   es el alto REAL del logo — pero un símbolo cuadrado como el de Apple pesa
   más a la vista que un wordmark largo como el de Samsung a la misma altura.
   Por eso van tres escalones según la proporción, y no un valor único.

   ⚠️ El gris NO es un `color`: son SVG negros dentro de un <img>, que no
   heredan color. Se atenúan con opacity, que sobre la tarjeta blanca da el
   mismo gris que tenía el texto. Con filter:invert o mask se podría teñir de
   verdad, pero no hace falta y mask no anda igual en todos lados. */
.pbrand-logo{
  display:block;height:13px;width:auto;   /* símbolo cuadrado (Apple, Xiaomi, Motorola) */
  opacity:.55;margin-bottom:5px;
}
.pbrand-logo.mx{height:11px}   /* mixto: JBL, PlayStation, DJI */
.pbrand-logo.wm{height:9px}    /* wordmark largo: Samsung, Soul */

.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;
}
/* ══ TARJETA CON CIRCULITO Y LOS DOS BOTONES (20/08/2026) ══
   Antes esto vivía INLINE en las 4 páginas de iPhone (desde el 27/07) y en
   las 6 de secciones.js. ⚠️ Ahora vive acá, y el motivo es que se dio vuelta
   el argumento: se puso inline para no moverle el ?v= a las 247 páginas por
   algo que usaban 10. Hoy lo usan LAS 247 —todas las grillas del sitio tienen
   la misma tarjeta—, así que tenerlo repetido en 16 archivos generados es
   justo lo que hace que se desincronicen.
   ⚠️ Todo cuelga de .pcard-cta. Una .pcard suelta (si quedara alguna escrita
   a mano) sigue funcionando como el <a> de siempre. */

/* La tarjeta pasa a columna para que los botones queden pegados abajo y toda
   la fila los tenga a la misma altura, tengan los nombres las líneas que
   tengan. */
.pcard-cta{display:flex;flex-direction:column;height:100%;cursor:default}
.pcard-go{display:flex;flex-direction:column;flex:1;text-decoration:none;color:inherit}
/* ⚠️ .pinfo pasa a ser flex en columna y los hijos se estirarían solos de
   punta a punta: sin esto el badge queda como una barra de color. */
.pcard-cta .pinfo{
  display:flex;flex-direction:column;flex:1;
  padding:15px 15px 4px;align-items:flex-start;
}
.pcard-cta .pinfo>*{max-width:100%}
.pcard-cta .pname{margin-bottom:10px;line-height:1.35}
/* el precio, último y pegado al piso: si no, con nombres de distinto largo
   los precios quedan en escalera dentro de la misma fila */
.pcard-cta .pprice{margin-top:auto;font-size:17px}

/* ── el circulito de color ──
   Mismo mapa que la ficha (COLORES de deploy/specs.js) y misma regla: el
   color que no está en el mapa NO se dibuja. Centrado bajo la foto, como en
   apple.com; va estirado a todo el ancho porque .pinfo alinea a la izquierda.

   ⚠️ 21/08/2026 — LAS MEDIDAS SALEN DE MEDIR apple.com, NO DE ESTIMARLAS.
   Ricardo pasó una captura de la grilla de iPhone y se le leyeron los píxeles
   (captura Retina 2x, así que todo va dividido por dos):
     · diámetro 17 px retina → 8,5 px CSS   (acá estaba en 13 px + 1 de borde:
       casi el doble, y por eso se leían como botones y no como muestras)
     · separación 12 px retina → 6 px CSS
     · SIN BORDE y SIN DEGRADÉ: el corte de un swatch blanco da 255,255,255
       macizo contra el fondo, con un solo píxel de antialiasing. El "aro" que
       parece tener a simple vista es el contraste contra el gris de la tarjeta.

   ⚠️ Por qué igual llevan un contorno, si Apple no se lo pone: la tarjeta de
   apple.com es gris (#f5f5f7) y la nuestra es BLANCA. Sobre gris, un swatch
   blanco puro se recorta solo; sobre blanco desaparece — y varios colores del
   catálogo son casi blancos ('blanco' es #f4f2ee, 'plata' arranca en #f2f3f5).
   Así que el borde de 1 px se cambió por un contorno inset del 10%: define el
   círculo claro sin dibujarle el aro gris que tenían todos, incluidos los
   oscuros, donde no hacía ninguna falta.
   Va como box-shadow y no como border a propósito: el border sumaba al alto y
   al ancho (box-sizing lo compensaba comiéndose el color), el inset no. */
.pdots{display:flex;justify-content:center;align-self:stretch;gap:6px;margin:0 0 12px}
.pdot{
  width:9px;height:9px;border-radius:50%;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.10);
}

/* ── los dos botones ──
   Los de apple.com: el lleno lleva a la ficha y el de texto agrega al
   carrito, que es lo que el sitio sabe hacer (no hay checkout: el pedido
   sale por WhatsApp desde el carrito).
   ⚠️ El padding-top generoso es a propósito: pegados al precio la tarjeta se
   lee como un bloque solo y no se distingue el dato del control. */
.pcta-row{
  display:flex;align-items:center;justify-content:center;
  gap:14px;flex-wrap:wrap;
  margin:0 13px 15px;padding-top:16px;
}
.pcta{
  padding:9px 18px;border:none;border-radius:999px;
  background:var(--accent);color:#fff;
  font:inherit;font-size:13px;font-weight:600;line-height:1.3;
  text-align:center;text-decoration:none;cursor:pointer;
  transition:background .15s;
}
.pcta:hover{background:var(--accent-dk)}
.pcta-buy{
  padding:9px 2px;border:none;background:none;color:var(--accent);
  font:inherit;font-size:13px;font-weight:600;line-height:1.3;
  cursor:pointer;transition:color .15s;
}
.pcta-buy::after{content:"\203A";font-size:15px;margin-left:4px;line-height:1}
.pcta-buy:hover{color:var(--accent-dk)}
/* ⚠️ ACÁ NO VA UNA MEDIA QUERY QUE LOS APILE, y se probó al revés primero.
   La grilla del catálogo (.ctlg-grid) pasa a DOS columnas por debajo de
   1000px y a UNA por debajo de 520px, así que en celular la tarjeta es más
   ancha, no más angosta, y los dos botones entran holgados. Una regla que
   los apilara a 420px sólo lograba una pastilla a todo el ancho de una
   tarjeta de 350px, que queda peor.
   Para el caso raro que igual no entre —una tarjeta angosta de verdad, como
   las de 220px del carrusel del home con un texto más largo— alcanza con el
   flex-wrap de arriba: se van a la línea de abajo y quedan centrados. */

.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)
══════════════════════════════════════════ */
/* ⚠️ 25/08/2026 — REHECHO CON EL ESTILO DE LA REFERENCIA QUE PASÓ RICARDO.
   Antes era una grilla centrada: ícono arriba, título y texto debajo, todo al
   medio. Ahora cada beneficio es una TARJETA BLANCA con el ícono a la
   izquierda y, a la derecha, el título con una línea fina abajo y la
   descripción en gris.

   ⚠️ LOS COLORES Y LAS MEDIDAS SE MIDIERON SOBRE LA CAPTURA, no se estimaron
   (la imagen es 2x, así que todo va dividido por dos):
     fondo de la franja  #f5f7fb      tarjeta            #ffffff
     línea del título    #eceff4      texto e ícono      #7f879a
   ⚠️ EL GRIS DEL TEXTO SE OSCURECIÓ A #667085 Y NO ES UN DESCUIDO: el #7f879a
   de la referencia da 3,6 de contraste sobre blanco y el mínimo accesible para
   texto es 4,5. El #667085 da 4,97 y a simple vista es el mismo gris. El ícono
   lo acompaña para que sigan siendo del mismo color, como en la referencia.
     tarjeta 300x152     hueco 1 px   ícono 37x33
     borde→ícono 29 px   ícono→texto 17 px
   ⚠️ El ícono y la descripción llevan EL MISMO gris: en la referencia el ícono
   no es un color aparte, es texto gráfico. */
/* ⚠️ La franja tiene fondo #f5f7fb y va a TODO EL ANCHO, a propósito: en la
   referencia las tarjetas son blancas sobre un fondo celeste grisáceo, y sin
   ese contraste no se leen como tarjetas — sobre blanco sólo se verían las
   líneas separadoras. El #eceff4 del hueco entre tarjetas también está medido:
   NO es el fondo asomando (que sería #f5f7fb), es un separador más oscuro. */
.feat3-band{background:#f5f7fb;padding:40px 0 44px;margin-top:10px}
.feat3{
  display:grid;grid-template-columns:repeat(3,1fr);
  /* 1px de hueco y fondo gris debajo: el hueco ES el fondo asomando, como en
     la referencia. Por eso no hay borde dibujado entre tarjetas. */
  gap:1px;background:#eceff4;
  border-radius:14px;overflow:hidden;
  margin:0;text-align:left;
}
.feat3-item{
  display:flex;align-items:flex-start;gap:17px;
  background:#fff;padding:27px 24px 30px 29px;
}
/* flex-none + margin-top: el ícono se apoya a la altura del título y no se
   estira si la descripción es larga. */
.feat3-ico{
  width:37px;height:37px;flex:none;margin-top:2px;
  color:#667085;stroke-width:1.5;
}
.feat3-txt{min-width:0;flex:1}
.feat3-item h3{
  font-size:17px;font-weight:700;letter-spacing:-.015em;color:var(--black);
  /* la línea fina de la referencia: es el borde del título, no un <hr>, así
     mide exactamente el ancho de la columna de texto */
  padding-bottom:11px;border-bottom:1px solid #eceff4;margin-bottom:16px;
}
.feat3-item p{font-size:13.5px;color:#667085;line-height:1.62;max-width:34ch}
.feat3-item p strong{color:#3d4457;font-weight:600}

/* Abajo de 900 no entran tres columnas sin partir los títulos en dos renglones;
   a una sola columna la tarjeta se estira y el ícono queda muy suelto, así que
   van de a dos y la última ocupa el ancho. */
@media(max-width:900px){
  .feat3{grid-template-columns:1fr 1fr}
  .feat3-item:last-child{grid-column:1 / -1}
}
@media(max-width:560px){
  .feat3{grid-template-columns:1fr}
  .feat3-item{padding:22px 20px 24px 22px;gap:14px}
  .feat3-ico{width:32px;height:32px}
}

/* ══════════════════════════════════════════
   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}
}

/* ⚠️ EL PNG DEL LOGO ES 4500x4500 Y LA MARCA OCUPA SÓLO EL 17% DEL ALTO.
   Medido en el navegador (25/08/2026): con height:120px el logo que se VE mide
   21 px, y los otros ~99 px son lienzo transparente. Por eso el número de acá
   no se parece en nada al tamaño que se ve en pantalla. Si algún día se
   recorta el PNG a su contenido —como se hizo con el viewBox de los logos de
   marca en deploy/marcas.js— estos valores hay que rehacerlos enteros.

   ⚠️ .logo-link LLEVA height + overflow:hidden, y NO es estético: sin eso la
   caja del <a> mide lo mismo que la imagen (170 px) dentro de un header de 90,
   y el sobrante transparente SE COMÍA LOS CLICKS hasta 39 px por debajo del
   header — medido con elementFromPoint. Ya pasaba antes con los 120 px. Al
   recortar a 90 px no se pierde nada visible: lo que se corta es lienzo vacío. */
.logo-link { display:flex; align-items:center; flex-shrink:0;
             height:90px; overflow:hidden; }
/* El del header, más grande (pedido de Ricardo, 25/08/2026): 120 → 170 px de
   caja, que son 21 → 29 px de marca visible. */
.logo-link .logo-img { height:170px; }
/* El de base lo usa el FOOTER, que queda como estaba. */
.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}
/* El logo de la marca en la ficha (22/08/2026). Mismas 3 clases de forma que
   en la tarjeta (ver deploy/marcas.js) pero MÁS GRANDE: acá el texto que
   reemplaza es de 12 px y no de 10, y al lado de un <h1> de 30 px un logo del
   tamaño de la grilla queda perdido. La marca sin logo sigue con .prod-marca. */
.prod-marca-logo{
  display:block;height:17px;width:auto;   /* símbolo: Apple, Xiaomi, Motorola */
  opacity:.55;margin:0 0 10px;
}
.prod-marca-logo.mx{height:14px}   /* JBL, PlayStation, DJI */
.prod-marca-logo.wm{height:11px}   /* Samsung, Soul */
.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}
}