/* ══════════════════════════════════════
   Carrusel de Revistas — carousel.css v2.0
   ══════════════════════════════════════ */

.rc-section {
    margin: 2.5rem 0;
    font-family: Georgia, 'Times New Roman', serif;
}
.rc-heading {
    font-size: clamp(1.3rem, 3vw, 1.9rem);
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 1.2rem;
    letter-spacing: -0.02em;
}
.rc-empty { color: #888; font-style: italic; }

.rc-wrap    { position: relative; padding: 0 48px; }
.rc-outer   { overflow: hidden; }
.rc-track   { display: flex; gap: 20px; transition: transform .45s cubic-bezier(.4,0,.2,1); padding: 16px 4px 24px; will-change: transform; }

/* ── Tarjeta ── */
.rc-card { flex: 0 0 180px; width: 180px; text-decoration: none; color: inherit; display: block; }

.rc-cover {
    position: relative; width: 180px; height: 254px;
    border-radius: 3px 8px 8px 3px; overflow: hidden; background: #2c2c2c;
    transition: transform .32s cubic-bezier(.34,1.56,.64,1), box-shadow .32s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,.10), 0 8px 24px rgba(0,0,0,.18), 4px 4px 0 0 #e8d5a3;
    transform-origin: center bottom;
}
.rc-cover::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 13px;
    background: linear-gradient(to right, rgba(0,0,0,.38), rgba(0,0,0,.07) 60%, transparent);
    z-index: 2; pointer-events: none;
}
.rc-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

.rc-card:hover .rc-cover {
    transform: scale(1.09) translateY(-9px);
    box-shadow: 0 6px 16px rgba(0,0,0,.14), 0 24px 56px rgba(0,0,0,.30), 5px 5px 0 0 #c8a96e;
    z-index: 5;
}
.rc-card:hover .rc-shine    { opacity: 1; }
.rc-card:hover .rc-card-title { color: #8b5e1a; }

/* Badge de categoría */
.rc-badge {
    position: absolute; top: 10px; right: 10px; z-index: 4;
    background: rgba(0,0,0,.55); color: #fff;
    font-size: 9px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
    font-family: sans-serif; padding: 3px 7px; border-radius: 20px;
    backdrop-filter: blur(4px);
}

.rc-no-thumb {
    width: 100%; height: 100%;
    background: linear-gradient(145deg, #2a3a4a, #1a2530);
    display: flex; align-items: center; justify-content: center;
    padding: 16px; box-sizing: border-box;
}
.rc-no-thumb span { color: rgba(255,255,255,.85); font-size: 13px; font-weight: 600; text-align: center; line-height: 1.4; }

.rc-shine {
    position: absolute; inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.11) 50%, transparent 70%);
    opacity: 0; transition: opacity .3s; pointer-events: none; z-index: 3;
}

.rc-card-title {
    margin: 10px 0 3px; font-size: 12px; font-weight: 700; color: #1a1a1a;
    line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    transition: color .2s;
}
.rc-card-date { margin: 0; font-size: 11px; color: #888; font-style: italic; }

/* ── Flechas ── */
.rc-arrow {
    position: absolute; top: calc(254px / 2 - 19px + 16px);
    width: 38px; height: 38px; border-radius: 50%;
    border: 1.5px solid #d0c8b8; background: #fff;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    z-index: 10; padding: 0;
    transition: background .15s, transform .15s;
}
.rc-arrow:hover  { background: #f7f3ed; transform: scale(1.1); }
.rc-arrow:active { transform: scale(.95); }
.rc-arrow.rc-prev { left: 0; }
.rc-arrow.rc-next { right: 0; }
.rc-arrow svg { width: 17px; height: 17px; stroke: #555; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.rc-arrow:disabled { opacity: .22; cursor: default; transform: none !important; }

/* ── Dots ── */
.rc-dots { display: flex; gap: 7px; justify-content: center; margin-top: .65rem; }
.rc-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: #d5cfc4; border: none; padding: 0;
    cursor: pointer; transition: background .2s, transform .2s;
}
.rc-dot.active { background: #8b7355; transform: scale(1.4); }

/* ── Barra de progreso ── */
.rc-progress { height: 2px; background: #e8e0d4; border-radius: 2px; margin-top: 8px; overflow: hidden; }
.rc-bar      { height: 100%; width: 0%; background: #8b7355; border-radius: 2px; }

/* ── Responsive ── */
@media (max-width: 600px) {
    .rc-wrap { padding: 0 38px; }
    .rc-card { flex: 0 0 145px; width: 145px; }
    .rc-cover { width: 145px; height: 205px; }
    .rc-arrow { top: calc(205px / 2 - 17px + 16px); width: 32px; height: 32px; }
}


/* ══════════════════════════════════════
   Vista por año — [revistas_por_ano]
   ══════════════════════════════════════ */

.rpa-wrap { margin: 2rem 0; font-family: Georgia, serif; }

/* ── Barra de años ── */
.rpa-yearbar {
    display: flex;
    gap: 0;
    overflow-x: auto;
    border-bottom: 1.5px solid #e0d8cc;
    margin-bottom: 1.6rem;
    scrollbar-width: none;
    padding-bottom: 0;
}
.rpa-yearbar::-webkit-scrollbar { display: none; }

.rpa-year-btn {
    flex-shrink: 0;
    background: none;
    border: none;
    border-bottom: 2.5px solid transparent;
    margin-bottom: -1.5px;
    padding: 10px 16px 11px;
    font-size: 14px;
    font-weight: 500;
    color: #888;
    cursor: pointer;
    font-family: sans-serif;
    transition: color .18s, border-color .18s, font-size .18s;
    letter-spacing: .01em;
    white-space: nowrap;
}
.rpa-year-btn:hover  { color: #333; }
.rpa-year-btn.active {
    color: #1a1a1a;
    border-bottom-color: #1a1a1a;
    font-weight: 700;
    font-size: 16px;
}

/* ── Título del año ── */
.rpa-year-title {
    font-size: clamp(2rem, 6vw, 3.2rem);
    font-weight: 700;
    color: #1a1a1a;
    text-align: center;
    margin: 0 0 2rem;
    letter-spacing: -0.03em;
    font-family: Georgia, serif;
}

/* ── Grupos ── */
.rpa-group { display: none; }
.rpa-group.active { display: block; }

/* ── Grid de portadas ── */
.rpa-grid {
    display: grid;
    grid-template-columns: repeat(var(--rpa-cols, 4), 1fr);
    gap: 32px 24px;
}

/* ── Tarjeta ── */
.rpa-item {
    text-decoration: none;
    color: inherit;
    display: block;
}
.rpa-cover {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: #e8e0d0;
    border-radius: 2px 6px 6px 2px;
    box-shadow: 0 2px 6px rgba(0,0,0,.10), 0 6px 18px rgba(0,0,0,.12), 3px 3px 0 0 #e8d5a3;
    transition: transform .28s cubic-bezier(.34,1.56,.64,1), box-shadow .28s ease;
    transform-origin: center bottom;
}
/* Lomo */
.rpa-cover::before {
    content: '';
    position: absolute; left: 0; top: 0; bottom: 0; width: 10px;
    background: linear-gradient(to right, rgba(0,0,0,.28), rgba(0,0,0,.06) 60%, transparent);
    z-index: 2; pointer-events: none;
}
.rpa-cover img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    transition: transform .3s ease;
}
.rpa-item:hover .rpa-cover {
    transform: scale(1.04) translateY(-5px);
    box-shadow: 0 4px 12px rgba(0,0,0,.14), 0 16px 40px rgba(0,0,0,.22), 4px 4px 0 0 #c8a96e;
}
.rpa-item:hover .rpa-cover img { transform: scale(1.03); }
.rpa-item:hover .rpa-hover-overlay {
    position: absolute; inset: 0; z-index: 4;
    background: rgba(0,0,0,.25);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity .22s;
}
.rpa-item:hover .rpa-item-title { color: #8b5e1a; }

/* Overlay hover */
.rpa-hover-overlay {
    position: absolute; inset: 0; z-index: 4;
    background: rgba(0,0,0,.25);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity .22s;
}
.rpa-hover-overlay span {
    color: #fff;
    font-size: 28px;
    line-height: 1;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,.5));
}

/* Placeholder sin imagen */
.rpa-no-thumb {
    width: 100%; height: 100%;
    background: linear-gradient(145deg,#2a3a4a,#1a2530);
    display: flex; align-items: center; justify-content: center; padding: 16px;
}
.rpa-no-thumb span { color: rgba(255,255,255,.8); font-size: 13px; font-weight: 600; text-align: center; line-height: 1.4; }

/* Texto */
.rpa-item-title {
    margin: 10px 0 3px; font-size: 13px; font-weight: 700; color: #1a1a1a;
    line-height: 1.3; transition: color .2s;
}
.rpa-item-date { margin: 0; font-size: 12px; color: #888; font-style: italic; }

/* ── Responsive ── */
@media (max-width: 900px) {
    .rpa-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
    .rpa-grid { grid-template-columns: repeat(2, 1fr); gap: 20px 14px; }
    .rpa-year-btn { font-size: 13px; padding: 8px 12px; }
}