/*=========================================================
AUTHOR.CSS
DIOREN VIAE
=========================================================*/

/*==============================
FUENTES Y VARIABLES
===============================*/

:root{

    --primary:#0F2747;
    --primary-light:#21497b;

    --gold:#C8A96A;

    --text:#1b1b1b;

    --text-light:#666;

    --background:#ffffff;

    --gray:#f5f5ff;

    --border:#e5e7eb;

    --radius:16px;

    --transition:.35s ease;

    --shadow:
    0 15px 40px rgba(0,0,0,.06);

}

/*==============================
RESET
===============================*/

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:'Inter',sans-serif;

    background:#d4d4ff;

    color:var(--text);

    line-height:1.8;

}

img{

    display:block;

    width:100%;

}

a{

    text-decoration:none;

    color:inherit;

}

.container{

    width:min(1180px,92%);

    margin:auto;

}

/*==============================
BANNER
===============================*/

.author-banner{

    background:linear-gradient(
        90deg,
        #0F2747,
        #183b69
    );

    color:#fff;

    padding:18px 0;

    letter-spacing:6px;

    text-transform:uppercase;

    font-size:14px;

    font-weight:700;

}

.author-banner span{

    display:block;

}

/*==============================
PERFIL
===============================*/

.author-profile{

    padding:90px 0;
    

}

.profile-grid{

    display:grid;

    grid-template-columns:

    320px
    1fr;

    gap:70px;

    align-items:flex-start;

}

/*==============================
FOTO
===============================*/

.author-photo{

    display:flex;

    justify-content:center;

}

.author-photo img{

    width:260px;

    height:260px;

    border-radius:50%;

    object-fit:cover;

    border:8px solid white;

    box-shadow:var(--shadow);

    transition:var(--transition);

}

.author-photo img:hover{

    transform:scale(1.03);

}

/*==============================
CONTENIDO
===============================*/

.author-content h1{

    font-family:'Playfair Display',serif;

    font-size:56px;

    font-weight:700;

    line-height:1.1;

    color:#111;

}

.author-content h2{

    margin-top:14px;

    color:var(--primary);

    font-weight:600;

    font-size:20px;

}

.divider{

    width:90px;

    height:4px;

    background:var(--gold);

    border-radius:50px;

    margin:35px 0;

}

/*==============================
BLOQUES
===============================*/

.author-block{

    margin-bottom:42px;

}

.author-block h3{

    font-family:'Playfair Display',serif;

    font-size:28px;

    margin-bottom:18px;

    color:#111;

}

.author-block p{

    color:var(--text-light);

    font-size:17px;

    text-align:justify;

}

/*==============================
ESPECIALIDADES
===============================*/

.skills{

    display:flex;

    flex-wrap:wrap;

    gap:14px;

}

.skills span{

    background:var(--gray);

    border:1px solid var(--border);

    color:#222;

    padding:

    11px
    20px;

    border-radius:50px;

    font-size:15px;

    transition:var(--transition);

}

.skills span:hover{

    background:var(--primary);

    color:white;

    border-color:var(--primary);

}

/*==============================
REDES
===============================*/

.social{

    display:flex;

    gap:18px;

    margin-top:25px;

}

.social a{

    width:54px;

    height:54px;

    border-radius:50%;

    background:white;

    border:1px solid var(--border);

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:22px;

    color:var(--primary);

    transition:var(--transition);

    box-shadow:

    0 8px 25px rgba(0,0,0,.05);

}

.social a:hover{

    background:var(--primary);

    color:white;

    transform:translateY(-5px);

}

/*==============================
SECCIÓN ARTÍCULOS
===============================*/

.articles{

    padding:

    20px
    0
    100px;

}

.section-title{

    text-align:center;

    margin-bottom:70px;

}

.section-title h2{

    font-family:'Playfair Display',serif;

    font-size:42px;

    margin-bottom:12px;

}

.section-title p{

    color:#666;

    max-width:700px;

    margin:auto;

    font-size:17px;

}

/*=========================================================
ARTÍCULOS
=========================================================*/

#articles-container{

    display:flex;

    flex-direction:column;

    gap:35px;

}

/*==============================
TARJETA
===============================*/

.article-card{

    display:grid;

    grid-template-columns:280px 1fr;

    background:#fff;

    border:1px solid var(--border);

    border-radius:18px;

    overflow:hidden;

    box-shadow:0 12px 35px rgba(0,0,0,.05);

    transition:var(--transition);

}

.article-card:hover{

    transform:translateY(-6px);

    box-shadow:0 20px 45px rgba(0,0,0,.08);

}

/*==============================
IMAGEN
===============================*/

.article-image{

    overflow:hidden;

    background:#f5f5f5;

}

.article-image img{

    width:100%;

    height:100%;

    min-height:240px;

    object-fit:cover;

    transition:.6s;

}

.article-card:hover .article-image img{

    transform:scale(1.08);

}

/*==============================
CONTENIDO
===============================*/

.article-info{

    padding:35px;

    display:flex;

    flex-direction:column;

    justify-content:center;

}

.category{

    display:inline-block;

    width:max-content;

    background:#eef4ff;

    color:var(--primary);

    border:1px solid rgba(15,39,71,.15);

    padding:7px 14px;

    border-radius:50px;

    font-size:13px;

    font-weight:600;

    text-transform:uppercase;

    letter-spacing:1px;

    margin-bottom:18px;

}

.article-info h3{

    margin-bottom:15px;

    font-family:'Playfair Display',serif;

    font-size:32px;

    line-height:1.25;

}

.article-info h3 a{

    transition:.3s;

}

.article-info h3 a:hover{

    color:var(--primary);

}

.article-info p{

    color:#666;

    font-size:16px;

    margin-bottom:28px;

}

/*==============================
META
===============================*/

.article-meta{

    display:flex;

    justify-content:space-between;

    align-items:center;

    flex-wrap:wrap;

    gap:15px;

    padding-top:22px;

    border-top:1px solid var(--border);

}

.article-meta span{

    color:#777;

    font-size:15px;

}

.article-meta span i{

    margin-right:8px;

    color:var(--gold);

}

.article-meta a{

    color:var(--primary);

    font-weight:600;

    transition:.3s;

}

.article-meta a i{

    margin-left:8px;

    transition:.3s;

}

.article-meta a:hover{

    color:var(--gold);

}

.article-meta a:hover i{

    transform:translateX(6px);

}

/*=========================================================
PAGINACIÓN
=========================================================*/

.pagination{

    display:flex;

    justify-content:center;

    align-items:center;

    flex-wrap:wrap;

    gap:12px;

    margin-top:70px;

}

.page-btn,

.page-number{

    width:48px;

    height:48px;

    border:none;

    border-radius:50%;

    background:#fff;

    border:1px solid var(--border);

    cursor:pointer;

    transition:.3s;

    font-size:15px;

    font-weight:600;

}

.page-number:hover,

.page-btn:hover{

    background:var(--primary);

    color:#fff;

    border-color:var(--primary);

}

.page-number.active{

    background:var(--primary);

    color:#fff;

    border-color:var(--primary);

}

/*=========================================================
FOOTER
=========================================================*/

.author-footer{

    margin-top:100px;

    background:#111827;

    color:#fff;

    padding:35px 0;

    text-align:center;

}

.author-footer p{

    color:#d1d5db;

    font-size:15px;

    letter-spacing:.5px;

}

/*=========================================================
ANIMACIONES
=========================================================*/

.author-profile,

.articles{

    animation:fadeUp .8s ease;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(30px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*=========================================================
SCROLLBAR
=========================================================*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#f3f4f6;

}

::-webkit-scrollbar-thumb{

    background:var(--primary);

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--gold);

}

/*=========================================================
RESPONSIVE
=========================================================*/

@media(max-width:1100px){

.profile-grid{

grid-template-columns:260px 1fr;

gap:50px;

}

.author-content h1{

font-size:46px;

}

.article-card{

grid-template-columns:240px 1fr;

}

.article-info h3{

font-size:28px;

}

}

@media(max-width:900px){

.profile-grid{

grid-template-columns:1fr;

text-align:center;

}

.author-photo{

margin-bottom:20px;

}

.divider{

margin:30px auto;

}

.skills{

justify-content:center;

}

.social{

justify-content:center;

}

.article-card{

grid-template-columns:1fr;

}

.article-image img{

height:260px;

}

.article-info{

padding:28px;

}

.article-meta{

flex-direction:column;

align-items:flex-start;

}

}

@media(max-width:600px){

.author-banner{

font-size:12px;

letter-spacing:4px;

}

.author-profile{

padding:60px 0;

}

.author-photo img{

width:200px;

height:200px;

}

.author-content h1{

font-size:38px;

}

.author-content h2{

font-size:18px;

}

.author-block h3{

font-size:24px;

}

.article-info h3{

font-size:24px;

}

.section-title h2{

font-size:34px;

}

.section-title p{

font-size:16px;

}

.pagination{

gap:8px;

}

.page-number,

.page-btn{

width:42px;

height:42px;

font-size:14px;

}

}