/* No uses las fuentes por defecto. Carga una tipografía profesional mediante @font-face 
(Apartado 12 de los apuntes) */
/* Importa la fuente "Roboto" desde Google Fonts en distintos grosores (300, 400 y 700) */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap');

/* El asterisco (*) es el selector universal. Aplica estos estilos a TODOS los elementos de la web */
* {
    /* Aplica box-sizing: border-box a todos los elementos para que el padding y el border no descuadren 
    tus anchos de columna */
    /* Hace que el tamaño total de una caja incluya su relleno (padding) y su borde, evitando que se expanda de más */
    box-sizing: border-box; 
    /* Elimina el margen exterior por defecto de todos los elementos */
    margin: 0;
    /* Elimina el margen interior (relleno) por defecto de todos los elementos */
    padding: 0;
}

/* Aplica estilos a todo el cuerpo de la página */
body {
    /* Define la fuente que usará todo el texto de la web (Roboto). Si falla, usa cualquier fuente sin serifa (sans-serif) */
    font-family: 'Roboto', sans-serif;
    /* Establece un color de fondo gris muy clarito para toda la página */
    background-color: #f0f2f5;
    /* Establece el color principal del texto (un gris casi negro) */
    color: #333;
    /* Centra todo el texto de la página por defecto */
    text-align: center;
}

/* =========================================
   1. HEADER
   ========================================= */
header {
    /* Posición relativa: permite colocar elementos absolutos (como el ::before) dentro de este header sin que se salgan */
    position: relative; 
    /* El texto dentro del header será de color blanco */
    color: white;
    /* Oculta cualquier contenido que se salga de los bordes del header */
    overflow: hidden; 
    /* Añade una sombra negra y semitransparente detrás de todo el texto del header para que se lea mejor sobre la foto */
    text-shadow: 2px 2px 4px rgba(0,0,0,0.7); 
    /* Añade espacio interior: 100px arriba y abajo, 20px a los lados */
    padding: 100px 20px;
}

/* Capa pseudo-elemento para el fondo del header. Se usa para poner la foto sin afectar al texto */
header::before{
    /* Necesario para que el pseudo-elemento exista, aunque esté vacío */
    content: "";
    /* Posición absoluta: permite colocar esta capa libremente por encima o debajo del contenido normal */
    position: absolute;
    /* Ancla esta capa a la esquina superior izquierda del header (top 0, left 0) */
    top: 0; left: 0; 
    /* Hace que esta capa ocupe todo el ancho (100%) y todo el alto (100%) del header */
    width: 100%; height: 100%;
    /* Establece la imagen de fondo buscando en la carpeta "img" */
    background-image: url('../img/foto-fondo.jpg'); 
    /* Estira o encoge la imagen para cubrir todo el espacio sin deformarla (puede que recorte los bordes) */
    background-size: cover;
    /* Centra la imagen de fondo para que siempre se vea la parte central, sin importar la pantalla */
    background-position: center;
    /* Fija la imagen al fondo. Al hacer scroll, la imagen se queda quieta (efecto Parallax) */
    background-attachment: fixed; 
    /* Envía esta capa hacia atrás (debajo del texto) para que funcione como fondo */
    z-index: -1; 
    /* Aplica filtros a la imagen: la oscurece un 70% (brightness 0.3) y le quita la mitad del color (grayscale 50%) */
    filter: brightness(0.3) grayscale(50%); 
}

/* Estilos de la foto de perfil */
.foto-perfil {
    /* Define el ancho exacto de la foto en 600 píxeles */
    width: 600px;
    /* Define el alto exacto de la foto en 600 píxeles */
    height: 600px; 
    /* Redondea las esquinas. Un 50% en una imagen cuadrada la convierte en un círculo perfecto */
    border-radius: 50%; 
    /* Usa filtros (ej: grayscale o sepia) en tu foto de perfil, y haz que recupere su color original al pasar el ratón.*/
    /* Pone la imagen totalmente en blanco y negro (100% de escala de grises) */
    filter: grayscale(100%); 
    /* Aplica transiciones de al menos 0.5s para que los cambios sean suaves.*/
    /* Hace que cualquier cambio en la propiedad 'filter' tarde medio segundo (0.5s) en completarse de forma fluida (ease) */
    transition: filter 0.5s ease; 
}

/* Qué pasa cuando el usuario pasa el ratón por encima (hover) de la foto de perfil */
.foto-perfil:hover {
    /* Usa filtros (ej: grayscale o sepia) en tu foto de perfil, y haz que recupere su color original al pasar el ratón. */
    /* Quita el blanco y negro, devolviendo la foto a todo color (0% de escala de grises) */
    filter: grayscale(0%); 
}

/* Estilos para el texto de la biografía en el header */
.sobre-mi {
    /* Limita el ancho máximo del texto a 800 píxeles para que no sea muy largo y cueste leerlo */
    max-width: 800px;
    /* Centra la caja de texto horizontalmente en la pantalla (0 arriba/abajo, auto a los lados) */
    margin: 0 auto;
    /* Aumenta el tamaño de la letra (1.2 veces el tamaño normal de la web) */
    font-size: 1.2rem;
    /* Aumenta el espacio entre las líneas del párrafo para que sea más legible */
    line-height: 1.6;
    /* Añade una separación (margen) de 20 píxeles en la parte superior */
    margin-top: 20px;
    /* Hace que la letra sea más fina o delgada (peso 300) */
    font-weight: 300;
}

/* =========================================
   2. NAV
   ========================================= */
/* Estilos para la barra de navegación */
nav {
    /* Añade espacio interior de 20 píxeles arriba y abajo, y 0 a los lados */
    padding: 20px 0;
    /* Oculta lo que se salga de los límites del menú (necesario si las imágenes se mueven fuera) */
    overflow: hidden; 
    /* Evita que los elementos de dentro (las imágenes) salten a la siguiente línea si no caben */
    white-space: nowrap; 
}

/* Nota: <marquee> es una etiqueta de HTML antigua. Cumple su función visual, 
   pero se recomienda usar animaciones CSS3 (@keyframes) en proyectos reales */
marquee {
    /* Fija el ancho del área por la que se mueven los iconos a 300 píxeles */
    width: 300px;
}

/* Estilos para las imágenes que están dentro de la marquesina (logos de redes) */
marquee img {
    /* Limita el ancho de cada icono a 45 píxeles */
    width: 45px;
    /* Añade 30 píxeles de separación (margen) a los lados izquierdo y derecho de cada icono */
    margin: 0 30px;
}

/* =========================================
   3. MAIN
   ========================================= */
/* Estilos para la sección principal de la web (donde van las tarjetas) */
main {
    /* Espacio interior de 50 píxeles arriba/abajo y 20 a los lados */
    padding: 50px 20px;
    /* Limita el ancho máximo del contenedor principal a 1000 píxeles */
    max-width: 1000px;
    /* Centra el contenedor principal horizontalmente en la pantalla */
    margin: 0 auto;
    /* Color sólido para que el contenido tape la imagen de fondo fija */
    /* Pone un color de fondo gris claro para que esta sección sea sólida y tape el fondo fijo del header/footer al hacer scroll */
    background-color: #f0f2f5; 
    /* Posición relativa: necesaria para que el z-index funcione en este elemento */
    position: relative; 
    /* Asegura que esta sección se muestre por encima del fondo (z-index 0 está por encima del -1 que le dimos al fondo) */
    z-index: 0;
}

/* Contenedor que agrupa las tarjetas */
.contenedor-tarjetas {
    /* Separa el contenedor 30 píxeles por arriba del título anterior */
    margin-top: 30px;
}

/* En la sección de "Mis Proyectos" o "Mis Tecnologías", debes mostrar al menos 3 tarjetas alineadas horizontalmente usando la propiedad float (Apartado 8.1 de los apuntes) */
/* Estilos individuales para cada tarjeta de tecnología */
.tarjeta {
    /* Cada tarjeta ocupa el 30% del ancho disponible */
    width: 30%; 
    /* Añade un margen exterior del 1.5% alrededor de cada tarjeta para separarlas */
    margin: 1.5%;
    /* Fondo blanco para que destaque sobre el fondo gris del main */
    background-color: white;
    /* Espacio interior de 20 píxeles para que el contenido de la tarjeta no pegue en los bordes */
    padding: 20px;
    /* Empuja las tarjetas hacia la izquierda para colocarlas en línea (una al lado de otra) */
    float: left; 
    /* Redondea un poco las esquinas de las tarjetas (8 píxeles) */
    border-radius: 8px;
    /* Añade una sombra sutil debajo de la tarjeta para darle profundidad o efecto 3D */
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    
    /* Aplica transiciones de al menos 0.5s para que los cambios sean suaves. */
    /* Cualquier cambio de transformación (como el scale del hover) tardará medio segundo de forma suave */
    transition: transform 0.5s ease;
}

/* Estilos de las imágenes (logos) dentro de las tarjetas */
.tarjeta img {
    /* Fija el ancho del logo a 150 píxeles */
    width: 150px;
    /* Fija el alto del logo a 150 píxeles */
    height: 150px;
    /* Añade 10 píxeles de espacio debajo del logo para separarlo del texto que haya debajo */
    margin-bottom: 10px;
}

/* Añade una transformación (scale o rotate) cuando el usuario interactúe con tus tarjetas de proyecto. */
/* Qué pasa cuando el usuario pasa el ratón (hover) sobre una tarjeta */
.tarjeta:hover {
    /* Transforma la tarjeta: la escala (aumenta) a 1.1 veces su tamaño original (un 10% más grande) */
    transform: scale(1.1); 
}

/* Se aplica a un <div> vacío después de las tarjetas flotantes para limpiar y que el footer no se suba
 arriba (Apartado 8.1) */
.limpiar {
    /* Limpia (rompe) el flujo flotante (float). Obliga al siguiente elemento (el footer) a colocarse por debajo, y no al lado de las tarjetas flotantes */
    clear: both;
}

/* =========================================
   4. FOOTER
   ========================================= */
/* Estilos para el pie de página */
footer {
    /* Espacio interior de 40 píxeles arriba/abajo y 20 a los lados */
    padding: 40px 20px;
    /* Fondo de color casi negro */
    background-color: #1a1a1a; 
    /* El texto del pie de página será blanco */
    color: white;
}

/* Estructura del formulario */
.formulario {
    /* Usa Flexbox, un modelo de caja avanzado para organizar elementos fácilmente */
    display: flex;
    /* Coloca los elementos del formulario (inputs, botones) en columna (de arriba a abajo) */
    flex-direction: column;
    /* Limita el ancho del formulario a 400 píxeles para que no sea gigante en pantallas de ordenador */
    max-width: 400px;
    /* Centra el formulario (margen auto a los lados) y le da 20px de separación arriba */
    margin: 20px auto 0 auto;
    /* Flexbox: Crea un hueco de 15 píxeles exactos entre cada campo del formulario (inputs, botón) */
    gap: 15px; 
}

/* Estilos compartidos para las cajas de texto (input, textarea) y menús desplegables (select) */
.formulario input, 
.formulario textarea,
.formulario select {
    /* Fondo blanco para las cajas de texto */
    background-color: white;
    /* Color del texto que el usuario escribe (gris oscuro) */
    color: #333;
    /* Espacio interior de 12 píxeles para que el texto escrito no toque los bordes de la caja */
    padding: 12px;
    /* Quita los bordes feos que los navegadores ponen por defecto a los formularios */
    border: none;
    /* Redondea las esquinas de los campos (5 píxeles) */
    border-radius: 5px;
    /* Obliga a estos campos a usar la misma fuente que toda la web (Roboto), ya que a veces los formularios la ignoran */
    font-family: inherit;
}

/* Estilo específico para el menú desplegable */
.formulario select {
    /* Cambia el cursor del ratón a una "manita" para indicar que se puede hacer clic en él */
    cursor: pointer;
}

/* Estilo del botón de enviar del formulario */
.formulario button {
    /* Espacio interior de 12 píxeles, igual que los inputs, para mantener la proporción */
    padding: 12px;
    /* Color de fondo azul claro (cian) */
    background-color: #4ecae9;
    /* Texto del botón en color blanco */
    color: white;
    /* Sin borde */
    border: none;
    /* Puntero de "manita" al pasar el ratón */
    cursor: pointer;
    /* Esquinas redondeadas (5 píxeles) */
    border-radius: 5px;
    /* Aplica transiciones de al menos 0.5s para que los cambios sean suaves. */
    /* Hace que el cambio de color al pasar el ratón tarde medio segundo de forma suave */
    transition: background-color 0.5s ease;
}

/* Tus enlaces y botones deben usar la pseudoclase :hover para cambiar de color.*/
/* Qué pasa al pasar el ratón sobre el botón de enviar */
.formulario button:hover {
    /* Cambia el color de fondo a un azul un poco más oscuro */
    background-color: #3995ac;
}

/* =========================================
   5. BOTÓN FLOTANTE
   ========================================= */

/* REQUISITO: position: fixed para que esté siempre visible al hacer scroll */
.boton-flotante {
    /* Posición fija: saca el botón del flujo normal y lo clava en un punto de la ventana del navegador. No se mueve al hacer scroll */
    position: fixed; 
    /* Lo clava a 30 píxeles del borde inferior de la pantalla */
    bottom: 30px;
    /* Lo clava a 30 píxeles del borde derecho de la pantalla */
    right: 30px;
    /* Color de fondo azul claro (cian) */
    background-color: #4ecae9;
    /* Texto blanco */
    color: white;
    /* Espacio interior: 15px arriba/abajo, 25px a los lados, haciéndolo un poco más ancho que alto */
    padding: 15px 25px;
    /* Redondeo máximo (50px) para crear un botón en forma de pastilla/píldora */
    border-radius: 50px;
    /* Quita el subrayado típico que tienen los enlaces <a> por defecto */
    text-decoration: none;
    /* Pone el texto en negrita */
    font-weight: bold;
    /* Añade una sombra oscura para que resalte mucho sobre el contenido de la web */
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    /* Aplica transiciones de al menos 0.5s para que los cambios sean suaves. */
    /* Transición de medio segundo para el cambio de color de fondo */
    transition: background-color 0.5s ease;
}

/* Tus enlaces y botones deben usar la pseudoclase :hover para cambiar de color.*/
/* Qué pasa al pasar el ratón por encima del botón flotante */
.boton-flotante:hover {
    /* REQUISITO: :hover cambiando de color */
    /* Cambia a un azul más oscuro */
    background-color: #3995ac; 
}

/* =========================================
   6. ADAPTABILIDAD AL MÓVIL (Media Queries)
   ========================================= */

/* Móvil (< 576px): Las columnas deben pasar a ocupar el 100% del ancho y el menú de navegación debe adaptarse. */
/* REGLA ESPECIAL: Todo lo que esté dentro de esta llave (@media) SOLO se aplicará si la pantalla del dispositivo mide 576 píxeles de ancho o menos (es decir, móviles) */
@media only screen and (max-width: 576px) {
    
    /* En móviles, reescribimos el estilo de la foto de perfil */
    .foto-perfil {
        /* Ajuste de tamaño para móviles para que no rompa el ancho de pantalla */
        /* Reducimos el ancho de 600px a 250px para que quepa en la pantalla pequeña sin desbordar */
        width: 250px; 
        /* Reducimos el alto para mantenerla cuadrada/redonda */
        height: 250px; 
    }
    
    /* En móviles, reescribimos el estilo de las tarjetas de tecnologías */
    .tarjeta {
        /* REQUISITO: Las columnas pasan a ocupar el 100% del ancho */
        /* Dejan de ocupar el 30% y ahora ocupan todo el ancho disponible del móvil */
        width: 100%; 
        /* REQUISITO: Se desactiva el float para apilar en vertical */
        /* Desactiva la alineación en línea. Al quitar el float, obligatoriamente se ponen una debajo de la otra en vertical */
        float: none; 
        /* Cambiamos los márgenes: 10px de separación arriba/abajo y 0 a los lados */
        margin: 10px 0;
    }
    
    /* En móviles, reescribimos el estilo del botón flotante */
    .boton-flotante {
        /* Lo acercamos más al borde inferior (de 30px a 15px) para ahorrar espacio en la pantallita del móvil */
        bottom: 15px;
        /* Lo acercamos más al borde derecho */
        right: 15px;
        /* Hacemos el texto un pelín más pequeño (0.9 veces su tamaño normal) */
        font-size: 0.9rem;
    }
}