:root {
    --bg-plan-card-top: #000A89;
    --bg-plan-card-body: #FFFFFF;
    --bg-plan-card-button: #FFCB00;
    --color-plan-card-main: #000000;
    --color-plan-card-price: #0031CF;
    /* Azul institucional do site (menu, rodape, checkout, sucesso, upload). */
    --bg-plan-card-brand: #3D388A;
    --bg-plan-card-highlight: var(--bg-plan-card-brand);
}

/* Plans cards one */
.plan-card {
    background-color: var(--bg-plan-card-body);
    border-radius: 15px;
    max-width: 320px;
    margin: auto !important;
    margin-bottom: 30px!important;
}
.plan-card .border-bottom {
    border-color: #EEEEEE;
}
.plan-card .plan-card-top {
    background: var(--bg-plan-card-top) 0% 0% no-repeat padding-box;
    border-radius: 15px 15px 0px 0px;
    opacity: 1;
    padding: 5px 15px 5px 15px;
    height: 31px;
    color: #FFCB00;
}
.plan-card .main-card {
    border:solid #C0C0C0 1px;
    border-radius: 0px 0px 20px 20px;
}
.plan-card .plan-name {
    padding: 20px 20px 0px 20px;
    font-weight: 700;
    font-size: 40px;
    line-height: 60px;
    margin-bottom: 8px;
    color: var(--color-plan-card-main);
}
.plan-card .the-best-offer{
    width: auto !important;
    display: inline !important;
    position: absolute;
    left: 0px;
    top: 4px;
}
.plan-card .icon-card {
    width: 65px;
    height: 17px;
    object-fit: contain;
}
.plan-card  ul {
    list-style-type: none;
    padding: 0;
    text-align: left;
    font-weight: 400;
    font-size: 14px;
    line-height: 21px;
    padding: 20px 20px 0px 20px;
    margin: 0;
}
.plan-card li {
    margin: 0;
    padding: 0;
    line-height: 1.5;
    margin-bottom: 8px;
    color: #646464;
}
.plan-card li:before {
    content: '\2022';
    color: #052450;
    display: inline-block;
    width: 10px;
    margin-right: 0.5em;

}
.plan-card .body-plan {
    background-color:#F7F7F7;
}
.plan-card .body-plan .fs-14 {
    padding: 0px 20px;
    font-weight: 400;
    font-size: 14px;
    line-height: 21px;
    color: #646464;
}
.plan-card .body-plan.fs-12 {
    padding: 0px 20px;
    font-weight: 400;
    font-size: 12px;
    line-height: 21px;
}
.plan-card .body-plan .offer-text{
    padding: 0px 20px 20px 20px;
}
.plan-card .plan-price, .plan-card .plan-price-value {
    color: var(---color-plan-card-price);
    font-size: 40px;
    font-weight: 700;
}
.plan-card .plan-price {
    font-size: .7rem;
    padding: 0px 20px;
}
.plan-card .plan-price-currency {
    font-size: 1rem;
}
.plan-card .plan-price-decimal {
    font-size: 1rem;
}
.plan-card .btn-warning {
    width: 100%;
    text-decoration: none;
    padding: 16px!important;
    background-color: var(--bg-plan-card-button);
}
.plan-card .plan-card-feature {
    width: 45%
}
.plan-card .plan-card-plus {
    width: 10%;
    font-size: 2.5rem;
}
.plan-card .plan-small-border {
    border-right: 1px solid #e9e9e9;
    border-top: none;
    border-bottom: none;
}
.plan-the-best .body-plan{
    background-color: #F7F7F7;
}
/* End plan cards one */

/* Plans cards two */
.plan-card-two {
    background-color: var(--bg-plan-card-body);
    border-radius: 8px;
    max-width: 320px;
    margin: auto !important;
    margin-bottom: 30px!important;
}
.plan-card-two .border-bottom {
    border-color: #EEEEEE;
}
.plan-card-two .plan-card-top {
    background: var(--bg-plan-card-top) 0% 0% no-repeat padding-box;
    border-radius: 8px 8px 0px 0px;
    opacity: 1;
    padding: 5px 15px 5px 15px;
    height: 31px;
    color: #FFCB00;
}
.plan-card-two .main-card {
    border:solid #EEEEEE 2px;
    border-radius: 0px 0px 8px 8px;
}
.plan-card-two .plan-name {
    text-align: left;
    padding: 24px 20px 0px 20px;
    font-weight: 700;
    font-size: 28px;
    line-height: 42px;
    margin-bottom: 8px;
}
.plan-card-two .the-best-offer{
    width: auto !important;
    display: inline !important;
    position: absolute;
    left: 0px;
    top: 4px;
}
.plan-card-two .icon-card {
    width: 92px;
    height: 24px;
    object-fit: contain;
}
.plan-card-two .body-plan {
    background-color:#F7F7F7;
}
.plan-card-two .body-plan .fs-14 {
    padding: 0px 20px;
    font-weight: 400;
    font-size: 14px;
    line-height: 21px;
    color: #646464;
    text-align: left;
}
.plan-card-two .body-plan.fs-12 {
    padding: 0px 20px;
    font-weight: 400;
    font-size: 12px;
    line-height: 21px;
}
.plan-card-two .body-plan .offer-text{
    padding: 0px 20px 24px 20px;
    text-align: left;
}
.plan-card-two .plan-price, .plan-card-two .plan-price-value {
    color: var(--color-plan-card-price);
    font-size: 40px;
    font-weight: 700;
    text-align: left;
}
.plan-card-two .plan-price {
    font-size: .7rem;
    padding: 0px 20px;
}
.plan-card-two .plan-price-currency {
    font-size: 1rem;
}
.plan-card-two .plan-price-decimal {
    font-size: 1rem;
}
.plan-card-two .btn-warning {
    width: 100%;
    text-decoration: none;
    background-color: var(--bg-plan-card-button) !important;
    color: #000000!important;
    border-radius: 8px;
    padding: 12px 24px;
}

.plan-card-two .plan-card-feature {
    width: 45%
}
.plan-card-two .plan-card-plus {
    width: 10%;
    font-size: 2.5rem;
}
.plan-card-two .plan-small-border {
    border-right: 1px solid #e9e9e9;
    border-top: none;
    border-bottom: none;
}
.plan-card-two .fs-12 {
    font-size: 12px;
}
.plan-card-two .fs-12 img{
    margin-top: 8px;
}
.plan-the-best-two .body-plan{
    background-color: #FCF6D6;
}
/* End plan cards two */

/* Plans cards three */
.plan-card-three {
    background-color: var(--bg-plan-card-body);
    border-radius: 8px;
    max-width: 320px;
    margin: auto !important;
    margin-bottom: 30px!important;
}
.plan-card-three .border-bottom {
    border-color: #EEEEEE;
}
.plan-card-three .plan-card-top {
    background: var(--bg-plan-card-top) 0% 0% no-repeat padding-box;
    border-radius: 8px 8px 0px 0px;
    opacity: 1;
    padding: 5px 15px 5px 15px;
    height: 31px;
    color: #FFCB00;
}
.plan-card-three .main-card {
    border:solid #D6D6D6 1px;
    border-radius: 0px 0px 8px 8px;
}
.plan-card-three .plan-name {
    padding: 24px 20px 0px 20px;
    font-weight: 700;
    font-size: 50px;
    line-height: 75px;
    color: var(--color-plan-card-main);
}
.plan-card-three .plan-name-speed {
    padding: 0px 20px;
    font-weight: 700;
    font-size: 28px;
    line-height: 42px;
    margin-bottom: 16px;
    color: var(--color-plan-card-main);
}
.plan-card-three .the-best-offer{
    width: auto !important;
    display: inline !important;
    position: absolute;
    left: 0px;
    top: 4px;
}
.plan-card-three .icon-card {
    width: 92px;
    height: 24px;
    object-fit: contain;
}
.plan-card-three .body-plan {
    background-color:#FFFFFF;
}
.plan-card-three .body-plan .fs-14 {
    padding: 0px 20px;
    font-weight: 400;
    font-size: 14px;
    line-height: 21px;
}
.plan-card-three .body-plan .fs-12 {
    padding: 0px 20px;
    font-weight: 400;
    font-size: 12px;
    line-height: 21px;
}
.plan-card-three .body-plan .fs-12 .wi-fi{
    font-weight: 700;
    font-size: 18px;
    line-height: 27px;
}
.plan-card-three .body-plan .offer-text{
    padding: 0px 20px 24px 20px;
    text-align: center;
    line-height: 21px;
}
.plan-card-three .plan-price, .plan-card-three .plan-price-value {
    color: var(--color-plan-card-price);
    font-size: 40px;
    font-weight: 700;
    line-height: 70px;
}
.plan-card-three .plan-price {
    font-size: .7rem;
    padding: 0px 20px;
}
.plan-card-three .plan-price-currency {
    font-size: 1rem;
}
.plan-card-three .plan-price-decimal {
    font-size: 1rem;
}
.plan-card-three .btn-warning {
    width: 100%;
    text-decoration: none;
    background-color: var(--bg-plan-card-button) !important;
    color: #000000!important;
    border-radius: 8px;
    padding: 12px 24px;
}

.plan-card-three .plan-card-feature {
    width: 45%
}
.plan-card-three .plan-card-plus {
    width: 10%;
    font-size: 2.5rem;
}
.plan-card-three .plan-small-border {
    border-right: 1px solid #e9e9e9;
    border-top: none;
    border-bottom: none;
}
.plan-card-three .fs-12 {
    font-size: 12px;
}
.plan-card-three .fs-12 img{
    margin-top: 8px;
}
.plan-the-best-three .body-plan{
    background-color: #FCF6D6;
}
/* End plan cards three */

/* Plan cards four */
.plan-card-four {
    background-color: var(--bg-plan-card-body);
    border-radius: 8px;
    max-width: 320px;
    margin: auto !important;
    margin-bottom: 10px!important;
}

.plan-card-four .main-card {
    border:solid #D6D6D6 1px;
    border-top: none;
    border-radius: 0px 0px 8px 8px;
}

.plan-card-four .plan-card-top {
    background: var(--bg-plan-card-top) 0% 0% no-repeat padding-box;
    opacity: 1;
    padding: 10px 15px 5px 15px;
    height: 50px;
    color: #FFCB00;
    clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 50% 100%, 0% 50%);
}

.plan-card-four .plan-name {
    padding: 20px 20px 0px 20px;
    font-weight: 700;
    font-size: 50px;
    line-height: 75px;
    color: var(--color-plan-card-main);
}

.plan-card-four .body-plan .fs-14 {
    padding: 0px 20px;
    font-weight: 400;
    font-size: 14px;
    line-height: 21px;
}

.plan-card-four .plan-price, .plan-card-four .plan-price-value {
    color: var(--color-plan-card-price);
    font-size: 40px;
    font-weight: 700;
    line-height: 70px;
}

.plan-card-four .btn-warning {
    width: 100%;
    text-decoration: none;
    background-color: var(--bg-plan-card-button) !important;
    color: #000000!important;
    border-radius: 26px;
    padding: 12px 24px;
}

.plan-card-four .plan-details {
    margin: 0;
    padding-inline-start: 0;
}

.plan-card-four .plan-details ul {
    text-align: left;
}

.plan-card-four .plan-details ul li::marker {
    color: #01AD46;
  }

.plan-card-four .plan-subscription {
    padding: 0px 0px 20px 0px;
}
/* End plan cards four */

/* Plan cards five */

/* Os itens do owl tem altura independente, o que deixava os cards desalinhados.
   Esticar o stage iguala a altura de todos. */
.cards-v5 .owl-stage {
    display: flex;
    align-items: stretch;
}

.cards-v5 .owl-item {
    flex: 0 0 auto;
    display: flex;
}

.cards-v5 .owl-item > .text-center {
    display: flex;
    width: 100%;
}

.plan-card-five {
    --plan-five-text: #1E1E1E;
    --plan-five-muted: #646464;
    --plan-five-line: #E7E6F0;
    --plan-five-accent: var(--bg-plan-card-brand);
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 320px;
    padding-top: 30px;
    margin: 0 auto 10px auto !important;
}

.plan-card-five .main-card {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    background-color: var(--bg-plan-card-body);
    border: 1px solid var(--plan-five-line);
    border-radius: 16px;
    padding: 20px 20px 22px 20px;
}

.plan-card-five .body-plan {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.plan-card-five .body-plan > * {
    flex: 0 0 auto;
}

/* Faixa "mais escolhido": fica fora do fluxo, na altura reservada pelo padding-top do
   card, para nao entrar na conta da altura do conteudo. A altura dela e o padding
   reservado precisam ser iguais para a faixa encostar na borda do card. */
.plan-card-five .plan-five-ribbon {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 30px;
    padding: 0 18px;
    white-space: nowrap;
    background: var(--bg-plan-card-button);
    color: var(--bg-plan-card-brand);
    border-radius: 12px 12px 0 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.plan-card-five .plan-five-ribbon svg {
    width: 14px;
    height: 14px;
}

.plan-card-five .plan-five-head {
    margin-top: 12px;
}

.plan-card-five .plan-five-tag {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 8px;
    background-color: #EDECF6;
    color: var(--plan-five-accent);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.plan-card-five .plan-type {
    text-align: center;
}

.plan-card-five .plan-type p {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--plan-five-text);
}

.plan-card-five .plan-speed {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 6px;
    line-height: 1;
}

.plan-card-five .plan-name {
    font-size: 56px;
    font-weight: 800;
    line-height: 1;
    color: var(--plan-five-text);
}

.plan-card-five .plan-name-speed {
    font-size: 30px;
    font-weight: 800;
    line-height: 1;
    color: var(--plan-five-accent);
}

.plan-card-five .plan-features {
    list-style: none;
    margin: 18px 0 0 0;
    padding: 0;
    text-align: left;
    font-size: 13px;
    line-height: 1.35;
    color: var(--plan-five-muted);
}

.plan-card-five .plan-features li {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.plan-card-five .plan-features li:last-child {
    margin-bottom: 0;
}

.plan-card-five .plan-feature-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    color: var(--plan-five-accent);
}

.plan-card-five .plan-feature-icon svg {
    width: 18px;
    height: 18px;
}

.plan-card-five .plan-included {
    margin-top: 16px;
}

.plan-card-five .plan-included hr {
    margin: 0 0 10px 0;
    border: 0;
    border-top: 1px solid var(--plan-five-line);
}

.plan-card-five .plan-included-label {
    display: block;
    margin-bottom: 8px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: #9A9A9A;
}

/* Destaque dos apps: um box por app, com logo, icones e a descricao. Os boxes sao
   sempre brancos - inclusive no card destacado - porque as artes dos logos sao escuras
   e sobre fundo transparente. Por isso os textos e icones de dentro usam cor fixa, e
   nao os tokens do card. */
.plan-card-five .plan-app-cards {
    display: flex;
    align-items: stretch;
    gap: 8px;
}

.plan-card-five .plan-app-card {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px 8px;
    border: 1px solid #E7E6F0;
    border-radius: 10px;
    background-color: #FFFFFF;
}

/* Altura de logo igual nos dois boxes, para os icones e a descricao de baixo ficarem
   na mesma linha. object-fit: contain encaixa a arte nessa area sempre na proporcao
   original do arquivo - nunca estica nem recorta. Os dois arquivos sao recortados
   rente ao desenho, entao cada um ocupa a area toda sem ajuste individual. */
.plan-card-five .plan-app-logo {
    width: 100%;
    max-width: 96px;
    height: 38px;
    object-fit: contain;
    /* o ajuste de escala do Sky+ e para as versoes antigas do card */
    transform: none;
}


.plan-card-five .plan-app-icons {
    display: flex;
    justify-content: center;
    gap: 7px;
    color: var(--bg-plan-card-brand);
}

.plan-card-five .plan-app-icons svg {
    width: 15px;
    height: 15px;
}

.plan-card-five .plan-app-desc {
    margin: 0;
    font-size: 11px;
    line-height: 1.35;
    color: #646464;
}

.plan-card-five .body-plan .fs-14 {
    margin-top: auto;
    padding: 0;
    padding-top: 16px;
    min-height: 34px;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--plan-five-muted);
}

.plan-card-five .plan-price {
    padding: 0;
}

.plan-card-five .plan-price-value {
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    gap: 2px;
    line-height: 1;
    font-weight: 800;
    color: var(--plan-five-text);
}

.plan-card-five .plan-price-currency {
    font-size: 22px;
}

.plan-card-five .plan-price-integer {
    font-size: 58px;
}

.plan-card-five .plan-price-decimal {
    align-self: flex-start;
    margin-top: 8px;
    font-size: 24px;
}

.plan-card-five .plan-price-period {
    align-self: flex-end;
    margin-bottom: 4px;
    font-size: 14px;
    font-weight: 600;
    color: var(--plan-five-muted);
}

.plan-card-five .offer-text {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
    min-height: 26px;
}

.plan-card-five .offer-text p {
    display: inline-block;
    margin: 0;
    padding: 4px 12px;
    border-radius: 8px;
    background-color: #FFF6D9;
    color: #7A5C00;
    font-size: 11px;
    font-weight: 600;
    line-height: 18px;
}

.plan-card-five .offer-text p::first-letter {
    text-transform: uppercase;
}

.plan-card-five .plan-five-cta {
    margin-top: auto;
    padding-top: 16px;
}

.plan-card-five .btn-warning {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 14px 24px;
    border: none;
    border-radius: 28px;
    background-color: var(--bg-plan-card-button) !important;
    color: #1E1E1E !important;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
}


/* No mobile os cards ficam empilhados, um abaixo do outro. O owl continua
   inicializado - e por ele que os cards sao adicionados - mas o stage e apresentado
   como coluna, sem deslocamento. */
@media (max-width: 767px) {
    .cards-v5 .owl-stage {
        flex-direction: column;
        width: 100% !important;
        padding: 0 !important;
        transform: none !important;
    }

    .cards-v5 .owl-item {
        width: 100% !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
        margin-bottom: 0 !important;
    }

    /* Empilhados nao existe topo para alinhar, entao so o card destacado reserva o
       espaco da faixa - nos outros isso seria um vao morto entre os cards. */
    .plan-card-five {
        padding-top: 0;
        margin-bottom: 24px !important;
    }

    .plan-card-five.plan-five-best {
        padding-top: 30px;
    }
}

/* Highlighted card ("mais escolhido") */
.plan-card-five.plan-five-best {
    --plan-five-text: #FFFFFF;
    --plan-five-muted: rgba(255, 255, 255, 0.85);
    --plan-five-line: rgba(255, 255, 255, 0.25);
    --plan-five-accent: #FFFFFF;
    /* Tom claro do proprio azul da marca, para os detalhes (MEGA/GIGA, tag e icones)
       nao ficarem so branco sobre azul. O preco e os textos seguem brancos. */
    --plan-five-soft: #B4B0DC;
}

.plan-card-five.plan-five-best .plan-name-speed {
    color: var(--plan-five-soft);
}

.plan-card-five.plan-five-best .plan-feature-icon {
    color: var(--plan-five-soft);
}

.plan-card-five.plan-five-best .main-card {
    background-color: var(--bg-plan-card-highlight);
    border-color: var(--bg-plan-card-highlight);
}

.plan-card-five.plan-five-best .plan-five-tag {
    background-color: rgba(180, 176, 220, 0.18);
    color: var(--plan-five-soft);
}

.plan-card-five.plan-five-best .plan-included-label {
    color: rgba(255, 255, 255, 0.75);
}

.plan-card-five.plan-five-best .offer-text p {
    background-color: rgba(255, 255, 255, 0.18);
    color: #FFFFFF;
}

/* App offer (aplicativos inclusos no plano) */
.app-offer-info {
    font-size: 12px;
    flex-wrap: wrap;
}
.app-offer-info .app-offer-logo {
    width: auto;
    height: 21px;
    margin: 0 4px;
}
.tag-streaming {
    white-space: nowrap;
    color: #1E1E1E;
    background-color: #E5E5E5;
    padding: 2px 4px;
    border-radius: 2px;
    font-weight: 400;
    line-height: normal;
    margin-right: 4px;
}
/* End plan cards five */

/* The Sky+ logo file has a lot of built-in transparent padding around the wordmark,
   so at the same box size it reads visibly smaller than tightly-cropped app logos
   (e.g. Amazon Prime). Scale it up to bring both to a similar apparent size. */
.icon-card[alt="Sky+"] {
    transform: scale(0.80);
}