/*
 * Dueño: C2-Bc · la colección, /collections y la búsqueda: títulos, filtros (Disponibilidad y Precio), orden, columnas,
 * el cajón de filtros del celular y el campo de búsqueda. La tarjeta y la grilla están en at-busqueda.css (van en todas
 * las páginas). Se carga desde sus secciones. Escrito de cero; valores medidos de la tienda de la marca (22/10/2026).
 *
 * --at-bc-escala: el aire de las secciones se achica a 0,7 por debajo de 990 px (con 20 px como mínimo).
 */
:root { --at-bc-escala: .7; }
@media (min-width: 990px) { :root { --at-bc-escala: 1; } }

/* ── Títulos: la medida de un h2 del tema (36 → 48 px, interlineado 1, Inter 700) ── */
.at-bc-h2 {
  margin: 0;
  font-family: var(--at-fuente-titulo);
  font-weight: var(--at-fuente-titulo-peso);
  font-size: clamp(2.25rem, 4.8vw, 3rem);
  line-height: 1;
  letter-spacing: 0;
  text-wrap: balance;
  overflow-wrap: break-word;
}

/* ── /collections/<x>: el encabezado ── */
.at-coleccion-titulo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 12px;
  padding-block: max(20px, calc(var(--at-bc-escala) * 48px));
}
.at-coleccion-titulo__texto { width: fit-content; max-width: 100%; }
.at-coleccion-titulo__descripcion { width: fit-content; max-width: 100%; }
.at-coleccion-titulo__descripcion > :first-child { margin-top: 0; }
.at-coleccion-titulo__descripcion > :last-child { margin-bottom: 0; }

/* ── /search: el encabezado y el campo ── */
.at-busqueda-titulo { padding-top: max(20px, calc(var(--at-bc-escala) * 40px)); }
.at-busqueda-titulo__texto { width: 100%; }
.at-busqueda-titulo__form { padding-block: 24px 12.8px; }
.at-busqueda-campo { position: relative; display: block; width: 100%; background: var(--at-fondo); }
@media (min-width: 750px) { .at-busqueda-campo { width: 50%; } }
.at-busqueda-campo__lupa,
.at-busqueda-campo__borrar {
  position: absolute;
  top: 50%;
  display: flex;
  width: 24px;
  height: 24px;
  transform: translateY(-50%);
  color: var(--at-texto-campos);
}
.at-busqueda-campo__lupa { left: 12.8px; pointer-events: none; }
.at-busqueda-campo__borrar { right: 12.8px; border-radius: 100%; text-decoration: none; }
.at-busqueda-campo__borrar[hidden] { display: none; }
.at-busqueda-campo__borrar-texto { display: none; }
@media (min-width: 750px) {
  .at-busqueda-campo__lupa { left: 16px; }
  .at-busqueda-campo__borrar { right: 16px; }
}
.at-busqueda-campo__entrada {
  display: block;
  width: 100%;
  margin: 0;
  padding: 16px 44.8px;
  border: 1px solid var(--at-borde);
  border-radius: var(--at-campo-radio, 4px);
  background: var(--at-fondo);
  color: var(--at-texto-campos);
  font-family: var(--at-fuente-cuerpo);
  font-size: 16px;
  line-height: 1.6;
  -webkit-appearance: none;
  appearance: none;
  outline: none;
}
.at-busqueda-campo__entrada::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.at-busqueda-campo__entrada::placeholder { color: rgb(51 51 51 / .6); }
@media (min-width: 750px) { .at-busqueda-campo__entrada { padding: 16px 54px; font-size: var(--at-tamano-parrafo); } }

/* ── La lista de resultados ── */
.at-resultados--coleccion { padding-bottom: 32px; }
.at-resultados--busqueda { padding-block: 40px; }
.at-saltar-lista {
  position: absolute !important;
  left: -99999px;
  z-index: 10;
}
.at-saltar-lista:focus { left: var(--at-margen-pagina); }
.at-resultados { position: relative; }

/* La fila de filtros de la compu: 8 px arriba y abajo, 44 de alto, 8 de margen hasta la grilla. */
.at-filtros { display: none; margin-bottom: 8px; padding-block: 8px; color: rgb(0 0 0 / .8); }
@media (min-width: 750px) { .at-filtros { display: block; } }
.at-filtros__form { display: flex; align-items: center; min-height: 44px; }
.at-filtros__lista { display: flex; align-items: center; gap: 16px; }
.at-filtros__derecha { display: flex; align-items: center; gap: 20px; margin-left: auto; }
.at-filtros__cantidad { display: flex; align-items: center; height: 44px; white-space: nowrap; }
.at-filtros__borrar-todo { color: inherit; white-space: nowrap; }

/* Un filtro: el nombre (negro) y la flecha (al 50 %); abierto, la flecha da vuelta y se pone negra. Con uno abierto o con
 * el mouse encima, los otros filtros de la lista bajan al 75 %. */
.at-filtro { position: relative; }
.at-filtro__resumen {
  display: flex;
  align-items: center;
  gap: 4.8px;
  height: 44px;
  padding-block: 11.2px;
  list-style: none;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: opacity .125s ease;
}
.at-filtro__resumen::-webkit-details-marker { display: none; }
.at-filtro__nombre { color: var(--at-texto); }
.at-filtro .at-icono--flecha { flex-shrink: 0; color: rgb(0 0 0 / .5); transition: transform .2s ease, color .125s ease; }
.at-filtro__resumen:hover .at-icono--flecha,
.at-filtro[open] > .at-filtro__resumen .at-icono--flecha { color: var(--at-texto); }
.at-filtro[open] > .at-filtro__resumen .at-icono--flecha { transform: rotate(180deg); }
.at-filtros__lista:has(.at-filtro[open], .at-filtro__resumen:hover) .at-filtro:not([open]) > .at-filtro__resumen:not(:hover) { opacity: .75; }

/* El desplegable: blanco, borde de 1 px #DFDFDF, radio 14, sombra 0 4 20 al 15 %, 4 px por encima del borde del botón. */
.at-filtro--fila > .at-filtro__panel,
.at-filtro--orden > .at-filtro__panel {
  position: absolute;
  top: calc(100% - 4px);
  left: 0;
  z-index: 3;
  border: 1px solid var(--at-borde);
  border-radius: 14px;
  background: var(--at-fondo);
  color: var(--at-texto);
  box-shadow: 0 4px 20px rgb(0 0 0 / .15);
}
.at-filtro--orden > .at-filtro__panel { left: auto; right: 0; }
.at-filtro--fila > .at-filtro__panel--lista { padding: 12.8px; }
.at-filtro--fila > .at-filtro__panel--precio { width: 362px; }
.at-filtro__valores { display: flex; flex-direction: column; gap: 11.2px; }
.at-filtro__borrar { display: block; margin-top: 8px; color: inherit; font-size: 13px; }
.at-filtro--fila .at-filtro__panel--precio .at-filtro__borrar { margin: 0 12.8px 8px; }

/* La casilla: 16 px (22 en el cajón del celular), borde de 1 px al 35 %, radio 5 (7). Apagada: fondo al 10 %. */
.at-casilla { position: relative; display: flex; align-items: center; color: var(--at-texto); font-size: var(--at-tamano-parrafo); line-height: 16px; cursor: pointer; }
.at-casilla__entrada { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: inherit; }
.at-casilla__caja {
  display: flex;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border: 1px solid rgb(0 0 0 / .35);
  border-radius: 5px;
  background: var(--at-fondo);
  color: var(--at-fondo);
}
.at-casilla__caja svg { width: 100%; height: 100%; opacity: 0; }
.at-casilla__entrada:checked + .at-casilla__caja { border-color: var(--at-texto); background: var(--at-texto); }
.at-casilla__entrada:checked + .at-casilla__caja svg { opacity: 1; }
.at-casilla__texto { padding-left: 6px; color: rgb(0 0 0 / .8); }
.at-casilla--apagada { cursor: not-allowed; }
.at-casilla--apagada .at-casilla__caja { border-color: rgb(0 0 0 / .05); background: rgb(0 0 0 / .1); }
.at-casilla--apagada .at-casilla__texto { color: rgb(0 0 0 / .5); }

/* El precio: dos campos de 48 px con «$U» a la izquierda y el número a la derecha, «a» en el medio. */
.at-precio__campos { display: flex; align-items: center; gap: 13.2px; padding: 13.8px; }
.at-precio__campo { position: relative; flex: 1 1 0; min-width: 0; }
.at-precio__entrada {
  display: block;
  width: 100%;
  height: 48px;
  margin: 0;
  padding: 12.8px 12.8px 12.8px 32px;
  border: 0;
  border-radius: 4px;
  background: var(--at-fondo);
  box-shadow: 0 0 0 1px var(--at-borde);
  color: var(--at-texto-campos);
  font-family: var(--at-fuente-cuerpo);
  font-size: var(--at-tamano-parrafo);
  line-height: var(--at-interlineado-parrafo);
  text-align: right;
  outline: none;
}
.at-precio__entrada::placeholder { color: rgb(51 51 51 / .6); }
.at-precio__moneda { position: absolute; top: 0; left: 0; height: 48px; padding: 12.8px; color: rgb(51 51 51 / .6); pointer-events: none; }
.at-precio__separador { flex: 0 0 auto; }
.at-precio__maximo { padding: 0 12.8px 8px; color: rgb(0 0 0 / .6); }

/* El orden: opciones de 30,4 px con el tilde a la izquierda; la elegida en 500. */
.at-filtro__panel--orden { padding: 9.1px; min-width: 180px; }
.at-orden__opcion {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4.8px;
  width: max-content;
  min-width: 100%;
  padding: 4px 9.1px 4px 4px;
  border-radius: 7px;
  color: var(--at-texto);
  white-space: nowrap;
  cursor: pointer;
}
.at-orden__opcion:hover { background: rgb(0 0 0 / .05); }
.at-orden__marca { display: flex; flex-shrink: 0; width: 20px; height: 20px; }
.at-orden__opcion--elegida .at-orden__nombre { font-weight: 500; }

/* Columnas: dos íconos de 28 px (relleno 4, radio 3,2); el elegido negro sobre gris al 5 %, el otro al 50 %. */
.at-columnas { display: flex; gap: 8px; height: 44px; margin: 0 -3px 0 0; padding: 0; border: 0; align-items: center; }
.at-columnas--compu { gap: 4.8px; }
.at-columnas__opcion { position: relative; display: flex; }
.at-columnas__entrada { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.at-columnas__icono { display: flex; padding: 4px; border-radius: 3.2px; color: rgb(0 0 0 / .5); transition: background-color .125s ease, color .125s ease; }
.at-columnas__opcion:hover .at-columnas__icono { background: rgb(0 0 0 / .05); }
.at-columnas__entrada:checked ~ .at-columnas__icono { color: var(--at-texto); background: rgb(0 0 0 / .05); }

/* La fila del celular: «Filtro» y las columnas, 44 px con 8/16 de relleno y 8 de margen hasta la grilla. */
.at-filtros-celular {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44px;
  margin-bottom: 8px;
  padding: 8px 16px;
}
@media (min-width: 750px) { .at-filtros-celular { display: none; } }
.at-filtros-celular__boton {
  display: inline-flex;
  align-items: center;
  gap: 4.8px;
  margin-left: -3px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--at-texto);
  font: inherit;
  cursor: pointer;
}
.at-filtros-celular__derecha { display: flex; align-items: center; justify-content: flex-end; gap: 11.2px; }

/* La grilla: el ancho de la página desde 750 px; de borde a borde en el celular. */
.at-resultados__grilla { width: 100%; }
@media (min-width: 750px) {
  .at-resultados__grilla {
    max-width: calc(var(--at-ancho-contenido) + var(--at-margen-pagina) * 2);
    margin-inline: auto;
    padding-inline: var(--at-margen-pagina);
  }
}
/* «Alejar» (compu): columnas de 100 px, solo la foto. «Una» (celular): una columna. */
.at-grilla-productos[data-vista='lejos'] .at-tarjeta__titulo-link,
.at-grilla-productos[data-vista='lejos'] .at-tarjeta__precio,
.at-grilla-productos[data-vista='lejos'] .at-tarjeta__etiqueta,
.at-grilla-productos[data-vista='lejos'] .at-tarjeta__rapido,
.at-grilla-productos[data-vista='lejos'] .at-tarjeta__flecha { display: none; }
@media (min-width: 750px) {
  .at-grilla-productos[data-vista='lejos'] { grid-template-columns: repeat(auto-fill, minmax(6.25rem, 1fr)); gap: 16px; }
}
@media (max-width: 749px) {
  .at-grilla-productos[data-vista-celular='una'] { grid-template-columns: 1fr; }
}

/* ── El cajón de filtros (celular) ── */
.at-filtros-cajon {
  position: fixed;
  inset: 0 0 0 auto;
  width: 100%;
  max-width: 100%;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--at-fondo);
  color: rgb(0 0 0 / .8);
  overflow: hidden;
}
.at-filtros-cajon::backdrop { background: rgb(0 0 0 / .15); }
.at-filtros-cajon[open] { display: flex; flex-direction: column; animation: at-bc-cajon-entra .2s ease; }
@keyframes at-bc-cajon-entra { from { transform: translateX(100%); } to { transform: none; } }
@media (min-width: 750px) { .at-filtros-cajon { width: 95vw; max-width: 500px; border-left: 1px solid var(--at-borde); } }
.at-filtros-cajon__form { display: flex; flex-direction: column; height: 100%; padding-left: 1px; }
.at-filtros-cajon__cabecera { display: flex; align-items: center; justify-content: space-between; padding: 20px; }
.at-filtros-cajon__titulo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--at-texto);
  font-family: var(--at-fuente-titulo);
  font-weight: var(--at-fuente-titulo-peso);
  font-size: 24px;
  line-height: 1;
}
.at-filtros-cajon__burbuja {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6.5px;
  border-radius: 16px;
  background: rgb(0 0 0 / .1);
  font-family: var(--at-fuente-cuerpo);
  font-weight: 400;
  font-size: 13px;
  line-height: 1;
}
.at-filtros-cajon__cerrar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid rgb(0 0 0 / .06);
  border-radius: 34px;
  background: var(--at-fondo);
  box-shadow: 0 2px 6px rgb(0 0 0 / .06);
  color: rgb(0 0 0 / .5);
  cursor: pointer;
}
.at-filtros-cajon__cuerpo { flex: 1 1 auto; overflow-y: auto; }
.at-filtro--cajon { margin: 0 20px; border-top: 1px solid var(--at-borde); }
.at-filtro--cajon > .at-filtro__resumen { justify-content: space-between; padding-block: 11.6px; }
.at-filtro--cajon .at-filtro__estado { display: flex; padding-left: 4.8px; }
.at-filtro--cajon > .at-filtro__panel--lista { padding: 8px 0 11.2px; }
.at-filtro--cajon .at-filtro__valores { gap: 22px; }
.at-filtro--cajon .at-casilla { line-height: 22px; }
.at-filtro--cajon .at-casilla__caja { width: 22px; height: 22px; border-radius: 7px; }
.at-filtro--cajon .at-casilla__texto { padding-left: 8px; }
.at-filtro--cajon .at-precio__campos { padding: 8px 0 0; gap: 13.2px; }
.at-filtro--cajon .at-precio__maximo { padding: 8px 0 11.2px; }
.at-filtros-cajon__orden {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 20px;
  padding: 11.2px 0;
  border-top: 1px solid var(--at-borde);
}
.at-filtros-cajon__orden-nombre { color: var(--at-texto); font-size: 24px; line-height: 1.6; }
.at-filtros-cajon__orden-caja { position: relative; display: flex; align-items: center; padding: 4px 8px; border-radius: 14px; }
.at-filtros-cajon__orden-lista {
  padding: 0 9.6px 0 0;
  border: 0;
  border-radius: 4px;
  background: var(--at-fondo);
  color: rgb(0 0 0 / .8);
  font-size: 16px;
  line-height: 1.6;
  text-align: right;
  -webkit-appearance: none;
  appearance: none;
}
.at-filtros-cajon__orden-caja .at-icono--arriba-abajo { flex-shrink: 0; }
.at-filtros-cajon__acciones {
  position: sticky;
  bottom: 0;
  display: flex;
  gap: 8px;
  padding: 8px 16px 12.8px;
  background: var(--at-fondo);
}
.at-filtros-cajon__acciones .at-boton { flex: 1 1 0; }
.at-filtros-cajon__ver { margin-left: 11.2px; }

/* ── /collections ── */
.at-colecciones {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-block: max(20px, calc(var(--at-bc-escala) * 48px));
}
.at-colecciones__cabecera { width: fit-content; padding-bottom: max(20px, calc(var(--at-bc-escala) * 48px)); }
.at-colecciones__titulo { padding-bottom: 16px; }
.at-colecciones__grilla { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px 12px; }
@media (min-width: 750px) { .at-colecciones__grilla { grid-template-columns: repeat(3, 1fr); } }
.at-coleccion-tarjeta { position: relative; height: 100%; }
.at-coleccion-tarjeta__link { position: absolute; inset: 0; z-index: 1; }
.at-coleccion-tarjeta__interior { display: flex; flex-direction: column; gap: 8px; }
.at-coleccion-tarjeta__foto { position: relative; aspect-ratio: 1; overflow: hidden; }
.at-coleccion-tarjeta__imagen { display: block; width: 100%; height: 100%; object-fit: cover; }
.at-coleccion-tarjeta__texto { width: fit-content; }
.at-coleccion-tarjeta__texto p { margin: 0; text-wrap: pretty; }

/* Búsqueda sin resultados: el aviso debajo del campo y «Productos» con los de la tienda. */
.at-busqueda-titulo__sin-resultados p { margin: 16px 0 0; color: rgb(0 0 0 / .8); }
.at-resultados__vacio { margin-bottom: 16px; }
.at-resultados__titulo { margin: 0; font-family: var(--at-fuente-titulo); font-weight: var(--at-fuente-titulo-peso); font-size: 24px; line-height: 1; }