:root {
    --pantone-7421c: #A6192E; /* Guinda intenso */
}

/* Aplicarlo al fondo del header */
.header {
    background-color: var(--pantone-7421c);
}

/* Usarlo en texto, botones y otros elementos */
.text-puebla {
    color: var(--pantone-7421c);
}

.btn-puebla {
    background-color: var(--pantone-7421c);
    color: white;
    border: none;
}

.btn-puebla:hover {
    background-color: #8D162A; /* Versión un poco más oscura */
}
/* Tipografía global */
body {
    font-family: Arial, sans-serif;
}

/* CONTENEDORES GENERALES */
.inicio-container {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    right: 10vh;
    width: 100%;
    min-height: 85px;
    position: relative; /* Para que el fondo solo esté en esta parte */
}
.espacioParaMensaje{
    min-height: 110px !important;
}



/* MEDIA QUERIES */
@media (max-width: 768px) {
    .inicio-container {
        flex-direction: column;
        align-items: center;
    }


    .form-container {
        width: 100%;
        margin-right: 0;
    }
    .footer-container {
        flex-direction: column;
        align-items: center;
    }

    .footer-info-icons img {
        width: 100px;
    }

    #chatbot {
        width: 40%; /* Ajusta el ancho del chatbot */
    }

    #ocelote-icon {
        width: 60px;
        height: auto;
    }
    
}

@media (max-width: 571px) {
    .espacioParaMensaje{
        min-height: 160px !important;
    }
}