* {
    box-sizing: border-box;
}

body {
    font-family: 'Montserrat', sans-serif;
    margin: 0;
    padding: 0;
    height: 100vh;

    background-image: url('https://assets.revolut.com/published-assets-v3/198f49b6-fcf4-4ce5-88eb-a4eb0460b0ee/4401f454-1821-4b62-989a-d21e7e4e8286.png');
    background-size: cover;
    background-position: center;

}

.header-principal {
    display: flex;
    justify-content: center;
    padding: 60px 40px 30px 40px; /* Aumentamos el primer valor (arriba) a 80px */
    color: hsla(0, 0%, 16%, 0.959); 
    text-shadow: 2px 2px 5px rgba(41, 41, 41, 0.637); /* y sombra negra por detrás para que destaque */
    font-weight: 500; 
    transition: color 0.3s; 

}

.converter-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;

    border-radius: 8px; /*hacemos que las tarjetas tengan un borde redondo*/
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /*aqui se crea una pequeña sombra al box/tarjeta*/
    transition: transform 0.3s;
    background: linear-gradient(135deg,#ecebe3,#dfd9ba, #a89a5a);

    gap:20px;
    margin: 50px auto;
    padding: 40px;/* distancia interna dentro de la tarjeta */
    max-width: 500px; /*lo que ocupa la tarjeta*/

}

.escollir-moneda {
    display: grid;
    grid-template-columns: auto auto; /* auto se ajusta al contenido */
    align-items: center; /* centra verticalmente texto y cajas */
    gap: 15px 20px; /* primer número es espacio vertical, el segundo horizontal */
    justify-content: center;
}

.converter-container input,
.converter-container select { 

    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s;
    background-color: hsl(0, 0%, 89%);
    border: 1px solid #ccc; /* Para que el reborde se vea claro */

}

.escollir-moneda select {
    width: 180px;/* se modifica el ancho */
    padding: 8px;/* espacio interno para que no esté el texto pegado al borde */
}

.input-grup {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px; /* xra el espacio entre texto e input */
}

#boto-convertir {
    padding: 12px 25px;
    font-size: 1rem;
    font-weight: bold;
    color: white;
    background-color: #2c2c2c;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0,0,0,0.2);
    margin-top: 10px;
}

#boto-convertir:hover {
    background-color: #a89a5a;
    box-shadow: 0 6px 12px rgba(0,0,0,0.3);
    transform: scale(1.05); /*efecto de "saltar"*/
}