/*
====================================================
DIRECTORIO CONES
Versión 1.0
====================================================
*/

:root{

    --dc-primary:#005A9C;
    --dc-primary-hover:#00457A;

    --dc-bg:#f4f7fb;

    --dc-card:#ffffff;

    --dc-text:#2b2b2b;

    --dc-muted:#6b7280;

    --dc-border:#e6e8ec;

    --dc-radius:14px;

    --dc-shadow:0 8px 24px rgba(0,0,0,.08);

    --dc-shadow-hover:0 18px 35px rgba(0,0,0,.16);

    --dc-transition:.25s;

}


/**************************************************/

.dc-wrapper{

    max-width:1400px;

    margin:auto;

    padding:20px;

}

/**************************************************/

.dc-header{

    text-align:center;

    margin-bottom:40px;

}

.dc-title{

    margin:0;

    font-size:38px;

    color:var(--dc-primary);

    font-weight:700;

}

.dc-count{

    margin:15px 0 30px;

    color:var(--dc-muted);

    font-size:17px;

}

/**************************************************/

.dc-search{

    width:100%;

    max-width:650px;

    padding:15px 20px;

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

    border-radius:50px;

    font-size:16px;

    transition:.25s;

    outline:none;

}

.dc-search:focus{

    border-color:var(--dc-primary);

    box-shadow:0 0 0 4px rgba(0,90,156,.15);

}

/**************************************************/

.dc-grid{

    display:grid;

    grid-template-columns:repeat(auto-fill,minmax(320px,1fr));

    gap:32px;

}

/**************************************************/

.dc-card{

    background:var(--dc-card);

    border-radius:var(--dc-radius);

    overflow:hidden;

    box-shadow:var(--dc-shadow);

    transition:var(--dc-transition);

    display:flex;

    flex-direction:column;

    height:100%;

}

.dc-card:hover{

    transform:translateY(-8px);

    box-shadow:var(--dc-shadow-hover);

}

/**************************************************/

.dc-card>a{

    display:block;

    overflow:hidden;

}

.dc-card img{

    width:100%;

    height:240px;

    object-fit:cover;

    transition:.35s;

}

.dc-card:hover img{

    transform:scale(1.05);

}

/**************************************************/

.dc-card-body{

    padding:22px;

    display:flex;

    flex-direction:column;

    flex:1;

}

/**************************************************/

.dc-card-body h3{

    margin:0 0 18px;

    font-size:22px;

    line-height:1.35;

    min-height:65px;

}

.dc-card-body h3 a{

    color:var(--dc-text);

    text-decoration:none;

}

.dc-card-body h3 a:hover{

    color:var(--dc-primary);

}

/**************************************************/

.dc-card-body p{

    color:var(--dc-muted);

    line-height:1.7;

    flex:1;

    margin:0 0 25px;

}

/**************************************************/

.dc-button{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    width:100%;

    padding:14px;

    border-radius:10px;

    text-decoration:none;

    background:var(--dc-primary);

    color:#fff;

    font-weight:600;

    transition:.25s;

}

.dc-button:hover{

    background:var(--dc-primary-hover);

    color:#fff;

}

/**************************************************/

.dc-pagination{

    margin-top:45px;

    text-align:center;

}

.dc-pagination .page-numbers{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    width:44px;

    height:44px;

    margin:4px;

    text-decoration:none;

    color:#555;

    background:#fff;

    border-radius:10px;

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

    transition:.25s;

}

.dc-pagination .page-numbers:hover{

    background:var(--dc-primary);

    color:#fff;

}

.dc-pagination .current{

    background:var(--dc-primary);

    color:#fff;

}

/**************************************************/

@media(max-width:1100px){

.dc-grid{

grid-template-columns:repeat(3,1fr);

}

}

@media(max-width:900px){

.dc-grid{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:600px){

.dc-grid{

grid-template-columns:1fr;

}

.dc-title{

font-size:28px;

}

.dc-card img{

height:220px;

}

.dc-wrapper{

padding:10px;

}

.dc-search{

font-size:15px;

padding:14px;

}

}

/**************************************************/

.dc-card,
.dc-button,
.dc-search,
.page-numbers{

transition:all .25s ease;

}

/**************************************************/

.dc-card-body p:empty{

display:none;

}

/**************************************************/

.dc-card img{

background:#eef2f7;

}

/**************************************************/

.dc-button:focus,
.dc-search:focus{

outline:none;

}

/**************************************************/

.dc-card:hover .dc-button{

letter-spacing:.3px;

}
.dc-empty{

    text-align:center;

    padding:60px 20px;

    border:2px dashed #d9d9d9;

    border-radius:12px;

    background:#fafafa;

    margin-top:30px;

}

.dc-empty h3{

    margin-bottom:10px;

    color:#444;

}

.dc-empty p{

    color:#777;

    margin:0;

}

.dc-loading{

    text-align:center;

    padding:40px;

    color:var(--dc-muted);

}


.dc-loader{

    width:40px;

    height:40px;

    border:4px solid #ddd;

    border-top-color:var(--dc-primary);

    border-radius:50%;

    margin:0 auto 15px;

    animation:dc-spin .8s linear infinite;

}


@keyframes dc-spin{

    from{

        transform:rotate(0deg);

    }


    to{

        transform:rotate(360deg);

    }

}