* { box-sizing: border-box; }

/* --- Gate inicial: pide nombre + celular una vez por dispositivo antes de
   dejar ver el sitio (ver localStorage "ttra_cliente" en landing.js). --- */
#rc-gate {
  position: fixed;
  inset: 0;
  z-index: 10010;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #4fb3e8;
  padding: 20px;
}
#rc-gate.oculto { display: none; }
.rc-gate-tarjeta {
  width: 100%;
  max-width: 360px;
  background: #ffffff;
  border-radius: 14px;
  padding: 28px 24px;
  box-shadow: 0 10px 30px rgba(16, 33, 79, 0.25);
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-family: 'Nunito', 'Segoe UI', system-ui, sans-serif;
}
.rc-gate-tarjeta h2 { margin: 0 0 4px; color: #10214f; }
.rc-gate-tarjeta p { margin: 0 0 10px; color: #10214f; font-size: 14px; }
.rc-gate-tarjeta label { font-size: 13px; font-weight: 700; color: #10214f; }
.rc-gate-tarjeta input {
  height: 42px; padding: 0 12px; font-size: 15px;
  border: 2px solid #cfe9f7; border-radius: 10px;
  font-family: inherit;
}
.rc-gate-tarjeta input:focus { outline: none; border-color: #10214f; }
.rc-gate-tarjeta button {
  margin-top: 8px; height: 44px; border: none; border-radius: 10px;
  background: #c8102e; color: #fff; font-size: 15px; font-weight: 800;
  cursor: pointer;
}
.rc-gate-tarjeta button:hover { background: #a30d25; }
.rc-gate-tarjeta .rc-gate-error {
  color: #c8102e; font-size: 13px; margin: 0; display: none;
}
.rc-gate-tarjeta .rc-gate-error.visible { display: block; }
body {
  margin: 0; font-family: var(--rc-font); background: var(--rc-bg); color: var(--rc-green);
  min-height: 100vh; display: flex; flex-direction: column;
}
header {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  padding: 16px 20px; background: var(--rc-bg-panel); border-bottom: 1px solid var(--rc-green-faint);
}
.rc-header-superior { display: flex; align-items: center; gap: 10px; flex: 1 1 100%; min-width: 0; }
.rc-titulo-grupo { display: flex; align-items: flex-end; gap: 12px; min-width: 0; flex-shrink: 0; }
.rc-header-centro {
  flex: 1 1 0; min-width: 0;
}
.rc-logo {
  margin: 0; display: flex; flex-direction: column; line-height: 0.78;
  font-family: 'Archivo Black', 'Arial Black', sans-serif;
  letter-spacing: -0.01em; cursor: var(--rc-cursor);
}
.rc-logo:hover { cursor: var(--rc-cursor-mira); }
.rc-logo-linea {
  font-size: clamp(20px, 5vw, 32px);
  color: transparent;
  -webkit-text-stroke: 1.5px var(--rc-green);
  text-shadow: 0 0 4px var(--rc-glow), 0 0 10px var(--rc-glow);
}
.rc-cara-wrap {
  position: relative; display: inline-block;
  width: clamp(30px, 7.5vw, 36px); height: clamp(21px, 6vw, 27px);
}
.rc-cara-animada {
  position: absolute; top: 0; left: 50%;
  font-size: clamp(21px, 6vw, 27px); line-height: 1; color: var(--rc-green);
  user-select: none; pointer-events: none; opacity: 0;
  transform: translateX(-50%) rotate(90deg);
  transition: opacity .12s ease;
}
.rc-cara-animada.visible { opacity: 1; }

.rc-noticiero {
  position: relative;
  flex: 1 1 0; min-width: 0; margin: 0 16px;
  height: calc(17px * 1.35 * 3);
  overflow: hidden;
  user-select: none;
}
.rc-noticiero-texto {
  position: absolute; bottom: 0; left: 0; width: 100%;
  font-size: 17px; line-height: 1.35; letter-spacing: .02em;
  white-space: normal; word-break: break-word;
  color: var(--rc-green-bright);
  text-shadow: 0 0 6px var(--rc-glow), 0 0 12px var(--rc-glow);
  text-decoration: none; cursor: var(--rc-cursor);
  pointer-events: none;
}
.rc-noticiero-texto.clickeable { pointer-events: auto; }
.rc-noticiero-texto.clickeable:hover { cursor: var(--rc-cursor-mira); color: #c8ffdc; }

.rc-header-derecha {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; flex-shrink: 0;
}
.rc-fecha-hora {
  display: flex; flex-direction: column; align-items: flex-end;
  font-size: 15px; letter-spacing: .04em; color: var(--rc-green-bright); white-space: nowrap;
  user-select: none; pointer-events: none;
  text-shadow:
    0 0 6px var(--rc-glow),
    5px 0 0 rgba(51, 255, 102, 0.22),
    10px 0 0 rgba(51, 255, 102, 0.12),
    15px 0 0 rgba(51, 255, 102, 0.06),
    20px 0 0 rgba(51, 255, 102, 0.03);
}
.rc-modo-y-carrito {
  display: flex; flex-direction: column; align-items: stretch; gap: 8px; width: 150px;
}
.indicador-mayorista {
  display: block;
  padding: 4px 6px;
  border: 1px solid var(--rc-green-faint);
  color: var(--rc-green-dim);
  font-size: 10px;
  line-height: 1.25;
  letter-spacing: .02em;
  text-align: center;
}
/* display:block de arriba le gana al display:none por defecto del
   atributo [hidden] (misma especificidad, la clase pesa igual) — sin
   esto el cartel queda visible siempre, sin importar lo que haga el JS
   con `indicador.hidden`. */
.indicador-mayorista[hidden] {
  display: none;
}
.rc-modo-y-carrito button {
  width: 100%; text-align: center;
  padding: 8px 14px; font-size: clamp(13px, 3.5vw, 15px);
}
#btn-carrito {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  color: var(--rc-green-bright); border-color: var(--rc-green);
  box-shadow: 0 0 10px -1px var(--rc-glow), inset 0 0 8px -2px var(--rc-glow);
}
/* El ícono mide lo mismo que el alto del texto (1em) y es cuadrado, así
   ocupa exactamente el mismo ancho que alto — sea cual sea el tamaño de
   fuente del botón (clamp en .rc-modo-y-carrito button). */
.rc-carrito-icono { width: 1em; height: 1em; flex-shrink: 0; }
.btn-modo {
  color: var(--rc-green-bright); border-color: var(--rc-green);
  box-shadow: 0 0 10px -1px var(--rc-glow), inset 0 0 8px -2px var(--rc-glow);
}
.btn-modo.activo {
  color: var(--rc-bg);
  background: var(--rc-green);
  box-shadow: 0 0 14px var(--rc-glow), inset 0 0 8px -2px var(--rc-glow);
}

/* Solo se muestra el botón del OTRO modo (al que se puede cambiar); en
   Classic la entrada a Fallout vive en el punto rojo del logo. */
html[data-modo="classic"] #btn-modo-classic { display: none; }

.rc-logo-punto-boton {
  appearance: none;
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
  font: inherit;
  line-height: 1;
  cursor: pointer;
  vertical-align: baseline;
}
.rc-logo-punto-boton:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
.rc-logo-punto-boton:disabled {
  cursor: not-allowed;
  opacity: .35;
}

/* Menú de perfil del header (nombre + ícono redondo): visible en los dos
   modos, ocupando el mismo lugar/ancho que antes tenía el botón "Cerrar
   sesión" (ver .rc-modo-y-carrito button). Se despliega un menú con "Ir a
   perfil" y, solo en Classic, "Cerrar sesión" (en Fallout ese log out sigue
   viviendo únicamente en el interruptor de la barra lateral, ver
   #btn-logout-fallout). */
.rc-perfil-menu { position: relative; width: 100%; }
/* Especificidad ".rc-modo-y-carrito .rc-perfil-boton" a propósito: le gana a
   ".rc-modo-y-carrito button" (más específica que una sola clase) para poder
   sacarle el padding/text-align de botón genérico — este no es un botón con
   recuadro como "Modo Fallout"/"Modo Classic", es texto + ícono pegados al
   borde derecho. */
.rc-modo-y-carrito .rc-perfil-boton {
  width: 100%; display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  padding: 0; margin: 0; font-size: clamp(13px, 3.5vw, 15px); text-align: right;
  background: transparent; border: none; box-shadow: none;
}
.rc-modo-y-carrito .rc-perfil-boton:hover, .rc-modo-y-carrito .rc-perfil-boton:focus-visible {
  background: transparent; border: none; box-shadow: none;
}
.rc-perfil-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 90px; }
.rc-perfil-icono { display: inline-flex; width: 22px; height: 22px; flex-shrink: 0; }
.rc-perfil-icono-svg { width: 100%; height: 100%; }
.rc-perfil-icono-fallout { display: none; }
html[data-modo="fallout"] .rc-perfil-icono-classic { display: none; }
html[data-modo="fallout"] .rc-perfil-icono-fallout { display: block; }
html[data-modo="fallout"] .rc-perfil-nombre {
  font-size: 22px;
  line-height: 22px;
}

.rc-perfil-dropdown {
  position: absolute; top: calc(100% + 6px); right: 0; left: auto; z-index: 20;
  display: flex; flex-direction: column;
  min-width: 152px;
  width: max-content;
  max-width: min(220px, calc(100vw - 24px));
  background: var(--rc-bg-panel); border: 1px solid var(--rc-green-dim);
  box-sizing: border-box;
}
.rc-perfil-dropdown.oculto { display: none; }
#btn-logout-classic.oculto { display: none; }
#btn-logout-fallout.oculto { display: none; }
/* Las 3 opciones ("Ir a perfil" es <a>, las otras dos <button>) tienen que
   verse IDÉNTICAS: un <button> nativo trae chrome propio del sistema
   operativo (padding/alineado vertical) que ni border:none ni background
   pisan del todo sin appearance:none — por eso, aunque el CSS fuera igual,
   el texto quedaba desalineado contra el <a>. flex+align-items+una altura
   fija resuelve la alineación vertical sin depender de line-height. */
.rc-perfil-opcion {
  display: flex; align-items: center; width: 100%; min-height: 40px; box-sizing: border-box;
  padding: 0 12px; font-size: 13px; text-align: left;
  font-family: var(--rc-font); font-weight: 600;
  background: transparent; border: none; box-shadow: none; margin: 0;
  appearance: none; -webkit-appearance: none;
  line-height: 1.25;
  white-space: nowrap;
  color: var(--rc-green); text-decoration: none; cursor: var(--rc-cursor);
}
.rc-perfil-opcion:hover, .rc-perfil-opcion:focus-visible {
  color: var(--rc-green-bright); background: var(--rc-bg-panel-2); cursor: var(--rc-cursor-mira);
}
/* ".rc-modo-y-carrito button" (arriba) es un selector por descendiente que
   agarra CUALQUIER <button> adentro de ese contenedor -incluidos estos, que
   viven anidados ahí mismo dentro de #rc-perfil-dropdown- y con más
   especificidad que ".rc-perfil-opcion" le pisaba padding/font-size/
   text-align/display. Como "Ir a perfil" es un <a>, nunca le tocaba esa
   regla y quedaba con otra pinta sin importar qué le cambiáramos a
   ".rc-perfil-opcion". Este selector con el id del dropdown le gana. */
#rc-perfil-dropdown.rc-perfil-dropdown .rc-perfil-opcion {
  display: flex; align-items: center; width: 100%;
  padding: 0 12px; font-size: 13px; text-align: left;
}
/* La regla de arriba fuerza "display:flex" con más especificidad que
   ".oculto{display:none}" sola -por eso "Cerrar sesión"/"Pedidos" seguían
   visibles para un invitado aunque JS les hubiera puesto la clase "oculto"
   (bug real, no solo de "Pedidos"). Esta gana por tener un componente más
   de especificidad que la de arriba. */
#rc-perfil-dropdown.rc-perfil-dropdown .rc-perfil-opcion.oculto {
  display: none;
}

/* "Cerrar sesión" del menú de perfil solo existe en Modo Classic. */
#btn-logout-classic { display: block; }
html[data-modo="fallout"] #btn-logout-classic { display: none; }


/* Mensaje de confirmación de log out y diálogo de "¿estás seguro?" previo
   (look terminal Pip-Boy por default; Modo Classic lo reestiliza en
   classic.css). Misma clase para los dos overlays, sirve para ambos modos. */
.rc-logout-overlay {
  position: fixed; inset: 0; z-index: 10020;
  display: none; align-items: center; justify-content: center; padding: 20px;
}
.rc-logout-overlay.visible { display: flex; }
.rc-logout-tarjeta {
  width: 100%; max-width: 360px; text-align: center;
  background: #010601; border: 3px solid var(--rc-green-dim);
  box-shadow: 0 0 10px -1px var(--rc-glow), inset 0 0 8px -2px var(--rc-glow);
  padding: 24px 20px;
}
.rc-logout-texto {
  margin: 0 0 18px; font-size: 15px; line-height: 1.5; color: var(--rc-green-bright);
  text-shadow: 0 0 6px var(--rc-glow);
}
.rc-logout-tarjeta button {
  width: 100%; height: 42px;
  color: var(--rc-green-bright); border-color: var(--rc-green);
  box-shadow: 0 0 10px -1px var(--rc-glow), inset 0 0 8px -2px var(--rc-glow);
}
/* Diálogo de confirmación: 2 botones lado a lado en vez de 1 solo, angostos
   (no estirados a todo el ancho de la tarjeta como con flex:1) y centrados —
   mismo alto que los botones de categoría, ancho acorde al tamaño de la
   ventana de confirmación. */
.rc-logout-acciones { display: flex; gap: 10px; justify-content: center; }
.rc-logout-acciones button { flex: 0 0 auto; width: 130px; }

/* Popup de condiciones mayoristas: misma base que rc-logout-overlay/tarjeta,
   pero más ancho y alto (es texto largo, scrolleable) en vez de un mensaje
   corto centrado. El botón "Acepto" arranca deshabilitado y se habilita
   recién cuando el usuario llega al final del scroll (ver landing.js). */
.rc-terminos-tarjeta {
  max-width: 640px; max-height: 85vh;
  display: flex; flex-direction: column; text-align: left;
}
.rc-terminos-contenido {
  overflow-y: auto; margin-bottom: 18px; padding-right: 8px;
  color: var(--rc-green-bright); font-size: 14px; line-height: 1.55;
}
.rc-terminos-contenido h1 {
  margin: 0 0 14px; font-size: 17px; text-transform: uppercase; letter-spacing: .04em;
  text-shadow: 0 0 6px var(--rc-glow);
}
.rc-terminos-contenido h2 {
  margin: 22px 0 10px; font-size: 15px; text-transform: uppercase; letter-spacing: .03em;
  color: var(--rc-green-bright);
}
.rc-terminos-contenido h3 { margin: 16px 0 8px; font-size: 13.5px; color: var(--rc-green-dim); }
.rc-terminos-contenido p { margin: 0 0 10px; }
.rc-terminos-contenido ul { margin: 0 0 10px; padding-left: 20px; }
.rc-terminos-contenido li { margin-bottom: 6px; }
.rc-terminos-tarjeta .rc-logout-acciones button.oculto { display: none; }

/* Encabezado compartido por las cajas "Aplicá tu código" y "Dirección de
   entrega": título + botón de cerrar, mismo formato que el resto del carrito. */
.rc-codigo-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rc-codigo-titulo { margin: 0; font-size: 12px; color: var(--rc-green-dim); text-transform: uppercase; letter-spacing: .04em; }
.rc-codigo-header button { width: auto; height: auto; padding: 4px 10px; }

/* Reproductor de Spotify embebido (botón "Play Music" del Pip-Boy): sin
   panel visible. Controlado por la IFrame API de Spotify (.play()/.pause()
   reales). Importante: sacarlo de pantalla con coordenadas negativas (ej.
   left:-9999px) hace que la propia API de Spotify nunca dispare "ready" —
   parece tratar el iframe como no-visible y no completa su inicialización
   (probado: en pantalla sí dispara "ready" enseguida). Por eso queda dentro
   del viewport, en la esquina, pero en 1x1px y opacity:0 — "visible" para
   la API, invisible para el usuario y sin tapar nada. */
.rc-musica-iframe-oculto {
  position: fixed;
  left: 0;
  top: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: -1;
}

@media (max-width: 900px) {
  .rc-noticiero { display: none; }
}

@media (max-width: 560px) {
  .rc-fecha-hora { display: none; }
}

.carrousel-wrap { overflow: hidden; background: var(--rc-bg-panel); border-bottom: 1px solid var(--rc-green-faint); }
.carrousel {
  display: flex; gap: 48px; white-space: nowrap; padding: 14px 0;
  width: max-content;
  will-change: transform;
}
.carrousel-tanda { display: flex; gap: 48px; white-space: nowrap; }

/* Logo real de marca: solo se muestra en Modo Classic (ver classic.css).
   En Fallout el carrousel y las cards siguen siendo texto, sin cambios. */
.marca-logo-carrousel, .marca-logo-card {
  display: none;
}

.carrousel span {
  font-size: 15px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--rc-green-bright);
  text-shadow:
    0 0 6px var(--rc-glow),
    5px 0 0 rgba(51, 255, 102, 0.22),
    10px 0 0 rgba(51, 255, 102, 0.12),
    15px 0 0 rgba(51, 255, 102, 0.06),
    20px 0 0 rgba(51, 255, 102, 0.03);
  cursor: var(--rc-cursor);
}
.carrousel span:hover {
  cursor: var(--rc-cursor-mira); color: #c8ffdc;
  text-shadow:
    0 0 10px var(--rc-glow),
    5px 0 0 rgba(123, 255, 160, 0.28),
    10px 0 0 rgba(123, 255, 160, 0.16),
    15px 0 0 rgba(123, 255, 160, 0.08),
    20px 0 0 rgba(123, 255, 160, 0.04);
}

.rc-buscador {
  display: flex; align-items: center; gap: 10px;
  height: 44px; box-sizing: border-box;
  margin: 20px 0 0; padding: 10px 14px;
  background: var(--rc-bg-panel); border: 3px solid var(--rc-green-dim);
  box-shadow: 0 0 6px -1px var(--rc-glow), inset 0 0 6px -2px var(--rc-glow);
}
.rc-buscador-icono { width: 18px; height: 18px; color: var(--rc-green-dim); flex: 0 0 18px; }
.rc-buscador input {
  flex: 1; min-width: 0; border: none; background: transparent; padding: 4px 0; font-size: 14px;
}
.rc-buscador input:focus { outline: none; box-shadow: none; }
.rc-buscador input::placeholder {
  color: var(--rc-green-dim); text-shadow: 0 0 6px var(--rc-glow); opacity: 1;
}
.rc-buscador-header { width: 100%; }

.fila-principal {
  display: flex; align-items: stretch; gap: 20px;
  padding: 0 20px 16px; flex: 1;
  min-height: 0;
}

.columna-izquierda {
  display: flex; flex-direction: column; gap: 10px;
  flex: 0 0 420px; max-width: 420px;
}

.categorias-columna {
  display: flex; flex-direction: column; gap: 10px;
}
.categorias-columna.oculto { display: none; }
.btn-categoria {
  padding: 18px 20px; font-size: 15px; text-transform: uppercase; letter-spacing: .04em;
  text-align: center;
  text-shadow:
    0 0 6px var(--rc-glow),
    5px 0 0 rgba(51, 255, 102, 0.22),
    10px 0 0 rgba(51, 255, 102, 0.12),
    15px 0 0 rgba(51, 255, 102, 0.06),
    20px 0 0 rgba(51, 255, 102, 0.03);
}
#categorias .btn-categoria {
  flex: 1;
  min-height: 40px;
  padding: 8px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn-categoria.activo {
  background: var(--rc-green-faint); color: var(--rc-green-bright); border-color: var(--rc-green);
  font-weight: 600;
}

/* Filtros de marca/tipo dentro de una sección: al activarse conservan solo
   el brillo de selección, sin desplazarse ni "saltar" hacia adelante. */
#sub-nav .btn-categoria {
  position: relative;
  transition: transform .2s ease, box-shadow .2s ease;
}
#sub-nav .btn-categoria.activo {
  z-index: 3;
  box-shadow: 0 0 20px 4px var(--rc-halo-seleccion-glow), 0 6px 14px -6px rgba(0, 0, 0, 0.35);
}

/* --- Overlay CRT "plus": capas extra inspiradas en el shader retro de
   God's Eye View (github.com/bilawalsidhu/gods-eye-view, MIT) — máscara RGB
   de subpíxeles, barrido de scanline en movimiento y glitch bar ocasional.
   Puramente CSS (sin WebGL), solo en modo Fallout, no intercepta clicks. */
.rc-crt-plus { display: none; }
html[data-modo="fallout"] .rc-crt-plus {
  display: block;
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  overflow: hidden;
}
html[data-modo="fallout"] .rc-crt-plus::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    90deg,
    rgba(255, 40, 40, 0.035) 0px,
    rgba(40, 255, 90, 0.035) 1px,
    rgba(60, 90, 255, 0.035) 2px,
    rgba(0, 0, 0, 0) 3px
  );
  mix-blend-mode: screen;
}
html[data-modo="fallout"] .rc-crt-plus::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 5vh;
  background: linear-gradient(
    to bottom,
    rgba(123, 255, 160, 0) 0%,
    rgba(123, 255, 160, 0.05) 50%,
    rgba(123, 255, 160, 0) 100%
  );
  animation: rc-crt-scanband 7s linear infinite;
}
@keyframes rc-crt-scanband {
  0% { top: -5vh; }
  100% { top: 105vh; }
}
/* Glitch bar: elemento propio, separado del scanband/mascara de arriba.
   Anima solo "opacity" (a diferencia de alternar todo el "background" entre
   un gradiente y "none", que en algunos navegadores queda trabado en el
   estado con gradiente en vez de apagarse) — así el flash prende y apaga
   de forma confiable, ciclo largo, activo un instante muy breve. */
.rc-crt-glitch { display: none; }
html[data-modo="fallout"] .rc-crt-glitch {
  display: block;
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  background: linear-gradient(
    to bottom,
    rgba(123, 255, 160, 0) 41%,
    rgba(123, 255, 160, 0.25) 42%,
    rgba(123, 255, 160, 0) 43%
  );
  opacity: 0;
  animation: rc-crt-glitchbar 9s linear infinite;
}
@keyframes rc-crt-glitchbar {
  0%, 96%, 96.8%, 100% { opacity: 0; }
  96.4% { opacity: 1; }
}

/* --- Grano de "estática" de TV, animado con un filtro SVG feTurbulence
   (sin ninguna imagen/asset — el ruido se genera en el navegador). Idea
   tomada del grain de noir.js de God's Eye View (MIT), portada a CSS/SVG
   puro en vez de WebGL. Muy sutil y solo en modo Fallout. --- */
.rc-crt-grano { display: none; }
html[data-modo="fallout"] .rc-crt-grano {
  display: block;
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="g"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" stitchTiles="stitch"><animate attributeName="seed" values="1;40;1" dur="1.2s" repeatCount="indefinite"/></feTurbulence><feColorMatrix type="matrix" values="0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0.9 0 0 0 0"/></filter><rect width="100%25" height="100%25" filter="url(%23g)"/></svg>');
}

/* --- HUD fijo en la esquina, tipo cámara de vigilancia: REC parpadeante +
   barras de señal que varían. Se dibuja DEBAJO del overlay CRT (menor
   z-index que .rc-crt-plus/.rc-crt-glitch) para que el barrido de scanline
   pase por encima, como si fuera parte de la señal capturada. --- */
.rc-hud-chrome { display: none; }
html[data-modo="fallout"] .rc-hud-chrome {
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: fixed;
  left: 14px;
  bottom: 14px;
  z-index: 9990;
  pointer-events: none;
  font-family: var(--rc-font);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--rc-green-bright);
  text-shadow: 0 0 4px var(--rc-glow);
  opacity: 0.75;
}
.rc-hud-rec { animation: rc-hud-rec-blink 1.6s steps(1) infinite; }
@keyframes rc-hud-rec-blink {
  0%, 55% { opacity: 1; }
  56%, 100% { opacity: 0.25; }
}
.rc-hud-barras { letter-spacing: 0.12em; }

.rc-switch-fallout-wrap { display: none; }
html[data-modo="fallout"] .rc-switch-fallout-wrap {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 12px;
  width: 100%;
  margin-top: auto;
  margin-bottom: auto;
}
/* Solo tiene sentido en el home (ver #categorias): al entrar a una sección
   los botones de categoría se ocultan y este quedaba como único control.
   (Necesita la misma especificidad que la regla de arriba para ganarle.) */
html[data-modo="fallout"] .rc-switch-fallout-wrap.oculto { display: none; }
.rc-switches-columna {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  flex: 0 0 46%;
  min-width: 0;
}
/* Cada switch (Pip-Boy ON/OFF arriba, Log Out abajo) + su placa. El switch
   ocupa todo el ancho de la columna, con el borde izquierdo pegado al de
   los botones de categoría (align-items:flex-start acá, en
   .rc-switch-fallout-item); su placa va centrada debajo (align-items:center
   en el grupo de adentro). */
.rc-switch-fallout-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}
.rc-switch-fallout-grupo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
}
/* Tornillos de las 4 esquinas (Pip-Boy ON/OFF y Log Out comparten esta
   clase): círculo metálico + ranura, todo con background-image (capas
   comma-separated, sin agregar ningún elemento al HTML). Cada ranura usa un
   ángulo distinto en el propio linear-gradient (no transform, así no hace
   falta un elemento por tornillo) para que parezca que cada uno se apretó
   con una inclinación distinta. Van dentro del padding del switch, nunca
   pisan el riel ni la etiqueta. */
.rc-switch-fallout {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 12px;
  background-repeat: no-repeat;
  background-position:
    left 4px top 4px, right 4px top 4px, left 4px bottom 4px, right 4px bottom 4px,
    left 4px top 4px, right 4px top 4px, left 4px bottom 4px, right 4px bottom 4px,
    0 0;
  background-size:
    7px 7px, 7px 7px, 7px 7px, 7px 7px,
    7px 7px, 7px 7px, 7px 7px, 7px 7px,
    auto;
  background-image:
    linear-gradient(22deg, transparent 46%, #0a0a0a 46% 54%, transparent 54%),
    linear-gradient(-30deg, transparent 46%, #0a0a0a 46% 54%, transparent 54%),
    linear-gradient(48deg, transparent 46%, #0a0a0a 46% 54%, transparent 54%),
    linear-gradient(-12deg, transparent 46%, #0a0a0a 46% 54%, transparent 54%),
    radial-gradient(circle at 50% 50%, #6a6a6a 0%, #2a2a2a 55%, transparent 62%),
    radial-gradient(circle at 50% 50%, #6a6a6a 0%, #2a2a2a 55%, transparent 62%),
    radial-gradient(circle at 50% 50%, #6a6a6a 0%, #2a2a2a 55%, transparent 62%),
    radial-gradient(circle at 50% 50%, #6a6a6a 0%, #2a2a2a 55%, transparent 62%),
    linear-gradient(180deg, #2b2b2b, #141414);
  border: 2px solid var(--rc-green-dim);
  border-radius: 0;
  box-shadow: 0 0 8px -1px var(--rc-glow), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  cursor: var(--rc-cursor-mira);
}
.rc-switch-fallout .rc-switch-etiqueta {
  font-size: 10px; font-weight: 700; letter-spacing: .06em;
  color: var(--rc-green-dim);
}
.rc-switch-fallout .rc-switch-riel {
  position: relative; flex: 1; height: 24px;
  background: #050505; border-radius: 0;
  border: 1px solid #000;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.7);
}
.rc-switch-fallout .rc-switch-perilla {
  position: absolute; top: 2px; left: 2px;
  width: 20px; height: 20px; border-radius: 0;
  background: radial-gradient(circle at 35% 30%, #7bffa0, #1a7a33);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.7), 0 0 6px var(--rc-glow);
  transition: left .25s ease, background .25s ease;
}
.rc-switch-fallout.apagado .rc-switch-perilla {
  left: calc(100% - 22px);
  background: radial-gradient(circle at 35% 30%, #ff8a8a, #7a1a1a);
}

/* Placa retroiluminada estilo tablero de avión viejo, debajo del switch. */
.rc-switch-placa {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--rc-green-bright);
  background: #0a0a0a;
  border: 1px solid #000;
  border-radius: 0;
  padding: 3px 10px;
  text-shadow: 0 0 4px var(--rc-glow), 0 0 8px var(--rc-glow);
  box-shadow: inset 0 0 6px -1px var(--rc-glow), 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* Botón de música: estilo botón físico viejo (bisel metálico + disco
   circular + ecualizador animado), misma familia visual que los switches
   de arriba. Ocupa todo el ancho que le queda libre después de la columna
   de switches (ver flex:0 0 46% ahí arriba) y el gap entre ambos. Con
   align-items:stretch en el wrap, este item mide lo mismo de alto que la
   columna de switches, y el botón (flex:1 adentro) ocupa todo ese alto
   menos su propia placa — así el borde inferior del botón coincide
   exactamente con el borde inferior del switch "LOG OUT" (antes de SU
   placa), igual que el derecho ya coincidía con los botones de categoría.
   En el espacio agregado (izquierda + abajo) va el visor negro con el
   crawl. */
.rc-boton-musica-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
}
/* Ahora es un div (no un botón): adentro hay 3 botones propios (RW, play
   disco, FF), no puede haber <button> anidados. Mismos tornillos de esquina
   que .rc-switch-fallout (ver ahí arriba el detalle), pero más grandes —
   este panel es bastante más ancho/alto que un switch. */
.rc-boton-musica {
  position: relative;
  flex: 1;
  width: 100%;
  display: flex; flex-direction: column; align-items: center;
  padding: 10px;
  gap: 8px;
  background-repeat: no-repeat;
  background-position:
    left 1px top 1px, right 1px top 1px, left 1px bottom 1px, right 1px bottom 1px,
    left 1px top 1px, right 1px top 1px, left 1px bottom 1px, right 1px bottom 1px,
    0 0;
  background-size:
    9px 9px, 9px 9px, 9px 9px, 9px 9px,
    9px 9px, 9px 9px, 9px 9px, 9px 9px,
    auto;
  background-image:
    linear-gradient(15deg, transparent 46%, #0a0a0a 46% 54%, transparent 54%),
    linear-gradient(-42deg, transparent 46%, #0a0a0a 46% 54%, transparent 54%),
    linear-gradient(60deg, transparent 46%, #0a0a0a 46% 54%, transparent 54%),
    linear-gradient(-20deg, transparent 46%, #0a0a0a 46% 54%, transparent 54%),
    radial-gradient(circle at 50% 50%, #6a6a6a 0%, #2a2a2a 55%, transparent 62%),
    radial-gradient(circle at 50% 50%, #6a6a6a 0%, #2a2a2a 55%, transparent 62%),
    radial-gradient(circle at 50% 50%, #6a6a6a 0%, #2a2a2a 55%, transparent 62%),
    radial-gradient(circle at 50% 50%, #6a6a6a 0%, #2a2a2a 55%, transparent 62%),
    linear-gradient(180deg, #2b2b2b, #141414);
  border: 2px solid var(--rc-green-dim);
  border-radius: 0;
  box-shadow: 0 0 8px -1px var(--rc-glow), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.rc-boton-musica-controles {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
/* Único botón redondo del panel a propósito (excepción al resto de bordes
   rectos de Fallout): es el disco de play, no un ícono más — pedido
   explícito. */
.rc-boton-musica-disco {
  width: 54px; height: 54px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #7bffa0, #1a7a33);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.7), 0 0 6px var(--rc-glow);
  border: none;
  cursor: var(--rc-cursor-mira);
  transition: box-shadow .15s ease;
}
.rc-boton-musica-disco:hover {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.7), 0 0 10px var(--rc-glow);
}
.rc-boton-musica-disco:active {
  transform: translateY(1px);
}
.rc-boton-musica-disco:disabled {
  opacity: .5;
  cursor: var(--rc-cursor);
}
.rc-boton-musica-icono {
  width: 21px; height: 21px;
  color: #06210e;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.4));
  transition: color .15s ease;
}
/* El triángulo de play, del doble de tamaño que el resto de los íconos del
   panel (los demás quedan en 21px). */
.rc-boton-musica-icono.rc-icono-play { width: 42px; height: 42px; }
/* Transición play/pausa: .sonando la pone playback_update (ver landing.js),
   con el estado real de Spotify, no una suposición nuestra. Mientras suena,
   el ícono (el de pausa, que es el visible en ese momento) se ilumina de
   blanco en vez del verde oscuro por default. */
.rc-boton-musica-icono.rc-icono-pause { display: none; }
#btn-play-music.sonando .rc-icono-play { display: none; }
#btn-play-music.sonando .rc-boton-musica-icono {
  color: #fff;
  filter: drop-shadow(0 0 4px #fff);
}
#btn-play-music.sonando .rc-icono-pause { display: block; }
/* Botones chicos: reiniciar/anterior (RW) y siguiente (FF) — la API oficial
   de Spotify no tiene salto de pista, así que cargan a mano un track puntual
   de una lista fija (ver TRACKS_PLAYLIST en landing.js). Mismo formato de
   color que el disco de play (gradiente verde + ícono oscuro), pero sin
   cambiar su tamaño/forma actual. */
.rc-boton-musica-mini {
  width: 26px; height: 34px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 35% 30%, #7bffa0, #1a7a33);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.7), 0 0 6px var(--rc-glow);
  border: none;
  border-radius: 0;
  color: #06210e;
  cursor: var(--rc-cursor-mira);
  transition: box-shadow .15s ease;
}
.rc-boton-musica-mini svg { width: 18px; height: 18px; filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.4)); }
.rc-boton-musica-mini:hover {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.7), 0 0 10px var(--rc-glow);
}
.rc-boton-musica-mini:active {
  transform: translateY(1px);
}
.rc-boton-musica-mini:disabled {
  opacity: .35;
  cursor: var(--rc-cursor);
}
/* Ecualizador: puro detalle ambiente (no refleja audio real, esto solo
   enlaza a Spotify), 4 barras que rebotan a destiempo entre sí. Solo se
   anima mientras suena la música (.sonando en #btn-play-music, ver
   landing.js): en reposo queda quieto, a la altura mínima. */
.rc-ecualizador {
  display: flex; align-items: flex-end; justify-content: center;
  gap: 3px; height: 30px;
}
/* Longhand a propósito (nunca el shorthand "animation"): el shorthand
   resetea animation-delay a 0s en cualquier regla que lo use, y con más
   especificidad que ".rc-eq-barra:nth-child(n)" pisaba el desfasaje de
   cada barra — todas rebotaban juntas en vez de a destiempo. Achicando el
   toggle a animation-name (none/rc-eq-rebote) el delay de cada nth-child
   nunca se toca, y al pausar (animation-name:none) la barra vuelve sola,
   con la transition, a los 5px de reposo — no se congela a mitad de salto. */
.rc-eq-barra {
  width: 4px;
  height: 5px;
  background: var(--rc-green-bright);
  box-shadow: 0 0 4px var(--rc-glow);
  border-radius: 0;
  transition: height .2s ease;
  animation-name: none;
  animation-duration: 0.9s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
.rc-ecualizador.sonando .rc-eq-barra {
  animation-name: rc-eq-rebote;
}
.rc-eq-barra:nth-child(1) { animation-delay: 0s; }
.rc-eq-barra:nth-child(2) { animation-delay: .18s; }
.rc-eq-barra:nth-child(3) { animation-delay: .36s; }
.rc-eq-barra:nth-child(4) { animation-delay: .12s; }
@keyframes rc-eq-rebote {
  0%, 100% { height: 5px; }
  50% { height: 30px; }
}
/* Visor negro tipo cartel viejo de LED/vacuum-fluorescent, con el texto
   corriendo de derecha a izquierda sin cortes (2 copias seguidas del
   mismo texto, animadas -50%). Chico y fijo (no flex:1): con el alto que
   tenía antes llegaba a pisar visualmente los tornillos de la esquina
   inferior del panel. margin-top:auto lo manda igual al fondo del botón,
   dejando el aire que sobra arriba (entre el ecualizador y acá) en vez de
   estirar el propio visor. */
.rc-boton-musica-visor {
  flex: 0 0 auto;
  width: 100%;
  height: 14px;
  margin-top: auto;
  background: #000;
  border: 1px solid #000;
  border-radius: 0;
  box-shadow: inset 0 0 6px -1px var(--rc-glow);
  overflow: hidden;
  display: flex;
  align-items: center;
  /* ~1mm de aire antes de que el texto toque el borde, tanto al aparecer
     (derecha) como al desaparecer (izquierda). */
  padding: 0 4px;
}
.rc-visor-texto {
  display: inline-flex;
  white-space: nowrap;
  font-size: 10px;
  letter-spacing: .04em;
  color: var(--rc-green-bright);
  text-shadow: 0 0 4px var(--rc-glow), 0 0 8px var(--rc-glow);
  animation: rc-visor-crawl 12s linear infinite;
  padding-left: 100%;
}
.rc-visor-texto span { padding-right: 40px; }
@keyframes rc-visor-crawl {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.selector-marcas {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px;
}
.selector-marcas .btn-categoria { padding: 22px 16px; }

/* Búsqueda por Marca es una galería propia: cada acceso se reconoce por el
   logo, no por una copia del botón de categorías con texto. */
html[data-modo="classic"] .selector-marcas.selector-marcas-logos {
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: clamp(14px, 2vw, 24px);
  padding: clamp(4px, 1vw, 10px);
}
html[data-modo="classic"] .selector-marcas .btn-categoria.btn-marca-logo {
  min-height: clamp(108px, 12vw, 156px);
  padding: clamp(18px, 2vw, 28px);
  display: grid;
  place-items: center;
  border-color: var(--rc-green-dim);
  background: color-mix(in srgb, var(--rc-bg-panel-2) 82%, transparent);
}
html[data-modo="classic"] .marca-logo-selector {
  display: block;
  width: min(100%, 148px);
  height: clamp(56px, 7vw, 88px);
  object-fit: contain;
  filter: brightness(0) saturate(100%) invert(78%) sepia(50%) saturate(557%) hue-rotate(84deg) brightness(105%) contrast(102%);
}

@media (max-width: 700px) {
  html[data-modo="classic"] .selector-marcas.selector-marcas-logos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  html[data-modo="classic"] .selector-marcas .btn-categoria.btn-marca-logo {
    min-height: 112px;
    padding: 20px;
  }
  html[data-modo="classic"] .marca-logo-selector {
    width: min(100%, 118px);
    height: 64px;
  }
}

.btn-volver { width: 100%; }
.btn-volver.oculto { display: none; }

main#productos { flex: 1; min-width: 0; margin-top: 20px; }

/* Scroll temático (nunca la barra gris nativa) en los contenedores con
   scroll interno propio: listado de productos, dropdown de color, carrito,
   barra lateral (menú de marcas largo, ver más abajo). */
main#productos,
.columna-izquierda,
.dropdown-color-lista,
#panel-carrito {
  scrollbar-width: thin;
  scrollbar-color: var(--rc-green-dim) var(--rc-bg-panel);
}
main#productos::-webkit-scrollbar,
.columna-izquierda::-webkit-scrollbar,
.dropdown-color-lista::-webkit-scrollbar,
#panel-carrito::-webkit-scrollbar {
  width: 8px;
}
main#productos::-webkit-scrollbar-track,
.columna-izquierda::-webkit-scrollbar-track,
.dropdown-color-lista::-webkit-scrollbar-track,
#panel-carrito::-webkit-scrollbar-track {
  background: var(--rc-bg-panel);
}
main#productos::-webkit-scrollbar-thumb,
.columna-izquierda::-webkit-scrollbar-thumb,
.dropdown-color-lista::-webkit-scrollbar-thumb,
#panel-carrito::-webkit-scrollbar-thumb {
  background: var(--rc-green-dim);
  border: 1px solid var(--rc-green-faint);
  box-shadow: 0 0 6px -1px var(--rc-glow);
}
main#productos::-webkit-scrollbar-thumb:hover,
.columna-izquierda::-webkit-scrollbar-thumb:hover,
.dropdown-color-lista::-webkit-scrollbar-thumb:hover,
#panel-carrito::-webkit-scrollbar-thumb:hover {
  background: var(--rc-green);
  box-shadow: 0 0 8px var(--rc-glow);
}

@media (min-width: 701px) {
  body.rc-vista-seccion {
    height: 100vh;
    overflow: hidden;
  }
  body.rc-vista-seccion .fila-principal {
    min-height: 0;
    overflow: hidden;
  }
  body.rc-vista-seccion .columna-izquierda {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
  }
  body.rc-vista-seccion main#productos {
    height: 100%;
    overflow-y: auto;
    padding: 0 95px 95px 95px;
  }
}

@media (min-width: 701px) {
  body:not(.rc-vista-seccion) {
    height: 100vh;
    overflow: hidden;
  }
  body:not(.rc-vista-seccion) .fila-principal {
    min-height: 0;
    overflow: hidden;
  }
  body:not(.rc-vista-seccion) .columna-izquierda {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
  }
  body:not(.rc-vista-seccion) main#productos {
    height: 100%;
    overflow-y: auto;
  }
}

@media (max-width: 700px) {
  body.rc-vista-seccion main#productos {
    padding: 0 46px 24px 46px;
  }
  .fila-principal {
    padding: 0 12px 16px;
  }
  html[data-modo="fallout"] .rc-switch-fallout-wrap {
    flex-direction: column;
  }
  .rc-switches-columna {
    flex: 1 1 auto;
  }
}

.carrousel-ciudad-wrap {
  display: flex; flex-direction: column; gap: 10px; height: 100%;
}
.carrousel-ciudad {
  position: relative;
  background: var(--rc-bg);
  overflow: hidden;
  flex: 1;
  min-height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.carrousel-ciudad-puntos {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center; gap: 8px;
}
.punto-ciudad {
  width: 10px; height: 10px; padding: 0; border-radius: 0;
  background: transparent; border: 1px solid var(--rc-green-dim);
  cursor: var(--rc-cursor);
}
.punto-ciudad:hover {
  cursor: var(--rc-cursor-mira); border-color: var(--rc-green);
  box-shadow: 0 0 4px var(--rc-glow);
}
.punto-ciudad.activo {
  background: var(--rc-green-bright); border-color: var(--rc-green);
  box-shadow: 0 0 6px var(--rc-glow);
}

/* Interferencia sutil solo en la tarjeta Pip-Boy, en cada cambio de foto. */
@keyframes pipboy-interferencia {
  0%   { filter: none; transform: none; }
  30%  { filter: brightness(1.15) contrast(1.1); transform: translateX(-2px); }
  50%  { filter: brightness(0.85); transform: translateX(2px); }
  70%  { filter: brightness(1.08); transform: translateX(-1px); }
  100% { filter: none; transform: none; }
}
.pipboy-interferencia .pipboy { animation: pipboy-interferencia 0.3s steps(3, end); }
.carrousel-ciudad-tarjeta {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* sin padding arriba: main#productos ya tiene margin-top:20px (igual al
     buscador), así el borde superior de la tarjeta queda exactamente
     alineado con el del buscador. */
  padding: 0 12px 12px;
  box-sizing: border-box;
  opacity: 0;
  transition: opacity 1.4s ease;
}
.carrousel-ciudad-tarjeta.visible { opacity: 1; }

/* --- Tarjeta "Pip-Boy": misma interfaz para todas las fotos, solo cambian
   los datos descriptivos (ver DATOS_LUGARES en landing.js). --- */
.pipboy {
  width: 100%;
  height: 100%;
  display: flex;
  border: 3px solid var(--rc-green-dim);
  background: #010601;
  overflow: hidden;
  box-shadow: 0 0 6px -1px var(--rc-glow), inset 0 0 6px -2px var(--rc-glow);
}
.pipboy-datos {
  flex: 0 0 38%;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}
.pipboy-datos, .pipboy-datos * {
  font-size: 17px;
  text-shadow: 0 0 6px var(--rc-glow), 0 0 12px var(--rc-glow);
}
.pipboy-marca { font-weight: 700; letter-spacing: .04em; color: var(--rc-green-bright); }
.pipboy-sub { color: var(--rc-green-dim); letter-spacing: .05em; margin: 2px 0 10px; }
.pipboy-linea { border: none; border-top: 1px dashed var(--rc-green-faint); margin: 8px 0; }
.pipboy-ubicacion {
  display: inline-block; padding: 3px 8px; margin-bottom: 10px; align-self: flex-start;
  background: var(--rc-green-faint); color: var(--rc-green-bright);
}
.pipboy-etiqueta { color: var(--rc-green-dim); letter-spacing: .05em; }
.pipboy-nombre { font-weight: 700; color: var(--rc-green-bright); margin: 2px 0 0; }
.pipboy-campos { line-height: 1.6; color: var(--rc-green); }
.pipboy-campos b { color: var(--rc-green-dim); }
/* Coordenadas clickeables: abren la ubicación en Google Maps (ver
   coordenadasHtml en landing.js). Mismo verde que el resto del texto, solo
   con el subrayado punteado para marcar que es interactivo. */
.pipboy-coordenadas-link {
  color: inherit;
  text-decoration: underline dotted;
  text-underline-offset: 2px;
  cursor: var(--rc-cursor-mira);
}
.pipboy-coordenadas-link:hover,
.pipboy-coordenadas-link:focus-visible {
  color: var(--rc-green-bright);
  text-shadow: 0 0 6px var(--rc-glow);
}
.pipboy-log {
  line-height: 1.45; color: var(--rc-green-bright); flex: 1;
  overflow-y: auto; overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--rc-green-dim) var(--rc-bg-panel);
}
.pipboy-log::-webkit-scrollbar { width: 8px; }
.pipboy-log::-webkit-scrollbar-track {
  background: var(--rc-bg-panel);
  border-left: 1px solid var(--rc-green-faint);
}
.pipboy-log::-webkit-scrollbar-thumb {
  background: var(--rc-green-dim);
  border: 1px solid var(--rc-green-faint);
  box-shadow: 0 0 6px -1px var(--rc-glow);
}
.pipboy-log::-webkit-scrollbar-thumb:hover {
  background: var(--rc-green);
  box-shadow: 0 0 8px var(--rc-glow);
}
.pipboy-globo-wrap { display: flex; align-items: center; gap: 8px; justify-content: flex-start; margin: 6px 0; }
.pipboy-globo {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
  background:
    radial-gradient(circle at 35% 32%, rgba(160, 255, 190, 0.55), rgba(51, 255, 102, 0.18) 55%, rgba(0, 0, 0, 0.7) 100%),
    repeating-linear-gradient(90deg, transparent 0 5px, rgba(51, 255, 102, 0.4) 5px 6px);
  background-size: 100% 100%, 220% 100%;
  border: 1px solid var(--rc-green);
  box-shadow: 0 0 8px var(--rc-glow), inset 0 0 10px rgba(0, 0, 0, 0.65);
  animation: pipboy-girar 6s linear infinite;
}
@keyframes pipboy-girar {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 0 0, -220% 0; }
}
.pipboy-globo-texto { color: var(--rc-green-dim); letter-spacing: .03em; line-height: 1.4; }
.pipboy-pie {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--rc-green-faint); padding: 5px 8px; margin-top: auto;
}
.pipboy-frase { color: var(--rc-green-bright); line-height: 1.3; }
.pipboy-frase .rc-cursor { display: inline-block; animation: rc-blink 1s steps(1) infinite; }
.pipboy-imagen-wrap {
  position: relative;
  flex: 1;
  overflow: hidden;
  border-left: 1px solid var(--rc-green-dim);
}
.pipboy-imagen-wrap img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) sepia(1) hue-rotate(65deg) saturate(4) brightness(0.75) contrast(1.5);
}
.pipboy-esquina { position: absolute; width: 18px; height: 18px; border-color: var(--rc-green-bright); }
.pipboy-esquina.tl { top: 6px; left: 6px; border-top: 2px solid; border-left: 2px solid; }
.pipboy-esquina.tr { top: 6px; right: 6px; border-top: 2px solid; border-right: 2px solid; }
.pipboy-esquina.bl { bottom: 6px; left: 6px; border-bottom: 2px solid; border-left: 2px solid; }
.pipboy-esquina.br { bottom: 6px; right: 6px; border-bottom: 2px solid; border-right: 2px solid; }

/* Layout del carrousel de recomendados, compartido por Classic y por
   Fallout (cuando el Pip-Boy está apagado). height:100% para llegar hasta
   el borde inferior real de la barra lateral en cada modo (arriba: borde
   superior del buscador; abajo: último control de la barra — el switch
   "LOG OUT" en Fallout, el último botón de categoría en Classic). Con 6
   cards (2 filas x 3, ver classic.css) en vez de 3, ocupan ese espacio en
   vez de quedar cortas. */
.carrousel-recomendados-wrap {
  position: relative;
  display: flex; flex-direction: column;
  height: 100%;
}
html[data-modo="fallout"] .carrousel-recomendados-grid {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto auto auto auto;
  gap: 10px;
  opacity: 0;
  transition: opacity .25s ease;
}
html[data-modo="fallout"] .carrousel-recomendados-grid.visible { opacity: 1; }
/* Carrousel de recomendados con temática Fallout: en Classic el acento es
   rojo Martini (--cl-rojo, ver classic.css); acá, verde fosforescente con el
   mismo glow de texto que usa el resto de la terminal. Reemplaza al Pip-Boy
   solo cuando el usuario lo apaga (ver Main Switch en la barra lateral). */
html[data-modo="fallout"] .tarjeta-recomendado {
  border-top: 6px solid var(--rc-green);
  border-radius: 0;
  box-shadow: 0 0 10px -2px var(--rc-glow), inset 0 0 10px -4px var(--rc-glow);
}
html[data-modo="fallout"] .tarjeta-recomendado-etiqueta {
  color: var(--rc-green);
  text-shadow: 0 0 4px var(--rc-glow);
}
html[data-modo="fallout"] .tarjeta-recomendado-precio strong {
  color: var(--rc-green-bright);
  text-shadow: 0 0 4px var(--rc-glow);
}

/* El Pip-Boy no tiene una resolución chica que lo haga legible: en vez de
   forzarlo a adaptarse, en pantallas chicas directamente no se muestra.
   Ojo: main#productos es el mismo contenedor que las cards de producto al
   entrar a una categoría (body.rc-vista-seccion), así que el ocultamiento
   se limita al home — si no, tapaba también el listado de productos. */
@media (max-width: 700px) {
  html[data-modo="fallout"] body:not(.rc-vista-seccion) main#productos { display: none; }
  /* El switch Pip-Boy ON/OFF no tiene sentido acá: el Pip-Boy que prende/
     apaga ya está oculto en esta resolución (regla de arriba). Log Out y
     el reproductor siguen mostrándose normal. */
  html[data-modo="fallout"] .rc-switch-fallout-item-pipboy { display: none; }
}

@media (max-width: 700px) {
  .fila-principal { flex-direction: column; }
  .columna-izquierda { flex: 1 1 auto; max-width: none; }
}

/* En mobile las cards ocupan casi todo el ancho de la pantalla, así que el
   pop (crecimiento por transform: scale) al seleccionarlas no tiene margen
   y se corta contra el borde de la pantalla. Se angostan un poco (padding
   lateral en el contenedor) para dejarle aire al pop, y el pop de Cards se
   hace más leve (igual que ya era en vista Lista) para no necesitar un
   padding excesivo. */
@media (max-width: 700px) {
  body.rc-vista-seccion main#productos {
    padding: 0 46px 24px 46px;
  }
  .card.expandida {
    transform: scale(1.1);
  }
}

.control-vista { display: flex; gap: 8px; margin-bottom: 10px; }
.btn-vista {
  height: 44px; box-sizing: border-box; display: inline-flex; align-items: center;
  padding: 6px 14px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em;
}
.control-orden {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.control-orden-etiqueta {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.btn-select-orden {
  min-width: 220px;
  appearance: none;
  background: var(--rc-bg-panel);
  color: var(--rc-green-bright);
  cursor: var(--rc-cursor);
}
.btn-select-orden:hover,
.btn-select-orden:focus-visible {
  cursor: var(--rc-cursor-mira);
}
.btn-vista.activo {
  background: var(--rc-green-faint); color: var(--rc-green-bright); border-color: var(--rc-green);
  font-weight: 600;
}

.grilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); gap: 16px; }
/* Reticle de "target lock" al pasar el mouse por una card, en modo Fallout —
   idea tomada del HUD de God's Eye View (MIT): 4 escuadras de esquina que
   "cierran" sobre la card al enfocarla, como si el Pip-Boy escaneara el
   objetivo. Puro CSS (gradientes formando cada escuadra), sin bloquear
   clicks. */
html[data-modo="fallout"] .card { position: relative; }
html[data-modo="fallout"] .card::before {
  content: "";
  position: absolute;
  inset: -6px;
  pointer-events: none;
  opacity: 0;
  transform: scale(1.12);
  transition: opacity .18s ease, transform .18s ease;
  background:
    linear-gradient(to right, var(--rc-green-bright) 3px, transparent 3px) top left / 18px 3px no-repeat,
    linear-gradient(to bottom, var(--rc-green-bright) 3px, transparent 3px) top left / 3px 18px no-repeat,
    linear-gradient(to left, var(--rc-green-bright) 3px, transparent 3px) top right / 18px 3px no-repeat,
    linear-gradient(to bottom, var(--rc-green-bright) 3px, transparent 3px) top right / 3px 18px no-repeat,
    linear-gradient(to right, var(--rc-green-bright) 3px, transparent 3px) bottom left / 18px 3px no-repeat,
    linear-gradient(to top, var(--rc-green-bright) 3px, transparent 3px) bottom left / 3px 18px no-repeat,
    linear-gradient(to left, var(--rc-green-bright) 3px, transparent 3px) bottom right / 18px 3px no-repeat,
    linear-gradient(to top, var(--rc-green-bright) 3px, transparent 3px) bottom right / 3px 18px no-repeat;
  filter: drop-shadow(0 0 4px var(--rc-glow));
}
html[data-modo="fallout"] .card:hover::before,
html[data-modo="fallout"] .card:focus-within::before {
  opacity: 1;
  transform: scale(1);
}

.card {
  background: var(--rc-bg-panel); border: 3px solid var(--rc-green-faint); padding: 16px;
  box-shadow: 0 0 6px -1px var(--rc-glow), inset 0 0 6px -2px var(--rc-glow);
  display: flex; flex-direction: column; gap: 8px; height: 100%; min-height: 260px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card h3 {
  margin: 0; font-size: 15px; color: var(--rc-green-bright);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; line-height: 1.3; min-height: calc(1.3em * 2);
  cursor: var(--rc-cursor-mira);
}

/* Tanto .tarjeta-recomendado-precio como .card .precios son flex-column
   (cada <strong>/<span> de bloquePreciosHtml es su propia fila, ver
   landing.js) — los dos íconos de acá abajo necesitan ir juntos en UNA
   fila en vez de cada uno en la suya, por eso van envueltos en este span. */
.tarjeta-recomendado-iconos { display: flex; flex-direction: row; }

/* Botón de foto (ícono de cámara) y de especificaciones (ícono de ficha):
   abren una búsqueda de Google (Imágenes, y Google normal + "especificaciones")
   del producto en una pestaña nueva. Van dentro del párrafo de precios, en
   su propia línea justo debajo de "transferencia" (un <br> antes en el
   HTML los empuja a esa línea), uno al lado del otro, así nunca se
   superponen a ningún otro texto. */
.btn-foto {
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: 6px;
  width: 26px; height: 26px; flex-shrink: 0; padding: 0;
  background: none; border: none; box-shadow: none; color: var(--rc-green-dim);
  cursor: var(--rc-cursor-mira);
  transition: color .15s ease, filter .15s ease;
}
.btn-foto:hover, .btn-foto:focus-visible { background: none; border: none; box-shadow: none; }
.btn-foto + .btn-foto { margin-left: 6px; }
.btn-foto svg { width: 26px; height: 26px; }
.btn-foto:hover {
  color: var(--rc-green-bright);
  filter: drop-shadow(0 0 4px var(--rc-glow));
}
/* Título truncado por lo largo del nombre: un click en la card lo muestra
   completo, agrandando la card (crece de verdad, el grid/lista reacomoda
   todo alrededor sin superponerse) y con un pequeño "pop" de énfasis.
   Funciona igual en Classic y en Fallout, es la misma .card. */
.card.expandida h3, .grilla.lista .card.expandida h3 {
  -webkit-line-clamp: unset;
  overflow: visible;
}
.card.expandida {
  position: relative;
  transform: scale(1.3);
  z-index: 50;
  box-shadow: 0 16px 34px -6px rgba(0, 0, 0, 0.45);
}
/* Vista Lista: las cards ocupan casi todo el ancho disponible, así que un
   pop centrado empuja el borde derecho fuera del contenedor y se cropea.
   Más sutil (5%) y creciendo hacia la izquierda (transform-origin a la
   derecha), para que el borde derecho quede fijo y nunca se corte. */
.grilla.lista .card.expandida {
  transform: scale(1.05);
  transform-origin: right center;
}
.card .precios {
  font-size: 13px; color: var(--rc-green-dim); line-height: 1.6; margin: 0;
  display: flex; flex-direction: column; gap: 1px;
}
.card .precios strong { color: var(--rc-green-bright); font-size: 14px; }
.selector-colores {
  margin: 0; font-size: 12px; color: var(--rc-green-dim);
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.dropdown-color { position: relative; flex: 1; min-width: 100px; }
.dropdown-color-boton {
  width: 100%; padding: 4px 8px; font-size: 12px; text-transform: none;
  background: var(--rc-bg-panel-2); border: 1px solid var(--rc-green-dim); color: var(--rc-green);
  text-align: left;
}
.dropdown-color-lista {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 20;
  margin: 2px 0 0; padding: 0; list-style: none;
  background: var(--rc-bg-panel); border: 1px solid var(--rc-green);
  box-shadow: 0 0 8px -1px var(--rc-glow);
  max-height: 160px; overflow-y: auto;
}
.dropdown-color-lista.oculto { display: none; }
.dropdown-color-lista li {
  padding: 6px 8px; font-size: 12px; color: var(--rc-green);
  cursor: var(--rc-cursor);
}
.dropdown-color-lista li:hover {
  background: var(--rc-green-faint); color: var(--rc-green-bright);
  cursor: var(--rc-cursor-mira);
}
/* Envuelve los íconos de foto/especificaciones + "Agregar al carrito",
   apilados (íconos arriba, botón abajo) — separado del párrafo de precios
   para que nunca quede pegado al nombre del producto (con nombres largos,
   en modo Lista, quedaba superpuesto/feo). margin-top:auto va acá en vez
   de en el botón directamente, para seguir empujando todo el bloque al
   fondo de la card en modo Cards. */
.card-acciones { margin-top: auto; display: flex; flex-direction: column; gap: 6px; align-items: center; }
.card .btn-agregar { font-size: 13px; }
.card .btn-agregar:disabled {
  opacity: 0.4; cursor: not-allowed;
}
.mensaje-vacio { color: var(--rc-green-dim); padding: 40px; text-align: center; }

.grilla.lista { display: flex; flex-direction: column; gap: 10px; }
.grilla.lista .card {
  flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between;
  padding: 10px 16px; gap: 8px 20px; height: auto; min-height: 0;
}
.grilla.lista .card h3 { flex: 1 1 200px; -webkit-line-clamp: 1; min-height: 0; }
.grilla.lista .card .selector-colores { margin: 0; flex: 0 1 220px; }
.grilla.lista .card .precios { margin: 0; text-align: right; }
.grilla.lista .card .card-acciones { margin-top: 0; align-items: center; }

#overlay-carrito {
  position: fixed; inset: 0; background: rgba(0, 0, 0, .6); z-index: 9990;
}
#overlay-carrito.oculto { display: none; }

#panel-carrito {
  --carrito-boton-altura: 40px;
  position: fixed;
  top: 24px;
  right: auto;
  bottom: var(--rc-carrito-separacion-footer);
  left: 50%;
  width: min(600px, calc(100vw - 32px));
  transform: translateX(-50%);
  background: var(--rc-bg-panel);
  border: 2px solid var(--rc-green-dim);
  border-radius: 18px;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.45), inset 0 0 12px -6px var(--rc-glow);
  z-index: 9995; display: flex; flex-direction: column;
  padding: 20px 20px calc(20px + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
}
#panel-carrito.oculto { display: none; }
.panel-carrito-header { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; }
.panel-carrito-header h2 { margin: 0; font-size: 16px; text-transform: uppercase; letter-spacing: .04em; }
.carrito-nota { margin: 8px 0 0; font-size: 12px; color: var(--rc-green-dim); }
#items-carrito {
  flex: 0 0 auto;
  margin: 16px 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.item-carrito {
  border: 3px solid var(--rc-green-faint); padding: 10px;
  box-shadow: 0 0 6px -1px var(--rc-glow), inset 0 0 6px -2px var(--rc-glow);
}
.item-nombre { margin: 0 0 6px; font-size: 13px; }
.item-descuento { border-style: dashed; border-color: var(--rc-green); }
.item-descuento .item-nombre { color: var(--rc-green-bright); margin: 0 0 4px; }
.item-descuento-valor { margin: 0; font-size: 13px; color: var(--rc-green-bright); }
#items-carrito .item-precios,
#total-carrito,
.item-descuento-valor { display: flex; flex-direction: column; gap: 2px; }
#items-carrito .item-precios { margin: 0 0 8px; font-size: 12px; color: var(--rc-green-dim); line-height: 1.4; }
.item-controles { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.item-controles button { padding: 4px 10px; font-size: 13px; }
.panel-carrito-footer { flex: 0 0 auto; border-top: 1px solid var(--rc-green-faint); padding-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.panel-carrito-footer #fecha-entrega,
.panel-carrito-footer #direccion-entrega {
  box-sizing: border-box;
  min-height: 50px;
  padding: 0 12px;
}
.descuento-mailing {
  display: flex; flex-direction: column; gap: 8px;
  padding: 10px; border: 1px solid var(--rc-green-faint);
  background: rgba(15, 24, 18, .55);
}
.descuento-mailing label { font-size: 12px; color: var(--rc-green-dim); text-transform: uppercase; letter-spacing: .04em; }
.descuento-mailing-fila { display: flex; gap: 8px; }
.descuento-mailing input {
  flex: 1 1 auto; min-width: 0;
  background: #0b140f; color: var(--rc-green-bright);
  border: 1px solid var(--rc-green-faint); padding: 10px 12px;
  font-family: var(--rc-font); text-transform: uppercase;
}
.descuento-mailing-estado { margin: 0; min-height: 18px; font-size: 12px; color: var(--rc-green-dim); }
.descuento-mailing-estado.ok { color: var(--rc-green-bright); }
.descuento-mailing-estado.error { color: #ff8b8b; }
#total-carrito { margin: 0; font-size: 14px; color: var(--rc-green-bright); }
#btn-aplicar-codigo,
#btn-guardar-direccion,
#btn-abrir-codigo,
#btn-abrir-direccion,
#btn-vaciar-carrito,
#btn-whatsapp {
  height: var(--carrito-boton-altura);
  box-sizing: border-box;
}

#direccion-entrega-wrap,
#modal-codigo {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--rc-green-faint);
  background: rgba(15, 24, 18, .55);
}
#selector-domicilio-entrega { display: block; }
#direccion-entrega-wrap.oculto,
#selector-domicilio-entrega.oculto,
#modal-codigo.oculto { display: none; }
#direccion-entrega-wrap input {
  box-sizing: border-box;
  min-height: 50px;
  padding: 0 12px;
}
#direccion-alias.oculto { display: none; }
/* Piso y depto: opcionales, lado a lado debajo de la dirección. */
#direccion-entrega-wrap .piso-depto-fila { display: flex; gap: 8px; }
#direccion-entrega-wrap .piso-depto-fila input { flex: 1; min-width: 0; }
.btn-usar-ubicacion {
  font-size: 12px;
  padding: 6px 10px;
  align-self: flex-start;
  background: none;
  border: 1px dashed var(--rc-green-dim);
}
.btn-usar-ubicacion:disabled { opacity: .6; cursor: default; }
.lista-domicilios-entrega {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid var(--rc-green-faint);
  background: var(--rc-bg-panel);
}
.lista-domicilios-entrega button {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 0;
  border-bottom: 1px solid var(--rc-green-faint);
  background: transparent;
  color: var(--rc-green-bright);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.lista-domicilios-entrega li:last-child button { border-bottom: 0; }
.lista-domicilios-entrega button:hover,
.lista-domicilios-entrega button:focus-visible {
  background: rgba(50, 255, 130, .12);
  outline: none;
}
#modal-codigo input {
  box-sizing: border-box;
  min-height: 50px;
  padding: 0 12px;
  background: #0b140f;
  color: var(--rc-green-bright);
  border: 1px solid var(--rc-green-faint);
  font-family: var(--rc-font);
  text-transform: uppercase;
}
.sugerencias-direccion {
  list-style: none;
  margin: -2px 0 0;
  padding: 0;
  max-height: 180px;
  overflow-y: auto;
  border: 1px solid var(--rc-green-faint);
  background: var(--rc-bg-panel);
}
.sugerencias-direccion.oculto { display: none; }
.sugerencias-direccion button {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-bottom: 1px solid var(--rc-green-faint);
  background: transparent;
  color: var(--rc-green-bright);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.sugerencias-direccion li:last-child button { border-bottom: 0; }
.sugerencias-direccion button:hover,
.sugerencias-direccion button:focus-visible {
  background: rgba(50, 255, 130, .12);
  outline: none;
}

@media (max-width: 700px) {
  #direccion-entrega-wrap:not(.oculto),
  #selector-domicilio-entrega:not(.oculto),
  #modal-codigo:not(.oculto) {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10021;
    width: min(320px, calc(100vw - 32px));
  }
  #direccion-entrega-wrap:not(.oculto),
  #modal-codigo:not(.oculto) {
    background: #010601;
    border: 3px solid var(--rc-green-dim);
    box-shadow: 0 0 10px -1px var(--rc-glow), inset 0 0 8px -2px var(--rc-glow);
    padding: 20px;
  }
  #selector-domicilio-entrega:not(.oculto) .lista-domicilios-entrega {
    background: #010601;
    border: 3px solid var(--rc-green-dim);
    box-shadow: 0 0 10px -1px var(--rc-glow), inset 0 0 8px -2px var(--rc-glow);
    max-height: min(320px, 60vh);
  }
}
.carrito-disclaimer {
  margin: 0;
  font-size: 11px;
  line-height: 1.35;
  color: var(--rc-green-dim);
  text-align: center;
}

.rc-pie {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  text-align: center; padding: 12px 20px; margin-top: auto;
  border-top: 1px solid var(--rc-green-faint); background: var(--rc-bg-panel);
  color: var(--rc-green-dim); font-size: 13px;
}
.rc-redes { display: flex; gap: 16px; }
.rc-red-icono {
  display: flex; color: var(--rc-green-dim);
  transition: color .15s ease, filter .15s ease;
}
.rc-red-icono svg { width: 22px; height: 22px; }
.rc-red-icono:hover, .rc-red-icono:focus-visible {
  color: var(--rc-green-bright); filter: drop-shadow(0 0 4px var(--rc-glow));
  cursor: var(--rc-cursor-mira); outline: none;
}

@media (max-width: 480px) {
  header { padding: 12px 14px; }
  .fila-principal { padding: 0 14px 32px; }
  .card { padding: 12px; }
  #panel-carrito { top: 12px; width: calc(100vw - 24px); padding: 14px 14px calc(14px + env(safe-area-inset-bottom, 0px)); }
  .rc-pie { padding: 12px 14px; font-size: 12px; }
}

@media (min-width: 701px) {
  #panel-carrito {
    left: auto;
    right: 24px;
    width: min(420px, calc(100vw - 48px));
    transform: none;
  }
}

@media (max-width: 700px) {
  #panel-carrito {
    top: 12px;
    right: 12px;
    left: 12px;
    width: auto;
    transform: none;
  }
}

/* Algunas vistas móviles informan un viewport CSS más ancho que el físico.
   Fallout necesita cubrir también ese rango para que el modal nunca herede
   el ancho de escritorio ni quede recortado a la derecha. */
@media (max-width: 900px) {
  html[data-modo="fallout"] #panel-carrito {
    top: 12px;
    right: 12px;
    left: 12px;
    width: auto;
    max-width: calc(100vw - 24px);
    min-width: 0;
    box-sizing: border-box;
    transform: none;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  html[data-modo="fallout"] #items-carrito,
  html[data-modo="fallout"] .panel-carrito-footer,
  html[data-modo="fallout"] .descuento-mailing,
  html[data-modo="fallout"] .descuento-mailing-fila {
    min-width: 0;
    max-width: 100%;
  }
  html[data-modo="fallout"] .item-nombre {
    overflow-wrap: anywhere;
  }
  html[data-modo="fallout"] #btn-aplicar-codigo {
    min-width: 0;
    padding-inline: 8px;
    font-size: 12px;
  }
}

/* Aviso flotante genérico (ver mostrarAvisoFlotante en landing.js) —
   usado hoy por "Compartir" en cada card/list item. */
#rc-aviso-flotante {
  position: fixed; left: 50%; bottom: 24px; z-index: 9998;
  transform: translate(-50%, 12px);
  max-width: min(90vw, 360px); text-align: center;
  background: var(--rc-bg-panel); border: 1px solid var(--rc-green-dim);
  color: var(--rc-green-bright); font-family: var(--rc-font); font-size: 14px; font-weight: 600;
  padding: 12px 18px; border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .4), 0 0 10px -2px var(--rc-glow);
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
#rc-aviso-flotante.visible { opacity: 1; transform: translate(-50%, 0); }

/* Respaldo de compartir para navegadores sin Web Share o portapapeles. */
#rc-panel-compartir {
  position: fixed; inset: 0; z-index: 10021; display: flex;
  align-items: center; justify-content: center; padding: 20px;
  background: rgba(0, 0, 0, .62);
}
#rc-panel-compartir[hidden] { display: none; }
.rc-panel-compartir-contenido {
  position: relative; width: min(420px, 100%); padding: 22px;
  border: 1px solid var(--rc-green-dim); border-radius: 12px;
  background: var(--rc-bg-panel); color: var(--rc-green-bright);
  box-shadow: 0 18px 42px rgba(0, 0, 0, .45), 0 0 16px -4px var(--rc-glow);
}
.rc-panel-compartir-contenido h2 { margin: 0 28px 8px 0; font-size: 18px; }
.rc-panel-compartir-nombre { margin: 0 0 14px; color: var(--rc-green); overflow-wrap: anywhere; }
.rc-panel-compartir-url {
  width: 100%; min-height: 42px; padding: 8px 10px; border: 1px solid var(--rc-green-dim);
  background: var(--rc-bg-panel-2); color: var(--rc-green-bright); font: inherit;
}
.rc-panel-compartir-acciones { display: flex; gap: 8px; margin-top: 12px; }
.rc-panel-compartir-acciones > * {
  flex: 1; min-height: 42px; display: inline-flex; align-items: center; justify-content: center;
  box-sizing: border-box; appearance: none;
  border: 1px solid var(--rc-green); color: var(--rc-green-bright); background: transparent;
  border-radius: 9px;
  font: inherit; font-weight: 700; text-align: center; text-decoration: none; cursor: pointer;
}
.rc-panel-compartir-cerrar {
  position: absolute; top: 10px; right: 12px; border: 0; background: transparent;
  color: var(--rc-green-bright); font: inherit; font-size: 26px; line-height: 1; cursor: pointer;
}
@media (max-width: 420px) {
  .rc-panel-compartir-acciones { flex-direction: column; }
}

/* Carrito sin sesión: productos, total, "Aplicar código" y "Confirmar pedido". */
#panel-carrito.carrito-invitado :is(label[for="fecha-entrega"], #fecha-entrega, #nota-entrega, #direccion-entrega-actual, #btn-abrir-direccion,
  #selector-domicilio-entrega, #direccion-entrega-wrap, #btn-vaciar-carrito) {
  display: none !important;
}


/* Cuentas mayoristas: tipo de pago | descuento percibido | precio final. */
.tabla-mayorista { display: grid; grid-template-columns: auto auto auto; gap: 2px 12px; width: 100%; }
.tabla-mayorista > :nth-child(3n+2) { text-align: center; color: #2e9e55; font-weight: 600; }
.tabla-mayorista > :nth-child(3n) { text-align: right; }
.tabla-mayorista .tm-cab { font-size: 0.8em; opacity: 0.7; text-transform: uppercase; color: inherit; font-weight: 400; }
.tabla-mayorista > :nth-child(3n+1):not(.tm-cab) { font-size: 1.15em; font-weight: 600; }