@charset "UTF-8";
:root
{
    --color-azul-1: #0096d6;
    --color-azul-2: #00345c;
    --color-azul-3: #004673;
    --color-azul-4: #101e41;
    --color-gris-1: #edf3fd;
    --color-pichincha: #fff001;
    --color-guayaquil: #d2006e;
    --color-redactiva: #ffdd00;
    --font-family-base: 'Montserrat', sans-serif;
}

html { scroll-behavior: smooth; }

.bg-azul-1 {
    background-color: var(--color-azul-1) !important;
}

.bg-azul-2 {
    background-color: var(--color-azul-2) !important;
}

.bg-azul-3 {                                                                                                                                    
    background-color: var(--color-azul-3) !important;
}
.bg-azul-4 {                                                                                                                                    
    background-color: var(--color-azul-4) !important;
}
.bg-gris-1 {                                                                                                                                    
    background-color: var(--color-gris-1) !important;
}
.text-azul-1 {
    color: var(--color-azul-1) !important;
}
.text-azul-2 {
    color: var(--color-azul-2) !important;
}
.text-azul-3 {
    color: var(--color-azul-3) !important;
}

.bg-pichincha {
    background-color: var(--color-pichincha) !important;
}

.text-pichincha {
    color: var(--color-pichincha) !important;
}

.bg-guayaquil {
    background-color: var(--color-guayaquil) !important;
}

.text-guayaquil {
    color: var(--color-guayaquil) !important;
}

.bg-redactiva {
    background-color: var(--color-redactiva) !important;
}

.text-redactiva {
    color: var(--color-redactiva) !important;
}

.bg-plan-header{
background: #0C4879;
background: linear-gradient(0deg,rgba(12, 72, 121, 1) 34%, rgba(17, 30, 65, 1) 93%);
}

.bg-azul-gradient{
background: #00345C;
background: linear-gradient(122deg, rgba(0, 52, 92, 1) 39%, rgba(0, 150, 214, 1) 100%);
}

.text-azul-2:hover {
    color: var(--color-azul-1) !important;
}

.btn-outline-azul-1 {
    color: var(--color-azul-1) !important;
    border-color: var(--color-azul-1) !important;
    transition: all 0.3s ease;
}
.btn-outline-azul-1:hover {
    color: #ffffff !important;
    border-color: var(--color-azul-1) !important;
    background: var(--color-azul-1) !important;
    cursor: pointer;
}

.text-shadow1{
text-shadow: 0px 6px 5px rgba(0,0,0,0.71);
}

.box-shadow1{
    box-shadow:0px 6px 5px rgba(0,0,0,0.71);
}

.efx-up{
    transition: transform 0.3s ease;
}
.efx-up:hover{
    transform: translateY(-10px);
    cursor: pointer;
}


@media (max-width: 1024px) {
    .text-header{
        font-size: 5vh !important;
        text-shadow: none !important;
    }
    .sub-header{
        font-size: 1.1vh !important;
        margin-top: -6px !important ;
    }
    .boxTv{
        box-shadow: none !important;
    }
}

@media (max-width: 720px) {
    .text-header{
        font-size: 5vh !important;
        margin-top: -120px !important;
        text-shadow: none !important;
        box-shadow: none !important;
    }
    .sub-header{
        font-size: 1.1vh !important;
        margin-top: -6px !important;
    }
    .boxTv{
        box-shadow: none !important;
    }
    .imgTV{
        height: 300px !important;
    }
}

html, body {
    overflow-x: hidden !important;
    width: 100%;
}

/* Quitar flechas en Chrome, Safari, Edge y Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}


/* Esto asegura que cuando se seleccione, se vea el azul de Megatel y el texto cambie a blanco */
    .btn-check:checked + .btn-outline-primary {
        background-color: #007bff !important;
        border-color: #007bff !important;
        color: #fff !important;
    }

/* Quitar flechas del input number */
.no-spinners::-webkit-outer-spin-button,
.no-spinners::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}


/* Ajustes de texto */
.extra-small {
    font-size: 0.7rem;
    letter-spacing: 0.5px;
}

/* Efecto hover en el botón principal */
#btnConsultar:hover {
    background-color: #0056b3 !important;
    transform: translateY(-1px);
    transition: 0.3s;
}

/* Animación de aparición */
.fade-in-custom {
    animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Estilo base del botón */
#btnBackToTop {
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease; /* Para que aparezca suavemente */
}

/* Clase que activa el JS al pasar los 300px */
#btnBackToTop.show {
    opacity: 1;
    visibility: visible;
}


.divider-custom {
    height: 4px;
    width: 80%;
    background: linear-gradient(to right, transparent, #ffffff, transparent);
    margin: 40px 0;
    opacity: 0.3;
}

.divider-custom2 {
    height: 3px;
    width: 80%;
    background: linear-gradient(to right, transparent, var(--color-azul-2), transparent);
    margin: 40px 0;
    opacity: 0.3;
}