body {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    margin: 0;
    padding: 0;
    line-height: 1.6;
    background-color: #FDF1E3;
    color: #111;
}

header {
    text-align: center;
}

header .sub {
    font-size: 1.2rem;
}

header .title {
    font-size: 2rem;
}

blockquote {
    font-style: italic;
    font-size: 1.4rem;
}

section {
    font-size: 1.2rem;
    text-align: center;
    padding-top:1rem
}

section .title {
    font-size: 2rem;
}

footer {
    background-color: white;
    letter-spacing: 3px;
    color: black;
    text-align: center;
    padding: 1rem;
    padding-top: 3rem;
}

a img {
    max-width: 50px;
    padding-right: 2rem;
    padding-left: 2rem;
}

/*----------------------- IMAGENES -----------------------*/

.banner {
    width: 80%;
    max-height: 400px;
    display: block;
    margin: 0 auto;
    object-fit: cover;
    border-radius: 10%;
}

.pre-service {
    width: 80%;
    max-height: 300px;
    display: block;
    margin: 0 auto;
    object-fit: cover;
}

/*----------------------- SERVICIOS -----------------------*/

.container {
    display: flex;
    gap: 20px;
    justify-content: center;
    align-items: flex-start;
    padding: 0 2rem;
}

.item{
    margin: 2rem 1rem; /* Margen vertical más grande que horizontal */
    flex: 1;
    max-width: 30%;
    min-width: 300px; /* Ancho mínimo para mantener legibilidad */
    background-color: white;
    box-sizing: border-box;
    border-radius: 10px;
    transition: transform 0.3s ease; /* Efecto hover opcional */
    text-align: center;
    font-size: 1.2rem;
    padding: 1rem;
    cursor: pointer;
    list-style: none;
}
.item:hover {  /*Hace que los items se levanten cuando pase el cursor por arriba*/
    transform: translateY(-5px); /* Efecto hover opcional */
}

.item img {
    width: 100%;
    height: 200px;
    display: block;
    object-fit: cover; /* Para que las imágenes mantengan proporción */
    border-radius: 10px;
}

.item p {
    padding: 0 1rem 1rem;
    margin: 0;
    text-align: center;
    font-size: medium;
}

.item h3 {
    font-weight: 500;
}

/* -------------------- RESPONSIVE PADDING -------------------- */

/* Móviles pequeños */
@media (max-width: 600px) {
    header, section {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* Móviles en general */
@media (max-width: 770px) {
    .container {
        flex-direction: column;
        align-items: center;
        gap: 15px;
        padding: 1rem; /* Menos padding en móviles */
    }

    .item {
        max-width: 100%; /* Ocupa todo el ancho disponible */
        min-width: unset; /* Elimina el mínimo de 300px */
        width: 100%; /* Asegura que ocupe todo el contenedor */
        margin: 0.5rem 0; /* Menos margen vertical */
    }

    .item img {
        height: 150px; /* Altura ligeramente menor para móviles */
    }

    .item {
        padding: 1.5rem; /* Padding ligeramente menor */
        font-size: 1rem; /* Tamaño de fuente ligeramente menor */
    }

    .banner {
        width: 90%;
        max-height: 400px;
        padding: 1rem
    }
}

/* Tablets y pantallas medianas */
@media (min-width: 780px) and (max-width: 1023px) {
    header, section {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

/* Escritorio */
@media (min-width: 1024px) {
    header, section {
        padding-left: 14rem;
        padding-right: 14rem;
    }
}

/* -------------------- FORMULARIO DE CONTACTO -------------------- */

.cotizacion-form {
    background-color: white;
    padding: 2rem;
    border-radius: 1rem;
    max-width: 500px;
    margin: auto;
    box-shadow: 0 0 10px rgba(89, 47, 33, 0.084);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.cotizacion-form input,
.cotizacion-form textarea {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    padding: 1rem;
    border: 2px solid gray;
    border-radius: 1rem;
    font-size: 1rem;
    box-shadow: inset 0 0 5px rgba(0,0,0,0.05);
}

.cotizacion-form button {
    font-size: 1.1rem;
    background-color: white;
    color: #111;
    border-radius: 2rem;
    padding: 1rem;
    border: 3px solid gray;
    cursor: pointer;
    transition: background 0.3s ease;
}

.cotizacion-form button:hover {
    background-color: whitesmoke;
}

.cotizacion-form select {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    padding: 1rem;
    border: 2px solid gray;
    border-radius: 1rem;
    font-size: 1rem;
    box-shadow: inset 0 0 5px rgba(0,0,0,0.05);
}

/* Estilos para el foco del select */
.cotizacion-form select:focus {
    outline: none;
    border-color: #111
}

/* Estilos para las opciones */
.cotizacion-form option {
    padding: 0.5rem;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.cotizacion-form option:hover {
    background-color: whitesmoke;
}

/*--------------------------------------------------------*/

/*
| Propiedad          | Función                              | Ejemplo                          |
| ------------------ | ------------------------------------ | -------------------------------- |
| `color`            | Color del texto                      | `color: red;`                    |
| `background-color` | Color de fondo                       | `background-color: #f0f0f0;`     |
| `border`           | Borde (ancho, tipo, color)           | `border: 2px solid black;`       |
| `border-radius`    | Bordes redondeados                   | `border-radius: 10px;`           |
| `box-shadow`       | Sombra alrededor de cajas o imágenes | `box-shadow: 4px 4px 10px gray;` |
| `opacity`          | Opacidad/transparencia               | `opacity: 0.5;`                  |


| Propiedad         | Función                        | Ejemplo                               |
| ----------------- | ------------------------------ | ------------------------------------- |
| `font-size`       | Tamaño del texto               | `font-size: 16px;`                    |
| `font-family`     | Tipo de fuente                 | `font-family: 'Poppins', sans-serif;` |
| `font-weight`     | Grosor del texto               | `font-weight: bold;`                  |
| `text-align`      | Alineación del texto           | `text-align: center;`                 |
| `text-decoration` | Decoraciones (subrayado, etc.) | `text-decoration: none;`              |
| `line-height`     | Espacio entre líneas           | `line-height: 1.5;`                   |

| Propiedad   | Función                            | Ejemplo              |
| ----------- | ---------------------------------- | -------------------- |
| `width`     | Ancho del elemento                 | `width: 300px;`      |
| `height`    | Alto del elemento                  | `height: 200px;`     |
| `max-width` | Ancho máximo                       | `max-width: 100%;`   |
| `padding`   | Espacio interno (dentro del borde) | `padding: 10px;`     |
| `margin`    | Espacio externo (fuera del borde)  | `margin: 20px auto;` |

| Propiedad                         | Función                                  | Ejemplo                    |
| --------------------------------- | ---------------------------------------- | -------------------------- |
| `display`                         | Tipo de caja (block, inline, flex, etc.) | `display: flex;`           |
| `position`                        | Posición (relative, absolute, etc.)      | `position: absolute;`      |
| `top/right/...`                   | Coordenadas si usas `position`           | `top: 10px; left: 5px;`    |
| `float`                           | Alinear a la izquierda o derecha         | `float: left;`             |
| `text-align`                      | Alineación horizontal del texto          | `text-align: center;`      |
| `align-items` / `justify-content` | Centrado en flexbox                      | `justify-content: center;` |

| Propiedad              | Función                            | Ejemplo                             |
| ---------------------- | ---------------------------------- | ----------------------------------- |
| `cursor`               | Tipo de cursor al pasar por encima | `cursor: pointer;`                  |
| `transition`           | Animación suave al cambiar valores | `transition: all 0.3s ease;`        |
| `hover` (pseudo-clase) | Estilo al pasar el mouse           | `button:hover { background: red; }` |
*/