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

/*Fuentes externas -- Class*/
.nunito-sans-700 {
    font-family: "Nunito Sans";
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings:
        "wdth" 100,
        "YTLC" 500;
}

.m-plus-rounded-1c-regular {
    font-family: "M PLUS Rounded 1c";
    font-weight: 400;
    font-style: normal;
}

/* Estilos generales */
body {
    background-color: #dff8f4;
    color: #3d7508;
    font-size: 1em;
}

p {
    text-align: center;
    color: black;
}

hr {
    background: rgb(45, 139, 3);
}

/*---------------------------------------------------------------*/
/* Estilos del header */
header {
    background-color: #fff;
}

/* Estilos del container-header */
.container-header {
    display: flex;
    flex-wrap: nowrap; /* Permite que los elementos se envuelvan en múltiples líneas */

    align-items: center;
    margin-bottom: 10px;
    
}

/*Div Estilos del logo*/
#logo {
    width: auto; /* Cada uno ocupa la mitad del contenedor */
    box-sizing: border-box; /* Incluye el padding y border en el ancho */
    padding: 10px; /* Añade un poco de espacio interno */
}

#logo:hover {
    animation: tilt-n-move-shaking 0.25s infinite;
}

@keyframes tilt-n-move-shaking {
    0% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(5px, 5px) rotate(5deg); }
    50% { transform: translate(0, 0) rotate(0eg); }
    75% { transform: translate(-5px, 5px) rotate(-5deg); }
    100% { transform: translate(0, 0) rotate(0deg); }
}

/*Div Estilos del Texto de la Marca*/
.flex-titulo {
    width: 60%; /* Cada uno ocupa la mitad del contenedor */
    box-sizing: border-box; /* Incluye el padding y border en el ancho */
    padding: 10px; /* Añade un poco de espacio interno */
    display: flex;
    flex-direction: column;
    line-height: 1;
    padding: 10px 10px 0px 0px;
    
}

.span1 {
    font-family: "M PLUS Rounded 1c";
    font-weight: xx-large;
    font-style: normal;
    font-weight: 800;
    font-size: 3rem;

}

.span2 {
    font-family: "M PLUS Rounded 1c";
    font-weight: 400;
    font-style: italic;
    white-space: nowrap;
}



/*Div Estilos del nav */
.flex-nav {
    display: flex;
    justify-self:flex-end;
    justify-content: center; /* Distribuye los elementos de manera uniforme */
    background: rgb(45, 139, 3);
    width: auto; /* Ocupa el ancho completo del contenedor */
    border-radius: 0px;
}

.flex-nav nav {
    background: rgb(45, 139, 3);
    font-weight: 600;
    padding: 5px;
    text-align: center;
    border-radius: 0px;
    display: flex;
    flex-direction: column;
    
        
}

.flex-nav nav a {
    text-decoration: none;
    color: #ffffff;
    padding: 1px 10px;
}

.flex-nav nav a:hover {
    color: #ffff00;
}

#qs {
    white-space: nowrap;
}
/*---------------------------------------------------------------*/
/*MAIN*/
/*Cuerpo Principal*/
main {
    background-color: #ffffff;
    /*padding: 10px 10px 0px 0px ;*/
}

main section {

    padding: 15px 15px 0 0;
}

main section h2,
main section h3 {
    text-align: center;
    padding: 5px 0;
}

/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/*Barra de separación*/
.maintopmargin {
    height: 10px;
    background-color: rgb(45, 139, 3);
    margin: 0px 0px 15px 0px;
}

/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/*Titulo Cuerpo Principal*/
main h1 {
    color: #3d7508;
    text-align: center;
    text-size-adjust: 1 em;
}

/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/*Sección de Productos*/
#productos {
    text-decoration: none;
}

/* SlideShow*/

/* Slideshow container */
.slideshow-container {
    max-width: 1000px;
    position: relative;
    margin: auto;
    box-sizing: border-box
}

/* Hide the images by default */
.mySlides {
    display: none;
}

/* Next & previous buttons */
.prev,
.next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    margin-top: -22px;
    padding: 16px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
}

/* Position the "next button" to the right */
.next {
    right: 0;
    border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

/* Caption text */
.text {
    color: #f2f2f2;
    font-size: 15px;
    padding: 8px 12px;
    position: absolute;
    bottom: 8px;
    width: 100%;
    text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
    color: #f2f2f2;
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top: 0;
}

/* The dots/bullets/indicators */
.dot {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}

.active,
.dot:hover {
    background-color: #717171;
}

/* Fading animation */
.fade {
    animation-name: fade;
    animation-duration: 1.5s;
}

@keyframes fade {
    from {
        opacity: .4
    }

    to {
        opacity: 1
    }
}

/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/*Quienes Somos*/

.contenedor-quienes {
    display: grid;
    grid-template-columns: 15% 70% 15%;
    /* Define los tamaños de las columnas */
    grid-gap: 10px;
    /* Espacio entre las celdas */
    border: 0px solid black;
    /* Borde para visualización */
    justify-content: center;
}

.item-quienes {
    border: 0px solid black;
    /* Borde para visualización */
    padding: 10px;
    /* Espacio interno */
}

/* Estilos adicionales para hacer más visible */
.item-quienes:nth-child(odd) {
    background-color: rgb(255, 255, 255);
    /* Fondo para visualización */
}



/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/*Sección de Donde Estamos*/

.dondemapa {
    display: flex;
    flex-direction: column;
    /*align-items: center; /* Centra los elementos horizontalmente */
    justify-content: center; /* Centra los elementos verticalmente */
    padding: 0;
    
}

.contenedormapa {
    display: grid;
    grid-template-columns: 5% 90% 5%;
    /* Define los tamaños de las columnas */
    grid-gap: 00px;
    /* Espacio entre las celdas */
    border: 0px solid black;
    /* Borde para visualización */
    justify-items: center;
    
}

.item-mapai {
    border: 0px solid black;
    /* Borde para visualización */
    padding: 0px;
    /* Espacio interno */
    
}

.item-mapa {
    border: 0px solid black;
    /* Borde para visualización */
    padding: 10px;
    /* Espacio interno */
    
}

.item-mapad {
    border: 0px solid black;
    /* Borde para visualización */
    padding: 0px;
    /* Espacio interno */
    
}

/* Estilos adicionales para hacer más visible */
.item-mapa:nth-child(odd) {
    background-color: rgb(255, 255, 255);
    /* Fondo para visualización */
}

.iframemapa {
    border: 10px solid rgb(45, 139, 3);
    padding: 3px;
    width: 50vh; /* Mapa ocupa todo el ancho del contenedor */
    height: 45vh;  /*Altura igual al 80% del ancho ocupado */
    
    max-height: 600px; /* Altura máxima para que no sea demasiado grande */
}


/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/*Sección de Contacto*/
#contacto {
    padding: 20px;
    text-align: center;
}

/*Íconos Telefono y Correo*/
.svg-inline-contactos {
    display: inline-block;
    font-size: inherit;
    height: 1em;
    overflow: visible;
    vertical-align: -.125em;
}

/*Formulario de contacto recuadro*/
/*Form contacto
#contacto form {
    padding: 20px;
    text-align: center;}*/

.form-wrapper {
    display: flex;
    max-width: 680px;
    flex-direction: column;
    justify-content: center;
    text-align: left;
    margin: auto;
    border-radius: 5px;
    padding: 10px 25px 10px;
    /*background:rgb(31, 56, 34);*/
    background: rgb(45, 139, 3);
}

.form-wrapper h4 {
    color: #fff;
    font-size: 0.75rem;
}

.form-wrapper form {
    margin: 10px 0 10px;
}

form {
    max-width: 700px;
    margin: 0 auto;
    padding: 10px;
    background-color: rgb(223, 248, 212);
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

form p {
    text-align: left;
    font-weight: bold;
}

input[type="text"],
input[type="tel"],
input[type="email"],
textarea {
    width: 100%;
    padding: 10px;
    margin: 5px 0;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
    font-size: 1em;
}

form textarea {
    resize: vertical;
}

input[type="text"]:focus,
input[type="tel"]:focus,
input[type="email"]:focus,
textarea:focus {
    border: 3px solid rgb(45, 139, 3);
    outline: none;
  }

input[type="submit"],
input[type="reset"],
input[type="checkbox"] {
    background-color: rgb(45, 139, 3);
    color: #fff;
    border: none;
    border-radius: 5px;
    padding: 10px 20px;
    cursor: pointer;
    font-size: 0.87em;
}

input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="checkbox"]:hover {
    background-color: rgb(194, 242, 172);
    font-weight: bold;
    border: 1px solid;
    color: #000000;
    border-color: rgb(45, 139, 3);
}

.error-message {
    color: red;
    font-size: 0.87em;
    margin-top: 5px;
}

@media (max-width: 740px) {
    body::before {
        display: none;
    }

    .form-wrapper {
        padding: auto;
        margin-top: 10px;
        width: 100%;
        top: 50%;
    }

    .form-wrapper form {
        margin: 5px 0 5px;
    }
}

/*---------------------------------------------------------------*/
/* Nuestras redes sociales*/

.social-link {
    display: inline-block;
    height: 20px;
    width: 20px;
    margin: 0 25px;
    padding: 10px 0;
    border-radius: 50%;
    box-sizing: border-box;
    font-size: 1em;

}

.svg-inline--fa {
    display: inline-block;
    font-size: inherit;
    height: 1em;
    overflow: visible;
    vertical-align: -.125em
}

.fa-3x {
    font-size: 3em
}

/*---------------------------------------------------------------*/
/*Div Estilos del Footer Nav */
.footer-nav {
    display: flex;
    justify-content: center; /* Distribuye los elementos de manera uniforme */
    background: rgb(45, 139, 3);
    width: 100%; /* Ocupa el ancho completo del contenedor */
    border-radius: 0px;
}

.footer-nav nav {
    background: rgb(45, 139, 3);
    font-weight: 600;
    padding: 5px;
    text-align: center;
    border-radius: 0px;
    display: flex;
    flex-direction: row;
}

.footer-nav nav a {
    text-decoration: none;
    color: #ffffff;
    padding: 0px 10px;
}

.footer-nav nav a:hover {
    color: #ffff00;
}

#qsf {
    white-space: nowrap;
}

#tcf {
    white-space: nowrap;
}


/*---------------------------------------------------------------*/
/*FOOTER*/
footer {
    background-color: #aaff3c80;
    padding: 5px;
    text-align: center;
}

footer section {
    /*background-color: #dff0f8;*/
    padding: 15px 15px 0 0;
}

footer section div img {
    border-radius: 25%;
}



/*---------------------------------------------------------------*/
/* terminos.html - Terminos y Condiciones */

.terminos {
    background-color: #ffffff;
    padding: 20px;
    font-family: 'Nunito Sans', sans-serif;

}

.terminos span {
    color: #3d7508;
    font-weight: bold;
    padding: 10px;
}

.terminos p {
    color: black;
    text-align: justify;
    padding: 10px;
}



/*---------------------------------------------------------------*/
/*ïcono WHATSAPP Flotante*/
#whatsapp-icon {

    position: fixed;

    bottom: 25px;
    /* Ajusta la posición vertical según tus necesidades */

    right: 10px;
    /* Ajusta la posición horizontal según tus necesidades */

    z-index: 1000;

}

#whatsapp-icon img {

    width: 55px;
    /* Ajusta el tamaño del icono según tus necesidades */

    height: auto;

    border-radius: 25%;
    /* Hace que el icono tenga forma circular */

}

/*---------------------------------------------------------------*/
/*productos.html*/


.container-productos {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

.tarjeta-productos {
    width: 200px;
    border: 1px solid black;
    border-radius: 10px;
    margin-top: 10px;
}

.tarjeta-productos img {
    width: 100%;
}