:root {
    --rpmo-primary: #0f4c5c;
    --rpmo-primary-dark: #093743;
    --rpmo-accent: #8a5b20;
    --rpmo-text: #3b2a1c;
    --rpmo-muted: #70583f;
}

/* =========================================================
   REGISTRADORES / MEMORIA INSTITUCIONAL
   Carrusel 3D tipo túnel, inspirado directamente en la
   referencia: entra por un extremo, se acerca al centro,
   atraviesa el plano frontal y se pierde por el otro extremo.
   ========================================================= */
.registradores-page {
    width: 100%;
    min-height: 100vh;
}

.registradores-section {
    position: relative;
    width: 100%;
    min-height: 100vh;
    padding: 65px 24px 80px;
    overflow: hidden;
    background:
        radial-gradient(circle at 20% 10%, rgba(255,255,255,.72), transparent 32%),
        radial-gradient(circle at 80% 80%, rgba(171,137,82,.14), transparent 35%),
        linear-gradient(135deg, #f4f0e7 0%, #e9e1d2 48%, #f5f1e8 100%);
}

.registradores-section::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .28;
    background:
        radial-gradient(circle at 12% 30%, rgba(114,84,42,.12) 0 1px, transparent 2px),
        radial-gradient(circle at 76% 70%, rgba(114,84,42,.1) 0 1px, transparent 2px);
    background-size: 75px 75px, 90px 90px;
}

.registradores-header {
    position: relative;
    z-index: 10;
    max-width: 900px;
    margin: 0 auto 25px;
    text-align: center;
}

.registradores-header h1 {
    margin: 0 0 14px;
    color: var(--rpmo-primary-dark);
    font-family: "Courier New", Courier, monospace;
    font-size: clamp(30px, 4vw, 48px);
    font-weight: 700;
    letter-spacing: .5px;
}

.registradores-header p {
    max-width: 720px;
    margin: 0 auto;
    color: var(--rpmo-muted);
    font-family: "Courier New", Courier, monospace;
    font-size: 17px;
    line-height: 1.7;
}

.registradores-carousel {
    position: relative;
    z-index: 2;
    width: min(1500px, 100%);
    margin: 0 auto;
}

.registradores-viewport {
    position: relative;
    width: 100%;
    height: 500px;
    overflow: hidden;
    cursor: grab;
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
    perspective: 1450px;
    perspective-origin: 50% 49%;
    isolation: isolate;
}

/* Sombra profunda del túnel */
.registradores-viewport::before {
    content: "";
    position: absolute;
    z-index: 0;
    left: 50%;
    top: 54%;
    width: min(1250px, 96vw);
    height: 245px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background:
        radial-gradient(ellipse at center,
            rgba(48,31,14,.24) 0%,
            rgba(48,31,14,.13) 35%,
            rgba(48,31,14,.045) 58%,
            transparent 74%);
    filter: blur(17px);
    pointer-events: none;
}

/* Línea de profundidad sutil */
.registradores-viewport::after {
    content: "";
    position: absolute;
    z-index: 0;
    left: 50%;
    top: 53%;
    width: min(1050px, 88vw);
    height: 1px;
    transform: translate(-50%, -50%);
    background: linear-gradient(90deg, transparent, rgba(89,60,29,.14), transparent);
    pointer-events: none;
}

.registradores-viewport.is-dragging {
    cursor: grabbing;
}

.registradores-scene {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    transform-style: preserve-3d;
    pointer-events: none;
}

.registradores-grid {
    position: absolute;
    left: 50%;
    top: 51%;
    width: 1px !important;
    height: 1px !important;
    transform-style: preserve-3d;
    transform: translate3d(-50%, -50%, 0);
    will-change: transform;
}

.registrador-scroll {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: var(--card-width) !important;
    height: var(--card-height) !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    display: block;
    box-sizing: border-box;
    border: 1px solid rgba(108,76,35,.38);
    border-radius: 5px;
    background-image:
        linear-gradient(rgba(255,255,255,.05), rgba(75,44,15,.08)),
        url("../img/registradores/libro.jpeg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    pointer-events: auto;
    transform-origin: center center;
    box-shadow:
        0 15px 25px rgba(48,32,15,.23),
        inset 0 0 0 1px rgba(255,255,255,.26);
    transition: filter .28s ease, box-shadow .28s ease, opacity .28s ease;
}

.registrador-scroll::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(110deg, rgba(255,255,255,.24), transparent 28%, transparent 70%, rgba(44,25,8,.17));
    opacity: .65;
}

.registrador-scroll::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 46%;
    pointer-events: none;
    background: linear-gradient(to top, rgba(42,25,10,.40), transparent);
}

.registrador-scroll-content {
    position: absolute;
    z-index: 2;
    inset: 14% 12% 13%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #3d2b1b;
    font-family: "Courier New", Courier, monospace;
    transform: translateZ(2px);
}

.registrador-label,
.registrador-period-label {
    margin: 0;
    color: #574027;
    font-size: clamp(8px, .8vw, 10px);
    font-weight: 700;
    letter-spacing: 1.4px;
}

.registrador-scroll h2 {
    width: 100%;
    margin: 10px 0 18px;
    color: #302113;
    font-family: "Courier New", Courier, monospace;
    font-size: clamp(13px, 1.2vw, 17px);
    font-weight: 700;
    line-height: 1.25;
    overflow-wrap: anywhere;
    text-shadow: 0 1px rgba(255,255,255,.3);
}

.registrador-period-label { margin-bottom: 5px; }

.registrador-periodo {
    margin: 0;
    color: #3b2a1c;
    font-family: "Courier New", Courier, monospace;
    font-size: clamp(11px, 1vw, 14px);
    font-weight: 700;
    letter-spacing: 1px;
}

/* El elemento que está justo en el plano frontal */
.registrador-scroll.is-front {
    box-shadow:
        0 24px 42px rgba(35,24,12,.34),
        0 0 30px rgba(199,154,59,.16),
        inset 0 0 0 1px rgba(255,255,255,.45);
    filter: brightness(1.06) saturate(1.04) !important;
}

.registradores-indicadores {
    display: none !important;
}

@media (max-width: 900px) {
    .registradores-section {
        padding: 55px 14px 70px;
    }

    .registradores-viewport {
        height: 440px;
        perspective: 1100px;
    }
}

@media (max-width: 620px) {
    .registradores-section {
        padding: 45px 8px 60px;
    }

    .registradores-header {
        margin-bottom: 10px;
    }

    .registradores-header h1 {
        font-size: 29px;
    }

    .registradores-header p {
        font-size: 13px;
    }

    .registradores-viewport {
        height: 380px;
        perspective: 900px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .registrador-scroll {
        transition: none;
    }
}