/* la fuente de google fonts (TODAS LAS PAGINAS)*/
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap");
/* Estilos (TODAS LAS PAGINAS) */
body {
    margin: 0;
    padding: 0;
    font-family: "Poppins", sans-serif;
    color: #ffffff; /* Texto en blanco para que contraste con el fondo */
    min-height: 100vh; /* parecido a height pero esto hace que la altura sea forzada hacia el tamaño de la pantalla, asi no queda raro o demasiado alto */
    background-color: #1c1335; /* si no hay video pon este color */
}
/* el video de bucle esto para engancharlo al fondo en INDEX */
#video-de-fondo {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1; /* El orden de las capas de la pagina, siendo -1 la de abajo del todo */
}
/* Para los botones y que sea mas accesible de tocar (TODAS LAS PAGINAS) */
header {
    background-color: rgba(0, 0, 0, 0.7); /* colores */
}
/* La lista de los botones en si (TODAS LAS PAGINAS)*/
nav ul {
    display: flex; /* filas en horizontal */
    justify-content: space-around; /* reparteme los botones al ancho de la barra */
    list-style: none; /* quita los puntos negros redondos estos para que no se vean raros */
    margin: 0; /* para evitar el margen automatico */
    padding: 10px 0; /* espaciado para el grossor de la barra porque pegado se ve raro */
}
/* Para que funcionen en si los botones (TODAS LAS PAGINAS)*/
nav a {
    color: white; /* Color, literalmente eso, el color */
    text-decoration: none; /* quita el subrayado ese feo del enlace */
    font-size: 14px; /* Tamaño */
    padding: 6px 12px; /* espaciado */
    border-radius: 5px; /* Redondea las esquinas, asi no se ven tan feas */
}
/* aqui una pseudoclase */
nav a:hover {
    background-color: purple; /* Fondo moradito cuando pasas el raton por encima de los botones */
}
/* Separación para no pegar todo a los bordes (TODAS LAS PAGINAS) */
main {
    padding: 20px 40px; /* arriba abajo, izquierda derecha */
}
/* Centramos Los Titulos Para Que No Se Vea Feo (TODAS LAS PAGINAS)*/
h1,
h2,
h3,
main > p {
    /* Para todos los tamaños de titulos centralos */
    text-align: center;
}
/* Tambien centramos el pie de pagina para que se va bonito (TODAS LAS PAGINAS)*/
footer {
    text-align: center;
    padding: 20px 0;
    font-size: 12px; /* Letra más pequeñita */
    opacity: 0.6; /* Más transparente y discreto para que no llame tanto la atención */
}
footer a {
    /* buscame un enlace dentro del ANCHOR de el pie de pagina, y entonces */
    color: #c084fc; /* Color del enlace para que pegue con la página */
}
/* Enlaces dentro del contenido de las tarjetas */
section a {
    color: #c084fc; /* Color moradito claro como en el pie de pagina */
    text-decoration: none; /* Quitamos el subrayado */
}
section a:hover {
    color: white; /* El Color en el que se ilumina, denuevo*/
}
/* BOTONES PAGINA LAUNCHER */
h2 a {
    /* buscame un enlace dentro del ANCHOR de el un titulo de segundo nivel, y entonces */
    color: white; /* Para que no se vea azul */
    text-decoration: none; /* Denuevo quitamos el subrayado */
}
h2 a:hover {
    /* buscame un enlace dentro del ANCHOR de el de un titulo de segundo nivel, y entonces */
    color: #c084fc; /* Para que se ilumine, como antes */
}
/* CAJAS (TODAS LAS PAGINAS) */
section,
article {
    /* Si encuentras etiquetas con secciones o articulos entonces haz la cajita alrededor de ellos, hace que la pagina sea mucho mas limpia y el fondo no destaque tanto */
    background-color: rgba(0, 0, 0, 0.4); /* R , G , B Y transparencia que 0.4 es el 40%*/
    padding: 30px;
    max-width: 950px; /* por si acaso, no me fio de que el texto en se estire demasiado */
    margin: 30px auto; /* centra las cajitas hacia el medio para que quede mejor visualmente */
    border-radius: 8px;
}
/* El logo alineado al lado del nombre */
h2 img {
    /* Busca dentro de un titulo de segundo nivel si dentro hay una imagen, si la hay entonces */
    vertical-align: middle; /* Alinea el icono a media altura del texto */
    margin-right: 10px; /* Separación para que no choque con la palabra */
}
/* TABLA PARA LA PAGINA COMPARATIVA */
table {
    /* Para el contenido de la tabla... */
    width: 100%; /* Que la tabla ocupe todo el ancho de la tarjeta */
    border-collapse: collapse; /* Une los bordes para que no se vean líneas dobles feas */
    margin-top: 20px; /* Separación con el texto de arriba */
}
th,
td {
    /* Para cabeza de la tabla y las filas y columnas de su interior... */
    padding: 16px 20px; /* Espacio dentro de cada casilla para que el texto no este pegado */
    text-align: center; /* Alinea el texto a al centro para leer bien la comparativa porque si no se ve rarisimo*/
    border-bottom: 1px solid rgba(255, 255, 255, 0.2); /* Línea fina que separa cada fila en la parte de abajo de la caja*/
}
th {
    /* Para la cabezera de la tabla... */
    background-color: rgba(125, 40, 157, 0.4); /* Fondo moradito suave para los títulos */
}
/* PAGINA DE CONSEJOS */

/* No hace falta colocar nada, literalmente se reutiliza todo lo que hemos aplicado para el index asi nos ahorramos el trabajo con la cual, mejor por mi asi cumplo las 5 paginas sin reescribir denuevo */

/* FORMULARIO DE CONTACTO */
form {
    text-align: center; /* Centra las cajitas */
}
/* Las casillas de escribir */
input,
textarea {
    width: 85%; /* Ancho de la tarjeta */
    padding: 10px; /* Espaciado para que no se vea raro */
    margin: 8px 0; /* Separate unos pixeles para que no se vea junto */
    border: 1px solid rgba(255, 255, 255, 0.4); /* Borde blanco para cada cajita */
    border-radius: 5px; /* Esquinas redondeadas igual que el menú */
    background-color: rgba(255, 255, 255, 0.1); /* Caja medio translucida */
    color: white; /* Color de la letra, literalmente */
    font-family: "Poppins", sans-serif;
}
/* Boton de enviar, literalmente se llama button blue y es el de los apuntes */
#button-blue {
    width: 85%; /* Mismo ancho que la tarjeta de arriba asi no se ve descuadrado */
    padding: 12px; /* Mas espaciado yippie */
    background-color: #7d289d; /* Un Color morado para ir a juego con los demas colores */
    color: white; /* Color de la letra, literalmente */
    border: none; /* No me metas un borde */
    border-radius: 5px; /* Esquinas redondeadas igual que el menú */
    cursor: pointer; /* Manita al pasar por encima */
}
/* Pseudoclase obligatoria por rúbrica */
#button-blue:hover {
    background-color: purple; /* Se ilumina en morado como los botones del menú */
}
/* DISEÑO PARA MÓVILES */
/* Aplico este fix debido a que en pantallas moviles se rompen rapidamente las tablas, en tablets y ordenadores se ven bien */
@media (max-width: 768px) {
    /* de 0px a 768px porque mas arriba se consideran tablets... */
    main {
        padding: 10px; /* En vez de los 40px de ordenador, dejamos solo 10px */
    }
    section, /* Ajustamos el tamaño de las tarjetas  */
        article {
        padding: 15px; /* En vez de 30px, dejamos 15px de espacio */
        margin: 15px auto; /* Menos separación entre tarjeta y tarjeta */
    }
    /* Ajustamos los 5 botones del menú para el telefono */
    nav a {
        font-size: 11px; /* Letra más pequeña */
        padding: 5px 6px; /* Menos espacio entre botones */
    }
    /* Titulos mas visibles */
    h1 {
        font-size: 20px; /* Título principal más contenido */
    }
    h2 {
        font-size: 16px; /* Título secundario más contenido */
    }
    /* Tabla se rompe facil, aqui fix reduciendo el grosor de las casillas */
    th,
    td {
        padding: 8px 4px; /* Menos relleno asi cabe bien */
        font-size: 11px; /* Letra más pequeña */
    }
}