/* =====================================================================
   PANTALLA · Web pública · CATÁLOGO → POR TIPO DE EVENTO
   Qué hace:    la PORTADA CORTA de las páginas públicas (foto con velo,
                título, bajada, el botón para volver o uno principal, y la
                onda; o sobria, oscura y sin onda, en En memoria y sus
                guías) y la entrada del catálogo (/catalogo/): los tipos de
                evento agrupados (Celebraciones, Graduaciones, Religiosos,
                En memoria), cada uno en una tarjeta con su foto, su nombre
                como botón y cuántos diseños tiene (o «Muy pronto»). Solo
                tokens del sistema (§4).
   Quién la usa: catalogo/, en-memoria/, diseno/, guias/ y 404.html
   Depende de:  tokens.css, base.css, web-marco.css
   Requisitos:  R-WEB-01, 06, 14
   ===================================================================== */

/* ---------- Portada corta: foto con un velo del color del fondo y una onda abajo ---------- */
.web-catalogo__portada {
  position: relative;
  display: grid;
  align-content: center;
  min-height: 18rem;
  padding: var(--espacio-7) var(--espacio-4) var(--espacio-8);
  overflow: hidden;
  isolation: isolate;
  text-align: center;
}

.web-catalogo__portada-foto {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.web-catalogo__portada::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: color-mix(in srgb, var(--color-fondo) 72%, transparent);
}

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

.web-catalogo__bajada {
  max-width: 34rem;
  margin: var(--espacio-3) auto 0;
  color: var(--color-texto-suave);
  font-size: var(--tamano-m);
}

/* Una página que es solo la portada (no encontrada): ocupa el alto libre, con el pie abajo */
.web-catalogo__pagina {
  display: grid;
  flex: 1;
}

/* ---------- El botón para volver (arriba del título) ---------- */
.web-catalogo__volver {
  margin: 0 0 var(--espacio-3);
}

.web-catalogo__volver-enlace {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  gap: var(--espacio-1);
  padding-inline: var(--espacio-3);
  border-radius: var(--radio-redondo);
  background: var(--color-superficie);
  box-shadow: var(--sombra-baja);
  color: var(--color-texto);
  font-size: var(--tamano-suave);
  text-decoration: none;
}

.web-catalogo__boton {
  margin: var(--espacio-5) 0 0;
}

.web-catalogo__onda {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  width: 100%;
  max-width: none;
  height: 3rem;
  fill: var(--color-fondo);
}

/* La portada sobria (En memoria): velo oscuro de la franja sobria, sin onda */
.web-catalogo__portada--sobria {
  padding-bottom: var(--espacio-7);
}

.web-catalogo__portada--sobria::after {
  background: color-mix(in srgb, var(--color-banda-sobria-fondo) 85%, transparent);
}

.web-catalogo__portada--sobria .web-catalogo__titulo {
  color: var(--color-banda-sobria-texto);
}

.web-catalogo__portada--sobria .web-catalogo__bajada {
  color: var(--color-banda-sobria-suave);
}

/* ---------- Los grupos y sus tarjetas ---------- */
.web-catalogo__grupo {
  padding-block: var(--espacio-5) var(--espacio-6);
}

.web-catalogo__grupo-titulo {
  margin: 0 0 var(--espacio-4);
  font-size: var(--tamano-xl);
  font-weight: 400;
  text-align: center;
}

.web-catalogo__tipos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));   /* en el celular, siempre dos por fila */
  gap: var(--espacio-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* La tarjeta: la foto llena; el nombre va como un BOTÓN con fondo propio (siempre legible, sobre
   cualquier foto) y la cantidad como una etiqueta arriba. Toda la tarjeta es el enlace */
.web-catalogo__tipo {
  position: relative;
  display: grid;
  align-content: end;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radio-tarjeta);
  background: var(--color-superficie-resaltada);
  box-shadow: var(--sombra-baja);
  color: var(--color-texto);
  text-decoration: none;
}

.web-catalogo__tipo-foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duracion-media) var(--curva-salida);
}

.web-catalogo__tipo:hover .web-catalogo__tipo-foto {
  transform: scale(1.04);
}

.web-catalogo__tipo-texto {
  position: relative;
  display: grid;
  padding: var(--espacio-3);
}

/* El nombre, como un botón: fondo de tarjeta, sombra y una flecha; al pasar el mouse se levanta */
.web-catalogo__tipo-nombre {
  display: flex;
  min-height: 2.75rem;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-2);
  padding: var(--espacio-2) var(--espacio-3);
  border-radius: var(--radio-control);
  background: var(--color-superficie);
  box-shadow: var(--sombra-media);
  font-family: var(--letra-titulo);
  font-size: var(--tamano-suave);
  font-weight: 500;
  line-height: var(--interlineado-titulo);
  transition: transform var(--duracion-media) var(--curva-salida);
}

.web-catalogo__tipo-nombre .icono {
  flex: none;
  color: var(--color-acento);
}

.web-catalogo__tipo:hover .web-catalogo__tipo-nombre {
  transform: translateY(-2px);
}

/* La cantidad, arriba a la izquierda, como etiqueta con fondo */
.web-catalogo__tipo-cantidad {
  position: absolute;
  top: var(--espacio-2);
  left: var(--espacio-2);
  padding: var(--espacio-1) var(--espacio-2);
  border-radius: var(--radio-chico);
  background: color-mix(in srgb, var(--color-superficie) 90%, transparent);
  color: var(--color-texto-suave);
  font-size: var(--tamano-chico);
}

@media (min-width: 48rem) {
  .web-catalogo__tipos {
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
    gap: var(--espacio-4);
  }
}