/* Tienda web de BigMarketShop: tema oscuro del tablero aprobado (Puma 25-oct-2026). Blanco y negro como el logo; el
   color lo ponen los productos. Sin acentos de color, sin degradés de colores, sin verde ni ámbar de fondo.
   Letra Geist propia (OFL, fuentes/OFL-Geist.txt): 800 en los títulos grandes y 400 en el texto, como escena.html. */
@font-face {
  font-family: Geist;
  src: url('fuentes/Geist.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --noche: #111214;     /* fondo de la página y de la barra */
  --grafito: #1C1D20;   /* segundo plano: celdas, bandas, globos */
  --linea: #2E2F33;     /* divisiones y bordes finos */
  --blanco: #FFFFFF;    /* títulos y texto principal */
  --niebla: #A9AAAE;    /* texto secundario */
  --papel: #EDEDEA;     /* tarjeta clara con la foto original del producto */
  --letra: Geist, "Helvetica Neue", Arial, sans-serif;
  --borde: clamp(16px, 4vw, 64px);   /* margen a los costados: 16 px en el celular */
  --ancho: 1600px;                   /* ancho máximo del contenido */
  --toque: 44px;                     /* lo mínimo que se toca con el dedo */
  --alto-cabecera: 72px;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--alto-cabecera) + 16px); }
body {
  margin: 0;
  background: var(--noche);
  color: var(--blanco);
  font-family: var(--letra);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
h1, h2, h3 { margin: 0; font-weight: 800; letter-spacing: -.045em; line-height: 1; }
:focus-visible { outline: 2px solid var(--blanco); outline-offset: 3px; }
.oculto {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.ico {
  width: 24px; height: 24px;
  fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
/* Producto sin foto válida (_sin_foto.html): un dibujo de «foto» con trazo fino, en el gris secundario, centrado en la
   caja de la foto (tarjeta o galería de la ficha, las dos sobre papel claro y con position: relative). */
.sin-foto-ico {
  position: absolute; left: 50%; top: 50%; width: clamp(40px, 22%, 96px); height: auto; max-width: none;
  transform: translate(-50%, -50%);
  fill: none; stroke: var(--niebla); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.sin-foto-ico * { vector-effect: non-scaling-stroke; }

/* ── Cabecera (refs/01-portada-oscuro.png): logo, menú, buscador y carrito en un renglón; queda fija al bajar. ── */
.cabecera { position: sticky; top: 0; z-index: 50; background: var(--noche); border-bottom: 1px solid var(--linea); }
.cabecera-fila {
  display: flex; align-items: center; gap: clamp(16px, 2.6vw, 40px);
  max-width: var(--ancho); height: var(--alto-cabecera); margin: 0 auto; padding: 0 var(--borde);
}
.marca { flex: none; display: flex; align-items: center; min-height: var(--toque); }
.marca img { width: auto; height: 52px; }
.menu { display: flex; align-items: center; gap: clamp(12px, 2.2vw, 36px); }
.menu a {
  display: flex; align-items: center; min-height: var(--toque);
  font-size: 17px; font-weight: 500; letter-spacing: -.01em; white-space: nowrap;
}
.menu a:hover, .pie-col a:hover { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1.5px; }
/* La entrada del menú de la página en la que se está (Ofertas o un rubro), subrayada. */
.menu a[aria-current="page"], .menu-panel a[aria-current="page"] {
  text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px;
}
.buscador { position: relative; display: flex; align-items: center; flex: 1 1 280px; max-width: 460px; margin-left: auto; }
.buscar-boton {
  flex: none; display: grid; place-items: center; width: var(--toque); height: var(--toque);
  background: var(--blanco); color: var(--noche);
}
.buscar-boton:hover { background: var(--papel); }
.buscar-boton .ico { width: 22px; height: 22px; }
.buscador input {
  min-width: 0; width: 100%; height: var(--toque); padding: 0 14px;
  border: 1px solid var(--niebla); border-radius: 0; background: transparent; color: var(--blanco);
  font: inherit; font-size: 16px; -webkit-appearance: none; appearance: none;
}
.buscador input::placeholder { color: var(--niebla); opacity: 1; }
.buscador input:focus { border-color: var(--blanco); outline: none; }
.buscador input:focus-visible { outline: 2px solid var(--blanco); outline-offset: 2px; }
.carrito, .menu-boton { flex: none; display: grid; place-items: center; width: var(--toque); height: var(--toque); }
.carrito .ico { width: 30px; height: 30px; }
.menu-boton { display: none; }
.menu-boton .ico { width: 28px; height: 28px; }
.menu-boton .ico-cerrar, .menu-boton[aria-expanded="true"] .ico-abrir { display: none; }
.menu-boton[aria-expanded="true"] .ico-cerrar { display: block; }

/* Panel propio del menú plegado: se abre debajo de la barra, por encima de la página (no la empuja), con tienda.js. */
.menu-panel {
  position: absolute; top: 100%; left: 0; right: 0;
  display: flex; flex-direction: column;
  max-height: calc(100vh - var(--alto-cabecera)); max-height: calc(100dvh - var(--alto-cabecera)); overflow-y: auto;
  padding: 4px var(--borde) 12px; border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea);
  background: var(--noche);
}
.menu-panel a {
  display: flex; align-items: center; min-height: 52px;
  border-bottom: 1px solid var(--linea); font-size: 20px; font-weight: 600; letter-spacing: -.02em;
}
.menu-panel a:last-child { border-bottom: 0; }

/* ── Globo propio «Muy pronto»: uno por vez, debajo (o arriba) del botón que lo abrió. ── */
.globo {
  position: fixed; z-index: 60; max-width: min(320px, calc(100vw - 32px));
  padding: 14px 18px; border: 1px solid var(--linea); border-radius: 10px;
  background: var(--grafito); box-shadow: 0 12px 32px rgba(0, 0, 0, .55);
  font-size: 16px; line-height: 1.35;
}
.globo p { margin: 0; }

/* ── Pie (refs/08-confianza-pie-oscuro.png): logo grande, tres columnas y la línea legal. ── */
.pie { padding: clamp(48px, 6vw, 88px) var(--borde) 32px; border-top: 1px solid var(--linea); background: var(--noche); }
.pie-fila {
  display: grid; grid-template-columns: clamp(180px, 25vw, 380px) 1fr; align-items: start;
  gap: clamp(32px, 6vw, 110px); max-width: var(--ancho); margin: 0 auto;
}
.pie-marca { display: block; }
.pie-marca img { width: 100%; height: auto; }
.pie-columnas { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: clamp(24px, 5vw, 96px); }
.pie-col h2 { margin-bottom: 8px; font-size: clamp(20px, 2vw, 28px); font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
.pie-col ul { margin: 0; padding: 0; list-style: none; }
.pie-col a, .pie-col button {
  display: flex; align-items: center; min-height: var(--toque);
  color: var(--niebla); font-size: 17px; line-height: 1.3; text-align: left;
}
.pie-col a:hover, .pie-col button:hover { color: var(--blanco); }
.pie-legal {
  max-width: var(--ancho); margin: clamp(32px, 4vw, 56px) auto 0; padding-top: 28px;
  border-top: 1px solid var(--linea); color: var(--niebla); font-size: 14px;
}

/* ── Hasta 999 px: el menú se pliega a un botón; el pie apila el logo arriba de las columnas. ── */
@media (max-width: 999px) {
  .menu { display: none; }
  .menu-boton { display: grid; margin-left: -10px; }
  .pie-fila { grid-template-columns: 1fr; }
  .pie-marca { width: clamp(160px, 30vw, 260px); }
}
@media (min-width: 1000px) {
  .menu-panel { display: none !important; }
}

/* ── Celular: el buscador baja a una segunda fila, a todo el ancho. ── */
@media (max-width: 699px) {
  :root { --alto-cabecera: 110px; }
  .cabecera-fila { flex-wrap: wrap; height: auto; gap: 6px 8px; padding-top: 6px; padding-bottom: 10px; }
  .marca img { height: 42px; }
  .carrito { margin-left: auto; margin-right: -8px; }
  .buscador { order: 5; flex: 1 1 100%; max-width: none; margin-left: 0; }
  .pie-columnas { grid-template-columns: 1fr 1fr; gap: 24px 16px; }
  .pie-col:last-child { grid-column: 1 / -1; }
}