.main-header {
width:80%;
}
.header-fixed {
    display: flex;
    justify-content: center;
}
.icon-30 {
font-size: xxx-large !important;
}
*, h1, h2, h3, h4, h5, h6, h5.sub-title {
font-family: 'Montserrat', sans-serif;
}
header .site-logo
{
max-width: 60%;
min-width: 120px;
}
.title-group
{
font-family: 'Montserrat', sans-serif;
}
.menu-nav.pull-right
{
visibility: hidden!important;
display: none!important;
}
col-xs-4.col-sm-8.col-md-8.col-offset-md-1.hidden-xs
{
visibility: hidden !important;
}
.menu-btn {
display: block!important;
padding-right: 1rem;
font-size: 4rem !important;
}
font-size: 4rem !important;
}
.icon-30
{
color: #4b1c23 !important;
}
.menu-wrap
{
background-color: #4b1c23 !important;
}
.superimposed-r
{
background-color: #E5D5C1;
}
.superimposed
{
background-color: #E5D5C1;
}
.line-mix-o::before, .line-mix-o::after
{
border-bottom: #353433;
}
.title-group h2
{
color: #4b1c23 !important;
}
.title-group p
{
color: #4b1c23 !important;
}
.info-box
{
background-color: #FAF6F1;
border: 1px solid #4b1c23;
}
.info-box a
{
color: #861e32;
}
.info-box-border
{
border-bottom: 2px solid #861e32;
}
.p-t-80
{
margin-top: 100px;
}
.sub-title
{
letter-spacing: 0px;
}
.menu-rs .r-mv span
{
background: #fff;
}
.menu-rs .menu-mb li a
{
border-bottom: 1px dashed #E5D5C1;
}
.section-light
{
background: #F9F5F0;
}
.container
{
width:unset;
padding:0;
}
.page-header-section {
margin-top:50px;
}
/* Cambiar a blanco todos los textos dentro de la sección oscura */
.bg-540b23 h2, 
.bg-540b23 h5, 
.bg-540b23 p {
    color: #ffffff !important;
}

/* Cambiar el color de las estrellas y las líneas decorativas */
.bg-540b23 .star-group i,
.bg-540b23 .line-mix::before,
.bg-540b23 .line-mix::after {
    color: #ffffff !important;
    border-color: #ffffff !important;
}

/* Cambiar el color del texto y el borde del botón "Ver ejemplos" */
.bg-540b23 .ht-btn-2 {
    color: #ffffff !important;
    border-color: #ffffff !important;
}

/* --- 1. CONTENEDOR MAESTRO --- */
.bg-f .row-m-0 {
    position: relative !important;
    height: 140px !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center;
    width: 100%;
    mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
}

/* --- 2. COLUMNAS (DESKTOP) --- */
.bg-f .col-sm-3 {
    position: absolute !important;
    width: auto !important;
    /* Reducimos el ancho en desktop para que no estén tan lejos */
    min-width: 320px !important; 
    margin: 0 !important;
    padding: 0 20px !important;
    text-align: center;
    white-space: nowrap !important;
    
    /* Bajamos la velocidad en desktop (más segundos = más lento) */
    animation: loopInfinito 25s linear infinite;
}

/* --- 3. DELAYS DESKTOP (25s / 4 = 6.25s) --- */
.bg-f .col-sm-3:nth-child(1) { animation-delay: -18.75s; }
.bg-f .col-sm-3:nth-child(2) { animation-delay: -12.5s; }
.bg-f .col-sm-3:nth-child(3) { animation-delay: -6.25s; }
.bg-f .col-sm-3:nth-child(4) { animation-delay: 0s; }

@keyframes loopInfinito {
    0% { transform: translateX(100vw); opacity: 0; }
    5%, 95% { opacity: 1; }
    100% { transform: translateX(-100%); opacity: 0; }
}

/* --- 4. AJUSTE PARA MÓVIL (Mantenemos espacio pero subimos velocidad) --- */
@media (max-width: 767px) {
    .bg-f .row-m-0 {
        height: 120px !important;
    }

    .bg-f .col-sm-3 {
        padding: 0 60px !important; /* Espacio de unas 4 letras aprox */
        min-width: 650px !important; /* Parachoques suficiente pero no exagerado */
        
        /* Aceleramos en móvil: 20s en lugar de 36s */
        animation-duration: 20s !important;
        animation-name: loopMovil !important;
    }

    /* Re-calculamos delays para 20s (20/4 = 5s) */
    .bg-f .col-sm-3:nth-child(1) { animation-delay: -15s !important; }
    .bg-f .col-sm-3:nth-child(2) { animation-delay: -10s !important; }
    .bg-f .col-sm-3:nth-child(3) { animation-delay: -5s !important; }
    .bg-f .col-sm-3:nth-child(4) { animation-delay: 0s !important; }
}

@keyframes loopMovil {
    0% { transform: translateX(110vw); opacity: 0; }
    5%, 95% { opacity: 1; }
    100% { 
        /* Sale lo suficiente para no estorbar al que viene */
        transform: translateX(-650px); 
        opacity: 0; 
    }
}

/* Pausa al pasar el mouse */
.bg-f .row-m-0:hover .col-sm-3 {
    animation-play-state: paused;
}