/*variaveis de cor*/
:root {
    --laranja: #e85500;
    --laranja-claro: #ff6a00;
    --laranja-vivo:   #FF6B1A;
    --laranja-quente: #FF8C42;
    --laranja-mel:    #FFAB5E;
    --laranja-suave:  #FFF0E6;
    --creme:          #FDF6EF;
    --verde-wpp: #25d366;
    --preto: #000000;
    --preto2: #000000;
    --preto3: #1a1a1a;
    --borda: #2a2a2a;
    --texto-mudo: #888;
    --texto-claro: #ccc;
    --quase-branco:   #FFFAF5;
    --cinza-escuro:   #1A1008;
    --cinza-medio:    #2C1A0A;
    --cinza-suave:    #3D2510;
    --branco: #ffffff;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    background-color: var(--preto);
    color: var(--branco);
}

a {
    text-decoration: none;
}

/* header parte de cima do site */
.header {
     background: linear-gradient(
    90deg,
    #804004 0%,
    #e06107 50%,
    #914e01 100%
);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 5%;
    border-bottom: 1px solid var(--borda);
    position: sticky;
    top: 0;
    z-index: 100;
}
/* logo */
.logo {
    display: flex;
    align-items: center;
    gap: 10px;
}

.logo_hotlan img {
    width: 55px;
    height: auto;
}


.logo-label strong {
    display: block;
    font-size: 15px;
    font-weight: 800;
    color: var(--branco);
}
/* parte que fica o telecom laranjado pra dar aquele estil0o*/
.logo-label span {
    font-size: 10px;
    color: var(--laranja-claro);
    letter-spacing: 2px;
    text-transform: uppercase;
}
/*/* se mexer nisso aqui as letras sai tudo de fora de ordem */
.nav {
    display: flex;
    gap: 28px;
    align-items: center;
}

.nav a {
    color: var(--quase-branco);
    font-size: 13px;
    font-weight: 500;
    transition: color 0.2s;
}

.nav a:hover {
      color: #ffffff;
    text-decoration: none;
    transition: 0.3s;
    border-bottom: 2px solid transparent;
    padding-bottom: 4px;
}

.nav-btns {
    display: flex;
    gap: 10px;
}

.btn-orange {
    background: var(--laranja);
    color: var(--branco);
    padding: 9px 20px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 700;
    transition: background 0.2s;
}

.btn-orange:hover {
    background: var(--laranja-claro);
}

.btn-outline {
    color: var(--laranja-claro);
    border: 2px solid var(--laranja-claro);
    padding: 9px 20px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 700;
    transition: background 0.2s, color 0.2s;
}

.btn-outline:hover {
    background: var(--laranja);
    color: var(--branco);
    border-color: var(--laranja);
}

/* hero tela de fundo */
.hero {
    position: relative;
    min-height: 520px;
    display: flex;
    align-items: center;
    padding: 80px 5%;

    /* Background do site pra mudar quando quiser*/
    background: url(banner.png) center / cover no-repeat;
}
/* overlay do hero da destaque pra escrita */
.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.88) 45%, rgba(0, 0, 0, 0.3) 100%);
}

.hero-content {
    position: relative;
    z-index: 1;
    max-width: 560px;
}

.hero-eyebrow {
    display: inline-block;
    background: rgba(232, 85, 0, 0.15);
    border: 1px solid rgba(232, 85, 0, 0.4);
    color: var(--laranja-claro);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 5px 14px;
    border-radius: 20px;
    margin-bottom: 20px;
}

.hero-content h1 {
    font-size: 42px;
    font-weight: 900;
    line-height: 1.15;
    margin-bottom: 16px;
}

.hero-content h1 em {
    color: var(--laranja-claro);
    font-style: normal;
}

.hero-content p {
    color: #bbb;
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 30px;
    max-width: 440px;
}

.hero-cta {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.btn-cta-main {
    background: linear-gradient(135deg, var(--laranja) 0%, var(--laranja-vivo) 100%);
    color: var(--branco);
    padding: 13px 28px;
    border-radius: 7px;
    font-size: 14px;
    font-weight: 700;
    transition: background 0.2s;
}

.btn-cta-main:hover {
    opacity: 0.9;
}

.btn-cta-wpp {
    background: var(--verde-wpp);
    color: var(--branco);
    padding: 13px 28px;
    border-radius: 7px;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: opacity 0.2s;
}

.btn-cta-wpp:hover {
    opacity: 0.9;
}

/* planos */
.plans {
    padding: 60px 5%;
    background: var(--creme);
 /* background: var(--preto2);*/
}

.section-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--laranja-claro);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.plans h2 {
    color: var(--preto2);
    font-size: 28px;
    font-weight: 800;
    margin-bottom: 8px;
}

.section-sub {
    color: var(--texto-mudo); 
    font-size: 14px;
    margin-bottom: 36px;
}

.plans-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.plan-card {
    background: #fff;
    border: 1px solid var(--borda);
    border-radius: 12px;
    padding: 28px 20px;
    text-align: center;
    position: relative;
    transition: border-color 0.2s, transform 0.2s;
}

.plan-card:hover {
    border-color: var(--laranja);
    transform: translateY(-4px);
}

.plan-card.popular {
    border-color: var(--laranja);
    background: #1c1008;
}

.plan-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--laranja);
    color: var(--branco);
    font-size: 10px;
    font-weight: 700;
    padding: 4px 14px;
    border-radius: 20px;
    white-space: nowrap;
}

.plan-speed {
    font-size: 48px;
    font-weight: 900;
    color: var(--laranja-claro);
    line-height: 1;
}

.plan-unit {
    font-size: 13px;
    color: var(--texto-mudo);
    margin-bottom: 8px;
}

.plan-name {
    font-size: 13px;
    color: var(--cinza-medio);
    margin-bottom: 16px;
}

.plan-price {
    font-size: 26px;
    font-weight: 800;
    color: var(--cinza-escuro);
    margin-bottom: 20px;
}

.plan-price small {
    font-size: 12px;
    color: var(--texto-apagado);
    font-weight: 400;
}

.plan-btn {
    display: block;
    width: 100%;
    padding: 10px;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 700;
    border: 2px solid var(--laranja);
    color: var(--laranja);
    background: transparent;
    transition: background 0.2s, color 0.2s;
}

.plan-btn:hover {
    background: var(--laranja);
    color: var(--branco);
}

.plan-card.popular .plan-btn {
    background: var(--laranja);
    color: var(--branco);
}
/* sobre nos*/
  .sobre {
            padding: 70px 6%;
            background: var(--cinza-escuro);
            display: flex;
            gap: 60px;
            align-items: center;
        }
 
        .sobre-texto { flex: 1; }
 
        .sobre-texto .section-eyebrow { color: var(--laranja-mel); }
 
        .sobre-texto h2 {
            font-family: 'Bebas Neue', sans-serif;
            font-size: 40px;
            color: #fff;
            margin-bottom: 16px;
            letter-spacing: 1px;
        }
 
        .sobre-texto p {
            color: #c5a07a;
            font-size: 14px;
            line-height: 1.9;
            margin-bottom: 12px;
        }
 
        .sobre-grid {
            flex: 1;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 16px;
        }
 
        .sobre-item {
            background: var(--cinza-medio);
            border: 1px solid var(--cinza-suave);
            border-radius: 12px;
            padding: 20px;
        }
 
        .sobre-item-icon {
            font-size: 24px;
            margin-bottom: 8px;
        }
 
        .sobre-item h4 {
            font-size: 13px;
            font-weight: 700;
            color: #fff;
            margin-bottom: 4px;
        }
 
        .sobre-item p {
            font-size: 12px;
            color: #9C6A3A;
            line-height: 1.6;
        }
 
        /* ── FOOTER ── */
        .footer {
            background: #0E0904;
            border-top: 2px solid var(--laranja);
            padding: 22px 6%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 10px;
        }
 
        .footer p {
            font-size: 12px;
            color: #7A4A20;
        }
 
        .footer-links a {
            font-size: 12px;
            color: #7A4A20;
            transition: color 0.2s;
        }
/* footer */
.footer {
    background: #0d0d0d;
    border-top: 1px solid #1f1f1f;
    padding: 20px 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.footer p {
    font-size: 12px;
    color: #555;
}

.footer-links {
    display: flex;
    gap: 20px;
}

.footer-links a {
    font-size: 12px;
    color: #555;
    transition: color 0.2s;
}

.footer-links a:hover {
    color: var(--laranja-claro);
}


/* pra celular*/
@media (max-width: 768px) {
    .nav { display: none; }

    .nav-btns {
        flex-direction: column;
        gap: 6px;
    }

    .hero-content h1 { font-size: 28px; }

    .plans-grid {
        grid-template-columns: 1fr;
    }

    .stats-bar {
        gap: 24px;
    }
}