/* =========================================================
   RESEÑA HISTÓRICA
   Depende de lo que ya existe en tu CSS principal:
   .content-panel, .eyebrow, .section-title, .divider-rule
   y las variables --ink, --crest-red, --brass, --steel-2,
   --line, --radius, --shadow-card-sm, --font-display,
   --font-serif, --font-ui. No se redefine nada de eso aquí.
   ========================================================= */
/* =========================================================
   RESEÑA HISTÓRICA BCBP
   Estilo limpio institucional
   ========================================================= */


.resena-texto {

    max-width: 950px;

    margin: 0 auto;

}


/* párrafos */


.resena-texto p {

    font-family: var(--font-serif);

    font-size: 1.08rem;

    line-height: 1.95;

    color: #4a4a4a;

    text-align: justify;

    margin: 0 0 2rem;

}



/* primer párrafo destacado */


.resena-texto p:first-child {

    font-size: 1.18rem;

    color: var(--ink);

    font-weight: 500;

    padding: 1.5rem 2rem;

    background: #fafafa;

    border-left: 4px solid var(--crest-red);

    border-radius: 4px;

}



/* palabras importantes */


.resena-texto strong {

    color: var(--crest-red);

    font-weight: 700;

}



/* separación visual entre bloques */


.resena-texto p:not(:first-child) {

    padding-left: .5rem;

}



/* animación ligera */


.resena-texto p {

    transition: transform .25s ease;

}


.resena-texto p:hover {

    transform: translateX(3px);

}



/* responsive */


@media(max-width:768px){


    .resena-texto p {

        font-size:1rem;

        line-height:1.75;

        text-align:left;

    }


    .resena-texto p:first-child {

        padding:1rem;

        font-size:1.05rem;

    }


}
.resena-texto p:last-child{ margin-bottom:0; }
.resena-texto p strong{ color: var(--ink); }

/* ---------- fotografías históricas ---------- */
.resena-foto{
    margin: 1.8rem auto;
    max-width: 560px;
}
.resena-foto img{
    width:100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: center;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-card-sm);
    display:block;
}
.resena-foto figcaption{
    font-family: var(--font-ui);
    font-size: .8rem;
    line-height:1.5;
    color: var(--steel-soft);
    font-style: italic;
    text-align:center;
    margin-top: .65rem;
    padding-top: .55rem;
    border-top: 2px solid var(--brass);
}

.resena-foto--lateral{
    max-width: 460px;
}

.resena-foto--centro{
    max-width: 620px;
    margin-top: 2.2rem;
}

@media (max-width: 768px){
    .resena-foto{ max-width:100%; }
}

/* =====================================================
   LINEA DE TIEMPO HISTORICA BCBP
===================================================== */


.resena-timeline {

    position:relative;

    max-width:1000px;

    margin:40px auto;

}


/* linea central */

.resena-timeline::before {

    content:"";

    position:absolute;

    left:25%;

    top:0;

    bottom:0;

    width:3px;

    background:#b00000;

    transform:translateX(-50%);

}




.timeline-item {


    display:grid;

    grid-template-columns:1fr 3fr;

    gap:50px;

    margin-bottom:50px;

    position:relative;


}




/* punto central */


.timeline-item::before {


    content:"";

    position:absolute;

    left:25%;

    top:25px;

    width:18px;

    height:18px;

    background:#b00000;

    border:4px solid #fff;

    border-radius:50%;

    transform:translateX(-50%);

    z-index:2;

    box-shadow:0 3px 10px rgba(0,0,0,.2);


}




/* fecha */


.timeline-fecha {


    text-align:right;

    padding:25px;

}



.timeline-fecha span {


    display:block;

    font-size:2rem;

    font-weight:800;

    color:#9b0000;


}



.timeline-fecha small {


    color:#777;

    text-transform:uppercase;

    letter-spacing:1px;

}




/* tarjetas */


.timeline-contenido {


    background:white;

    padding:30px;

    border-radius:16px;

    box-shadow:
            0 10px 25px rgba(0,0,0,.08);

    border-top:5px solid #b00000;


}



.timeline-contenido h3 {


    margin-top:0;

    color:#8b0000;

    font-size:1.3rem;


}



.timeline-contenido p {


    color:#555;

    line-height:1.8;

    text-align:justify;

}



.timeline-contenido strong {

    color:#a00000;

}





/* alternancia */

.timeline-item:nth-child(even)
.timeline-contenido {


    border-top-color:#c49a3a;

}




.timeline-item:nth-child(even)
.timeline-fecha span {


    color:#b18a35;

}





/* móvil */


@media(max-width:768px){


    .resena-timeline::before {

        left:20px;

    }


    .timeline-item {


        grid-template-columns:1fr;

        padding-left:60px;

    }



    .timeline-item::before {

        left:20px;

    }


    .timeline-fecha {


        text-align:left;

        padding:0;

    }



    .timeline-fecha span {

        font-size:1.7rem;

    }


}

.timeline-foto{
    margin:25px 0 0;
}

.timeline-foto img{
    width:100%;
    max-height:320px;
    object-fit:cover;
    border-radius:12px;
    box-shadow:0 8px 25px rgba(0,0,0,.12);
}

.timeline-foto figcaption{
    text-align:center;
    font-size:.85rem;
    font-style:italic;
    color:#777;
    margin-top:10px;
}