:root {
    --col-andina: #d32f2f; /* o el rojo exacto que desees */
    --black: #000; /* o el rojo exacto que desees */
  }

#headers .red-andina {
    background: var(--col-andina) !important;
}



#headers #navers.sombranav {
    box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.05), 0px 4px 0px 0px rgba(0, 0, 0, 0.05), 0px 6px 0px 0px rgba(0, 0, 0, 0.05), 0px 8px 0px 0px rgba(0, 0, 0, 0.05), 0px 10px 0px 0px rgba(0, 0, 0, 0.05), 0px 12px 0px 0px rgba(0, 0, 0, 0.05);
}

#headers .logo {
    display: block;
    width: 200px;
    filter: var(--svg-white);
}
/* ///////////////// CINTA ///////////////// */
#headers section.cinta {
    background: var(--col-090);
    color: var(--col-white);
    width: 100%;
    text-align: center;
    overflow: hidden;
}

    #headers section.cinta article {
        overflow: auto;
        white-space: nowrap;
    }

        #headers section.cinta article hr {
            display: inline-block;
            width: 1px;
            height: 40px;
            background: #ffffff38;
            margin: 0;
            padding: 0;
            vertical-align: top;
        }

        #headers section.cinta article a {
            display: inline-block;
            color: white;
            text-align: center;
            padding: 10px;
            text-decoration: none;
        }

            #headers section.cinta article a:hover {
                box-shadow: inset -1px -14px 6px rgba(0, 0, 0, 0.4), inset 0px -3px 0px var(--col-andina);
            }

        #headers section.cinta article::-webkit-scrollbar {
            width: 100%;
            height: 0;
            display: block;
        }
/* ///////////////// MOBILE NAV SIDEBAR ///////////////// */
#headers .sidebar .menu-sidebar {
    box-shadow: 5px 0 5px -5px var(--col-black);
    display: block;
    width: 65vw;
    bottom: 0;
    background: var(--col-white);
    color: var(--col-black);
    position: fixed;
    transform: translateX(-405px);
    transition: transform 0.3s cubic-bezier(0, 0, 0.3, 1);
    top: 0;
    z-index: 2;
    list-style-type: none;
    padding: 0;
    max-width: 400px;
    left: 0;
    overflow: scroll;
}

#headers .sidebar form {
    display: flex;
    align-items: center;
}

    #headers .sidebar form label {
        cursor: pointer;
    }

        #headers .sidebar form label img {
            filter: var(--svg-white);
            width: 20px;
        }

#headers .sidebar .menu-sidebar .arrow {
    position: absolute;
    line-height: 40px;
    font-size: 32px;
    color: var(--col-black);
    top: 0;
    z-index: 0;
}

    #headers .sidebar .menu-sidebar .arrow.left {
        left: 25px !important;
    }

    #headers .sidebar .menu-sidebar .arrow.right {
        right: 25px !important;
    }

#headers .sidebar .menu-sidebar li {
    height: 40px;
    line-height: 40px;
    font-size: 16px;
    text-align: left;
    position: relative;
    width: 100%;
    float: left;
    border-bottom: 1px solid var(--col-010);
}

    #headers .sidebar .menu-sidebar li a {
        display: block;
        color: var(--col-black);
        width: 100%;
        height: 100%;
        text-decoration: none;
        padding: 0 20px;
    }

    #headers .sidebar .menu-sidebar li:hover {
        background: var(--trans-10);
    }

    #headers .sidebar .menu-sidebar li .menu-sub {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: 0;
        overflow: hidden;
        background: white;
        visibility: hidden;
        transition: all 0.3s cubic-bezier(0, 0, 0.3, 1);
        border-left: 1px solid rgba(0, 0, 0, 0.15);
        list-style-type: none;
        padding: 0;
        margin: 0;
        z-index: 2;
        max-width: 400px;
    }

        #headers .sidebar .menu-sidebar li .menu-sub li {
            overflow: hidden;
        }

    #headers .sidebar .menu-sidebar li .submenu-label {
        cursor: pointer;
        width: 100%;
        height: 100%;
        display: block;
        padding: 0 20px;
        font-size: 16px;
        color: var(--col-black);
        content: none !important;
        align-content: center;

    }

    #headers .sidebar .menu-sidebar li .submenu-toggle {
        display: none;
    }

        #headers .sidebar .menu-sidebar li .submenu-toggle.active ~ .menu-sub,
        #headers .sidebar .menu-sidebar li .submenu-toggle:checked ~ .menu-sub {
            width: 65vw;
            visibility: visible;
            z-index: 1;
            transition: width 0.35s cubic-bezier(0, 0, 0.3, 1);
        }
/* ///////////////// SEARCH ///////////////// */
#headers article.buscador {
    position: absolute;
    display: flex;
}

    #headers article.buscador .search-wrapper {
        position: relative;
    }

    #headers article.buscador .search-wrapper {
        width: 100%;
        margin: auto;
    }

        #headers article.buscador .search-wrapper form {
            width: 220px;
            display: flex;
            background: white;
            border-radius: 5px;
            box-shadow: inset 0 4px 4px 4px rgba(0, 0, 0, 0.2), inset 0 4px 4px -4px rgba(0, 0, 0, 0.5), inset 0 4px 4px 0 rgba(0, 0, 0, 0.2);
        }

            #headers article.buscador .search-wrapper form img {
                margin: 0 10px;
            }

            #headers article.buscador .search-wrapper form input[type=text]:not(.browser-default):focus:not([readonly]) {
                border-bottom: none;
                -webkit-box-shadow: none;
                box-shadow: none;
            }

            #headers article.buscador .search-wrapper form input[type=text]:not(.browser-default) {
                background-color: transparent;
                border: none;
                border-bottom: none;
                border-radius: 0;
                outline: none;
                height: 1rem;
                width: 100%;
                font-size: 16px;
                margin: 0;
                padding: 0;
                -webkit-box-shadow: none;
                box-shadow: none;
                -webkit-box-sizing: content-box;
                box-sizing: content-box;
                -webkit-transition: border .3s, -webkit-box-shadow .3s;
                transition: border .3s, -webkit-box-shadow .3s;
                transition: box-shadow .3s, border .3s;
                transition: box-shadow .3s, border .3s, -webkit-box-shadow .3s;
            }

            #headers article.buscador .search-wrapper form .search-box {
                width: 80%;
                border: 1px solid #ccc;
                outline: 0;
                border-radius: 15px;
            }

                #headers article.buscador .search-wrapper form .search-box:focus {
                    box-shadow: 0 0 15px 5px #b0e0ee;
                    border: 2px solid #bebede;
                }

            #headers article.buscador .search-wrapper form .close-icon {
                border: 1px solid transparent;
                background: white;
                display: inline-block;
                vertical-align: middle;
                outline: 0;
                cursor: pointer;
                padding-left: 30px;
                width: 25px;
            }

                #headers article.buscador .search-wrapper form .close-icon:after {
                    content: url('../img/i_class-salir.svg');
                    display: block;
                    width: 20px;
                    height: 20px;
                    position: absolute;
                    z-index: 1;
                    right: 5px;
                    top: 0;
                    bottom: 0;
                    background: white;
                    margin: auto;
                    cursor: pointer;
                }

            #headers article.buscador .search-wrapper form input.search-box:not(:valid) ~ .close-icon {
                display: none;
            }

            #headers article.buscador .search-wrapper form input.search-box, .close-icon {
                position: relative;
                margin: 10px 0 !important;
            }
/* ///////////////// REDES SOCIALES ///////////////// */
#headers .floating-btn {
    right: 0;
    position: absolute;
    width: 45px;
    height: 45px;
    transition: width 0.7s;
    overflow: hidden;
    text-align: center;
    z-index: 1;
}

    #headers .floating-btn:hover {
        width: 395px;
    }

        #headers .floating-btn:hover nav {
            font-size: xx-large;
            transition: 0.1s;
            top: 30px;
            left: 32px;
        }

    #headers .floating-btn ul li.anchor {
        right: 0;
        z-index: 4;
        position: absolute;
        transition-delay: 0.2s;
        width: 45px;
        height: 45px;
        margin-right: 0;
    }

    #headers .floating-btn:hover ul li.anchor {
        transform: rotate(360deg);
    }

    #headers .floating-btn ul li {
        position: relative;
        width: 43.4px;
        height: 43.4px;
        float: left;
    }

        #headers .floating-btn ul li a {
            margin: auto !important;
            justify-content: center;
        }

            #headers .floating-btn ul li a img {
                filter: var(--svg-white);
                width: 25px;
            }

            #headers .floating-btn ul li a:hover {
                transition: 0.4s;
            }
/* ///////////////// DESTOCK NAV SANDWICH ///////////////// */
#headers #navers .dropdownmenu {
    position: absolute;
    width: 100%;
}

    #headers #navers .dropdownmenu input {
        cursor: pointer;
        position: absolute;
        padding: 0;
        margin: 0;
        height: 55px;
        width: 55px;
        border-bottom: none !important;
        -webkit-box-shadow: none !important;
        box-shadow: none !important;
        z-index: 1;
    }

    #headers #navers .dropdownmenu .dropdownmenu-text {
        cursor: pointer;
        position: absolute;
        background: var(--col-andina);
        width: 55px;
        height: 55px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

        #headers #navers .dropdownmenu .dropdownmenu-text img {
            filter: var(--svg-white);
            width: 20px;
        }

    #headers #navers .dropdownmenu .dropdownmenu-content {
        width: 100%;
        max-width: 100%;
        min-width: 100%;
        position: absolute;
        z-index: 2;
        top: 37px;
        padding-top: 18px;
        opacity: 0;
        visibility: hidden;
        list-style-type: none;
        transition: all 0.25s ease;
        -webkit-transition: all 0.25s ease;
        -moz-transition: all 0.25s ease;
        -ms-transition: all 0.25s ease;
        -o-transition: all 0.25s ease;
    }

        #headers #navers .dropdownmenu .dropdownmenu-content .collection .collection-item {
            padding: 5px 20px;
        }

    #headers #navers .dropdownmenu input:focus ~ .dropdownmenu-text {
        z-index: 2;
    }

    #headers #navers .dropdownmenu .dropdownmenu-content:hover,
    #headers #navers .dropdownmenu input:focus ~ .dropdownmenu-content {
        opacity: 1;
        visibility: visible;
        top: 42px;
    }
/* ///////////////// DESTOCK NAV MENU ///////////////// */
#headers #navers .nav-submenu {
    overflow: scroll;
    text-align: right !important;
    padding-left: 60px !important;
    display: flex;
    justify-content: center;
}

    #headers #navers .nav-submenu::-webkit-scrollbar {
        width: 100%;
        height: 0;
        display: block;
        background: #B71C1C;
    }

    #headers #navers .nav-submenu li.submenu {
        display: inline-block !important;
        height: 55px !important;
    }

        #headers #navers .nav-submenu li.submenu img {
            filter: var(--svg-white);
            width: 10px;
            margin-left: 10px;
        }

    #headers #navers .nav-submenu .submenu-item {
        position: absolute;
        z-index: 2;
        -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
        box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
    }

    #headers #navers .nav-submenu .menu-button {
        cursor: pointer;
    }

#headers #menu-toggle {
    display: none;
}
    #headers #menu-toggle.active ~ .menu-button .icon-close,
    #headers #menu-toggle:checked ~ .menu-button .icon-close {
        display: block;
    }

    #headers #menu-toggle.active ~ .menu-button .icon-open,
    #headers #menu-toggle:checked ~ .menu-button .icon-open {
        display: none;
    }

    #headers #menu-toggle.active ~ .menu-button:after,
    #headers #menu-toggle:checked ~ .menu-button:after {
        opacity: 1;
        pointer-events: auto;
        transition: opacity 0.3s cubic-bezier(0, 0, 0.3, 1);
        z-index: 5;
    }

    #headers #menu-toggle.active ~ .menu-sidebar,
    #headers #menu-toggle:checked ~ .menu-sidebar {
        transform: translateX(0);
        transition: transform 0.3s cubic-bezier(0, 0, 0.3, 1);
        z-index: 5;
    }

#headers .navbar-fixed {
    position: sticky;
    position: -webkit-sticky;
    top: -1px;
    left: 0;
    z-index: 4;
    transition: all 0.3s ease-in-out;
    display: block;
    height: 55px !important;
    line-height: 55px !important;
}

#headers .header-fixed {
    position: sticky;
    top: auto;
    left: 0;
    transition: all 0.3s ease-in-out;
    display: block;
    z-index: 2;
}

#headers .menu-button:after {
    opacity: 0;
    top: 0;
    left: 0;
    /* content: ""; */
    width: 100vw;
    display: block;
    position: fixed;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    pointer-events: none;
    transition: opacity 0.2s cubic-bezier(0, 0, 0.3, 1);
    transition-delay: 0.1s;
}

#headers .descargueapp {
    padding: 20px;
    display: inline-block;
    color: var(--col-black);
    margin-bottom: 30px;
}

    #headers .descargueapp ul li {
        margin: 0 10px;
        display: flex;
    }

    #headers .descargueapp a {
        display: contents;
        padding: 10px !important;
    }

        #headers .descargueapp a:hover {
            background-color: transparent;
        }

/* MEDIA QUERIES RELACIONADAS AL HEADER */
@media only screen and (min-width: 993px) {
    #headers .floating-btn {
        width: initial;
        overflow: initial;
    }

        #headers .floating-btn:hover {
            width: initial;
        }
}

@media only screen and (max-width: 992px) {
    #headers .logo {
        display: block;
        width: 150px;
    }

    #headers .header-fixed {
        top: 0;
    }
}

@media only screen and (max-width: 600px) {
    #headers .floating-btn ul li {
        width: 40px;
        height: 40px;
    }

    #headers .floating-btn:hover {
        width: 360px;
    }

    /* Agregar clase para simular el hover */
    #headers .floating-btn.hover-active {
        width: 360px; /* Igual al valor de hover */
    }

    #headers .logo {
        width: 120px !important;
    }
}


.btn.no-shadow,
.btn-floating.no-shadow {
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
}

.search-wrapper {
    display: flex;
    align-items: center;
    position: relative;
  }
  
  .search-form {
    display: flex;
    align-items: center;
    width: 100%;
  }
  
  .search-box {
    flex: 1;
    border: none;
    outline: none;
    padding: 0 10px;
    height: 35px;
    border-radius: 4px;
  }
  
  .search-wrapper img {
    margin-right: 8px;
  }
  
  .close-icon {
    background: none;
    border: none;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    cursor: pointer;
  }

  #headers .text-uppercase{
    text-transform: uppercase !important;
  }

  #headers .input-search{
    background-color: transparent;
    border: none;
        border-bottom: none;
        border-radius: 0;
        outline: none;
        height: 1rem;
        width: 100%;
        font-size: 16px;
        margin: 0;
        padding: 0;
        -webkit-box-shadow: none;
        box-shadow: none;
        -webkit-box-sizing: content-box;
        box-sizing: content-box;
        -webkit-transition: border .3s, -webkit-box-shadow .3s;
        transition: border .3s, -webkit-box-shadow .3s;
        transition: box-shadow .3s, border .3s;
        transition: box-shadow .3s, border .3s, -webkit-box-shadow .3s;
        position: relative;
        margin: 10px 0 !important;
        line-height: 1.15;
  }

  #headers .buscadorInput{
    height: 36px;
    width: 220px;
    display: flex;
    background: white;
    border-radius: 5px;
    box-shadow: inset 0 4px 4px 4px rgba(0, 0, 0, 0.2), inset 0 4px 4px -4px rgba(0, 0, 0, 0.5), inset 0 4px 4px 0 rgba(0, 0, 0, 0.2);
  }


  #headers .centrado-vertical{
    display: flex;
    align-items: center;
  }


  /* Contenedor flex solo para nav superior */
/* Contenedor flex solo para nav superior */
ul#nav-mobile.nav-flex-wrapper {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    width: 100%;
    padding: 0;
    margin: 0;
  }
  
  /* Botón de menú hamburguesa a la izquierda */
  ul#nav-mobile.nav-flex-wrapper > li.menu-btn-left {
    margin-right: 20px;
    flex-shrink: 0;
  }
  
  /* Contenedor de los items del menú centrado */
  ul#nav-mobile.nav-flex-wrapper .centered-menu-items {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    flex-wrap: wrap;
    gap: 12px;
  }
  
  /* Los <li> internos se alinean horizontalmente */
  ul#nav-mobile.nav-flex-wrapper .centered-menu-items li {
    display: inline-block;
    list-style: none;
    margin: 0;
  }
  
  /* Estilos generales para enlaces de navegación */
  ul#nav-mobile.nav-flex-wrapper .centered-menu-items li a {
    padding: 0 10px;
    font-size: 1rem;
    text-decoration: none;
    transition: color 0.2s ease;
  }
  

  
  /* Ajuste para evitar salto de línea del logo si aparece */
  #logomin {
    margin-right: 12px;
  }
  



.header-fixed{
    position: sticky;
    top: auto;
    left: 0;
    transition: all 0.3s ease-in-out;
    display: block;
    z-index: 2;
}

.menu-sticky {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1001;

  }
  

  #menu-toggle + label.menu-button::before,
  #menu-toggle + label.menu-button::after {
    content: none !important;
    display: none !important;
  }
  

  .text-dark-nav {
    color: #212121 !important;
}

.collection-item{
    line-height: 1.5rem;
    padding: 10px 20px;
    margin: 0;
    border-bottom: 1px solid #e0e0e0;
}

#headers .btn-navbar-m{
    color: var(--col-white);
    border: 1px solid var(--line-white);
    /* border: none; */
    border-radius: 2px;
    display: inline-block;
    height: 36px;
    line-height: 36px;
    padding: 0 16px;
    text-transform: uppercase;
    vertical-align: middle;
    color: white !important;
}


.flex-container {
    display: flex;
    align-items: center;
    justify-content: space-between; /* puedes cambiar a center si no usas derecha */
    width: 100%;
  }
  
.nav-left {
    flex: 0 0 auto;
  }
  
.nav-center {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
  }

  .width60{
    width: 60px !important;
  }

  .width80{
    width: 80px !important;
  }
  
  .width130{
    width: 130px !important;
  }

  .width100{
    width: 100px !important;
  }

  .width140{
    width: 140px !important;
  }

  .width150{
    width: 150px !important;
  }

  .width190{
    width: 190px !important;
  }

  .red-andina-text{
    color: var(--col-andina);
  }

  .black-andina-text{
    color: var(--black);
  }

  .app-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;  
    list-style: none;
    padding-left: 0;
    margin-top: 10px; 
    justify-self: center;

  }

  .items-menu-pc{
    padding: 5px 20px;
    display: block;
    -webkit-transition: .25s;
    transition: .25s;
    color: #26a69a;
    background-color: #fff;
    line-height: 1.5rem;
    border: none !important;
    max-width: 220px;
    text-align: none !important;
    padding: 5px 10px !important;
  }
  
  .collection a.collection-item:not(.active):hover {
    background-color: rgba(0, 0, 0, 0.1) !important;
    /* color: white; */
}


.items-nav-leidos{
    
    line-height: 30px !important;
    padding: 2px 12px !important;
    border-bottom: 0px solid white !important;
    border: none !important;
    font-size: 16.5px !important;
}


#dropdown2 .col.s6.collection.no-padding.no-border:last-of-type .collection a  {
    color: black !important; /* o el color que desees */
    font-size: 16.5px !important;
    border: none !important;
    line-height: 30px !important;
    padding: 2px 12px !important;
  }

  #dropdown2 .col.s6.collection.no-padding.no-border:last-of-type .collection .divider {
    height: 0px !important;
    overflow: hidden;
    background-color: #e0e0e0;
}

#dropdown2 .col.s6.collection.no-padding.no-border:last-of-type .collection li::marker {

    overflow: hidden !important;
    color: white;
}

.titular-zindex {
    z-index: 1 !important;
}

#headers .sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0,0,0,0.6); /* sombra oscura */
    z-index: 30 !important; /* menor que el menú */
    display: none; /* oculto por defecto */
  }
  #headers .menu-sidebar {
    z-index: 999 !important; /* por encima del overlay */
    position: fixed;
    background-color: white;
  }

  .body-scroll-lock {
    overflow: hidden;
  }
  .circulo {
    z-index: 1 !important;
  }
  

  .modal {
    display: none;
    position: fixed;
    z-index: 1003;
    top: 10%;
    left: 0;
    right: 0;
    margin: auto;
    width: 80%;
    max-width: 400px;
    background-color: black;
    /* padding: 20px; */
    border-radius: 8px;
  }
  
  .modal.show {
    display: block !important;
  }

  
  .modal .modal-footer {
    border-radius: 0 0 2px 2px;
    background-color: #fafafa;
    padding: 4px 6px;
    height: 56px;
    /* width: 100%; */
    text-align: right;
}


input:not([type]):focus:not([readonly]),
input[type=text]:not(.browser-default):focus:not([readonly]),
input[type=password]:not(.browser-default):focus:not([readonly]),
input[type=email]:not(.browser-default):focus:not([readonly]),
input[type=url]:not(.browser-default):focus:not([readonly]),
input[type=time]:not(.browser-default):focus:not([readonly]),
input[type=date]:not(.browser-default):focus:not([readonly]),
input[type=datetime]:not(.browser-default):focus:not([readonly]),
input[type=datetime-local]:not(.browser-default):focus:not([readonly]),
input[type=tel]:not(.browser-default):focus:not([readonly]),
input[type=search]:not(.browser-default):focus:not([readonly]),
textarea.materialize-textarea:focus:not([readonly]) {
  border-bottom: 1px solid transparent;
  -webkit-box-shadow: 0 1px 0 0 transparent;
  box-shadow: 0 1px 0 0 transparent;
}



.modal-css {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000; /* encima de todo */
    align-items: center;
    justify-content: center;
  }
  
  .modal-toggle:checked + .modal-css {
    display: flex;
  }
  
  .modal-overlay {
    z-index: 1002;
    display: block;
    opacity: 0.5;
    width: 100% !important;
    height: 1000% !important;
  }
  
  .modal-content-css {
    position: relative;
    background: #000;
    padding: 20px;
    border-radius: 5px;
    max-width: 400px;
    width: 90%;
    z-index: 10001;
    text-align: center;
  }
  
  .modal-close-btn {
    display: inline-block;
    margin-top: 15px;
    cursor: pointer;
    background: transparent;
    padding: 10px;
    border-radius: 3px;
    border: 1px solid #fff;
  }


  /* //// modal QR//// */

/* Fondo oscuro detrás del modal */
.modal-overlay {
    background-color: rgba(0, 0, 0, 0.7); /* Sombra más oscura */
}

/* Estilo del modal */
.modal {
    max-width: 500px; /* Ajusta el tamaño máximo del modal */
    margin: 10% auto; /* Asegura que el modal esté centrado */
    border-radius: 10px; /* Bordes redondeados */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Sombra más fuerte */
}

/* Mejorar estilo de contenido dentro del modal */
.modal-content {
    /* padding: 20px; */
    text-align: center; /* Asegura que el contenido esté centrado */
}

/* Estilo para las imágenes dentro del modal */
.modal img {
    display: block;
    margin: 0 auto;
    max-width: 80%; /* Limita el tamaño de la imagen */
}

/* Botón de salir */
.modal-footer {
    text-align: center; /* Centra el botón */
    padding: 15px;
}

.modal-footer a {
    background-color: #f44336; /* Botón rojo */
    color: white;
    /* padding: 10px 20px; */
    border-radius: 5px;
    font-weight: bold;
}

.modal-footer a:hover {
    background-color: #d32f2f; /* Color más oscuro al pasar el mouse */
}

.modal .modal-footer .btn-flat {
    margin: 0 10px 10px 10px;
}

/* /////////////// */

.three-columns {
    display: flex;
    justify-content: space-between;
}

.column {
    width: 30%; /* Cada columna ocupará un 30% */
    /* margin-bottom: 10px; */
}

/* Para hacer la presentación responsive en pantallas más pequeñas */
@media (max-width: 768px) {
    .column {
        width: 45%; /* Dos columnas en pantallas medianas */
    }
}

@media (max-width: 480px) {
    .column {
        width: 100%; /* Una columna en pantallas muy pequeñas */
    }
}



.container-footer {
    width: 93%;
    max-width: 1366px; /* o 1280px */
    margin: 0 auto;
}