#info_header {
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    background-color: var(--color_corporativo);
    padding: 0.5rem 0;
}

/* TITULO */
#titulo {
    background-image: radial-gradient(circle, rgb(114, 114, 114) 0%, rgba(128, 128, 128, 0) 60%);
            
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-position: 80% 90%;
    background-size: 50vw 50vw;

    width: 100%;
    background: #dedede;
    border-bottom: solid 1px grey;
    overflow: hidden;
}

#imagen_titulo {
    position: absolute;
    top: 0;
    left: 0;
    width: 80%;
    opacity: 0.07;
}

#titulo .mitad {  
    position: relative;

    padding: 0 5vw 0 15vw;
    width: 45%;
}

#mitad_titulo {
    width: 55% !important;

    display: flex;
    flex-direction: column;

    justify-content: center;
}

#mitad_titulo a {
    margin-top: 2rem;
    text-decoration: none;
}

#titulo h1 {
    margin-bottom: 1rem;
    z-index: 99;
    position: relative;
    font-weight: 999;
    font-size: 3vw;
    color: var(--color_corporativo);
    line-height: 1.2; 
}

#titulo button, #titulo a {
    position: relative;
    z-index: 999;
    padding: 10px 20px;

    background: var(--color_corporativo);
    border: none;
    border-radius: 16px;
    font-size: 2vw;
    color: #ffffff;
    cursor: pointer;
    transition: background 0.3s ease;
}

#titulo button:hover, #titulo a:hover {
    background: #1e0f4c;
}

/* WEB */
#web {
    box-shadow: rgba(50, 50, 50, 0.4) 0px 5px 15px;

    top: 0vw;  
    right: 15vw;

    width: 50vw;
    z-index: 999;
    position: relative;
    border-radius: 16px;
    background-color: #EDEFF3;
    color: grey;
}

#mitad_web {
    padding-top: 5vw !important;
    padding-bottom: 5vw !important;
}

#imagen_ticket {
    width: 15vw;
    margin-top: 0.5vw;
    border-radius: 16px;
}

#barra_app {
    height: 3.5vw;
    border-radius: 16px 16px 0 0;
    display: flex;
    align-items: center;
    padding: 0.7vw;

    background-color: #505050;
}

#barra_app span {

    border-radius: 99vw;

    width: 1.2vw;
    height: 1.2vw;

    margin-left: 0.5vw;
}

#barra_app #amarillo {
    background: #f5ff5e;
}

#barra_app #verde {
    background: #59e766;
}

#barra_app #rojo {
    background: #ff5e5e;
}

#barra {
    display: flex;
    flex-direction: column;
}

#ticket_izquierda {
    width: 50%;

    padding: 2.5vw;
}

#factura {
    box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 15px;
    font-weight: 1;
    padding: 1vw;
    height: 100%;
    border-radius: 16px;
    background-color: rgba(255, 255, 255);
}

#factura hr {
    border: solid rgb(228, 228, 228) 0.1vw;

    border-radius: 16px;

    margin: 1vw 0;
}

#factura h3 {
    font-size: 2vw;
}

#factura p {
    font-size: 1.7vw;
}

#texto_factura {
    display: grid;
}

#texto_factura span {
    
    margin: 0.5vw 0;
    background-color: rgb(228, 228, 228);
    border-radius: 1vw;
    width: 100%;
    height: 0.8vw;
}

#texto_factura #imagen_qr {
    margin-top: 0.5vw;
    width: 4vw;
}

#ticket_derecha {
    position: relative;

    padding: 2.5vw;
    display: flex;
    flex-direction: column;

    width: 50%;

    background-color: rgb(255, 255, 255);
}

#ticket_derecha span {
    margin: 0.5vw 0;
    background-color: rgb(198, 198, 198);
    border-radius: 16px;
    width: 100%;
    height: 0.8vw;
}

#ticket_derecha .row {
    gap: 0.5vw;
}

#difuminado_uno {
    position: absolute;
    top: 0;
    right: 0;

    z-index: 99999;

    width: 30%;
    height: 100%; 
    background: linear-gradient(to left, var(--background_uno) 10%, rgba(128, 128, 128, 0) 80% );
}

/* Áreas Clave */
#empresa {
    padding: 40px 10vw;
    background-color: #f4f4f9;
    text-align: center;

    display: flex;
    gap: 2vw;
}

#empresa h2 {
    margin-bottom: 30px;
    font-size: 2rem;
    color: #333;
}

/* TICKETBAI */
#ticketbai {
    background-image: radial-gradient(circle, rgb(112, 112, 112) 0%, rgba(128, 128, 128, 0) 50%),
                      radial-gradient(circle, rgb(255, 255, 255) 20%, rgba(128, 128, 128, 0) 70%);

    background-repeat: no-repeat, no-repeat, no-repeat;
    background-position: 0% 50%, 70% 50%;
    background-size: 50vw 50vw;
}

#mitad_factura {
    display: flex;
    justify-content: center;
    align-items: center;
}

#factura_dos {
    border: solid rgb(193, 193, 193) 0.1vw;
    
    box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 15px;
    font-weight: 1;
    padding: 1vw;

    width: 20vw;
    height: 100%;
    border-radius: 16px;
    background-color: rgba(255, 255, 255);
}

#factura_dos hr {
    border: solid rgb(228, 228, 228) 0.1vw;

    border-radius: 16px;

    margin: 1vw 0;
}

#factura_dos h3 {
    color: grey !important;
    font-size: 2vw;
}

#factura_dos p {
    font-size: 1.7vw;
}

#div_tbai {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);

    position: absolute;
    top: 12vw;
    left: 25vw;

    background-color: white;
    padding: 1vw;
    border-radius: 16px;
    border: solid rgb(193, 193, 193) 0.1vw;
}

#imagen_ticketdos {
    width: 18vw;
}

#mitad_ticketbai {
    padding: 0 5vw;
}

#mitad_ticketbai i {
    color: var(--color_corporativo);
    font-size: 2vw;
}

#mitad_ticketbai h3 {
    font-size: 1.7vw;
    color: var(--color_corporativo);
}

#mitad_ticketbai p {
    font-size: 1.7vw;
    margin-bottom: 2vw;
}

/* STOCKS*/
#mitad_stock {
    padding: 0 0 0 15vw;
}

#stock i {
    color: var(--color_corporativo);
    font-size: 2vw;
}

#stock h3 {
    font-size: 1.7vw;
    color: var(--color_corporativo);
}

#stock p {
    font-size: 1.7vw;
    margin-bottom: 2vw;
}

#mitad_lista {
    display: flex;
    justify-content: center;
    align-items: center;
}

#lista {
    border: solid rgb(193, 193, 193) 0.1vw;
    
    box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 15px;
    font-weight: 1;
    padding: 1vw;
    
    width: 40vw;
    border-radius: 16px;
    background-color: rgba(255, 255, 255);
}

#lista h3 {
    font-size: 2vw;
    color: grey !important;
}

#lista hr {
    border: solid rgb(228, 228, 228) 0.1vw;

    border-radius: 16px;

    margin: 1vw 0;
}

#lista table {
    width: 100%;
    height: 14vw;
}

#lista table tr td, th {
    border-radius: 0.2vw;
    background-color: rgb(228, 228, 228);
}

#div_tbai_dos {
    z-index: 99;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);

    position: absolute;
    top: 9vw;
    left: 0vw;

    width: 30vw;
    background-color: white;
    padding: 1vw;
    border-radius: 16px;
    border: solid rgb(193, 193, 193) 0.1vw;
}


#div_tbai_dos .column {
    width: 50%;
}

#div_tbai_dos table {
    width: 100%;
    height: 100%;
}

#div_tbai_dos table tr td {
    padding-left: 0.5vw;
    border-radius: 8px;
    background-color: rgb(228, 228, 228);
}
  
#div_tbai_dos table th {
    padding-left: 0.5vw;
    border-radius: 8px;
    background-color: rgb(51, 138, 238);
    color: white;
}

/* AREAS DE INTERES */
#empresas {
    padding: 5vw 15vw;


    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    z-index: 999;
}

#empresas .grid_container {
    margin-top: 2vw;

    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1vw;
}

#empresas .grid_item {
    border: solid rgb(193, 193, 193) 0.1vw;
    background-color: #ffffff;
    color: var(--color_corporativo);
    padding: 1vw;
    text-align: left;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Empresas colaboradoras */
#e_colaboradoras {
    padding: 5vw 10vw;
    flex-direction: column;
    gap: 2vw;

    font-size: 2vw;
    color: var(--color_corporativo);    

    display: flex;
    justify-content: center;
    align-items: center;
}

#grid {
    padding: 0 5vw;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1vw;
}

#grid .empresa {
    padding: 1vw;
    border-radius: 16px;
    background-color: white;
    border: solid rgb(193, 193, 193) 0.1vw;

    color: white;
    display: flex;
    align-items: center;

    gap: 1vw;

    font-size: 1.7vw;
    cursor: pointer;
    font-weight: 999;

    text-decoration: none;
}

#grid .empresa:hover {
    background-color: rgb(214, 208, 208);
}


#ssuav {
    background-color: #060B30 !important;
}

#ssuav:hover {
    background-color: #63678b !important;
}


.empresa img {
    width: 4vw;
}

#aroha {
    background-color: #27323F !important;
}

#aroha:hover {
    background-color: #4a5d75 !important;
}


.color {
    color: rgb(66, 66, 66) !important;
}



/* Footer */
footer {
    text-align: center;
    padding: 20px;
    background: #343a40;
    color: white;
}