/* General */
/* Establece márgenes y relleno a cero y utiliza "border-box" para calcular el tamaño incluyendo bordes y relleno. */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Estilo global para el cuerpo del documento */
body {
    font-family: Arial, sans-serif; /* Define la fuente principal del sitio. */
    color: #3A3A3A; /* Establece el color del texto en blanco. */
    line-height: 1.6; /* Mejora la legibilidad al establecer la altura de línea. */
    background-color: #ffffff;
    background-size: cover; /* Asegura que la imagen de fondo cubra todo el espacio. */
    overflow-x: hidden; /* Previene el desplazamiento horizontal. */
}


/* Estilo del encabezado */
header {
    position: fixed; /* Hace que el encabezado permanezca visible al hacer scroll. */
    top: 0; /* Lo posiciona en la parte superior de la página. */
    width: 100%; /* Abarca todo el ancho de la ventana. */
    background-color: #3B6A47; /* Fondo semitransparente para contraste. */
    padding: 10px 20px; /* Espaciado interno para los elementos del encabezado. */
    display: flex; /* Utiliza diseño flexible para organizar los elementos horizontalmente. */
    justify-content: space-between; /* Distribuye los elementos en extremos opuestos. */
    align-items: center; /* Alinea verticalmente los elementos del encabezado. */
    z-index: 1000; /* Asegura que el encabezado esté siempre encima de otros elementos. */
}

/* Estilo del título en el encabezado */
header h1 {
    font-size: 1.8em; /* Tamaño del texto del título. */
    color: #3A3A3A; /* Azul claro para resaltar el título. */
}

/* Navegación dentro del encabezado */
header nav ul {
    list-style: none; /* Elimina los puntos de lista predeterminados. */
    display: flex; /* Muestra los elementos de la lista en una fila. */
    gap: 20px; /* Espaciado entre los elementos de la lista. */
}

/* Estilo de los enlaces de la barra de navegación */
header nav ul li a {
    text-decoration: none; /* Elimina el subrayado predeterminado de los enlaces. */
    color: #3A3A3A; /* Color de texto blanco. */
    font-weight: bold; /* Resalta los enlaces con texto en negrita. */
    padding: 5px 10px; /* Espaciado interno en los enlaces. */
    border-radius: 4px; /* Bordes redondeados para los enlaces. */
    transition: background-color 0.7s; /* Suaviza el cambio de color de fondo (opcional). */
}

/* Efecto al pasar el cursor sobre los enlaces */
header nav ul li a:hover {
    background-color: #478156; /* Fondo azul claro al pasar el cursor. */
    color: #ffffff; /* Cambia el color del texto a negro. */
}


.container_crud{
    text-decoration: none;
    align-items:center;
    display: flex;    
    justify-content: center;
    color: #3A3A3A; /* Color de texto blanco. */
    font-weight: bold; /* Resalta los enlaces con texto en negrita. */
    padding: 0px 10px; /* Espaciado interno en los enlaces. */
    border-radius: 4px; /* Bordes redondeados para los enlaces. */
    transition: background-color 0.7s; /* Suaviza el cambio de color de fondo (opcional). */
    gap: 5px;
}

.container_crud:hover{
    background-color: #478156; /* Fondo azul claro al pasar el cursor. */
    color: #ffffff; /* Cambia el color del texto a negro. */
}

#inicio {
    display: flex;
}

.inicio {
    margin: 55px;
}

.inicio2 {
    margin-top: 200px;
    margin-left: 100px;
}

.inicio2 h1 {
    font-size: 5em;
}

.imageninicio {
    padding-left: 100px;
}

/* Sección de contenido */
section {
    min-height: 100vh; /* Cada sección ocupa al menos el 100% de la altura de la ventana. */
    padding: 60px 20px; /* Espaciado interno para el contenido. */
    text-align: center; /* Centra el texto. */
    background-color: #F2E7D5;/* Fondo semitransparente para legibilidad. */
    margin-bottom: 20px; /* Espaciado entre secciones. */
}

/* Títulos dentro de las secciones */



.hero {
  position: relative;
  height: 100vh;
  background-image: url('img/fondo_hero.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #F2E7D5;
  text-align: center;
  padding: 0 20px;
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: inherit; /* usa la misma imagen de fondo */
  filter: blur(0px); /* grado de difuminado */
  z-index: 0;
}

.hero-content {
  position: relative;
  z-index: 1; /* para que el texto esté encima del blur */
  max-width: 600px;
}

section h1 {
    font-size: 2.5em;
    margin-bottom: 20px;
    color: #3A3A3A;
}

section h1.exclusive {
    font-size: 2.5em;
    margin-bottom: 20px;
    color: #F2E7D5;
}

section h2 {
    font-size: 1.5em; /* Tamaño grande para destacar títulos. */
    margin-bottom: 20px; /* Espaciado inferior para separación del texto. */
    color: #3A3A3A; /* Azul claro para los títulos. */
}

/* Texto y listas dentro de las secciones */
section p, section ul {
    font-size: 1.5em; /* Tamaño más grande para mejorar legibilidad. */
    margin: 10px 0; /* Espaciado superior e inferior. */
}

.flex-container {
    display: flex; /* Activa el modo Flexbox */ 
    justify-content: space-around; /* Espacia uniformemente los elementos */
    align-items: center; /* Centra los elementos verticalmente */
    flex-wrap: wrap; /* Permite que los elementos se ajusten a varias líneas */
    gap: 20px; /* Espaciado entre los elementos */
    padding: 20px; /* Espaciado interno del contenedor */
    background-color: #e0e0e0; /* Fondo gris claro */
    border-radius: 10px; /* Bordes redondeados */
    flex-direction: column;
}

.imagenes {
    padding: 20px;
    width: auto; /* Fija el ancho de las imágenes a 200px. */
    height: auto; /* Ajusta automáticamente la altura para mantener la proporción. */
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: space-around;
    gap: 100px;
}

.imagenes div{
    background-color: #ffffff;
    padding: 10px;
    border-radius: 8px;

}

.imagenes div img{
    max-width: 300px;
    min-height: 300px;
    border-radius: 8px;
}

.imagenes div p{
    color: #000000;
    font-size: 1.2em;
    margin-top: 10px;
}

button {
    width: 200px; /* Ocupa todo el ancho disponible. */
    padding: 10px; /* Espaciado interno. */
    background-color: #3B6A47; /* Fondo azul oscuro. */
    color: #ffffff; /* Texto blanco. */
    font-size: 20px; /* Tamaño del texto del botón. */
    border: none; /* Sin borde adicional. */
    border-radius: 5px; /* Bordes redondeados. */
    cursor: pointer; /* Cambia el cursor al pasar sobre el botón. */
    transition: background-color 0.3s ease; /* Transición suave al cambiar el color. */
}

button:hover {
    background-color: #478156; /* Azul más oscuro al pasar el cursor. */
}

a {
    width: 200px; /* Ocupa todo el ancho disponible. */
    padding: 10px; /* Espaciado interno. */
    background-color: #3B6A47; /* Fondo azul oscuro. */
    color: #ffffff; /* Texto blanco. */
    font-size: 20px; /* Tamaño del texto del botón. */
    border: none; /* Sin borde adicional. */
    border-radius: 5px; /* Bordes redondeados. */
    cursor: pointer; /* Cambia el cursor al pasar sobre el botón. */
    transition: background-color 0.3s ease; /* Transición suave al cambiar el color. */
    text-decoration: none;

}

a:hover {
    background-color: #478156; /* Azul más oscuro al pasar el cursor. */
}

.item{
    margin: 20px auto; /* Centra la sección y agrega espacio vertical */
    padding: 20px; /* Agrega espacio interno a la sección */
    max-width: 800px; /* Limita el ancho de la sección para mejor legibilidad */
    background: #fff; /* Fondo blanco para distinguir las secciones */
    border-radius: 8px; /* Agrega esquinas redondeadas */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Agrega una sombra sutil para profundidad */
}

.item2{
    margin: 20px auto; /* Centra la sección y agrega espacio vertical */
    padding: 20px; /* Agrega espacio interno a la sección */
    max-width: 800px; /* Limita el ancho de la sección para mejor legibilidad */
    background: #fff; /* Fondo blanco para distinguir las secciones */
    border-radius: 8px; /* Agrega esquinas redondeadas */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Agrega una sombra sutil para profundidad */
}

/* Contenedor del formulario */
.form-container {
    margin: 180px 80px 30px;
    width: 100%; /* Ocupa el 100% del ancho disponible. */
    max-width: 400px; /* Limita el ancho máximo del formulario. */
    background-color: #ffffff; /* Fondo blanco para contraste. */
    padding: 20px; /* Espaciado interno del formulario. */
    border-radius: 8px; /* Bordes redondeados para un diseño más agradable. */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra para dar profundidad. */
}

/* Título del formulario */
.form-container h2 {
    text-align: center; /* Centra el texto del título. */
    color: #004a8f; /* Azul oscuro para resaltar. */
    margin-bottom: 20px; /* Espaciado inferior para separar del formulario. */
}

/* Campos del formulario */
.form-container input, .form-container textarea {
    width: 100%; /* Ocupa todo el ancho del contenedor. */
    padding: 10px; /* Espaciado interno para comodidad al escribir. */
    margin-bottom: 15px; /* Espaciado inferior entre los campos. */
    border: 1px solid #ccc; /* Borde gris claro. */
    border-radius: 5px; /* Bordes redondeados. */
    font-size: 16px; /* Tamaño de texto estándar. */
}

/* Botón de envío del formulario */
.form-container button {
    width: 100%; /* Ocupa todo el ancho disponible. */
    padding: 10px; /* Espaciado interno. */
    background-color: #3B6A47; /* Fondo azul oscuro. */
    color: #ffffff; /* Texto blanco. */
    font-size: 16px; /* Tamaño del texto del botón. */
    border: none; /* Sin borde adicional. */
    border-radius: 5px; /* Bordes redondeados. */
    cursor: pointer; /* Cambia el cursor al pasar sobre el botón. */
    transition: background-color 0.3s ease; /* Transición suave al cambiar el color. */
}

/* Efecto al pasar el cursor sobre el botón */
.form-container button:hover {
    background-color: #478156; /* Azul más oscuro al pasar el cursor. */
}


#contacto{
    max-width: 100%;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    gap: 100px;
    flex-wrap: wrap;
}

.map{
    width: 100%;
    max-width: 800px;
    padding: 50px;
    display: flex;
    justify-content: center;
}


/* Pie de página */
footer {
    text-align: center; /* Centra el texto. */
    padding: 20px; /* Espaciado interno. */
    background-color: #3B6A47; /* Fondo semitransparente. */
    position: relative; /* Permite posicionarlo según el flujo normal del documento. */
    color: #ffffff; /* Texto blanco. */
    font-size: 0.9em; /* Texto más pequeño para el pie. */
}

/* ========================
   Diseño responsive
   ======================== */

/* Para tablets y pantallas medianas */
@media (max-width: 768px) {
    
    #inicio {
        flex-direction: column;
        align-items: center;
        padding: 20px;
    }

    .inicio {
        margin: 20px;
        text-align: center;
    }

    .inicio2 {
        margin: 20px;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .inicio2 h1 {
        font-size: 3em;
    }

    .imageninicio {
    display: none;
  }

    .imagenes {
        flex-direction: column;
        gap: 30px;
    }

    .imagenes div img {
        max-width: 90vw;
        min-height: auto;
    }

    #contacto {
        flex-direction: column;
        gap: 40px;
    }

    .map {
        padding: 20px;
    }
}

@media (max-width: 480px) {
    .inicio2 h1 {
        font-size: 2.2em;
    }

    .imageninicio {
    display: none;
  }
    .imagenes div p {
        font-size: 1em;
    }

    button {
        width: 100%;
        font-size: 18px;
    }

    .form-container h2 {
        font-size: 1.4em;
    }

    section h1 {
        font-size: 2em;
    }

    section p,
    section ul {
        font-size: 1.1em;
    }

    .item,
    .item2 {
        padding: 15px;
    }
}