/* =========================================================================
   printnet.com.ar
   Paleta de la marca: rojo, grises, negro y blanco. Nada más.
   ========================================================================= */

:root {
  --fondo: #ffffff;
  --fondo-suave: #f5f5f5;
  --tinta: #1c1b1b;
  --tinta-media: #5a5856;
  --tinta-suave: #9a9796;
  --borde: #e2e0df;
  --rojo: #d32624;
  --rojo-oscuro: #a81e1c;
  --grafito: #2b2a29;
  --sombra: 0 18px 50px rgba(28, 27, 27, .14);
  --radio: 14px;
  --tipo: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--tipo);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--rojo); }

/* =========================================================================
   PORTADA
   El pedido era que al abrir se vea solo el logo. Nada de barra de menú:
   los cuadros de la cadena del logo SON el menú.
   ========================================================================= */

.portada {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 4vmin;
  position: relative;
}

.marco {
  position: relative;
  /* El logo manda el tamaño; las etiquetas se ubican encima por JS. */
  width: min(78vmin, 560px);
}

.logo-caja svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* El hueco blanco que separa el nodo de la Tienda del anillo sigue al fondo. */
.hueco { fill: var(--fondo); }

/* --- Los cuadraditos sueltos flotan apenas, como si la red respirara --- */
.motas rect {
  transform-box: fill-box;
  transform-origin: center;
  animation: flotar 7s ease-in-out infinite;
}
.motas rect:nth-child(3n)   { animation-duration: 9s;  animation-delay: -1.5s; }
.motas rect:nth-child(3n+1) { animation-duration: 11s; animation-delay: -3s; }

@keyframes flotar {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2.2px); }
}

/* --- Los nodos de la cadena: el menú --- */
.nodo {
  cursor: pointer;
  outline: none;
}
.nodo .cara {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform .28s cubic-bezier(.34, 1.56, .64, 1), filter .28s ease;
}
.nodo:hover .cara,
.nodo:focus-visible .cara,
.nodo.activo .cara {
  transform: scale(1.16);
  filter: drop-shadow(0 4px 10px rgba(211, 38, 36, .45));
}
.nodo:focus-visible .zona {
  stroke: var(--rojo);
  stroke-width: 2;
  stroke-dasharray: 4 3;
}

/* Al apuntar un nodo, los cuadraditos sueltos se corren a un segundo plano.
   Los otros nodos NO se atenúan con opacidad: al hacerlos translúcidos se veían
   por debajo las líneas que los unen, y el logo quedaba sucio. */
.motas { transition: opacity .3s ease; }
.marco.apuntando .motas { opacity: .7; }

/* --- Etiquetas sobre cada nodo --- */
.etiquetas {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.etiqueta {
  position: absolute;
  transform: translate(-50%, 0) scale(.92);
  white-space: nowrap;
  font-size: clamp(12px, 1.9vmin, 15px);
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--fondo);
  background: var(--grafito);
  padding: .42em .8em;
  border-radius: 999px;
  opacity: 0;
  transition: opacity .22s ease, transform .22s cubic-bezier(.34, 1.56, .64, 1);
}
.etiqueta.arriba { transform: translate(-50%, -100%) scale(.92); }

.etiqueta.visible { opacity: 1; transform: translate(-50%, 0) scale(1); }
.etiqueta.visible.arriba { transform: translate(-50%, -100%) scale(1); }

.pista {
  position: absolute;
  bottom: max(4vmin, 18px);
  left: 0;
  right: 0;
  text-align: center;
  margin: 0;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  transition: opacity .4s ease;
}
.pista.oculta { opacity: 0; }

/* En pantallas táctiles no hay "pasar por encima": las etiquetas van siempre.
   Se achican un poco porque ahí quedan encima del logo. */
@media (hover: none) {
  .etiqueta {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
    font-size: 12px;
    padding: .38em .7em;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
  }
  .etiqueta.arriba { transform: translate(-50%, -100%) scale(1); }
}

/* =========================================================================
   PANELES
   ========================================================================= */

.telon {
  position: fixed;
  inset: 0;
  z-index: 20;
  background: var(--fondo);
  overflow-y: auto;
  overscroll-behavior: contain;
  animation: subir .32s cubic-bezier(.22, .9, .3, 1);
}

@keyframes subir {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

.cerrar {
  position: fixed;
  top: 18px;
  right: 20px;
  z-index: 2;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: var(--fondo-suave);
  color: var(--tinta);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.cerrar:hover { background: var(--rojo); color: #fff; }

.panel {
  max-width: 880px;
  margin: 0 auto;
  padding: clamp(48px, 9vmin, 96px) 20px 80px;
}

.pastilla {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--rojo);
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: .35em .9em;
  margin-bottom: 22px;
}

.panel h1 {
  margin: 0 0 18px;
  font-size: clamp(27px, 5vmin, 42px);
  line-height: 1.15;
  letter-spacing: -.02em;
}

.bajada {
  margin: 0;
  font-size: clamp(16px, 2.2vmin, 18px);
  line-height: 1.65;
  color: var(--tinta-media);
  max-width: 62ch;
}

.panel-cab { margin-bottom: 44px; }

/* --- Sucursales --- */
.sucursales {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
}

.sucursal {
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 26px;
  transition: border-color .2s ease, transform .2s ease;
}
.sucursal:hover { border-color: var(--rojo); transform: translateY(-3px); }
.sucursal h2 { margin: 0 0 12px; font-size: 21px; color: var(--rojo); }
.direccion { margin: 0 0 14px; line-height: 1.6; color: var(--tinta-media); }
.contacto { margin: 0 0 20px; line-height: 1.9; }
.contacto a { text-decoration: none; font-weight: 600; }
.contacto a:hover { text-decoration: underline; }

.boton {
  display: inline-block;
  background: var(--grafito);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
  padding: .7em 1.3em;
  border-radius: 999px;
  transition: background .2s ease;
}
.boton:hover { background: var(--rojo); }

/* --- Listas de rubros --- */
.rubros {
  list-style: none;
  margin: 44px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}
/* Tarjetas sueltas y no una grilla con fondo: con cuatro rubros en tres
   columnas quedaba una celda vacía pintada de gris. */
.rubros li {
  padding: 24px;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}
.rubros h3 { margin: 0 0 8px; font-size: 16px; }
.rubros p { margin: 0; color: var(--tinta-media); line-height: 1.6; font-size: 15px; }

.cierre { margin-top: 32px; color: var(--tinta-media); line-height: 1.7; }

/* --- Consulta de orden --- */
.consulta { margin-bottom: 14px; }
.consulta label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tinta-media);
  margin-bottom: 10px;
}
.consulta-fila { display: flex; gap: 10px; flex-wrap: wrap; }

#codigo {
  flex: 1 1 220px;
  font: 700 clamp(18px, 3vmin, 24px)/1 var(--tipo);
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .72em .9em;
  border: 2px solid var(--borde);
  border-radius: var(--radio);
  background: var(--fondo);
  color: var(--tinta);
  transition: border-color .2s ease;
}
#codigo:focus { outline: none; border-color: var(--rojo); }
#codigo::placeholder { color: var(--tinta-suave); letter-spacing: .14em; }

#btnConsultar {
  border: 0;
  border-radius: var(--radio);
  background: var(--rojo);
  color: #fff;
  font: 700 16px/1 var(--tipo);
  padding: 0 1.8em;
  min-height: 56px;
  cursor: pointer;
  transition: background .2s ease;
}
#btnConsultar:hover { background: var(--rojo-oscuro); }
#btnConsultar:disabled { background: var(--tinta-suave); cursor: default; }

.ayuda { margin: 12px 0 0; font-size: 14px; color: var(--tinta-suave); }

.resultado {
  margin: 28px 0 0;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 26px;
}
.resultado.error { border-color: var(--rojo); }
.resultado h2 { margin: 0 0 6px; font-size: 22px; }
.resultado .codigo-grande {
  font-size: 13px;
  letter-spacing: .16em;
  color: var(--tinta-suave);
  margin: 0 0 20px;
}

/* Barra de pasos: Pendiente -> En Taller -> Terminado -> Entregado */
.pasos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin: 0 0 24px;
  list-style: none;
  padding: 0;
}
.pasos li {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  padding-top: 12px;
  border-top: 4px solid var(--borde);
}
.pasos li.hecho { color: var(--tinta); border-top-color: var(--grafito); }
.pasos li.ahora { color: var(--rojo); border-top-color: var(--rojo); }

.datos { margin: 0; display: grid; gap: 2px; }
.datos > div {
  display: grid;
  grid-template-columns: minmax(110px, 26%) 1fr;
  gap: 14px;
  padding: 11px 0;
  border-top: 1px solid var(--borde);
  line-height: 1.55;
}
.datos dt { font-size: 13px; color: var(--tinta-suave); }
.datos dd { margin: 0; }

.resultado .pie { margin: 22px 0 0; font-size: 14px; color: var(--tinta-suave); line-height: 1.6; }

/* --- Tienda --- */
.tienda-barra { display: grid; gap: 14px; margin-bottom: 28px; }

#buscarProducto {
  width: 100%;
  font: 16px/1 var(--tipo);
  padding: .85em 1em;
  border: 2px solid var(--borde);
  border-radius: var(--radio);
  background: var(--fondo);
  color: var(--tinta);
}
#buscarProducto:focus { outline: none; border-color: var(--rojo); }

.filtros { display: flex; flex-wrap: wrap; gap: 8px; }
.filtro {
  border: 1px solid var(--borde);
  background: var(--fondo);
  color: var(--tinta-media);
  font: 600 13px/1 var(--tipo);
  padding: .6em 1em;
  border-radius: 999px;
  cursor: pointer;
  transition: all .18s ease;
}
.filtro:hover { border-color: var(--grafito); color: var(--tinta); }
.filtro.activo { background: var(--grafito); border-color: var(--grafito); color: #fff; }

.productos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 18px;
}

.producto {
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.producto:hover { border-color: var(--rojo); transform: translateY(-4px); box-shadow: var(--sombra); }

.producto .foto {
  aspect-ratio: 1;
  background: var(--fondo-suave);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.producto .foto img { width: 100%; height: 100%; object-fit: contain; }

.producto .cuerpo { padding: 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.producto h3 { margin: 0; font-size: 15px; line-height: 1.35; }
.producto .rubro { margin: 0; font-size: 12px; color: var(--tinta-suave); text-transform: uppercase; letter-spacing: .06em; }
.producto .precio { margin: auto 0 0; font-size: 20px; font-weight: 700; color: var(--rojo); }
.producto .sin-stock { font-size: 12px; font-weight: 700; color: var(--tinta-suave); text-transform: uppercase; letter-spacing: .06em; }
.producto .pedir {
  margin-top: 4px;
  display: block;
  text-align: center;
  background: var(--grafito);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 13px;
  padding: .7em;
  border-radius: 999px;
  transition: background .2s ease;
}
.producto .pedir:hover { background: var(--rojo); }

.estado-tienda { margin: 28px 0 0; color: var(--tinta-suave); text-align: center; }

/* =========================================================================
   ACCESIBILIDAD
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* El logo está pensado sobre blanco: en modo oscuro se mantiene su fondo,
   pero el resto de la página acompaña al sistema. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fondo: #141313;
    --fondo-suave: #1e1d1d;
    --tinta: #f2f0ef;
    --tinta-media: #b4b0ae;
    --tinta-suave: #807c7a;
    --borde: #2f2d2c;
    --grafito: #e8e5e4;
    --sombra: 0 18px 50px rgba(0, 0, 0, .5);
  }
  :root:not([data-theme="light"]) .etiqueta { color: #141313; }
  /* Los cuadraditos del logo son casi negros: sobre fondo oscuro se aclaran,
     y la cadena arranca en un gris calido para que siga leyendose el degrade. */
  :root:not([data-theme="light"]) .motas rect { fill: #6e6a68; }
  :root:not([data-theme="light"]) .nodo[data-seccion="acerca"] .cara { fill: #8a6360; }
  :root:not([data-theme="light"]) .cadena-ini { stop-color: #8a6360; }
}

:root[data-theme="dark"] {
  --fondo: #141313;
  --fondo-suave: #1e1d1d;
  --tinta: #f2f0ef;
  --tinta-media: #b4b0ae;
  --tinta-suave: #807c7a;
  --borde: #2f2d2c;
  --grafito: #e8e5e4;
  --sombra: 0 18px 50px rgba(0, 0, 0, .5);
}
:root[data-theme="dark"] .etiqueta { color: #141313; }
:root[data-theme="dark"] .motas rect { fill: #6e6a68; }
:root[data-theme="dark"] .nodo[data-seccion="acerca"] .cara { fill: #8a6360; }
:root[data-theme="dark"] .cadena-ini { stop-color: #8a6360; }