/*
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 1.0.1
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
*/

@font-face {
    font-family: 'Quicksand';
    src: url('/wp-content/themes/hello-elementor-child/fonts/Quicksand/Quicksand-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 700; /* Define el rango de peso que soporta la fuente */
    font-style: normal;
    font-display: swap;
}

body {
    font-family: 'Quicksand', sans-serif;
    font-weight: 400; /* Ajusta esto para usar diferentes pesos */
}

:root {
    --page-title-display: inherit !important;
}

.elementor-kit-6 {
	font-size: 18px;	
}

h2.wp-block-heading {
    font-size: 1.5rem;
}
h3.wp-block-heading {
    font-size: 1.3rem;
}

.wp-block-column p, .wp-block-column li  {
	font-size: 18px;
}

.page-header {
    font-family: 'Quicksand', sans-serif;
    color: black;
    margin: 10px 10px 5px;
}

/* Estilo por defecto para pantallas grandes */
.page-header h1 {
    font-size: 28px;
	font-weight: 800;
}

/* Media query para dispositivos grandes (tablets en horizontal o pantallas pequeñas de desktop) */
@media (max-width: 992px) {
    .page-header h1 {
        font-size: 26px; /* Tamaño de fuente ajustado para estos dispositivos */
    }
}

/* Media query para tablets en vertical */
@media (max-width: 768px) {
    .page-header h1 {
        font-size: 24px; /* Tamaño de fuente más pequeño para tablets */
    }
}

/* Media query para móviles */
@media (max-width: 575px) {
    .page-header .entry-title {
		padding-right: 0px !important;
		padding-left: 0px !important;
	}
}

/* Media query para móviles */
@media (max-width: 480px) {
    .page-header h1 {
        font-size: 22px; /* Tamaño de fuente aún más pequeño para móviles */
    }
}




.text-justify {
	text-align: justify !important;
}
.amazon-auto-links {
	padding: 20px 0 40px;
}

.elementor-button .elementor-align-icon-left {
  align-self: center;
	font-size: 1.5em;
}

.post-tags {
	display: none;
}





#colophon.site-footer {
    max-width: none;
    padding: 30px 0;
}

.site-footer {
    background-color: #ffffff; /* Color de fondo del footer */
    padding: 20px 0; /* Espaciado interno del footer */
    text-align: center; /* Alinear el contenido del footer al centro */
    width: 100%; /* Asegurar que el footer ocupe el ancho completo */
    box-shadow: 0 -5px 10px -5px rgba(0, 0, 0, 0.5); /* Sombreado en la parte superior */
}

.footer-navigation ul {
    list-style: none; /* Remover estilos de lista */
    margin: 0;
    padding: 0;
    display: flex; /* Disposición horizontal de los ítems */
    justify-content: center; /* Centrar los ítems horizontalmente */
    gap: 20px; /* Espacio entre los ítems */
}

.footer-navigation a {
    text-decoration: none; /* Remover el subrayado de los enlaces */
    color: #333 !important; /* Color del texto de los enlaces */
    font-size: 1.2em; /* Aumentar el tamaño de la fuente en la lista */
}

.footer-credits {
    margin-top: 20px; /* Espacio entre el menú y los créditos */
    font-size: 0.9em; /* Reducir el tamaño de la fuente en los créditos */
}


/* Media query para dispositivos móviles */
@media (max-width: 768px) {
    .footer-navigation ul {
        flex-direction: column; /* Cambia la disposición de los ítems a vertical */
        align-items: center; /* Alinea los ítems al centro */
    }
}

.site-header {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000; /* Asegura que el menú se mantenga por encima de otros contenidos */
    color: #000000 !important;
    max-width: 100vw !important;
    background-color: white !important;
    border-bottom: 2px solid #000; /* Añade un borde en la parte inferior con el color deseado */
    padding-bottom: 0 !important;
}

main#content {
    padding-top: 135px;
}

.site-header p.last-updated-date, #mobile-elements p.last-updated-date{
    color: #000000 !important;
    font-size: .6em;
}

.site-header img {
    height: 65px;
    width: 121px;
    object-fit: contain;
}

/* Alinea todo el contenido de la columna a la derecha */
.site-header .col-md-4.text-md-right {
  text-align: right;
}

/* Estilos para el formulario de búsqueda y el icono de login */
.site-header .col-md-4.text-md-right > * {
  display: inline-block; /* Muestra los elementos en línea */
  vertical-align: middle; /* Alinea verticalmente los elementos */
}

/* Opcional: Ajusta el margen entre el buscador y el icono de login */
.site-header .col-md-4.text-md-right > a {
    color: #000000 !important;
    margin-left: 10px; /* Ajusta el espacio entre el buscador y el icono de login */
    margin-right: 20px;
}

.site-header .search-field, #mobile-elements .search-field {
    width: 100%; /* Hace que el campo de búsqueda ocupe todo el ancho de su contenedor (el formulario) */
    box-sizing: border-box; /* Asegura que el padding y el borde del input se incluyan en su ancho total */
    height: 30px;
    color: #000000 !important;
    font-size: 14px;
    background-color: #fff;
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="%23aaa" d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128s128 57.2 128 128c0 70.7-57.2 128-128 128z"/></svg>');
    background-position: 15px center;
    background-size: 15px;
    background-repeat: no-repeat;
    padding-left: 35px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

/* Aplica Flexbox al contenedor que tiene el formulario de búsqueda y el icono de login */
.site-header .col-md-4.text-md-right {
  display: flex; /* Activa Flexbox */
  justify-content: flex-end; /* Alinea los elementos a la derecha */
  align-items: center; /* Centra los elementos verticalmente */
  gap: 10px; /* Añade un espacio entre los elementos del flexbox */
}

/* Estilo para el formulario de búsqueda */
.site-header .search-form, #mobile-elements .search-form {
  flex-grow: 1; /* Hace que el formulario de búsqueda ocupe el espacio disponible */
  margin: 0; /* Elimina cualquier margen predeterminado */
}

/* Oculta el botón de búsqueda */
.site-header input.search-submit, #mobile-elements input.search-submit {
  display: none; /* Oculta el botón de búsqueda */
}

.main-navigation {
    color: #000000 !important;
    margin: 10px 0 0;
    text-align: center;
}


.main-navigation ul {
    list-style: none; /* Elimina los estilos de lista predeterminados */
    margin: 0; /* Elimina los márgenes predeterminados */
    padding: 0; /* Elimina el relleno predeterminado */
    display: inline-block; /* Permite centrar la lista */
}

.main-navigation li {
    display: inline-block; /* Muestra los elementos del menú en línea */
    margin-right: 20px; /* Espacio entre los elementos del menú */
}

.main-navigation li:last-child {
    margin-right: 0; /* Elimina el margen del último elemento para evitar espacios adicionales */
}

.main-navigation a {
    text-decoration: none; /* Elimina el subrayado de los enlaces */
    color: #000 !important; /* Color del texto de los enlaces */
}

/* Estilos para submenús */
.main-navigation ul ul {
    display: none; /* Oculta los submenús */
    position: absolute; /* Posiciona los submenús fuera del flujo de documentos */
    background-color: #fff; /* Fondo de los submenús */
    box-shadow: 0 8px 16px rgba(0,0,0,0.1); /* Sombra opcional para los submenús */
    padding: 30px 50px; /* Relleno alrededor de los enlaces de los submenús */
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    top: 140px;
}

/* Estilo para el ícono del menú */
.main-navigation .submenu-toggle {
    cursor: pointer;
    margin-left: 10px;
    /* Añade estilos adicionales si es necesario */
}

i.submenu-toggle {
    color: #666;
    display: inline-block; /* Asegura que el ícono se pueda transformar */
    transform: translateY(2px); /* Ajusta este valor según sea necesario para bajar el ícono */
}

/* Oculta los submenús inicialmente */
.main-navigation .sub-menu {
    display: none;
}

.sub-menu {
    margin: 10px 0; /* Ajusta el margen superior e inferior según necesites */
    padding: 10px; /* Añade relleno dentro del submenú para separar los bordes de los elementos internos */
    background-color: #ffffff; /* Establece un fondo blanco para el estilo de tarjeta */
    border: 1px solid #dddddd; /* Añade un borde ligero */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Añade una sombra suave para un efecto 3D */
    border-radius: 5px; /* Bordes redondeados para la tarjeta */
}

.sub-menu .menu-item {
    margin-bottom: 10px; /* Añade un margen en la parte inferior de cada elemento del submenú */
    background: #f9f9f9; /* Fondo para cada elemento del submenú */
    border: 1px solid #eee; /* Borde ligero para cada elemento */
    border-radius: 3px; /* Bordes redondeados */
    /*padding: 5px 10px;*/ /* Relleno dentro de cada elemento */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* Sombra suave */
}

.sub-menu .menu-item:last-child {
    margin-bottom: 0; /* Elimina el margen inferior del último elemento para mantener uniformidad */
}

.menu-item a {
    padding: 5px 5px; /* Aumenta el relleno alrededor del texto */
    margin: 5px 0; /* Ajusta el margen para dar espacio entre elementos */
    display: inline-block; /* Esto permite que el relleno y el margen sean efectivos */
    border-radius: 5px; /* Opcional: bordes redondeados para un look de "tarjeta" */
}

.menu-item a:hover, .menu-item a:active {
    background-color: #f5f5dc; /* Color de fondo en hover o activo */
}

.menu-item a:hover, .menu-item a:active {
    background-color: #f5f5dc; /* Cambia el fondo a amarillo en hover o activo */
}

.submenu-toggle {
    padding: 5px 10px; /* Añade relleno alrededor del ícono para más espacio */
    margin-left: 5px; /* Añade un margen para separarlo del texto si es necesario */
    border-radius: 5px; /* Opcional: bordes redondeados */
    display: inline-block; /* Esto permite que el relleno y el margen sean efectivos */
}

.submenu-toggle:hover {
    background-color: #a3da8d; /* Color de fondo en hover o activo */
}

.submenu-toggle:hover {
    background-color: #a3da8d; /* Cambia el fondo a verde en hover o activo */
}

.menu-item a, .submenu-toggle {
    transition: background-color 0.3s ease, padding 0.3s ease;
}

.submenu-close {
    position: absolute;
    top: 10px; /* Ajusta según necesites */
    right: 10px; /* Ajusta según necesites */
    cursor: pointer;
    z-index: 1001; /* Asegúrate de que esté por encima de los contenidos del submenú */
}

/* Estilo para el ícono de FontAwesome */
.submenu-close i {
    font-size: 18px; /* Ajusta el tamaño según necesites */
    color: #333; /* Ajusta el color según necesites */
}

.main-navigation .sub-menu {
    transition: all 0.3s ease-in-out;
}

/* Oculta el contenedor de elementos móviles en pantallas más grandes */
#mobile-elements {
    display: none;
}

@media (max-width: 768px) { /* Ajusta este valor según tu punto de ruptura para móviles */
    .main-navigation {
        overflow-x: auto;
        white-space: nowrap;
        display: flex;
        flex-wrap: nowrap;
    }

    .main-navigation .menu-item {
        display: inline-block;
        flex: 0 0 auto; /* Evita que los elementos del menú se estiren */
    }

    .site-header .text-md-left, .site-header .text-md-right {
        display: none !important;
    }
    #mobile-elements {
        display: block;
    }

    .site-header {
        padding: 10px 5px 0 !important;
    }

    /* Estilos para submenús en dispositivos móviles */
    .main-navigation .sub-menu {
        display: none; /* Los submenús se muestran como bloques */
        width: 100%;
        height: calc(100% - 130px);
        position: fixed;
        top: 130px;
        background-color: #fff;
        z-index: 1000;
        box-shadow: none;
        overflow: auto;
    }

    .submenu-close .close {
        display: block; /* Muestra el botón de cierre */
        text-align: right; /* Alinea el ícono a la derecha */
        padding: 10px; /* Espaciado alrededor del ícono */
    }

    /* Asegura que los elementos de submenú se muestren de manera vertical */
    .main-navigation .sub-menu .menu-item {
        display: block; /* Muestra los elementos del submenú en bloques, uno debajo del otro */
    }

    main#content {
        padding-top: 135px;
    }

}