body {
    background: #fff!important;
}

.bd-placeholder-img {
    font-size: 1.125rem;
    text-anchor: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

@media (min-width: 768px) {
    .bd-placeholder-img-lg {
        font-size: 3.5rem;
    }
}

@media (max-width: 500px) {
    .bd-placeholder-img-lg {
        font-size: 2.5rem;
    }
}

.has-error .help-block,
.has-error label {
    color: red;
}

@font-face {
    font-family: Gilroy Light;
    src: url("/libs/css/Gilroy-Light.otf");
}

@font-face {
    font-family: Gilroy ExtraBold;
    src: url("/libs/css/Gilroy-ExtraBold.otf");
}

* {
    font-family: Gilroy Light;
}

@media only screen and (max-width: 767px) {
    .d-menu-lateral {
        display: none;
    }
}

@media only screen and (min-width: 768px) {
    .d-menu-top {
        display: none;
    }
}

/* navbar efectos de cambio de color/sección */
li.nav-item {
    float: left;
}

li.nav-item a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    transition: background-color 0.3s, color 0.3s !important;
}

li.nav-item a:hover {
    color: #FF6600 !important;
}

li.nav-item.activen a, i {
    /* border-radius: 25px;
    background-image: linear-gradient(90deg, rgba(43,56,119,1) 49%, rgba(65,80,153,1) 75%, rgba(8,165,198,1) 95%);
    color: white !important; */
}

@media only screen and (min-width: 600px) {
    .fade-element {
        position: fixed;
    }
}

.texto-con-sombra {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    font-size: 18px;
    color: #2B3984;
    font-weight: bold;
}

.texto-descripcion {
    font-size: 11px;
    margin-bottom: 0rem;
}

.titulo-texto {
    font-size: 18px;
    background-color: #2B3984;
    color: white;
}

.texto {
    font-size: 18px;
    color: #2B3984;
    font-weight: bold;
}

.texto-descripcion-lista {
    margin-left: 50px;
    margin-bottom: 10px;
}

.seleccion-plan {
    background-color: green;
    color: #FFFFFF;
}

.radio-style {
    background-image: url(/images/Lo_quiero2.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 120px;
}

.radio-style-paquete {
    /* background-image: url(/images/nombre_paquete.PNG);
    background-repeat: no-repeat;
    background-position: center center; */
}

.contenedor-imagen {
    position: relative;
}

.texto-superpuesto {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    padding: 10px;
    font-family: Gilroy Light;
    color: white;
}

.contenedor-azul {
    background-color: #2B3984;
    border-radius: 10px;
    font-size: 15px;
}

.radio-options-estilo {
    padding: 1px!important;
}

@media (max-width: 768px) {
    .img-tarifa {
        display: none;
    }

    .img-tarifa-quita {
        display: none;
    }

    .texto-descripcion-lista {
        margin-left: 80px;
    }

    .contenedor-azul {
        width: 90%;
        margin-left: 20px;
        margin-right: 20px;
        background-color: #2B3984;
        border-radius: 10px;
        font-size: 15px;
    }

    .radio-options-estilo {
        width: 120%;
        margin-left: 50px;
        font-size: 12px;
    }

    .radio-style {
        background-image: url(/images/Lo_quiero.png);
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 110px;
    }

    .pnotifystyle {
        font-size: 10px;
    }
}

.pnotifystyle {
    font-size: 10px;
}

.miInput {
    user-select: none;
    background-color: transparent;
    font-weight: bold;
    cursor: none;
}

.oculto {
    display: none;
    color: red;
    font-size: 14px;
}

.table-descripcion {
    border-collapse: collapse;
    border-collapse: separate;
}

/** NUEVOS ESTILOS **/

/* SECCION GRAL */

.section-style {
    background-color: #fffff;
/*    border: 2px solid #0cb6e3;*/
    padding: 10px;
}

.button-sig {
    background-color: #0d6efd;
    color: white;
    border: none;
    padding: 5px 10px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 20px !important;
    border-radius: 10px;
    cursor: pointer;
}

.button-sig:hover {
    background-color: #0999ba;
}

.custom-input {
    border: none;
    background: transparent;
    padding: 0;
    box-shadow: none;
    font-size: 14px;
    color: inherit;
    cursor: default;
    width: 300px;
}

/* BOTONES ESIM */

/*.sim-option {
    box-shadow: none;
    border: 2px solid gray;
    border-radius: 0px;
    cursor: pointer;
    width: 210px;
    flex: 1 1 calc(50% - 10px);
    padding: 15px;
    text-align: center;
    font-weight: bold;
    cursor: pointer;
    transition: transform 0.3s ease, border-color 0.3s ease;
}*/

.sim-option:hover {
    border-color: #2e7d32;
}

.sim-option2 {
    box-shadow: none;
    border: 2px solid gray;
    border-radius: 0px;
    cursor: pointer;
    width: 210px;
}

.selected {
    border: 4px solid #0cb6e3;
}

/* BOTONES OFERTA */

.custom-radio {
    display: inline-block;
    padding: 5px;
    border: 1px solid transparent;
    border-radius: 0px;
    cursor: pointer;
    width: 200px;
}

.custom-radio.selected {
    border: 4px solid #0cb6e3;
}

.custom-radio:not(.selected) {
    border: 2px solid gray;
}

.custom-radio:hover {
    border: 2px solid #0cb6e3;
    cursor: pointer;
}

.custom-radio2 {
    display: inline-block;
    padding: 5px;
    border: 1px solid transparent;
    border-radius: 0px;
    cursor: pointer;
    width: 200px;
}

.custom-radio2.selected {
    border: 4px solid #0cb6e3;
}

.custom-radio2:not(.selected) {
    border: 2px solid gray;
}

.custom-radio2:hover {
    border: 2px solid #0cb6e3;
    cursor: pointer;
}

h1 {
/*    color: #0cb6e3;*/
    color: #19217c;
    font-weight: bold;
    font-family: Gilroy Light;
}

h3 {
    font-weight: bold;
    font-family: Gilroy Light;
}

h5, legend {
    font-family: Gilroy Light;
}

h6 {
    font-family: Gilroy ExtraBold;
}

.p-portabilidad {
    color: #15bf32;
}

.custom-switch:checked {
    background-color: #0cb6e3;
    border-color: gray;
}

.custom-switch {
    height: 15px;
    position: relative;
}

hr.custom-hr {
    border: none;
    height: 2px;
/*    background-color: #0cb6e3;*/
    background-color: #19217c;
    width: 90%;
    margin: 20px auto;
    opacity: 0.75;
}

select {
    margin-bottom: 100px;
}

@media (max-width: 600px) {
    h1, h3, h5, h6, h4 {
        font-size: 14px; /* Reduce the size of headers on small screens */
    }

    .section-style {
        padding: 5px; /* Reduce padding on small screens */
    }

    .custom-input {
        width: 100%; /* Make inputs full width on small screens */
    }

    .button-sig {
        font-size: 10px; /* Reduce button font size */
        width: 100%; /* Make buttons full width */
    }

   
    .img-tarifa {
        display: none; /* Hide large images on small screens */
    }
}

@media (max-width: 992px) {
    .button-sig {
        font-size: 14px;
    }

    .section-style {
        padding: 10px;
    }

    /**/
}

.sim-card {
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.sim-card:hover {
    transform: scale(1.05); /* Aumenta un poco el tamaño */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Añade una sombra */
}


.data-amount-section, .sim-type-section, .phone-type-section {
    margin-top: 20px;
}

/*nuevos recuadros*/

    @media (max-width: 600px) {
        .data-option, .sim-option {
            flex: 1 1 100%;
        }

        .dropdown {
            width: 100%;
        }
    }

    .data-options, .sim-options {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }

    .data-option, .sim-option {
        flex: 1 1 calc(50% - 10px);
        padding: 5px;
        text-align: center;
        border: 0px solid #0cb6e3;
        border-radius: 10px;
        font-weight: bold;
        cursor: pointer;
    }

    .data-option span, .sim-option span {
        display: block;
        font-size: 0.9em;
        color: #555555;
    }

    .data-option:hover, .sim-option:hover {
        border-color: #0cb6e3;
    }

    .sim-option.selected {
        border-color: #0cb6e3;
    }

    .data-option, .sim-option {
        flex: 1 1 calc(50% - 10px);
        padding: 5px;
        text-align: center;
        border: 0px solid #dcdcdc;
        border-radius: 0px;
        font-weight: bold;
        cursor: pointer;
    }

    .data-option:hover, .sim-option:hover {
        border-color: #0cb6e3;
    }

    @media (max-width: 600px) {
    .sim-options {
        flex-direction: column; /* Cambia los rectángulos a columna (fila) */
    }
}

/* Para pantallas medianas (tabletas) y más pequeñas */
    .resume-panel {
        padding-left: 4%;
    }

    @media (max-width: 768px) {
        .resume-panel {
            padding-left: 7%;
        }
    }

    /* Para dispositivos móviles (muy pequeños) */
    @media (max-width: 576px) {
        .resume-panel {
            padding-left: 7%;
        }
    }

/*para la tabla de resumen*/

 /* Para pantallas pequeñas */
    @media (max-width: 768px) {
        /* Ocultar la imagen en dispositivos móviles */
        .responsive-img {
            display: none;
        }

        /* Hacer que el input ocupe todo el ancho disponible en dispositivos pequeños */
        .custom-input {
            width: 100%;
            font-size: 18px; /* Ajusta el tamaño del texto si es necesario */
            padding: 10px; /* Añade un poco de padding para mayor confort */
            box-sizing: border-box; /* Asegura que el padding no afecte el tamaño total del input */
        }

        /* Ajusta el tamaño de los encabezados */
        h4 {
            font-size: 14px;
            padding-top: 4px;

        }
    }



/*////////////////////////////Inicio de nueva web /////////////////////////////////*/

   .containerweb {
            width: 98vw;
            height: 50vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            background-image: url('/../images/nomada31.jpg'); /* Reemplaza con tu imagen */
            background-size: cover;
            background-position: center;
            position: relative;
            top: -2rem;
        }

        .overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 1;
        }

        section {
            position: relative;
            z-index: 2;
            width: 100%;
        }

        .header {
            color: #fff;
            padding: 20px;
        }

        .header h1 {
            color: #fff;
            font-size: 2.5rem;
            margin: 0;
        }

        .header h2 {
            font-size: 2,5rem;
            font-weight: bold;
            margin: 10px 0;
            background-color: #ff8000;
            display: inline-block;
            padding: 10px 20px;
            border-radius: 5px;
        }

        .form-section {
            background-color: #002d62;
            padding: 20px;
            border-radius: 10px;
            width: 90%;
            max-width: 850px;
/*            margin: 0 auto;*/
            margin: 10px auto 0 auto;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
        }

        .form-section label {
            color: #fff;
            font-size: 1rem;
            display: block;
            margin-bottom: 10px;
        }

        .form-section input {
            width: 100%;
            padding: 8px;
            border: none;
            border-radius: 5px;
            margin-bottom: 10px;
            font-size: 1rem;
        }

        .form-section input::placeholder {
            color: #ccc;
        }

        .form-section button {
            background-color: #ff8000;
            color: #fff;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            font-size: 1rem;
            cursor: pointer;
            width: 100%;
        }

        .form-section button:hover {
            background-color: #cc6600;
        }

        .decoration {
            position: absolute;
            top: 20px;
            left: 20px;
            display: flex;
            gap: 10px;
        }

        .decoration div {
            width: 50px;
            height: 10px;
            border-radius: 5px;
        }

        .decoration .green {
            background-color: #32cd32;
        }

        .decoration .orange {
            background-color: #ffa500;
        }

        .form-check {
            /*display: flex;
            align-items: center;*/
            justify-content: space-between;
            margin-bottom: 20px;
        }

        .form-check-input {
            margin-right: 10px;
            transform: scale(1.5);
        }

        .form-check h4 {
            color: #fff;
            /*margin: 0;
            font-size: 1rem;*/
        }

        /*.form-section input {
            width: 100%;
            padding: 10px;
            border: none;
            border-radius: 5px;
            font-size: 1rem;
        }

        .form-section input::placeholder {
            color: #ccc;
        }*/


/*//////////////////////////// Cajas de planes nuevas /////////////////////////////*/



/* Redes sociales: contenedor */
.redes-sociales {
  display: flex;
/*  justify-content: center;*/
flex-direction: column; /* Acomoda los elementos en una columna */
  align-items: start; /* Centra las imágenes horizontalmente */
  gap: 5px;
  margin: 10px 0;
}

/* Cada red social con imagen y texto */
.red-social {
  display: flex;
  align-items: center; /* Alinea imagen y texto en línea */
  gap: 10px; /* Espacio entre la imagen y el texto */
}

/* Imágenes */
.red-social img {
  width: 24px;
  height: 24px;
  cursor: pointer;
  transition: transform 0.2s;
}

/* Efecto hover */
.red-social img:hover {
  transform: scale(1.2);
}

/* Texto */
.red-social span {
  font-size: 12px;
  color: #333; /* Color del texto */
  font-weight: bold;
}

/* Responsive: Ajuste para móviles */
@media (max-width: 768px) {
  .red-social img {
    width: 16px;
    height: 16px;
  }

  .red-social span {
    font-size: 10px;
  }

  .rspan {

    font-size: 7px !important;
  }
}


.plan-selector {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
}



.plan-section {
    text-align: center;
    padding: 20px;
}

.plan-title {
    font-size: 24px;
    color: #00165d;
    margin-bottom: 30px;
}


.plan-container {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.plan-card {
    width: 200px;
/*    padding: 1rem;*/
    border: 2px solid transparent;
    border-radius: 10px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.3s, transform 0.3s;
    background-color: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.plan-card:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    border: 2px solid #007bff !important; 
}


.plan-card input {
    display: none; /* Hide the radio input */
}

.plan-card input:checked + .plan-selector {
    border: 2px solid #007bff; /* Borde azul cuando está seleccionado */
    transform: scale(1.05); /* Efecto de escala */
    box-shadow: 0 10px 20px rgba(0, 123, 255, 0.3); /* Sombra azul */
    border-radius: 10px;
}

.plan-content {
    padding: 20px;
    border-radius: 10px;
    background-color: white;
    transition: all 0.3s ease;
}

.plan-header2 {
    height: 10px;
    border-radius: 10px 10px 0 0;
}

.plan-header {
    height: 50px; 
    border-radius: 10px 10px 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.plan-name {
    color: #fff;
    font-weight: bold;
    font-size: 14px;
    text-align: center;
    position: absolute;
}


.plan-body {
    padding: 20px;
}

.plan-data {
    font-size: 24px;
    font-weight: bold;
    color: #00165d;
    margin-bottom: 10px;
}

.plan-price {
    font-size: 16px;
    color: #444;
}


.custom-radio3 {
    display: inline-block;
/*    padding: 5px;*/
/*    border: 1px solid transparent;*/
    cursor: pointer;
    width: 200px;
}

@media (max-width: 768px) {
    .custom-radio3 {
        width: 140px;
    }
}

.custom-radio3.selected {
    border: 5px solid #18e51e;
}


/*cambiar color*/

.custom-radio3:hover {
    border: 2px solid #06c30c !important;
    cursor: pointer;
}

.sim-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2rem;
    background-color: #fff;
}

.sim-content {
    flex: 1;
}

.sim-content h2 {
    font-size: 1.5rem;
    color: #00237D; /* Azul fuerte */
    font-weight: bold;
    margin-bottom: 1rem;
}

.sim-options {
    display: flex;
    gap: 1rem;
    align-content: space-around;
}

.sim-option {
    display: inline-block;
}

.sim-option input {
    display: none; /* Oculta el input */
}

.sim-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1rem 2rem;
    border: 2px solid #ccc;
    border-radius: 10px;
    transition: all 0.3s ease;
    cursor: pointer;
/*    width: 75%;*/

}

@media (max-width: 768px) {
    .sim-card {
       
       width: 100%;

    }

}

.sim-card.active {
    border-color: #cc521f !important; /* Azul cuando está activo */
    background-color: #ea7701 !important;
    color: #fff;
}

.sim-card strong {
    font-size: 1.2rem;
    font-weight: bold;
}

.sim-card p {
    margin: 0;
    font-size: 0.9rem;
}

.sim-option input:checked + .sim-card {
    border-color: #18e51e;
    background-color: #ea7701;
    color: #fff;
}

/*cambiar color*/

.sim-image {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.sim-image img {
    max-width: 300px;
    border-radius: 0%;
    border: 5px ; /* Azul del borde */
}

.overhard {

    display: flex;
    justify-content: center; /* Centrar horizontalmente */
    align-items: center; /* Centrar verticalmente */
/*    height: 100%; /* Asegúrate de que el contenedor tenga una altura definida */
    text-align: center; /* Centra el texto si hay */
}


.custom-switch2:checked {
/*    background-color: #0cb6e3;*/
    border-color: gray;
}

.custom-switch2 {
    height: 15px;
    position: relative;
}


.resumen-section {
    background: white;
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    max-width: 800px;
    margin: 20px auto;
}

.resumen-section h1 {
    font-size: 24px;
    font-weight: bold;
    color: #19217c;
    margin-bottom: 20px;
}

.plan-header {
    background: linear-gradient(90deg, #19217c, #4d94ff);
    padding: 10px;
    color: white;
    text-align: center;
    border-radius: 10px 10px 0 0;
    font-size: 18px;
    font-weight: bold;
}

.resumen-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

.resumen-table td {
    padding: 10px;
    font-size: 16px;
}

.resumen-table tr {
    border-bottom: 1px solid #ddd;
}

.total-section {
    font-size: 18px;
    font-weight: bold;
    color: #19217c;
    text-align: right;
    margin-top: 15px;
}

.btn-finalizar {
    background: #19217c;
    color: white;
    padding: 10px 20px;
    width: 70%;
    border: none;
    border-radius: 8px;
    font-size: 18px;
    margin-top: 15px;
    transition: background 0.3s ease-in-out;
}

@media (max-width: 768px) {
    .btn-finalizar {
        width: 100%;
    }
}

.btn-finalizar:hover {
    background: #0056b3;
}


.legales-section {
    margin: 20px;
}

.legales-header {
    display: flex;
/*    justify-content: space-around;*/
    align-items: center;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
}

.legales-header:hover {
    color: #0056b3;
}

.arrow {
    font-size: 20px;
    transition: transform 0.3s ease;
}

.collapse + .arrow {
    transform: rotate(0deg); /* Flecha hacia abajo */
}

.collapse.show + .arrow {
    transform: rotate(180deg); /* Flecha hacia arriba */
}

hr {
    border: 0;
    border-top: 1px solid #ddd;
}

.collapse {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.3s ease;
}

.collapse.show {
    max-height: 500px; /* Ajusta según el contenido */
}