
/**/
.filtro-buscador {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 16px;
    min-height: 46px;
    background: #002A67;
    color: #fff;
    font-size: 14px;
    font-weight: 400;
    line-height: 125%;
}

    .filtro-buscador .editar {
        display: inline-block;
        padding: 7px;
        border: 2px solid #FF436E;
        border-radius: 100%;
    }



/* listado de planes */
.planes {
    padding-top: 10px;
    padding-bottom: 70px;
}

    /* titulos texto */
    .planes .cabecera-01 {
        margin-bottom: 12px;
        padding: 10px 0;
        text-align: center;
    }

        .planes .cabecera-01 .titulo {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
            font-size: 15px;
            font-weight: 600;
            line-height: 125%;
            color: var(--UA-Colours-Dark-blue);
        }

            .planes .cabecera-01 .titulo .svg-icon {
                width: 16px;
                height: 16px;
            }

        .planes .cabecera-01 .lead {
            margin: 0;
            font-size: 11px;
            font-weight: 300;
            line-height: 125%;
            color: var(--UA-Colours-Dark-blue);
        }

@media (min-width:992px) {
    .planes .cabecera-01 .titulo {
        font-size: 20px;
        gap: 13px;
    }

        .planes .cabecera-01 .titulo .svg-icon {
            width: 18px;
            height: 18px;
        }

    .planes .cabecera-01 .lead {
        font-size: 16px;
    }
}

/* titulos pill */
.planes .cabecera-02 {
    margin-bottom: 13px;
    text-align: center;
}

    .planes .cabecera-02.cabecera-02-anual {
        --ua-cabecera-02-bg-color: rgba(255, 187, 204, 0.50);
        --ua-cabecera-02-icon-color: #E31E5F;
    }

    .planes .cabecera-02.cabecera-02-diario {
        --ua-cabecera-02-bg-color: rgba(161, 212, 253, 0.50);
        --ua-cabecera-02-icon-color: #005AEF;
    }

    .planes .cabecera-02.cabecera-02-corporativo {
        --ua-cabecera-02-bg-color: rgba(193, 209, 222, 0.5);
        --ua-cabecera-02-icon-color: #005AEF;
    }

    .planes .cabecera-02.cabecera-02-descarga {
        --ua-cabecera-02-bg-color: rgba(255, 67, 110, 0.06);
        --ua-cabecera-02-icon-color: rgba(255, 67, 110, 1);
    }


    .planes .cabecera-02 .titulo {
        display: inline-flex;
        padding: 5px 20px;
        align-items: center;
        gap: 10px;
        font-size: 16px;
        font-weight: 500;
        line-height: 125%;
        color: var(--UA-Colours-Dark-blue);
        border-radius: 65px 100px 0 65px;
        background: var(--ua-cabecera-02-bg-color);
    }

        .planes .cabecera-02 .titulo .svg-icon {
            width: 16px;
            height: 16px;
            fill: var(--ua-cabecera-02-icon-color);
        }

@media (min-width:992px) {
    .planes .cabecera-02 {
        margin-bottom: 10px;
        text-align: left;
        padding-left: 15px; /*--ua-tarjeta-destacado-offset-x */
    }
}


/* FASE 1 */
.tarjeta {
    --ua-tarjeta-destacado-offset-x: 7px;
    --ua-tarjeta-destacado-offset-bottom: 205px;
    --ua-tarjeta-border-radius: 20px;
    --ua-tarjeta-border-radius-lg: 15px;
    margin-bottom: 16px;
    padding: 0 var(--ua-tarjeta-destacado-offset-x);
    line-height: 1.25;
}

    .tarjeta.tarjeta-anual {
        --ua-tarjeta-color-1: #FF80A6; /* border */
        --ua-tarjeta-color-2: #FFBBCC; /* %off */
        --ua-tarjeta-color-3: #E31E5F; /* destacado, btn */
        --ua-tarjeta-destacado-gradient: linear-gradient(180deg, #E31E5F 9.14%, #FAAFC5 100%);
    }

    .tarjeta.tarjeta-diario {
        --ua-tarjeta-color-1: #31A7FF; /* border */
        --ua-tarjeta-color-2: #A1D4FD; /* %off */
        --ua-tarjeta-color-3: #005AEF; /* destacado, btn */
        --ua-tarjeta-destacado-gradient: linear-gradient(180deg, #005AEF 9.14%, #A1D4FD 100%);
    }

    .tarjeta.tarjeta-corpo {
        --ua-tarjeta-color-1: #C9DDF0; /* border */
        /* --ua-tarjeta-color-2: #A1D4FD;  */
        /* --ua-tarjeta-color-3: #005AEF;  */
        /* --ua-tarjeta-destacado-gradient: linear-gradient(); */
        --ua-tarjeta-border-radius-lg: 7px;
    }

    /* destacado */
    .tarjeta .destacado {
        margin: 0 calc(-1 * var(--ua-tarjeta-destacado-offset-x)) calc(-1 * var(--ua-tarjeta-destacado-offset-bottom));
        color: #fff;
    }

        .tarjeta .destacado::after {
            content: '';
            display: block;
            padding: 0 0 var(--ua-tarjeta-destacado-offset-bottom);
            border-radius: 0 0 10px 10px;
            background: var(--ua-tarjeta-destacado-gradient);
        }

        .tarjeta .destacado .wrapper {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
        }

            .tarjeta .destacado .wrapper .titulo {
                flex-shrink: 0;
                padding: 8px 15px;
                z-index: 1;
                background: var(--ua-tarjeta-color-3);
                border-radius: 20px 20px 0 0;
                font-size: 20px;
                font-weight: 800;
            }

            .tarjeta .destacado .wrapper .desc {
                margin-top: -18px;
                padding: 18px 20px 9px 20px;
                width: 100%;
                background: var(--ua-tarjeta-color-3);
                border-radius: 0 20px 0 0;
                font-size: 13px;
                font-weight: 600;
            }


    /* cuerpo */
    .tarjeta .cuerpo {
        border-radius: var(--ua-tarjeta-border-radius);
        border: 3px solid var(--ua-tarjeta-color-1);
        background: #fff;
        color: var(--UA-Colours-Dark-blue);
        box-shadow: 0 42px 12px 0 rgba(0, 0, 0, 0.00), 0 27px 11px 0 rgba(0, 0, 0, 0.01), 0 15px 9px 0 rgba(0, 0, 0, 0.03), 0 7px 7px 0 rgba(0, 0, 0, 0.05), 0 2px 4px 0 rgba(0, 0, 0, 0.06);
    }

        /* comunes */
        .tarjeta .cuerpo .dto {
            display: inline-block;
            padding: 4px 20px;
            border-radius: 18px;
            background: var(--ua-tarjeta-color-2);
            font-size: 20px;
            font-weight: 700;
        }

        .tarjeta .cuerpo .vermas {
            font-size: 10px;
            font-weight: 500;
            text-decoration: underline;
            color: var(--Gama-blue-Gama-blue2);
        }

            .tarjeta .cuerpo .vermas.icon-eye::before {
                content: '';
                display: inline-block;
                width: 10px;
                height: 7px;
                margin-right: 5px;
                background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 13 9' fill='%23002A67' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.40927 8.53948C10.2362 8.53948 12.8092 5.27743 12.8092 4.26728C12.8092 3.25713 10.2269 0 6.40927 0C2.63829 0 0 3.25713 0 4.26728C0 5.27743 2.62897 8.53948 6.40927 8.53948ZM6.40927 7.57368C3.43537 7.57368 1.08142 4.95714 1.08142 4.26728C1.08142 3.69075 3.43537 0.965804 6.40927 0.965804C9.36919 0.965804 11.7278 3.69075 11.7278 4.26728C11.7278 4.95714 9.36919 7.57368 6.40927 7.57368ZM6.40927 6.91338C7.79834 6.91338 8.91238 5.70613 8.91238 4.26728C8.91238 2.79393 7.79834 1.6261 6.40927 1.6261C5.01089 1.6261 3.89218 2.79393 3.89684 4.26728C3.90616 5.70613 5.01089 6.91338 6.40927 6.91338ZM6.40461 5.11975C5.95713 5.11975 5.59355 4.7354 5.59355 4.26728C5.59355 3.79916 5.95713 3.41481 6.40461 3.41481C6.85209 3.41481 7.21568 3.79916 7.21568 4.26728C7.21568 4.7354 6.85209 5.11975 6.40461 5.11975Z'/%3E%3C/svg%3E%0A");
                background-repeat: no-repeat;
                background-position: left center;
            }


        /* cuerpo: encabezado */
        .tarjeta .cuerpo .encabezado {
            display: flex;
            flex-direction: column;
            padding: 0 3px 10px;
            text-align: center;
            border-bottom: 1px solid #d9d9d9;
        }

            .tarjeta .cuerpo .encabezado .hstack {
                padding-top: 3px;
                justify-content: space-between;
            }

                .tarjeta .cuerpo .encabezado .hstack:not(:has(> * + *)) {
                    justify-content: center;
                }

            .tarjeta .cuerpo .encabezado .tag {
                min-width: 100px;
                padding: 6px 5px;
                text-align: center;
                font-size: 12px;
                font-weight: 600;
                color: #005191;
                border-radius: 26px;
                border: 1px solid #005AEF;
                background: #FFF;
                box-shadow: 0 3.85px 1.54px 0 rgba(0, 0, 0, 0.01), 0 2.31px 1.54px 0 rgba(0, 0, 0, 0.05), 0 0.77px 0.77px 0 rgba(0, 0, 0, 0.09);
            }

            .tarjeta .cuerpo .encabezado .vstack {
                padding-top: 5px;
                gap: 5px;
            }
            /* .tarjeta .cuerpo .encabezado .vstack:first-child {padding-top:5px;} */
            .tarjeta .cuerpo .encabezado .nombre {
                max-width: 60%;
                margin: 0 auto;
                font-size: 23px;
                font-weight: 700;
                line-height: 143%;
                color: var(--Gama-blue-Gama-blue2);
            }

            .tarjeta .cuerpo .encabezado .desc {
                font-size: 12px;
                font-weight: 400;
                line-height: 136%;
                color: var(--Gama-blue-Gama-blue2);
            }

    .tarjeta.tarjeta-corpo .cuerpo .encabezado {
        padding: 10px 0;
    }

    .tarjeta.tarjeta-advertencia .cuerpo {
        min-height: 80px;
        box-shadow: 0px 7px 12px 0px rgba(0, 0, 0, 0.00), 0px 6px 0px 0 rgba(0, 0, 0, 0.01), 0px 7px 9px 0 rgba(0, 0, 0, 0.03), 0 7px 7px 0 rgba(0, 0, 0, 0.05), 0 2px 4px 0 rgba(0, 0, 0, 0.06)
    }

    .tarjeta.tarjeta-advertencia .cuerpo .advertencia {
        display: flex;
        margin: auto;
        align-items: center;
    }

     .tarjeta.tarjeta-advertencia .cuerpo .advertencia svg {
         width: 56px;
         height: 33px;
     }

     .tarjeta.tarjeta-advertencia .cuerpo .advertencia img {
         margin-right: 2%;
     }

     .tarjeta.tarjeta-advertencia .cuerpo .advertencia div span,
     .tarjeta.tarjeta-advertencia .cuerpo .advertencia div p {
         white-space: nowrap;
         color: #661B2C;
         font-family: 'Poppins-Medium';
         font-size: 15px;
         font-weight: 500;
         line-height: 1.4;
     }

     .tarjeta.tarjeta-advertencia:not(.sin-productos) .cuerpo .advertencia > div {
         white-space: nowrap;
         overflow: hidden;
     }

     .tarjeta.tarjeta-advertencia:not(.sin-productos) .cuerpo .advertencia > div p,
     .tarjeta.tarjeta-advertencia:not(.sin-productos) .cuerpo .advertencia > div span {
         display: inline;
     }

     .tarjeta.tarjeta-advertencia.sin-productos .cuerpo {
         padding: 15px 20px;
         margin-top: 15px;
     }

     .tarjeta.tarjeta-advertencia.sin-productos .cuerpo .advertencia > div p,
     .tarjeta.tarjeta-advertencia.sin-productos .cuerpo .advertencia > div span {
         white-space: normal;
         word-break: break-word;
         overflow-wrap: break-word;
     }

     .tarjeta.tarjeta-advertencia .cuerpo .encabezado .vstack {
         padding-top: 0;
     }


    /* cuerpo: cobertura */
    .tarjeta .cuerpo .cobertura {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 5px;
        flex-grow: 1;
        padding: 5px 0;
    }

        .tarjeta .cuerpo .cobertura .atributos {
            display: flex;
            justify-content: center;
            width: 100%; /*flex-wrap: wrap;*/
        }

            .tarjeta .cuerpo .cobertura .atributos .item {
                display: flex;
                flex-direction: column;
                gap: 8px;
                justify-content: space-between;
                flex-grow: 1;
                flex-basis: 25%;
                padding: 5px;
                text-align: center;
                font-size: 10px;
                color: var(--Gama-blue-Gama-blue2);
            }

                .tarjeta .cuerpo .cobertura .atributos .item:not(:last-child) {
                    border-right: 0.5px solid #d9d9d9;
                }

                .tarjeta .cuerpo .cobertura .atributos .item .item-icon {
                    display: block;
                    margin: 0 auto 4px;
                    width: 15px;
                    aspect-ratio: 1/1;
                }

                .tarjeta .cuerpo .cobertura .atributos .item .item-nombre {
                    font-size: 10px;
                    font-weight: 500;
                }

                .tarjeta .cuerpo .cobertura .atributos .item .item-alcance {
                    display: inline-block;
                    padding: 2px 3px;
                    border-radius: 3px;
                    background: #DFF4FF;
                    font-size: 9px;
                    font-weight: 700;
                    font-family: 'Poppins-bold';
                }

        .tarjeta .cuerpo .cobertura .detalle {
            padding: 5px 13px;
        }

    /* cuerpo: precios */
    .tarjeta .cuerpo .precios {
        display: flex;
        flex-direction: column;
        padding: 10px 15px;
        text-align: center;
        border-top: 1px solid #d9d9d9;
        justify-content: space-evenly
    }

        .tarjeta .cuerpo .precios .importes {
            margin-bottom: 10px;
        }

        .tarjeta .cuerpo .precios .importe-anterior {
            margin-bottom: 4px;
            font-size: 10px;
            font-weight: 500;
            line-height: 1;
            color: #4F748E;
            text-decoration: line-through;
        }

        .tarjeta .cuerpo .precios .importe {
            margin-bottom: 4px;
            font-size: 26px;
            font-weight: 600;
            line-height: 1;
        }

            .tarjeta .cuerpo .precios .importe .moneda {
                font-size: 15px;
            }

        .tarjeta .cuerpo .precios .importe-usd {
            font-size: 15px;
            font-weight: 400;
            line-height: 1;
            color: #4F748E;
        }

            .tarjeta .cuerpo .precios .importe-usd .moneda {
                font-size: 10px;
            }

        .tarjeta .cuerpo .precios .nota {
            margin-bottom: 10px;
            font-size: 14px;
            font-weight: 500;
        }

        .tarjeta .cuerpo .precios .personas {
            padding-bottom: 10px;
            font-size: 12px;
        }

        .tarjeta .cuerpo .precios .acciones {
            margin-right: auto;
            margin-left: auto;
        }

        .tarjeta .cuerpo .precios .btn {
            --bs-btn-bg: var(--ua-tarjeta-color-3);
            --bs-btn-border-color: var(--ua-tarjeta-color-3);
            --bs-btn-hover-bg: var(--ua-tarjeta-color-3);
            --bs-btn-hover-border-color: var(--ua-tarjeta-color-3);
            --bs-btn-active-bg: var(--ua-tarjeta-color-3);
            --bs-btn-active-border-color: var(--ua-tarjeta-color-3);
            --bs-btn-disabled-bg: #C4C4C4;
            --bs-btn-disabled-border-color: #C4C4C4;
            --bs-btn-disabled-opacity: 1;
            --bs-btn-color: #fff;
            --bs-btn-hover-color: #fff;
            --bs-btn-active-color: #fff;
            --bs-btn-font-size: 16px;
            line-height: 1.25;
            padding: 6px var(--bs-btn-padding-x);
            /* min-width: 145px; */
        }

.boton-activar button {
    --ua-tarjeta-color-3: #005AEF; /* destacado, btn */
    --bs-btn-bg: transparent;
    --bs-btn-hover-bg: rgba(59, 116, 170, 1);
    --bs-btn-hover-border-color: rgba(59, 116, 170, 1);
    --bs-btn-active-bg: var(--ua-tarjeta-color-3);
    --bs-btn-disabled-bg: #C4C4C4;
    --bs-btn-disabled-border-color: #C4C4C4;
    border: 2px solid #3B74AA;
    --bs-btn-disabled-opacity: 1;
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
    --bs-btn-font-size: 14px;
    color: #3B74AA;
    line-height: 1.25;
    padding: 6px var(--bs-btn-padding-x);
    /* min-width: 145px; */
    max-width: 160px;
}

#btnActivar {
    display: flex;
    justify-content: center;
    align-items: center; /* opcional si lo querés verticalmente centrado */
}

.boton-suelto {
    display: flex;
    margin: 15px 0;
}

    .boton-suelto button {
        border: none;
        background-color: #00b2c2;
        color: white;
        border-radius: 23px;
        padding: 7px;
        text-align: center;
        width: 131px;
        height: 38px;
        font-family: "Poppins-Medium";
        margin: 0 auto;
    }

    .boton-suelto.celeste button {
        background-color: #00b2c2;
    }

    .boton-suelto.rosa button {
        background-color: #ff436e;
    }



@media (min-width: 576px) {
    .tarjeta .cuerpo .precios .acciones {
        max-width: 300px;
    }
}


.unica-advertencia {
    margin-top: 3%;
}

@media (min-width:992px) {

    .texto-retail p.mobile, .texto-retail-footer p.mobile {
        display: none;
    }

    .tarjeta {
        --ua-tarjeta-destacado-offset-x: 15px;
        --ua-tarjeta-destacado-offset-bottom: 105px;
        margin-bottom: 20px;
    }

        /* destacado */
        .tarjeta .destacado .wrapper {
            flex-direction: row;
            align-items: flex-end;
        }

            .tarjeta .destacado .wrapper .titulo {
                padding: 12px 21px;
                font-size: 21px;
            }

            .tarjeta .destacado .wrapper .desc {
                margin-top: 0;
                padding: 7px 20px;
                font-size: 14px;
            }

        /* cuerpo */
        .tarjeta .cuerpo {
            display: flex;
            align-items: center;
            min-height: 180px;
            border-radius: var(--ua-tarjeta-border-radius-lg);
        }

        .tarjeta.tarjeta-corpo .cuerpo {
            min-height: 135px;
        }

        /* comunes */
        .tarjeta .cuerpo .dto {
            border-radius: 0 18px 18px 18px;
        }

        .tarjeta .cuerpo .vermas {
            font-size: 11px;
        }

            .tarjeta .cuerpo .vermas.icon-eye::before {
                width: 12px;
                height: 8px;
            }

        /* cuerpo: encabezado */
        .tarjeta .cuerpo .encabezado {
            padding: 10px 0;
            width: 200px;
            flex-shrink: 0;
            align-self: stretch;
            border: 0;
            border-right: 1px solid #d9d9d9;
        }

            .tarjeta .cuerpo .encabezado .hstack {
                padding-top: 0;
                justify-content: center;
            }

            .tarjeta .cuerpo .encabezado .tag {
                min-width: 150px;
                padding: 6px 10px;
            }

            .tarjeta .cuerpo .encabezado .vstack {
                padding-top: 0;
                gap: 20px;
                justify-content: center;
            }

            .tarjeta .cuerpo .encabezado .nombre {
                font-size: 16px;
            }


        /* cuerpo: cobertura */
        .tarjeta .cuerpo .cobertura {
            justify-content: space-between;
            min-height: 180px;
            padding: 20px 0 5px; /*align-self: stretch;*/
        }

            .tarjeta .cuerpo .cobertura .atributos .item {
                font-size: 12px;
            }

                .tarjeta .cuerpo .cobertura .atributos .item .item-icon {
                    width: 25px;
                }

                .tarjeta .cuerpo .cobertura .atributos .item .item-nombre {
                    font-size: 12px;
                }

                .tarjeta .cuerpo .cobertura .atributos .item .item-alcance {
                    font-size: 12px;
                }

            .tarjeta .cuerpo .cobertura .detalle {
                padding: 10px 14px;
            }

        .tarjeta.tarjeta-corpo .cuerpo .cobertura {
            min-height: unset;
            gap: 0;
            padding: 5px 0 0;
        }

            .tarjeta.tarjeta-corpo .cuerpo .cobertura .detalle {
                padding: 8px 14px;
            }


        /* cuerpo: precios */
        .tarjeta .cuerpo .precios {
            padding: 5px 0 10px;
            width: 243px;
            flex-shrink: 0;
            align-self: stretch;
            border: 0;
            border-left: 1px solid #d9d9d9;
        }

        .tarjeta.tarjeta-corpo .cuerpo .precios {
            padding: 10px 5px;
        }

        .tarjeta .cuerpo .precios .importes {
            margin-bottom: 5px;
            padding: 0 52px;
            text-align: right;
        }

            .tarjeta .cuerpo .precios .importes + .acciones {
                margin-top: 10px;
            }

        .tarjeta .cuerpo .precios .importe-anterior {
            margin-bottom: 0;
            font-size: 15px;
            line-height: 1.25;
            text-decoration: none;
        }

            .tarjeta .cuerpo .precios .importe-anterior .moneda {
                font-size: 9px;
                text-decoration: line-through;
            }

            .tarjeta .cuerpo .precios .importe-anterior .cifra {
                text-decoration: line-through;
            }

        .tarjeta .cuerpo .precios .importe {
            margin-bottom: 0;
            font-size: 21px;
            line-height: 1.25;
        }

            .tarjeta .cuerpo .precios .importe .moneda {
                font-size: 13px;
            }

        .tarjeta .cuerpo .precios .importe-usd {
            font-size: 15px;
            line-height: 1.25;
        }

            .tarjeta .cuerpo .precios .importe-usd .moneda {
                font-size: 9px;
            }

        .tarjeta .cuerpo .precios .nota {
            font-size: 11px;
        }

        .tarjeta .cuerpo .precios .btn {
            max-width: 160px;
        }
}

.planes-anuales {
    text-align: center
}

.texto-financiacion {
    color: var(--UA-Colours-Dark-blue, #002447);
    text-align: center;
    font-family: Poppins;
    font-size: 11px;
    font-style: normal;
    font-weight: 500;
    line-height: 125%; /* 13.75px */
    margin-top: 5px;
    margin-bottom: 5px;
}

.titulo-corporativo-bo {
  display: flex;
  width: 100%;
  padding: 30px 16px 30px 16px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
}

.titulocorporativos-titulo {
  color: var(--UA-Colours-Dark-blue, #002447);
  font-family: Poppins;
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: 125%; /* 25px */
}

.titulocorporativos-subtitulo {
  color: var(--UA-Colours-Dark-blue, #002447);
  font-family: Poppins;
  font-size: 16px;
  font-style: normal;
  font-weight: 300;
  line-height: 125%; /* 20px */
}


@media (max-width: 1279px) {
    .hideon-nodesktop { /*DOL*/
        display: none !important;
    }
}

@media (min-width: 1280px) {
    .hidden-desktop { /*DOL*/
        display: none !important;
    }

    .hideon-desktop { /*DOL*/
        display: none !important;
    }
}

.financiacion-container {
}

@media (min-width: 1280px) {
    .financiacion-container {
        padding-left: 42px;
        padding-right: 42px;
    }
}
