/*Poner color fondo, color de la letra, subrayado, borde redondeado, y que el elemento esté en forma de bloque para ponerle ancho y 
relleno al elemento de menú de inicio.*/
.enlaceInicio {
    text-decoration: underline;
    background-color: #ffffff;
    color: #00d4ff;
    border-radius: 1.25rem;/*20px*/
    padding: 0.625rem; /*10px*/
    width: 9.375rem; /*100px*/
    display: block;
}

/*Poner color de fondo, color de letra y relleno al main (parte principal de la web).*/
main {
    background-color: #cff7ff;
    color: #000000;
    padding: 3%;
}

/*Poner color de fondo, borde, relleno y margen abajo, y overflow: auto para asegurarse que todo el contenido es accesible sin necesidad de 
que aparezcan barras de desplazamiento.*/
section {
    background-color: #ffffff;
    border: 0.0625rem solid #8cecff;/*1px*/
    overflow: auto;
    padding-bottom: 1.5%;
    margin-bottom: 1.5%;
}

/*Poner el texto alineado horizontalmente en el centro y relleno a los títulos 2.*/
h2 {
    text-align: center;
    padding: 1.5%;
}

/*Poner el texto alineado horizontalmente en el centro y relleno arriba a los títulos 2 que sean hijos directos de una sección. 
Eliminar relleno abajo, izquierda y derecha de los títulos 2 que sean hijos directos de una sección.*/
section > h2 {
    text-align: center;
    padding: 3% 0% 0%;
}

/*Hacer que la imagen flote a la izquierda, poner tamaño (anchura y altura) a la imagen y márgenes derecho, abajo e izquierdo a la imagen 
que flota a la izquierda.*/
#imagen-izquierda img {
    float: left;
    width: 25%;
    height: 25%;
    margin: 0% 10% 1.5% 3%;
}

/*Poner el texto justificado, margen derecho, abajo e izquierdo de los párrafos de las secciones, poner altura de línea para que las líneas 
de los párrafos estén más separadas.*/
section p {
    text-align: justify;
    margin-right: 3%;
    margin-left: 3%;
    line-height: 1.5;
    margin-bottom: 1.25rem; /*20px*/
}

/*Poner margen arriba al primer párrafo de cada sección.*/
section p:first-of-type {
    margin-top: 2.5%;
}

/*Poner la fuente en negrita de los span que sean hijos directos de un párrafo.*/
p > span {
    font-weight: bold;
}

/*Poner color de letra a los enlaces que estén dentro de un párrafo.*/
p a {
    color: #000000;
}

/*Poner color de letra, la fuente en negrita y subrayado a los enlaces de los párrafos cuando se pasa el ratón por encima de los enlaces de 
los párrafos.*/
p a:hover {
    color: #0000ff;
    font-weight: bold;
    text-decoration: underline;
}

/*Hacer que los elementos después de cada sección se muestren debajo de la sección para que no les afecte la propiedad float de la imagen.*/
section::after {
    clear: both;
}

/*Poner borde redondeado a las imágenes de las secciones.*/
section img {
    border-radius: 1.25rem;/*20px*/
}

/*Hacer que la imagen flote a la derecha, poner tamaño (anchura y altura) a la imagen y márgenes derecho, abajo e izquierdo a la imagen que 
flota a la derecha.*/
#imagen-derecha img {
    float: right;
    width: 25%;
    height: 25%;
    margin: 0% 3% 1.5% 10%;
}

/*Poner el texto alineado horizontalmente en el centro a los elementos que tienen la clase enlace-records-gallegos.*/
.enlace-records-gallegos {
    text-align: center;
}

/*Poner borde a la tabla, que los bordes de las celdas estén pegados, poner el texto centrado, poner tamaño (anchura y altura) a la tabla y
márgenes arriba, abajo e izquierdo.*/
table {
    border: 0.0625rem solid black;/*3px*/
    border-collapse: collapse;
    text-align: center;
    width: 90%;
    height: 90%;
    margin-left: 4.6875rem;/*75px*/
    margin-top: 1.25rem;/*20px*/
    margin-bottom: 3.125rem;/*50px*/
}

/*Poner relleno a los títulos de la tabla.*/
th {
    padding: 0.3125rem;/*5px*/
}

/*Poner relleno y color de letra a las celdas de la tabla.*/
td {
    padding: 0.3125rem;/*5px*/
    color: #666666;
}

/*Poner borde derecho (tamaño, tipo y color) a los elementos que tienen la clase border-right.*/
.border-right {
    border-right: 0.0625rem solid #000000;/*1px*/
}

/*Poner borde abajo (tamaño, tipo y color) a los elementos que tienen la clase border-bottom.*/
.border-bottom {
    border-bottom: 0.0625rem solid #000000;/*1px*/
}

/*Poner color de fondo a las filas pares.*/
tr:nth-child(even)  {
    background-color: #8cecff;
}

/*Poner color de fondo a las filas impares.*/
tr:nth-child(odd) {
    background-color: #ffffff;
}

/*Poner color de letra y eliminar subrayado a los enlaces de la tabla.*/
table a {
    color: #666666;
    text-decoration: none;
}

/*Poner color de letra, la fuente en negrita y subrayado cuando se pasa el ratón por encima de los enlaces cuya URL de la página a la que 
se dirige el enlace contenga "persons".*/
a[href*="persons"]:hover {
    color: #ff0000;
    font-weight: bold;
    text-decoration: underline;
}

/*Poner color de letra, la fuente en negrita y subrayado cuando se pasa el ratón por encima de los enlaces que estén dentro de una sección 
cuya URL de la página a la que se dirige el enlace contenga "persons".*/
section a[href*="persons"]:hover {
    color: #0000ff;
    font-weight: bold;
    text-decoration: underline;
}

/*Poner color de letra a los elementos que tengan la clase rojo.*/
.rojo {
    color: #ff0000;
}

/* =========================
   CONTENEDOR FORMULARIO
========================= */

/* Imagen */
#imagen-izquierda-formulario {
    margin-top: 1.5%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3rem;
    flex-wrap: wrap;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 1rem;
}

#imagen-izquierda-formulario img {
    width: 260px;
    max-width: 100%;
    height: auto;
    display: block;
}

/* Formulario */
form {
    flex: 1;
    min-width: 280px;
    text-align: center;
    padding-top: 2rem;
    padding-right: 5%;
    box-sizing: border-box;
}

/* =========================
   CAMPOS OBLIGATORIOS
========================= */

.campoObligatorio {
    margin-left: 0.625rem;
    display: inline-block;
    height: 0.9375rem;
    vertical-align: middle;
}

/* =========================
   BLOQUES DE CAMPOS
========================= */

#nombreFormulario,
#correoFormulario,
#mensajeFormulario {
    margin-bottom: 1.25rem;
}

/* Labels */
#labelNombre,
#labelCorreo,
#labelMensaje {
    margin-bottom: 0.625rem;
    font-weight: bold;
}

/* =========================
   INPUTS Y TEXTAREA UNIFICADOS
========================= */

#nombre,
#correo,
#mensaxe {
    padding: 0.469rem;
    border: 1px solid #0000ff;
    border-radius: 0.625rem;
    width: 100%;
    max-width: 400px;
    box-sizing: border-box;
    font-family: inherit;
    font-size: 1rem;
}

/* Textarea específico */
#mensaxe {
    resize: vertical;
    min-height: 120px;
}

/* =========================
   BOTÓN
========================= */

form input[type="submit"] {
    margin-bottom: 1.25rem;
    padding: 0.938rem 2.188rem;
    background: linear-gradient(0deg, rgba(0,212,255,1) 0%, #090979 100%);
    color: #ffffff;
    font-weight: bold;
    border: none;
    border-radius: 1.25rem;
    cursor: pointer;
}

form input[type="submit"]:hover {
    text-decoration: underline;
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 768px) {

    #imagen-izquierda-formulario {
        flex-direction: column;
        align-items: center;
    }

    #imagen-izquierda-formulario img {
        width: 70%;
        max-width: none;
        margin: 1rem auto;
    }

    form {
        width: 100%;
        padding-right: 0;
        padding-top: 1rem;
    }

    #nombre,
    #correo,
    #mensaje {
        width: 90%;
    }
}