/* === GENERAL === */
body {
    font-family: 'Roboto', sans-serif;
    margin: 0;
    padding: 0;
}

/* Texto general */
body,
p,
span,
li,
a {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
}

/* Encabezados */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
}

nav .nav-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Más altura al menú */
nav.red {
    height: 100px;
    line-height: 47px;
}

/* Letras del menú */
nav.red ul li a {
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.5px;
    transition: all 0.2s ease;
}

/* Hover elegante */
nav.red ul li a:hover {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 6px;
}

/* Separación entre links */
nav.red ul {
    gap: 22px !important;
}

/* BOTONES DEL MENÚ – HOVER MÁS PEQUEÑO */
nav.red ul li a {
    padding: 0 20px;
    /* área del botón */
}

/* Hover discreto */
nav.red ul li a:hover {
    background: rgba(255, 255, 255, 0.15);
}

/* COMPENSAR ALTURA DEL NAVBAR */
#inicio{
    margin-top:38px;
  }

  
@media (max-width: 600px) {
    .hero-container {
        display: flex;
        flex-direction: column;
    }

    .hero-text {
        order: 1;
    }

    .hero-image {
        order: 2;
        margin-top: 20px;
    }
}

/* Cambia el color del borde al hacer focus */
input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus {
    border-bottom: 1px solid #d32f2f !important;
    /* rojo oscuro */
    box-shadow: 0 1px 0 0 #d32f2f !important;
}

/* Cambia el color del label cuando está activo (es decir, al escribir) */
label.active {
    color: #d32f2f !important;
}

/* Evita el verde en la validación exitosa */
input.valid,
textarea.valid {
    border-bottom: 1px solid #d32f2f !important;
    box-shadow: 0 1px 0 0 #d32f2f !important;
}

/* También el label si es válido */
input.valid+label,
textarea.valid+label {
    color: #d32f2f !important;
}

/* Si quieres también anular el rojo por defecto de error (opcional) */
input.invalid,
textarea.invalid {
    border-bottom: 1px solid #e53935 !important;
    box-shadow: 0 1px 0 0 #e53935 !important;
}

input.invalid+label,
textarea.invalid+label {
    color: #e53935 !important;
}

/* Efecto hover para todos los botones rojos */
.btn.red,
.btn.red.darken-1,
.btn.red.darken-2,
.btn.red.darken-3,
.btn.red.darken-4 {
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.btn.red:hover,
.btn.red.darken-1:hover,
.btn.red.darken-2:hover,
.btn.red.darken-3:hover,
.btn.red.darken-4:hover {
    background-color: #b71c1c !important;
    /* rojo más oscuro al pasar el mouse */
    box-shadow: 0 4px 8px rgba(183, 28, 28, 0.4);
    /* sombra sutil */
}

/* También aplica a btn-small y btn-large */
.btn-small.red:hover,
.btn-large.red:hover {
    background-color: #b71c1c !important;
    box-shadow: 0 4px 8px rgba(183, 28, 28, 0.4);
}

/* Para botones flotantes */
.btn-floating.red:hover {
    background-color: #b71c1c !important;
}

/* === QUITAR COLOR A ÍCONOS PARA HEREDAR TEXTO === */
.material-icons,
.fab {
    color: inherit !important;
}

footer {
    padding: 0.1rem 0;
}