/* Importamos una tipografía limpia y minimalista de Google Fonts (Inter) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&display=swap');

:root {
    /* Definimos tus colores corporativos */
    --verde-tusmanos: #66ccaa; /* El verde menta de tu imagen */
    --verde-oscuro: #5bb395; /* Un tono un poco más oscuro para cuando pasas el ratón por el botón */
    --fondo-pantalla: #f4f7f6; /* Un gris muy claro, casi blanco */
    --texto-principal: #2d3748; /* Un gris oscuro, menos agresivo que el negro puro */
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--fondo-pantalla);
    color: var(--texto-principal);
}

/* Estilo para las tarjetas o contenedores blancos */
.tarjeta-minimalista {
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); /* Sombra muy suave para dar profundidad */
    border: none;
}

/* Botón principal con tu color verde */
.btn-principal {
    background-color: var(--verde-tusmanos);
    color: #ffffff;
    border: none;
    border-radius: 6px;
    padding: 10px 20px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-principal:hover {
    background-color: var(--verde-oscuro);
    color: #ffffff;
    box-shadow: 0 2px 4px rgba(102, 204, 170, 0.4);
}

/* Cajas de texto de los formularios */
.form-control:focus {
    border-color: var(--verde-tusmanos);
    box-shadow: 0 0 0 0.25rem rgba(102, 204, 170, 0.25); /* Resplandor verde al hacer clic */
}