/* ─────────────────────────────────────────────────────────────────────────────
   CSS propio de recargasdigitales.com

   Este fichero es el punto de extensión oficial del motor: `header.php` lo
   carga DESPUÉS de app.css y de la hoja del tema, así que lo de aquí manda.
   ───────────────────────────────────────────────────────────────────────────── */

/* ── La etiqueta de país ─────────────────────────────────────────────────────
   Los productos del mayorista se llaman «Roblox (MX)», «PlayStation (US)».
   Ese código distingue un producto de otro —una tarjeta de México no sirve en
   una cuenta de Estados Unidos— pero como texto no lo entiende nadie.

   Va DENTRO de la foto, abajo a la derecha: en la esquina contraria a la de
   categoría/«Destacado», así las dos nunca se pisan por larga que sea una.
   El título dice QUÉ compras; esto dice DÓNDE sirve. */
.thumb .pais,
.neon-cd-img .pais {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px 3px 6px;
  border-radius: 20px;
  /* Encima de la foto, así que el fondo tiene que ser opaco de verdad: sobre
     una imagen clara un fondo translúcido deja el texto ilegible. El desenfoque
     es lo que hace que no parezca un parche pegado. */
  background: rgba(10, 10, 18, .86);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, .14);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
  color: #F0F0F0;
  white-space: nowrap;
  max-width: calc(100% - 16px);
  pointer-events: none;      /* el clic es para la foto, que lleva al producto */
}
.pais-bandera { font-size: 13px; line-height: 1; }
.pais-txt     { overflow: hidden; text-overflow: ellipsis; }

/* En la ficha de producto se ve más, porque ahí es donde se decide la compra y
   equivocarse de región no tiene vuelta atrás. Ahí sí va en el flujo del texto,
   no sobre la foto. */
.pd .pais, .ficha-datos .pais {
  position: static;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px 4px 8px;
  border-radius: 20px;
  background: var(--muted);
  border: 1px solid var(--border);
  font-size: 13px;
  font-weight: 600;
  color: var(--fg);
  pointer-events: auto;
}
.pd .pais-bandera { font-size: 16px; }

/* En móvil la tarjeta es más pequeña: la etiqueta se encoge para no comerse
   la foto. */
@media (max-width: 560px) {
  .thumb .pais { font-size: 10px; padding: 2px 7px 2px 5px; right: 6px; bottom: 6px; }
  .thumb .pais-bandera { font-size: 11px; }
}

/* ── La fila de categorías, en todas las páginas ─────────────────────────────
   Desde una categoría no había NINGÚN enlace a otra: para ir de «Juegos» a
   «Streaming» había que volver a Categorías primero. Dos clics donde debe
   haber uno, justo donde el cliente está eligiendo.

   Va en fila y con desplazamiento lateral, no en columna: estas páginas ya usan
   el ancho completo. Es el mismo formato que la portada usa en móvil. */
.cats-chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  margin: 0 0 18px;
  padding-bottom: 2px;
}
.cats-chips::-webkit-scrollbar { display: none; }
.cats-chips a {
  flex: 0 0 auto;
  white-space: nowrap;
  padding: 8px 14px;
  border-radius: 20px;
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--muted-fg);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  transition: background .2s, color .2s, border-color .2s;
}
.cats-chips a:hover,
.cats-chips a:focus-visible { background: var(--muted); color: var(--fg); }
/* La categoría en la que estás, marcada: sin esto no se sabe dónde se está. */
.cats-chips a.activa {
  background: var(--primary);
  border-color: transparent;
  color: var(--primary-fg);
}
.cats-chips-todo { color: var(--accent) !important; }

/* ── El pie, con una columna más ─────────────────────────────────────────────
   Pasa de 4 a 5 bloques (Identidad · Comprar · Ayuda · Categorías · Contacto)
   porque «Comprar» y «Ayuda» estaban revueltos en una sola columna llamada
   «Tienda», y porque el contacto ahora se ve sin dar un clic. */
/* ⚠️ El selector tiene que ser `.footer .footer-grid`, no `.footer-grid`.
   app.css define la rejilla con DOS clases y gana por especificidad aunque este
   fichero se cargue después: con una sola clase, la quinta columna se caía a una
   fila propia y dejaba un hueco enorme en el pie. Cargar más tarde no basta
   cuando el otro selector es más específico. */
.footer .footer-grid { grid-template-columns: 1.3fr repeat(4, 1fr); }
@media (max-width: 1000px) { .footer .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px)  { .footer .footer-grid { grid-template-columns: 1fr; } }

/* El correo, destacado: es el dato que busca quien tiene un problema. */
.footer-mail { font-weight: 600; color: var(--accent) !important; }

/* ── Las imágenes no se amplían más de lo que son ────────────────────────────
   `app.css` usa `width:100%; height:100%` con `object-fit:contain`, y eso
   FUERZA a la imagen a llenar el marco aunque sea diminuta. Medido: 23 de 24
   logos de Recarga Celular se ampliaban, los peores a ×3,82 — 64×64 px
   estirados a 245×245. Se ven borrosos, y un logo borroso da la sensación de
   tienda pirata justo en la tarjeta que hay que pulsar.

   Con `max-*` y `width:auto` la imagen se planta en su tamaño real y se centra:
   un logo de 64 px se ve a 64 px, nítido. Las buenas (255-400 px) siguen
   llenando el marco como antes, porque ahí el límite no llega a aplicar.

   El `.thumb` ya es flex centrado, así que no hace falta nada más para
   colocarla. */
.pcard .thumb img,
.neon-cd-img img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}

/* Cuatro logos traen el fondo blanco DENTRO del PNG (AT&T México, AT&T USA,
   EasyGo): sobre el tema oscuro son rectángulos brillantes. No se puede quitar
   por CSS —está en la imagen— pero redondeándoles la esquina dejan de parecer
   un recorte pegado y pasan por tarjeta de marca. */
.pcard .thumb img { border-radius: 8px; }

/* ── Lo que hay que poder tocar con el dedo ──────────────────────────────────
   Medido en móvil: los puntos del carrusel eran de 40x4 px y 26x4 px. Cuatro
   píxeles de alto no es un botón, es un hilo: funciona con el ratón y es
   inacertable con el dedo. El mínimo recomendado es 44x44.

   El truco es agrandar el ÁREA TOCABLE sin agrandar el dibujo: el punto se
   sigue viendo fino, pero alrededor hay relleno transparente que también
   responde. Así no se estropea el diseño para arreglar la usabilidad. */
@media (max-width: 900px) {
  .car-punto,
  .neon-car .car-punto {
    position: relative;
    min-height: 6px;
  }
  .car-punto::after {
    content: '';
    position: absolute;
    left: 0; right: 0;
    top: -20px; bottom: -20px;   /* 44 px de alto tocable */
  }

  /* Paginación: era 33x35. */
  .pager a, .pager span { min-width: 44px; min-height: 44px;
                          display: inline-flex; align-items: center; justify-content: center; }

  /* «Añadir al carrito» era 40x32 — el botón que más se pulsa de la tienda. */
  .btn-sm { min-height: 44px; padding-top: 0; padding-bottom: 0;
            display: inline-flex; align-items: center; justify-content: center; }

  /* Ver/ocultar contraseña: 30x30. */
  .pw-toggle { min-width: 44px; min-height: 44px; }

  /* Flechas del carrusel: 34x34. */
  .car-flecha, .neon-car button { min-width: 44px; min-height: 44px; }
}

/* ── Filas que no se descuadran por un nombre largo ──────────────────────────
   Con el nombre a dos líneas, su bloque de precio bajaba 20 px respecto al de
   las tarjetas vecinas. «Digicel El Salvador Combo Plan Bundles» descolocaba
   toda su fila.

   Se reserva el alto de dos líneas SIEMPRE: la tarjeta de nombre corto deja ese
   hueco vacío y todo lo de abajo queda alineado. `line-clamp` ya estaba puesto
   para que no se desborde a la tercera. */
.pcard h3 { min-height: calc(2 * 1.3em); }

/* ── Texto que hay que poder leer ────────────────────────────────────────────
   «Desde» y el nombre del país estaban a 10 px. */
.pcard .from { font-size: 11px; }
.pais-txt    { font-size: 11px; }

/* Los enlaces del pie iban a 19 px de alto, pegados unos a otros: en móvil es
   fácil pulsar el de al lado. No necesitan 44 px —son enlaces de texto, no
   botones— pero sí separación suficiente para acertar. */
@media (max-width: 900px) {
  .footer-grid a { padding: 7px 0; }
}

/* Los enlaces del pie son de bloque, y en la barra inferior eso dejaba el
   separador «·» solo en una línea entre Términos y Privacidad. Ahí van en
   línea: son una frase, no una lista. */
.footer .container.muted a { display: inline; padding: 0; }

/* ── El buscador de la cabecera ──────────────────────────────────────────────
   Antes la lupa llevaba a otra página: dos clics y dos cargas antes de ver un
   resultado. Ahora el campo está aquí y las sugerencias salen debajo. */
.bus { position: relative; display: flex; align-items: center; }
.bus-lupa {
  position: absolute; left: 11px; display: flex; pointer-events: none;
  color: var(--muted-fg);
}
.bus input {
  width: 230px; height: 40px;
  padding: 0 12px 0 36px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--muted);
  color: var(--fg);
  font-size: 14px;
}
.bus input::placeholder { color: var(--muted-fg); }
.bus input:focus {
  outline: 2px solid var(--accent); outline-offset: 1px;
  border-color: transparent; width: 300px;
}
.bus input { transition: width .2s; }

.bus-panel {
  position: absolute; top: calc(100% + 8px); right: 0;
  width: 380px; max-width: 92vw; max-height: 60vh; overflow-y: auto;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  padding: 6px;
  z-index: 70;
}
.bus-it {
  display: flex; align-items: center; gap: 10px;
  padding: 8px; border-radius: 10px;
  text-decoration: none; color: var(--fg);
}
.bus-it:hover, .bus-it.sel { background: var(--muted); }
.bus-it img { width: 40px; height: 40px; object-fit: contain; border-radius: 7px; flex: 0 0 auto; }
.bus-it-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.bus-it-txt strong { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bus-it-sub { font-size: 11.5px; color: var(--muted-fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bus-it-precio { font-size: 13px; font-weight: 700; color: var(--n-verde, var(--accent)); white-space: nowrap; }
.bus-vacio { padding: 14px; text-align: center; color: var(--muted-fg); font-size: 13.5px; }

/* En móvil el campo no cabe al lado de los iconos: ocupa su propia línea. */
@media (max-width: 760px) {
  .bus { order: 10; width: 100%; margin-top: 8px; }
  .bus input, .bus input:focus { width: 100%; }
  .bus-panel { width: 100%; }
}

/* ── La barra de menú ─────────────────────────────────────────────────────────
   Con siete entradas, «Todos los productos» y «Cómo comprar» se partían en dos
   líneas cada una y la barra quedaba con los enlaces a distinta altura: parecía
   rota. La caja del buscador, además, empujaba al resto.

   Se arregla con tres cosas: que ningún enlace se parta, que el buscador pueda
   encogerse antes que el menú, y un pelín menos de aire entre enlaces para que
   los siete quepan en una fila a 1366 px, que es la pantalla más común. */
.nav-links a { white-space: nowrap; padding-left: 13px; padding-right: 13px; }
.nav-inner   { gap: 10px; }
/* El buscador cede espacio primero: es lo único elástico de la barra. */
.bus         { flex: 0 1 auto; min-width: 0; }

/* ── Destapar el código de una compra ─────────────────────────────────────────
   La fila del código no llega con el valor dentro: llega con un botón. Lo que
   se ve aquí es ese botón, el campo del código de WhatsApp cuando hace falta, y
   el valor una vez destapado. */
.rev-zona     { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rev-aviso    { font-size: 13px; }
.rev-dato     { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rev-et       { font-size: 13px; opacity: .75; }
/* El código se enseña grande y con espacio entre letras: se copia a mano más de
   lo que parece, y un «0» pegado a una «O» en cuerpo 13 es una reclamación. */
.rev-dato code {
  font-size: 16px; letter-spacing: .04em; padding: 6px 10px;
  border-radius: 8px; user-select: all;
}
.rev-codigo {
  width: 8ch; font-size: 18px; letter-spacing: .22em; text-align: center;
  padding: 8px 10px;
}
.rev-copiar   { white-space: nowrap; }
/* El aviso va debajo del botón, no al lado: en móvil «Ya te enviamos un código,
   revisa tu WhatsApp» no cabe en la misma línea y empujaba el botón fuera. */
.rev-caja { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
@media (max-width: 560px) { .rev-caja { align-items: stretch; } }

/* En móvil, cada código ocupa su propia fila completa.
   A 390 px el código y su botón no caben en la misma línea: el valor se partía
   en dos y el «Copiar» quedaba suelto debajo, sin que se viera a cuál de los dos
   datos pertenecía. Así cada uno es un bloque con su etiqueta, su valor a ancho
   completo y su botón. */
@media (max-width: 560px) {
  .rev-dato {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 10px 0;
    border-top: 1px solid var(--border);
  }
  .rev-dato:first-child { border-top: 0; }
  .rev-dato code {
    display: block;
    /* Un código largo se parte por donde sea antes que desbordar la pantalla:
       más vale leerlo en dos líneas que no verlo entero. */
    overflow-wrap: anywhere;
    text-align: center;
  }
  .rev-copiar { width: 100%; }
  .rev-zona   { width: 100%; }
  .rev-codigo { width: 100%; max-width: 10ch; margin: 0 auto; }
}

/* ── Los datos que hacen falta para entregar ──────────────────────────────────
   Van dentro del formulario de compra, antes de la cantidad. Se separan con un
   marco propio porque no son parte de «qué compras» sino de «a dónde va»: son
   la diferencia entre un pedido que se entrega solo y uno que hay que perseguir
   por correo. */
.pd-datos {
  margin: 16px 0 4px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255, 255, 255, .02);
}
.pd-datos-tit { margin: 0 0 10px; font-weight: 700; font-size: 14px; }
.pd-campo + .pd-campo { margin-top: 12px; }
.pd-campo label { display: block; margin-bottom: 4px; font-size: 13.5px; }
/* La ayuda va DEBAJO del campo y siempre visible, no en un globo al pasar por
   encima: en móvil no hay «pasar por encima», y quien más necesita la
   explicación es justo quien no va a buscarla. */
.pd-ayuda {
  margin: 5px 0 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--muted-fg);
}
/* Los datos ya escritos, en el carrito y en el resumen del pago. */
.co-datos { color: var(--accent); font-size: 12.5px; }

/* ── Las etiquetas del catálogo ───────────────────────────────────────────────
   Una por tarjeta, en la esquina de arriba a la izquierda. La de país vive en la
   de abajo a la derecha, así que nunca se pisan por larga que sea una.

   No se animan a propósito: una etiqueta que parpadea compite con el botón de
   comprar, que es lo único que debe llamar la atención en una tarjeta. */
.pcard .et {
  position: absolute; top: 8px; left: 8px; z-index: 3;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 10px; border-radius: 20px;
  font-size: 11px; font-weight: 700; line-height: 1.4;
  white-space: nowrap; max-width: calc(100% - 16px);
  overflow: hidden; text-overflow: ellipsis;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
}
/* Ámbar para lo recomendado: es el color que el ojo busca primero y la etiqueta
   que más mueve la decisión. */
.pcard .et--top    { background: #F59E0B; color: #1A1205; }
/* Verde para el ahorro: es la convención, y discutirla no aporta nada. */
.pcard .et--ahorro { background: #16A34A; color: #FFFFFF; }
.pcard .et--nuevo  { background: var(--primary); color: var(--primary-fg); }
/* Rojo apagado para las últimas unidades: informa sin gritar. Esta etiqueta sólo
   sale cuando el stock es real, así que no hace falta que meta prisa. */
.pcard .et--pocas  { background: #7F1D1D; color: #FECACA; }

@media (max-width: 560px) {
  .pcard .et { font-size: 10px; padding: 4px 8px; top: 6px; left: 6px; }
}

/* El margen, sólo en el panel. Nunca lo ve un cliente. */
.adm-margen      { font-size: 12px; font-weight: 700; }
.adm-margen.bajo { color: #F87171; }
.adm-margen.ok   { color: #34D399; }

/* «Recibes 178.57 USD en tu línea» — va debajo del precio y hace de puente
   entre lo que se paga y lo que llega. Sin él, dos cifras distintas juntas se
   leen como un cobro de más.

   Verde y no gris: es una promesa de lo que el cliente obtiene, no una nota al
   pie. El gris de `.muted` lo colocaba visualmente al nivel del aviso de
   bolívares, que es información secundaria, y esto no lo es. */
.recibes {
  font-size: 13px;
  font-weight: 600;
  color: var(--n-verde, #39FF14);
  margin-top: 2px;
  letter-spacing: .01em;
}

/* ── Comprobar la cuenta antes de pagar ─────────────────────────────────────
   El resultado va en tres colores y cada uno dice una cosa distinta:
   verde = la cuenta existe · ámbar = no se pudo preguntar · rojo = no existe.
   Separar los dos últimos importa: «no pudimos comprobarlo» es un problema
   nuestro y el cliente sí puede seguir; «no existe» es suyo y tiene que
   corregirlo. Pintarlos iguales manda a la mitad a corregir algo que está bien. */
.pd-validar { margin-top: 12px; }
.pd-validar-res { margin: 8px 0 0; font-size: 13.5px; line-height: 1.4; min-height: 1em; }
.pd-validar-res.es-bien  { color: var(--n-verde, #39FF14); font-weight: 600; }
.pd-validar-res.es-aviso { color: #FFC24B; }
.pd-validar-res.es-mal   { color: #FF7B72; }
/* El aviso para los 300 productos que NO se pueden comprobar. Es lo único que
   queda ahí, así que se ve. */
.pd-ojo {
  margin: 12px 0 0; padding: 10px 12px; font-size: 13px; line-height: 1.45;
  border-radius: 10px; border: 1px solid rgba(255,194,75,.35);
  background: rgba(255,194,75,.08); color: #FFD48A;
}

/* ── Comprar sin tener cuenta ───────────────────────────────────────────────
   Estos tres campos son lo que sustituye al «Inicia sesión» que cortaba la
   compra en seco. Van destacados con un borde propio porque son lo primero que
   hay que rellenar y no pueden confundirse con el resto del formulario de pago.
   La caja NO lleva fondo claro: la tienda es oscura entera y una tarjeta clara
   aquí se lee como un anuncio, no como parte del checkout. */
.co-invitado {
  border: 1px solid rgba(0,240,255,.28);
  background: rgba(0,240,255,.045);
  border-radius: 12px; padding: 16px; margin-bottom: 18px;
}
.co-invitado-cab {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; margin-bottom: 6px;
}
.co-invitado-cab strong { font-size: 16px; }
.co-invitado-entrar { font-size: 13.5px; text-decoration: underline; }
/* Tres columnas en escritorio, una en móvil. El correo es el más largo, así que
   en tamaños intermedios se le deja el ancho entero antes que apretarlo. */
.co-invitado-campos { display: grid; gap: 12px; grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 860px) { .co-invitado-campos { grid-template-columns: 1fr; } }
.co-invitado-campos label { display: block; margin-bottom: 4px; font-size: 13.5px; }

/* ── Las dudas, donde frenan la compra ──────────────────────────────────────
   Cerradas por defecto: ocupan poco y no le roban sitio al precio, que es lo que
   el cliente ha venido a mirar. `<details>` nativo, así que funcionan sin
   JavaScript y se abren igual con el teclado. */
.faq-corta { margin-top: 22px; }
.faq-corta-tit {
  font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--n-cian, #00F0FF); margin: 0 0 10px;
}
.faq-corta details {
  border: 1px solid rgba(255,255,255,.10); border-radius: 10px;
  padding: 0; margin-bottom: 8px; background: rgba(255,255,255,.02);
}
.faq-corta summary {
  cursor: pointer; list-style: none; padding: 12px 14px;
  font-size: 14.5px; font-weight: 600; line-height: 1.35;
  /* 44px de alto mínimo: es un control que se pulsa con el dedo. */
  min-height: 44px; display: flex; align-items: center; gap: 8px;
}
.faq-corta summary::-webkit-details-marker { display: none; }
/* La flecha la ponemos nosotros, porque al quitar el marcador nativo no queda
   ninguna señal de que esto se abre. */
.faq-corta summary::after {
  content: '+'; margin-left: auto; font-size: 19px; font-weight: 400;
  opacity: .6; line-height: 1;
}
.faq-corta details[open] summary::after { content: '−'; }
.faq-corta details > div {
  padding: 0 14px 13px; font-size: 14px; line-height: 1.55; color: var(--n-txt2, #A9A9C4);
}
.faq-corta-mas { display: inline-block; margin-top: 4px; font-size: 13.5px; }

/* ── Carriles de descubrimiento ─────────────────────────────────────────────
   Deslizables con `scroll-snap` NATIVO. No hay carrusel programado ni
   temporizadores: el navegador ya sabe frenar con inercia y parar en su sitio,
   y lo hace mejor que cualquier JavaScript — además de funcionar con el
   JavaScript apagado. */
.carril { margin-top: 42px; }
.carril-cab { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.carril-cab h2 { margin: 0; font-size: clamp(19px, 2.4vw, 24px); line-height: 1.2; }
.carril-cab p  { margin: 3px 0 0; font-size: 13.5px; }

.carril-flechas { display: flex; gap: 8px; flex-shrink: 0; }
.carril-btn {
  width: 44px; height: 44px; border-radius: 50%; font-size: 19px; line-height: 1;
  background: var(--card, #1A1A2E); color: inherit;
  border: 1px solid rgba(255,255,255,.14); cursor: pointer;
}
.carril-btn:disabled { opacity: .32; cursor: default; }
/* En móvil no se pintan: ahí se desliza con el dedo y dos botones sólo quitan
   sitio a las tarjetas. */
@media (max-width: 720px) { .carril-flechas { display: none; } }

.carril-pista {
  display: flex; gap: 14px; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  /* Sin barra a la vista: en escritorio sobra y en móvil no existe. El
     desplazamiento sigue estando, con dedo, rueda y teclado. */
  scrollbar-width: none;
  /* Hueco para que la sombra y el anillo de foco de la tarjeta no se recorten
     contra el borde de la zona que se desplaza. */
  padding: 4px 4px 8px;
  margin: -4px -4px -8px;
}
.carril-pista::-webkit-scrollbar { display: none; }
.carril-item {
  scroll-snap-align: start;
  /* Ancho fijo para que se vea media tarjeta de la siguiente: es lo que dice
     «aquí sigue habiendo cosas» sin necesidad de una flecha. */
  flex: 0 0 clamp(158px, 42vw, 224px);
}
.carril-item .pcard { height: 100%; }

/* ── El pie ─────────────────────────────────────────────────────────────────
   Los enlaces llevaban 4 px arriba y abajo cada uno. Con siete categorías eso
   son 56 px de aire sólo en esa columna, que queda mucho más alta que las de al
   lado y estira el pie entero sin añadir nada. A 2 px se sigue pudiendo pulsar
   —el enlace mide 22 px de alto, y en el pie no hay nada que errar por poco— y
   la columna encoge 28 px. */
.footer a { padding: 2px 0; }

/* Las redes, debajo de los métodos de pago: en fila y como pastillas, para que
   no se lean como cuatro enlaces más de la columna. */
.footer-redes { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 6px; }
.footer-redes a {
  display: inline-flex; align-items: center; padding: 6px 12px;
  border: 1px solid var(--border); border-radius: 999px;
  font-size: 13px; line-height: 1;
}
.footer-redes a:hover { border-color: currentColor; }

/* El WhatsApp del pie enseña el número, así que necesita no partirse a media
   cifra cuando la columna es estrecha. */
.footer-wa { white-space: nowrap; }

/* El correo del pie se partía en dos líneas y dejaba la flecha sola debajo, que
   se lee como un enlace roto. Que rompa por donde quiera menos entre el texto y
   su flecha. */
.footer-mail { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 900px) { .footer-mail { white-space: normal; } }

/* Las cifras de cada marca, una por línea.
   En una sola línea —«24 productos · 24 regiones»— las marcas con regiones
   ocupaban el doble de ancho que las que no, así que unas tarjetas salían de una
   línea y otras de dos y la rejilla quedaba a distintas alturas. */
.marca-cifras { display: block; font-size: 12.5px; line-height: 1.35; }
.marca-cifras span { display: block; }

/* ── Marquesina de productos ───────────────────────────────────────────────────
   Ver `includes/layout/_marquesina.php` para el porqué de las dos mitades y de
   por qué la separación va en `margin-right` y no en `gap`. */
.marq {
  overflow: hidden;
  /* Se desvanece por los bordes: sin esto, las tarjetas aparecen y desaparecen
     de golpe contra el filo de la pantalla y parece que se cortan. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 44px, #000 calc(100% - 44px), transparent);
          mask-image: linear-gradient(90deg, transparent, #000 44px, #000 calc(100% - 44px), transparent);
}
.marq-pista {
  display: flex;
  width: max-content;
  animation: marq-correr var(--marq-dur, 40s) linear infinite;
}
.marq-mitad { display: flex; }
/* La separación, DENTRO de la tarjeta. Con `gap` las dos mitades no medirían
   igual y el bucle daría un tirón en cada vuelta. */
.marq-mitad > * { margin-right: 14px; flex: 0 0 214px; width: 214px; }

@keyframes marq-correr { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Se para cuando el cliente va a por ella. `:focus-within` cubre el teclado:
   sin eso, tabular hacia una tarjeta la perseguiría mientras se mueve. */
.marq:hover .marq-pista,
.marq:focus-within .marq-pista,
.marq[data-quieta] .marq-pista { animation-play-state: paused; }

/* Quien pide menos movimiento no lo recibe: se queda quieta y se desliza a dedo. */
@media (prefers-reduced-motion: reduce) {
  .marq { overflow-x: auto; scrollbar-width: none; }
  .marq::-webkit-scrollbar { display: none; }
  .marq-pista { animation: none; }
  .marq-mitad[aria-hidden="true"] { display: none; }
}