/* =====================================================================
   publico/assets/publico.css
   ---------------------------------------------------------------------
   LA TIENDA Y LA FICHA DE PRODUCTO.

   ⚠ ESTA HOJA TODAVÍA NO ESTÁ EN EL MANUAL DE MARCA.

   La cabecera, el menú móvil y el pie se mudaron a layout.css y ya
   están migrados: consumen los tokens semánticos de tema.css. Lo que
   queda acá —catálogo, filtros, tarjetas, ficha— sigue en el sistema
   viejo: Space Grotesk, --tinta, --papel, --azul, --hot.

   Por eso el :root de abajo se conserva: es lo que mantiene viva a
   esta mitad hasta que le toque el turno. Cuando se migre, ese bloque
   desaparece entero y las reglas pasan a --ink, --bg y --accent.

   Al migrar hay una decisión pendiente que no es de color: el manual
   permite UN acento amarillo por vista, y una rejilla de 24 productos
   con ocho en oferta tendría ocho. Hoy eso lo resuelve el naranja
   --hot, que no existe en el manual.

   LA IDEA
   -------
   Acá se venden colores. Lo único que importa en pantalla es la foto
   del producto y el disco de color; todo lo demás se aparta.
   Por eso el fondo es neutro tibio, las tarjetas no tienen sombra en
   reposo, y no hay ni un degradado en toda la hoja: cualquier adorno
   compite con la bobina.

   El único guiño al oficio es la banda de líneas finas bajo los
   títulos de filtro — capas de impresión vistas de canto. Aparece
   pequeña y repetida, nunca como decoración grande.

   TIPOGRAFÍA
   ----------
   Space Grotesk en títulos y precios: tiene el corte técnico de un
   catálogo de máquinas sin caer en fuente de ciencia ficción.
   Inter para leer. IBM Plex Mono para SKU, cuentas y paginación — un
   código de producto se lee mejor en monoespaciada, sobre todo
   cuando alguien lo compara contra una etiqueta física.
   ===================================================================== */

:root{
  --tinta:#15171B;
  --tinta-media:#4A4F57;
  --tinta-suave:#6E737B;
  --papel:#F6F5F2;
  --blanco:#FFFFFF;
  --linea:#E4E2DD;
  --linea-fuerte:#D2CFC8;
  --azul:#2657C9;
  --azul-suave:#EEF3FD;
  --hot:#E5581F;          /* naranja de boquilla caliente: ofertas */
  --verde:#1F8A55;
  --ambar:#B47A0A;
  --wa:#25D366;

  --radio:10px;
  --radio-chico:7px;
  --sombra:0 1px 2px rgba(21,23,27,.05), 0 10px 28px rgba(21,23,27,.07);
  --ease:cubic-bezier(.23,1,.32,1);

  --ancho-filtros:248px;
}

/* EL BLOQUE BASE SE FUE A layout.css.

   Estaba pisando al sistema entero sin que se notara: publico.css
   carga DESPUÉS de layout.css, y `background:var(--papel)` en atajo
   borra cualquier background-image que layout.css hubiera puesto. Por
   eso el fondo se veía crema plano en vez de blanco tiza con
   cuadrícula, y la cuadrícula no aparecía por ningún lado.

   Es el patrón de siempre: la regla aplicada en casi todos los
   archivos, y el que falta ganándole a todos por orden de carga. */

/* El manual fija el ancho maximo de contenido en 1180px, y la
   cabecera y el pie ya lo respetan via .envoltura. Sin este cambio
   la tienda quedaria 220px mas ancha que su propia cabecera. */
.contenedor{width:100%; max-width:var(--maxw,1180px); margin:0 auto; padding:0 var(--s3,24px);}

/* Se navega esta tienda con teclado o no se navega: el outline no se
   quita sin poner otra cosa en su lugar. */
:focus-visible{outline:2px solid var(--azul); outline-offset:2px; border-radius:4px;}

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* =====================================================================
   ESTRUCTURA DEL CATÁLOGO
   ===================================================================== */
.catalogo{display:grid; grid-template-columns:var(--ancho-filtros) 1fr; gap:38px; padding-top:28px; padding-bottom:80px; align-items:start;}
.pagina-simple{padding:80px 22px;}
.seccion-titulo{font-size:19px; margin:0 0 18px;}

/* =====================================================================
   FILTROS
   ===================================================================== */
.filtros{position:sticky; top:92px; max-height:calc(100vh - 112px); overflow-y:auto; padding-right:4px;}
/* Barra de scroll fina: la columna de filtros es larga y una barra
   gruesa se come el ancho útil. */
.filtros::-webkit-scrollbar{width:6px;}
.filtros::-webkit-scrollbar-thumb{background:var(--linea-fuerte); border-radius:3px;}

.filtros-cabecera{display:none;}

.quitar-filtros{
  display:inline-block; font-size:12.5px; color:var(--hot); font-weight:600; margin-bottom:22px;
}
.quitar-filtros:hover{text-decoration:underline;}

.filtro{margin-bottom:28px;}
.filtro h2{
  font-family:'IBM Plex Mono',monospace; font-size:10.5px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--tinta-suave);
  margin:0 0 13px; padding-bottom:10px; position:relative;
}
/* Las capas de impresión, en fino, bajo cada título de filtro. */
.filtro h2::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:repeating-linear-gradient(90deg, var(--tinta) 0 1px, transparent 1px 4px);
  opacity:.17;
}
.filtro-pista{font-size:11.5px; color:var(--tinta-suave); margin:10px 0 0; line-height:1.45;}
.filtro-vacio{font-size:12.5px; color:var(--tinta-suave); margin:10px 0 0;}

.filtro-buscador{
  width:100%; padding:8px 11px; margin-bottom:10px; border:1px solid var(--linea);
  border-radius:var(--radio-chico); background:var(--blanco); font-size:12.5px;
}
.filtro-buscador:focus{outline:none; border-color:var(--azul); box-shadow:0 0 0 3px rgba(38,87,201,.11);}

/* La cuenta a la derecha, siempre en monoespaciada: así los números
   quedan alineados en columna aunque tengan distinta cantidad de
   dígitos. */
.cuenta{
  margin-left:auto; flex:none; font-family:'IBM Plex Mono',monospace;
  font-size:10.5px; color:#9A9C98; padding-left:8px;
}

/* ---------- Precio ---------- */
.precio-campos{display:flex; gap:8px; margin-bottom:10px;}
.precio-campo{flex:1; display:flex; flex-direction:column; gap:4px;}
.precio-campo span{font-size:10.5px; color:var(--tinta-suave); font-weight:600;}
.precio-campo input{
  width:100%; padding:8px 10px; border:1px solid var(--linea);
  border-radius:var(--radio-chico); background:var(--blanco); font-size:13px;
}
.precio-campo input:focus{outline:none; border-color:var(--azul); box-shadow:0 0 0 3px rgba(38,87,201,.11);}

/* ---------- Colores Fuente ----------
   Filas con disco grande y no una lista de texto: filamento se elige
   mirando. Es el filtro más usado en una tienda de impresión 3D, así
   que es el que más espacio recibe. */
.colores-lista{max-height:322px; overflow-y:auto; margin:0 -4px; padding:0 4px;}
.colores-lista::-webkit-scrollbar{width:6px;}
.colores-lista::-webkit-scrollbar-thumb{background:var(--linea-fuerte); border-radius:3px;}

.color-fila{
  display:flex; align-items:center; gap:10px; padding:5px 7px; border-radius:var(--radio-chico);
  font-size:13px; color:var(--tinta-media); transition:background .13s var(--ease), color .13s var(--ease);
}
.color-fila:hover{background:var(--blanco); color:var(--tinta);}
.color-fila.on{background:var(--azul-suave); color:var(--azul); font-weight:600;}
.color-fila[hidden]{display:none;}
.color-disco{
  width:26px; height:26px; border-radius:50%; overflow:hidden; flex:none; background:#E8E7E3;
  box-shadow:0 0 0 1px rgba(21,23,27,.09);
}
.color-disco img{width:100%; height:100%; object-fit:cover;}
.color-fila.on .color-disco{box-shadow:0 0 0 1px var(--blanco), 0 0 0 2.5px var(--azul);}
.color-nombre{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

/* ---------- Marcas ---------- */
.marcas-lista{display:flex; flex-direction:column;}
.marca-fila{
  display:flex; align-items:center; gap:10px; padding:5px 7px; border-radius:var(--radio-chico);
  font-size:13px; color:var(--tinta-media); transition:background .13s var(--ease), color .13s var(--ease);
}
.marca-fila:hover{background:var(--blanco); color:var(--tinta);}
.marca-fila.on{background:var(--azul-suave); color:var(--azul); font-weight:600;}
.marca-logo{
  width:32px; height:22px; flex:none; display:flex; align-items:center; justify-content:center;
}
.marca-logo img{max-width:100%; max-height:100%; object-fit:contain;}
/* Sin logo, la inicial: deja el hueco de la misma medida para que la
   lista no baile al mezclar marcas con y sin logo. */
.marca-inicial{
  width:22px; height:22px; border-radius:5px; background:var(--linea);
  color:var(--tinta-suave); font-size:11px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
.marca-nombre-f{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

/* ---------- Listas simples (subcategorías) ---------- */
.lista-simple{list-style:none; margin:0; padding:0;}
.lista-simple a{
  display:flex; align-items:center; padding:5px 7px; border-radius:var(--radio-chico);
  font-size:13px; color:var(--tinta-media); transition:background .13s var(--ease), color .13s var(--ease);
}
.lista-simple a:hover{background:var(--blanco); color:var(--tinta);}
.lista-simple a.on{background:var(--azul-suave); color:var(--azul); font-weight:600;}

.chip-oferta{
  display:inline-block; padding:9px 16px; border:1px solid var(--linea); border-radius:100px;
  font-size:12.5px; font-weight:600; color:var(--tinta-suave); background:var(--blanco);
  transition:border-color .15s var(--ease), color .15s var(--ease), background .15s var(--ease);
}
.chip-oferta:hover{border-color:var(--hot); color:var(--hot);}
.chip-oferta.on{background:var(--hot); border-color:var(--hot); color:var(--blanco);}

/* =====================================================================
   BARRA SUPERIOR DEL LISTADO
   ===================================================================== */
.barra{
  display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;
  padding-bottom:14px; margin-bottom:18px; border-bottom:1px solid var(--linea);
}
.barra-conteo{margin:0; font-size:13px; color:var(--tinta-suave);}
.barra-conteo strong{color:var(--tinta); font-family:'IBM Plex Mono',monospace; font-weight:500;}
.barra-controles{display:flex; align-items:center; gap:20px; flex-wrap:wrap;}

.mostrar{display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--tinta-suave);}
.mostrar a{
  font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--tinta-suave);
  padding:2px 6px; border-radius:5px; transition:background .13s var(--ease), color .13s var(--ease);
}
.mostrar a:hover{background:var(--blanco); color:var(--tinta);}
.mostrar a.on{background:var(--tinta); color:var(--blanco);}

.orden select{
  padding:8px 11px; border:1px solid var(--linea); border-radius:var(--radio-chico);
  background:var(--blanco); font-size:13px; color:var(--tinta); cursor:pointer;
}
.orden select:focus{outline:none; border-color:var(--azul);}

/* ---------- Fichas de filtros aplicados ---------- */
.aplicados{display:flex; gap:7px; flex-wrap:wrap; margin-bottom:20px;}
.aplicado{
  display:inline-flex; align-items:center; gap:7px; padding:5px 11px;
  background:var(--blanco); border:1px solid var(--linea); border-radius:100px;
  font-size:12px; color:var(--tinta-media); transition:border-color .13s var(--ease), color .13s var(--ease);
}
.aplicado span{font-size:10px; color:#A9AAA6;}
.aplicado:hover{border-color:var(--hot); color:var(--hot);}
.aplicado:hover span{color:var(--hot);}

/* =====================================================================
   REJILLA Y TARJETA DE PRODUCTO
   Se mudaron a layout.css: las usan el catálogo Y la portada, y una
   sola tarjeta en un solo archivo es lo que evita que dentro de seis
   meses la de la portada tenga un dato que la del catálogo no.
   ===================================================================== */

/* =====================================================================
   FICHA DE PRODUCTO
   ===================================================================== */
.ficha{padding-top:24px; padding-bottom:84px;}
.miga{font-size:12.5px; color:var(--tinta-suave); margin-bottom:24px; display:flex; gap:8px; flex-wrap:wrap;}
.miga a:hover{color:var(--azul);}

.ficha-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:52px; align-items:start;}

.galeria-principal{aspect-ratio:1; background:var(--blanco); border:1px solid var(--linea); border-radius:var(--radio); overflow:hidden;}
.galeria-principal img{width:100%; height:100%; object-fit:cover;}
.galeria-tiras{display:flex; gap:8px; margin-top:10px; flex-wrap:wrap;}
.tira{
  all:unset; cursor:pointer; width:64px; height:64px; border-radius:8px; overflow:hidden;
  box-shadow:0 0 0 1px var(--linea); transition:box-shadow .15s var(--ease);
}
.tira:hover{box-shadow:0 0 0 1px var(--azul);}
.tira.on{box-shadow:0 0 0 2px var(--azul);}
.tira img{width:100%; height:100%; object-fit:cover;}

.ficha-marca{display:inline-flex; align-items:center; gap:9px; margin-bottom:12px;}
.ficha-marca img{width:26px; height:26px; object-fit:contain;}
.ficha-marca span{font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--tinta-suave);}
.ficha-marca:hover span{color:var(--azul);}

.ficha-datos h1{font-size:clamp(24px,3.2vw,32px); line-height:1.14; margin:0 0 8px;}
.ficha-sku{font-family:'IBM Plex Mono',monospace; font-size:12.5px; color:var(--tinta-suave); margin:0 0 18px;}
.ficha-resumen{font-size:15px; color:var(--tinta-media); margin:0 0 26px; max-width:46ch;}

.ficha-precio{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:16px;}
.ficha-precio .antes{font-size:17px; color:var(--tinta-suave); text-decoration:line-through;}
.ficha-precio .ahora{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:34px; letter-spacing:-.02em;}
.ficha-precio .ahora.oferta{color:var(--hot);}
.ficha-precio .ahorro{width:100%; font-family:'IBM Plex Mono',monospace; font-size:12.5px; color:var(--hot); font-weight:500;}

.ficha-nota{font-size:12.5px; color:var(--tinta-suave); margin:12px 0 0;}

.ficha-colores{margin-top:32px; padding-top:24px; border-top:1px solid var(--linea);}
.ficha-colores .etiqueta{
  display:block; font-family:'IBM Plex Mono',monospace; font-size:10.5px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--tinta-suave); margin-bottom:14px;
}
.colores-linea{display:flex; gap:20px; flex-wrap:wrap;}
.color-suelto{display:flex; flex-direction:column; align-items:center; gap:7px; font-size:11.5px; color:var(--tinta-suave); text-align:center;}
.color-suelto .color-disco{width:44px; height:44px; transition:transform .15s var(--ease);}
.color-suelto:hover .color-disco{transform:scale(1.06);}
.color-suelto:hover{color:var(--azul);}

.descripcion{margin-top:60px; padding-top:38px; border-top:1px solid var(--linea); max-width:70ch;}
.descripcion-cuerpo{font-size:15px; color:var(--tinta-media);}
.descripcion-cuerpo p{margin:0 0 15px;}
.descripcion-cuerpo h3{font-size:16px; color:var(--tinta); margin:26px 0 10px;}
.descripcion-cuerpo ul,.descripcion-cuerpo ol{margin:0 0 15px; padding-left:20px;}
.descripcion-cuerpo li{margin-bottom:5px;}
.descripcion-cuerpo img{border-radius:var(--radio); margin:16px 0;}
.descripcion-cuerpo table{border-collapse:collapse; width:100%; font-size:14px; margin:16px 0;}
.descripcion-cuerpo th,.descripcion-cuerpo td{border:1px solid var(--linea); padding:9px 12px; text-align:left;}
.descripcion-cuerpo th{background:var(--blanco); font-weight:600;}

.relacionados{margin-top:60px; padding-top:38px; border-top:1px solid var(--linea);}

/* =====================================================================
   BOTONES
   ===================================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:11px 22px; border-radius:var(--radio); font-size:14px; font-weight:600;
  cursor:pointer; border:none;
  transition:background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease);
}
.btn-linea{background:var(--blanco); border:1px solid var(--linea); color:var(--tinta);}
.btn-linea:hover{border-color:var(--tinta);}
.btn-wa{background:var(--wa); color:#06301A;}
.btn-wa:hover{background:#1EBE5A;}
.btn-wa svg{width:19px; height:19px;}
.btn-bloque{width:100%;}
.btn.grande{padding:16px 24px; font-size:15.5px;}
/* Un botón de paginación que no lleva a ningún lado se apaga en vez de
   desaparecer: si desapareciera, el resto de los botones se moverían
   de sitio al cambiar de página. */
.btn.apagado{opacity:.38; pointer-events:none;}

/* =====================================================================
   VACÍO Y PAGINACIÓN
   ===================================================================== */
.vacio{
  background:var(--blanco); border:1px solid var(--linea); border-radius:var(--radio);
  padding:54px 32px; text-align:center; max-width:520px; margin:20px auto;
}
.vacio h3{font-size:19px; margin:0 0 10px;}
.vacio p{color:var(--tinta-suave); font-size:14px; margin:0 0 24px;}
.vacio-acciones{display:flex; gap:10px; justify-content:center; flex-wrap:wrap;}

.paginacion{display:flex; align-items:center; justify-content:center; gap:16px; margin-top:44px;}
.pag-info{font-family:'IBM Plex Mono',monospace; font-size:12.5px; color:var(--tinta-suave);}

/* =====================================================================
   MÓVIL
   Los filtros pasan a un panel que entra desde la izquierda. No se
   apilan arriba: con precio, colores, marcas y tres bloques de
   subcategorías, apilarlos dejaría el primer producto a dos pantallas
   de scroll del borde superior.
   ===================================================================== */
.abrir-filtros{display:none;}
.filtros-fondo{
  position:fixed; inset:0; background:rgba(21,23,27,.42); z-index:70;
  opacity:0; visibility:hidden; transition:opacity .22s var(--ease), visibility .22s var(--ease);
}
.filtros-fondo.visible{opacity:1; visibility:visible;}

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

@media (max-width:860px){
  .catalogo{grid-template-columns:1fr; gap:0; padding-top:18px;}

  .abrir-filtros{
    display:inline-flex; align-items:center; gap:8px; position:relative;
    padding:10px 18px; margin-bottom:18px; border:1px solid var(--linea);
    border-radius:var(--radio); background:var(--blanco); color:var(--tinta);
    font-size:14px; font-weight:600; cursor:pointer;
  }
  .abrir-filtros svg{width:16px; height:16px;}
  .punto-activo{width:7px; height:7px; border-radius:50%; background:var(--hot); display:inline-block;}

  .filtros{
    position:fixed; top:0; left:0; bottom:0; width:min(310px,86vw); z-index:80;
    background:var(--papel); border-right:1px solid var(--linea);
    padding:0 20px 40px; max-height:none; overflow-y:auto;
    transform:translateX(-100%); transition:transform .26s var(--ease);
  }
  .filtros.abierto{transform:translateX(0);}

  .filtros-cabecera{
    display:flex; align-items:center; justify-content:space-between;
    position:sticky; top:0; z-index:1; margin:0 -20px 20px; padding:16px 20px;
    background:var(--papel); border-bottom:1px solid var(--linea);
    font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:16px;
  }
  .filtros-cerrar{
    all:unset; cursor:pointer; width:30px; height:30px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:15px; color:var(--tinta-suave);
  }
  .filtros-cerrar:hover{background:var(--linea); color:var(--tinta);}

  .barra{gap:12px;}
  .barra-controles{width:100%; justify-content:space-between;}
}

@media (max-width:420px){
  .mostrar{display:none;} /* en pantalla chica siempre conviene el tramo corto */
  .orden{width:100%;}
  .orden select{width:100%;}
}

/* Quien pidió menos movimiento, recibe menos movimiento. */
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important;}
  .producto:hover{transform:none;}
  .color-suelto:hover .color-disco{transform:none;}
}