/**
Theme Name: Astra Child
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-child
Template: astra
*/

/* V1.1 del STYLE, guardado despues de hacer los cambios para ajustar los IDs del menu movil, el cual ya funciona pero podria mejorar */

@import url("fonts.css");
@import url("palColor.css");
@import url("blog.css");


@media (max-width: 768px) {
    #ast-mobile-site-navigation .main-navigation .main-header-menu .menu-icon-up > a {
        width: 40px; /* Ajusta este valor según sea necesario */
        height: 40px;
        padding-right: 130px  !important; 
        background-color: transparent;
    }
    
    .parrafo_blogs {  font-family: 'TiresiasPc', sans-serif;
     margin-left: 2% ;
     margin-right: 2% ; 
     padding: 2% 4% 2% 4% ;
     letter-spacing: 1px;
     line-height: 1.4;
     word-spacing: 2px;
}
}

/* estilos generales ++++++++++++++++++++++++++++++++++++++*/ 

body {
    background-color: var(--color-fondo) !important; 
    color: var(--color-texto);
    transition: background-color 0.3s ease, color 0.4s ease;
}


/* Pagina de tipografias =====> */
a {font-family: 'TiresiasPcI', sans-serif;
letter-spacing: 1px;
}


p {  font-family: 'TiresiasPc', sans-serif;
     padding: 10px 3% 10px 3% ;
     font-size: 15px;
     letter-spacing: 1px;
     line-height: 1.4;
     text-align: justify;
     text-justify: inter-word;
     word-spacing: 1px;
}



/* Clases +++++++++++++++++++++++++++ */

.parrafo_blogs {  font-family: 'TiresiasPc', sans-serif;
    font-size: 17px;
     padding: 2% 8% 0% 8% ;
     line-height: 1.6;
     
}

.subparrafo { padding: 2% 12% 0% 12% ; }


.wp-block-details { font-family: 'TiresiasPcI', sans-serif; 
    padding-right: 15%;
}


.parrafo-blog.wp-block-post-date {
    font-family: 'TiresiasPcI', sans-serif;
    color: var(--color-texto);
    font-size: 15px; /* Ajusta el tamaño de la fuente */}

.titulo-personalizado {
    font-family: 'TiresiasPcB', sans-serif !important; 
   font-size: 2.5em; /* Ajusta según tus necesidades */
    color: var(--color-texto)  !important;    /* Ajusta según tus necesidades */
    text-align: center; /* Centra el texto si es necesario */
    padding-top: 4px;    /* Espaciado superior */
    width: 80%;
    margin: 80px auto;
    line-height: 1.6; /* Aumenta el interlineado a 1.6 */
}

/* Estilos personalizados para el encabezado principal */
.titulo-personalizado2 {
    font-family: 'TiresiasPcI', sans-serif !important;;
    font-size: 2.5em; /* Ajusta según tus necesidades */
    color: var(--color-texto)  !important;    /* Ajusta según tus necesidades */
    text-align: center; /* Centra el texto si es necesario */
    padding-top: 4em;    /* Espaciado superior */
    width: 80%;
    margin: 0 auto;
    line-height: 1.6; /* Aumenta el interlineado a 1.6 */

}

  /* Boton para modo dia */
.boton-personalizado {
    background-color: #4CAF50; /* Color de fondo */
    font-family: 'TiresiasPcB', sans-serif;
    color: white; /* Color del texto */
    border: none; /* Sin bordes */
    padding: 12px 20px; /* Relleno interno */
    text-align: center; /* Centrar el texto */
    text-decoration: none; /* Sin subrayado */
    display: inline-block; /* Mostrar en línea */
    font-size: 16px; /* Tamaño de la fuente */
    
    border-radius: 8px; /* Bordes redondeados */
    cursor: pointer; /* Cambia el cursor al pasar */
    transition: background-color 0.3s ease; /* Transición para efecto de hover */
}

.boton-personalizado {
    width: 50px; /* Ajusta el tamaño del botón */
    height: 50px;
    background-image: url('https://staging.todxsjuntxs.com/wp-content/uploads/menu-icons/noche.webp');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border: none;
    cursor: pointer;
    
     /* Colores */
    background-color: transparent; /* Fondo transparente si solo quieres mostrar la imagen */
    color: #5E1675;  
}

/* Estilo para el icono en el elemento de menú "Inicio" */
#primary-site-navigation-desktop .main-navigation .main-header-menu .menu-icon-home > a,
#ast-mobile-site-navigation .main-header-menu .menu-icon-home > a {
    position: relative;
    padding-left: 40; /* Eliminamos el espacio a la izquierda */
    width: 50; /* Ancho del icono */
    height: 50; /* Alto del icono */
    display: block;
    text-indent: -9999px;  /*Ocultamos el texto */
    overflow: hidden; /* Evitamos que el texto afecte al diseño */
    
}


#primary-site-navigation-desktop .main-navigation .main-header-menu .menu-icon-home > a::before,
#ast-mobile-site-navigation .main-header-menu .menu-icon-home > a::before {
content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* Ocupa todo el ancho del enlace */
    height: 100%; /* Ocupa todo el alto del enlace */
    background-image: url('https://staging.todxsjuntxs.com/wp-content/uploads/menu-icons/casa.webp');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center; 
    background-color: transparent; /* IMPORTANTE AJUSTAR COLOR var(--color-primario); */
    padding-right: 0px;
    padding-left: 0px;
}




/* Aplica la fuente a todos los enlaces del menú principal en escritorio */
#primary-site-navigation-desktop .main-header-menu .menu-link {
    font-family: 'TiresiasPcB', sans-serif;
    font-size: 16px;
}

/* Aplica la fuente a todos los enlaces del menú móvil */
#ast-mobile-site-navigation .main-header-menu .menu-link {
    font-family: 'TiresiasPcB', sans-serif;
    font-size: 16px;
    padding-right: 20px;
    padding-left: 20px;
    background-color: transparent;
}




/* Cambia la imagen cuando está en modo oscuro */
body.dark-mode .boton-personalizado {
    background-image: url('https://staging.todxsjuntxs.com/wp-content/uploads/menu-icons/dia.webp'); /* Imagen para el modo oscuro*/
    background-color: transparent;
}


/* Cambiar el color del texto en el menú principal */
.main-header-menu .menu-link {
    color: var(--color-primario) !important; /* Cambia este color al que desees para el texto del menú */
}

/* Cambiar el color del texto para la página activa */
.main-header-menu .current-menu-item > .menu-link,
.main-header-menu .current_page_item > .menu-link {
    color: var(--color-secundario) !important; /* Cambia este color al que desees para la página activa */
}

/* Cambiar el color de texto al pasar el cursor */
.main-header-menu .menu-link:hover {
    color: var(--color-terciario) !important; /* Cambia este color al que desees para el efecto hover */
}





/* Estilo para el icono en el elemento de menú "Inicio" */
#primary-site-navigation-desktop .main-navigation .main-header-menu .menu-icon-up > a,
#ast-mobile-site-navigation .main-header-menu .menu-icon-up > a {
    position: relative;
    padding-left: 40; /* Eliminamos el espacio a la izquierda */
    width: 100px; /* Ancho del icono */
    height: 100px; /* Alto del icono */
    display: block;
    text-indent: -9999px;  /*Ocultamos el texto */
    overflow: hidden; /* Evitamos que el texto afecte al diseño */
    
}


#primary-site-navigation-desktop .main-navigation .main-header-menu .menu-icon-up > a::before,
#ast-mobile-site-navigation .main-header-menu .menu-icon-up > a::before {
content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* Ocupa todo el ancho del enlace */
    height: 100%; /* Ocupa todo el alto del enlace */
    background-image: url('https://staging.todxsjuntxs.com/wp-content/uploads/menu-icons/logo.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center; 
    background-color: transparent; /* IMPORTANTE AJUSTAR COLOR var(--color-primario); */
    padding-right: 0px;
    padding-left: 0px;
}

.imagendin {
  
  max-width: 60%;
  padding-right: 20%;
  padding-left: 20%;
}

.navigation{ padding-right: 15% !important;
  padding-left: 15% !important; }