/* =====================================================================
   PANTALLA · Web pública · CATÁLOGO → LA PÁGINA DE UN TIPO
   Qué hace:    /catalogo/<tipo>: el filtro por estilo (botones redondos), los
                diseños dentro de un celular con sus dos botones, el bloque
                «Muy pronto» y los otros tipos del mismo grupo. Solo tokens
                del sistema (§4).
   Quién la usa: catalogo/index.html (pantallas/web/catalogo-tipo.js)
   Depende de:  tokens.css, componentes/telefono.css, web-catalogo-tipos.css
   Requisitos:  R-WEB-01, 02, 06, 14
   ===================================================================== */

/* ---------- Botones redondos: estilos y otros tipos ---------- */
.web-catalogo__estilos,
.web-catalogo__hermanos-lista {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--espacio-2);
  margin: 0;
}

.web-catalogo__estilos {
  padding-top: var(--espacio-5);
}

.web-catalogo__chip {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  padding-inline: var(--espacio-4);
  border: 1px solid var(--color-borde-campo);
  border-radius: var(--radio-redondo);
  background: var(--color-superficie);
  color: var(--color-texto);
  text-decoration: none;
}

.web-catalogo__chip:hover {
  border-color: var(--color-acento);
}

.web-catalogo__chip[aria-current="page"] {
  border-color: var(--color-boton-principal);
  background: var(--color-boton-principal);
  color: var(--color-boton-principal-texto);
}

/* ---------- Los diseños: cada uno dentro de un celular ---------- */
.web-catalogo__disenos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));   /* en el celular, dos por fila */
  gap: var(--espacio-6) var(--espacio-3);
  margin: 0;
  padding: var(--espacio-6) 0;
  list-style: none;
}

.web-catalogo__diseno {
  display: grid;
  justify-items: center;
  gap: var(--espacio-2);
  text-align: center;
}

.web-catalogo__diseno-celular {
  display: block;
  width: min(13rem, 100%);
  transition: transform var(--duracion-media) var(--curva-salida);
}

.web-catalogo__diseno:hover .web-catalogo__diseno-celular {
  transform: translateY(-4px);
}

.web-catalogo__diseno-pantalla {
  object-fit: cover;
  object-position: top;
}

.web-catalogo__diseno-nombre {
  margin: var(--espacio-2) 0 0;
  font-size: var(--tamano-l);
  font-weight: 400;
}

.web-catalogo__diseno-estilos {
  margin: 0;
  color: var(--color-texto-suave);
  font-size: var(--tamano-suave);
}

.web-catalogo__diseno-botones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--espacio-2);
  margin: 0;
}

.web-catalogo__diseno-botones .boton {
  min-height: 2.75rem;   /* cómodo para el dedo */
}

/* ---------- Muy pronto (el tipo todavía no tiene diseños) ---------- */
.web-catalogo__pronto {
  max-width: 32rem;
  margin: 0 auto;
  padding-block: var(--espacio-6) var(--espacio-7);
  text-align: center;
}

.web-catalogo__pronto-titulo {
  margin: 0;
  font-size: var(--tamano-xl);
  font-weight: 400;
}

.web-catalogo__pronto-texto {
  margin: var(--espacio-3) 0 var(--espacio-5);
  color: var(--color-texto-suave);
}

/* ---------- Otros tipos del mismo grupo ---------- */
.web-catalogo__hermanos {
  padding-block: var(--espacio-6) var(--espacio-7);
  border-top: 1px solid var(--color-borde);
  text-align: center;
}

.web-catalogo__hermanos-titulo {
  margin: 0 0 var(--espacio-4);
  font-size: var(--tamano-l);
  font-weight: 400;
}

@media (min-width: 48rem) {
  .web-catalogo__disenos {
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  }
}