/* Vitrina de mamasoyartistx.
 *
 * ## Por qué CSS propio y no un framework
 *
 * Un framework de utilidades (Tailwind y compañía) obligaría a este proyecto a tener Node y
 * un paso de compilación para poder cambiar un color. La arquitectura lo prohíbe (ADR-0002),
 * y con razón: la app se despliega con `docker compose up`, sin cadena de build de JS.
 *
 * ## El sistema
 *
 * Tres decisiones sostienen todo lo demás:
 *
 * 1. **Papel cálido, no blanco puro.** `#fbfaf7` en vez de `#ffffff` baja el contraste del
 *    fondo sin tocar el del texto: la página cansa menos y las fotos de producto no compiten
 *    con un fondo más brillante que ellas.
 * 2. **Titulares con serif, texto con sans.** Es lo que separa una página diseñada de una
 *    página por defecto, y acá sale gratis: ambas familias ya están en el sistema operativo.
 *    Cero fuentes web = cero solicitudes, cero parpadeo al cargar, cero terceros.
 * 3. **Un solo acento.** Verde profundo, y solo para lo accionable: enlaces, foco, filtro
 *    activo. Todo lo demás es tinta sobre papel. En un catálogo el color debe venir de las
 *    fotos; si lo aporta la interfaz, compite con el producto.
 *
 * Reemplazá los tokens de `:root` por los de tu marca: es el único lugar que hay que tocar.
 */

:root {
  /* Tinta y papel */
  --tinta: #191713;
  --tinta-media: #55504a;
  --tinta-tenue: #8a847c;
  --papel: #fbfaf7;
  --superficie: #ffffff;
  --linea: #e8e3da;
  --linea-fuerte: #d6cfc3;

  /* Acento: solo para lo accionable */
  --acento: #2f5d50;
  --acento-vivo: #3b7565;
  --acento-tenue: #edf2f0;

  /* Estados */
  --error: #a3341f;
  --error-tenue: #fdf1ee;
  --exito: #2f5d50;
  --exito-tenue: #edf2f0;

  /* Tipografía: ambas familias vienen del sistema. */
  --fuente-titulo: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --fuente-texto: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;

  --radio: 4px;
  --radio-grande: 10px;
  --ancho: 76rem;
  --sombra: 0 1px 2px rgba(25, 23, 19, 0.04), 0 8px 24px -12px rgba(25, 23, 19, 0.10);
  --transicion: 180ms cubic-bezier(0.2, 0, 0.2, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --tinta: #f2efe9;
    --tinta-media: #b3ada4;
    --tinta-tenue: #8b857c;
    --papel: #14130f;
    --superficie: #1c1a16;
    --linea: #2e2b25;
    --linea-fuerte: #423e36;
    --acento: #7fb3a3;
    --acento-vivo: #9ac8b9;
    --acento-tenue: #1e2a26;
    --error: #e59480;
    --error-tenue: #2a1a16;
    --exito: #7fb3a3;
    --exito-tenue: #1e2a26;
    --sombra: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px -12px rgba(0, 0, 0, 0.6);
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--fuente-texto);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--tinta);
  background: var(--papel);
  /* Mejora la forma de las letras en pantallas de baja densidad. */
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }

h1, h2, h3 {
  font-family: var(--fuente-titulo);
  font-weight: 500;
  /* Los titulares grandes con interlineado de párrafo se ven despegados. */
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 0.5em;
}

h1 { font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3rem); }
h2 { font-size: clamp(1.35rem, 1.1rem + 0.9vw, 1.75rem); }
h3 { font-size: 1.0625rem; font-family: var(--fuente-texto); font-weight: 600; letter-spacing: 0; }

p { margin: 0 0 1rem; }

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

/* Nunca se elimina el foco visible: es la única pista de ubicación de quien navega con
   teclado. Se refuerza con un halo para que también se vea sobre fondos oscuros. */
:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
  border-radius: 2px;
}

/* El enlace de salto solo aparece al enfocarlo. */
.salto-contenido {
  position: absolute;
  left: -9999px;
}
.salto-contenido:focus {
  left: 1rem;
  top: 1rem;
  z-index: 20;
  padding: 0.6rem 1rem;
  background: var(--tinta);
  color: var(--papel);
  border-radius: var(--radio);
  text-decoration: none;
}

/* ─────────────────────────────────────────────────────── cabecera y pie */

/* Se queda arriba al desplazar y se translucida sobre el contenido: en un catálogo largo,
   volver a la navegación no debería costar un scroll hasta el principio. */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: baseline;
  gap: 2rem;
  padding: 1.1rem clamp(1rem, 4vw, 2.5rem);
  border-bottom: 1px solid var(--linea);
  background: color-mix(in srgb, var(--papel) 88%, transparent);
  backdrop-filter: blur(10px);
}

/* Sin `backdrop-filter` la barra quedaría semitransparente y el texto de abajo se leería
   a través. Se vuelve opaca. */
@supports not (backdrop-filter: blur(1px)) {
  .cabecera { background: var(--papel); }
}

.marca {
  font-family: var(--fuente-titulo);
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  color: var(--tinta);
  margin-right: auto;
}

.cabecera nav {
  display: flex;
  gap: 1.5rem;
  font-size: 0.9375rem;
}
.cabecera nav a {
  color: var(--tinta-media);
  text-decoration: none;
  padding-bottom: 2px;
  /* Subrayado que crece desde la izquierda: se dibuja con background, así no desplaza nada
     al aparecer —un `border-bottom` condicional sí lo haría—. */
  background-image: linear-gradient(var(--acento), var(--acento));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 1px;
  transition: background-size var(--transicion), color var(--transicion);
}
.cabecera nav a:hover,
.cabecera nav a[aria-current] {
  color: var(--tinta);
  background-size: 100% 1px;
}

main {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 4rem) clamp(1rem, 4vw, 2.5rem) 5rem;
}

.pie {
  border-top: 1px solid var(--linea);
  padding: 2.5rem clamp(1rem, 4vw, 2.5rem);
  color: var(--tinta-tenue);
  font-size: 0.875rem;
}
.pie p { margin: 0; }
.pie a { color: var(--tinta-media); }

/* ─────────────────────────────────────────────────────── portada */

.portada {
  /* Ancho de lectura, no de pantalla: una línea de 120 caracteres es incómoda de leer. */
  max-width: 34ch;
  margin-bottom: clamp(3rem, 8vw, 5rem);
}
.portada h1 { margin-bottom: 0.75rem; }
.portada p {
  font-size: 1.125rem;
  color: var(--tinta-media);
  max-width: 46ch;
}

/* Etiqueta pequeña sobre un titular: ubica la sección sin gastar una línea de titular. */
.antetitulo {
  display: block;
  font-family: var(--fuente-texto);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--tinta-tenue);
  margin-bottom: 0.35rem;
}

.seccion { margin-bottom: clamp(3rem, 7vw, 4.5rem); }
.seccion:last-child { margin-bottom: 0; }

.encabezado-pagina { margin-bottom: 2rem; }
.encabezado-pagina h1 { margin-bottom: 0.35rem; }
.entrada { color: var(--tinta-media); max-width: 52ch; }

/* Fichas de categoría: pastillas con borde, sin relleno de color. Un fondo saturado por
   categoría convertiría la fila en un semáforo y competiría con las fotos. */
.fichas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.ficha {
  display: inline-block;
  padding: 0.45rem 1rem;
  border: 1px solid var(--linea-fuerte);
  border-radius: 999px;
  font-size: 0.875rem;
  text-decoration: none;
  color: var(--tinta-media);
  transition: border-color var(--transicion), color var(--transicion), background var(--transicion);
}
.ficha:hover, .ficha[aria-current] {
  color: var(--acento);
  border-color: var(--acento);
  background: var(--acento-tenue);
}

.conteo {
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tinta-tenue);
  margin-bottom: 1rem;
}

.encabezado-seccion {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.75rem;
}
.encabezado-seccion h2 { margin: 0; }
.enlace-mas {
  font-size: 0.9375rem;
  color: var(--tinta-media);
  text-decoration: none;
  border-bottom: 1px solid var(--linea-fuerte);
}
.enlace-mas:hover { color: var(--acento); border-color: var(--acento); }

/* ─────────────────────────────────────────────────────── grilla y tarjetas */

.grilla {
  display: grid;
  /* `auto-fill` con un mínimo: la grilla decide cuántas columnas caben sin media queries,
     y `min(100%, …)` evita que en un móvil angosto se desborde. */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr));
  gap: clamp(1rem, 2.5vw, 2rem) clamp(0.75rem, 2vw, 1.5rem);
  list-style: none;
  padding: 0;
  margin: 0;
}

.tarjeta { position: relative; }

.tarjeta a {
  display: block;
  text-decoration: none;
  color: inherit;
}

.marco {
  position: relative;
  overflow: hidden;
  border-radius: var(--radio-grande);
  background: var(--acento-tenue);
  /* Retrato 4:5, no cuadrado: es la proporción con la que se fotografía ropa y objetos, y
     deja ver la pieza entera sin recortarla. */
  aspect-ratio: 4 / 5;
  margin-bottom: 0.85rem;
}
.marco img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 400ms cubic-bezier(0.2, 0, 0.2, 1);
}
.tarjeta a:hover .marco img { transform: scale(1.04); }

.sin-imagen {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: var(--tinta-tenue);
  font-family: var(--fuente-titulo);
  font-size: 1.75rem;
}

/* Sello «vendida» sobre la foto. Tinta sólida y no un color de estado: es un hecho del
   producto, no una alarma. */
.sello {
  position: absolute;
  top: 0.6rem;
  left: 0.6rem;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: var(--tinta);
  color: var(--papel);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.aviso-vendida {
  display: inline-block;
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio);
  background: var(--superficie);
  color: var(--tinta-media);
  font-size: 0.875rem;
}

.tarjeta h2,
.tarjeta h3 {
  font-family: var(--fuente-texto);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.4;
  margin: 0 0 0.2rem;
}
.tarjeta .categoria {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tinta-tenue);
  margin-bottom: 0.4rem;
}
.precio {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--tinta-media);
  /* Cifras de ancho fijo: en una grilla, los precios quedan alineados entre tarjetas. */
  font-variant-numeric: tabular-nums;
}

/* ─────────────────────────────────────────────────────── filtros */

.filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  align-items: end;
  padding: 1rem 1.25rem;
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--radio-grande);
  margin-bottom: 2rem;
}
.campo { display: grid; gap: 0.3rem; }
/* La búsqueda se queda con el espacio sobrante; el select solo pide lo que necesita. */
.campo-crece { flex: 1 1 14rem; }
.campo > label,
.filtros label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tinta-tenue);
}

input, select, textarea, button { font: inherit; color: inherit; }

input[type="text"], input[type="search"], input[type="email"], input[type="tel"],
input[type="date"], input[type="number"], input[type="password"], select, textarea {
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio);
  background: var(--superficie);
  color: var(--tinta);
  min-width: 0;
  transition: border-color var(--transicion), box-shadow var(--transicion);
}
input:hover, select:hover, textarea:hover { border-color: var(--tinta-tenue); }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--acento);
  box-shadow: 0 0 0 3px var(--acento-tenue);
}
textarea { min-height: 7rem; resize: vertical; }

/* El indicador de carga solo se ve mientras htmx tiene una petición en vuelo. */
.indicador { display: none; color: var(--tinta-tenue); font-size: 0.875rem; }
.htmx-request .indicador, .htmx-request.indicador { display: inline; }

/* ─────────────────────────────────────────────────────── botones */

.boton, button[type="submit"] {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 1.15rem;
  border: 1px solid var(--tinta);
  border-radius: var(--radio);
  background: var(--tinta);
  color: var(--papel);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: opacity var(--transicion), transform var(--transicion);
}
.boton:hover, button[type="submit"]:hover { opacity: 0.85; }
.boton:active, button[type="submit"]:active { transform: translateY(1px); }

.boton-fantasma {
  background: transparent;
  color: var(--tinta);
  border-color: var(--linea-fuerte);
}
.boton-fantasma:hover { border-color: var(--tinta); opacity: 1; }

.cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  padding: 0.7rem 1.4rem;
  background: var(--tinta);
  color: var(--papel);
  border-radius: var(--radio);
  text-decoration: none;
  font-size: 0.9375rem;
  transition: opacity var(--transicion);
}
.cta:hover { opacity: 0.85; }
/* La flecha se mueve, no el botón: menos ruido visual que un desplazamiento completo. */
.cta::after { content: "→"; transition: transform var(--transicion); }
.cta:hover::after { transform: translateX(3px); }

.paginacion {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: center;
  margin-top: 3rem;
  font-size: 0.9375rem;
  color: var(--tinta-media);
}
.paginacion button {
  padding: 0.5rem 1rem;
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio);
  background: var(--superficie);
  cursor: pointer;
}
.paginacion button:hover { border-color: var(--tinta); }

/* ─────────────────────────────────────────────────────── ficha de producto */

.producto {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3.5rem);
}
/* Dos columnas solo cuando hay ancho para que la galería respire. */
@media (min-width: 56rem) {
  .producto { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; }
  .producto .columna-datos { position: sticky; top: 6rem; }
}

.migas {
  font-size: 0.8125rem;
  color: var(--tinta-tenue);
  margin-bottom: 1rem;
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.migas a { color: var(--tinta-media); text-decoration: none; }
.migas a:hover { color: var(--acento); }

/* Galería con desplazamiento por «imanes»: cada foto se detiene encajada, sin quedar a
   medio camino. Es lo que hace que un carrusel sin JavaScript se sienta terminado. */
.galeria {
  display: grid;
  gap: 0.75rem;
}
@media (max-width: 55.99rem) {
  .galeria {
    grid-auto-flow: column;
    grid-auto-columns: 82%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    padding-bottom: 0.5rem;
  }
  .galeria > * { scroll-snap-align: start; }
}
.galeria img,
.galeria .sin-imagen {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radio-grande);
  background: var(--acento-tenue);
}

.codigo {
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tinta-tenue);
}
.descripcion { color: var(--tinta-media); }

/* Las tablas anchas se desplazan dentro de su contenedor: el cuerpo de la página nunca se
   desplaza en horizontal. */
.precios { margin-top: 2rem; }
.precios .envoltorio-tabla { overflow-x: auto; }
.precios table {
  border-collapse: collapse;
  min-width: 100%;
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
}
.precios caption {
  text-align: left;
  color: var(--tinta-tenue);
  font-size: 0.8125rem;
  padding-bottom: 0.6rem;
}
.precios th, .precios td {
  padding: 0.6rem 0.9rem;
  text-align: left;
  /* Solo líneas horizontales: la retícula completa agrega 30 líneas que no aportan a leer
     un número. */
  border-bottom: 1px solid var(--linea);
}
.precios thead th {
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tinta-tenue);
  font-weight: 600;
}
.precios tbody th { font-weight: 500; }
.lista-precios { list-style: none; padding: 0; margin: 0; font-variant-numeric: tabular-nums; }
.lista-precios li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--linea);
}

/* ─────────────────────────────────────────────────────── avisos y formularios */

.aviso, .error-bloque, .exito {
  padding: 0.9rem 1.1rem;
  border-radius: var(--radio-grande);
  border: 1px solid;
  margin-bottom: 1.25rem;
  font-size: 0.9375rem;
}
.aviso, .error-bloque {
  background: var(--error-tenue);
  border-color: color-mix(in srgb, var(--error) 30%, transparent);
  color: var(--error);
}
.exito {
  background: var(--exito-tenue);
  border-color: color-mix(in srgb, var(--exito) 30%, transparent);
  color: var(--exito);
}
.exito h2 { margin-top: 0; color: var(--tinta); }

.formulario {
  display: grid;
  gap: 1.1rem;
  max-width: 34rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--radio-grande);
  box-shadow: var(--sombra);
}
.formulario input, .formulario select, .formulario textarea { width: 100%; }
.error {
  display: block;
  color: var(--error);
  font-size: 0.875rem;
  margin-top: 0.25rem;
}
.acciones { display: flex; align-items: center; gap: 0.85rem; }
.sobre-producto {
  margin: 0;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--linea);
  color: var(--tinta-media);
  font-size: 0.9375rem;
}
.campo small { color: var(--tinta-tenue); font-size: 0.8125rem; }

.vacio {
  padding: 3.5rem 1rem;
  text-align: center;
  color: var(--tinta-tenue);
  border: 1px dashed var(--linea-fuerte);
  border-radius: var(--radio-grande);
}
.vacio p { margin-bottom: 1.25rem; }

/* Quien pidió menos movimiento en su sistema operativo lo pidió en serio: las animaciones
   pueden provocar mareo y malestar real, no son solo una preferencia estética. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}