:root{
    --accent:#00A8AB;
    --text:#000;
    --bg:#fff;
    --card:#ffffff;
    --border:#000000;
}

*{
    box-sizing:border-box;
    margin:0;
    padding:0;
    font-family:Arial, Helvetica, sans-serif;
}

body{
    margin: 1.5rem;
    font-family: 'Raleway', sans-serif;
    background-image: url('../img/textura-fondo.jpg');
    background-size: cover;
    background-attachment: fixed;
}

/* DIVIDER */
.divider {
    border: none;
    height: 2px;
    background-color: #00A8AB;
    margin: 20px 5% 50px;
}


.section h1{
    letter-spacing:2px;
    text-align: center;
    color: #00A8AB;
    font-family: 'Geologica', sans-serif;
    font-size: 2rem;
    margin-bottom: 10px;
}

.filter-section{
    display:flex;
    flex-direction:column;
    gap:0.5rem;
    max-width:300px;
    margin-bottom:2rem;
}

.filter-section label{
    font-weight:bold;
    font-size:0.9rem;
}

.filter-section select{
    padding:0.6rem;
    border:1px solid #ccc;
    border-radius:4px;
    font-size:0.9rem;
}

.grid-actores{
    display:grid;
    grid-template-columns:1fr;
    gap:1.5rem;
    
}

.card{
    width: 270px; 
    height: 430px;
    background:var(--card);
    border:1px solid #e0e0e0;
    box-shadow:0 4px 10px rgba(0,0,0,0.1);
    transition:transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover{
    transform:translateY(-4px);
    box-shadow:0 8px 18px rgba(0,0,0,0.15);
}

.card img{
    
    display:block;
}

.card-info{
    padding-bottom: 3rem;
    border-bottom:2px solid #000;
    margin: 1rem;
    
}

.card-info h3{
    font-size:22px;
    font-weight:700;
    
}

/* DESKTOP */
@media (min-width:768px){
    body{
        padding:2rem 4rem;
    }

    .section h1{
        font-size:3rem;
        margin-bottom:1rem;
    }

    .filter-section{
        flex-direction:row;
        align-items:center;
        gap:1rem;
        max-width:600px;
    }

    .grid-actores{
        grid-template-columns:repeat(4, 1fr);
        gap:2rem;
    }
}