body {
    font-family: 'Lucida Sans', sans-serif;
    margin: 0;
    height: 100vh; /*ajuste para ocupar toda la altura de la ventana */
    width: 100%;
    background-color: #fff;
    display: flex;
    align-items: start; /*centra verticalmente */
    justify-content: center; /*centra horizontalmente */
    padding: 20px;
}
* {
    box-sizing: border-box; /* Incluye padding y borde en el ancho total */
}
/* Card effect */
.container-card {
    width: 100%;
    max-width: 900px;
    margin: 20px auto;
    background-color: #fff;
    border-radius: 20px;
    box-shadow: 0 4px 100px rgba(0, 0, 0, 0.1);
    color: #fff;
    text-align: center;
}

/* Contenedor de la fila */
.image-row {
    display: flex;
    gap: 10px;
    justify-content: space-between;
    padding: 10px;
}

/* Estilos para las imágenes */
.image-row img {
    width: 100%;
    height: auto;
    max-width: 250px; /* Tamaño máximo de cada imagen */
    border-radius: 10px;
    object-fit:contain;
}

/*container verder */
.container-body {
    width: 100%;
    max-width: 900px;
    background-color:#76932A;
    color: #fff;
    padding: 40px;
}

/*contenedor de la fila */
.row-container {
    display: flex;
    justify-content: space-between; /* espacio entre elementos */
    align-items: flex-start; /* alineación en la parte superior */
    margin-bottom: 15px; /* espacio entre filas */
}

/*cada elemento dentro del row */
.item {
    text-align: start;
    padding: 10px;
    flex: 1; /* permite que todos los elementos crezcan uniformemente */
}
/*titulo y subtitulo */
.item h2 {
    margin: 0;
    font-size: 1.0em;
    color: #fff;
}

.item p {
    margin: 5px 0 0;
    font-size: 0.8em;
    color: #fff;
}

.linea-separadora {
    border: none; /*elimina el borde predeterminado */
    height: .6px; /*altura de la línea */
    background-color: white;
    margin: 20px; /*espacio vertical alrededor de la línea */
}

#cacao {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}


/* Contenedor semi redondeado */
.semi-rounded-container {
    border: 2px solid white;
    margin: 15px;
    padding: 10px;
    width: auto;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center; 
}
.row-buttons {
    display: flex;
    gap: 10px; /* espacio entre los elementos */
    align-items: flex-start; /* alineación en la parte superior */
    margin-bottom: 15px; /* espacio entre filas */
}

.container-map{
    margin: 25px;
    background-color: #fff;
    border-radius: 20px;
    box-shadow: 0 4px 100px rgba(0, 0, 0, 0.1);
    color: #fff;
    text-align: center;
}

/* contenedor del dropdown */
.dropdown {
    position: relative; /* Para posicionar el contenido del dropdown */
    display: inline-block; /* Permite al dropdown mostrarse en línea */
    margin: 20px; /* Margen para separarlo del borde */
}

/* Botón del dropdown */
.dropbtn {
    background-color: #76932A; /* Color de fondo */
    color: white; /* Color del texto */
    padding: 10px 20px; /* Espaciado interno */
    font-size: 16px; /* Tamaño de la fuente */
    border: none; /* Sin borde */
    cursor: pointer; /* Cambia el cursor al pasar el mouse */
}

/* Contenido del dropdown */
.dropdown-content {
    display: none; /* Oculta el contenido por defecto */
    position: absolute; /* Posiciona el contenido de manera absoluta */
    background-color: #f9f9f9; /* Color de fondo */
    min-width: 160px; /* Ancho mínimo del dropdown */
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); /* Sombra */
    z-index: 1; /* Asegura que el dropdown esté por encima de otros elementos */
}

/* Enlaces dentro del dropdown */
.dropdown-content a {
    color: black; /* Color del texto */
    padding: 12px 16px; /* Espaciado interno */
    text-decoration: none; /* Sin subrayado */
    display: block; /* Hace que el enlace ocupe toda la línea */
}

/* Cambio de color al pasar el mouse */
.dropdown-content a:hover {
    background-color: #f1f1f1; /* Color de fondo al pasar el mouse */
}

/* Mostrar el contenido del dropdown al hacer hover sobre el contenedor */
.dropdown:hover .dropdown-content {
    display: block; /* Muestra el contenido al hacer hover */
}

.dropdown:hover .dropbtn {
    background-color: #76932A; /* Cambia el color del botón al hacer hover */
}

.dropdown-container {
    border: 2px solid white; 
    border-radius: 55px;
    margin: 15px;
    padding: 10px;
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center; 
}

/* Estilo para la etiqueta */
label {
    font-size: 16px; /* Tamaño de fuente */
    font-weight: bold; /* Negrita */
    margin-bottom: 10px; /* Espacio debajo de la etiqueta */
    display: block; /* Mostrar en bloque para que ocupe toda la línea */
    color: #333; /* Color del texto */
}

/* Estilo para el select */
select {
    width: 100%; /* Ocupa todo el ancho del contenedor */
    max-width: 770px; /* Ancho máximo */
    padding: 10px; /* Espacio interior */
    border: 2px solid #76932A; /* Borde verde */
    border-radius: 20px; /* Bordes redondeados */
    background-color: #fff; /* Color de fondo */
    color: #333; /* Color del texto */
    font-size: 16px; /* Tamaño de fuente */
    appearance: none; /* Elimina la apariencia nativa del select */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8"><path fill="%2376932A" d="M6 8l-6-6h12z"/></svg>'); /* Flecha personalizada */
    background-repeat: no-repeat; /* No repetir la imagen de fondo */
    background-position: right 10px center; /* Posiciona la flecha */
    background-size: 12px; /* Tamaño de la flecha */
}

/* Estilo al hacer hover */
select:hover {
    border-color: #76932A; /* Cambia el color del borde al pasar el mouse */
}

/* Estilo al seleccionar */
select:focus {
    outline: none; /* Elimina el contorno predeterminado */
    border-color: #76932A; /* Cambia el color del borde al enfocar */
}



.button-row {
    display: flex;
    gap: 15px; /* Espacio entre botones */
    align-items: center;
}

.btn {
    background-color: white; 
    border: 2px solid #76932A; 
    color: #76932A; 
    padding: 12px 24px; 
    font-size: 16px;
    border-radius: 20px; 
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s; 
}

.btn:hover {
    background-color: #f7f8f35c; 
    color: white;
    box-shadow: 0 4px 100px rgba(0, 0, 0, 0.1);
}
a {
    color: inherit;  
    display: block;  
    width: 100%;  
    height: 100%;
    text-decoration: none;
}

/* ajustes generales para pantallas grandes */
@media (min-width: 1200px) {
    .container-card {
        padding: 20px;
    }
    .container-body {
        padding: 50px;
    }
}

/*ajustes para pantallas medianas */
@media (max-width: 992px) {
    .container-card {
        max-width: 800px;
        padding: 15px;
    }
    .container-body {
        padding: 30px;
    }
    .image-row img {
        max-width: 150px;
    }
}

/*ajustes para pantallas pequeñas (tabletas) */
@media (max-width: 768px) {
    .row-container {
        flex-direction: column;
        gap: 10px;
    }
    .item {
        text-align: left;
        padding: 8px;
    }
    .button-row {
        flex-direction: column;
        gap: 10px;
    }
    .btn {
        width: 100%;
    }
}

/*ajustes para pantallas muy pequeñas (móviles) */
@media (max-width: 576px) {
    .container-card {
        max-width: 100%;
        padding: 10px;
    }
    .container-body {
        padding: 20px;
    }
    .image-row {
        flex-direction: column;
        align-items: center;
        gap: 5px;
    }
    .image-row img {
        max-width: 100%;
    }
    .item h2 {
        font-size: 0.9em;
    }
    .item p {
        font-size: 0.8em;
    }
    .button-row {
        flex-direction: column;
        gap: 8px;
    }
    .btn {
        font-size: 14px;
        padding: 10px 15px;
        width: 100%;
    }
    label, select {
        font-size: 14px;
    }
}
/*tamaño de letra en botones para pantallas pequeñas */
@media (max-width: 768px) {
    .btn {
        font-size: 14px; /*tamaño más pequeño para pantallas pequeñas */
        padding: 10px 20px; /* ajusta el relleno si es necesario */
    }
    .container-map {
        margin: 10px;
    }
}

/*estilo por defecto para el footer */
.footer-text {
    font-size: 16px; /* Tamaño de fuente por defecto */
}

/*yamaño de fuente más pequeño para pantallas pequeñas */
@media (max-width: 768px) {
    .footer-text {
        font-size: 12px; /*tamaño de fuente reducido para pantallas pequeñas */
    }
}