/**
 * Theme Name:        Agesamex
 * Theme URI:         https://example.com/fabled-sunset
 * Description:       Tema desarrollado para Agesamex
 * Version:           1.0.0
 * Author:            Roberto Muñoz Arellano
 * Author URI:        
 * Tags:              creditos de carbono
 * Text Domain:       Agesamex
 * Domain Path:       /assets/lang
 * Tested up to:      6.4
 * Requires at least: 6.2
 * Requires PHP:      7.4
 * License:           GNU General Public License v2.0 or later
 * License URI:       https://www.gnu.org/licenses/gpl-2.0.html
 */


:root {
  
  --verde: #02630C;
  --blanco: #ffffff;
}


.encabezado {
/*	background: #f0f0f0;
*/

}

.color-verde {
    color:  var(--verde);
}

.color-blanco {
    color:  var(--blanco);
}

.nav-link {
	font-family: var(--e-global-typography-primary-font-family), Sans-serif;
	font-weight: var(--e-global-typography-primary-font-weight);
	color: #02630C!important; 
	fill: #02630C;
	line-height: 20px;
	font-weight: bold;
	font-size: 20px;
}
.dropdown-item {
	color: #04045B!important;
	fill: #04045B!important;
	font-weight: bold;
}
.ejidos_comunidades, .ejidos_comunidades_texto {
	color: #02630C!important;
	fill: #02630C;
	font-weight: bold;

}
.bg-texto {
	background-color: #02630C;
}
#img4 {
	
	height: 303.75px!important;
}
#img7 {
	width: 427.33px;
	height: 309px;
}
#img9 {
	width: 427.33px;
	height: 309px;
}
#img10 {
    width: 410px;
    height: 349px;
    object-fit: fill;

}
#img11 {
    width: 410px;
    height: 262px;
    object-fit: fill;
}
#img12 {
   margin-left: -12px;
}
#img13 {
    width: 300px;
    height: 283px;
}
#img14 {
    width: 363px;
    height: 265px;
}
#img15 {
    width: 363px;
    height: 263px;
}
#img16 {
    width: 375px;
    height: 265px;
}
#img17 {
    width: 360px;
    height: 265px;
}
#img18 {
    width: 360px;
    height: 265px;
}
#img19 {
    width: 425px;
    height: 288px;
}
#img20 {
    width: 425px;
    height: 274px;
}
.texto-footer {
	text-align: justify;
}
.texto-menu-footer {
	color: #020101;
	font-weight: 600;
}
.derechos-footer {
	background-color: #04045B;
	color: white;
	font-weight: 500;
	text-align: center;
}
.borde-superior-footer {
    border-top: solid;
    border-color: #04045B ;
    border-width: 10px;
}
.alineacion-vertical {
	margin-top: auto!important;
	margin-bottom: auto!important;
}
.text-justificado {
	text-align: justify;
}
.alineacion-horizontal {
	margin-left: auto!important;
	margin-right: auto!important;
	padding: 0;
}
button.active {
	text-decoration: underline;
}
.ancho_foto_salvaguarda {
	width: 277px;
}
.alto_foto_salvaguarda {
	height: 300px;
}
.bg-blanco {
    background-color: var(--blanco);
}
.bg-verde {
    background-color: var(--verde);
}


/*======================
    Galeria de boiler
========================*/
.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    padding: 10px;
}

.image-item img {
	
    width: 265px;
    height: 322px;
    
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.2s;
}

.image-item img:hover {
    transform: scale(1.05);
}

/* Lightbox */
#lightbox {
    display: none;
    position: fixed;
    z-index: 999;
    padding-top: 50px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.9);
}

#lightbox img {
    margin: auto;
    display: block;
    max-width: 90%;
    max-height: 80%;
}

.close {
    position: absolute;
    top: 20px;
    right: 35px;
    color: #fff;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
}
/*======================
    Carrusel
========================*/
.carousel-container {
    position: relative;
    max-width: 800px;
    margin: auto;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
}

.carousel-track {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.carousel-image {
    width: 100%;
    flex-shrink: 0;
    height: 350px;
}

.carousel-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 30px;
    background-color: rgba(0,0,0,0.5);
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
    z-index: 1;
}

.carousel-button.left {
    left: 10px;
}

.carousel-button.right {
    right: 10px;
}

.carousel-button:hover {
    background-color: rgba(0,0,0,0.8);
}
.autoplay-btn {
    /*
    margin-top: 20px;
    padding: 10px 20px;
    */
    font-size: 16px;
    background-color: #007BFF;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
}

.autoplay-btn:hover {
    background-color: #0056b3;
}
/*======================
    Botones Acts Ambientales
========================*/
.botones-act-ambientales {
    width: 100%;
    text-align: left;
    border-radius: 10px;
    color: var(--verde) ;
    font-weight: 500;
    border: none;
    font-size: 24px;
    margin-bottom: 5px;
}
.botones-act-ambientales:hover {
    color: var(--blanco);
    background-color: var(--verde);
}
.botones-act-ambientales_seleccionado {
    color: var(--blanco);
    background-color: var(--verde);
}
/*======================
Listas con arbolito de icono
========================*/
.lista-arbol {
    list-style: none;
    padding-left: 0;
}
.lista-arbol li {
    position: relative;
    padding-left: 30px;
}
.lista-arbol li::before {
    content: "\f1bb";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 0;
    color: var(--verde);
}
/*======================
Botones de objetivos Tarahumar
========================*/
.botones-obj {
    width: 150px;
    height: auto;
    border: none;
    background-color: var(--blanco);
    margin: 0;
    padding: 0;
}
.botones-obj:hover {
    transform: scale(1.05);
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}
.sel-obj {
    transform: scale(1.1);
    border: solid;
    border-radius: 5px;
    border-width: 4px;
    border-color: var(--blanco);
    
}
.sel-obj img {
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}


/*======================
    Cuadros de Home
========================*/
.titulos-cuadros-index {
    font-size: 23px;
    font-weight: 400;
}
.texto-cuadros-index {
    color: #020101;
    font-size: 17px;
    font-weight: 300;
    text-align: justify;
}

.cuadro-interior {
    margin: 15px 15px 15px 15px;
}
.cuadro-exterior {
    background-color: #ffffff;
    border: solid;
    border-color: #f0f0f0;
}

/*======================
    Nosotros de Home
========================*/
.bg-nosotros {
    background-color: #f0f0f0;
}

.accordion {
    --bs-border-color: var(--verde);
    --accordion-btn-color: var(--blanco);
}
.accordion-button:not(.collapsed) {
    background-color: var(--verde)!important;
    color: var(--blanco)!important;
}

.accordion-button {
    font-size: 20px;
    font-weight: 600;
}

.accordion-button::after {
    color: var(--blanco)!important;
}

/*======================
    Creditos de Carbono de Home
========================*/

.bg-creditos-carbono {
    background-color: #f2f5ec;
}


/*======================
    Font Inter
========================*/

.inter {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  
}

/*==========================
Ajustes vista para computadoras
===========================*/
@media (min-width: 992px) {

/* Creditos de carbono de home */
    .margenes-creditos-carbono {
        padding-top: 15px;
        padding-bottom: 15px;
    }

/* Cuadros de home */
    .margen-lg {
        position: relative;
        top: -96px;
        
    }
    .img-hoja {
        color: var(--verde);
        font-size: 30px;
        margin-left: 134px;

    }

    .tamano-lg {
        width: 316px;
        height: 300px;
        margin-left: 10px;
        margin-right: 10px;
    }

    /* Creditos de carbono */

    #creditoscarbono {
        background-image: url("../img/home/creditosCarbono_o.jpg");
        background-repeat: no-repeat;
        background-size: 100% 120%;
        height: 600px;
        position: relative;
    }

    #creditoscarbonotxt {
        color: var(--blanco);
        top: 140px;;
        left: 393px;
        font-size: 58px;
        font-weight: 600;
        position: absolute;
    }

    #cumpleobjetivostxt {
        color: var(--blanco);
        font-size: 27px;
        font-weight: 600;
        position: absolute;
        top: 246px;
        left: 325px;

    }

    .altura-header {
        height: 107px;
    }

    /*======================
    Boton WhatsApp Pagina Inicio
    ========================*/

    #btn-whats-inicio {
        background-color: var(--blanco);
        color: var(--verde);
        font-size: 20px;
        text-decoration: none;
        position: absolute;
        padding: 17px;
        left: 560px;
        top: 315px;
        border: solid;
        border-color: var(--verde);

    }
    #btn-whats-inicio:hover {
        background-color: var(--blanco);
        color: var(--verde);
        font-size: 20px;
        text-decoration: none;
        position: absolute;
        padding: 17px;
        left:: 560px;
        top: 315px;
        border: solid;
        transform: scale(1.05);

    }

}/* media */


/*==========================
Ajustes vista para celulares
===========================*/

@media (max-width: 576px) {

    .img-hoja {
        color: var(--verde);
        font-size: 30px;
        margin-left: 239px;

    }

    .menuencelular {
        
      /*  display: block;
        overflow-y: visible!important;  */
    }

    #creditoscarbonotxt {
        color: var(--blanco);
        padding-top: 101px;
        font-size: 46px;
        font-weight: 600;
    }


    #creditoscarbono {
        background-image: url("../img/home/creditosCarbono_o.jpg");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        height: 493px;
      
    }

    #cumpleobjetivostxt {
        color: var(--blanco);
        font-size: 21px;
        padding-bottom: 25px;
    }

    /*======================
    Logo 
    ========================*/
    .logo-celular {
        width: 218px;
        height: 93px;
        margin-left: 150px;  
    }

    /*======================
    Altura menú Pagina Inicio
    ========================*/

    .altura-header {
    height: 152px;
    }

    /*======================
    Boton WhatsApp Pagina Inicio
    ========================*/

#btn-whats-inicio {
    background-color: var(--blanco);
    color: var(--verde);
    font-size: 20px;
    text-decoration: none;
    padding: 17px;
    margin-left: 131px;
    border: solid;
    border-color: var(--verde);

}
#btn-whats-inicio:hover {
    background-color: var(--verde);
    color: var(--blanco);
    font-size: 20px;
    text-decoration: none;
    padding: 17px;
    margin-left: 131px;
    border: solid;
    border-color: var(--blanco);

}

}/* Media */

/*==========================
Ajustes carrusel control de erosión
===========================*/
.carrousel_10 {
    width: 800px;
    height: 350px;
}