/* Seleccionamos absolutamente todos los elementos de la página usando el asterisco (*) */
* {
    /* Hacemos que los bordes y espacios interiores (padding) se calculen hacia adentro, evitando que sumen ancho extra a las cajas */
    box-sizing: border-box;
}

/* Seleccionamos el cuerpo de la página (body) para darle estilos generales */
body {
    /* Cambiamos la fuente de toda la página a Arial o cualquier fuente sin patines (sans-serif) */
    font-family: Arial, sans-serif;
    /* Eliminamos los márgenes exteriores que los navegadores ponen por defecto */
    margin: 0;
    /* Eliminamos los espacios interiores por defecto */
    padding: 0;
    /* Colocamos un color de fondo gris muy claro usando un código hexadecimal */
    background-color: #f4f4f4;
    /* FORZAMOS a que se oculte cualquier elemento que intente salirse de la pantalla hacia los lados (elimina el scroll horizontal) */
    overflow-x: hidden;
}

/* Seleccionamos el encabezado principal (header) */
header {
    /* Le damos un color de fondo azul oscuro */
    background-color: #003366;
    /* Hacemos que todo el texto dentro del encabezado sea de color blanco */
    color: white;
    /* Centramos el texto horizontalmente */
    text-align: center;
    /* Añadimos 50 píxeles de espacio interior arriba y abajo, y 0 a los lados */
    padding: 50px 0;
}

/* Seleccionamos todas las secciones (section) de la página */
section {
    /* Añadimos 20 píxeles de espacio interior en todos los lados */
    padding: 20px;
    /* Establecemos que el ancho máximo de la sección sea de 800 píxeles */
    max-width: 800px;
    /* Centramos la sección en la pantalla aplicando margen automático a los lados */
    margin: auto;
}

/* Seleccionamos el contenedor que agrupa las tarjetas de los servicios */
.contenedor-servicios {
    /* Activamos el modo flexible (flexbox) para colocar elementos uno al lado del otro */
    display: flex;
    /* Distribuimos las tarjetas separándolas equitativamente en el espacio disponible */
    justify-content: space-between;
}

/* Seleccionamos cada tarjeta de servicio individualmente */
.servicio {
    /* Le damos a la tarjeta un color de fondo blanco */
    background: white;
    /* Añadimos 20 píxeles de espacio interior para que el texto no toque los bordes */
    padding: 20px;
    /* Añadimos 10 píxeles de margen exterior para separar las tarjetas entre sí */
    margin: 10px;
    /* Redondeamos las esquinas de la tarjeta ligeramente (5 píxeles) */
    border-radius: 5px;
    /* Establecemos el ancho de la tarjeta para que ocupe el 30% del espacio del contenedor */
    width: 30%;
    /* Añadimos una sombra gris muy suave para dar un efecto de relieve o profundidad */
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

/* Seleccionamos las cajas de texto y el área grande de texto dentro del formulario */
form input, form textarea {
    /* Hacemos que cada caja ocupe el 100% del ancho disponible en su línea */
    width: 100%;
    /* Añadimos 10 píxeles de margen en la parte inferior para separar un campo del otro */
    margin-bottom: 10px;
    /* Añadimos 10 píxeles de espacio interior para que al escribir, el texto respire */
    padding: 10px;
}

/* Seleccionamos todos los botones de la página */
button {
    /* Le damos un color de fondo verde estándar para botones de acción */
    background-color: #28a745;
    /* Hacemos que el texto del botón sea de color blanco */
    color: white;
    /* Le quitamos el borde negro feo que traen los botones por defecto */
    border: none;
    /* Le damos espacio interior: 10 píxeles arriba/abajo y 20 píxeles a los lados */
    padding: 10px 20px;
    /* Cambiamos la flecha del mouse por una manita cuando pase por encima del botón */
    cursor: pointer;
}

/* Seleccionamos el pie de la página (footer) */
footer {
    /* Centramos el texto horizontalmente */
    text-align: center;
    /* Añadimos 20 píxeles de espacio interior */
    padding: 20px;
    /* Le damos un color de fondo gris oscuro casi negro */
    background-color: #333;
    /* Hacemos que el texto sea de color blanco */
    color: white;
    /* Lo empujamos 20 píxeles hacia abajo para separarlo de la sección de contacto */
    margin-top: 20px;
}

/* ========================================== */
/* NUEVOS ESTILOS PARA ALINEAR EL LOGO Y TEXTO */
/* ========================================== */

/* Seleccionamos la caja principal que envuelve al logo y a los textos */
.contenedor-header {
    /* Activamos Flexbox para alinear los elementos internos en una sola fila (uno al lado del otro) */
    display: flex;
    /* Alineamos los elementos verticalmente al centro para que el logo no quede más arriba o abajo que el texto */
    align-items: center;
    /* Centramos todo el bloque completo en medio de la pantalla del encabezado */
    justify-content: center;
    /* Añadimos una separación de 30 píxeles específicamente entre el logo y la caja de textos */
    gap: 30px;
    /* Limitamos el ancho para que en pantallas gigantes no se separen demasiado */
    max-width: 1000px;
    /* Centramos el contenedor automáticamente si la pantalla es más ancha que 1000px */
    margin: auto;
}

/* Seleccionamos la caja que contiene únicamente el título h1 y el párrafo */
.textos-header {
    /* Forzamos a que el texto se alinee a la izquierda, ignorando el centrado general del header original */
    text-align: left;
}

/* Seleccionamos la imagen del logo a través de su clase */
.logo {
    /* Reducimos el ancho máximo a 150 píxeles para que encaje mejor como un icono lateral */
    max-width: 150px;
    /* Indicamos que la altura se ajuste automáticamente para no deformar el logotipo */
    height: auto;
    /* Quitamos el margen inferior porque ya no hay texto debajo, sino a un lado */
    margin-bottom: 0;
}

/* ========================================================================== */
/* REGLAS RESPONSIVAS (MEDIA QUERIES MEJORADAS)                               */
/* ========================================================================== */

/* Agrupamos celulares y tabletas: La regla aplica si la pantalla mide 768 píxeles de ancho o menos */
@media (max-width: 768px) {
    
    /* Seleccionamos el encabezado para acomodar el logo y el texto */
    .contenedor-header {
        /* Cambiamos la orientación a columna para apilar el logo arriba y el texto abajo */
        flex-direction: column;
        /* Reducimos el espacio de separación entre logo y texto a 15 píxeles */
        gap: 15px;
        /* Centramos ambos elementos horizontalmente en medio de la pantalla */
        text-align: center;
    }

    /* Seleccionamos la caja específica de los textos del encabezado */
    .textos-header {
        /* Forzamos el centrado del texto de bienvenida para que luzca bien en celular */
        text-align: center;
    }

    /* Seleccionamos el agrupador gigante de las tarjetas de servicios */
    .contenedor-servicios {
        /* Cambiamos la dirección para que las tarjetas se apilen una debajo de la otra en vertical */
        flex-direction: column;
        /* Aseguramos que todas las tarjetas bajen perfectamente centradas */
        align-items: center;
    }
    
    /* Seleccionamos cada tarjeta de servicio de forma individual */
    .servicio {
        /* Hacemos que la tarjeta ocupe el 100% del ancho que le permite la pantalla del celular */
        width: 100%;
        /* Le quitamos los márgenes a los lados (cero) para que no empujen la pantalla hacia afuera */
        margin-left: 0;
        margin-right: 0;
        /* Le damos un espacio de 20 píxeles solo abajo para separarla de la siguiente tarjeta */
        margin-bottom: 20px;
    }
}