@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
main{
    margin-top: 2rem;
}    
@media (max-width: 1024px) {
  main{
    margin-top: 1rem;
}   }
.navbar-brand {
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-size: 3rem;
}
@media (max-width: 1024px) { .navbar-brand { font-size: 2rem; } }
@media (max-width: 768px)  { .navbar-brand { font-size: 1.5rem; } }
.navbar-nav{
    gap: .25rem
}
.navbar-nav .nav-link.active{
    outline:2px solid #000; /* o color de alto contraste */
    outline-offset: 1px;
    padding-left: .5rem;
}
.navbar-nav .nav-link:hover {
    outline:2px solid #000; /* o color de alto contraste */
    outline-offset: 1px;
}
.navbar-nav .nav-link:focus-visible {
    outline: 3px solid #000; /* o color de alto contraste */
    outline-offset: 1px;
}
.navbar-toggler:focus-visible {
    outline: 3px solid #000;
    outline-offset: 2px;
}

.navbar .nav-flex {
    display: flex;
    justify-content: space-between;
}
.navbar-collapse {
    flex-grow: inherit;
    flex-basis: 100%;
    align-items: center;
}

/* Foco para links del selector de idioma */
nav[aria-label="Selector de idioma"] a:focus-visible {
    outline: 3px solid #000;
    outline-offset: 2px;
}

.img-header{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem 8rem;
}
.img-header img{
    width: 100%;
}

.proyectos-grid{
    margin-top: 3rem;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 1rem;
    padding: 0rem 4rem;
}
.proyecto-card {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    text-align: center;

    background-color: transparent;
    border-radius: 0.5rem;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        background-color 0.25s ease;
}

/* Imagen */
.proyecto-card img {
    transition: transform 0.3s ease, filter 0.3s ease;
}

/* Hover y focus dentro de la card */
.proyecto-card:hover,
.proyecto-card:focus-within {
    background-color: #f6f6f6;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    transform: translateY(-4px);
}

/* Imagen se activa */
.proyecto-card:hover img,
.proyecto-card:focus-within img {
    transform: scale(1.02);
    filter: contrast(1.05);
}

/* Título */
.proyecto-card .card-title {
    transition: text-decoration-color 0.2s ease;
}

/* Link accesible */
.proyecto-card a {
    color: #000;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 0.25em;
}

/* Hover y foco visible */
.proyecto-card a:hover,
.proyecto-card a:focus-visible {
    text-decoration: underline;
}

/* Foco claro para teclado */
.proyecto-card a:focus-visible {
    outline: 2px solid #000;
    outline-offset: 4px;
}

/* Respeto a personas con sensibilidad al movimiento */
@media (prefers-reduced-motion: reduce) {
    .proyecto-card,
    .proyecto-card img {
        transition: none;
        transform: none;
    }
}


.publicaciones ul {
    padding-left: 0; /* Quita el padding por defecto de la lista */
}

.publicaciones ul li {
    list-style: none;
    margin-bottom: 1.5rem; /* Un poco más de aire entre items */
}

.publicaciones ul li a {
    color: black;
    font-size: 18px;
    font-weight: 400;
    text-decoration: none; /* Quitamos el subrayado por defecto */
    display: block; /* Importante: hace que todo el bloque sea clicleable y permite padding */
    padding: 10px 15px; /* Espacio interno para que el hover se vea bien */
    border-radius: 8px; /* Bordes redondeados suaves */
    transition: all 0.2s ease-in-out; 
    border-left: 3px solid transparent; /* Preparamos un borde para el hover */
}

.publicaciones ul li a:hover,
.publicaciones ul li a:focus { /* Añadimos focus para accesibilidad con teclado */
    background-color: #f8f9fa; /* Un gris muy sutil (Bootstrap light) */
    transform: translateX(10px); /* Movemos el texto un poco a la derecha en lugar de escalarlo */
    border-left: 3px solid #8f8f8f; /* Detalle visual elegante */
    color: #333; /* Opcional: cambio leve de color */
}

.redes a{
    text-decoration: none;
}
.redes a:hover{
    text-decoration: underline;
}





/* PROYECTOS */

.proyecto{
 margin-top: 3rem;
}

.title{
    margin-top: 2.5rem;
    border-bottom: 1px solid #dee2e6;
    padding-bottom: 0.5rem;
    margin-bottom: 1.5rem;

}
.list{
        padding-left: 0;
    list-style: none;
}
.list li{
      margin-bottom:.5rem;
}

.cv h3{
    font-size: 20px;
    color: #898989;
}