/* Guías: listado (/guias) y artículo (/guias/{slug}) */

/* Fecha y tiempo de lectura bajo el título */
.guia-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    color: rgba(255, 255, 255, .8);
}

/* Imagen destacada del artículo */
.guia-destacada {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1200 / 630;
    border-radius: 1rem;
    box-shadow: 0 .75rem 2rem rgba(var(--brand-azul-rgb), .15);
}

/* Tarjetas del listado y de "Seguí leyendo" */
.guia-card {
    border-radius: 1rem;
    overflow: hidden;
    background-color: #fff;
    box-shadow: 0 .25rem 1rem rgba(var(--brand-azul-rgb), .08);
    transition: transform .2s ease, box-shadow .2s ease;
}

.guia-card:hover,
.guia-card:focus-within {
    transform: translateY(-4px);
    box-shadow: 0 .75rem 2rem rgba(var(--brand-azul-rgb), .16);
}

.guia-card__img {
    width: 100%;
    height: auto;
    aspect-ratio: 1200 / 630;
    object-fit: cover;
    background-color: var(--brand-gris-claro);
}

.guia-card__meta {
    display: flex;
    align-items: center;
    gap: .75rem;
    color: var(--bs-secondary-color);
}

.guia-card__cat {
    padding: .15rem .6rem;
    border-radius: 50rem;
    font-weight: 600;
    font-size: .75rem;
    color: var(--brand-violeta);
    background-color: rgba(89, 38, 115, .1);
}

.guia-card__titulo a {
    color: var(--brand-azul);
    text-decoration: none;
}

.guia-card:hover .guia-card__titulo a { color: var(--brand-violeta); }

.guia-card__leer {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    color: var(--brand-rosa);
}

.guia-card__flecha {
    width: 1.25em;
    height: 1.25em;
    transform: rotate(-90deg);
    transition: transform .2s ease;
}

.guia-card:hover .guia-card__flecha { transform: rotate(-90deg) translateY(4px); }

/* Tablas dentro de los artículos */
.guia-tabla {
    border-radius: 1rem;
    overflow: hidden;
}

.guia-tabla th {
    color: #fff;
    background-color: var(--brand-azul);
    font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
    .guia-card,
    .guia-card__flecha { transition: none; }
    .guia-card:hover,
    .guia-card:focus-within { transform: none; }
}