.prancheta-xd {
    position: relative; /* FUNDAMENTAL: Diz aos itens dentro dela que o ponto 0,0 começa aqui */
    width: 1400px;      /* A largura exata do projeto no XD */
    height: 4590px;      /* A altura exata desta primeira parte */
    margin: 0 auto;     /* Centraliza essa caixa de 1400px no meio do seu monitor */
    overflow: hidden;   /* Corta qualquer coisa que tente "vazar" para fora da prancheta */
    background-color: #280E41;
}

.grupo-2 {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 1400px;
    height: 800px;
    background-color: transparent;
    background-position: 0% 0%;
    background-repeat: no-repeat;
    background-origin: padding-box;
    opacity: 1;
}

.logo-provynet {
    position: absolute;
    top: 247px;
    left: 230px;
    width: 314px;
    height: 55px;
    background-color: transparent;
    background-position: 0% 0%;
    background-repeat: no-repeat;
    background-origin: padding-box;
    opacity: 1;
}


.texto-linha-1 {
    position: absolute;
    top: 310px;
    left: 237px;
    /* TODO: Retornar para width: 455px quando a fonte Omnes for instalada */
    width: 550px;
    height: 120px;
    text-align: left;
    font: normal normal 300 50px/50px Omnes, sans-serif;
    letter-spacing: 0px;
    color: #FFFFFF;
    opacity: 1;
}

.texto-linha-2 {
    position: absolute;
    top: 409px;
    left: 237px;
    width: 450px;
    height: 144px;
    text-align: left;
    font: normal normal bold 60px/60px Omnes, sans-serif;
    letter-spacing: 0px;
    color: #FFC800;
    opacity: 1;
}

.caminho-45 {
    position: absolute;
    top: 706px;
    left: 264px;
    width: 560px;
    height: 189px;

    /* Gradiente CSS: Ele substitui a necessidade da imagem SVG */
    background: linear-gradient(110deg, rgba(41, 14, 67, 0.77) 0%, rgba(8, 3, 13, 0.77) 100%);

    /* Arredondamento perfeito feito via código */
    border-radius: 95px 0px 0px 95px;

    /* Sombra */
    box-shadow: 10px 10px 6px rgba(0, 0, 0, 0.5);

    /* O Desfoque de Fundo (Backdrop Filter) */
    backdrop-filter: blur(7px) brightness(1.15);
    -webkit-backdrop-filter: blur(7px) brightness(1.15);
}


/* Retângulo Amarelo (Lado Direito) */
.retangulo-3 {
    position: absolute;
    top: 706px;
    left: 824px;
    width: 312px;
    height: 189px;

    /* Cor de Fundo Sólida (Substitui a imagem) */
    background-color: #FFC800;

    /* Arredondamento apenas no lado direito (Top-Left, Top-Right, Bottom-Right, Bottom-Left) */
    border-radius: 0px 121px 121px 0px;

    /* Sombra idêntica ao Adobe XD */
    box-shadow: 10px 10px 6px rgba(0, 0, 0, 0.5);

    opacity: 1;
}

.icone-mao {
    position: absolute;
    top: 756px;
    left: 340px;
    width: 124px;
    height: 79px;

    /* Propriedades de Fundo */
    background-color: transparent;
    background-position: 0% 0%;
    background-repeat: no-repeat;
    background-origin: padding-box;
    opacity: 1;
}

/* A CAIXA PAI (O agrupamento) */
.grupo-texto-conexao {
    position: absolute;
    top: 734px;
    left: 485px;
    width: 284px;
    height: 114px;
    opacity: 1;
}

/* O TEXTO FILHO 1 ("Conexão que") */
.conexao-linha-1 {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 270px;
    height: 64px;
    text-align: left;
    letter-spacing: 0px;
    color: #FFFFFF;

    /* Configuração de Fonte Desmembrada e Segura */
    /* ORIGINAL DO XD: font: normal normal 300 45px/50px Omnes; */
    font-family: 'Omnes',  sans-serif;
    font-weight: 300;
    font-size: 45px;
    line-height: 50px;
}

/* O TEXTO FILHO 2 ("cabe no bolso!") */
.conexao-linha-2 {
    position: absolute;
    top: 50px; /* Desce 50px em relação à caixa pai */
    left: 0px;
    /* TODO: Voltar para 284px quando a fonte Omnes for instalada */
    width: 295px;
    height: 64px;
    text-align: left;
    letter-spacing: 0px;
    color: #FFFFFF;

    /* Configuração de Fonte Desmembrada e Segura */
    /* ORIGINAL DO XD: font: normal normal medium 45px/50px Omnes; */
    font-family: 'Omnes',  sans-serif;
    font-weight: 500; /* O número 500 é o padrão web para "medium" */
    font-size: 45px;
    line-height: 50px;
}


.grupo-preco {
    position: absolute;
    top: 740px;
    left: 850px;
    width: 239px;
    height: 125px;
    opacity: 1;
}

/* FILHO 1: "Planos a partir de" */
.texto-a-partir{
    position: absolute;
    top: -10px; /* Sobe 10px em relação ao pai para bater com os 730px do XD */
    left: 0px;  /* Fica alinhado perfeitamente à esquerda com o R$ */
    width: 214px;
    height: 42px;
    text-align: left;
    color: #290E43;
    font-family: 'Omnes',  sans-serif;
    font-weight: 300;
    font-size: 30px;
    line-height: 50px;
}

/* "R$" */
.texto-cifrao {
    position: absolute;
    top: 13px;
    left: 0px;
    width: 61px;
    height: 125px;
    text-align: left;
    color: #290E43;

    /* Fonte desmembrada */
    font-family: 'Omnes',  sans-serif;
    font-weight: 700; /* bold */
    font-size: 50px;
    line-height: 148px;
}

/* "74" */
.texto-valor-inteiro {
    position: absolute;
    top: 0px;
    left: 61px; /* Começa perfeitamente onde os 61px do cifrão terminam */
    width: 103px;
    height: 125px;
    text-align: left;
    color: #290E43;

    /* Fonte desmembrada */
    font-family: 'Omnes',  sans-serif;
    font-weight: 700; /* bold */
    font-size: 89px;
    line-height: 148px;
}

/* FILHO 3: ",90" */
.texto-valor-decimal {
    position: absolute;
    top: 0px;  /* 763 - 740 = 23 */
    left: 164px; /* 1014 - 850 = 164 */
    width: 75px;
    height: 50px; /* 50*/
    text-align: left;
    color: #290E43;

    /* Fonte desmembrada e segura */
    font-family: 'Omnes',  sans-serif;
    font-weight: 700; /* Bold numérico */
    font-size: 49px;
    line-height: 145px;
}

/* Faixa Amarela (Retângulo 8) */
.retangulo-8 {
    position: absolute;
    top: 1249px;
    left: 0px;
    width: 1400px;
    height: 17px;

    /* Cor amarela sólida, substituindo a imagem */
    background-color: #FFC800;

    opacity: 1;
}

.banner-velocidade {
    position: absolute;
    top: 957px;
    left: 198px;
    width: 235px;
    height: 617px;

    /* Propriedades de Fundo e Efeitos */
    background-color: transparent;
    background-position: 0% 0%;
    background-repeat: no-repeat;
    background-origin: padding-box;
    box-shadow: 5px 5px 6px #00000029;
    border-radius: 50px;
    opacity: 1;
}

.banner-estabilidade {
    position: absolute;
    top: 957px;
    left: 455px;
    width: 236px;
    height: 617px;

    /* Propriedades de Fundo e Efeitos */
    background-color: transparent;
    background-position: 0% 0%;
    background-repeat: no-repeat;
    background-origin: padding-box;
    box-shadow: 5px 5px 6px #00000029;
    border-radius: 50px;
    opacity: 1;
}

.banner-seguranca {
    position: absolute;
    top: 957px;
    left: 711px;
    width: 236px;
    height: 617px;

    /* Propriedades de Fundo e Efeitos */
    background-color: transparent;
    background-position: 0% 0%;
    background-repeat: no-repeat;
    background-origin: padding-box;
    box-shadow: 5px 5px 6px #00000029;
    border-radius: 50px;
    opacity: 1;
}

.banner-entretenimento {
    position: absolute;
    top: 957px;
    left: 968px;
    width: 235px;
    height: 617px;

    /* Propriedades de Fundo e Efeitos */
    background-color: transparent;
    background-position: 0% 0%;
    background-repeat: no-repeat;
    background-origin: padding-box;
    box-shadow: 5px 5px 6px #00000029;
    border-radius: 50px;
    opacity: 1;


}

.icone-secao {
    position: absolute;
    top: 1428px;
    left: 292px;
    width: 56px;
    height: 34px;

    /* Propriedades de Fundo */
    background-color: transparent;
    background-position: 0% 0%;
    background-repeat: no-repeat;
    background-origin: padding-box;
    opacity: 1;
}

.icone-estabilidade {
    position: absolute;
    top: 1425px;
    left: 545px;
    width: 56px;
    height: 41px;

    /* Propriedades de Fundo */
    background-color: transparent;
    background-position: 0% 0%;
    background-repeat: no-repeat;
    background-origin: padding-box;
    opacity: 1;
}

.icone-escudo {
    position: absolute;
    top: 1418px;
    left: 809px;
    width: 40px;
    height: 47px;

    /* Propriedades de Fundo */
    background-color: transparent;
    background-position: 0% 0%;
    background-repeat: no-repeat;
    background-origin: padding-box;
    opacity: 1;
}

.icone-grupo-8 {
    position: absolute;
    top: 1417px;
    left: 1061px;
    width: 48px;
    height: 48px;

    /* Propriedades de Fundo */
    background-color: transparent;
    background-position: 0% 0%;
    background-repeat: no-repeat;
    background-origin: padding-box;
    opacity: 1;
}

/* CAIXA PAI - Ajuste o top e left com as coordenadas do grupo no XD */
.grupo-texto-velocidade {
    position: absolute;
    top: 1500px;
    left: 244px;
    width: 142px;
    height: 32px;
}

/* O sinal de "+" (Amarelo e Bold) */
.texto-mais {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 12px;
    height: 32px;
    text-align: center;
    color: #FFC800; /* Amarelo da sua paleta */

    /* Fontes desmembradas */
    font-family: 'Omnes',  sans-serif;
    font-weight: 700; /* Bold */
    font-size: 23px;
    line-height: 50px;
}

/* A palavra "VELOCIDADE" (Branco e Light) */
.texto-velocidade {
    position: absolute;
    top: 0px;
    left: 12px; /* Começa perfeitamente onde o + termina */
    width: 130px;
    height: 32px;
    text-align: center;
    color: #FFFFFF;

    /* Fontes desmembradas */
    font-family: 'Omnes',  sans-serif;
    font-weight: 300; /* Light/Normal */
    font-size: 23px;
    line-height: 50px;
}


/* CAIXA PAI - ESTABILIDADE */
.grupo-texto-estabilidade {
    position: absolute;
    top: 1500px;
    left: 496px;
    width: 154px;
    height: 32px;
}

/* A palavra "ESTABILIDADE" (Branco e Light) */
.texto-estabilidade {
    position: absolute;
    top: 0px;
    left: 12px; /* Começa onde o + termina */
    width: 142px;
    height: 32px;
    text-align: center;
    color: #FFFFFF;

    /* Fontes desmembradas */
    font-family: 'Omnes',  sans-serif;
    font-weight: 300;
    font-size: 23px;
    line-height: 50px;
}

/* CAIXA PAI - SEGURANÇA */
.grupo-texto-seguranca {
    position: absolute;
    top: 1500px;
    left: 760px;
    width: 138px;
    height: 32px;
}

/* A palavra "SEGURANÇA" (Branco e Light) */
.texto-seguranca {
    position: absolute;
    top: 0px;
    left: 12px; /* Começa onde o + termina */
    width: 126px;
    height: 32px;
    text-align: center;
    color: #FFFFFF;

    /* Fontes desmembradas */
    font-family: 'Omnes',  sans-serif;
    font-weight: 300;
    font-size: 23px;
    line-height: 50px;
}

/* CAIXA PAI - ENTRETENIMENTO */
.grupo-texto-entretenimento {
    position: absolute;
    top: 1500px;
    left: 986px;
    width: 200px;
    height: 32px;
}

/* A palavra "ENTRETENIMENTO" (Branco e Light) */
.texto-entretenimento {
    position: absolute;
    top: 0px;
    left: 12px; /* Começa exatamente onde o + termina */
    width: 188px;
    height: 32px;
    text-align: center;
    color: #FFFFFF;

    /* Fontes desmembradas */
    font-family: 'Omnes',  sans-serif;
    font-weight: 300;
    font-size: 22px;
    line-height: 50px;
}


/* Título da seção do Aplicativo */
.texto-aplicativo {
    position: absolute;
    top: 1601px;
    left: 502px;
    width: 430px;
    height: 56px;
    text-align: center;
    color: #FFFFFF;
    opacity: 1;

    /* Fontes desmembradas */
    font-family: 'Omnes',  sans-serif;
    font-weight: 300;
    font-size: 40px;
    line-height: 50px;
}

/* Texto de destaque: Você evita dor de cabeça */
.texto-dor-de-cabeca {
    position: absolute;
    top: 1649px;
    left: 501px;
    width: 430px;
    height: 144px;
    text-align: center;
    color: #FFC800;
    opacity: 1;

    /* Fontes desmembradas */
    font-family: 'Omnes',  sans-serif;
    font-weight: 700; /* Bold */
    font-size: 60px;
    line-height: 60px;
}

/* Imagem 1 do Aplicativo (Celular) */
.imagem-app-1 {
    position: absolute;
    top: 1798px;
    left: 299px;
    width: 208px;
    height: 411px;

    /* Propriedades de Fundo e Sombra */
    background-color: transparent;
    background-position: 0% 0%;
    background-repeat: no-repeat;
    background-origin: padding-box;
    box-shadow: -10px 10px 6px #00000029; /* Sombra projetada para a esquerda */
    opacity: 1;
      /* Mantendo a correção para a imagem não cortar */
    background-size: contain;
}

/* Imagem 2 do Aplicativo (Celular) */
.imagem-app-2 {
    position: absolute;
    top: 1798px;
    left: 446px;
    width: 208px;
    height: 412px;

    /* Propriedades de Fundo e Sombra */
    background-color: transparent;
    background-position: 0% 0%;
    background-repeat: no-repeat;
    background-origin: padding-box;
    box-shadow: -10px 10px 6px #00000029;
    opacity: 1;

    /* Mantendo a correção para a imagem não cortar */
    background-size: contain;
}

/* Imagem 3 do Aplicativo (Celular Central) */
.imagem-app-3 {
    position: absolute;
    top: 1798px;
    left: 587px;
    width: 209px;
    height: 412px;

    /* Propriedades de Fundo e Sombra */
    background-color: transparent;
    background-position: 0% 0%;
    background-repeat: no-repeat;
    background-origin: padding-box;
    box-shadow: -10px 10px 6px #00000029;
    opacity: 1;

    /* A mágica para não cortar a parte de baixo */
    background-size: contain;
}


/* Imagem 4 do Aplicativo (Celular) */
.imagem-app-4 {
    position: absolute;
    top: 1798px;
    left: 735px;
    width: 211px;
    height: 413px;

    /* Propriedades de Fundo e Sombra */
    background-color: transparent;
    background-position: 0% 0%;
    background-repeat: no-repeat;
    background-origin: padding-box;
    box-shadow: -10px 10px 6px #00000029;
    opacity: 1;

    /* A mágica para não cortar a imagem */
    background-size: contain;
}

/* Imagem 5 do Aplicativo (Celular Final) */
.imagem-app-5 {
    position: absolute;
    top: 1798px;
    left: 893px;
    width: 209px;
    height: 413px;

    /* Propriedades de Fundo e Sombra */
    background-color: transparent;
    background-position: 0% 0%;
    background-repeat: no-repeat;
    background-origin: padding-box;
    box-shadow: -10px 10px 6px #00000029;
    opacity: 1;

    /* Garantindo que a imagem caiba perfeitamente */
    background-size: contain;
}

/* CAIXA PAI - Título: Conheça os nossos planos */
.grupo-conheca-planos {
    position: absolute;
    top: 2265px;
    left: 460px;
    width: 481px;
    height: 56px;
}

/* Primeira parte: "Conheça os" (Light) */
.texto-conheca {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 215px;
    height: 56px;
    text-align: left;
    color: #FFFFFF;

    /* Fontes desmembradas */
    font-family: 'Omnes',  sans-serif;
    font-weight: 300; /* Light */
    font-size: 40px;
    line-height: 50px;
}

/* Segunda parte: "nossos planos:" (Bold) */
.texto-planos {
    position: absolute;
    top: 0px;
    left: 207px;
    width: 300px;
    height: 56px;
    text-align: left;
    color: #FFFFFF;

    /* Fontes desmembradas */
    font-family: 'Omnes',  sans-serif;
    font-weight: 700; /* Bold */
    font-size: 40px;
    line-height: 50px;
}

/* Barra amarela separadora */
.barra-amarela {
    position: absolute;
    top: 2330px;
    left: 550px;
    width: 300px;
    height: 3px;

    /* Propriedades Visuais */
    background-color: #FFC800; /* O amarelo do design */
    border-radius: 100px; /* Deixa as pontas da linha arredondadas */
    opacity: 1;
}

/* Card principal de Planos (Fundo com efeito Glass/Vidro) */
.card-plano {
    position: absolute;
    top: 2416px;
    left: 198px;
    width: 314px;
    height: 522px;

    /* Propriedades base de Fundo (A imagem virá do HTML) */
    background-color: transparent;
    background-position: 0% 0%;
    background-repeat: no-repeat;
    background-origin: padding-box;

    /* Bordas e Sombra */
    border-radius: 52px;
    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
    opacity: 1;

    /* Efeito de Vidro (Glassmorphism) */
    backdrop-filter: blur(50px);
    -webkit-backdrop-filter: blur(50px);
}

/* Card principal de Planos  */
.card-plano-1{
    position: absolute;
    top: 2416px;
    left: 198px;
    width: 314px;
    height: 522px;

    /* 1. Arredondar os cantos para igualar ao design */
    border-radius: 52px;

    /* 2. Cor #19062B com 30% de opacidade (Opacidade de preenchimento) */
    background-color: rgba(25, 6, 43, 0.3);

    /* 3. A Sombra do XD (X: 10, Y: 10, Desfoque: 10) */
    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);

    /* 4. O Efeito de Vidro (Desfoque de fundo e Brilho) */
    backdrop-filter: blur(50px) brightness(97%);
    -webkit-backdrop-filter: blur(50px) brightness(97%);
}

/* Texto Gigante do Card 1 (ex: "200") */
.texto-megas-card-1 {
    position: absolute;
    top: 18px; /* Posição relativa ao topo do card */
    left: 45px; /* Posição relativa à lateral do card */
    width: 225px;
    height: 168px;
    text-align: left;
    color: #FFFFFF;

    /* Fontes desmembradas */
    font-family: 'Omnes',  sans-serif;
    font-weight: 700; /* Bold */
    font-size: 120px;
    line-height: 150px;
}

/* Fundo Amarelo */
.selo-amarelo-card-1 {
    position: absolute;
    top: 132px;
    left: 91px;
    width: 133px;
    height: 42px;
    background-color: #FFC800;
    box-shadow: 5px 5px 6px rgba(0, 0, 0, 0.16);
    border-radius: 36px;
    opacity: 1;
    /* Garante que o selo amarelo fique POR CIMA do número 200 */
    z-index: 2;


}

/* O Texto MEGA (Limpo, sem top e sem left) */
.texto-mega-card-1 {
    position: absolute;
    top: -12px;
    left: 15px;
    color: #19062B;
    text-align: left;
    text-transform: uppercase;


    font-family: 'Omnes', sans-serif;
    font-weight: 500; /* Medium */
    font-size: 40px;
    line-height: 59px;
}


/* 1. Registramos uma variável de ângulo para animar o gradiente diretamente (Sem girar a div) */
@property --angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

/* 2. A animação agora gira apenas o ângulo de luz */
@keyframes girar-neon {
    0% { --angle: 0deg; }
    100% { --angle: 360deg; }
}

/* 3. O Card Base (Voltamos com o vidro original direto nele) */
.card-plano-2 {
    position: absolute;
    top: 2372px;
    left: 528px;
    width: 345px;
    height: 574px;

    border-radius: 52px;
    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);

    /* Efeito de Vidro original do seu XD */
    background-color: rgba(25, 6, 43, 0.3);
    backdrop-filter: blur(50px) brightness(97%);
    -webkit-backdrop-filter: blur(50px) brightness(97%);
}

/* 4. A Borda Neon (Preenchendo todo o contorno) */
.card-plano-2::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 52px;
    padding: 3px;

    /* A MÁGICA ESTÁ AQUI: Removemos o transparente.
       Agora as cores preenchem 100% da borda num degradê suave que gira! */
    background: conic-gradient(
        from var(--angle),
        #FFC800 0%,
        #FF007F 50%,
        #FFC800 100%
    );

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;

    animation: girar-neon 3s linear infinite;
    pointer-events: none;
}

/* Card 3 de Planos (Card da Direita) */
.card-plano-3 {
    position: absolute;
    top: 2416px;
    left: 888px;
    width: 314px;
    height: 522px;

    /* A nossa receita mágica em CSS puro (herdada dos outros cards) */
    border-radius: 52px;
    background-color: rgba(25, 6, 43, 0.3); /* Cor roxa com 30% de opacidade */
    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5); /* Sombra */

    /* Efeito de Vidro (Glassmorphism) */
    backdrop-filter: blur(50px) brightness(97%);
    -webkit-backdrop-filter: blur(50px) brightness(97%);
}

/* Linha divisória do Card 1 */
.linha-divisoria-card-1 {
    position: absolute;
    top: 211px; /* Posição em relação ao topo do card */
    left: 49px; /* Posição em relação à lateral do card */
    width: 216px;
    height: 3px;
    background-color: #2C1245; /* Roxo bem escuro do design */
    opacity: 1;
}

/* Texto provynet.PLAY do Card 1 */
.texto-play-card-1 {
    position: absolute;
    top: 238px;
    left: 49px;
    width: 227px;
    height: 47px;
    text-align: left;
    color: #FFFFFF;

    /* Fontes desmembradas */
    font-family: 'Omnes',  sans-serif;
    font-weight: 600; /* Semi-bold */
    font-size: 34px;
    line-height: 43px;
}

/* Texto IPTV do Card 1 */
.texto-iptv-card-1 {
    position: absolute;
    top: 275px;
    left: 232px;
    width: 44px;
    height: 32px;
    text-align: left;
    color: #FFFFFF;

    /* Fontes desmembradas */
    font-family: 'Omnes',  sans-serif;
    font-weight: 300; /* Light */
    font-size: 23px;
    line-height: 29px;
}

/* Texto "por apenas" do Card 1 */
.texto-por-apenas-card-1 {
    position: absolute;
    top: 341px;
    left: 49px;
    /* todo: padrão era width: 159px;*/
    width: 180px;
    height: 47px;
    text-align: left;
    color: #FFFFFF;

    /* Fontes desmembradas */
    font-family: 'Omnes',  sans-serif;
    font-weight: 300; /* Light */
    font-size: 34px;
    line-height: 43px;
}

/* Texto de Preço (R$ 74,90) do Card 1 */
.texto-preco-card-1 {
    position: absolute;
    /* todo: top: 371 */
    top: 371px;
    left: 47px;
    /* todo: width era 220*/
    width: 230px;
    height: 75px;
    text-align: left;
    color: #FFFFFF;

    /* Fontes desmembradas */
    font-family: 'Omnes',  sans-serif;
    font-weight: 700; /* Bold */
    font-size: 54px;
    line-height: 68px;
}

/* Texto /Mês do Card 1 */
.texto-mes-card-1 {
    position: absolute;
    top: 429px;
    left: 219px;
    width: 48px;
    height: 33px;
    text-align: left;
    color: #FFFFFF;

    /* Fontes desmembradas */
    font-family: 'Omnes',  sans-serif;
    font-weight: 300; /* Light */
    font-size: 24px;
    line-height: 30px;
}

/* Texto Gigante do Card 2 ("400") */
.texto-megas-card-2 {
    position: absolute;
    top: 19px; /* Posição relativa ao topo do Card 2 */
    left: 49px; /* Posição relativa à lateral do Card 2 */
    width: 253px;
    height: 183px;
    text-align: left;
    color: #FFFFFF;

    /* Fontes desmembradas */
    font-family: 'Omnes',  sans-serif;
    font-weight: 700; /* Bold */
    font-size: 131px;
    line-height: 164px;

    /* Traz o texto para a frente, furando a camada de vidro */
    z-index: 3;
}

/* Selo Amarelo do Card 2 (Mais largo para o texto respirar) */
.selo-amarelo-card-2 {
    position: absolute;
    top: 144px;
    left: 100px;
    width: 146px;
    height: 46px;
    background-color: #FFC800;
    box-shadow: 5px 5px 6px rgba(0, 0, 0, 0.16); /* 0.16 equivale ao #00000029 */
    border-radius: 36px;
    opacity: 1;
    z-index: 3;
}

/* Texto "MEGA" do Card 2 (Mais grosso e centralizado) */
.texto-mega-card-2 {
    position: absolute;
    top: -13px; /* Posição relativa ao selo amarelo */
    left: 15px;
    width: 115px; /* Mesma largura do selo amarelo */
    text-align: left;
    color: #19062B;
    text-transform: uppercase;


    font-family: 'Omnes',  sans-serif;
    font-weight: 500;
    font-size: 43px;
    line-height: 63px;
    z-index: 3;
}

/* Linha divisória do Card 2 */
.linha-divisoria-card-2 {
    position: absolute;
    top: 232px;
    left: 54px;
    width: 237px;
    height: 3px;
    background-color: #2C1245; /* Roxo escuro */
    opacity: 1;
    z-index: 3;
}

/* Texto provynet.PLAY do Card 2 */
.texto-play-card-2 {
    position: absolute;
    top: 253px;
    left: 59px;
    width: 227px;
    height: 47px;
    text-align: left;
    color: #FFFFFF;

    /* Fontes desmembradas */
    font-family: 'Omnes',  sans-serif;
    font-weight: 600; /* Semi-bold */
    font-size: 34px;
    line-height: 43px;
    z-index: 3;
}

/* Texto IPTV do Card 2 */
.texto-iptv-card-2 {
    position: absolute;
    top: 290px;
    left: 242px;
    width: 44px;
    height: 32px;
    text-align: left;
    color: #FFFFFF;

    /* Fontes desmembradas */
    font-family: 'Omnes',  sans-serif;
    font-weight: 300; /* Light */
    font-size: 23px;
    line-height: 29px;
    z-index: 3;
}

/* Sinal de Mais (+) do Card 2 */
.texto-mais-card-2 {
    position: absolute;
    top: 290px; /* TODO: era 283 */
    left: 163px;
    width: 18px;
    height: 47px;
    text-align: left;
    color: #FFFFFF;

    /* Fontes desmembradas */
    font-family: 'Omnes',  sans-serif;
    font-weight: 600; /* Semi-bold */
    font-size: 34px;
    line-height: 43px;
    z-index: 3;
}

/* Texto APLICATIVOS do Card 2 */
.texto-aplicativos-card-2 {
    position: absolute;
    top: 330px;
    left: 77px;
    width: 208px;
    height: 47px;
    text-align: left;
    color: #FFFFFF;

    /* Fontes desmembradas */
    font-family: 'Omnes',  sans-serif;
    font-weight: 600; /* Semi-bold */
    font-size: 34px;
    line-height: 43px;
    z-index: 3;
}

/* Texto "por apenas" do Card 2 */
.texto-por-apenas-card-2 {
    position: absolute;
    top: 375px;
    left: 54px;
    width: 190px;
    height: 52px;
    text-align: left;
    color: #FFFFFF;

    /* Fontes desmembradas */
    font-family: 'Omnes',  sans-serif;
    font-weight: 300; /* Light */
    font-size: 37px;
    line-height: 47px;
    z-index: 3;
}

/* Texto de Preço (R$ 79,90) do Card 2 */
.texto-preco-card-2 {
    position: absolute;
    top: 408px;
    left: 54px;
    width: 238px;
    height: 81px;
    text-align: left;
    color: #FFFFFF;

    /* Fontes desmembradas */
    font-family: 'Omnes',  sans-serif;
    font-weight: 700; /* Bold */
    font-size: 58px;
    line-height: 73px;

    z-index: 3;
}

/* Texto /Mês do Card 2 */
.texto-mes-card-2 {
    position: absolute;
    top: 468px;
    left: 241px;
    width: 50px;
    height: 36px;
    text-align: left;
    color: #FFFFFF;

    /* Fontes desmembradas */
    font-family: 'Omnes',  sans-serif;
    font-weight: 300; /* Light */
    font-size: 25px;
    line-height: 31px;

    z-index: 3;
}

/* Selo "MAIS POPULAR!" (Fundo Amarelo) do Card 2 */
.selo-popular-card-2 {
    position: absolute;
    top: 516px;
    left: 49px;
    width: 246px;
    height: 54px;
    background-color: #FFC800;
    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5); /* 0.5 equivale a 80 em Hex */
    border-radius: 22px;
    opacity: 1;

    z-index: 3;
}

/* Texto "MAIS POPULAR!" (Centralizado perfeitamente) */
.texto-popular-card-2 {
    position: absolute;
    top: 9px; /* Distância do topo do selo amarelo */
    left: 0px;
    width: 246px; /* Mesma largura do selo amarelo para centralizar */
    text-align: center; /* Centralização automática */
    color: #1C0631; /* Roxo ultra escuro */

    /* Fontes desmembradas */
    font-family: 'Omnes',  sans-serif;
    font-weight: 700;
    font-size: 28px;
    line-height: 35px;

    z-index: 3;
}

/* Texto Gigante do Card 3 ("600") */
.texto-megas-card-3 {
    position: absolute;
    top: 18px;
    left: 45px;
    width: 231px;
    height: 168px;
    text-align: left;
    color: #FFFFFF;

    /* Fontes desmembradas */
    font-family: 'Omnes',  sans-serif;
    font-weight: bold;
    font-size: 120px;
    line-height: 150px;
}

/* Selo Amarelo do Card 3 (Mais largo e re-alinhado) */
.selo-amarelo-card-3 {
    position: absolute;
    top: 132px;
    left: 91px;
    width: 133px;
    height: 42px;
    background-color: #FFC800;
    box-shadow: 5px 5px 6px rgba(0, 0, 0, 0.16);
    border-radius: 36px;
    opacity: 1;
}

/* Texto "MEGA" do Card 3 (Negrito e Centralizado) */
.texto-mega-card-3 {
    position: absolute;
    top: -12px;
    left: 15px;
    width: 160px; /* Mesma largura da caixa amarela */
    text-align: left; /* Centralização perfeita */
    color: #19062B;
    text-transform: uppercase;

    /* Fontes desmembradas */
    font-family: 'Omnes',  sans-serif;
    font-weight: 500;
    font-size: 40px;
    line-height: 59px;
}

/* Linha divisória do Card 3 */
.linha-divisoria-card-3 {
    position: absolute;
    top: 211px;
    left: 49px;
    width: 216px;
    height: 3px;
    background-color: #2C1245; /* Roxo bem escuro */
    opacity: 1;
}

/* Texto provynet.PLAY do Card 3 */
.texto-play-card-3 {
    position: absolute;
    top: 223px; /* 2639 (Texto) - 2416 (Card) */
    left: 49px; /* 937 (Texto) - 888 (Card) */
    width: 227px;
    height: 47px;
    text-align: left;
    color: #FFFFFF;

    /* Fontes desmembradas */
    font-family: 'Omnes',  sans-serif;
    font-weight: 600; /* Semi-bold */
    font-size: 34px;
    line-height: 43px;
}

/* Texto IPTV do Card 3 */
.texto-iptv-card-3 {
    position: absolute;
    top: 260px;
    left: 232px;
    width: 44px;
    height: 32px;
    text-align: left;
    color: #FFFFFF;

    /* Fontes desmembradas */
    font-family: 'Omnes',  sans-serif;
    font-weight: 300; /* Light */
    font-size: 23px;
    line-height: 29px;
}

/* Sinal de Mais (+) do Card 3 */
.texto-mais-card-3 {
    position: absolute;
    top: 260px;
    left: 153px;
    width: 18px;
    height: 47px;
    text-align: left;
    color: #FFFFFF;

    /* Fontes desmembradas */
    font-family: 'Omnes',  sans-serif;
    font-weight: 600; /* Semi-bold */
    font-size: 34px;
    line-height: 43px;
}

/* Texto APLICATIVOS do Card 3 */
.texto-aplicativos-card-3 {
    position: absolute;
    top: 296px;
    left: 67px;
    width: 208px;
    height: 47px;
    text-align: left;
    color: #FFFFFF;

    /* Fontes desmembradas */
    font-family: 'Omnes',  sans-serif;
    font-weight: 600; /* Semi-bold */
    font-size: 34px;
    line-height: 43px;
}

/* Texto "por apenas" do Card 3 */
.texto-por-apenas-card-3 {
    position: absolute;
    top: 341px;
    left: 49px;
    width: 180px;
    height: 47px;
    text-align: left;
    color: #FFFFFF;

    /* Fontes desmembradas */
    font-family: 'Omnes',  sans-serif;
    font-weight: 300; /* Light */
    font-size: 34px;
    line-height: 43px;
}

/* Texto de Preço (R$ 89,90) do Card 3 */
.texto-preco-card-3 {
    position: absolute;
    top: 368px;
    left: 49px;
    width: 224px;
    height: 75px;
    text-align: left;
    color: #FFFFFF;

    /* Fontes desmembradas */
    font-family: 'Omnes',  sans-serif;
    font-weight: bold; /* Forçando o Negrito */
    font-size: 54px;
    line-height: 68px;
}

/* Texto /Mês do Card 3 */
.texto-mes-card-3 {
    position: absolute;
    top: 423px;
    left: 219px;
    width: 48px;
    height: 33px;
    text-align: left;
    color: #FFFFFF;

    /* Fontes desmembradas */
    font-family: 'Omnes',  sans-serif;
    font-weight: 300; /* Light */
    font-size: 24px;
    line-height: 30px;
}



/* Retângulo 15 - Criado 100% em CSS */
.retangulo-15 {
    position: absolute;
    top: 3074px;
    left: 0px;
    width: 1400px;
    height: 414px;

    /* Cor de fundo amarela substituindo a imagem */
    background-color: #FFC800;

    /* Sombras originais do XD (Inset e Outset) */
    box-shadow: inset 10px 10px 6px rgba(255, 162, 0, 0.16), 15px 15px 20px rgba(255, 187, 0, 0.16);

    opacity: 1;
}

/* Container do Texto (posicionado em relação ao retângulo) */
.caixa-texto-app {
    position: absolute;
    top: 52px;
    left: 460px;
    width: 496px;
    height: 106px;
}

/* Linha 1: "Contrate um plano e" (Fonte Normal) */
.texto-contrate {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 370px;
    height: 56px;
    text-align: center;
    color: #1C0631;

    font-family: 'Omnes',  sans-serif;
    font-weight: normal;
    font-size: 40px;
    line-height: 50px;
}

/* Linha 1 (Continuação): "leve um" (Negrito) */
.texto-leve-um {
    position: absolute;
    top: 0px;
    left: 363px; /* Inicia exatamente após os 343px da parte anterior */
    width: 152px;
    height: 56px;
    text-align: center;
    color: #1C0631;

    font-family: 'Omnes',  sans-serif;
    font-weight: bold; /* Forçando o Negrito */
    font-size: 40px;
    line-height: 50px;
}

/* Linha 2: "aplicativo de sua escolha" (Negrito) */
.texto-aplicativo-escolha {
    position: absolute;
    top: 50px;
    left: 15px;
    width: 490px;
    height: 56px;
    text-align: center;
    color: #1C0631;

    font-family: 'Omnes',  sans-serif;
    font-weight: bold; /* Forçando o Negrito */
    font-size: 40px;
    line-height: 50px;
}

/* Primeiro Ícone de Aplicativo (PlayKids) */
.icone-app-1 {
    position: absolute;
    top: 3263px;
    left: 204px;
    width: 128px;
    height: 130px;
    object-fit: contain;
    opacity: 1;
}

/* Segundo Ícone de Aplicativo */
.icone-app-2 {
    position: absolute;
    top: 3263px;
    left: 346px;
    width: 128px;
    height: 130px;
    object-fit: contain;
    opacity: 1;
}

/*Terceiro Ícone de Aplicativo (KARPESKY) */
.icone-app-3{
    position: absolute;
    top: 3263px;
    left: 488px;
    width: 128px;
    height: 130px;
    object-fit: contain;
    opacity: 1;
}

/* Quarto Ícone de Aplicativo (DEEZER) */
.icone-app-4{
    position: absolute;
    top: 3263px;
    left: 631px;
    width: 128px;
    height: 130px;
    object-fit: contain;
    opacity: 1;
}

/* Quinto Ícone de Aplicativo (Disney) */
.icone-app-5{
    position: absolute;
    top: 3263px;
    left: 774px;
    width: 128px;
    height: 130px;
    object-fit: contain;
    opacity: 1;
}

/* Sexto Ícone de Aplicativo (Max) */
.icone-app-6{
    position: absolute;
    top: 3263px;
    left: 922px;
    width: 128px;
    height: 130px;
    object-fit: contain;
    opacity: 1;
}


/* Sétimo Ícone de Aplicativo  */
.icone-app-7{
    position: absolute;
    top: 3263px;
    left: 1066px;
    width: 128px;
    height: 130px;
    object-fit: contain;
    opacity: 1;
}

/* Botão "Assina já!" (Fundo Roxo) */
.botao-assine-ja {
    position: absolute;
    top: 3456px;
    left: 579px;
    width: 243px;
    height: 64px;
    background-color: #8319E9; /* Roxo vibrante */
    box-shadow: 10px 10px 6px rgba(0, 0, 0, 0.16);
    border-radius: 36px;
    opacity: 1;

}



/* Texto do Botão (Centralizado) */
.texto-assine-ja {
    position: absolute;
    top: 4px;
    left: 0px;
    width: 243px;
    text-align: center;
    color: #FFFFFF;

    /* Fontes desmembradas */
    font-family: 'Omnes',  sans-serif;
    font-weight: 500; /* Medium */
    font-size: 40px;
    line-height: 50px;
}

/* Container da Seção Agrupar 4 */
.agrupar-4 {
    position: absolute;
    top: 3479px;
    left: 0px;
    width: 1400px;
    height: 800px;
    background-color: transparent;
    background-position: 0% 0%;
    background-repeat: no-repeat;
    opacity: 1;
}

/* Container do Formulário (Efeito Semi-Transparente) */
.caixa-formulario {
    position: absolute;
    top: 159px;
    left: 617px;
    width: 553px;
    /* Altura reduzida (de 541px para 430px) para compensar a remoção do campo */
    height: 430px;

    /* Cor #2C1245 com 36% de opacidade (rgba) */
    background-color: rgba(44, 18, 69, 0.36);

    /* Borda clara fina para dar o acabamento visto no design */
    border: 1px solid rgba(255, 255, 255, 0.2);

    border-radius: 20px;

    /* Sombra externa */
    box-shadow: 15px 15px 20px rgba(0, 0, 0, 0.16);

    /* O desfoque estava zero no XD, mas mantemos o suporte aqui caso queira aumentar depois */
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
}

/* Título "Preencha os seus dados" */
.titulo-formulario {
    position: absolute;
    top: 26px; /* Distância do topo da caixa semi-transparente */
    left: 31px; /* Distância da lateral esquerda da caixa */
    width: 299px;
    height: 26px;
    text-align: left;
    color: #E4E4E4; /* Cinza bem clarinho */

    /* Configurações da Fonte */
    font-family: 'Omnes',  sans-serif;
    font-weight: 500; /* Medium */
    font-size: 25px;
    line-height: 36px;
}

/* Linha amarela abaixo do título do formulário */
.linha-destaque-formulario {
    position: absolute;
    top: 62px;
    left: 31px;
    width: 232px;
    height: 2px;
    background-color: #FFC800;
}

/* Texto "Nome Completo:" */
.label-nome {
    position: absolute;
    top: 95px;
    left: 33px;
    width: 159px;
    height: 26px;
    text-align: left;
    color: #E4E4E4;

    /* Configurações da Fonte */
    font-family: 'Omnes',  sans-serif;
    font-weight: 500; /* Medium */
    font-size: 18px;
    line-height: 25px;
}

/* Caixa do campo Nome Completo */
.input-nome {
    position: absolute;
    top: 121px;
    left: 31px;
    width: 491px; /* Para considerar as bordas e o padding sem quebrar o layout, o navegador usa o box-sizing padrão */
    height: 58px;

    /* UI Properties do XD */
    border: 1px solid #FFFFFF;
    border-radius: 8px;
    opacity: 1;

    /* Configurações extras obrigatórias para Inputs ficarem bonitos */
    background-color: transparent;
    color: #FFFFFF; /* Cor do texto que o usuário vai digitar */
    font-family: 'Omnes',  sans-serif; /* Mantém a fonte padronizada */
    font-size: 18px;
    padding: 0 15px; /* Dá 15px de respiro interno nas laterais */
    outline: none; /* Remove a borda de foco padrão do navegador */
    box-sizing: border-box; /* Garante que o padding não aumente o tamanho total de 491px */
}

/* Efeito de quando o usuário clica na caixa (Foco) */
.input-nome:focus {
    border-color: #FFC800; /* Deixa a borda amarela quando a pessoa clica para digitar (opcional, mas fica bem legal!) */
}

/* Texto "Celular:" */
.label-celular {
    position: absolute;
    top: 191px;
    left: 31px;
    width: 63px;
    height: 26px;
    text-align: left;
    color: #E4E4E4;

    /* Configurações da Fonte */
    font-family: 'Omnes',  sans-serif;
    font-weight: 500; /* Medium */
    font-size: 18px;
    line-height: 25px;
}

/* Caixa do campo Celular */
.input-celular {
    position: absolute;
    top: 218px;
    left: 31px;
    width: 491px;
    height: 57px;

    /* UI Properties do XD */
    border: 1px solid #A7A7A7;
    border-radius: 8px;
    opacity: 1;

    /* Configurações estruturais do Input */
    background-color: transparent;
    color: #FFFFFF; /* Cor do texto quando a pessoa for digitar */
    font-family: 'Omnes',  sans-serif;
    font-size: 18px;
    padding: 0 15px;
    outline: none;
    box-sizing: border-box;
}

/* Cor do texto do placeholder ("Seu número do celular") */
.input-celular::placeholder {
    color: #A7A7A7;
    opacity: 0.8; /* Dá uma leve transparência para parecer texto de fundo */
}

/* Efeito de foco ao clicar */
.input-celular:focus {
    border-color: #FFC800;
}

/* Botão "Enviar" (Apenas Visual) */
.botao-enviar-visual {
    position: absolute;
    top: 324px;
    left: 31px;
    width: 491px;
    height: 58px;

    /* Fundo e Borda */
    background-color: #FFC800;
    border-radius: 8px;

    /* FLEXBOX: Mágica para centralizar o texto "Enviar" horizontal e verticalmente */
    display: flex;
    justify-content: center;
    align-items: center;

    /* Configurações da Fonte do texto "Enviar" */
    color: #2C1245; /* Roxo escuro */
    font-family: 'Montserrat',  sans-serif;
    font-weight: 500; /* Medium */
    font-size: 25px;

    /* Dá a sensação visual de clique, mesmo sendo uma div estática */
    cursor: pointer;
}

/* Efeito Hover (opcional, para dar um brilho quando passar o mouse) */
.botao-enviar-visual:hover {
    opacity: 0.9;
}

/* Caixa que segura os dois textos */
.caixa-chamada {
    position: absolute;
    top: 322px;
    left: 231px;
    /* todo: 316 */
    width: 380px;
    height: 136px;
}

/* Primeira parte do texto (Branca e Normal) */
.texto-branco {
    position: absolute;
    top: 0px;
    left: 0px;
    /* todo a width era 316px */
    width: 350px;
    color: #FFFFFF;
    font-family: 'Omnes',  sans-serif;
    font-weight: normal;
    font-size: 40px;
    line-height: 40px;
}

/* Segunda parte do texto (Amarela e Negrito) */
.texto-amarelo-1 {
    position: absolute;
    top: 40px; /* Joga a frase exatamente para a posição que o XD calculou */
    left: 72px;
    height: 56px;
    /*todo: era 170 */
    width: 190px;
    color: #FFC800;
    font-family: 'Omnes',  sans-serif;
    font-weight: 600; /* Equivalente ao SemiBold/Bold */
    font-size: 40px;
    line-height: 40px;
}
/* Segunda parte do texto (Amarela e Negrito) */
.texto-amarelo-2 {
    position: absolute;
    top: 80px; /* Joga a frase exatamente para a posição que o XD calculou */
    left: 0px;
    height: 56px;
    /*todo: era 170 */
    width: 290px;
    color: #FFC800;
    font-family: 'Omnes',  sans-serif;
    font-weight: 600; /* Equivalente ao SemiBold/Bold */
    font-size: 40px;
    line-height: 40px;
}

/* Retângulo Escuro do Rodapé */
.rodape-final {
    position: absolute;
    top: 4289px;
    left: 0px;
    width: 1400px;
    height: 301px;

    /* Cor de fundo e Sombra */
    background-color: #170429;
    box-shadow: 10px 10px 50px rgba(0, 0, 0, 0.6); /* Desfoque de 50px com 60% de opacidade */

    opacity: 1;
}

/* Ícone de Telefone no Rodapé */
.icone-telefone {
    position: absolute;
    top: 52px;
    left: 415px;
    width: 36px;
    height: 36px;
}

/* Ícone do WhatsApp no Rodapé */
.icone-whatsapp {
    position: absolute;
    top: 52px;
    left: 602px;
    width: 36px;
    height: 36px;
}



/* Ícone do Instagram no Rodapé */
.icone-instagram {
    position: absolute;
    top: 53px;
    left: 802px;
    width: 35px;
    height: 35px;
}

/* Texto PROVYNET (Redes Sociais) no Rodapé */
.texto-provynet {
    position: absolute;
    top: 52px;
    left: 844px;
    width: 100px;
    height: 29px;
    text-align: center;
    color: #E4E4E4;

    /* Configurações da Fonte */
    font-family: 'Omnes',  sans-serif;
    font-weight: 300; /* Light */
    font-size: 21px;
    line-height: 27px;
}


/* Ícone de E-mail no Rodapé */
.icone-email {
    position: absolute;
    top: 111px;
    left: 415px;
    width: 36px;
    height: 36px;
}

/* Texto do Telefone Fixo no Rodapé */
.texto-telefone {
    position: absolute;
    top: 55px;
    left: 458px;
    /* todo: width 120 */
    width: 140px;
    height: 29px;
    text-align: center;
    color: #E4E4E4;

    /* Configurações da Fonte */
    font-family: 'Omnes',  sans-serif;
    font-weight: 300; /* Equivalente ao Light (300) */
    font-size: 21px;
    line-height: 27px;
}

/* Texto do WhatsApp no Rodapé */
.texto-whatsapp {
    position: absolute;
    top: 52px;
    left: 645px;
    /*todo 134px*/
    width: 150px;
    height: 29px;
    text-align: center;
    color: #E4E4E4;

    /* Configurações da Fonte */
    font-family: 'Omnes',  sans-serif;
    font-weight: 300; /* Light */
    font-size: 21px;
    line-height: 27px;
}



/* Texto do E-mail no Rodapé */
.texto-email {
    position: absolute;
    top: 111px;
    left: 459px;
    width: 290px;
    height: 31px;
    text-align: center;
    color: #E4E4E4;

    /* Configurações da Fonte */
    font-family: 'Omnes',  sans-serif;
    font-weight: 300; /* Light */
    font-size: 22px;
    line-height: 28px;
}

/* Bloco de Endereço no Rodapé */
.texto-endereco {
    position: absolute;
    top: 100px;
    /* todo left 782px */
    left: 800px;
    width: 250px;
    height: 57px;
    text-align: left; /* Alinhamento alterado para a esquerda */
    color: #E4E4E4;

    /* Configurações da Fonte */
    font-family: 'Omnes',  sans-serif;
    font-weight: 300; /* Light */
    font-size: 12px;
    line-height: 20px;
}

/* Efeito Atmosférico Roxo (Lado Direito) */
.brilho-direito {
    position: absolute;
    top: 1415px;
    left: 969px; /* Posicionado do lado direito da tela */
    width: 431px;
    height: 908px;

    /* Cria o brilho roxo começando do centro direito e sumindo aos poucos */

    /* Brilho mais contido na borda */
    background: radial-gradient(ellipse at right center, rgba(138, 43, 226, 0.8) 0%, rgba(138, 43, 226, 0) 35%);
    /* Modo de mesclagem que faz o "glow" se fundir com o fundo (exatamente como no XD) */
    mix-blend-mode: lighten;

    opacity: 1;

    /* Previne que a luz interfira nos cliques dos elementos por cima dela */
    pointer-events: none;
}

/* Efeito Atmosférico Roxo (Lado Esquerdo - Superior) */
.brilho-esquerdo-1 {
    position: absolute;
    top: 775px;
    left: 2px;
    width: 432px;
    height: 908px;

    /* Brilho nascendo do lado esquerdo e sumindo aos 35% */
    background: radial-gradient(ellipse at left center, rgba(138, 43, 226, 0.8) 0%, rgba(138, 43, 226, 0) 35%);
    mix-blend-mode: lighten;
    opacity: 1;
    pointer-events: none;
}

/* Efeito Atmosférico Roxo (Lado Esquerdo - Inferior) */
.brilho-esquerdo-2 {
    position: absolute;
    top: 2266px;
    left: 0px;
    width: 364px;
    height: 766px;

    /* Brilho nascendo do lado esquerdo e sumindo aos 35% */
    background: radial-gradient(ellipse at left center, rgba(138, 43, 226, 0.8) 0%, rgba(138, 43, 226, 0) 35%);
    mix-blend-mode: lighten;
    opacity: 1;
    pointer-events: none;
}


/* ==========================================
   VERSÃO MOBILE (Telas até 768px)
  ========================================== */
@media screen and (max-width: 768px) {

    /* 1. O NOVO TAMANHO DA TELA (CANVAS) */
    .prancheta-xd {
        width: 100%;       /* Ocupa a largura do celular */
        max-width: 320px;  /* Trava no máximo de 320px para manter sua matemática perfeita */
        height: 4524px;    /* A nova altura total do mobile */
    }

    /* 1. Logo Provynet */
    .logo-provynet {
        top: 72px;
        left: 78px;
        width: 165px;
        height: 29px;
        /* A SOLUÇÃO: Força a imagem a encolher proporcionalmente até caber na caixa */
        background-size: contain;
        background-position: center;
    }

    /* 2. Texto: Transforme sua rotina com a internet que */
    .texto-linha-1 {
        top: 105px;
        left: 42px;
        width: 240px;
        height: 63px;
        text-align: center;

        /* Ajuste de Fonte Mobile */
        font-size: 26px;
        line-height: 26px;
    }

    /* 3. Texto: acompanha seu ritmo! */
    .texto-linha-2 {
        top: 158px;
        left: 48px;
        width: 230px;
        height: 72px;
        text-align: center;

        /* Ajuste de Fonte Mobile */
        font-size: 30px;
        line-height: 30px;
    }

    .grupo-2 {
        top: 172px;
        left: -64px;
        width: 449px;
        height: 366px;

        /* Aqui acontece a mágica: o CSS troca o arquivo da imagem! */
        background-image: url('../img/head_mobile.png') !important;
    }

    /* Caixa Escura: Conexão que cabe no bolso */
    .caminho-45 {
        top: 485px;
        left: 25px;
        width: 181px;
        height: 61px;

        /* Ajuste Proporcional do Arredondamento */
        /* Como a altura caiu para 61px, a metade exata para manter o lado esquerdo perfeitamente redondo é ~31px */
        border-radius: 31px 0px 0px 31px;

        /* O Adobe XD removeu o brightness(1.15) no mobile, deixando apenas o blur */
        backdrop-filter: blur(7px);
        -webkit-backdrop-filter: blur(7px);
    }

    /* Retângulo Amarelo (Lado Direito) */
    .retangulo-3 {
        top: 485px;
        left: 206px;
        width: 100px;
        height: 61px;

        /* Ajuste Proporcional do Arredondamento */
        border-radius: 0px 31px 31px 0px;
    }

    /* Ícone da Mão (Conexão que cabe no bolso) */
    .icone-mao {
        top: 501px;
        left: 50px;
        width: 40px;
        height: 26px;

        /* DICA DE OURO PARA O MOBILE: */
        /* Como a caixa diminuiu de 124px para apenas 40px, precisamos garantir que a imagem encolha e caiba inteira lá dentro, em vez de ser "cortada" */
        background-size: contain;
    }

    /* A CAIXA PAI (O agrupamento) */
    .grupo-texto-conexao {
        top: 494px;
        left: 96px;
        width: 88px;
        height: 35px;
    }

    /* O TEXTO FILHO 1 ("Conexão que") */
    .conexao-linha-1 {
        /* top e left continuam 0px, então não precisamos repeti-los! */
        width: 90px;
        height: 19px;

        /* Novas proporções de fonte para Mobile */
        font-size: 14px;
        line-height: 16px;
    }

    /* O TEXTO FILHO 2 ("cabe no bolso!") */
    .conexao-linha-2 {
        top: 16px; /* Subiu! Antes descia 50px, agora desce só 16px em relação ao pai */
        width: 100px;
        height: 19px;

        /* Novas proporções de fonte para Mobile */
        font-size: 14px;
        line-height: 16px;
    }

    /* O CONTAINER PAI */
    .grupo-preco {
        top: 496px;
        left: 214px;
        width: 76px;
        height: 39px;
    }

    /* FILHO 1: "Planos a partir" */
    .texto-a-partir {
        top: -3px; /* Calculado: 493 - 496 */
        left: 0px;
        width: 64px;
        height: 13px;

        font-size: 9px;
        line-height: 15px;
    }

    /* FILHO 2: "R$" */
    .texto-cifrao {
        top: 2px;
        left: 0px;
        width: 20px;
        height: 39px;

        font-size: 16px;
        line-height: 47px;
    }

    /* FILHO 3: "74" */
    .texto-valor-inteiro {
        top: 0px;
        left: 20px; /* Encaixa perfeitamente após os 20px do cifrão */
        width: 32px;
        height: 39px;

        font-size: 28px;
        line-height: 47px;
    }

    /* FILHO 4: ",90" */
    .texto-valor-decimal {
        top: 2px;   /* Calculado: 503 - 496 */
        left: 53px; /* Calculado: 267 - 214 */
        width: 23px;
        height: 22px;

        font-size: 15px;
        line-height: 44px;
    }

    /* Oculta o Retângulo 8 no Mobile */
    .retangulo-8 {
        display: none;
    }

    /* Banner de Velocidade */
    .banner-velocidade {
        top: 602px;
        left: 78px;
        width: 165px;
        height: 313px;

        /* Puxando a imagem nova e forçando a substituição */
        background-image: url('../img/banner velocidade mobile.png') !important;
    }

    /* Banner Estabilidade */
    .banner-estabilidade {
        top: 939px;
        left: 77px;
        width: 166px;
        height: 313px;
       background-image: url('../img/banner estabilidade mobile.png') !important;
    }

    /* Banner Segurança */
    .banner-seguranca {
        top: 1266px;
        left: 77px;
        width: 166px;
        height: 313px;
        background-image: url('../img/banner seguranca mobile.png') !important;

    }

    /* Banner Entretenimento */
    .banner-entretenimento {
        top: 1596px;
        left: 78px;
        width: 165px;
        height: 313px;
        background-image: url('../img/banner entretenimento mobile.png') !important;

    }

    /* ÍCONE VELOCIDADE */
    .icone-secao {
        top: 827px;
        left: 135px;
        /* width e height omitidos porque continuam 56px e 34px! */
    }

    /* CAIXA PAI DO TEXTO */
    .grupo-texto-velocidade {
        top: 863px;
        left: 110px;
        width: 100px;
        height: 23px;
    }

    /* FILHO 1: O sinal de "+" */
    .texto-mais {
        top: 0px;
        left: 0px; /* Arredondado daquele número quebrado do XD */
        width: 9px;
        height: 23px;

        font-size: 16px;
        line-height: 35px;
    }

    /* FILHO 2: "VELOCIDADE" */
    .texto-velocidade {
        top: 0px;
        left: 9px; /* Encaixa perfeitamente logo após os 9px do sinal de + */
        width: 91px;
        height: 23px;

        font-size: 16px;
        line-height: 35px;
    }

    /* ÍCONE ESTABILIDADE */
    .icone-estabilidade {
        top: 1160px;
        left: 132px;
        /* width e height omitidos, pois continuam 56px e 41px */
    }

    /* CAIXA PAI - ESTABILIDADE */
    .grupo-texto-estabilidade {
        top: 1200px;
        left: 106px;
        width: 108px;
        height: 23px;
    }

    /* FILHO: A palavra "ESTABILIDADE" */
    .texto-estabilidade {
        left: 9px; /* Encaixa perfeitamente após os 9px do sinal de + */
        width: 99px;
        height: 23px;

        font-size: 16px;
        line-height: 35px;
    }

    /* ÍCONE SEGURANÇA (Escudo) */
    .icone-escudo {
        top: 1481px;
        left: 140px;
        /* width e height omitidos, pois não mudaram! */
    }

    /* CAIXA PAI - SEGURANÇA */
    .grupo-texto-seguranca {
        top: 1527px;
        left: 111px;
        width: 96px;
        height: 23px;
    }

    /* FILHO: A palavra "SEGURANÇA" */
    .texto-seguranca {
        left: 9px; /* Começa exatamente após os 9px do sinal de + */
        width: 87px; /* A nossa dedução matemática (96 - 9) */
        height: 23px;

        font-size: 16px;
        line-height: 35px;
    }

    /* ÍCONE ENTRETENIMENTO (Grupo 8.png) */
    .icone-grupo-8 {
        top: 1810px;
        left: 136px;
        width: 48px;
        height: 48px;

        /* Como o tamanho no XD mudou para 48x48, é bom garantir o encaixe */
        background-size: contain;
    }

    /* CAIXA PAI - ENTRETENIMENTO */
    .grupo-texto-entretenimento {
        top: 1857px;
        left: 91px;
        width: 140px;
        height: 23px;
    }

    /* FILHO: A palavra "ENTRETENIMENTO" */
    .texto-entretenimento {
        left: 9px; /* Onde termina o "+" */
        width: 131px;
        height: 23px;

        font-size: 16px;
        line-height: 35px;
    }

    /* Texto: Com o nosso aplicativo, */
    .texto-aplicativo {
        top: 1938px;
        left: 45px;
        width: 228px;
        height: 32px;

        /* Redução da tipografia para Mobile */
        font-size: 23px;
        line-height: 29px;
    }

    /* Texto de destaque: você evita dor de cabeça */
    .texto-dor-de-cabeca {
        top: 1968px;
        left: 44px;
        width: 240px;
        height: 85px;

        /* Redução da tipografia para Mobile */
        font-size: 35px;
        line-height: 35px;
    }

    .imagem-app-1,
    .imagem-app-2 {
        display: none;
    }

    /* Imagem 3 (Celular Central - agora é o primeiro da esquerda) */
    .imagem-app-3 {
        top: 2072px;
        left: 22px;
        width: 111px;
        height: 219px;


    }

    /* Imagem 4 (Celular do meio) */
    .imagem-app-4 {
        top: 2072px;
        left: 101px;
        width: 114px;
        height: 223px;



    }

    /* Imagem 5 (Celular Final - direita) */
    .imagem-app-5 {
        top: 2072px;
        left: 186px;
        width: 112px;
        height: 222px;

    }

    /* CAIXA PAI - Título Planos */
    .grupo-conheca-planos {
        top: 2342px;
        left: 57px;
        width: 206px;
        height: 72px;
    }

    /* FILHO 1: "Conheça os" */
    .texto-conheca {
        /* top já era 0px no desktop, não precisa repetir se não quiser, mas vamos manter por clareza! */
        top: 0px;
        left: 28px;
        width: 170px;
        height: 42px;

        /* Nova tipografia e alinhamento */
        text-align: center;
        font-size: 30px;
        line-height: 30px;
    }

    /* FILHO 2: "nossos planos:" */
    .texto-planos {
        top: 30px; /* Desce para formar a segunda linha */
        left: 0px; /* Fração ignorada e arredondada! */
        width: 220px;
        height: 42px;

        /* Nova tipografia e alinhamento */
        text-align: center;
        font-size: 30px;
        line-height: 30px;
    }

    /* Barra amarela separadora */
    .barra-amarela {
        top: 2421px;
        left: 44px;
        width: 232px;
        /* A altura continua 3px, não mudou, mas é bom manter
           para sabermos as dimensões exatas da caixa! */
        height: 3px;
    }

    /* CARD PRINCIPAL (Este sim usa as coordenadas absolutas da página) */
    .card-plano-1 {
        top: 2473px;
        left: 75px;
        width: 172px;
        height: 287px;
        /* bordas, cores e efeito blur (vidro) já são herdados do desktop perfeitamente! */
    }

    /* 1. TEXTO "200" (Calculado: 2483 - 2473 = 10px / 100 - 75 = 25px) */
    .texto-megas-card-1 {
        top: 10px;
        left: 25px;
        width: 122px;
        height: 92px;

        font-size: 65px;
        line-height: 81px;
    }

    /* 2. SELO AMARELO PAI (Calculado: 2554 - 2473 = 81px / 125 - 75 = 50px) */
    .selo-amarelo-card-1 {
        top: 72px;
        left: 50px;
        width: 73px;
        height: 23px;
    }

    /* 3. TEXTO "MEGA" (Relativo ao Selo Amarelo! Calculado: 2548 - 2554 = -6px) */
    .texto-mega-card-1 {
        top: -6px;
        left: 8px; /* 133 - 125 = 8px */
        width: 59px;
        height: 31px;

        font-size: 22px;
        line-height: 32px;
    }

    /* 4. LINHA DIVISÓRIA (Reduziu de 3px para 1px de espessura) */
    .linha-divisoria-card-1 {
        top: 116px; /* 2589 - 2473 */
        left: 27px; /* 102 - 75 */
        width: 118px;
        height: 1px;
    }

    /* 5. TEXTO "provynet.PLAY" */
    .texto-play-card-1 {
        top: 131px; /* 2604 - 2473 */
        left: 27px; /* Alinhado exatamente com a linha acima */
        width: 120px;
        height: 25px;

        font-size: 18px;
        line-height: 23px;
    }

    /* 6. TEXTO "IPTV" */
    .texto-iptv-card-1 {
        top: 151px; /* 2624 - 2473 */
        left: 127px; /* 202 - 75 */
        width: 23px;
        height: 17px;

        font-size: 12px;
        line-height: 15px;
    }

    /* 7. TEXTO "por apenas" */
    .texto-por-apenas-card-1 {
        top: 187px; /* 2660 - 2473 */
        left: 27px; /* Mantém o alinhamento esquerdo da linha divisória */
        width: 90px;
        height: 25px;

        font-size: 18px;
        line-height: 23px;
    }

    /* 8. PREÇO "R$ 74,90" */
    .texto-preco-card-1 {
        top: 204px; /* 2677 - 2473 */
        left: 27px; /* Corrigi de 26px para 27px para alinhar perfeitamente com o texto acima */
        width: 125px;
        height: 41px;

        font-size: 29px;
        line-height: 37px;
    }

    /* 9. TEXTO "/Mês" */
    .texto-mes-card-1 {
        top: 236px; /* 2709 - 2473 */
        left: 120px; /* 195 - 75 */
        width: 26px;
        height: 18px;

        font-size: 13px;
        line-height: 16px;
    }


    /* CARD PRINCIPAL (Mais Popular) */
    .card-plano-2 {
        top: 2783px;
        left: 66px;
        width: 189px;
        height: 315px;
    }

    /* TEXTO "400" (Calculado: 2794 - 2783) */
    .texto-megas-card-2 {
        top: 11px;
        left: 27px; /* 93 - 66 */
        width: 137px;
        height: 99px;
        font-size: 71px;
        line-height: 89px;
        z-index: 3;
    }

    /* SELO AMARELO (Calculado: 2872 - 2783) */
    .selo-amarelo-card-2 {
        top: 78px;
        left: 55px; /* 121 - 66 */
        width: 80px;
        height: 26px;
        z-index: 3;
    }

    /* TEXTO "MEGA" (Relativo ao Selo: 2865 - 2872) */
    .texto-mega-card-2 {
        top: -7px;
        left: 8px; /* 129 - 121 */
        width: 62px;
        height: 32px;
        font-size: 23px;
        line-height: 34px;
        z-index: 3;
    }

    /* LINHA DIVISÓRIA */
    .linha-divisoria-card-2 {
        top: 127px; /* 2910 - 2783 */
        left: 30px; /* 96 - 66 */
        width: 130px;
        height: 2px;
        z-index: 3;
    }

    /* TEXTO "provynet.PLAY" */
    .texto-play-card-2 {
        top: 139px; /* 2922 - 2783 */
        left: 32px; /* 98 - 66 */
        width: 120px;
        height: 25px;
        font-size: 18px;
        line-height: 23px;
        z-index: 3;
    }

    /* SINAL DE MAIS (+) */
    .texto-mais-card-2 {
        top: 155px; /* 2938 - 2783 */
        left: 89px; /* 155 - 66 */
        width: 10px;
        height: 25px;
        font-size: 18px;
        line-height: 23px;
        z-index: 3;
    }

    /* TEXTO "IPTV" */
    .texto-iptv-card-2 {
        top: 159px; /* 2942 - 2783 */
        left: 133px; /* 199 - 66 */
        width: 23px;
        height: 17px;
        font-size: 12px;
        line-height: 15px;
        z-index: 3;
    }

    /* TEXTO "APLICATIVOS" */
    .texto-aplicativos-card-2 {
        top: 175px; /* 2958 - 2783 */
        left: 42px; /* 108 - 66 */
        width: 110px;
        height: 25px;
        font-size: 18px;
        line-height: 23px;
        z-index: 3;
    }

    /* TEXTO "por apenas" */
    .texto-por-apenas-card-2 {
        top: 206px; /* 2989 - 2783 */
        left: 30px; /* 96 - 66 */
        width: 100px;
        height: 28px;
        font-size: 20px;
        line-height: 25px;
        z-index: 3;
    }

    /* PREÇO "R$ 79,90" */
    .texto-preco-card-2 {
        top: 224px; /* 3007 - 2783 */
        left: 30px; /* 96 - 66 */
        width: 127px;
        height: 43px;
        font-size: 31px;
        line-height: 39px;
        z-index: 3;
    }

    /* TEXTO "/Mês" */
    .texto-mes-card-2 {
        top: 259px; /* 3042 - 2783 */
        left: 132px; /* 198 - 66 */
        width: 26px;
        height: 18px;
        font-size: 13px;
        line-height: 16px;
        z-index: 3;
    }

    /* SELO "MAIS POPULAR!" (Calculado: 3072 - 2783) */
    .selo-popular-card-2 {
        top: 278px;
        left: 27px; /* 93 - 66 */
        width: 130px;
        height: 30px;
        z-index: 3;
    }

    /* TEXTO "MAIS POPULAR!" (Relativo ao Selo: 3077 - 3072) */
    .texto-popular-card-2 {
        top: 5px;
        left: 10px; /* 103 - 93 */
        width: 150px;
        height: 19px;
        font-size: 15px;
        line-height: 18px;
        text-align: left; /* O XD mudou de center para left no mobile! */
        z-index: 3;
    }


    /* CARD PRINCIPAL 3 (Direita) */
    .card-plano-3 {
        top: 3127px;
        left: 75px;
        width: 172px;
        height: 287px;
        /* As propriedades visuais (vidro, sombras, etc) são herdadas do desktop */
    }

    /* 1. TEXTO "600" (Calculado: 3137 - 3127) */
    .texto-megas-card-3 {
        top: 10px;
        left: 25px; /* 100 - 75 */
        width: 125px;
        height: 92px;
        font-size: 65px;
        line-height: 81px;
    }

    /* 2. SELO AMARELO PAI (Calculado: 3208 - 3127) */
    .selo-amarelo-card-3 {
        top: 72px;
        left: 50px; /* 125 - 75 */
        width: 73px;
        height: 23px;
    }

    /* 3. TEXTO "MEGA" (Relativo ao Selo Amarelo! Calculado: 3202 - 3208) */
    .texto-mega-card-3 {
        top: -6px;
        left: 8px; /* 133 - 125 */
        width: 59px;
        height: 31px;
        font-size: 22px;
        line-height: 32px;
    }

    /* 4. LINHA DIVISÓRIA */
    .linha-divisoria-card-3 {
        top: 116px; /* 3243 - 3127 */
        left: 27px; /* 102 - 75 */
        width: 118px;
        height: 1px; /* Espessura reduzida para 1px no mobile */
    }

    /* 5. TEXTO "provynet.PLAY" */
    .texto-play-card-3 {
        top: 122px; /* 3249 - 3127 */
        left: 27px; /* Mantém o alinhamento esquerdo da linha divisória */
        width: 120px;
        height: 25px;
        font-size: 18px;
        line-height: 23px;
    }

    /* 6. SINAL DE MAIS (+) */
    .texto-mais-card-3 {
        top: 139px; /* 3266 - 3127 */
        left: 84px; /* 159 - 75 */
        width: 10px;
        height: 25px;
        font-size: 18px;
        line-height: 23px;
    }

    /* 7. TEXTO "IPTV" */
    .texto-iptv-card-3 {
        top: 143px; /* 3270 - 3127 */
        left: 127px; /* 202 - 75 */
        width: 23px;
        height: 17px;
        font-size: 12px;
        line-height: 15px;
    }

    /* 8. TEXTO "APLICATIVOS" */
    .texto-aplicativos-card-3 {
        top: 159px; /* 3286 - 3127 */
        left: 37px; /* 112 - 75 */
        width: 110px;
        height: 25px;
        font-size: 18px;
        line-height: 23px;
    }

    /* 9. TEXTO "por apenas" */
    .texto-por-apenas-card-3 {
        top: 187px; /* 3314 - 3127 */
        left: 27px; /* Volta para o alinhamento da esquerda */
        width: 90px;
        height: 25px;
        font-size: 18px;
        line-height: 23px;
    }

    /* 10. PREÇO "R$ 89,90" */
    .texto-preco-card-3 {
        top: 202px; /* 3329 - 3127 */
        left: 27px;
        width: 125px;
        height: 41px;
        font-size: 29px;
        line-height: 37px;
    }

    /* 11. TEXTO "/Mês" */
    .texto-mes-card-3 {
        top: 236px; /* 3363 - 3127 */
        left: 120px; /* 195 - 75 */
        width: 26px;
        height: 18px;
        font-size: 13px;
        line-height: 16px;
    }


    /* 1. O Retângulo Amarelo Base */
    .retangulo-15 {
        top: 3469px;
        left: -1px;
        width: 321px;
        height: 389px;

        /* A cor e a sombra continuam 100% CSS herdadas do desktop! */
    }

    /* 2. O Container que vai segurar o texto */
    .caixa-texto-app {
        top: 40px; /* Calculado: 3509 - 3469 (Relativo ao retângulo) */
        left: 37px; /* Calculado: 36 - (-1) */
        width: 248px;
        height: auto; /* Deixa o container crescer conforme o texto quebra a linha */
        text-align: center;
    }

    /* 3. A MÁGICA: Juntando os textos em uma coisa só */
    .texto-contrate,
    .texto-leve-um,
    .texto-aplicativo-escolha {
        position: static; /* Desliga o posicionamento solto (absolute) */
        display: inline; /* Faz as divs se comportarem como palavras na mesma frase */

        /* Nova tipografia do mobile */
        font-size: 27px;
        line-height: 34px;
    }

    /* --- LINHA 1 DE ÍCONES --- */
    .icone-app-1 {
        top: 3639px;
        left: 27px;
        width: 61px;
        height: 61px;
    }

    .icone-app-2 {
        top: 3639px;
        left: 95px;
        width: 61px;
        height: 61px;
    }

    .icone-app-3 {
        top: 3639px;
        left: 163px;
        width: 62px;
        height: 62px;
    }

    .icone-app-4 {
        top: 3639px;
        left: 232px;
        width: 62px;
        height: 62px;
    }

    /* --- LINHA 2 DE ÍCONES --- */
    .icone-app-5 {
        top: 3710px;
        left: 60px;
        width: 64px;
        height: 62px;
    }

    .icone-app-6 {
        top: 3710px;
        left: 131px;
        width: 62px;
        height: 62px;
    }

    .icone-app-7 {
        top: 3710px;
        left: 200px;
        width: 62px;
        height: 62px;
    }


    /* Botão "Assine já!" (O Container Roxo) */
    .botao-assine-ja {
        top: 3838px;
        left: 77px;
        width: 166px;
        height: 44px;
        /* Cores, bordas e sombras já foram herdadas do desktop */
    }

    /* Texto do Botão (Posicionamento Relativo) */
    .texto-assine-ja {
        top: 0px; /* 3838 - 3838 */
        left: 28px; /* 105 - 77 */
        width: 120px;

        /* Nova tipografia para o mobile */
        font-size: 27px;
        line-height: 34px;
    }


    /* CONTAINER PRINCIPAL DA SEÇÃO */
    .agrupar-4 {
        top: 3808px;
        left: -424px;
        width: 1168px;
        height: 667px;
    }

    /* CAIXA DE TEXTO (A Chamada) */
    .caixa-chamada {
        top: 98px; /* 3906 - 3808 */
        left: 477px; /* 53 - (-424) */
        width: 220px;
        height: auto;
        text-align: center;
    }

    /* A MÁGICA DO TEXTO (Juntando tudo em uma frase só) */
    .texto-branco,
    .texto-amarelo-1,
    .texto-amarelo-2 {
        position: static;
        display: inline;

        font-size: 27px;
        line-height: 34px;
    }


    /* CAIXA DO FORMULÁRIO (Mantendo o seu CSS de vidro e descartando a imagem do XD) */
    .caixa-formulario {
        top: 215px; /* 4023 - 3808 */
        left: 458px; /* 34 - (-424) */
        width: 252px;
        height: 300px; /* 359 */
    }

    /* TÍTULO DO FORMULÁRIO */
    .titulo-formulario {
        top: 21px; /* 4044 - 4023 */
        left: 24px; /* 58 - 34 */
        width: 187px;
        height: 21px;

        font-size: 17px;
        line-height: 24px;
    }

    /* LINHA AMARELA */
    .linha-destaque-formulario {
        top: 47px; /* 4070 - 4023 */
        left: 24px;
        width: 185px;
        height: 1px; /* Arredondado do 0.94px do XD */
    }

    /* LABEL: NOME COMPLETO */
    .label-nome {
        top: 53px; /* 4076 - 4023 */
        left: 26px; /* 60 - 34 */
        width: 140px;
        height: 20px;

        font-size: 18px;
        line-height: 25px;
    }

    /* INPUT: NOME COMPLETO */
    .input-nome {
        top: 79px; /* 4102 - 4023 */
        left: 24px;
        width: 195px;
        height: 44px;
    }

    /* LABEL: CELULAR */
    .label-celular {
        top: 128px; /* 4151 - 4023 */
        left: 24px;
        width: 76px;
        height: 20px;

        font-size: 18px;
        line-height: 25px;
    }

    /* INPUT: CELULAR */
    .input-celular {
        top: 153px; /* 4176 - 4023 */
        left: 24px;
        width: 195px;
        height: 43px;
        font-size: 17px;
    }

    /* BOTÃO ENVIAR (Visual) */
    .botao-enviar-visual {
        top: 220px; /* 4316 - 4023 */
        left: 24px;
        width: 195px;
        height: 44px;
        /* O texto flexbox centralizado já é herdado perfeitamente! */
    }

    /* CAIXA MÃE DO RODAPÉ */
    .rodape-final {
        top: 4420px;
        left: 0px;
        width: 320px;
        height: 106px;
        /* Cores e sombras herdadas perfeitamente do desktop */
    }

    /* --- PRIMEIRA LINHA: TELEFONE --- */
    .icone-telefone {
        top: 22px; /* 4442 - 4420 */
        left: 24px; /* todo 34 (reduzir 10px*/
        width: 16px;
        height: 16px;
    }

    .texto-telefone {
        top: 23px; /* 4443 - 4420 */
        left: 43px;
        width: 70px;
        height: 11px;

        font-size: 12px;
        line-height: 10px;
    }

    /* --- PRIMEIRA LINHA: WHATSAPP --- */
    .icone-whatsapp {
        top: 22px; /* 4442 - 4420 */
        left: 119px;
        width: 16px;
        height: 16px;
    }

    .texto-whatsapp {
        top: 22px;
        left: 139px;
        width: 78px;
        height: 13px;

        font-size: 12px;
        line-height: 12px;
    }

    /* --- PRIMEIRA LINHA: INSTAGRAM --- */
    .icone-instagram {
        top: 23px; /* 4443 - 4420 */
        left: 228px;
        width: 16px;
        height: 16px;
    }

    .texto-provynet {
        top: 24px;
        left: 247px;
        width: 38px;
        height: 11px;

        font-size: 12px;
        line-height: 10px;
    }

    /* --- SEGUNDA LINHA: E-MAIL --- */
    .icone-email {
        top: 49px; /* 4469 - 4420 */
        left: 24px;
        width: 17px;
        height: 17px;
    }

    .texto-email {
        top: 51px;
        left: 44px;
        width: 106px;
        height: 11px;

        font-size: 11px;
        line-height: 10px;
    }

    /* --- BLOCO DE ENDEREÇO --- */
    .texto-endereco {
        top: 44px; /* 4464 - 4420 */
        left: 201px;
        width: 110px;
        height: 24px;

        /* Nova tipografia e alinhamento */
        text-align: left;
        font-size: 6px;
        line-height: 8px;
    }

    /* --- Brilho Esquerdo 1 (Nova posição) --- */
    .brilho-esquerdo-1 {
        top: 1119px;
        left: 0px;
        width: 120px;
        height: 240px;
        background: radial-gradient(circle 100px at left center, rgba(138, 43, 226, 0.5) 0%, rgba(138, 43, 226, 0) 100%);
    }

    /* --- Brilho Esquerdo 2 --- */
    /* Mantido com o top original do desktop para você subir ou descer no F12 depois */
    .brilho-esquerdo-2 {
        top: 2650px;
        left: 0px;
        width: 120px;
        height: 240px;
        background: radial-gradient(circle 100px at left center, rgba(138, 43, 226, 0.5) 0%, rgba(138, 43, 226, 0) 100%);
    }

    /* --- Brilho Direito (Nova posição) --- */
    .brilho-direito {
        top: 3000px;
        right: 0px; /* Gruda na parede direita da tela */
        left: auto; /* Desliga o left que vinha do desktop */
        width: 120px;
        height: 240px;
        background: radial-gradient(circle 100px at right center, rgba(138, 43, 226, 0.5) 0%, rgba(138, 43, 226, 0) 100%);
    }
}