/* ── Componentes UI compartidos — index · revista · visor · nosotros ──
   Átomos reutilizables. El layout vive en estilos.css; los colores en tema.css.
   El grid de cada mosaico (nº de columnas, tile destacado) lo define cada
   página; aquí solo el "look" de las fotos. */

/* Contenedores */
.wrap {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 22px;
    width: 100%;
}

.narrow {
    max-width: 720px;
}

/* Eyebrow: etiqueta uppercase con líneas a los lados */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent);
    font-weight: 600;
    margin-bottom: 14px;
}

.eyebrow::before,
.eyebrow::after {
    content: "";
    width: 24px;
    height: 1px;
    background: var(--accent);
    opacity: 0.5;
}

/* Botones cápsula */
.btn {
    display: inline-block;
    text-decoration: none;
    padding: 13px 32px;
    border-radius: 999px;
    font-size: 16px;
    font-weight: 500;
    transition: transform 0.25s, background-color 0.25s, border-color 0.25s;
}

.btn-primary {
    background-color: var(--accent);
    color: var(--on-accent);
}

.btn-primary:hover {
    background-color: var(--accent-hover);
    transform: translateY(-2px);
}

.btn-ghost {
    border: 1px solid var(--border);
    color: var(--text);
    background: var(--control-bg);
}

.btn-ghost:hover {
    background: var(--control-bg-hover);
    transform: translateY(-2px);
}

/* Mosaico de fotos: look de las tiles (cada página define su grid) */
.mosaico-grid figure {
    position: relative;
    margin: 0;
    aspect-ratio: 3 / 4;
    border-radius: 12px;
    overflow: hidden;
    background: var(--surface-2);
}

.mosaico-grid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.mosaico-grid figure:hover img {
    transform: scale(1.05);
}

.mosaico-pie {
    text-align: center;
    font-size: 13.5px;
    color: var(--text-muted);
    margin-top: 18px;
    font-style: italic;
}

/* ── Badge de visualizaciones ("👁 N") ──
   Oculto (display:none → no reserva espacio) hasta que contador.php
   devuelve la cifra y se le añade .cargado. Evita un hueco bajo la
   fecha cuando aún no hay datos o el endpoint no responde. */
.vistas-badge {
    display: none;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    color: var(--text-muted);
}

.vistas-badge.cargado {
    display: inline-flex;
}

/* ── TEMPORAL: contador oculto (aún no se publica). El conteo sigue
   registrándose por detrás. Para mostrarlo de nuevo: borrar esta regla. ── */
.vistas-badge {
    display: none !important;
}

.vistas-ico {
    flex-shrink: 0;
    opacity: 0.85;
}

/* Separación cuando el badge va bajo la fecha de una tarjeta */
.ed-info .vistas-badge,
.edition-info .vistas-badge,
.destacada-txt .vistas-badge {
    margin-top: 7px;
}