@charset "UTF-8";
body {
    font-family: Arial, sans-serif;
}
.hrnuevo {
    border: none; /* Elimina el borde */
    color: #73d900;
    background-color: #73d900; /* Usa background-color en lugar de solo background */
    padding: 2px 1px 1px 1px;
}

/* Por defecto, no hay bordes para dispositivos pequeños */
.navbar-nav .nav-item .nav-link {
            border-right: none;
            font-family: Arial;
            font-size: 1.5rem;
}
.linkmodulos {
    text-decoration: none !important; /* Quita el subrayado */
    color: white; /* Establece el color del texto a blanco */
    font-size:2.4vw;
}

.linkmodulos:hover {
    color: #545454; /* Establece el color del texto a #73d900 cuando se pasa el mouse por encima (hover) */
}
#logo-sofia {
    height: 70px;
}
.you{
 border-radius: 15px;
 border: 1px solid white;
}

/* degrade fondo */
.div-sin-gradiente {
    background: #73d900;
    border: 0px;
}
.div-con-gradiente {
    background: linear-gradient(90deg, #73d900, #97d804);
    border: 0px;
}

.div-con-gradiente-mitad {
/*background: linear-gradient(180deg, #73d900, #73d900 50%, transparent 50%);*/
background: linear-gradient(to bottom, #73d900 50%, transparent 50%);
}

.div-con-gradiente-mitad-superior {
background: linear-gradient(to top, #73d900 50%, transparent 50%);
}
/* TEXTOS */
.titulos{
    font-size:3.8vw;
    font-family: 'Arial Black', Arial, sans-serif;
    color:#545454;
}
.titulos-planes{
    font-size:2.1vw;
    font-family: 'Arial Black', Arial, sans-serif;
    color:#545454;
}
.texto{
    font-size:1.6vw;
}
.texto-normal{
    font-size:1.4vw;
    font-family: 'Arial Bold', Arial, sans-serif;
}
.texto-normal-black{
    font-size:1.6vw;
    font-family: 'Arial Black', Arial, sans-serif;
}

.en-planes{
    font-family: 'Arial Black', Arial, sans-serif;
    font-size:1.3vw;
    color: #545454;
}

.texto-minimo-normal{
    font-size:3.1vw;
}

.interlineas {
    line-height: 1.1;
}

.texto-planes {
font-size: 1.2vw;
font-style: italic;
color: #545454;
}

.ver{
    font-size: 22px;
    font-weight: bold;
    color: #545454;
    text-decoration: underline;
}
.amplia{
    font-size:2.4em;
    /*font-weight: bold;*/
    line-height: 1.1;
    padding-top:15px;
    font-family: 'Arial Black', Arial, sans-serif;
}
.parrafo{
    font-size: 1.3vw;
    color: #545454;
}
.nuevo{
    color:#98d804;
    font-weight: bold;
    font-size: 1.8vw;
}
/* tabla */
.table th {
    color: #c3c3c3;
    font-size: 12px;
    vertical-align: middle;
}
.table td {
    color: #545454;
}
.table a {
    color: #545454;
    text-decoration: none !important; /* Quita el subrayado */
}

.valores{
    color: #545454;
    font-size:4.6vw;
}
/* BOTONES */
.btn-texto{
    font-size: 1.1vw;
    font-weight: bold;
    white-space: nowrap;
}
.btn-redondeado {
    border-radius: 25px;
    border: #73d900 solid 2px;
    color: #545454;
    padding: .5rem 1.4rem;
    font-family: 'Arial Black', Arial, sans-serif;
}

/* animaciones */
.button-sofia:hover button {
    animation: fadeIn 1s;
}

.button-sofia:hover button {
    animation: fadeIn 1s;
}

.btn-redondeado-verde {
    background: linear-gradient(90deg, #73d900, #97d804);
    color: white;
}
.btn-redondeado-verde:hover {
    color: white;
}

.btn-redondeado-plomo {
    background-color: #545454;
    color: white;
    border: #ffffff solid 2px;
}
.btn-redondeado-plomo:hover {
    color: white;
    border: #ffffff solid 2px;
}

.btn-redondeado-blanco {
    color: white;
    border: #ffffff solid 2px;
}
.btn-redondeado-blanco:hover {
    color: white;
}

.icon-texto{
    font-size:2.7em; font-weight: bold;line-height: 1.1;padding-top:15px
}
/* imagen */


/* menu barra verde separador */
.navbar-nav .nav-item:not(:last-child) .nav-link {
                border-right: 1px solid #73d900;
                padding-right: 15px;
                margin-right: 15px;
}
.dondeestoy{
    border-bottom: solid 2px #73d900;
}
.btn-icon {
            width: 37px;
            height: 37px;
            padding-top: 5px;
            display: flex;
            color: white;
            align-items: center;
            justify-content: center;
}
.icon-redes{
    color: white;
    font-size: 18px;
}
/* planes */
.card {
    background-color: #f0f0f0;
    border-radius: 0px 0px 0px 40px; /* Esquina inferior izquierda redondeada */
    flex-direction: column;  /* Organiza el contenido de la tarjeta en una columna */
    padding-top: 70px;
    border: 0px;
}
.cardmedulos {
    padding: 15px 15px 15px 40px;
}

.card-numeros {
    /*position: absolute;*/
    color: white;
    background-color: #545454;
    border-radius: 30px 30px 30px 30px; /* Esquina inferior izquierda redondeada */
    flex-direction: column;  /* Organiza el contenido de la tarjeta en una columna */
}

.card-numeros h3 {
font-size: 4.9vw;
font-weight: bold;
}

.numero-circulo {
    position: absolute;
    width: 100px;
    height: 100px;
    background: linear-gradient(90deg, #73d900, #97d804);
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 70px;
    font-family: 'Arial Black', Arial, sans-serif;
    border: 4px solid white;
    top: -30px;  /* La mitad del height del div */
    left: 50%; 
    transform: translateX(-50%); /* Para centrarlo horizontalmente */
    border-radius: 50%;  /* Para hacerlo circular */
}


.imagenes-centro-superior-flotante {
    position: absolute;
    width: 140px;
    height: 140px;
    display: flex;
    justify-content: center;
    align-items: center;
    top: -90px;  /* La mitad del height del div */
    left: 50%; 
    transform: translateX(-50%); /* Para centrarlo horizontalmente */
}
.card-prestaciones {
    background-color: #f0f0f0;
    border-radius: 40px 40px 40px 0px; /* Esquina inferior izquierda redondeada */
    flex-direction: column;  /* Organiza el contenido de la tarjeta en una columna */
    padding-top: 70px;
}
.mas-circulo {
    position: absolute;
    width: 80px;
    height: 80px;
    background-color: #545454;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 70px;
    font-family: 'Arial Black', Arial, sans-serif;
    border: 4px solid white;
    top: -30px;  /* La mitad del height del div */
    left: 3%; 
    transform: translateX(-50%); /* Para centrarlo horizontalmente */
    border-radius: 50%;  /* Para hacerlo circular */
}
.circulo-verplan{
    color:#73d900;
    float:left;
    position: absolute;
    z-index: 3;
    font-size: 30px;
}
.card-body {
    flex: 1;  /* Ocupa todo el espacio disponible */
}
/* web contacto */
.form-card {
    border-radius: 30px 30px 30px 30px;
    box-shadow: 0 0 18px rgba(0,0,0,.2);
    padding: 30px 30px 30px 30px;
}
.autorizados{
    font-size:2.8vw;
    font-family: Arial, sans-serif;
    color:white;
}
.titulos-agente{
    font-size:4.2vw;
    font-family: 'Arial Black', Arial, sans-serif;
    color:white;
}
.visitanos{
    font-size:3.0em;
    /*font-weight: bold;*/
    line-height: 1.1;
    padding-top:15px;
}
/* web planes */
.extensa{
    font-size:2.2vw;
    color:white;
}
.liplanes {
    color: #545454;
    font-size: 1.4vw;
    font-weight: bold;
}
.liplanes li {
    list-style-type: none; /* Esto elimina el punto predeterminado */
    margin-left: 1em; /* Agrega un margen para que el contenido no quede pegado al símbolo */
    position: relative;
    padding-left: 5px;
    padding-bottom: 10px;
}

 .liplanes li::before {
    color: #73d900;
    content: "►"; /* Este es el símbolo que quieres usar */
    position: absolute;
    left: -1em; /* Posiciona el símbolo a la izquierda del contenido del li */
}
/* web modulos */
.cuenta{
    font-size:3.0vw;
    font-family: Arial, sans-serif;
}
.cuenta-strong{
    font-family: 'Arial Black', Arial, sans-serif;
}

.li_punto_verde{

}
.li_punto_verde li {
    list-style-type: none; /* Esto elimina el punto predeterminado */
    margin-left: 1em; /* Agrega un margen para que el contenido no quede pegado al símbolo */
    position: relative;
    padding-left: 10px;
    padding-bottom: 10px;
}
 .li_punto_verde li::before {
    color: #73d900;
    content: "●"; /* Este es el símbolo que quieres usar */
    position: absolute;
    left: -1em; /* Posiciona el símbolo a la izquierda del contenido del li */
}

.ratio {
  position: relative;
  width: 100%;
}

.ratio::before {
  display: block;
  padding-top: var(--bs-aspect-ratio, 100%);
  content: "";
}

.ratio > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.ratio-16x9::before {
  --bs-aspect-ratio: calc(9 / 16 * 100%);
}

.linkvideos {
    text-decoration: none !important; /* Quita el subrayado */
    color: white; /* Establece el color del texto a blanco */
    font-size:1.4vw;
}

.linkvideos:hover {
    color: #545454; /* Establece el color del texto a #73d900 cuando se pasa el mouse por encima (hover) */
}

/* web clientes */
.partners{
     font-size:2.2vw;
    font-family: Arial, sans-serif;   
}
.fondopasto {
    background-image: url('imagenes/pasto.jpg');
    background-repeat: no-repeat;  /* No se repite la imagen */
    background-position: center bottom;  /* La imagen se posiciona en el centro y en la parte inferior */
}
.ellos{
    font-size:3.0vw;
    font-family: Arial, sans-serif;
    font-style: italic;
}
.card2 {
    padding-top: 0px;
    padding-bottom: 60px;
}
.circulo-testigo {
    position: absolute;
    width: 120px;
    height: 120px;
    background: linear-gradient(90deg, #73d900, #97d804);
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 70px;
    font-family: 'Arial Black', Arial, sans-serif;
    border: 4px solid white;
    bottom: -30px; /* Mueve el círculo hacia abajo */
    top: auto;  /* La mitad del height del div */
    left: 50%; 
    transform: translateX(-50%); /* Para centrarlo horizontalmente */
    border-radius: 50%;  /* Para hacerlo circular */
}
    .listanumero {
        list-style: none;  /* Esto quitará el punto/numeración predeterminada */
        counter-reset: lista;  /* Esto inicializará un contador para la numeración */
        padding-left: 0;
        font-size: 32px;
    }

    .listanumero li {
        counter-increment: lista;  /* Incrementará el contador en cada ítem */
        position: relative;  /* Establecerá el ítem como punto de referencia para posicionar el número */
        padding-left: 60px;  /* Dará espacio para mostrar el número en el círculo */
        margin-bottom: 20px;
    }

    .listanumero li:before {
        content: counter(lista);  /* Mostrará el número del contador */
        position: absolute;  /* Posicionará el número con respecto al ítem */
        left: 0;
        top: 50%;
        transform: translateY(-50%);  /* Centrará el número verticalmente */
        width: 40px;
        height: 40px;
        border-radius: 50%;  /* Hará que el fondo sea un círculo */
        background-color: #eee;  /* Color de fondo del círculo */
        text-align: center;  /* Centrará el número horizontalmente */
        line-height: 40px;  /* Centrará el número verticalmente */
        color: #545454;
    }
/* web faq */
.btn-app {
    border-radius: 25px;
    border: 2px solid #ffffff;
    color: #ffffff;
    padding: .5rem 1.4rem;
    font-family: Arial, sans-serif;
    background-color: #545454;
    width: 100%;
    font-size: 1.4vw;
}
.img-redondeado{
    border-radius: 5px 5px 5px 5px;
    box-shadow: 0 0 18px rgba(0,0,0,.2);
}
.accordion-header{
    border-bottom: 1px solid #cccccc;
}
.accordion-item{
    color: #545454;
    border: 0px !important;
    background-color:#ffffff;
    border-bottom: 1px solid #545454;
}
.accordion-button:not(.collapsed){
    color: #545454;
    background-color: #ffffff;
}


/* resolución movil */
@media (max-width: 575.98px) {

        .navbar-nav .nav-item .nav-link {
            font-size: 2.5vw;
        }

        .titulos{
        font-size:40px;
        }

        .texto-normal{
        font-size:20px;
        }

        .btn-texto{
        font-size: 14px;
        }
        .parrafo{
        font-size: 4.0vw;
        }
        .en-planes{
        font-size:5.0vw;
        }
        .texto{
        font-size:4.0vw;
        }
        .titulos-planes{
        font-size:5.0vw;
        }
        .nuevo{
        font-size: 3.8vw;
        }
        .amplia{
        font-size:8.0vw;
        }
        .texto-normal-black{
        font-size:8.0vw;
        }
        .texto-planes {
        font-size: 4.0vw;
        }
        .card-numeros h3 {
        font-size: 10.0vw;
        }
        .imgmodulos{
        max-height: 150px;
        }
        .ver{
            font-size: 14px;
        }
        .fondopasto {
            background-image: none;
        }
        .btn-redondeado {
            padding: .5rem 0.9rem;
        }
        .extensa{
            font-size:6.0vw;
        }
        .liplanes {
            font-size: 4.0vw;
        }
        .cuenta{
            font-size:6.0vw;
        }
        .partners{
             font-size:6vw;   
        }
        .btn-app {
            font-size: 5vw;
        }
        .autorizados{
            font-size:8vw;
        }
        .linkvideos{
            font-size: 5vw;
        }
}

/* tablet */
@media (min-width: 575.98px) and (max-width: 991px) {
    #imagen-mapa {
        max-width: 350px; /* ajusta este valor según tus necesidades */
        margin: 0 auto; /* centra la imagen si su contenedor es más grande que la imagen */
    }
        .texto-normal{
        font-size:25px;
        }

        .btn-texto{
        font-size: 2.5vw;
        }
        .texto{
        font-size:3.3vw;
        }
        .nuevo{
        font-size: 3.0vw;
        }
        .texto-normal-black{
        font-size:3.0vw;
        }
        .fondopasto {
            background-image: none;
        }

}

/* desde escritorio hacia arriba */
@media (min-width: 1024px) {
    .texto-minimo-normal {
        font-size: 1.1vw;
    }

    .valores{
    font-size:1.6vw;
}
}