/*
 * categoria-otras.css — Decibelio
 * Tema hijo: blocksy-child
 * Depende de: variables.css (db-variables)
 * Carga: SOLO en páginas de categoría — condicional en functions.php
 *
 * HTML inyectado vía blocksy:content:bottom (db_categoria_otras).
 * Bloque "Otras categorías": fondo gris claro, cabecera + fila de 4 tarjetas.
 *
 * REGLAS:
 * - Sin !important nunca
 * - Sin hardcode de colores — solo var(--color-*)
 * - Sin hardcode de fuentes — solo var(--font-*)
 * - Especificidad por selectores encadenados desde .db-cat-otras
 */

/* ============================================================
   SECCIÓN — WRAPPER (fondo gris claro)
   ============================================================ */
.db-cat-otras {
    padding: var(--espaciado-seccion) var(--padding-contenedor);
    background-color: var(--color-gris-fondo);
}

/* ============================================================
   CONTENEDOR
   ============================================================ */
.db-cat-otras .db-cat-otras__inner {
    max-width: var(--ancho-contenedor);
    margin-inline: auto;
}

/* ============================================================
   CABECERA — título (no encabezado, por el CSV) + subtítulo
   ============================================================ */
.db-cat-otras .db-cat-otras__cabecera {
    text-align: center;
    margin-bottom: 2.5rem;
}

.db-cat-otras .db-cat-otras__titulo {
    font-family: var(--font-titulos);
    font-size: clamp(1.4rem, 2.8vw, 2rem);
    font-weight: var(--peso-extrabold);
    color: var(--color-gris-texto);
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin: 0 0 0.5rem;
}

.db-cat-otras .db-cat-otras__subtitulo {
    font-family: var(--font-cuerpo);
    font-size: 1rem;
    font-weight: var(--peso-normal);
    color: var(--color-gris-medio);
    line-height: 1.6;
    margin: 0;
}

/* ============================================================
   GRID — 4 columnas
   ============================================================ */
.db-cat-otras .db-cat-otras__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* ============================================================
   TARJETA — icono + nombre + flecha · enlace estirado
   El nombre es el único enlace (anchor text limpio); su ::after
   cubre toda la tarjeta para que sea clicable por completo.
   ============================================================ */
.db-cat-otras .db-cat-otras__tarjeta {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    height: 100%;
    padding: 1.1rem 1.25rem;
    background-color: var(--color-blanco);
    border: 1px solid color-mix(in srgb, var(--color-verde-oscuro) 10%, transparent);
    border-radius: var(--radio-tarjeta);
    box-shadow: var(--sombra-tarjeta-suave);
    outline: 2px solid transparent;
    outline-offset: 2px;
    transform: translateZ(0); /* capa de composición estable: evita los shadow-trails al hacer scroll en móvil */
    transition: transform var(--transicion-normal), box-shadow var(--transicion-normal), outline-color var(--transicion-normal);
}

/* Icono — ilustración SVG de marca (assets/img/{slug}.svg), con color propio.
   object-fit: contain respeta su proporción (no cuadrada) dentro de la caja. */
.db-cat-otras .db-cat-otras__icono {
    flex-shrink: 0;
    display: inline-flex;
}

.db-cat-otras .db-cat-otras__icono img {
    width: 26px;
    height: 26px;
    object-fit: contain;
}

/* Nombre = enlace (anchor text limpio) */
.db-cat-otras .db-cat-otras__nombre {
    font-family: var(--font-titulos);
    font-size: 1rem;
    font-weight: var(--peso-semibold);
    color: var(--color-gris-texto);
    text-decoration: none;
    line-height: 1.2;
}

.db-cat-otras .db-cat-otras__nombre::after {
    content: '';
    position: absolute;
    inset: 0;
}

/* Flecha decorativa — a la derecha, mismo grosor que la flecha de la Home */
.db-cat-otras .db-cat-otras__flecha {
    margin-left: auto;
    font-family: var(--font-cuerpo);
    font-size: var(--texto-grande);
    font-weight: var(--peso-bold);
    color: var(--color-verde-oscuro);
    line-height: 1;
}

/* ============================================================
   HOVER — solo con puntero real (en táctil el :hover se queda
   pegado y el transform/box-shadow deja artefactos de repintado)
   ============================================================ */
@media (hover: hover) {
    .db-cat-otras .db-cat-otras__tarjeta:hover {
        transform: translateY(-3px);
        box-shadow: var(--sombra-tarjeta-hover);
        outline-color: var(--color-verde);
    }

    .db-cat-otras .db-cat-otras__tarjeta:hover .db-cat-otras__nombre {
        color: var(--color-verde-oscuro);
    }
}

/* Pulsación táctil — aro verde al tocar (fuera del @media hover para que funcione en táctil) */
.db-cat-otras .db-cat-otras__tarjeta:active {
    outline-color: var(--color-verde);
}

/* Foco por teclado — el enlace real es .db-cat-otras__nombre (su ::after estira el
   área clicable sobre toda la tarjeta), así que el foco va al <a>, no al <div>.
   Con :has() llevamos el mismo aro verde a la tarjeta cuando el enlace recibe foco
   de teclado; :focus-visible lo distingue del clic con ratón (WCAG 2.4.7). */
.db-cat-otras .db-cat-otras__tarjeta:has(.db-cat-otras__nombre:focus-visible) {
    outline-color: var(--color-verde);
}

/* ============================================================
   RESPONSIVE — ESCRITORIO (menos aire vertical)
   En PC el grid es de una sola fila (4 columnas), así que el bloque
   no necesita el espaciado de sección completo. Por debajo de 1025px
   pasa a 2 columnas y recupera el aire estándar del token.
   ============================================================ */
@media (min-width: 1025px) {
    .db-cat-otras {
        padding-block: 4rem;
    }
}

/* ============================================================
   RESPONSIVE — TABLET (2 columnas)
   ============================================================ */
@media (max-width: 1024px) {
    .db-cat-otras .db-cat-otras__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================================================
   RESPONSIVE — MÓVIL (1 columna)
   ============================================================ */
@media (max-width: 600px) {
    .db-cat-otras .db-cat-otras__grid {
        grid-template-columns: 1fr;
    }

    /* En móvil (1 columna, fichas anchas) la flecha en bold se ve más gruesa que
       el icono; la afinamos para equilibrar el peso visual como en PC/tablet. */
    .db-cat-otras .db-cat-otras__flecha {
        font-weight: var(--peso-normal);
    }
}

/* ============================================================
   ACCESIBILIDAD — REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .db-cat-otras .db-cat-otras__tarjeta {
        transition: none;
    }

    .db-cat-otras .db-cat-otras__tarjeta:hover {
        transform: none;
    }
}