/*FUENTES----------------------------*/
@font-face {
    font-family: 'ERAS';
    src: url('/assets/fonts/ERASBD.TTF') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'ERAS';
    src: url('/assets/fonts/ERASLGHT.TTF') format('truetype');
    font-weight: normal;
    font-style: normal;
}
/*-----------------------------------*/

/*CUERPO-----------------------------*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'ERAS', sans-serif;
    line-height: 1.6;
}

header {
    background-color: #333;
    color: #fff;
    padding: 1rem 0;
}

footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 1rem;
    width: 100%;
}

form input, form textarea {
    width: 100%;
    padding: 0.8rem;
    margin: 0.5rem 0;
    border: 1px solid #ccc;
    border-radius: 4px;
}

form button {
    padding: 1rem 2rem;
    background-color: #33c3f0;
    border: none;
    color: white;
    cursor: pointer;
    font-size: 1.1rem;
    margin-top: 1rem;
    border-radius: 4px;
}
/*-----------------------------------*/

/*Clases*/
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 2rem;
}

.navbar-center {
    justify-content: center;
}

.acc-dir {
    background-color: #fff;
    color: black;
    padding: 1rem 0;        /* espacio arriba y abajo */
    display: flex;
    justify-content: center;
    flex-wrap: wrap;        /* permite que los botones bajen a otra línea */
    gap: 1rem;              /* espacio entre botones */
    text-align: center;
}

.acc-dir h1 {
    font-size: 3rem;
}

.section {
    padding: 2rem;
}

.nav-button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    transition: background 0.3s;
}

/* Sombreado cuando el raton está encima de los botones */
.nav-button:hover {
    background-color: #0056b3;
}

/*Efecto de cartas para los apartados*/
/*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/
.card {
    background: rgba(255,255,255,0.85); /* Fondo blanco semi-transparente (85% opaco) */
    border-radius: 18px; /* Bordes redondeados con radio de 18px */
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.07); /* Sombra suave debajo de la tarjeta */
    margin: 18px 0; /* Espacio vertical (arriba y abajo) de 18px, sin margen a los lados */
    padding: 24px 28px; /* Espaciado interno (24px arriba/abajo, 28px izquierda/derecha) */
    position: relative; /* Posiciona la tarjeta como referencia para elementos pseudo (::after) */
    overflow: hidden; /* Oculta cualquier contenido que sobresalga de la tarjeta */
    transition: box-shadow 0.3s, transform 0.3s; /* Suaviza los cambios de sombra y transformación en 0.3s */
}
 
.card:hover {
    box-shadow: 0 6px 32px 0 rgba(0,0,0,0.13), 0 0 0 2px #fff3; /* Aumenta la sombra al pasar el mouse (hover) */
    transform: translateY(-4px) scale(1.015); /* Eleva ligeramente la tarjeta y la agranda un poco */
}

.card::after {
    content: ""; /* Crea un pseudo-elemento vacío */
    position: absolute; /* Posiciona el pseudo-elemento relativo a la tarjeta */
    left: 0; right: 0; bottom: 0; /* Ocupa todo el ancho inferior de la tarjeta */
    height: 38px; /* Altura del degradado en la parte inferior */
    pointer-events: none; /* Evita que el pseudo-elemento interfiera con interacciones del mouse */
    background: linear-gradient(180deg, transparent 60%, rgba(255,255,255,0.18) 100%); /* Degradado transparente a blanco */
    opacity: 0; /* Inicialmente invisible */
    transition: opacity 0.3s; /* Suaviza la aparición/desaparición */
}

.card:hover::after {
    opacity: 1; /* Hace visible el degradado en hover */
}
.project-card {
    background-color: rgb(235, 235, 235); /* Fija el color de fondo de la tarjeta a plateado */
    color: black; /* Establece el color del texto dentro de la tarjeta a negro */
    padding: 1.5rem; /* Añade espacio interno de 1.5rem en todos los lados */
    margin: 1rem; /* Deja un margen externo de 1rem alrededor de la tarjeta */
    border-radius: 8px; /* Redondea las esquinas con un radio de 8px */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Aplica una sombra difusa ligera alrededor de la tarjeta */
}
/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<*/
/*-----------------------------------*/