/* 1. Base y Tipografía */
body {
    /* Fondo con imagen y un filtro claro para que el texto sea legible */
    background-image: linear-gradient(rgba(255, 240, 246, 0.5), rgba(255, 240, 246, 0.5)), url("fondo_final.jpg");
    background-size: cover;       /* Cubre toda la pantalla */
    background-position: center;  /* Centra la imagen */
    background-attachment: fixed; /* El fondo no se mueve al bajar */
    
    font-family: 'Quicksand', sans-serif; 
    text-align: center;
    padding: 30px;
    margin: 0;
    color: #444; 
}

h1 {
    font-family: 'Luckiest Guy', cursive;
    color: #ff69b4; 
    font-size: 3rem;
    text-shadow: 3px 3px 0px white;
    margin-bottom: 30px;
}

/* 2. Contenedor de las Tarjetas */
.contenedor-proyectos {
    display: flex;
    flex-wrap: wrap; 
    justify-content: center;
    gap: 25px;
    padding: 20px;
}

/* 3. Estilo de la Tarjeta */
.tarjeta-agnes {
    background-color: rgba(255, 255, 255, 0.95); /* Blanco un poco transparente */
    border: 3px solid #ffb6c1;
    border-radius: 20px;
    padding: 20px;
    margin: 10px;
    width: 280px; 
    box-shadow: 4px 4px 15px rgba(0,0,0,0.1);
    transition: all 0.3s ease; 
}

.tarjeta-agnes:hover {
    transform: translateY(-10px); 
    box-shadow: 0px 10px 25px rgba(255, 105, 180, 0.4); 
    border-color: #ff69b4;
}

.tarjeta-agnes h2 {
    font-family: 'Luckiest Guy', cursive;
    color: #9c27b0; 
    margin-top: 10px;
    font-size: 1.5rem;
}

/* 4. Estilo de las Fotos (Ajuste de caras) */
.foto-tarjeta {
    width: 100%;       
    height: 180px;     
    object-fit: cover; 
    object-position: top; /* <--- Enfoca la parte superior de la imagen */
    border-radius: 15px; 
    margin-bottom: 15px;
    border: 2px solid #fff0f6;
}

/* 5. Botones y Enlaces */
.boton-enlace {
    display: inline-block;
    font-family: 'Luckiest Guy', cursive;
    background-color: #ff4081;
    color: white;
    padding: 12px 25px;
    text-decoration: none;
    border-radius: 25px;
    margin-top: 15px;
    font-size: 1rem;
    transition: background 0.3s, transform 0.2s;
    border: none;
}

.boton-enlace:hover {
    background-color: #e91e63;
    transform: scale(1.1); 
}

.link-atras {
    display: inline-block;
    margin-top: 40px;
    color: #d81b60;
    text-decoration: none;
    font-family: 'Luckiest Guy', cursive;
    font-size: 1.2rem;
    background: white;
    padding: 10px 20px;
    border-radius: 20px;
    border: 2px solid #ffb6c1;
    transition: 0.3s;
}

.link-atras:hover {
    background: #ffb6c1;
    color: white;
}

/* 6. Adaptación para Móviles */
@media (max-width: 600px) {
    .tarjeta-agnes {
        width: 90%; 
        max-width: 350px;
    }
}