/* ============================================================
   StoreGCH – Estilos propios
   ------------------------------------------------------------
   Este archivo se carga DESPUES de style.css.
   Todo lo nuevo va aca, NO dentro del CSS del theme Electro,
   asi una actualizacion del theme no se lleva puesto el trabajo.
   ============================================================ */

/* ============================================================
   0. SISTEMA DE DISENO
   ------------------------------------------------------------
   Todo lo de abajo sale de aca. La plantilla Electro trae sus
   propios colores y medidas desperdigados por 458 KB de CSS; la
   unica forma de que el sitio se vea de una pieza es que nuestras
   secciones tomen TODAS sus decisiones de este bloque.

   Si manana cambia la marca, se cambia aca y no en 40 lugares.
   ============================================================ */
:root {
  /* --- Neutros -------------------------------------------------
     Con una leve inclinacion al azul, elegidos a proposito. Un gris
     puro (#808080) se lee como "no lo pensaron"; estos acompanian
     al acento y hacen que el negro no parezca apagado. */
  --ink:        #0B0D12;   /* titulos, header, precio */
  --ink-2:      #1A1E27;   /* texto fuerte sobre claro */
  --muted:      #5C6573;   /* texto secundario, categoria */
  --faint:      #8A93A1;   /* metadatos, USD de referencia */
  --line:       #E3E7ED;   /* bordes */
  --line-soft:  #EEF1F5;   /* separadores internos */
  --surface:    #FFFFFF;
  --surface-2:  #F6F8FA;   /* fondo de seccion */
  --surface-3:  #EDF1F5;   /* fondo de imagen de producto */

  /* --- Acento --------------------------------------------------
     Uno solo, y usado poco. En una tienda de electronica el color
     lo ponen las fotos de los productos: si la interfaz compite,
     todo grita y nada resalta. */
  --accent:     #0A5CE8;
  --accent-ink: #084BC0;   /* hover */
  --accent-wash:#EBF2FE;   /* fondo suave del acento */

  /* --- Color con significado -----------------------------------
     Separado del acento a proposito: esto comunica estado, no
     marca. El verde es el de WhatsApp porque ahi es la accion. */
  --nuevo:      #0E7C4A;
  --nuevo-bg:   #E7F5EE;
  --usado:      #8A5A00;
  --usado-bg:   #FDF3E0;
  --wa:         #25A75A;
  --wa-ink:     #1E8F4C;

  /* --- Tipografia ----------------------------------------------
     Poppins en todo el sitio, y SOLO en dos pesos: 600 (SemiBold)
     y 700 (Bold). Son los dos unicos archivos que se cargan, asi
     que cuando el theme pide un 300 o un 400 el navegador usa el
     mas cercano que tenga, que es el 600. Eso deja todo entre
     SemiBold y Bold sin tener que pisar el font-weight en los
     cientos de selectores que trae Electro.

     Los dos nombres siguen existiendo aunque hoy apunten a la
     misma familia: el resto del CSS los usa para distinguir
     titulo de texto, y asi cambiar una sola de las dos mas
     adelante es tocar una linea. */
  --fuente-titulo: "Poppins", "Helvetica Neue", Arial, sans-serif;
  --fuente-texto:  "Poppins", "Helvetica Neue", Arial, sans-serif;

  /* Escala de 1.25. Sirve para no inventar un tamanio por seccion. */
  --t-xs:   0.75rem;    /* 12 · etiquetas */
  --t-sm:   0.8125rem;  /* 13 · metadatos */
  --t-base: 0.9375rem;  /* 15 · cuerpo */
  --t-md:   1.0625rem;  /* 17 · nombre de producto */
  --t-lg:   1.375rem;   /* 22 · precio */
  --t-xl:   1.75rem;    /* 28 · titulo de seccion */
  --t-2xl:  2.5rem;     /* 40 · titulo de bloque */
  --t-3xl:  3.5rem;     /* 56 · hero */

  /* --- Espacio (base 4) ---------------------------------------- */
  --e-1: 4px;   --e-2: 8px;   --e-3: 12px;  --e-4: 16px;
  --e-5: 24px;  --e-6: 32px;  --e-7: 48px;  --e-8: 64px;  --e-9: 96px;

  /* --- Bordes y sombras ---------------------------------------- */
  --r-sm: 8px;  --r-md: 12px;  --r-lg: 16px;  --r-full: 999px;

  /* Suaves a proposito: una sombra marcada en cada tarjeta aplana
     la jerarquia, porque si todo flota nada sobresale. */
  --sombra-1: 0 1px 2px rgba(11, 13, 18, .04),
              0 1px 3px rgba(11, 13, 18, .06);
  --sombra-2: 0 4px 12px rgba(11, 13, 18, .06),
              0 12px 32px rgba(11, 13, 18, .08);

  --transicion: 180ms cubic-bezier(.4, 0, .2, 1);
}

/* ------------------------------------------------------------
   TIPOGRAFIA BASE
   ------------------------------------------------------------
   La plantilla pone Open Sans en el body y en mil selectores mas.
   Se reemplaza desde la raiz y se dejan los titulos y los numeros
   con la fuente de titulo.

   font-variant-numeric: tabular-nums es lo que alinea los precios
   en columna: sin eso el 1 ocupa menos que el 8 y la grilla baila.
   ------------------------------------------------------------ */
body,
button, input, select, textarea,
.navbar-primary .navbar-nav > .menu-item > a {
  font-family: var(--fuente-texto);
  font-weight: 600;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Poppins es geometrica y de ojo grande: al 600 pinta bastante mas
   oscuro que Inter al mismo peso. El interletrado negativo de los
   titulos se afloja un poco para que no se empasten. */
h1, h2, h3, h4, h5, h6,
.home-section-title,
.product-card-price,
.hero-2 {
  font-family: var(--fuente-titulo);
  font-weight: 700;
  letter-spacing: -0.015em;
}

strong, b, th,
.le-button, .btn, button {
  font-weight: 700;
}

.product-card-price,
.product-card-usd,
.precio, .price {
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   1. HERO SLIDER
   ------------------------------------------------------------
   El theme animaba el texto con jQuery (fadeInDown-1/2/3).
   fadeInDownReset() y fadeInDown() peleaban por la misma cola de
   animacion y ganaba el reset, asi que del slide 2 en adelante el
   titulo y el boton quedaban en opacity:0 (invisibles).

   Solucion: la visibilidad la decide el CSS (!important le gana al
   style inline que escribe jQuery) y la animacion de entrada usa
   solo transform, que jQuery no toca.
   ============================================================ */

/* El texto SIEMPRE visible, pase lo que pase con el JS del theme */
#owl-main .caption .fadeInDown-1,
#owl-main .caption .fadeInDown-2,
#owl-main .caption .fadeInDown-3,
#owl-main .caption .fadeInDown-4,
#owl-main .caption .fadeIn-1,
#owl-main .caption .fadeIn-2,
#owl-main .caption .fadeIn-3 {
  opacity: 1 !important;
  top: auto !important;
  left: auto !important;
}

/* Entrada suave, solo con transform */
@keyframes sgHeroIn {
  from { transform: translateY(-14px); }
  to   { transform: translateY(0); }
}

#owl-main .owl-item.active .caption .fadeInDown-1 { animation: sgHeroIn .6s cubic-bezier(.16,1,.3,1) .05s both; }
#owl-main .owl-item.active .caption .fadeInDown-2 { animation: sgHeroIn .6s cubic-bezier(.16,1,.3,1) .14s both; }
#owl-main .owl-item.active .caption .fadeInDown-3 { animation: sgHeroIn .6s cubic-bezier(.16,1,.3,1) .23s both; }

@media (prefers-reduced-motion: reduce) {
  #owl-main .owl-item.active .caption > * { animation: none !important; }
}

/* El theme mete .hero-action-btn en el selector generico de botones
   (style.css:332), asi que el DIV contenedor se pintaba como pill negro
   detras del boton real. Lo devolvemos a ser un simple contenedor. */
#owl-main .hero-action-btn {
  background: none !important;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  display: block;
}

#owl-main .hero-action-btn:hover,
#owl-main .hero-action-btn:focus {
  background: none !important;
  background-color: transparent !important;
}

/* ---------- DESKTOP ---------- */
@media (min-width: 769px) {

  /* Los banners son 1200x466. Atamos la altura a ese ratio (38.83vw)
     para que la imagen entre completa: ni recorte ni franjas negras.
     .home-v3-slider tambien: el theme le fija 485px y, al quedar mas
     bajo que el slider, el hero desbordaba y tapaba la franja de
     features de abajo. */
  .home-v3-slider,
  #owl-main,
  #owl-main .owl-stage-outer,
  #owl-main .owl-stage,
  #owl-main .owl-item,
  #owl-main .item {
    height: clamp(380px, 38.83vw, 620px) !important;
    min-height: 0 !important;
  }

  #owl-main .item {
    position: relative;
    background-size: cover !important;
    background-position: center center !important;
  }

  /* En desktop la foto es la CAPA DE FONDO, no un bloque en flujo.
     Sin esto el <img> ocupa el alto del slide, empuja al .container
     que lleva el texto abajo del recuadro y el overflow:hidden del
     owl-stage-outer lo recorta: el titulo, el subtitulo y el boton
     no se ven en NINGUN slide.

     En mobile el <img> se queda en flujo a proposito (foto arriba,
     texto abajo sobre panel negro), asi que esta regla vive solo
     de 769px para arriba. */
  #owl-main .hero-img-mobile {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    z-index: 0;
  }

  /* Velo oscuro a la izquierda: el texto se lee sobre cualquier banner */
  #owl-main .item::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      90deg,
      rgba(0,0,0,.78) 0%,
      rgba(0,0,0,.55) 32%,
      rgba(0,0,0,.12) 62%,
      rgba(0,0,0,0) 78%
    );
    pointer-events: none;
    z-index: 1;
  }

  #owl-main .item > .container {
    position: relative;
    z-index: 2;
    height: 100%;
    display: block;   /* el theme lo pone en table; ver nota del caption */
  }

  #owl-main .item > .container > .row {
    height: 100%;
  }

  /* Las columnas del theme van flotadas, no como items flex, asi que no se
     estiran solas. Sin este alto el caption mide lo que mide su texto y el
     justify-content:center no tiene espacio libre para repartir: el bloque
     queda arriba en lugar de al medio del banner. */
  #owl-main .item > .container > .row > [class*="col-"] {
    height: 100%;
  }

  /* Lleva `.item` a proposito: el theme declara
     `#owl-main .item .caption { display: table-cell }`, que con 1 id + 2
     clases le gana a `#owl-main .caption`. Sin empatar la especificidad el
     display:flex se descarta y el caption no se centra vertical. */
  #owl-main .item .caption {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 0;
  }

  #owl-main .hero-subtitle-v2 {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    opacity: .85;
    margin-bottom: 14px;
  }

  #owl-main .hero-2 {
    /* El theme pinta .hero-2 de azul (#0777df, style.css:4248). Sobre los
       tres banners oscuros no contrasta; el bloque de mobile ya lo forzaba
       a blanco, en desktop faltaba. Se notaba recien ahora porque hasta
       este arreglo el caption se recortaba y el titulo no se veia. */
    color: #fff;
    font-size: clamp(28px, 2.9vw, 42px);
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: -.02em;
    max-width: 19ch;
    margin-bottom: 30px;
    text-shadow: 0 2px 18px rgba(0,0,0,.45);
  }

  #owl-main .hero-action-btn { margin: 0; }

  /* El boton venia negro sobre banner negro: no se veia.
     Pill blanco, que funciona sobre los tres banners. */
  #owl-main .hero-action-btn .le-button {
    background: #ffffff !important;
    border: 1px solid #ffffff !important;
    border-radius: 999px !important;
    padding: 13px 30px !important;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0;
    box-shadow: 0 8px 26px rgba(0,0,0,.35);
    transition: transform .15s ease, box-shadow .18s ease, background .18s ease;
  }

  #owl-main .hero-action-btn .le-button,
  #owl-main .hero-action-btn .le-button span {
    color: #000000 !important;
    text-transform: none;
  }

  #owl-main .hero-action-btn .le-button:hover {
    background: #f2f2f7 !important;
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(0,0,0,.45);
  }
}

/* ---------- MOBILE ---------- */
@media (max-width: 768px) {

  /* Antes el caption tenia margin-top:-70px y se montaba sobre la
     imagen negra con texto negro -> ilegible. Ahora: imagen arriba,
     texto abajo sobre panel negro, sin solapamientos. */

  /* El fondo acompania al slide. Cuando los banners eran un panel
     negro esto era #000; hoy el slide es #F9F9F9 y el negro quedaba
     como una franja de 52 px entre el banner y la pagina, justo
     debajo del boton de WhatsApp. */
  .home-v3-slider { background: #F9F9F9; }

  .home-v3-slider,
  #owl-main,
  #owl-main .owl-stage-outer,
  #owl-main .owl-stage,
  #owl-main .owl-item,
  #owl-main .item {
    height: auto !important;
    min-height: 0 !important;
  }

  #owl-main .item {
    background: #F9F9F9 !important;
    padding-bottom: 0 !important;
    position: relative;
  }

  #owl-main .item::before { display: none; }

  .hero-img-mobile {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    background: #000 !important;
  }

  /* El caption vuelve a flujo normal, sin margenes negativos */
  #owl-main .item > .container {
    padding-left: 20px;
    padding-right: 20px;
  }

  #owl-main .caption,
  #owl-main .caption * {
    color: #fff !important;
  }

  #owl-main .caption {
    margin-top: 0 !important;
    padding: 4px 0 30px !important;
    text-align: center !important;
    background: #000;
  }

  #owl-main .hero-subtitle-v2 {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    opacity: .7;
    margin-bottom: 8px;
  }

  #owl-main .hero-2 {
    font-size: 26px;
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -.02em;
    margin-bottom: 18px;
  }

  #owl-main .hero-action-btn {
    display: flex;
    justify-content: center;
  }

  /* Boton blanco sobre el panel negro */
  #owl-main .hero-action-btn .le-button {
    background: #ffffff !important;
    border-color: #ffffff !important;
    border-radius: 999px;
    padding: 12px 28px;
    font-weight: 600;
  }

  #owl-main .hero-action-btn .le-button,
  #owl-main .hero-action-btn .le-button span {
    color: #000000 !important;
  }
}

/* ---------- DOTS ----------
   Estaban ocultos con !important: nadie se enteraba de que habia
   3 slides. Los mostramos con un estilo discreto. */
#owl-main .owl-dots {
  display: block !important;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 18px;
  text-align: center;
  z-index: 5;
}

#owl-main .owl-dots .owl-dot {
  display: inline-block;
  margin: 0 5px;
}

/* Tinta, no blanco: los tres slides son una tarjeta sobre #F9F9F9 y
   un punto blanco sobre gris claro no existe. Con los banners viejos,
   que eran un panel negro de lado a lado, el blanco era lo correcto;
   hoy deja al visitante sin enterarse de que hay tres. */
#owl-main .owl-dots .owl-dot span {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(11,13,18,.22);
  transition: background .2s ease, width .2s ease;
}

#owl-main .owl-dots .owl-dot.active span {
  width: 22px;
  background: var(--ink, #0B0D12);
}

@media (max-width: 768px) {
  /* Debajo de la tarjeta, no encima: en vertical la foto ocupa todo
     el ancho y un punto sobre la imagen se pierde. */
  #owl-main .owl-dots {
    position: static;
    padding: 6px 0 18px;
    background: #F9F9F9;
  }
}


/* ------------------------------------------------------------
   SLIDE CENTRADO (.item.is-centered)  ·  usado por el iPhone 18
   ------------------------------------------------------------
   El texto NO va quemado en el PNG: se dibuja con HTML. Asi queda
   nitido en pantallas retina, se reacomoda solo en mobile y el
   efecto puede ser una animacion real en vez de un pixelado.

   El velo de #owl-main .item::before es un degrade de izquierda a
   derecha, pensado para texto alineado a la izquierda. Con el texto
   al medio dejaria el centro claro y los bordes oscuros: justo al
   revos de lo que hace falta. Aca se reemplaza por una vineta
   radial, que oscurece el centro y deja los telefonos de los
   costados a plena luz.
   ------------------------------------------------------------ */

#owl-main .item.is-centered::before {
  background: radial-gradient(
    ellipse at center,
    rgba(0,0,0,.74) 0%,
    rgba(0,0,0,.52) 42%,
    rgba(0,0,0,.16) 72%,
    rgba(0,0,0,0) 100%
  );
}

/* El subtitulo de estos slides es un badge, no texto suelto: va a
   opacidad plena (el resto de los slides lo baja a .85 / .7). */
#owl-main .item.is-centered .hero-subtitle-v2 { opacity: 1; }

@media (min-width: 769px) {
  #owl-main .item.is-centered .caption {
    align-items: center;
    text-align: center;
  }

  #owl-main .item.is-centered .hero-subtitle-v2 { margin-bottom: 18px; }

  /* El limite de 19ch esta puesto para que el titulo no invada la
     foto cuando esta a la izquierda. Centrado no molesta a nadie, y
     el margen auto es el que lo mantiene al medio. */
  #owl-main .item.is-centered .hero-2 {
    max-width: 26ch;
    margin-left: auto;
    margin-right: auto;
  }

  #owl-main .item.is-centered .hero-action-btn {
    display: flex;
    justify-content: center;
  }
}

/* ------------------------------------------------------------
   SLIDE CLARO (.item.is-light)  ·  usado por el DJI Neo 2
   ------------------------------------------------------------
   Los otros banners son casi negros: por eso el texto va blanco
   sobre un velo oscuro. Este es al reves. El tercio izquierdo,
   justo donde cae el texto, mide 225 de luminancia sobre 255
   (medido sobre el PNG final): blanco sobre blanco no se lee, y
   taparlo con el velo negro del resto apaga la foto, que
   precisamente vende luz.

   Asi que este slide invierte la paleta: velo blanco, texto
   oscuro y boton negro. Solo en desktop: en mobile el caption ya
   se dibuja sobre un panel negro debajo de la foto, ahi el texto
   blanco es el correcto.
   ------------------------------------------------------------ */

@media (min-width: 769px) {
  #owl-main .item.is-light::before {
    background: linear-gradient(
      90deg,
      rgba(255,255,255,.86) 0%,
      rgba(255,255,255,.66) 34%,
      rgba(255,255,255,.18) 64%,
      rgba(255,255,255,0) 80%
    );
  }

  #owl-main .item.is-light .hero-subtitle-v2 { color: #4A4A52; }

  #owl-main .item.is-light .hero-2 {
    color: #14161A;
    text-shadow: none;
  }

  /* El pill blanco del resto de los slides desaparece sobre este
     fondo. Va negro, y con !important porque la regla base tambien
     lo usa. */
  #owl-main .item.is-light .hero-action-btn .le-button {
    background: #14161A !important;
    border-color: #14161A !important;
    box-shadow: 0 8px 22px rgba(0,0,0,.22);
  }

  #owl-main .item.is-light .hero-action-btn .le-button,
  #owl-main .item.is-light .hero-action-btn .le-button span {
    color: #ffffff !important;
  }

  #owl-main .item.is-light .hero-action-btn .le-button:hover {
    background: #000000 !important;
  }
}

/* ---------- badge "Proximamente pre venta" ---------- */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 17px;
  border: 1px solid rgba(255,255,255,.34);
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* Punto que late: lee como "esto todavia no salio, esta en camino".
   Anima solo box-shadow sobre una caja de 7px, asi que el costo por
   frame es despreciable. */
.hero-badge::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  animation: heroLate 2s ease-out infinite;
}

@keyframes heroLate {
  0%   { box-shadow: 0 0 0 0 rgba(255,255,255,.55); }
  70%  { box-shadow: 0 0 0 9px rgba(255,255,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}

/* ---------- brillo que cruza el titulo ----------
   Un degrade mas ancho que el texto, recortado a la forma de las
   letras y desplazado en loop: la franja clara pasa de un lado al
   otro. text-fill-color le gana al `color: #fff !important` que el
   bloque de mobile le pone a .caption *, asi que el efecto sobrevive
   tambien en el celular.

   Va dentro de @supports porque si el navegador no sabe recortar el
   fondo al texto, un fill transparente dejaria el titulo invisible.
   Sin soporte no hay brillo, pero el texto se lee: eso es lo que
   importa. */
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .hero-shine {
    background: linear-gradient(
      100deg,
      #ffffff 0%,
      #ffffff 40%,
      #bcdcff 48%,
      #ffffff 56%,
      #ffffff 100%
    );
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
    filter: drop-shadow(0 2px 14px rgba(0,0,0,.55));
    animation: heroBrillo 5s linear infinite;
  }
}

@keyframes heroBrillo {
  from { background-position: 100% 0; }
  to   { background-position: -100% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-badge::before,
  .hero-shine { animation: none; }
  .hero-shine { -webkit-text-fill-color: #fff; }
}


/* ============================================================
   2. CARD DE PRODUCTO  ·  direccion "B / Ficha"
   ------------------------------------------------------------
   UN solo componente para la home y para la tienda. Antes habia
   dos sistemas (.home-product-* y .shop-page .product-card-*)
   que se fueron separando; los dos se borraron de style.css.
   ============================================================ */

.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 20px;
}

@media (max-width: 560px) {
  .products-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
}

.product-card {
  background: #ffffff;
  border: 1px solid #E3E5E9;
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.product-card:hover {
  border-color: #C6CAD2;
  box-shadow: 0 10px 26px rgba(16, 20, 28, .10);
  transform: translateY(-2px);
}

/* ---------- imagen ---------- */
.product-card-image {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Cuadrada, no 4:3. Las fotos de celulares son verticales: en una
     caja apaisada quedan chiquitas y con aire muerto a los costados. */
  aspect-ratio: 1 / 1;
  /* Blanco, no gris: las fotos de los productos vienen con fondo
     blanco, y sobre gris se les ve el rectangulo recortado. Lo que
     separa la tarjeta del fondo es el gris de la seccion, no esto. */
  background: var(--surface);
  border-bottom: 1px solid var(--line-soft);
  border-bottom: 1px solid #EEF0F3;
  overflow: hidden;
}

.product-card-image img {
  width: 82%;
  height: 88%;
  object-fit: contain;
}

/* Pill de estado sobre la foto */
.product-card-pill {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 5px;
  border: 1px solid transparent;
}

.product-card-pill.is-new  { background: var(--nuevo-bg); color: var(--nuevo); border-color: #B7E0C9; }
.product-card-pill.is-used { background: var(--usado-bg); color: var(--usado); border-color: #EFD9A8; }

/* ---------- cuerpo ---------- */
.product-card-body {
  padding: var(--e-4) var(--e-4) var(--e-5);
  display: flex;
  flex-direction: column;
  flex: 1;
}

.product-card-category {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #8B92A0;
  margin-bottom: 6px;
}

.product-card-name {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  color: #14161A;
  margin: 0 0 12px;
  min-height: 2.7em;
}

.product-card-name a {
  color: inherit;
  text-decoration: none;
}

.product-card-name a:hover { text-decoration: underline; }

.product-card-price {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -.025em;
  color: #14161A;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

/* Se renderiza siempre, aunque este vacio: mantiene todas las
   cards de la fila con la misma altura de bloque de precio. */
.product-card-usd {
  font-size: 11px;
  color: #8B92A0;
  margin: 3px 0 14px;
  min-height: 1em;
  font-variant-numeric: tabular-nums;
}

/* ---------- acciones ---------- */
.product-card-actions {
  margin-top: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.pc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  text-align: center;
  text-decoration: none;
  font-size: 12.5px;
  font-weight: 600;
  padding: 9px 4px;
  border-radius: 9px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease;
}

.pc-btn--ghost {
  color: #14161A;
  border-color: #D6D9E0;
  background: #ffffff;
}

.pc-btn--ghost:hover { background: #F4F5F7; color: #14161A; }

.pc-btn--wa {
  color: #ffffff;
  background: #1FA85C;
  border-color: #1FA85C;
}

.pc-btn--wa:hover { background: #18904E; color: #ffffff; }

.pc-btn--disabled {
  color: #9AA0AB;
  background: #F1F2F4;
  border-color: #E3E5E9;
  cursor: not-allowed;
}

/* En pantallas chicas los dos botones no entran lado a lado */
@media (max-width: 560px) {
  .product-card-actions { grid-template-columns: 1fr; }
  .product-card-name { font-size: 13px; min-height: 2.6em; }
  .product-card-price { font-size: 18px; }
}

/* La home usa la misma grilla que la tienda */
.home-featured-section {
  background: #F5F5F7;
  padding: 56px 0 64px;
  margin-top: 48px;
}

.home-section-title {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: #14161A;
  margin: 0 0 26px;
}


/* ============================================================
   3. ESTADOS DE CARGA
   ------------------------------------------------------------
   Skeletons con la forma real de la card, en vez del texto
   "Cargando productos...". Sin salto de layout al llegar los datos.
   ============================================================ */

@keyframes sgShimmer {
  0%   { background-position: -420px 0; }
  100% { background-position: 420px 0; }
}

.sk .sk-thumb,
.sk .sk-line,
.sk .sk-btn {
  background: #E9E9EE;
  background-image: linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.75) 50%,
    rgba(255,255,255,0) 100%
  );
  background-size: 420px 100%;
  background-repeat: no-repeat;
  animation: sgShimmer 1.25s ease-in-out infinite;
  border-radius: 7px;
}

@media (prefers-reduced-motion: reduce) {
  .sk .sk-thumb,
  .sk .sk-line,
  .sk .sk-btn { animation: none; }
}

.sk { pointer-events: none; }

.sk .sk-thumb {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 0;
}

.sk .sk-line { height: 11px; margin-bottom: 9px; }
.sk .sk-line--sm    { width: 38%; height: 9px; }
.sk .sk-line--lg    { width: 88%; height: 14px; margin-bottom: 16px; }
.sk .sk-line--price { width: 52%; height: 19px; margin-bottom: 20px; }

.sk .sk-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sk .sk-btn { height: 34px; border-radius: 9px; }

@media (max-width: 560px) {
  .sk .sk-actions { grid-template-columns: 1fr; }
}

/* ---------- Estados vacio / error ---------- */
.home-products-state {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px 24px;
  background: #ffffff;
  border: 1px solid rgba(0,0,0,.07);
  border-radius: 16px;
}

.home-products-state-icon {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #F2F2F7;
  color: #6E6E73;
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 16px;
}

.home-products-state-title {
  font-size: 17px;
  font-weight: 600;
  color: #1D1D1F;
  margin: 0 0 6px;
}

.home-products-state-text {
  font-size: 14px;
  line-height: 1.5;
  color: #6E6E73;
  margin: 0;
  max-width: 42ch;
}

.home-products-retry {
  margin-top: 20px;
  padding: 10px 24px;
  border: 0;
  border-radius: 999px;
  background: #1D1D1F;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity .18s ease, transform .12s ease;
}

.home-products-retry:hover { opacity: .85; transform: translateY(-1px); }

/* ---------- Toolbar de la tienda ---------- */
.shop-toolbar {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}

.shop-search {
  position: relative;
  flex: 1 1 260px;
  display: flex;
  align-items: center;
  background: #fff;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 999px;
  padding: 0 18px;
  transition: border-color .18s ease, box-shadow .18s ease;
}

.shop-search:focus-within {
  border-color: rgba(0,0,0,.4);
  box-shadow: 0 0 0 4px rgba(0,0,0,.06);
}

.shop-search .fa { color: #8E8E93; font-size: 14px; margin-right: 10px; }

.shop-search input {
  flex: 1;
  border: 0;
  outline: none;
  background: transparent;
  height: 44px;
  font-size: 15px;
  color: #1D1D1F;
  min-width: 0;
}

.shop-search input::placeholder { color: #8E8E93; }

.shop-result-count {
  font-size: 13px;
  color: #6E6E73;
  white-space: nowrap;
}

.category-filter-count {
  display: inline-block;
  margin-left: 6px;
  font-size: 11px;
  font-weight: 600;
  color: #8E8E93;
}

.category-filter-btn.active .category-filter-count { color: inherit; opacity: .7; }


/* ============================================================
   4. FOOTER  ·  direccion "2 / Columnas"
   ------------------------------------------------------------
   Antes habia dos footers distintos: el minimal oscuro (home y
   tienda) y el del theme Electro (el resto). Ahora es uno solo,
   con navegacion, direccion y horarios en texto: eso es lo que
   Google lee para posicionarte en busquedas locales.

   Es el mismo bloque, identico, en las siete paginas que lo
   tienen. Si se toca aca, se toca en las siete.
   ============================================================ */

.footer-columns {
  /* Un resplandor apenas visible arriba al centro. Sin el, el corte
     entre la pagina blanca y el negro es una linea dura; con el, el
     footer se lee como una pieza y no como un recorte pegado. */
  background:
    radial-gradient(1100px 280px at 50% 0,
      rgba(255, 255, 255, .055) 0%, transparent 72%),
    #0B0B0D;
  color: #ffffff;
  border-top: 1px solid rgba(255,255,255,.08);
  margin-top: 64px;
}

.footer-columns .container { padding-top: 60px; }

.footer-cols {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1.35fr;
  gap: 44px;
  padding-bottom: 46px;
}

@media (max-width: 900px) {
  .footer-cols { grid-template-columns: 1fr 1fr; gap: 34px; }
}

@media (max-width: 560px) {
  .footer-cols { grid-template-columns: 1fr; gap: 32px; }
}

/* ---------- marca ---------- */
.footer-logo {
  height: 42px;
  width: auto;
  display: block;
  margin-bottom: 16px;
}

.footer-pitch {
  font-size: 13.5px;
  line-height: 1.65;
  color: #9A9AA4;
  margin: 0 0 24px;
  max-width: 34ch;
}

/* ---------- Instagram ---------- */
/* Va en la columna de marca y no en la lista de links: no es una
   pagina del sitio, es donde esta el resto de la tienda. Con el
   arroba a la vista, que es lo que la gente busca para copiarlo. */
.footer-ig {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 24px;
  padding: 9px 16px 9px 10px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--r-full);
  color: #D2D2D9;
  text-decoration: none;
  transition: border-color .16s ease, background .16s ease, transform .14s ease;
}

.footer-ig-glifo {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  color: #fff;
  background: linear-gradient(135deg,
    #F58529 0%, #DD2A7B 45%, #8134AF 72%, #515BD4 100%);
}

.footer-ig-texto {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.footer-ig-texto strong {
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
}

.footer-ig-texto small {
  font-size: 11.5px;
  color: #7E7E88;
}

.footer-ig:hover,
.footer-ig:focus-visible {
  border-color: rgba(255,255,255,.28);
  background: rgba(255,255,255,.04);
  color: #D2D2D9;
  text-decoration: none;
  transform: translateY(-1px);
}

/* Los logos de pago estaban a 26px y eran ilegibles */
.footer-pagos-titulo {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #5E5E6A;
}

.footer-payments {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.footer-payments img {
  height: 28px;
  width: 44px;
  object-fit: contain;
  background: #ffffff;
  border-radius: 6px;
  padding: 4px 5px;
}

/* ---------- columnas de links ---------- */
.footer-columns h4 {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #6E6E7A;
  margin: 0 0 16px;
}

.footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

/* El subrayado crece desde la izquierda en vez de aparecer entero.
   Va en background y no en border-bottom porque asi respeta el salto
   de linea de un texto largo y no se come el descendente de las
   letras que bajan. */
.footer-col ul a {
  color: #D2D2D9;
  text-decoration: none;
  font-size: 14px;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  padding-bottom: 2px;
  transition: color .16s ease, background-size .24s ease;
}

.footer-col ul a:hover {
  color: #ffffff;
  background-size: 100% 1px;
}

/* ---------- contacto ---------- */
.footer-datos {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-datos li {
  display: grid;
  /* Columna fija para el icono: asi las tres lineas arrancan
     alineadas aunque el icono del telefono sea mas angosto que el
     del mapa, y el texto de dos renglones no se meta debajo. */
  grid-template-columns: 16px 1fr;
  gap: 10px;
  align-items: start;
  font-size: 14px;
  line-height: 1.5;
  color: #D2D2D9;
}

.footer-datos i {
  color: #6E6E7A;
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
}

.footer-datos a {
  color: #D2D2D9;
  text-decoration: none;
  transition: color .16s ease;
}

.footer-datos a:hover { color: #ffffff; text-decoration: underline; }

.footer-wa {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  background: #1FA85C;
  color: #ffffff;
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 600;
  padding: 11px 20px;
  border-radius: 999px;
  transition: background .16s ease, transform .14s ease, box-shadow .16s ease;
}

.footer-wa:hover {
  background: #18904E;
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(31, 168, 92, .28);
}

/* ---------- barra inferior ---------- */
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.09);
  padding: 20px 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}

.footer-bottom small {
  font-size: 12.5px;
  color: #7E7E88;
}

/* ---------- firma ---------- */
/* Un credito de autor tiene que estar y no pedir turno: gris como el
   copyright, y recien al pasar por encima se enciende el nombre. */
.footer-credito {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: #7E7E88;
  text-decoration: none;
  transition: color .16s ease;
}

.footer-credito strong {
  color: #B9B9C4;
  font-weight: 700;
  transition: color .16s ease;
}

.footer-credito-flecha {
  opacity: .55;
  transition: transform .18s ease, opacity .18s ease;
}

.footer-credito:hover,
.footer-credito:focus-visible {
  color: #9A9AA4;
  text-decoration: none;
}

.footer-credito:hover strong,
.footer-credito:focus-visible strong { color: #ffffff; }

.footer-credito:hover .footer-credito-flecha,
.footer-credito:focus-visible .footer-credito-flecha {
  opacity: 1;
  transform: translate(2px, -2px);
}

@media (max-width: 560px) {
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .footer-wa:hover { transform: none; }
  .footer-ig:hover { transform: none; }
  .footer-credito:hover .footer-credito-flecha { transform: none; }
  .footer-col ul a { transition: color .16s ease; }
}

.footer-columns a:focus-visible {
  outline: 2px solid #1FA85C;
  outline-offset: 3px;
}


/* ============================================================
   5. FRANJA DE FEATURES
   ------------------------------------------------------------
   El icono se solapaba con el texto (se veia sobre todo en el
   "99%") y los textos partian mal: "Metodos de / pago".
   En mobile era una torre de 618px que empujaba los productos
   abajo del fold.
   ============================================================ */

.features-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: stretch;
}

.features-list .feature {
  float: none !important;
  width: auto !important;
  padding: 22px 18px !important;
  border-right: 1px solid rgba(0,0,0,.07);
}

/* El theme separaba con border-left en .feature + .feature */
.features-list .feature + .feature { border-left: 0; }
.features-list .feature:last-child { border-right: 0; }

/* El theme fija .features-list .media { width:150px }: eso comprimia la
   fila y hacia que el icono se montara sobre el texto. */
.features-list .feature .media {
  display: flex !important;
  align-items: center;
  gap: 14px;
  width: auto !important;
  margin: 0 !important;
  height: 100%;
}

/* .media-left / .media-body son table-cell en el theme */
.features-list .feature .media-left,
.features-list .feature .media-body {
  display: block;
  width: auto;
  vertical-align: middle;
}

/* El icono deja de superponerse.
   El theme le da tamanos distintos a cada glifo (2.571em, y 3.386em
   al de "99% resenas"), asi que se desbordaban de su caja y pisaban
   el texto. Los normalizamos todos al mismo tamano. */
.features-list .feature .feature-icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  color: #1D1D1F;
  padding: 0;
}

.features-list .feature .feature-icon i,
.features-list .media-left i,
.features-list .media-left i.ec-customers {
  font-size: 30px !important;
  line-height: 1;
  display: block;
}

.features-list .feature .feature-text {
  font-size: 13px;
  line-height: 1.35;
  color: #6E6E73;
  text-align: left;
  padding: 0;
  text-wrap: balance;
}

.features-list .feature .feature-text strong {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  color: #1D1D1F;
}

/* Dos de los cinco llevan a algún lado: la garantía a su pagina y el
   Plan Canje a WhatsApp. El enlace ocupa toda la celda, no solo el
   texto, y se nota al pasar por encima; los otros tres se quedan
   quietos, que es la forma honesta de decir que no son clicables. */
.features-list .feature-enlace {
  display: block;
  height: 100%;
  color: inherit;
  text-decoration: none;
  transition: color var(--transicion);
}

.features-list .feature:has(.feature-enlace) {
  transition: background var(--transicion);
}

.features-list .feature:has(.feature-enlace:hover),
.features-list .feature:has(.feature-enlace:focus-visible) {
  background: var(--surface-2);
}

.features-list .feature-enlace:hover .feature-text,
.features-list .feature-enlace:hover .feature-icon { color: var(--ink); }

.features-list .feature-enlace:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: -4px;
  border-radius: var(--r-sm);
}

@media (max-width: 1100px) {
  .features-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .features-list .feature:nth-child(3n) { border-right: 0; }
  .features-list .feature { border-bottom: 1px solid rgba(0,0,0,.07); }
}

@media (max-width: 700px) {
  /* En mobile: 2 columnas en vez de una torre vertical */
  .features-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .features-list .feature:nth-child(3n) { border-right: 1px solid rgba(0,0,0,.07); }
  .features-list .feature:nth-child(2n) { border-right: 0; }

  /* Son cinco en dos columnas: el quinto quedaba solo en la fila,
     ocupando media pantalla y con media pantalla vacia al lado. Se
     lo estira a las dos columnas y la franja cierra pareja. */
  .features-list .feature:last-child {
    grid-column: 1 / -1;
    border-right: 0;
  }
  .features-list .feature { padding: 16px 14px; }
  .features-list .feature .media { flex-direction: column; text-align: center; gap: 8px; }
  .features-list .feature .feature-text { text-align: center; font-size: 12px; }
  .features-list .feature .feature-icon { font-size: 26px; width: auto; }
}


/* ============================================================
   6. RITMO VERTICAL DE LA HOME
   ------------------------------------------------------------
   Quedaban ~220px de blanco muerto entre el ultimo bloque y el
   footer, y los bloques de ads no respiraban parejo.
   ============================================================ */

.home-v3-content { margin-bottom: 0; }

.home-v3-features-block { margin: 40px 0 36px; }

.home-v3-ads-block { margin-bottom: 0; }

.home-v3-ads-block .ad .media-body { padding: 1.8em 0 1.6em 0; }

/* El ultimo bloque pega contra el footer, sin hueco */
#content .site-main > section.home-v3-content:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
}

#content.site-content { padding-bottom: 0; }

/* ============================================================
   HEADER: logo y buscador a la misma altura
   ------------------------------------------------------------
   La plantilla arma esa fila con floats (.header-logo al 25% y
   .navbar-search al 52%), y los floats alinean por ARRIBA. Como
   el logo mide 82px de alto y el buscador 44, quedaban con el
   borde de arriba en el mismo punto pero con los centros a 19px
   de distancia: el buscador se veia despegado hacia arriba.

   Con flex + align-items:center se emparejan por el centro. Los
   anchos no cambian: el 25% y el 52% siguen valiendo, ahora como
   flex-basis en vez de ancho de float.

   Solo desde 992px, que es donde vive este header (arriba esta
   .container.hidden-md-down; abajo se usa el .handheld-header,
   que no lleva .row y no se toca).
   ============================================================ */
@media (min-width: 992px) {
  .site-header.header-v3 > .container > .row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
  }
}

/* ============================================================
   BARRA DE BENEFICIOS (marquesina)
   ------------------------------------------------------------
   Reemplaza la vieja top-bar ("Bienvenidos" + "Ubicacion", las
   dos con href="#").

   Como funciona el loop: el track lleva 4 grupos identicos en
   fila y se desplaza 25% de su ancho, o sea EXACTAMENTE un
   grupo. Al terminar, cada grupo ocupa el lugar del anterior y
   el cuadro es identico al inicial: no hay salto ni costura.
   Como el desplazamiento es un grupo (ancho fijo) y no un
   porcentaje de la ventana, la velocidad en px/s es la misma en
   el celular que en el escritorio con una sola duracion.

   Se anima solo transform, que va en el compositor: no dispara
   layout ni repaint en cada frame.
   ============================================================ */
.promo-bar {
  position: relative;
  overflow: hidden;
  background: #fff;
  color: #111;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  padding: 10px 0;
}

.promo-track {
  display: flex;
  width: max-content;
  /* 16s sobre un grupo de ~840px da ~52px/s, que es velocidad de lectura
     comoda para un ticker (medido, no estimado). */
  animation: promo-desliza 16s linear infinite;
}

/* Al pasar el mouse se frena, para poder leer el mensaje entero */
.promo-bar:hover .promo-track { animation-play-state: paused; }

.promo-group {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  list-style: none;
  /* Seguro para pantallas muy anchas.
     Para que no aparezca un hueco, los 3 grupos que van adelante tienen que
     tapar la ventana: 3 x grupo >= ancho. El grupo mide ~840px por su
     contenido, o sea que alcanza hasta 2520px; de ahi para arriba (monitores
     de 2560) quedaba un hueco al final de cada vuelta. Con 34vw el grupo
     nunca baja de un tercio de la ventana, y este minimo solo entra en juego
     por encima de esos 2520px: mas abajo manda el ancho natural y la
     velocidad se mantiene igual en todos lados. */
  min-width: 34vw;
}

.promo-group li {
  display: flex;
  align-items: center;
  gap: 9px;
  white-space: nowrap;
}

/* El punto separador va DESPUES de cada mensaje, incluido el ultimo
   de cada grupo: ese ultimo es el que separa un grupo del siguiente
   cuando el loop los encadena. */
.promo-group li::after {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(0,0,0,.38);
  margin: 0 30px 0 22px;
}

.promo-bar i {
  font-size: 15px;
  line-height: 1;
}

@keyframes promo-desliza {
  from { transform: translateX(0); }
  to   { transform: translateX(-25%); }   /* un grupo de los cuatro */
}

@media (max-width: 767px) {
  .promo-bar { font-size: 12px; padding: 9px 0; }
  .promo-group li::after { margin: 0 22px 0 16px; }
  .promo-bar i { font-size: 14px; }
}

/* Sin movimiento: se muestra un solo grupo, centrado y en una linea
   (o dos, si no entra). Los mensajes se leen igual. */
@media (prefers-reduced-motion: reduce) {
  .promo-track {
    animation: none;
    width: 100%;
    justify-content: center;
  }
  .promo-group + .promo-group { display: none; }
  .promo-group {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 6px;
  }
  .promo-group li:last-child::after { display: none; }
}

/* ============================================================
   MENU: subrayado fino al hover
   ============================================================
   Saca los divisores, cambia el hover de gris-bloque a
   subrayado amarillo que crece desde el centro. La pagina
   activa queda con el subrayado fijo. */

.navbar-primary .navbar-nav > .menu-item > a {
  border-right: none;
  position: relative;
  transition: color .2s ease;
}

.navbar-primary .navbar-nav > .menu-item > a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: #fff;
  transform: translateX(-50%);
  transition: width .2s ease;
}

.navbar-primary .navbar-nav > .menu-item > a:hover,
.navbar-primary .navbar-nav > .menu-item > a:focus {
  color: #fff;
  background-color: transparent;
}

.navbar-primary .navbar-nav > .menu-item > a:hover::after,
.navbar-primary .navbar-nav > .menu-item > a:focus::after {
  width: 100%;
}

/* Pagina activa: subrayado fijo */
.navbar-primary .navbar-nav > .menu-item.active > a {
  color: #fff;
}

.navbar-primary .navbar-nav > .menu-item.active > a::after {
  width: 100%;
}


/* ============================================================
   MENU MOBILE (drawer + burger)
   ------------------------------------------------------------
   El theme lo dejaba como un panel gris pizarra (#333e48) con una
   barra "Close" en ingles, items de texto pelado sin separadores
   ni jerarquia, y sin fondo detras: el menu abierto se mezclaba
   con la pagina. Nada de eso conversaba con el blanco y negro del
   resto del sitio.

   Que cambia aca:
   - Panel casi negro con vidrio esmerilado, ancho acotado.
   - El deslizamiento pasa de animar `left` a animar `transform`.
     Animar `left` recalcula layout en cada frame; transform va al
     compositor, que es lo que hace que en un celular se sienta
     fluido en vez de a los saltos.
   - La hamburguesa se dibuja con CSS y se transforma en X. El
     theme usaba dos botones que se intercambiaban con display,
     y un cambio de display no se puede animar.
   - Backdrop oscuro, separadores finos, chevrones y entrada
     escalonada de los items.
   ============================================================ */

/* ---------- boton hamburguesa ---------- */

/* El theme lo esconde al abrir (`.toggled .navbar-toggle-hamburger
   { display: none }`) para mostrar el boton de cerrar. Aca el mismo
   boton se queda y se transforma, asi que ese intercambio se anula:
   se oculta el de cerrar y este sobrevive al `.toggled`.
   Los 3 selectores llevan una clase de mas para ganarle por
   especificidad sin recurrir a !important. */
.handheld-navbar-toggle-buttons,
.sticky-wrapper .handheld-navbar-toggle-buttons.stuck {
  position: relative;
  z-index: 10001;
}

.handheld-navbar-toggle-buttons .navbar-toggler.navbar-toggle-close {
  display: none;
}

.handheld-navbar-toggle-buttons .navbar-toggler.navbar-toggle-hamburger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 50%;
  background: rgba(255,255,255,.07);
  color: #fff;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .2s ease, border-color .2s ease, transform .12s ease;
}

.handheld-navbar-toggle-buttons .navbar-toggler.navbar-toggle-hamburger:active {
  transform: scale(.94);
  background: rgba(255,255,255,.14);
}

/* El <i> viene con el glifo \f0c9 de FontAwesome. Se lo saca y el
   elemento se reusa como la barra del medio; ::before y ::after son
   la de arriba y la de abajo. */
.navbar-toggle-hamburger .fa::before { content: ""; }

.navbar-toggle-hamburger i {
  position: relative;
  display: block;
  width: 18px;
  height: 1.5px;
  background: currentColor;
  border-radius: 2px;
  transition: background .2s ease;
}

.navbar-toggle-hamburger i::before,
.navbar-toggle-hamburger i::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  background: currentColor;
  border-radius: inherit;
  transition: transform .32s cubic-bezier(.16,1,.3,1);
}

.navbar-toggle-hamburger i::before { top: -5.5px; }
.navbar-toggle-hamburger i::after  { top:  5.5px; }

/* Abierto: la barra del medio se apaga y las otras dos se cruzan.
   Se apaga con background y no con opacity porque ::before/::after
   pintan su propio fondo: el background del padre no los afecta. */
.toggled .navbar-toggle-hamburger i { background: transparent; }
.toggled .navbar-toggle-hamburger i::before { transform: translateY(5.5px) rotate(45deg); }
.toggled .navbar-toggle-hamburger i::after  { transform: translateY(-5.5px) rotate(-45deg); }

/* ---------- backdrop ---------- */

/* Va como pseudo del wrapper para no tocar el HTML de las 7 paginas.
   pointer-events:none es intencional: el JS del theme cierra el menu
   cuando detecta un click fuera del wrapper, asi que el click tiene
   que atravesar el velo y llegar a la pagina. Si el velo lo capturara,
   tocar afuera dejaria de cerrar. */
.handheld-navigation-wrapper::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 9998;
  transition: opacity .32s ease, visibility .32s ease;
}

.handheld-navigation-wrapper.toggled::before {
  opacity: 1;
  visibility: visible;
}

/* ---------- panel ---------- */
.handheld-navigation {
  left: 0;
  width: min(86vw, 360px);
  background: rgba(9,9,11,.94);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  backdrop-filter: blur(20px) saturate(1.3);
  border-right: 1px solid rgba(255,255,255,.09);
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translate3d(-100%, 0, 0);
  transition: transform .42s cubic-bezier(.16,1,.3,1);

  /* La barra de scroll del theme estaba siempre visible y cortaba el
     borde del panel. */
  scrollbar-width: none;
}

.handheld-navigation::-webkit-scrollbar { display: none; }

/* La sombra SOLO cuando el menu esta abierto.
   El panel vive corrido a -100% con la sombra puesta, y una sombra de
   24px de desplazamiento con 60px de difuminado sigue dibujandose
   aunque quien la tira este afuera de la pantalla: quedaba una mancha
   gris de unos 84px bajando por todo el borde izquierdo del celular,
   encima del banner y de los productos. Se veia, pero como no hay
   ningun elemento ahi, no habia nada que senialar. */
.handheld-navigation-wrapper.toggled .handheld-navigation {
  transform: translate3d(0, 0, 0);
  box-shadow: 24px 0 60px rgba(0,0,0,.5);
}

/* ---------- buscador del menu de celular ---------- */
/* Va sobre el panel oscuro, asi que es un campo claro translucido:
   un input blanco solido corta el panel al medio. */
.hh-buscar {
  position: relative;
  display: flex;
  align-items: center;
  /* El margen de arriba no es aire de mas: el boton de cerrar flota
     ahi (y=75..117), porque es el mismo boton del encabezado que se
     da vuelta. Sin esto el campo le pasaba por debajo.
     A los costados, 22px, que es donde arranca el texto de los items
     del menu. */
  margin: 56px 22px 22px;
  padding: 0 14px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--r-full);
  background: rgba(255,255,255,.06);
  transition: border-color .16s ease, background .16s ease;
}

.hh-buscar:focus-within {
  border-color: rgba(255,255,255,.4);
  background: rgba(255,255,255,.1);
}

.hh-buscar i {
  flex: 0 0 auto;
  margin-right: 10px;
  font-size: 14px;
  color: rgba(255,255,255,.45);
}

.hh-buscar input {
  flex: 1 1 auto;
  min-width: 0;
  height: 46px;
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  font-family: var(--fuente-texto);
  font-size: 15px;
  font-weight: 600;
}

.hh-buscar input::placeholder { color: rgba(255,255,255,.42); font-weight: 600; }
.hh-buscar input:focus { outline: none; }

/* La lupa de la izquierda ya dice que esto busca. El boton existe
   para que se pueda enviar con el teclado y para quien navegue con
   teclado o lector de pantalla, pero no necesita ocupar lugar. */
.hh-buscar button {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.hh-buscar button:focus-visible {
  position: static;
  width: auto;
  height: auto;
  margin: 0 0 0 10px;
  clip: auto;
  padding: 6px 12px;
  border-radius: var(--r-full);
  background: #fff;
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
}

/* ---------- fila superior: "MENU" + X ---------- */

/* El markup solo trae <span class="ehm-close">Close</span>. El texto
   se apaga con font-size:0 en el contenedor y los dos pseudos lo
   recuperan con su propio tamano: asi la palabra en ingles no se ve
   y la fila queda con etiqueta a la izquierda y X a la derecha, sin
   tocar el HTML. */
.handheld-navigation .ehm-close {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 0;
  padding: 20px 22px 18px;
  padding-top: calc(20px + env(safe-area-inset-top, 0px));
  background: transparent;
  border-bottom: 1px solid rgba(255,255,255,.09);

  /* Es solo un rotulo: el cierre lo maneja el boton que flota arriba a
     la derecha. Sin esto la fila seguiria cerrando el menu al tocarla,
     que es lo que hacia el "Close" original y no se anuncia a la vista. */
  pointer-events: none;
}

.handheld-navigation .ehm-close::before {
  content: "Menú";
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #6E6E7A;
  margin: 0;
  padding: 0;
}

/* ---------- items ---------- */
.handheld-navigation ul li + li {
  border-top: 1px solid rgba(255,255,255,.07);
}

.handheld-navigation ul li a {
  position: relative;
  display: flex;
  align-items: center;
  padding: 15px 22px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .01em;
  color: #E8E8ED;
  -webkit-tap-highlight-color: transparent;
  transition: color .18s ease, background .18s ease, padding-left .18s ease;
}

/* Chevron: indica que el item lleva a otra pagina */
.handheld-navigation ul li a::after {
  content: "\f105";
  font-family: "FontAwesome";
  font-weight: 400;
  margin-left: auto;
  font-size: 15px;
  color: #55555F;
  transition: transform .18s ease, color .18s ease;
}

.handheld-navigation ul li a:hover,
.handheld-navigation ul li a:active {
  color: #fff;
  background: rgba(255,255,255,.05);
  padding-left: 26px;
}

.handheld-navigation ul li a:hover::after,
.handheld-navigation ul li a:active::after {
  color: #fff;
  transform: translateX(3px);
}

/* Pagina actual: barra de acento a la izquierda.
   La clase la pone navbar-active.js. */
.handheld-navigation ul li.active > a {
  color: #fff;
  font-weight: 600;
  background: rgba(255,255,255,.05);
}

.handheld-navigation ul li.active > a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 2px;
  border-radius: 0 2px 2px 0;
  background: #fff;
}

/* ---------- entrada escalonada ---------- */

/* Los items entran uno detras del otro apenas se abre el panel. El
   retardo arranca en .12s para que empiecen cuando el drawer ya
   recorrio parte del camino, no antes. */
@keyframes menuItemIn {
  from { opacity: 0; transform: translateX(-14px); }
  to   { opacity: 1; transform: translateX(0); }
}

.handheld-navigation-wrapper.toggled .handheld-navigation ul li {
  animation: menuItemIn .4s cubic-bezier(.16,1,.3,1) both;
}

.handheld-navigation-wrapper.toggled .handheld-navigation ul li:nth-child(1) { animation-delay: .12s; }
.handheld-navigation-wrapper.toggled .handheld-navigation ul li:nth-child(2) { animation-delay: .17s; }
.handheld-navigation-wrapper.toggled .handheld-navigation ul li:nth-child(3) { animation-delay: .22s; }
.handheld-navigation-wrapper.toggled .handheld-navigation ul li:nth-child(4) { animation-delay: .27s; }
.handheld-navigation-wrapper.toggled .handheld-navigation ul li:nth-child(5) { animation-delay: .32s; }
.handheld-navigation-wrapper.toggled .handheld-navigation ul li:nth-child(6) { animation-delay: .37s; }
.handheld-navigation-wrapper.toggled .handheld-navigation ul li:nth-child(7) { animation-delay: .42s; }

/* El boton flotante de WhatsApp (z-index 9999) queda por encima del
   backdrop y compite con el menu abierto. No es descendiente del
   wrapper, asi que la unica forma de alcanzarlo desde CSS es :has().
   Donde no haya soporte el selector se descarta y el boton sigue
   visible: molesta un poco, no rompe nada. */
body:has(.handheld-navigation-wrapper.toggled) .whatsapp-float {
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}

@media (prefers-reduced-motion: reduce) {
  .handheld-navigation { transition: none; }
  .handheld-navigation-wrapper.toggled .handheld-navigation ul li { animation: none; }
  .navbar-toggle-hamburger i,
  .navbar-toggle-hamburger i::before,
  .navbar-toggle-hamburger i::after { transition: none; }
}


/* ============================================================
   PAGINACION DE LA TIENDA
   ------------------------------------------------------------
   El catalogo entero llega en una sola consulta a Firestore, asi
   que el corte en paginas es del lado del cliente: cambiar de
   pagina no vuelve a pedir nada, solo recorta el array ya
   filtrado. Por eso el cambio es instantaneo y no hay estado de
   carga entre paginas.

   OJO CON EL NOMBRE: shop.html abre con
   <body class="shop-page full-color-background">, asi que una
   clase `.shop-page` para los botones le caia encima al body y lo
   convertia en un inline-flex de 40px de alto con borde. El
   resultado era la pagina entera de 3496px de ancho en una
   ventana de 1440. Por eso los botones se llaman
   `.shop-pagination-btn` y todo cuelga de `.shop-pagination`:
   dentro de ese prefijo no hay forma de pisar nada de afuera.

   La paleta sale de la card de producto (borde #E3E5E9, texto
   #14161A) para que la fila no se lea como una pieza pegada de
   otro lado.
   ============================================================ */

.shop-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 36px;
}

/* El atributo hidden lo pone el JS cuando hay una sola pagina. Sin
   esta linea el display:flex de arriba le gana y los controles se
   verian igual. */
.shop-pagination[hidden] { display: none; }

.shop-pagination .shop-pagination-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid #E3E5E9;
  border-radius: 10px;
  background: #ffffff;
  color: #14161A;
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, color .16s ease;
}

.shop-pagination .shop-pagination-btn:hover:not(:disabled):not(.is-current) {
  border-color: #C6CAD2;
  background: #F4F5F7;
}

.shop-pagination .shop-pagination-btn:focus-visible {
  outline: 2px solid #14161A;
  outline-offset: 2px;
}

.shop-pagination .shop-pagination-btn.is-current {
  background: #14161A;
  border-color: #14161A;
  color: #ffffff;
  cursor: default;
}

.shop-pagination .shop-pagination-btn:disabled {
  opacity: .38;
  cursor: not-allowed;
}

.shop-pagination .shop-pagination-btn--nav { padding: 0; }

.shop-pagination .shop-pagination-gap {
  min-width: 24px;
  text-align: center;
  color: #8B92A0;
  font-size: 14px;
  user-select: none;
}

@media (max-width: 560px) {
  .shop-pagination { gap: 6px; margin-top: 28px; }

  .shop-pagination .shop-pagination-btn {
    min-width: 36px;
    height: 36px;
    padding: 0 9px;
    font-size: 13px;
  }
}

/* ============================================================
   12. PRE VENTA IPHONE 18
   ------------------------------------------------------------
   Va apenas debajo del carrusel porque es lo que queremos que se
   lea primero. Fondo oscuro a proposito: la pagina es blanca, asi
   que la franja negra corta el scroll y se lee como "esto es lo
   importante" sin necesidad de agrandar todo.

   El precio en dolares manda y el peso va abajo en gris. Es el
   dato firme: el peso cambia todos los dias.
   ============================================================ */
.pv18 {
  /* Negro puro, no --ink: la foto de los equipos viene recortada
     sobre negro absoluto y cualquier otro tono le deja el rectangulo
     marcado alrededor. */
  background: #000;
  color: #fff;
  padding: var(--e-8) 0 var(--e-7);
  position: relative;

  /* La seccion vive adentro del .container de Bootstrap, que la
     recorta a 1170px. Esto la devuelve al ancho completo de la
     ventana sin mover el HTML de la plantilla: se corre media
     pantalla a la izquierda y se estira a 100vw. El .container de
     adentro vuelve a encuadrar el contenido.

     Se usa el ancho del documento y no 100vw porque 100vw incluye
     la barra de scroll, y eso agrega scroll horizontal. */
  /* Sin width: el bloque toma el ancho que le dejan los margenes.
     Con width:100% se fija al del padre y el truco no funciona. */
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  padding-left: calc(50vw - 50%);
  padding-right: calc(50vw - 50%);
  box-sizing: border-box;
}

/* --- Luz de fondo -------------------------------------------------
   Dos capas, las dos decorativas y las dos detras del contenido:

     ::before  un resplandor quieto arriba al centro. Levanta el negro
               justo detras del equipo para que el telefono no quede
               flotando en un vacio plano. Respira muy despacio.

     ::after   el destello: una banda de luz inclinada que cruza la
               franja y despues DESCANSA fuera de cuadro mas de la
               mitad del ciclo. Eso es lo que la hace leerse como un
               reflejo sobre metal y no como un cartel titilando: se
               nota cuando pasa, y no queda moviendose en el rabillo
               del ojo de alguien que esta leyendo un precio.

   El barrido mueve transform, no left ni background-position, asi lo
   resuelve la placa de video y no vuelve a maquetar la seccion en
   cada cuadro.
   ------------------------------------------------------------------ */
.pv18-brillo {
  position: absolute;
  inset: 0;
  z-index: 0;
  /* La banda es mas alta y mas ancha que la franja a proposito: asi
     entra y sale sin que se le vea el borde recto. Esto la recorta. */
  overflow: hidden;
  pointer-events: none;
}

.pv18-brillo::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -32%;
  width: min(1000px, 130%);
  aspect-ratio: 1 / 1;
  transform: translateX(-50%);
  background: radial-gradient(closest-side,
    rgba(255, 255, 255, .085) 0%,
    rgba(255, 255, 255, .030) 45%,
    transparent 72%);
  animation: pv18Respirar 9s ease-in-out infinite;
}

.pv18-brillo::after {
  content: "";
  position: absolute;
  top: -25%;
  bottom: -25%;
  left: 0;
  width: 32%;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 255, 255, .045) 34%,
    rgba(255, 255, 255, .125) 50%,
    rgba(255, 255, 255, .045) 66%,
    transparent 100%);
  /* Sin el desenfoque los dos bordes del degradado se ven como dos
     lineas; con el, es luz. */
  filter: blur(16px);
  will-change: transform;
  animation: pv18Destello 11s cubic-bezier(.42, 0, .38, 1) infinite;
}

@keyframes pv18Respirar {
  0%, 100% { opacity: .7; }
  50%      { opacity: 1; }
}

@keyframes pv18Destello {
  /* Cruza en los primeros 4,4 s y los 6,6 s restantes espera afuera. */
  0%        { transform: translate3d(-130%, 0, 0) skewX(-14deg); }
  40%, 100% { transform: translate3d(340%, 0, 0) skewX(-14deg); }
}

@media (prefers-reduced-motion: reduce) {
  /* Se queda el resplandor, que es ambiente y no se mueve; se va el
     barrido, que es lo que puede molestar. */
  .pv18-brillo::before { animation: none; opacity: 1; }
  .pv18-brillo::after  { display: none; }
}

/* La luz de fondo es una capa absoluta dentro de la seccion, asi que
   el contenido necesita su propio contexto para quedar arriba. */
.pv18 > .container {
  position: relative;
  z-index: 1;
}

.pv18-head {
  max-width: 38rem;
  /* Centrada: la seccion entera se lee sobre un eje, igual que el
     equipo y las chips que vienen abajo. */
  margin: 0 auto var(--e-7);
  text-align: center;
  /* La plantilla le pone borde inferior a todos los <header>, y en
     fondo oscuro aparece como una raya blanca bajo la bajada. */
  border: 0;
  padding: 0;
}

.pv18-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  margin: 0 0 var(--e-4);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #9AA4B2;
}

/* Punto que late: comunica "esto esta pasando ahora" sin una
   palabra mas. Se apaga si el visitante pidio menos movimiento. */
.pv18-dot {
  width: 7px;
  height: 7px;
  border-radius: var(--r-full);
  background: #34D399;
  box-shadow: 0 0 0 0 rgba(52, 211, 153, .6);
  animation: pv18Latido 2.2s ease-out infinite;
}

@keyframes pv18Latido {
  0%   { box-shadow: 0 0 0 0 rgba(52, 211, 153, .55); }
  70%  { box-shadow: 0 0 0 9px rgba(52, 211, 153, 0); }
  100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .pv18-dot { animation: none; }
}

.pv18-titulo {
  margin: 0 0 var(--e-4);
  font-size: clamp(2rem, 5vw, var(--t-3xl));
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.035em;
  text-wrap: balance;
  color: #fff;
}

.pv18-bajada {
  margin: 0;
  font-size: var(--t-md);
  line-height: 1.6;
  color: #A8B0BC;
}

/* --- Las dos tarjetas ---------------------------------------- */
.pv18-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: var(--e-5);
}

.pv18-card {
  background: #0C0F14;
  border: 1px solid #1E232B;
  border-radius: var(--r-lg);
  padding: var(--e-5) var(--e-5) var(--e-3);
}

.pv18-card-titulo {
  margin: 0 0 var(--e-4);
  font-size: var(--t-lg);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
  text-align: center;
}

.pv18-lista {
  margin: 0;
  padding: 0;
  list-style: none;
}

.pv18-fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  padding: var(--e-4) 0;
  border-top: 1px solid #1E232B;
}

.pv18-fila-info { display: flex; flex-direction: column; gap: 2px; }

.pv18-cap {
  font-size: var(--t-base);
  font-weight: 600;
  color: #E7EAEF;
}

.pv18-pesos {
  font-size: var(--t-sm);
  color: #7C8595;
  font-variant-numeric: tabular-nums;
}

.pv18-fila-precio {
  display: flex;
  align-items: center;
  gap: var(--e-4);
}

.pv18-usd {
  font-family: var(--fuente-titulo);
  font-size: var(--t-lg);
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: #fff;
  white-space: nowrap;
}

.pv18-reservar {
  flex-shrink: 0;
  padding: var(--e-2) var(--e-4);
  border-radius: var(--r-full);
  background: #fff;
  color: var(--ink);
  font-size: var(--t-sm);
  font-weight: 600;
  text-decoration: none;
  transition: background var(--transicion), transform var(--transicion);
}

.pv18-reservar:hover,
.pv18-reservar:focus-visible {
  background: #D8DDE5;
  color: var(--ink);
  text-decoration: none;
  transform: translateY(-1px);
}

/* --- Pie ------------------------------------------------------ */
.pv18-pie {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e-5);
  margin-top: var(--e-7);
  padding-top: var(--e-5);
  border-top: 1px solid #1E232B;
  text-align: center;
}

.pv18-nota {
  margin: 0 auto;
  max-width: 30rem;
  font-size: var(--t-sm);
  line-height: 1.5;
  color: #7C8595;
}

.pv18-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  padding: var(--e-3) var(--e-5);
  border-radius: var(--r-full);
  background: var(--wa);
  color: #fff;
  font-size: var(--t-base);
  font-weight: 600;
  text-decoration: none;
  transition: background var(--transicion);
}

.pv18-cta:hover,
.pv18-cta:focus-visible { background: var(--wa-ink); color: #fff; text-decoration: none; }

@media (max-width: 575px) {
  .pv18 { padding: var(--e-7) 0; }
  /* En pantalla angosta la fila se parte: el boton necesita ancho
     para ser comodo de tocar. */
  .pv18-fila { flex-direction: column; align-items: stretch; gap: var(--e-3); }
  .pv18-fila-precio { justify-content: space-between; }
  .pv18-cta { width: 100%; justify-content: center; }
}


/* 100vw incluye el ancho de la barra de scroll, asi que una franja a
   todo el ancho puede dejar unos pixeles de scroll horizontal. Se
   corta en la raiz: ninguna seccion del sitio scrollea de costado. */
html, body { overflow-x: hidden; }

/* --- Escenario de color --------------------------------------
   Va entre el titulo y los precios: primero el equipo, despues el
   numero. Los cuatro colores estan apilados uno encima del otro y
   se ve el que tiene .esta; el resto queda en opacidad 0.

   Todos salen del mismo encuadre original, al pixel, asi que al
   cambiar de color el equipo no se mueve: solo cambia el material.
   Eso es lo que hace que el cambio se lea como el mismo telefono
   en otro color y no como dos fotos distintas.
   -------------------------------------------------------------- */
.pv18-escena {
  position: relative;
  height: clamp(250px, 33vw, 430px);
  margin: 0 0 var(--e-4);
}

/* El resplandor toma el color del equipo elegido. Es el detalle que
   hace que el cambio se sienta en toda la seccion y no solo adentro
   del recuadro de la foto. */
.pv18-halo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 78%;
  height: 130%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(closest-side,
    var(--halo, rgba(255,255,255,.10)) 0%,
    transparent 72%);
  transition: background 700ms ease;
  pointer-events: none;
}

.pv18-equipo {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  /* Entra apenas mas chico y crece hasta su tamanio: el fundido solo
     se ve plano, con el micro zoom se siente que el equipo llega. */
  transform: scale(.955);
  transition: opacity 500ms ease, transform 750ms cubic-bezier(.2,.7,.3,1);
  pointer-events: none;
}

.pv18-equipo.esta {
  opacity: 1;
  transform: none;
}

.pv18-equipo img {
  display: block;
  width: auto;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
}

/* --- Selector de color --------------------------------------- */

.pv18-selector {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e-3);
  margin-bottom: var(--e-7);
}

/* El nombre del color escrito, no solo la muestra. Una chip gris
   clara puede ser plata, blanco o titanio: el nombre es el que se
   usa despues para pedirlo por WhatsApp. */
.pv18-color {
  margin: 0;
  font-family: var(--fuente-texto);
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
}

.pv18-chips {
  display: flex;
  gap: var(--e-3);
}

/* El tono de la chip esta un punto mas claro que el material real:
   el negro medido en la foto es #1E1E20 y sobre esta franja negra
   una chip de ese color no se ve. Una muestra tiene que poder
   senialarse, no solo ser fiel. */
.pv18-chip {
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 50%;
  background: var(--tono);
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: 0 0 0 0 rgba(255,255,255,0);
  cursor: pointer;
  transition: box-shadow 220ms ease, transform 220ms ease,
              border-color 220ms ease;
}

.pv18-chip:hover { transform: scale(1.08); }

/* El anillo va separado del borde, como el de Apple: pegado se lee
   como una chip mas gorda, separado se lee como "esta elegida". */
.pv18-chip.esta {
  border-color: transparent;
  box-shadow: 0 0 0 2px #000, 0 0 0 4px #fff;
}

.pv18-chip:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #000, 0 0 0 4px var(--accent, #0A5CE8);
}

@media (max-width: 575px) {
  .pv18-escena { height: clamp(230px, 62vw, 320px); }
  .pv18-chip   { width: 34px; height: 34px; }
  .pv18-chips  { gap: var(--e-4); }
}

@media (prefers-reduced-motion: reduce) {
  /* Se conserva el cambio de color, que es informacion: sin el, el
     boton no hace nada visible. Se van el zoom y la entrada. */
  .pv18-equipo { transition: opacity 200ms linear; transform: none; }
  .pv18-equipo.esta { transform: none; }
  .pv18-halo { transition: none; }
}


/* ============================================================
   13. BANNERS DEL CARRUSEL  (iPhone 18 · DJI · JBL)
   ------------------------------------------------------------
   La foto NO es un fondo que se recorta: es una tarjeta negra de
   esquinas redondeadas con los telefonos saliendose por abajo.
   Ese desborde es intencional del diseño, asi que la imagen se
   muestra ENTERA —nunca con object-fit: cover— sobre el gris del
   slider, que es lo que hace que el telefono parezca salirse.

   Los blancos de la foto original se volvieron transparentes; si
   alguna vez se reexporta, tiene que venir con alfa o el efecto
   se pierde.

   El texto no va quemado en la imagen: asi queda nitido en
   retina, se reacomoda en mobile y cambiar el copy no obliga a
   reexportar nada.

   MEDIDAS QUE IMPORTAN
   Ancho   2134 x 637, la tarjeta termina al 94.82% del alto.
   Celular 1134 x 637, mismo corte. Es la mitad derecha de la
           misma foto, con las esquinas izquierdas redibujadas:
           a 3.35:1 en un telefono quedaba una tira de 119 px.
   ============================================================ */

#owl-main .item.bnr {
  background: #F9F9F9 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 24px;
}

/* El velo oscuro del resto de los slides esta pensado para tapar
   una foto clara detras de texto blanco. Aca el slide es claro y
   la foto trae su propio negro. */
#owl-main .item.bnr::before { display: none !important; }

/* aspect-ratio + max-height: la tarjeta crece hasta donde entra a
   lo ancho, y si el slide es mas bajo que eso se achica sin
   deformarse. Sin esto habria que elegir entre recortarla o
   estirarla, y las dos cosas rompen el desborde.

   Y es ademas el marco de referencia del texto. El slide ocupa TODA
   la pantalla; la tarjeta se planta en 1500 px y se centra. Si el
   texto se posiciona contra el slide, a partir de los ~1550 px de
   ancho el titulo se queda pegado al borde de la pantalla mientras
   la tarjeta se va al centro, y termina escrito en blanco sobre el
   gris: invisible. Por eso position:relative vive aca. */
.bnr-tarjeta {
  position: relative;
  display: block;
  width: 100%;
  max-width: 1500px;
  max-height: 100%;
  /* Cada banner tiene su propia proporcion y su propio punto donde
     termina el rectangulo negro. Van en el HTML de cada slide
     porque son datos de ESA foto, no del diseño. */
  aspect-ratio: var(--proporcion, 2134 / 637);
}

.bnr-fondo,
.bnr-fondo img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

/* ---------- Texto ---------- */

/* Se alinea con la TARJETA, no con la imagen: los ultimos 5.18%
   son el telefono saliendose, y centrar el texto ahi lo dejaria
   corrido hacia abajo. */
.bnr-inner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--tapa, 95%);
  z-index: 2;
  display: flex;
  align-items: center;
  padding: 0 5.5%;
}

.bnr-texto {
  max-width: 46%;
  text-align: left;
}

.bnr-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 var(--e-3);
  font-family: var(--fuente-texto);
  font-size: clamp(.625rem, .82vw, .75rem);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.62);
}

.bnr-punto {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #fff;
  animation: bnr-latir 2.4s ease-in-out infinite;
}

@keyframes bnr-latir {
  0%, 100% { box-shadow: 0 0 0 3px rgba(255,255,255,.10); }
  50%      { box-shadow: 0 0 0 7px rgba(255,255,255,.04); }
}

/* Las dos lineas no pesan igual. Sin color, la jerarquia la hacen
   el peso y la opacidad, y de paso queda marcado cual es la
   palabra que vende: PRECIO. */
.bnr-titulo {
  margin: 0;
  font-family: var(--fuente-titulo);
  font-size: clamp(1.75rem, 4.2vw, 4rem);
  line-height: .92;
  letter-spacing: -.035em;
  text-transform: uppercase;
}

.bnr-titulo .bnr-l1 { display: block; font-weight: 700; color: rgba(255,255,255,.50); }
.bnr-titulo .bnr-l2 { display: block; font-weight: 700; color: #fff; }

.bnr-sub {
  margin: var(--e-3) 0 0;
  font-family: var(--fuente-texto);
  font-size: clamp(.6875rem, .95vw, .875rem);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.62);
}

.bnr-acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-4);
  margin-top: var(--e-5);
}

/* Pastilla de contorno. Al pasar por encima se da vuelta a blanco
   solido: el unico bloque lleno de la pieza, asi que el ojo sabe
   donde hacer clic sin que haya que gritarle. */
.bnr-cta {
  display: inline-flex;
  align-items: center;
  padding: clamp(10px, 1vw, 14px) clamp(22px, 2.4vw, 34px);
  border: 1px solid rgba(255,255,255,.55);
  border-radius: var(--r-full);
  font-family: var(--fuente-texto);
  font-size: clamp(.6875rem, .9vw, .8125rem);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff;
  background: transparent;
  transition: background var(--transicion), color var(--transicion),
              border-color var(--transicion);
}

.bnr-cta:hover,
.bnr-cta:focus-visible {
  background: #fff;
  border-color: #fff;
  color: #000;
  text-decoration: none;
}

.bnr-cta-2 {
  font-family: var(--fuente-texto);
  font-size: clamp(.6875rem, .9vw, .8125rem);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.62);
  border-bottom: 1px solid rgba(255,255,255,.22);
  padding-bottom: 3px;
  transition: color var(--transicion), border-color var(--transicion);
}

.bnr-cta-2:hover,
.bnr-cta-2:focus-visible {
  color: #fff;
  border-color: #fff;
  text-decoration: none;
}

/* ---------- Mobile ---------- */

@media (max-width: 768px) {
  /* Tarjeta arriba, texto abajo. Encima no entra: en vertical los
     telefonos ocupan el ancho y no queda negro libre donde poner
     un titulo.

     Y como abajo el fondo es el gris claro del slider, el texto se
     da vuelta a tinta oscura. Blanco sobre #F9F9F9 no se lee. */
  /* 15px, que es el margen que usa el .container de Bootstrap en todo
     el resto del sitio: asi la tarjeta arranca en la misma linea que
     la franja de beneficios que viene justo abajo. */
  #owl-main .item.bnr {
    display: block;
    padding: 0 15px 26px !important;
  }

  /* La tarjeta deja de tener proporcion fija: su alto pasa a ser el
     de la foto MAS el texto, que en vertical va debajo y no encima.

     Sin esto se queda con el alto que le fija la proporcion, el
     texto cae ADENTRO —sobre la foto negra y en tinta oscura— y no
     se lee nada. */
  .bnr-tarjeta {
    max-width: none;
    max-height: none;
    aspect-ratio: auto;
  }

  /* La proporcion se muda a la foto, que asi reserva su lugar antes
     de terminar de bajar y la pagina no pega un salto. */
  .bnr-fondo {
    position: static;
    width: 100%;
    height: auto;
    aspect-ratio: var(--proporcion-movil, 1134 / 637);
  }

  .bnr-fondo img {
    position: static;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .bnr-inner {
    position: static;
    height: auto;
    display: block;
    padding: 22px 20px 0;
  }

  .bnr-texto {
    max-width: none;
    text-align: center;
  }

  /* Sobre el gris del slider, los grises translucidos que sirven
     encima del negro desaparecen. Aca cada nivel usa un color
     solido de la paleta, con contraste medido contra #F9F9F9. */
  .bnr-eyebrow  { justify-content: center; color: var(--muted); }
  .bnr-punto    { background: var(--ink); animation: none; }
  .bnr-titulo   { font-size: clamp(1.875rem, 9.5vw, 3rem); }
  .bnr-titulo .bnr-l1 { color: var(--muted); }
  .bnr-titulo .bnr-l2 { color: var(--ink); }
  .bnr-sub      { color: var(--ink-2); letter-spacing: .1em; }
  .bnr-acciones { justify-content: center; }

  .bnr-cta {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
  }
  .bnr-cta:hover,
  .bnr-cta:focus-visible {
    background: var(--accent-ink, #084BC0);
    border-color: var(--accent-ink, #084BC0);
    color: #fff;
  }

  .bnr-cta-2 {
    color: var(--muted);
    border-color: rgba(11,13,18,.25);
  }
  .bnr-cta-2:hover,
  .bnr-cta-2:focus-visible {
    color: var(--ink);
    border-color: var(--ink);
  }
}

@media (prefers-reduced-motion: reduce) {
  .bnr-punto { animation: none; }
}



/* ============================================================
   14. APARECER AL LLEGAR SCROLLEANDO  (global)
   ------------------------------------------------------------
   El atributo data-revelar-on lo pone assets/js/revelar.js sobre
   <html>. Esconder los bloques es responsabilidad del script que
   despues los muestra: si no corre, este bloque entero no aplica
   y la pagina se ve completa.

   Vive aca arriba, fuera de cualquier seccion, porque lo usan
   tanto la pre venta del 18 como los avisos de la home.
   ============================================================ */

:root[data-revelar-on] [data-revelar] {
  opacity: 0;
  transform: translateY(20px);
}

:root[data-revelar-on] [data-revelar].esta {
  opacity: 1;
  transform: none;
  transition: opacity 700ms ease,
              transform 700ms cubic-bezier(.2, .7, .3, 1);
  /* Escalonado. En la pre venta ordena titulo, equipo y precios;
     en los avisos, la tarjeta izquierda antes que la derecha. */
  transition-delay: calc(var(--i, 0) * 90ms);
}

@media (prefers-reduced-motion: reduce) {
  :root[data-revelar-on] [data-revelar] { opacity: 1; transform: none; }
}


/* ============================================================
   15. AVISOS DE LA HOME  (MacBook · iPhone 17 · DJI · JBL)
   ------------------------------------------------------------
   Son cuatro tarjetas de categoria repartidas en dos filas. El
   theme las dejaba como rectangulos grises al ras, sin nada que
   diga que se puede hacer clic.

   TODA la tarjeta es el enlace, no solo el "Ver Mas". El texto
   del enlace mide 60 px de ancho; la tarjeta, 570. Pedirle a
   alguien que le apunte al 10% del bloque es perder clics por
   nada, sobre todo en un celular.
   ============================================================ */

.ads-block .ad .media {
  position: relative;          /* ancla del enlace estirado */
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface-2);
  transition: transform var(--transicion),
              box-shadow var(--transicion),
              background var(--transicion);
}

.ads-block .ad .media:hover {
  transform: translateY(-4px);
  box-shadow: var(--sombra-2);
  background: var(--surface-3);
}

/* La foto se agranda apenas y el recorte de la tarjeta la contiene:
   el producto se acerca sin que la tarjeta cambie de tamanio. */
.ads-block .ad .media-left img {
  transition: transform 600ms cubic-bezier(.2, .7, .3, 1);
}

.ads-block .ad .media:hover .media-left img {
  transform: scale(1.05);
}

.ads-block .ad .ad-text {
  font-family: var(--fuente-titulo);
  letter-spacing: -.01em;
  color: var(--ink-2);
}

.ads-block .ad .ad-text strong {
  display: block;
  color: var(--ink);
}

/* El enlace estirado: un ::before invisible que cubre la tarjeta
   entera. El ::after ya lo usa el theme para la flechita. */
.ads-block .ad .ad-action > a::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.ads-block .ad .ad-action > a {
  color: var(--ink);
  transition: color var(--transicion);
}

/* La flecha se corre a la derecha al pasar por encima: dice hacia
   donde lleva antes de que la toquen. */
.ads-block .ad .ad-action > a::after {
  transition: transform var(--transicion);
}

.ads-block .ad .media:hover .ad-action > a::after {
  transform: translateX(4px);
}

/* Con teclado el foco cae en el <a>, que es chico; el anillo se
   dibuja sobre la tarjeta, que es lo que se va a activar. */
.ads-block .ad .ad-action > a:focus-visible {
  outline: none;
}

.ads-block .ad .media:has(.ad-action > a:focus-visible) {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .ads-block .ad .media,
  .ads-block .ad .media-left img,
  .ads-block .ad .ad-action > a::after { transition: none; }
  .ads-block .ad .media:hover { transform: none; }
  .ads-block .ad .media:hover .media-left img { transform: none; }
}

@media (max-width: 575px) {
  /* En una columna las dos tarjetas quedan pegadas una sobre otra
     y los bordes redondeados se tocan. */
  .ads-block .ad + .ad { margin-top: var(--e-4); }
}


/* ============================================================
   16. CELULAR · UN SOLO MARGEN LATERAL
   ------------------------------------------------------------
   Medido a 390 px, el contenido arrancaba en cuatro lugares
   distintos:

     banner del carrusel .......... 16 px
     franja de beneficios ......... 15 px
     avisos y pre venta ........... 15 px
     productos destacados ......... 30 px   (container adentro
                                             de otro container)
     footer ....................... 40 px

   Cuatro sangrias distintas en la misma pantalla se leen como
   descuido aunque nadie sepa senialar por que. Todo a 15 px, que
   es lo que ya usa el .container de Bootstrap.
   ============================================================ */

@media (max-width: 768px) {

  /* El .container de destacados vive adentro del .container de la
     home, asi que suma dos veces los 15 px del tema. Se le sacan
     los suyos y queda alineado con las secciones de al lado. */
  .home-featured-section > .container,
  .ig-seccion > .container {
    padding-left: 0;
    padding-right: 0;
  }

  /* El footer rompe el ancho maximo a proposito para ir de lado a
     lado, y para eso el tema le pone 40 px fijos. En un telefono de
     390 eso es un quinto de la pantalla gastado en aire. */
  .site-footer .container,
  .footer-newsletter .container,
  .footer-bottom-widgets .container,
  .copyright-bar .container {
    padding-left: 15px;
    padding-right: 15px;
  }

  /* Un link de 14 px mide 19 px de alto. El minimo comodo para un
     dedo son 44; sin esto, el footer es una lista de blancos
     chiquitos uno encima del otro y se falla el que esta al lado.
     El padding crece hacia afuera y el margen negativo lo
     compensa, asi la columna no se desarma. */
  .footer-col ul { gap: 2px; }

  .footer-col ul a {
    display: inline-block;
    padding: 11px 0;
    margin: -11px 0;
  }

  .footer-datos { gap: 16px; }

  .footer-datos a {
    display: inline-block;
    padding: 6px 0;
    margin: -6px 0;
  }
}


/* ============================================================
   17. SEGUINOS EN INSTAGRAM
   ------------------------------------------------------------
   Seis publicaciones reales del local, cada una enlazada a la
   suya. Las miniaturas son archivos del sitio: el CDN de
   Instagram firma sus URL con una fecha de vencimiento, asi que
   enlazarlas directo deja la seccion en cuadros rotos a los
   pocos dias.

   La grilla es de 3 columnas en el telefono a proposito: es como
   se ve un perfil de Instagram, y el visitante reconoce que esta
   mirando Instagram antes de leer una sola palabra.
   ============================================================ */

.ig-seccion {
  /* Sin aire abajo: es la ultima seccion antes del footer y el tema
     ya deja su propio margen ahi. Con los dos habia casi 200px de
     blanco entre "Ver todo en Instagram" y el negro del footer. */
  padding: var(--e-8) 0 0;
}

/* Se necesita para el texto que solo leen los lectores de
   pantalla: el enlace de cada cuadro es una imagen sin palabras. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- encabezado ---------- */
.ig-head {
  display: flex;
  align-items: center;
  gap: var(--e-4);
  margin-bottom: var(--e-5);
}

/* El degradado de la marca, que es lo unico que hace falta para
   que se lea "Instagram" sin escribir la palabra. */
.ig-glifo {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(135deg,
    #F58529 0%, #DD2A7B 45%, #8134AF 72%, #515BD4 100%);
}

.ig-head-texto {
  flex: 1 1 auto;
  min-width: 0;
}

.ig-titulo {
  margin: 0;
  font-size: var(--t-xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.ig-bajada {
  margin: 2px 0 0;
  font-size: var(--t-sm);
  color: var(--muted);
}

.ig-arroba {
  color: var(--ink-2);
  font-weight: 700;
  text-decoration: none;
}

.ig-arroba:hover { color: var(--ink); text-decoration: underline; }

.ig-punto { margin: 0 6px; color: var(--line); }

.ig-seguir {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  padding: var(--e-3) var(--e-5);
  border-radius: var(--r-full);
  background: var(--ink);
  color: #fff;
  font-size: var(--t-sm);
  font-weight: 700;
  text-decoration: none;
  transition: background var(--transicion), transform var(--transicion);
}

.ig-seguir:hover,
.ig-seguir:focus-visible {
  background: var(--accent-ink, #084BC0);
  color: #fff;
  text-decoration: none;
  transform: translateY(-1px);
}

/* ---------- grilla ---------- */
.ig-grilla {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--e-3);
}

.ig-post {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface-3);
  text-decoration: none;
}

.ig-post img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 520ms cubic-bezier(.2, .7, .3, 1);
}

.ig-post:hover img,
.ig-post:focus-visible img { transform: scale(1.06); }

/* El velo entra desde abajo en vez de aparecer de golpe: el cuadro
   sigue siendo una foto mientras el mouse pasa por arriba. */
.ig-velo {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(to top,
    rgba(0,0,0,.52) 0%, rgba(0,0,0,.28) 55%, rgba(0,0,0,.12) 100%);
  opacity: 0;
  transition: opacity 260ms ease;
}

.ig-post:hover .ig-velo,
.ig-post:focus-visible .ig-velo { opacity: 1; }

.ig-post:focus-visible {
  outline: 2px solid var(--accent, #0A5CE8);
  outline-offset: 3px;
}

/* Marca de reel. Instagram la pone en la esquina de arriba y por eso
   se entiende sin explicacion: avisa que eso es un video antes de
   que alguien haga clic esperando una foto. */
.ig-marca {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: var(--r-full);
  color: #fff;
  background: rgba(0, 0, 0, .42);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* ---------- pie ---------- */
.ig-ver-mas {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: var(--e-5);
  font-size: var(--t-sm);
  font-weight: 700;
  color: var(--muted);
  text-decoration: none;
  transition: color var(--transicion);
}

.ig-ver-mas:hover,
.ig-ver-mas:focus-visible { color: var(--ink); text-decoration: none; }

.ig-ver-mas svg { transition: transform .18s ease; }
.ig-ver-mas:hover svg { transform: translate(2px, -2px); }

@media (max-width: 900px) {
  .ig-grilla { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 575px) {
  .ig-seccion { padding: var(--e-7) 0 var(--e-6); }

  /* En el telefono el boton no entra al lado del titulo sin
     apretar el @usuario contra el borde. Baja y ocupa el ancho,
     que ademas es mas facil de tocar. */
  .ig-head {
    flex-wrap: wrap;
    row-gap: var(--e-4);
  }

  .ig-seguir {
    flex: 1 0 100%;
    justify-content: center;
    padding: var(--e-4) var(--e-5);
  }

  .ig-grilla { gap: 6px; }
  .ig-marca { width: 20px; height: 20px; top: 6px; right: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .ig-post img,
  .ig-velo,
  .ig-ver-mas svg { transition: none; }
  .ig-post:hover img { transform: none; }
  .ig-seguir:hover { transform: none; }
}

/* El tema separa el contenido del footer con 150px. Es demasiado en
   todas las paginas: deja una franja de blanco que se lee como que la
   pagina termino antes de tiempo. 90 alcanza para que el footer se
   sienta aparte. */
#content.site-content { margin-bottom: 90px; }

/* ============================================================
   18. CALCULADORA DEL PLAN CANJE
   ------------------------------------------------------------
   Dos mitades adentro de una misma tarjeta: a la izquierda lo que
   se elige, a la derecha el resultado sobre fondo oscuro.

   El oscuro no es decoracion. La seccion entera es clara, asi que
   la mitad negra es lo unico que el ojo busca primero, y ahi esta
   el unico numero que importa: cuanto hay que poner. Ademas separa
   "lo que elegis" de "lo que te sale" sin una sola palabra.

   El resultado se recalcula solo a medida que se elige: no hay
   boton de calcular. Asi el cliente ve el numero moverse cuando
   cambia la bateria y entiende que eso cambia lo que le pagan.

   Los valores salen de assets/js/canje-valores.js.
   ============================================================ */

.canje {
  padding: var(--e-8) 0;
  background: var(--surface-2);
  /* La seccion vive adentro del .container de la plantilla. Esto la
     devuelve al ancho de la ventana sin tocar el HTML, igual que la
     pre venta del 18. */
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  padding-left: calc(50vw - 50%);
  padding-right: calc(50vw - 50%);
  box-sizing: border-box;
}

/* --- Encabezado --------------------------------------------- */

.canje-head {
  max-width: 40rem;
  margin: 0 auto var(--e-6);
  text-align: center;
  border: 0;
  padding: 0;
}

.canje-eyebrow {
  margin: 0 0 var(--e-3);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
}

.canje-titulo {
  margin: 0 0 var(--e-3);
  font-size: clamp(1.625rem, 3.4vw, var(--t-2xl));
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.025em;
  color: var(--ink);
  text-wrap: balance;
}

.canje-bajada {
  margin: 0;
  font-size: var(--t-md);
  line-height: 1.6;
  color: var(--muted);
}

/* --- La tarjeta ---------------------------------------------- */

.canje-caja {
  display: grid;
  /* La derecha un poco mas ancha: ahi entran las dos fotos, la
     cuenta y las cuotas. */
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  max-width: 64rem;
  margin: 0 auto;
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(11,13,18,.05), 0 12px 32px -12px rgba(11,13,18,.18);
  overflow: hidden;
}

/* --- Formulario ---------------------------------------------- */

.canje-form {
  display: flex;
  flex-direction: column;
  padding: var(--e-6);
}

.canje-paso + .canje-paso { margin-top: var(--e-6); }

.canje-paso-titulo {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  margin: 0 0 var(--e-4);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* El numero del paso en una pastilla: se ve el orden de un vistazo
   sin escribir "paso 1 de 2". */
.canje-paso-titulo span {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: var(--r-full);
  background: var(--ink);
  color: #fff;
  font-size: 11px;
  letter-spacing: 0;
}

.canje-campo { display: flex; flex-direction: column; gap: 7px; }
.canje-campo + .canje-campo { margin-top: var(--e-4); }

.canje-campo label,
.canje-rotulo {
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--muted);
}

/* La flecha se dibuja en el fondo: el <select> del sistema trae una
   distinta en cada navegador y rompia la linea con el resto. */
.canje-campo select {
  width: 100%;
  height: 48px;
  padding: 0 40px 0 15px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background-color: var(--surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%235C6573' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  -webkit-appearance: none;
  appearance: none;
  font-family: var(--fuente-texto);
  font-size: var(--t-base);
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  transition: border-color var(--transicion), box-shadow var(--transicion);
}

.canje-campo select:hover { border-color: var(--muted); }

.canje-campo select:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-wash);
}

.canje-campo select:disabled {
  background-color: var(--surface-2);
  color: var(--faint);
  cursor: default;
}

/* --- Botones de opcion (capacidad y bateria) ------------------ */

.canje-opciones {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.canje-opcion {
  flex: 1 1 auto;
  min-width: 0;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  font-family: var(--fuente-texto);
  font-size: var(--t-sm);
  font-weight: 700;
  color: var(--ink-2);
  white-space: nowrap;
  cursor: pointer;
  transition: border-color var(--transicion), background var(--transicion),
              color var(--transicion);
}

.canje-opcion:hover { border-color: var(--muted); }

/* La elegida se rellena de tinta en vez de cambiar de borde: en un
   grupo de tres, un borde mas oscuro no se distingue de un hover. */
.canje-opcion.esta {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

.canje-opcion:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-wash);
  border-color: var(--accent);
}

/* Empuja hacia abajo: la columna de la izquierda es mas corta que
   la del resultado y quedaba medio panel vacio. */
/* Las dos columnas comparten una sola tarjeta, asi que miden lo
   mismo, y la de la derecha tiene mucho mas adentro. El sobrante de
   la izquierda no se apila en un solo lado: los dos margenes auto
   —este de abajo y el de arriba del primer paso— lo reparten en
   partes iguales y el formulario queda centrado. */
.canje-sigue {
  margin: var(--e-6) 0 0;
}

.canje-paso:first-child { margin-top: auto; }

.canje-pista {
  margin: 10px 0 0;
  font-size: var(--t-xs);
  line-height: 1.5;
  color: var(--faint);
}

.canje-sigue .canje-rotulo {
  display: block;
  margin-bottom: var(--e-3);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--faint);
}

/* Los numeros los pone un contador y no el marcador de la lista:
   asi se los puede dibujar como pastillas del mismo tamanio que las
   de los pasos de arriba. */
.canje-sigue ol {
  list-style: none;
  counter-reset: paso;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
}

.canje-sigue li {
  counter-increment: paso;
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 10px;
  align-items: start;
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--muted);
}

.canje-sigue li::before {
  content: counter(paso);
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border-radius: var(--r-full);
  background: var(--surface-3);
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 700;
}

.canje-ayuda {
  margin: var(--e-5) 0 auto;
  padding-top: var(--e-4);
  border-top: 1px solid var(--line-soft);
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--muted);
}

.canje-ayuda a {
  color: var(--ink-2);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.canje-ayuda a:hover { color: var(--accent); }

/* --- Panel del resultado ------------------------------------- */

.canje-panel {
  display: flex;
  flex-direction: column;
  padding: var(--e-6);
  /* Negro puro con un resplandor arriba: el mismo recurso que la
     pre venta del 18, para que las dos piezas oscuras de la home se
     lean como de la misma familia. */
  background:
    radial-gradient(120% 70% at 50% 0,
      rgba(255,255,255,.07) 0%, transparent 62%),
    #0B0D12;
  color: #fff;
}

/* --- Los dos equipos ----------------------------------------- */

.canje-trade {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--e-3);
  margin-bottom: var(--e-5);
  padding-bottom: var(--e-5);
  border-bottom: 1px solid rgba(255,255,255,.1);
}

.canje-equipo {
  margin: 0;
  min-width: 0;
  text-align: center;
}

/* Las fotos del catalogo vienen con fondo blanco, no recortadas.
   Por eso van adentro de una ficha clara y no sueltas sobre el
   negro, donde se verian como rectangulos blancos pegados. */
.canje-foto {
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  margin-bottom: var(--e-3);
  padding: 12px;
  border-radius: var(--r-md);
  background: #fff;
  overflow: hidden;
}

.canje-foto img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* Arranca invisible y aparece cuando la foto termino de bajar: el
     JS le pone .esta recien despues de decode(). Asi al cambiar de
     modelo no se ve el hueco entre una foto y la otra. */
  opacity: 0;
  transition: opacity 320ms ease;
}

.canje-foto img.esta { opacity: 1; }

.canje-rol {
  display: block;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.42);
}

.canje-nombre {
  display: block;
  margin-top: 3px;
  font-size: var(--t-sm);
  font-weight: 700;
  line-height: 1.3;
  color: #fff;
}

.canje-flecha {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-bottom: 34px;
  border-radius: var(--r-full);
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.65);
}

/* --- La cuenta ------------------------------------------------ */

.canje-fila {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-4);
  padding: var(--e-3) 0;
  font-size: var(--t-sm);
  color: rgba(255,255,255,.6);
}

.canje-fila + .canje-fila { border-top: 1px solid rgba(255,255,255,.07); }

.canje-fila-cifras {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex: 0 0 auto;
}

.canje-usd {
  font-size: var(--t-base);
  font-weight: 700;
  color: #fff;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Lo que se toma por el usado va en verde y con el signo menos: es
   el unico numero de la cuenta que juega a favor del cliente. */
.canje-usd--toma { color: #34D399; }

.canje-ars {
  font-size: var(--t-xs);
  color: rgba(255,255,255,.38);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.canje-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-4);
  margin-top: var(--e-4);
  padding-top: var(--e-4);
  border-top: 1px solid rgba(255,255,255,.18);
}

.canje-total-rotulo {
  font-size: var(--t-sm);
  font-weight: 700;
  color: rgba(255,255,255,.72);
}

.canje-total-cifras {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.canje-total-usd {
  font-family: var(--fuente-titulo);
  font-size: clamp(1.75rem, 3.4vw, 2.75rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.03em;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

.canje-total-ars {
  margin-top: 4px;
  font-size: var(--t-sm);
  color: rgba(255,255,255,.5);
  font-variant-numeric: tabular-nums;
}

.canje-panel--favor .canje-total-usd { color: #34D399; }

/* Un parpadeo corto cuando el numero cambia. Sin esto, tocar
   "128 GB" y que el total cambie abajo a la derecha pasa
   desapercibido y parece que el boton no hizo nada. */
@keyframes canjeCambio {
  0%   { opacity: .25; transform: translateY(-3px); }
  100% { opacity: 1;   transform: none; }
}

.canje-usd.cambio,
.canje-total-usd.cambio { animation: canjeCambio 320ms ease-out; }

/* --- Cuotas --------------------------------------------------- */

.canje-pagos { margin-top: var(--e-5); }
.canje-pagos[hidden] { display: none; }

.canje-pagos-titulo {
  margin: 0 0 var(--e-3);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.42);
}

.canje-cuotas {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.canje-cuota {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 11px 10px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--r-md);
  background: rgba(255,255,255,.04);
  text-align: center;
}

.canje-cuota-n { font-size: var(--t-xs); color: rgba(255,255,255,.5); }

.canje-cuota-v {
  font-size: var(--t-sm);
  font-weight: 700;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

.canje-pagos-pie,
.canje-legal {
  margin: var(--e-3) 0 0;
  font-size: var(--t-xs);
  line-height: 1.55;
  color: rgba(255,255,255,.34);
}

.canje-pagos-pie strong { color: rgba(255,255,255,.6); }

.canje-aviso {
  margin: 0;
  font-size: var(--t-base);
  line-height: 1.6;
  color: rgba(255,255,255,.72);
}

.canje-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: var(--e-5);
  padding: var(--e-4) var(--e-5);
  border-radius: var(--r-full);
  background: var(--wa);
  color: #fff;
  font-size: var(--t-base);
  font-weight: 700;
  text-decoration: none;
  transition: background var(--transicion), transform var(--transicion),
              box-shadow var(--transicion);
}

.canje-cta:hover,
.canje-cta:focus-visible {
  background: var(--wa-ink);
  color: #fff;
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(37,167,90,.3);
}

/* --- Estados --------------------------------------------------
   El panel tiene tres: mientras carga, cuando el modelo no tiene
   precio cargado, y cuando esta todo elegido. Se manejan con un
   solo atributo en vez de esconder cosas desde el JS. */

.canje-panel[data-estado="cargando"] .canje-cuenta,
.canje-panel[data-estado="cargando"] .canje-total,
.canje-panel[data-estado="cargando"] .canje-pagos,
.canje-panel[data-estado="cargando"] .canje-aviso { display: none; }

.canje-panel[data-estado="consultar"] .canje-cuenta,
.canje-panel[data-estado="consultar"] .canje-total,
.canje-panel[data-estado="consultar"] .canje-pagos,
.canje-panel[data-estado="consultar"] .canje-legal { display: none; }

.canje-panel[data-estado="sin-equipo"] .canje-total,
.canje-panel[data-estado="sin-equipo"] .canje-pagos { display: none; }

.canje-panel[data-estado="sin-equipo"] .canje-aviso { margin-top: var(--e-4); }

.canje-panel[data-estado="completo"] .canje-aviso { display: none; }

/* --- Angosto -------------------------------------------------- */

@media (max-width: 860px) {
  .canje-caja { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 575px) {
  .canje { padding: var(--e-7) 0 var(--e-6); }
  .canje-form, .canje-panel { padding: var(--e-5) var(--e-4); }

  .canje-opciones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .canje-opcion { white-space: normal; padding: 10px 6px; font-size: var(--t-xs); }

  .canje-cuotas { grid-template-columns: 1fr; }
  .canje-cuota { flex-direction: row; justify-content: space-between; text-align: left; }
  .canje-flecha { margin-bottom: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  .canje-cta:hover { transform: none; }
  .canje-foto img { transition: none; }
  .canje-usd.cambio, .canje-total-usd.cambio { animation: none; }
}