/* Catálogo de mayoreo — La Barata.
 *
 * Hoja propia, sin peticiones a terceros. Las dos fuentes van alojadas aquí
 * mismo, en `fonts/`, recortadas al alfabeto latino: tres archivos de menos de
 * 40 KB cada uno, que el navegador guarda desde la primera visita. Traerlas de
 * Google sería una petición más a otro servidor en una tienda con internet
 * flojo, y en local no cargarían sin conexión.
 *
 * El lenguaje visual sale de la referencia que pidió el negocio: una tienda de
 * calzado con fondo blanco y rosa pálido, títulos en negro condensado y en
 * mayúsculas, píldoras rosa fuerte para las etiquetas y botones negros. De ahí
 * las dos familias: Oswald para todo lo que encabeza —títulos, cifras grandes,
 * niveles— y Montserrat para el texto, las etiquetas y los botones.
 *
 * Cuatro colores con cuatro papeles, para que ninguno diga dos cosas:
 *
 *   negro   lo que se toca: botones, filtro elegido, tallas ya en el pedido.
 *   rosa    lo que etiqueta: marca, gancho, píldoras. Adorna, nunca actúa.
 *   rojo    el logotipo y un solo botón: «Enviar pedido». Es el carmesí del
 *           logo y no se toca: cambiarlo dejaría al logo peleado con su página.
 *   verde   EXCLUSIVAMENTE el dinero que el cliente gana. Si el verde también
 *           decorara, dejaría de significar «aquí ganas», que es lo que el
 *           mayorista busca al recorrer.
 *
 * El fondo lleva un rosa apenas perceptible y las tarjetas son blancas; el
 * marco de las fotos sigue en gris NEUTRO. Las fotos vienen recortadas sobre
 * blanco y se funden con `multiply`: cualquier tinte en el marco se les
 * contagia al blanco del zapato, y con dos mil fotos se nota en toda la
 * rejilla. El rosa vive alrededor de las fotos, nunca debajo.
 *
 * Las superficies se separan con una línea fina y no con sombra: con cincuenta
 * tarjetas en pantalla la sombra ensucia todo. Queda para lo que de verdad
 * flota —la barra del carrito y el visor— y para la tarjeta que se señala.
 */

:root {
  /* El carmesí del logotipo: para el logo y el botón de enviar el pedido. */
  --marca: #c1173c;
  --marca-oscura: #8c0f2b;
  --marca-suave: #fdf1f4;
  --marca-borde: #f8dde3;

  /* El rosa de la referencia: píldoras y etiquetas. Se ve, no se toca. */
  --rosa: #e86bc9;
  --rosa-oscuro: #c7479f;
  --rosa-claro: #f5b3e2;
  --rosa-suave: #fce9f6;
  --rosa-borde: #f6d3ec;

  /* Lo que actúa es negro: botones, chips elegidos, tallas en el pedido. */
  --accion: #111111;
  --accion-hover: #333333;

  /* Verde profundo, no el verde de aviso: acompaña cifras de dinero. */
  --ahorro: #0f7355;
  --ahorro-fondo: #e9f4f0;

  --tinta: #111111;
  --tinta-media: #6b6b6b;
  --tinta-suave: #9c9c9c;
  /* La línea lleva una gota del rosa del fondo para no verse gris sucio
     encima de él. El marco de las fotos NO: ahí el gris es neutro a propósito. */
  --linea: #ece2e8;
  --foto-fondo: #efefef;
  --fondo: #fdf4f8;
  --blanco: #fff;

  /* Las dos familias, con su respaldo del sistema mientras cargan. */
  --titulos: "Oswald", "Arial Narrow", Impact, sans-serif;
  --texto: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Casi imperceptible: la separación la hace el borde, no la sombra. */
  --sombra: 0 1px 1px rgba(0, 0, 0, .04);
  --sombra-alta: 0 10px 30px rgba(0, 0, 0, .14);
  --radio: 10px;

  /* La misma curva y el mismo tiempo en todo lo que se levanta al pasar el
     mouse. Arranca rápido y frena suave: se siente que responde, no que
     tarda. */
  --curva: cubic-bezier(.2, .7, .3, 1);
  --paso: .22s var(--curva);

  /* Sombra en capas y no una sola mancha: una corta y oscura que pega la
     tarjeta al piso, y dos largas y difusas que dan la altura. Una sola
     sombra grande se ve como una nube gris debajo. */
  --sombra-flotante:
    0 1px 2px rgba(0, 0, 0, .05),
    0 8px 16px -6px rgba(0, 0, 0, .10),
    0 22px 34px -12px rgba(0, 0, 0, .12);
}

/* Fuentes variables: un archivo por familia cubre todos los pesos. `swap`
   pinta primero con la del sistema y cambia al llegar: mejor texto que nada. */
@font-face {
  font-family: "Oswald"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(fonts/oswald-latin.woff2) format("woff2");
}
@font-face {
  font-family: "Montserrat"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(fonts/montserrat-latin.woff2) format("woff2");
}
@font-face {
  font-family: "Montserrat"; font-style: italic; font-weight: 400 800; font-display: swap;
  src: url(fonts/montserrat-latin-italic.woff2) format("woff2");
}

* { box-sizing: border-box; }

body {
  margin: 0;
  /* Montserrat es ancha: a 14px rinde lo que la del sistema a 15. */
  font: 400 14px/1.5 var(--texto);
  color: var(--tinta);
  background: var(--fondo);
  -webkit-font-smoothing: antialiased;
}

/* Todo lo que encabeza va en la condensada, en mayúsculas y apretado, como en
   la referencia. Es una sola regla para que el tono sea el mismo en toda la
   tienda: quien cambie aquí cambia todos los títulos a la vez. */
.titulo, .titulo-seccion, .anuncio-titulo, .mosaico-nombre, .escalon-nivel,
.modal-titulo, .datos h1, .datos h2, .confianza strong, .logo-texto {
  font-family: var(--titulos); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0; line-height: 1.05;
}
/* Las cifras grandes también: es lo que hace que un precio se vea como «26%
   OFF» y no como un renglón más. Sin mayúsculas: son números. */
.precios .varios, .precios-ficha strong, .carrito-total, .pedido-importe,
.pedido-totales .tot span:last-child, .carrito-cuentas .tot span:last-child {
  font-family: var(--titulos); font-weight: 600; letter-spacing: 0;
}
/* Y todo botón habla igual: negritas cortas, en mayúsculas y espaciadas. */
.boton, .carrito-pedir, .carrito-ver, .modal-guardar, .buscador button {
  font-family: var(--texto); font-weight: 700; font-size: 13px;
  text-transform: uppercase; letter-spacing: .04em;
}

a { color: inherit; text-decoration: none; }

.contenido { max-width: 1200px; margin: 0 auto; padding: 0 16px; }

/* ── Encabezado ───────────────────────────────────────────────────────────
   Pegado arriba: en un catálogo se recorre mucho hacia abajo y el buscador
   tiene que seguir a la mano sin volver al principio. */
/* Blanco, como en la referencia: el logo carmesí ya pone el color. */
.barra { position: sticky; top: 0; z-index: 10; background: var(--blanco); border-bottom: 1px solid var(--linea); }
.barra-fila {
  display: flex; align-items: center; gap: 16px;
  padding: 12px 16px; flex-wrap: wrap;
  max-width: 1200px; margin: 0 auto;
}
.logo { display: flex; align-items: center; }
/* El logotipo trae aire alrededor dentro de su propio cuadro: a 42px se veía
   diminuto en la barra blanca. */
.logo img { display: block; height: 54px; width: auto; margin: -4px 0; }
.logo-texto { font-size: 24px; color: var(--tinta); }

/* El buscador es el protagonista: ocupa todo el espacio libre. */
.buscador { display: flex; flex: 1 1 320px; min-width: 220px; background: var(--fondo); border: 1px solid var(--linea); border-radius: 8px; }
.buscador input {
  flex: 1; min-width: 0; padding: 10px 14px; border: 0; border-radius: 8px 0 0 8px;
  font: inherit; font-size: 14px; color: var(--tinta); background: transparent;
}
.buscador input::placeholder { color: var(--tinta-suave); }
.buscador input:focus { outline: 2px solid var(--accion); outline-offset: -2px; }
.buscador button {
  border: 0; border-left: 1px solid var(--linea); border-radius: 0 8px 8px 0;
  padding: 0 16px; background: transparent; color: var(--tinta);
  cursor: pointer;
}
.buscador button:hover { background: var(--accion); color: var(--blanco); }

.navegacion { display: flex; gap: 6px; }
.navegacion a {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--tinta); padding: 7px 12px; border-radius: 999px;
}
.navegacion a:hover { background: var(--rosa-suave); }
/* La sección actual se marca en negro: sin esto no se sabe dónde está uno. */
.navegacion a.activo, .navegacion a.activo:hover { background: var(--accion); color: var(--blanco); }

/* La cuenta, en la barra: dos puertas sin sesión, una salida con ella. */
.cuenta { display: flex; align-items: center; gap: 8px; }
.cuenta button {
  border: 1.5px solid var(--accion); border-radius: 999px; padding: 6px 12px;
  font: inherit; font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; cursor: pointer; background: var(--blanco); color: var(--tinta);
}
.cuenta .cuenta-crear { background: var(--accion); color: var(--blanco); }
.cuenta button:hover { background: var(--accion-hover); border-color: var(--accion-hover); color: var(--blanco); }
.cuenta-quien { font-size: 13px; font-weight: 700; }
@media (max-width: 560px) { .cuenta-quien { display: none; } }

/* Franja del descuento por volumen. Verde = ahorro, como el envío gratis. */
.aviso {
  margin: 0; padding: 9px 16px; text-align: center;
  background: var(--ahorro-fondo); color: #00713a;
  font-size: 14px; font-weight: 600;
}

/* ── Migas y títulos ─────────────────────────────────────────────────────── */
.migas { padding: 16px 0 0; font-size: 13px; color: var(--tinta-media); }
.migas a:hover { color: var(--tinta); text-decoration: underline; }
.migas .separador { margin: 0 6px; color: #ccc; }
.migas [aria-current] { color: var(--tinta); }

.titulo { font-size: 32px; margin: 14px 0 4px; }
.resumen { color: var(--tinta-media); font-size: 14px; margin: 0 0 18px; }
/* Segundo bloque de la portada: manda menos que el título de la página, y
   necesita aire arriba para leerse como otra sección y no como continuación. */
.titulo-seccion { font-size: 26px; margin-top: 12px; }
.vacio {
  padding: 56px 20px; text-align: center; color: var(--tinta-media);
  background: var(--blanco); border-radius: var(--radio); border: 1px solid var(--linea);
}

/* ── Mosaicos de línea, sublínea y marca ─────────────────────────────────── */
.mosaicos {
  list-style: none; margin: 0 0 32px; padding: 0; display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
.mosaico {
  position: relative;
  display: flex; flex-direction: column; height: 100%; padding: 14px;
  background: var(--blanco); border-radius: var(--radio); border: 1px solid var(--linea);
  transition: transform var(--paso), border-color var(--paso);
}
.mosaico::after { content: ''; }
.mosaico:hover, .mosaico:focus-visible { transform: translateY(-4px); border-color: transparent; }
.mosaico-foto { width: 100%; height: 148px; object-fit: contain; display: block;
  transition: transform .45s cubic-bezier(.2, .7, .3, 1); }
.mosaico .marco { margin-bottom: 10px; }
.mosaico-nombre { font-size: 20px; }
.mosaico-datos { font-size: 13px; color: var(--tinta-media); margin-top: 2px; }
.mosaico-sub { font-size: 12px; color: var(--tinta-suave); margin-top: auto; padding-top: 6px; }

/* ── Filtros del listado ──────────────────────────────────────────────────
   Fichas y no un menú desplegable: las opciones son pocas, traen su conteo y
   se eligen de un toque. Un `select` esconde justo lo que ayuda a decidir
   —cuánto hay de cada cosa— detrás de un clic.

   La ficha elegida va en negro porque el negro en esta hoja quiere decir
   «esto se toca y está activo», igual que las tallas ya agregadas al pedido. */
.filtros { margin: 0 0 18px; display: grid; gap: 8px; }
.filtro-fila { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.filtro-rotulo {
  min-width: 78px; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--tinta-suave);
}
.filtros ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 6px;
}
.filtro-chip {
  display: inline-block; padding: 4px 11px; font-size: 13px;
  color: var(--tinta-media); background: var(--blanco);
  border: 1px solid var(--linea); border-radius: 999px;
  transition: color var(--paso), border-color var(--paso);
}
/* El conteo, más tenue que la etiqueta: acompaña la decisión, no la encabeza. */
.filtro-chip b { font-weight: 600; color: var(--tinta-suave); }
.filtro-chip:hover { border-color: var(--accion); color: var(--tinta); }
.filtro-chip:hover b { color: var(--tinta); }
.filtro-activo, .filtro-activo:hover {
  color: var(--blanco); background: var(--accion); border-color: var(--accion);
}
.filtro-activo b, .filtro-activo:hover b { color: rgba(255, 255, 255, .7); }
/* En celular el rótulo se lleva su propio renglón: apretado a la izquierda
   dejaba las fichas en una columna de dos centímetros. */
@media (max-width: 560px) { .filtro-rotulo { min-width: 100%; } }

/* ── Rejilla de productos ────────────────────────────────────────────────── */
.rejilla {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 16px;
  /* Tarjetas anchas: cada una lleva foto, dos precios, existencias y hasta
     diez fichas de talla clicables. Apretadas en cinco columnas, las tallas se
     amontonan y son el elemento con el que más se interactúa. */
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
}
.tarjeta {
  position: relative;
  display: flex; flex-direction: column; padding: 14px;
  background: var(--blanco); border-radius: var(--radio); border: 1px solid var(--linea);
  transition: transform var(--paso), border-color var(--paso);
}
.tarjeta::after { content: ''; }
.tarjeta:hover, .tarjeta:focus-within { transform: translateY(-4px); border-color: transparent; }
/* Las fotos del proveedor vienen recortadas sobre blanco y en formatos
   dispares, así que sobre la tarjeta blanca cada una dejaba un rectángulo de
   distinto tamaño. Con el marco gris y `multiply`, el blanco de la foto se
   funde con el fondo y solo queda el zapato: la rejilla se ve pareja sin
   tocar una sola imagen. */
.marco {
  display: block; background: var(--foto-fondo);
  border-radius: 10px; overflow: hidden;
  /* La mezcla se resuelve dentro del marco y no contra la página entera:
     acotarla evita que una capa encima —el visor, la barra del carrito—
     entre en la cuenta. */
  isolation: isolate;
}
.foto, .foto-grande, .mosaico-foto { mix-blend-mode: multiply; }
/* El marco de la tarjeta es un botón: se le quita la apariencia de botón y
   se deja la lupa, que es la única pista de que la foto se puede abrir. */
.marco-boton { width: 100%; padding: 0; border: 0; cursor: zoom-in; font: inherit; }
.marco-boton:focus-visible { outline: 2px solid var(--accion); outline-offset: 2px; }
/* La foto, al borde de la tarjeta: con el marco metido dentro del acolchado
   quedaban dos rectángulos concéntricos —el de la tarjeta y el de la foto— y
   un marco gris de 14px alrededor de cada zapato. Sacándolo, la foto es la
   tapa de la tarjeta y el gris deja de leerse como un borde.

   `width: auto` no es opcional: el ancho del 100% se mide contra el contenido
   ya acolchado, así que con los márgenes negativos la foto quedaba corrida a
   la izquierda en vez de estirarse. El redondeo lleva el ancho del borde
   descontado para que no asome un pelo blanco en las esquinas de arriba, y el
   foco se dibuja hacia adentro porque ya no hay margen donde caber. */
.tarjeta > .marco {
  width: auto; margin: -14px -14px 0;
  border-radius: calc(var(--radio) - 1px) calc(var(--radio) - 1px) 0 0;
}
.tarjeta > .marco:focus-visible { outline-offset: -3px; }
.foto { width: 100%; aspect-ratio: 1; object-fit: contain; display: block;
  transition: transform .45s cubic-bezier(.2, .7, .3, 1); }
/* La marca, como píldora rosa con letra blanca, igual que las etiquetas de la
   referencia: en negritas sueltas competía con el nombre del modelo, que está
   justo debajo. Encerrada se lee como una etiqueta —qué es— y no como parte
   del nombre. */
.marca {
  /* La tarjeta es una columna flex y sus hijos se estiran solos: sin esto la
     pastilla se vuelve una banda de lado a lado. */
  display: inline-block; align-self: flex-start; margin: 10px 0 0; padding: 2px 8px;
  font-size: 11px; font-weight: 700; line-height: 1.5;
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--blanco); background: var(--rosa); border-radius: 999px;
}
.marca + .nombre { margin-top: 4px; }
.nombre {
  font-size: 14px; font-weight: 400; line-height: 1.35; margin: 10px 0 2px;
  /* Dos renglones máximo: con nombres de largo dispar, las tarjetas se
     desalinean y la rejilla se ve rota. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sku { margin: 0; font-size: 12px; color: var(--tinta-suave); }

/* Precio al estilo de una tienda: el de lista chico y tachado arriba, el
   importante grande y ligero, y el ahorro en verde. */
.precios { margin: 10px 0 6px; }
.precios .uno { display: block; font-size: 12px; color: var(--tinta-suave); text-decoration: line-through; }
.precios .uno small { text-decoration: none; }
.precios .varios { display: block; font-size: 28px; line-height: 1.1; }
.precios .varios small { display: block; font-size: 12px; color: var(--tinta-media); }
.precios .ahorro { display: inline-block; margin-top: 2px; font-size: 13px; font-weight: 600; color: var(--ahorro); }

.existencias { margin: 4px 0 8px; font-size: 13px; color: var(--tinta-media); }
.tallas { list-style: none; margin: auto 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.tallas li { display: flex; }
.talla-btn {
  display: flex; gap: 3px; align-items: baseline; padding: 3px 8px;
  border: 1px solid var(--linea); border-radius: 999px; background: var(--blanco);
  font: inherit; font-size: 11px; color: var(--tinta-media); cursor: pointer;
}
.talla-btn:hover { border-color: var(--accion); color: var(--tinta); }
/* Ya en el pedido: se marca para que el cliente sepa qué lleva sin abrir la
   barra, y para que un segundo clic sea deliberado y no un tropiezo. */
.talla-btn.en-carrito { background: var(--accion); border-color: var(--accion); color: var(--blanco); }
.talla-btn.en-carrito .cuantos { color: var(--blanco); }
.tallas .cuantos { font-weight: 700; color: var(--tinta); }
.tabla-tallas .talla-btn { border-radius: 6px; padding: 4px 12px; font-size: 13px; }

/* ── Paginación ──────────────────────────────────────────────────────────── */
.paginacion { display: flex; gap: 18px; align-items: center; justify-content: center; padding: 28px 0; font-size: 14px; color: var(--tinta-media); }
.paginacion a { color: var(--tinta); font-weight: 700; }
.paginacion a:hover { text-decoration: underline; }

/* ── Ficha ───────────────────────────────────────────────────────────────── */
.ficha {
  display: grid; gap: 28px; grid-template-columns: minmax(0, 460px) minmax(0, 1fr);
  align-items: start; background: var(--blanco); border-radius: var(--radio);
  border: 1px solid var(--linea); padding: 24px; margin: 16px 0 32px;
}
@media (max-width: 780px) { .ficha { grid-template-columns: 1fr; padding: 16px; } }
/* `height: auto` no es opcional: la imagen trae width y height de 800 como
   atributos, y sin esto el alto del atributo gana y el marco se estira. */
.foto-grande { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; display: block; }
/* El nombre de la tarjeta es enlace a la página del modelo, pero se ve como
   texto: la tarjeta entera ya responde y el subrayado llega al señalarla. */
.nombre a { color: inherit; text-decoration: none; }
.datos h1 { margin: 0 0 4px; font-size: 30px; }
.datos .marca { margin: 0 0 8px; }
.datos .sku { margin: 0 0 14px; }
.datos .dinero { margin: 0 0 16px; }
/* El texto que lee Google y la persona: de corrido, con aire, sin competir. */
.ficha-texto { margin: 18px 0 0; font-size: 14px; line-height: 1.6; color: var(--tinta-media); }
.atributos a { text-decoration: underline; text-underline-offset: 2px; }
/* Agotado: se dice claro, con el rosa del negocio y no con rojo de error. */
.agotado {
  margin: 0 0 16px; padding: 12px 14px; font-size: 14px; line-height: 1.5;
  background: var(--rosa-suave); border: 1px solid var(--rosa-borde); border-radius: var(--radio);
}
.parecidos { margin: 0 0 32px; }
/* En los parecidos el nombre es largo: un renglón más chico que en las
   secciones, y a dos renglones máximo para que la rejilla no se rompa. */
.mosaico-nombre-modelo {
  font-size: 15px; text-transform: none; font-family: var(--texto); font-weight: 600;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.atributos { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 18px 0; font-size: 14px; }
.atributos dt { color: var(--tinta-media); }
.atributos dd { margin: 0; }
.precios-ficha { border-top: 1px solid var(--linea); padding: 16px 0 4px; margin: 16px 0 0; }
.precios-ficha p { margin: 0 0 4px; color: var(--tinta-media); font-size: 14px; }
.precios-ficha strong { font-size: 38px; color: var(--tinta); line-height: 1.1; }
.precios-ficha .nota { margin-top: 10px; color: var(--ahorro); font-weight: 600; }
.datos h2 { font-size: 20px; margin: 22px 0 8px; }
.tabla-tallas { border-collapse: collapse; min-width: 240px; font-size: 14px; }
.tabla-tallas th, .tabla-tallas td { border-bottom: 1px solid var(--linea); padding: 7px 16px 7px 0; text-align: left; }
.tabla-tallas thead th { color: var(--tinta-media); font-weight: 600; }
.tabla-tallas tfoot th { border-bottom: 0; }
.boton {
  display: inline-block; margin-top: 20px; padding: 13px 26px; border-radius: 8px;
  background: var(--accion); color: var(--blanco);
}
.boton:hover { background: var(--accion-hover); }

/* ── Pie ─────────────────────────────────────────────────────────────────── */
.pie { border-top: 1px solid var(--linea); background: var(--blanco); padding: 24px 0; color: var(--tinta-media); font-size: 13px; }
.pie .contacto { margin-top: 8px; }
.pie .contacto a { margin-right: 18px; font-weight: 700; color: var(--tinta); }
.pie .contacto a:hover { text-decoration: underline; }

/* ── Carrito ──────────────────────────────────────────────────────────────
   Fijo abajo y en todas las páginas: el pedido se arma recorriendo secciones,
   así que el avance tiene que verse sin volver a ningún lado. */
.carrito {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  background: var(--blanco); box-shadow: 0 -4px 20px rgba(0, 0, 0, .16);
}
.carrito-barra {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  max-width: 1200px; margin: 0 auto; padding: 12px 16px; flex-wrap: wrap;
}
.carrito-resumen { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.carrito-pares { font-size: 14px; color: var(--tinta-media); }
.carrito-total { font-size: 28px; line-height: 1; }
.carrito-falta { font-size: 13px; color: var(--rosa-oscuro); font-weight: 700; }
.carrito-ahorro { font-size: 13px; color: var(--ahorro); font-weight: 700; }
/* El recordatorio de los datos. Es la excepción a «el rosa no actúa»: es un
   aviso que se toca, y tiene que verse desde el otro lado de la pantalla. */
.carrito-datos {
  border: 0; border-radius: 999px; padding: 6px 12px;
  background: var(--rosa); color: var(--blanco);
  font: inherit; font-size: 12px; font-weight: 700; cursor: pointer;
}
.carrito-datos:hover { background: var(--rosa-oscuro); }
/* Sugerencia del segundo par: en renglón propio, porque suele ser larga y
   compitiendo con el total lo desplazaría en pantallas chicas. */
.carrito-sugerencia { flex-basis: 100%; font-size: 13px; color: var(--tinta-media); }
.carrito-acciones { display: flex; gap: 10px; }
.carrito-ver {
  border: 1.5px solid var(--accion); background: var(--blanco); border-radius: 999px;
  padding: 10px 18px; color: var(--tinta); cursor: pointer;
}
.carrito-ver:hover { background: var(--accion); color: var(--blanco); }
/* El único botón rojo de la tienda, como el de la referencia: es el que cierra
   el pedido y lleva el carmesí del logo. */
.carrito-pedir {
  border: 0; border-radius: 999px; padding: 12px 24px; background: var(--marca);
  color: var(--blanco); cursor: pointer;
}
.carrito-pedir:hover { background: var(--marca-oscura); }

.carrito-detalle { max-height: 46vh; overflow-y: auto; border-bottom: 1px solid var(--linea); }
.carrito-lista { list-style: none; margin: 0; padding: 0; max-width: 1200px; margin: 0 auto; }
.carrito-lista li {
  /* Dos renglones dentro de la fila: arriba qué es y cuánto gana, abajo la
     talla y los controles. En una sola línea, con cinco columnas, el nombre se
     queda en «PIRM…» en cuanto la pantalla es de teléfono, que es donde se va
     a usar esto. */
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    "foto nombre quitar"
    "foto talla  controles";
  gap: 2px 12px; align-items: center;
  padding: 10px 16px; border-bottom: 1px solid var(--linea); font-size: 14px;
}
.ci-foto { grid-area: foto; }
.ci-nombre { grid-area: nombre; min-width: 0; line-height: 1.25; }
.ci-talla { grid-area: talla; }
.ci-controles { grid-area: controles; justify-self: end; }
.ci-quitar { grid-area: quitar; justify-self: end; }
.ci-talla { color: var(--tinta-media); font-size: 13px; }
.ci-controles { display: flex; align-items: center; gap: 8px; }
.ci-foto { align-self: center; }
.ci-controles button {
  width: 28px; height: 28px; border: 1px solid var(--linea); background: var(--blanco);
  border-radius: 6px; font: inherit; font-size: 16px; line-height: 1; cursor: pointer; color: var(--tinta);
}
.ci-controles button:hover { border-color: var(--accion); background: var(--accion); color: var(--blanco); }
.ci-pares { min-width: 22px; text-align: center; font-weight: 700; }
.ci-quitar { border: 0; background: none; color: var(--tinta-suave); font: inherit; font-size: 13px; cursor: pointer; }
.ci-quitar:hover { color: var(--tinta); text-decoration: underline; }

.carrito-cuentas { max-width: 1200px; margin: 0 auto; padding: 12px 16px; }
.carrito-cuentas p { display: flex; justify-content: space-between; margin: 0 0 4px; font-size: 14px; color: var(--tinta-media); }
.carrito-cuentas .desc { color: var(--ahorro); font-weight: 600; }
.carrito-cuentas .tot { font-size: 17px; font-weight: 700; color: var(--tinta); }
.carrito-cuentas .tot span:last-child { font-size: 22px; line-height: 1; }
.carrito-vaciar { margin-top: 8px; border: 0; background: none; color: var(--tinta-suave); font: inherit; font-size: 13px; cursor: pointer; }
.carrito-vaciar:hover { color: var(--tinta); text-decoration: underline; }

.carrito-aviso {
  position: fixed; left: 50%; bottom: 92px; transform: translateX(-50%); z-index: 60;
  margin: 0; padding: 10px 18px; border-radius: 8px; background: var(--tinta);
  color: var(--blanco); font-size: 14px; box-shadow: var(--sombra-alta);
}

/* Espacio para que la barra no tape el último renglón del contenido. */
body { padding-bottom: 84px; }

/* ── Visor de fotos ────────────────────────────────────────────────────────
   La tarjeta se queda corta para juzgar un zapato: el visor muestra la foto
   original sobre un fondo oscuro, que es donde mejor se aprecia el color. */
.sin-scroll { overflow: hidden; }
.visor {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, .88);
  cursor: zoom-out;
}
.visor[hidden] { display: none; }
.visor-foto {
  max-width: 100%; max-height: 100%;
  object-fit: contain; cursor: default;
  border-radius: 4px; background: var(--blanco);
}
.visor-estado { color: #ddd; font-size: 15px; }
.visor-cerrar {
  position: absolute; top: 12px; right: 16px;
  width: 44px; height: 44px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 30px; line-height: 1; color: var(--blanco);
  background: rgba(255, 255, 255, .14); border: 0; border-radius: 50%;
  cursor: pointer;
}
.visor-cerrar:hover { background: rgba(255, 255, 255, .26); }

/* ── Formulario del cliente ───────────────────────────────────────────────
   Se abre al agregar el primer par. Centrado y con la caja acotada: en el
   teléfono es una pantalla completa y en escritorio una tarjeta. */
.modal {
  position: fixed; inset: 0; z-index: 110;
  display: flex; align-items: center; justify-content: center;
  padding: 18px; background: rgba(0, 0, 0, .5);
}
.modal[hidden] { display: none; }
.modal-caja {
  width: 100%; max-width: 380px; padding: 22px;
  background: var(--blanco); border-radius: var(--radio);
  box-shadow: var(--sombra-alta);
}
.modal-titulo { margin: 0 0 6px; font-size: 24px; }
.modal-texto { margin: 0 0 16px; font-size: 14px; color: var(--tinta-media); }
.campo { display: block; margin-bottom: 12px; }
.campo span { display: block; margin-bottom: 4px; font-size: 13px; color: var(--tinta-media); }
.campo input {
  width: 100%; padding: 10px 12px;
  /* 16px como mínimo: por debajo de eso Safari en iPhone hace zoom al
     enfocar el campo y descuadra la pantalla. */
  font-size: 16px; font-family: inherit; color: var(--tinta);
  background: var(--blanco); border: 1px solid #d5d5d5; border-radius: 8px;
}
.campo input:focus { border-color: var(--accion); outline: 2px solid var(--rosa-suave); }
.modal-error {
  margin: 0 0 12px; padding: 8px 10px; font-size: 13px;
  color: var(--marca-oscura); background: var(--marca-suave); border-radius: 8px;
}
/* El código se teclea grande, centrado y espaciado: son seis dígitos que se
   están copiando de otra pantalla. */
.modal-codigo input {
  font-family: var(--titulos); font-size: 26px; letter-spacing: .3em; text-align: center;
}
.modal-acciones { display: flex; gap: 10px; justify-content: flex-end; align-items: center; }
/* Tres botones no caben en un renglón de teléfono: se envuelven y el de
   verificar se queda a la derecha. */
.modal-acciones-codigo { flex-wrap: wrap; }
.modal-acciones-codigo .modal-guardar { margin-left: auto; }
.modal-despues:disabled { opacity: .55; cursor: default; }
/* La otra puerta, al pie del formulario: un renglón, no otro botón grande. */
.modal-pie { margin: 14px 0 0; font-size: 13px; color: var(--tinta-media); text-align: center; }
.modal-enlace {
  border: 0; padding: 0; background: none; font: inherit; font-weight: 700;
  color: var(--tinta); text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.modal-despues {
  padding: 10px 12px; font: inherit; font-size: 14px; color: var(--tinta-media);
  background: none; border: 0; cursor: pointer;
}
.modal-guardar {
  padding: 11px 20px; font: inherit; font-size: 15px; font-weight: 600;
  color: var(--blanco); background: var(--accion); border: 0; border-radius: 8px;
  cursor: pointer;
}
.modal-guardar:hover { background: var(--accion-hover); }

/* A nombre de quién va el pedido, dentro del detalle del carrito. */
.carrito-cliente {
  display: flex; gap: 10px; align-items: center; justify-content: space-between;
  margin: 0; padding: 10px 0; font-size: 13px; color: var(--tinta-media);
  border-top: 1px solid var(--linea);
}
.carrito-cliente strong { color: var(--tinta); }
.carrito-cliente button {
  flex: none; padding: 6px 10px; font: inherit; font-size: 13px;
  font-weight: 700; color: var(--tinta); background: none; border: 1.5px solid var(--accion);
  border-radius: 999px; cursor: pointer;
}

/* ── La página del pedido ─────────────────────────────────────────────────
   Es una constancia, no una tienda: nada en qué hacer clic salvo volver. */
.pedido-estado {
  display: flex; flex-direction: column; gap: 2px;
  padding: 14px 16px; margin: 0 0 18px;
  background: var(--blanco); border-radius: var(--radio); border: 1px solid var(--linea);
  border-left: 4px solid var(--rosa);
}
.pedido-estado strong { font-size: 15px; }
.pedido-estado span { font-size: 14px; color: var(--tinta-media); }
.pedido-estado-atendido { border-left-color: var(--ahorro); }
.pedido-estado-cancelado { border-left-color: var(--tinta-suave); }

/* Quién pidió. El teléfono sí es enlace: el vendedor llega aquí desde la copia
   del aviso y lo siguiente que hace es escribirle al cliente. */
.pedido-comprador {
  display: flex; flex-direction: column; gap: 2px;
  padding: 14px 16px; margin: 0 0 18px;
  background: var(--blanco); border-radius: var(--radio); border: 1px solid var(--linea);
}
.pedido-comprador-etiqueta { font-size: 12px; color: var(--tinta-suave); }
.pedido-comprador strong { font-size: 15px; }
.pedido-comprador a, .pedido-comprador span:not(.pedido-comprador-etiqueta) { font-size: 14px; color: var(--tinta); }
.pedido-comprador a { text-decoration: underline; text-underline-offset: 2px; }

.pedido-renglones { list-style: none; margin: 0; padding: 0; }
.pedido-renglones li {
  display: flex; gap: 14px; align-items: center;
  padding: 12px 16px; margin-bottom: 8px;
  background: var(--blanco); border-radius: var(--radio); border: 1px solid var(--linea);
}
.pedido-renglones .marco { flex: none; width: 72px; }
.pedido-foto { width: 100%; aspect-ratio: 1; object-fit: contain; display: block; mix-blend-mode: multiply; }
.pedido-que { flex: 1; min-width: 0; }
.pedido-nombre { display: block; font-size: 14px; line-height: 1.35; }
.pedido-detalle { display: block; margin-top: 2px; font-size: 12px; color: var(--tinta-suave); }
.pedido-cuenta { flex: none; text-align: right; }
.pedido-pares { display: block; font-size: 12px; color: var(--tinta-media); }
.pedido-importe { display: block; font-size: 20px; line-height: 1.1; }

.pedido-totales {
  margin: 14px 0 0; padding: 14px 16px;
  background: var(--blanco); border-radius: var(--radio); border: 1px solid var(--linea);
}
.pedido-totales p { display: flex; justify-content: space-between; margin: 0 0 6px; font-size: 14px; }
.pedido-totales .desc { color: var(--ahorro); }
.pedido-totales .tot { margin: 8px 0 0; padding-top: 8px; font-size: 19px; font-weight: 700; border-top: 1px solid var(--linea); align-items: baseline; }
.pedido-totales .tot span:last-child { font-size: 26px; line-height: 1; }
.pedido-nota { margin: 14px 0 0; font-size: 13px; color: var(--tinta-media); }
.pedido-volver { margin: 18px 0 0; font-size: 14px; }
.pedido-volver a { color: var(--tinta); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }

/* Aviso de que el mensaje no salió: el enlace es lo único que tiene el
   cliente para volver a su pedido, así que hay que decirlo fuerte. */
.pedido-guarda {
  display: block; margin: 14px 0 0; padding: 12px 14px;
  font-size: 13px; color: var(--marca-oscura);
  background: var(--marca-suave); border-radius: var(--radio);
}

/* ── Niveles de precio ────────────────────────────────────────────────────
   La tabla de cada tarjeta dice cuánto cuesta ESE producto en cada nivel; la
   barra del encabezado dice qué hace falta para llegar a cada uno. El nivel
   que va ganando se marca en las dos, y lo marca el carrito. */
/* Todo lo que habla de dinero vive en un solo panel verde: cuánto cobra, cuánto
   paga y cuánto gana. Sueltos sobre el blanco eran cuatro renglones más de la
   tarjeta, del mismo peso que el código y las existencias; agrupados y con
   fondo se ven como lo que son —la propuesta— y el ojo los encuentra antes que
   nada al recorrer la rejilla.

   El verde no es decoración: es el mismo que marca el ahorro en toda la hoja.
   Y no toca la foto, que se queda sobre gris neutro porque el `multiply` del
   marco le pasaría el tinte al blanco del zapato. */
.dinero {
  margin: 10px 0 8px; padding: 9px 10px 7px;
  background: var(--ahorro-fondo); border-radius: 8px;
}
/* El panel sin sesión: la ganancia máxima, en el mismo verde del dinero, y el
   botón de la cuenta. El precio no aparece por ningún lado. */
.dinero-cerrado { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.gana-hasta { margin: 0; font-size: 14px; color: var(--tinta-media); }
.gana-hasta strong { font-family: var(--titulos); font-weight: 600; font-size: 24px; color: var(--ahorro); }
.gana-nota { margin: 0; font-size: 12px; color: var(--tinta-suave); }
/* Discreto en reposo: en una rejilla de cincuenta tarjetas, cincuenta botones
   negros gritan más que los zapatos. Se llena de negro solo al señalarlo. */
.cuenta-btn {
  margin-top: 6px; border: 1.5px solid var(--accion); border-radius: 8px; padding: 8px 14px;
  background: var(--blanco); color: var(--tinta);
  font: inherit; font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; cursor: pointer;
  transition: background var(--paso), color var(--paso);
}
.cuenta-btn:hover, .cuenta-btn:focus-visible { background: var(--accion); color: var(--blanco); }

.niveles {
  width: 100%; margin: 6px 0 0; border-collapse: collapse; font-size: 13px;
}
.niveles th, .niveles td { padding: 3px 0; font-weight: 400; }
.niveles th { text-align: left; color: var(--tinta-media); }
.niveles td { text-align: right; font-variant-numeric: tabular-nums; }
.niveles thead th { font-size: 11px; color: var(--tinta-suave); text-transform: uppercase; letter-spacing: .04em; }
.niveles thead th:not(:first-child) { text-align: right; }
.niveles .gana { color: var(--ahorro); }

/* Lo que puede cobrar por el par: es la cifra que convierte la tabla en una
   propuesta y no en una lista de precios. */
.sugerido { margin: 0; font-size: 13px; color: var(--tinta-media); }
.sugerido strong { color: var(--tinta); font-size: 15px; }
/* El renglón que aplica ahora: blanco recortado sobre el verde del panel, en
   negritas y con una barra a la izquierda. Antes se marcaba en rojo, pero el
   rojo en esta hoja quiere decir «esto se toca»; el nivel es dinero, y el
   dinero es verde —el mismo que ya usa la barra del carrito para decir en qué
   nivel va el pedido—. La barra además lo deja legible para quien no
   distingue los dos colores. */
.niveles tr.nivel-activo th, .niveles tr.nivel-activo td {
  font-weight: 700; color: var(--tinta); background: var(--blanco);
}
.niveles tr.nivel-activo th {
  box-shadow: inset 3px 0 0 var(--ahorro); padding-left: 7px;
  border-radius: 4px 0 0 4px;
}
.niveles tr.nivel-activo td:last-child { border-radius: 0 4px 4px 0; }

.niveles-barra {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
  padding: 8px 16px; background: var(--blanco); border-bottom: 1px solid var(--linea);
}
.nivel-chip {
  padding: 3px 10px; font-size: 12px; color: var(--tinta-media);
  border: 1px solid var(--linea); border-radius: 999px;
}
.nivel-chip b { color: var(--tinta); font-weight: 700; }
.nivel-chip.nivel-activo {
  color: var(--ahorro); background: var(--ahorro-fondo); border-color: var(--ahorro);
}
.nivel-chip.nivel-activo b { color: var(--ahorro); }

/* Renglón del carrito: miniatura, nombre con su ganancia, talla y controles. */
.ci-foto {
  flex: none; width: 44px; height: 44px; object-fit: contain;
  background: var(--foto-fondo); border-radius: 6px; mix-blend-mode: multiply;
}
.ci-gana { display: block; margin-top: 1px; font-size: 12px; color: var(--ahorro); }

/* ── Portada ──────────────────────────────────────────────────────────────
   El orden de la página sigue cómo decide un revendedor: cuánto gana, por
   dónde entra, por qué puede confiar, y hasta abajo la mercancía. */

/* Como el anuncio de la referencia: blanco, con el título enorme en negro
   condensado y el botón negro debajo. El gancho va como píldora rosa. */
.anuncio {
  margin: 0 0 26px; padding: 40px 22px 34px; text-align: center;
  color: var(--tinta); border-radius: var(--radio);
  background: var(--blanco); border: 1px solid var(--linea);
}
.anuncio-gancho {
  display: inline-block; margin: 0 0 14px; padding: 5px 14px;
  font-size: 12px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--blanco); background: var(--rosa);
  border-radius: 999px;
}
.anuncio-titulo {
  /* Ancho para dos renglones: la cifra y «listos para surtir hoy». */
  max-width: 30ch; margin: 0 auto 14px; font-size: 56px; line-height: .98;
}
.anuncio-texto {
  max-width: 52ch; margin: 0 auto 22px; font-size: 15px; line-height: 1.55;
  color: var(--tinta-media);
}
.anuncio-botones { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.boton {
  display: inline-block; padding: 14px 26px;
  text-decoration: none; border-radius: 8px; border: 1.5px solid var(--accion);
}
/* El de tipo de zapato manda: es por donde entra la mayoría, porque casi nadie
   llega buscando una marca concreta en un catálogo de mayoreo. */
.boton-principal { color: var(--blanco); background: var(--accion); }
.boton-principal:hover { background: var(--accion-hover); border-color: var(--accion-hover); }
.boton-alterno { color: var(--tinta); background: var(--blanco); }
.boton-alterno:hover { background: var(--rosa-suave); }
.anuncio-pie {
  margin: 18px 0 0; font-size: 13px; color: var(--tinta-suave);
}

/* ── La escalera de niveles, como gráfica ────────────────────────────────
   Tres barras sobre un eje: la altura es qué tanto baja el precio y la línea
   de abajo es el total del pedido, con el umbral escrito justo en el corte
   donde cambia de nivel. La primera barra es un muñón gris a propósito —en
   nivel 1 no baja nada— y el rosa sube con el nivel: claro donde empieza a
   bajar, pleno en el mejor precio. La gráfica es un esquema, no dinero, así
   que no lleva verde: el verde se queda para las cifras que gana el cliente.

   Sin efectos al pasar el mouse: no se toca ni lleva a ningún lado, y un
   elemento que reacciona al puntero promete un clic que no existe. */
.escalera {
  list-style: none; margin: 0 0 10px; padding: 20px 18px 0;
  background: var(--blanco); border: 1px solid var(--linea);
  border-radius: var(--radio);
  /* Sin separación entre columnas: el borde de abajo de las tres tiene que
     leerse como un solo eje continuo, y un hueco lo cortaría en tres. */
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
}
.escalon { display: flex; flex-direction: column; padding-right: 14px; }
/* La pastilla del icono sigue a la barra: gris donde no baja nada, rosa
   donde sí. */
.escalon-icono svg {
  width: 34px; height: 34px; padding: 7px; display: block;
  border-radius: 10px; background: var(--fondo);
  fill: none; stroke: var(--tinta-suave); stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.escalon[data-nivel="2"] .escalon-icono svg,
.escalon[data-nivel="3"] .escalon-icono svg {
  background: var(--rosa-suave); stroke: var(--rosa-oscuro);
}
.escalon-nivel { display: block; margin-top: 10px; font-size: 26px; }
.escalon-que {
  display: block; margin-top: 3px; font-size: 13.5px; line-height: 1.4;
  color: var(--tinta-media);
}
/* La pista fija la altura del dibujo; sin ella el porcentaje de la barra no
   tendría contra qué medirse. `margin-top: auto` empuja las tres barras a la
   misma base aunque los textos de arriba ocupen distinto. */
.escalon-pista { display: flex; align-items: flex-end; height: 96px; margin-top: auto; padding-top: 14px; }
.escalon-barra {
  width: 100%; max-width: 132px; height: var(--alto);
  border-radius: 4px 4px 0 0; background: var(--linea);
  transform-origin: bottom; animation: crece .5s var(--curva) both;
}
.escalon[data-nivel="2"] .escalon-barra { background: var(--rosa-claro); animation-delay: .07s; }
.escalon[data-nivel="3"] .escalon-barra { background: var(--rosa); animation-delay: .14s; }
@keyframes crece { from { transform: scaleY(0); } }
.escalon-cuando {
  display: block; padding: 8px 0 16px; border-top: 1px solid var(--tinta-suave);
  font-size: 13px; font-weight: 700; color: var(--tinta); position: relative;
}
/* La marca del umbral, colgando del eje: el punto exacto donde el pedido
   cambia de nivel. La primera columna no lleva porque su corte es el cero. */
.escalon + .escalon .escalon-cuando::before {
  content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 6px;
  background: var(--tinta-suave);
}
.escalera-pie { margin: 0 0 30px; font-size: 13px; color: var(--tinta-suave); }

/* En pantalla angosta la gráfica se acuesta: tres columnas de 90px no dan
   para el texto, y una barra horizontal dice lo mismo con el ancho. */
@media (max-width: 640px) {
  .escalera { grid-template-columns: 1fr; padding: 4px 16px; }
  .escalon {
    display: grid; grid-template-columns: 24px 1fr auto; align-items: center;
    column-gap: 10px; padding: 14px 0;
  }
  .escalon + .escalon { border-top: 1px solid var(--linea); }
  .escalon-nivel { margin-top: 0; }
  .escalon-cuando {
    grid-column: 3; grid-row: 1; padding: 0; border-top: 0;
    text-align: right; font-weight: 400; color: var(--tinta-suave);
  }
  .escalon + .escalon .escalon-cuando::before { display: none; }
  .escalon-que { grid-column: 2 / 4; margin-top: 3px; }
  .escalon-pista { grid-column: 2 / 4; height: auto; margin-top: 0; padding-top: 10px; }
  .escalon-barra {
    width: var(--alto); max-width: none; height: 8px; border-radius: 999px;
    transform-origin: left; animation-name: crece-ancho;
  }
  @keyframes crece-ancho { from { transform: scaleX(0); } }
}

/* Quien pidió menos movimiento se queda con la gráfica dibujada, no con la
   gráfica creciendo. */
@media (prefers-reduced-motion: reduce) {
  .escalon-barra { animation: none; }
}

.confianza { margin: 0 0 30px; }
/* Columnas fijas y no auto-fit: son cinco puntos, y con auto-fit caían
   cuatro arriba y uno huérfano abajo. Cinco en ancho, tres y dos en tableta,
   uno en teléfono. */
.confianza ul {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 12px;
  grid-template-columns: repeat(5, 1fr);
}
@media (max-width: 1100px) { .confianza ul { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .confianza ul { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .confianza ul { grid-template-columns: 1fr; } }
.confianza li {
  padding: 16px; border-radius: var(--radio);
  background: var(--blanco); border: 1px solid var(--linea);
}
/* El tono va en el HTML y no en un `nth-child`: si mañana se reordenan los
   puntos o entra uno nuevo, el color viaja con su punto en vez de quedarse
   pegado a la posición.

   Con la paleta de la referencia los tonos son solo dos —rosa y carmesí— y
   se alternan: los cuatro puntos se distinguen por el color de la pastilla y
   por su título en condensada, no por cuatro colores distintos que la volverían
   una caja de crayones. La tarjeta lleva el tinte más aguado del tono y el
   borde queda a medio camino para despegarla del fondo. */
.confianza [data-tono="azul"] { background: var(--rosa-suave); border-color: var(--rosa-borde); }
.confianza [data-tono="ciruela"] { background: var(--marca-suave); border-color: var(--marca-borde); }
.confianza [data-tono="ambar"] { background: var(--rosa-suave); border-color: var(--rosa-borde); }
.confianza [data-tono="rojo"] { background: var(--marca-suave); border-color: var(--marca-borde); }
.confianza svg {
  width: 34px; height: 34px; padding: 7px; margin-bottom: 10px; display: block;
  border-radius: 10px; background: var(--tinta);
  /* El trazo blanco sobre color lleno es lo que le da el punto de contraste a
     la tarjeta; con el trazo de color sobre pastilla clara, el icono se perdía
     apenas la tarjeta tomó fondo. */
  fill: none; stroke: var(--blanco); stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.confianza [data-tono="azul"] svg { background: var(--rosa); }
.confianza [data-tono="ciruela"] svg { background: var(--marca); }
.confianza [data-tono="ambar"] svg { background: var(--rosa); }
.confianza [data-tono="rojo"] svg { background: var(--marca); }
.confianza strong { display: block; font-size: 20px; margin-bottom: 4px; }
.confianza span { font-size: 13.5px; line-height: 1.45; color: var(--tinta-media); }

@media (max-width: 560px) {
  .anuncio { padding: 28px 16px 24px; }
  .anuncio-titulo { font-size: 38px; }
  .anuncio-botones .boton { flex: 1 1 100%; }
}

/* ── Quiénes somos ────────────────────────────────────────────────────────
   Lo que hace confiar a un mayorista son datos comprobables, no adjetivos:
   año, empresa, direcciones y la calificación de Google con su enlace. Por
   eso la página es texto y fichas, y las fotos solo aparecen si son reales. */
.somos {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center;
  margin: 0 0 30px; padding: 22px 24px;
  background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio);
}
.somos .titulo-seccion { margin-top: 0; }
.somos p { margin: 6px 0 10px; font-size: 14.5px; line-height: 1.55; color: var(--tinta-media); max-width: 62ch; }
.somos-enlace { font-weight: 700; color: var(--tinta); text-decoration: underline; text-underline-offset: 2px; }
.somos-resena {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 14px 18px; border-radius: var(--radio); background: var(--fondo); border: 1px solid var(--linea);
  color: var(--tinta); text-decoration: none; min-width: 150px;
}
.somos-resena strong { font-family: var(--titulos); font-size: 34px; line-height: 1; }
.somos-resena span { color: #f5a623; letter-spacing: .05em; font-size: 15px; }
.somos-resena small { font-size: 12px; color: var(--tinta-media); }
@media (max-width: 640px) { .somos { grid-template-columns: 1fr; } .somos-resena { align-items: flex-start; } }

.nosotros {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 20px; margin: 16px 0 20px;
}
.nosotros-historia {
  padding: 24px; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio);
}
.nosotros-historia h2 { margin: 0 0 12px; font-family: var(--titulos); font-weight: 700; text-transform: uppercase; font-size: 26px; line-height: 1.05; }
.nosotros-historia p { margin: 0 0 12px; font-size: 15px; line-height: 1.6; color: var(--tinta-media); }
.nosotros-historia p:last-child { margin-bottom: 0; }
.nosotros-historia strong { color: var(--tinta); }
.nosotros-datos { margin: 0; display: grid; gap: 10px; align-content: start; }
.nosotros-datos div { padding: 12px 16px; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); }
.nosotros-datos dt { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-suave); }
.nosotros-datos dd { margin: 3px 0 0; font-size: 15px; line-height: 1.4; }
.nosotros-datos dd small { display: block; margin-top: 2px; font-size: 12px; color: var(--tinta-suave); }
@media (max-width: 780px) { .nosotros { grid-template-columns: 1fr; } }

.resena {
  display: flex; gap: 20px; align-items: center; margin: 0 0 30px; padding: 20px 24px;
  background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio);
}
.resena-nota { display: flex; flex-direction: column; align-items: center; flex: none; }
.resena-nota strong { font-family: var(--titulos); font-size: 44px; line-height: 1; }
.resena-estrellas { color: #f5a623; font-size: 16px; letter-spacing: .05em; }
.resena-texto p { margin: 0 0 6px; font-size: 15px; color: var(--tinta-media); }
.resena-texto b { color: var(--tinta); }
.resena-texto a { font-weight: 700; color: var(--tinta); text-decoration: underline; text-underline-offset: 2px; }

.galeria { margin: 0 0 30px; }
.galeria-fotos {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.galeria-fotos li { margin: 0; border-radius: var(--radio); overflow: hidden; border: 1px solid var(--linea); background: var(--blanco); }
.galeria-fotos img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.pasos { margin: 0 0 32px; }
.pasos-lista { margin: 0 0 18px; padding: 0; list-style: none; display: grid; gap: 12px; grid-template-columns: repeat(3, 1fr); counter-reset: paso; }
.pasos-lista li {
  position: relative; padding: 18px 18px 18px 58px;
  background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio);
  counter-increment: paso;
}
.pasos-lista li::before {
  content: counter(paso); position: absolute; left: 16px; top: 16px;
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--rosa); color: var(--blanco); font-family: var(--titulos); font-size: 17px; font-weight: 700;
}
.pasos-lista strong { display: block; margin-bottom: 4px; font-size: 15px; }
.pasos-lista span { font-size: 13.5px; line-height: 1.45; color: var(--tinta-media); }
.pasos .anuncio-botones { justify-content: flex-start; }
.pasos .boton { font-family: var(--texto); cursor: pointer; }
@media (max-width: 780px) { .pasos-lista { grid-template-columns: 1fr; } }

.pie-empresa { margin-top: 10px; font-size: 12px; color: var(--tinta-suave); }

/* ── Levantar una tarjeta ─────────────────────────────────────────────────
   La sombra vive en un pseudo-elemento y lo que se anima es su opacidad.
   Animar `box-shadow` directo obliga al navegador a repintar en cada cuadro,
   y aquí hay cincuenta tarjetas en pantalla; la opacidad la resuelve el
   compositor y no toca el diseño.

   En reposo no hay sombra: con cincuenta tarjetas encendidas a la vez la
   rejilla se ensucia. La sombra es la respuesta a que la señales, no la
   decoración de fondo. */
.tarjeta::after,
.mosaico::after {
  position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  box-shadow: var(--sombra-flotante);
  opacity: 0; transition: opacity var(--paso);
}
.tarjeta:hover::after, .tarjeta:focus-within::after,
.mosaico:hover::after, .mosaico:focus-visible::after { opacity: 1; }

/* La foto se acerca un poco dentro de su marco, que ya recorta. Es lo que
   hace que la tarjeta se sienta viva y no solo desplazada. */
.tarjeta:hover .foto,
.mosaico:hover .mosaico-foto { transform: scale(1.05); }

/* El nombre del producto se subraya al señalar la tarjeta completa: deja claro
   que toda la tarjeta responde, no solo la foto. */
.tarjeta:hover .nombre { text-decoration: underline; text-underline-offset: 2px; }

/* Quien pidió menos movimiento recibe el cambio, pero sin desplazamientos:
   la sombra y el subrayado siguen contestando. */
@media (prefers-reduced-motion: reduce) {
  .tarjeta, .mosaico, .foto, .mosaico-foto { transition: none; }
  .tarjeta:hover, .mosaico:hover, .tarjeta:focus-within, .mosaico:focus-visible { transform: none; }
  .tarjeta:hover .foto, .mosaico:hover .mosaico-foto { transform: none; }
}