/*
Theme Name: Miradas Qro
Author: Jorge García
Version: 1.0
*/




*{
margin:0;
padding:0;
box-sizing:border-box;
}


::selection {
  color: #1a1a1a;
  background-color: #ffb901;
}

@font-face {
    font-family: 'Antiga';
    src: url('../fonts/Antiga-Regular.woff2') format('woff2'),
         url('../fonts/Antiga-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

h1, h2, h3, h4, h5, h6{
    font-family: 'Antiga', serif;
    color: #564071;
    letter-spacing: 2px;
}

h1{
    font-size: 60px !important;
}

h2{
    color: #564071;
    font-size: 40px !important;
}

h3{
    font-size: 30px !important;
}




body{
font-family: "DM Sans", sans-serif;
background:#f5f5f5;
color:#1a1a1a;
line-height:1.6;
}



img{
max-width:100%;
height:auto;
display:block;
margin: 0 auto;
}

a{
text-decoration:none;
color:inherit;
}

ul{
list-style:none;
}


.desktop{
    display: block;
}

.mobile{
    display: none;
}

.ver_mas{
    font-weight: bold;
    color:#564071;
}


.wrapper_gray{
    background-color: #222222;
}

.main-container{
max-width:1400px;
margin:auto;
padding:40px 20px;

}

.wrapper_gray h2{
    color: #8bc299 !important;
}





/*Inicia nav*/

/* ===== RESET BÁSICO NAV ===== */
.navbar {
    padding: 15px 0;
    border-bottom: 1px solid #7a5da3;
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 1000;
    background: linear-gradient(225deg, #564071, #6a4070, #7655a5);
    background-size: 600% 600%;

    -webkit-animation: fondoNav 19s ease infinite;
    -moz-animation: fondoNav 19s ease infinite;
    -o-animation: fondoNav 19s ease infinite;
    animation: fondoNav 19s ease infinite;
}



@-webkit-keyframes fondoNav {
    0%{background-position:0% 14%}
    50%{background-position:100% 87%}
    100%{background-position:0% 14%}
}
@-moz-keyframes fondoNav {
    0%{background-position:0% 14%}
    50%{background-position:100% 87%}
    100%{background-position:0% 14%}
}
@-o-keyframes fondoNav {
    0%{background-position:0% 14%}
    50%{background-position:100% 87%}
    100%{background-position:0% 14%}
}
@keyframes fondoNav {
    0%{background-position:0% 14%}
    50%{background-position:100% 87%}
    100%{background-position:0% 14%}
}

/* ===== LOGO ===== */
.custom-logo-link img {
    max-width: 250px !important;
    height: auto !important;
}

/* ===== MENÚ PRINCIPAL ===== */
.navbar-nav {
    align-items: center;
    gap: 10px;
}

.navbar-nav .nav-link {
    font-weight: 500;
    font-size: 15px;
    color: #fff;
    padding: 8px 14px;
    transition: all 0.2s ease;
    text-align: left !important;

}

/* Hover menú */
.navbar-nav .nav-link:hover {
    color: #ffde8b;
}

.navbar-nav .nav-link:active{
    color: #ffde8b;
}


/* ===== DROPDOWN CONTENEDOR ===== */
.navbar .dropdown {
    position: relative;
}

/* ===== DROPDOWN ROJO ===== */
.navbar .dropdown-menu {
    background-color: #f0f1ff;
    border: none;
    border-radius: 10px;
    padding: 5px 0;
    min-width: 240px;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);

    display: none;
}



/* Mostrar en hover (desktop) */
@media (min-width: 992px) {

    .navbar .dropdown:hover .dropdown-menu {
        display: block;
    }
}



/* ===== ITEMS DROPDOWN ===== */
.dropdown-item {
    color: #1a1a1a;
    font-family: 'DM Sans', sans-serif;
    font-size: 15px;
    padding: 10px 20px;
    transition: all 0.2s ease;
}

/* Hover dropdown */
.dropdown-item:hover {
    background-color: rgba(86, 64, 113, 0.7);
    color: #ffffff;
}

/* ===== FLECHITA ===== */
.dropdown-toggle::after {
    margin-left: 6px;
    vertical-align: middle;
}

/* ===== BOTÓN HAMBURGUESA ===== */
.navbar-toggler {
    border: none;
}

.navbar-toggler-icon{
    background-image: url('../img/toggler_icon.svg') !important;
}

.navbar-toggler:focus {
    box-shadow: none;
}

/* ===== MOBILE ===== */
@media (max-width: 991px) {

.navbar-nav .nav-link {
    text-align: left !important;
    display: block !important;
    min-width: 240px !important;
}

.navbar .dropdown-menu {

    position: relative;
    display: block;
}


    .navbar-collapse {
        padding: 15px;
    }

    .navbar-nav {
        gap: 0;
    }

    .nav-link {
        padding: 10px 0;
    }

    /* Dropdown en mobile */
    .dropdown-menu {
        position: static;
        transform: none;
        background-color: transparent;
        padding: 0;
    }

    .dropdown-item {
        color: #222;
        padding-left: 17px;
    }




}

/*Fin nav*/




/*Hero Inicia*/

.hero-grid{
display:grid;
grid-template-columns:2fr 1fr;
grid-template-rows:repeat(3,200px);
gap:20px;
margin-bottom:50px;
}

.hero-item{
position:relative;
overflow:hidden;
background:#cccccc;
border-radius: 10px;
transition: all ease 200ms;
}



.hero-item img{
width:100%;
height:100%;
object-fit:cover;
transition: all ease 400ms;
}

.hero-item:hover img{
width:104%;
height:104%;
}

.hero-item h2{
position:absolute;
bottom:0;
left:0;
width:100%;
padding:15px;
color:white;
background:linear-gradient(transparent,rgba(26, 26, 26, 0.9));
font-size:30px !important;
margin-bottom: 0 !important;
}

.hero-1{
grid-row:1 / span 3;
}

.hero-2{ grid-row:1; }
.hero-3{ grid-row:2; }
.hero-4{ grid-row:3; }

/*Hero acaba*/





/*Bloque de destacados Inicio*/

.featured{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:20px;
margin-bottom:60px;
align-content: start; /* 👈 clave */
}

.featured-item{
background:#e5d5fc;
border-radius:6px;
overflow:hidden;
box-shadow:0 2px 10px rgba(0,0,0,0.05);
transition:.2s;
}



.featured-item:hover{
transform:translateY(-8px);
background-color: #fff;
}

.featured-item:hover h3{
    color: #b788f8;
}

.featured-item img{
width:100%;
height:180px;
object-fit:cover;
}

.featured-item .padding10px{
  padding: 10px;
}


/*Bloque de destacados acaba*/








.seccion_home{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:20px;
margin-bottom:60px;
align-content: start; /* 👈 clave */
}


.seccion_home article{
background:#1a1a1a;
border-radius:6px;
overflow:hidden;
box-shadow:0 2px 10px rgba(0,0,0,0.02);
transition:.2s;
}


.seccion_home article h4{
    padding: 10px;
    font-family: "DM Sans", sans-serif !important;
    letter-spacing: normal !important;
    font-family: 10px !important;
    text-align: center;
    color: #d7f5df !important;
    font-weight:300 !important;
}


.seccion_home article:hover{
transform:translateY(-8px);
}


.seccion_home article img{
width:100%;
height:180px;
object-fit:cover;
}






/*Articulos Inicio*/

.single-article{
max-width:800px;
margin:auto;
background:white;
padding:40px;
border-radius:6px;
box-shadow:0 2px 10px rgba(0,0,0,0.05);
}

.single-article h1{
font-size:36px;
margin-bottom:20px;
}

.article-meta{
color:#888;
margin-bottom:20px;
font-size:14px;
}

.single-article .article-content p{
margin-bottom:20px;
font-size:18px;
text-align: justify;
}


/*Articulos FIn*/


/*Sidebar Inicio*/

.sidebar{
padding:20px;
}

.ad{
background:#eee;
text-align:center;
padding:20px;
margin-bottom:30px;
}
/*SideBar Fin*/


/*Page content inicio (Nosotros, contacto, etc) Inicio*/
.page-content{
max-width:1080px;
margin:auto;
background:white;
padding:40px;
border-radius:16px;
box-shadow:0 2px 10px rgba(0,0,0,0.02);
}

.page-content h1{
margin-bottom:20px;
font-size:36px;
}

.page-content p{
margin-bottom:20px;
font-size:18px;
}
/*Page content inicio (Nosotros, contacto, etc) Fin*/











































/*Bloques de seccion Inicio*/

.section-block{
margin-bottom:60px;
}

.section-title{
font-size:28px;
margin-bottom:20px;
border-bottom:3px solid #eee;
padding-bottom:10px;
}



.section-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:25px;
}

.section-article{
background:white;
border-radius:6px;
overflow:hidden;
box-shadow:0 2px 8px rgba(0,0,0,0.05);
}

.section-article img{
width:100%;
height:160px;
object-fit:cover;
}

.section-article h3{
padding:15px;
font-size:16px;
}

.section-article:hover{
transform:translateY(-4px);
}

/*Bloques de seccion Fin*/




/*Lo mas leído Inicio*/

.popular-posts{
margin-top:60px;
}

.popular-posts h2{
margin-bottom:20px;
}

.popular-item{
padding:10px 0;
border-bottom:1px solid #eee;
font-size:16px;
transition: all ease 200ms;
}

.popular-item:hover{
color:#a2abfc;
}
/*Lo mas leído fin*/






/*Single Inicio*/



.single-layout{
display:grid;
grid-template-columns:3fr 1fr;
gap:40px;
}

.single-main{
background:white;
padding:30px;
border-radius:6px;
}



/*Single fin*/




/*Related Inicio*/

.related-posts{
margin-top:60px;
}

.related-posts h2{
margin-bottom:20px;
}

.related-posts{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:20px;
}

.related-item a img{
width:100%;
border-radius:6px;
max-height: 110px !important;
object-fit: cover;
}

.related-item h3{
font-size:16px;
margin-top:10px;
}
/*Related Fin*/







/* LISTA DE CATEGORÍA Inicia*/

.category-list{
  display:flex;
  flex-direction:column;
  gap:30px;
}

/* ITEM */

.category-item{
  display:flex;
  gap:20px;
  padding-bottom:20px;
  border-bottom:1px solid #ddd;
}

/* IMAGEN */

.category-thumb img{
  width:220px;
  height:140px;
  min-width: 140px;
  object-fit:cover;
  border-radius:6px;
}

/* CONTENIDO */

.category-content h2{
  margin:0 0 5px;
  font-size:20px;
}

.category-content h2 a{
  text-decoration:none;
  color:#564071;
  transition: ease all 200ms;
}

.category-content h2 a:hover{
  color: #8bc299;
}

.category-author{
  display:block;
  font-size:14px;
  color:#777;
  margin-bottom:8px;
}

.category-content p{
  margin:0;
  font-size:15px;
}



/*LISTA DE CATEGORÍA Inicia*/





















p.title_publicidad{
    opacity: 0.5;
}





/*ad Home Inicio*/

.ad-home{
    margin: 40px 0;
    height: auto;
    text-align: center;
}

.ad-home img{
    max-width: 100%;
    margin: 0 auto;
}

/*ad Home Fin*/





/*INICIA FORMULARIO*/

.form-contacto {
  max-width: 500px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.form-contacto input,
.form-contacto textarea {
  padding: 10px;
  border: 1px solid #ccc;
  font-family: inherit;
  border-radius: 10px;
  color: #1a1a1a;
}

textarea{
    min-height: 120px;
}

.form-contacto button {
  background: #564071;
  color: white;
  padding: 10px;
  cursor: pointer;
  border: none;
  transition: all ease 200ms;
  border-radius: 20px;
  width: 80%;
  margin: 0 auto;
}


.form-contacto button:hover{
    background: #ffb901;
  color: #1a1a1a;
}

/*TERMINA FORMULARIO*/






/*Footer*/

.site-footer{
background:#1a1a1a;
color:white;
padding:60px 20px;
margin-top:60px;
}

.footer-container{
max-width:1400px;
margin:auto;
display:grid;
grid-template-columns:repeat(4,1fr);
gap:40px;
}

.footer-col h4{
margin-bottom:15px;
color: #d9ddff;
}

.footer-col ul li{
margin-bottom:8px;
}

.footer-col a{
color:#7f7f7f;
transition:all ease 300ms;
}

.footer-col a:hover{
color:#aad3b5;

}

.footer-bottom{
margin-top:40px;
text-align:center;
font-size:14px;
opacity:.7;
}

/*Footer*/










@media (max-width:900px){



h1{
    font-size: 50px !important;
}


.custom-logo-link img {
    max-width: 200px !important;
}

.hero-grid{
grid-template-columns:1fr;
grid-template-rows:auto;
column-gap: 0;
}

.featured, .section-grid, .section-grid, .seccion_home, .footer-container{
grid-template-columns:1fr;
}



.desktop{
    display: none;
}

.mobile{
    display: block;
}

.single-layout {
    grid-template-columns:1fr;
}




.related-posts{
display:block;
grid-template-columns:repeat(1fr);
}


.single-sidebar{
    display: block;
    position: relative;
}

.single-main{
    order: 1;
}

.single-sidebar{
  order: 2;
}



.single-article{
max-width:100%;
padding:20px;
box-shadow:none;
}

.wp-singular .main-container{
    padding: 0;
}



.category .main-container h1{
    padding: 0 20px;
}

.single-main{
     padding: 0px;
}

.popular-posts, .related-posts{
    padding: 20px;
}

.category-list{
    padding: 10px;
}

.category-item{
    display: block;
}

.category-content{
    padding: 10px;
}


/*Footer*/



.footer-col h4{
font-size: 1.6rem;
text-align: center;
}



.footer-col a{
font-size: 1.1rem;
}

.footer-col p{
    text-align: center;
}




/*Footer*/


}