/*
 * Arquivo: /home/u608467917/domains/vemcomvitorturismo.com.br/public_html/painel/assets/css/publico/planos.css
 * Versão: 1.0.1
 * 1.0.1 — celular: o botão do topo encolhe e a barra pode quebrar linha;
 * estourava 14px a largura da tela.
 * Estilos da página pública de planos (hero, cards, tabela, FAQ).
 */

    :root { --navy:#0f2f5b; --navy-escuro:#0a2140; --laranja:#ff9400; --laranja-escuro:#e28300;
            --fundo:#e6edf5; --texto:#22303f; --suave:#5c6b7c; --borda:#e4e9ef; --whats:#00a63f; }
    * { box-sizing:border-box; margin:0; padding:0; }
    body { font-family:'Roboto',sans-serif; color:var(--texto); background:#fff; }
    h1,h2,h3,.preco { font-family:'Poppins',sans-serif; }
    .container { max-width:1120px; margin:0 auto; padding:0 24px; }

    /* Barra do topo */
    .topo { border-bottom:1px solid var(--borda); background:#fff; position:sticky; top:0; z-index:30; }
    .topo .container { display:flex; align-items:center; justify-content:space-between; padding-top:12px; padding-bottom:12px; gap:14px; }
    .topo .marca { display:flex; align-items:center; gap:12px; }
    .topo .marca img { height:44px; width:auto; }
    .topo .marca .divisor { width:1px; height:30px; background:var(--borda); }
    .topo .marca .rotulo { font-family:'Poppins',sans-serif; font-weight:700; font-size:13px; line-height:1.25; }
    .topo .marca .rotulo span { display:block; color:var(--navy); }
    .topo .marca .rotulo b { color:var(--laranja); font-weight:700; }
    .topo nav { display:flex; gap:22px; font-size:14px; font-weight:500; }
    .topo nav a { color:var(--navy); text-decoration:none; }
    .btn-whats-topo { background:var(--laranja); color:var(--navy-escuro); font-family:'Poppins',sans-serif;
                      font-weight:700; font-size:13px; padding:11px 18px; border-radius:10px; text-decoration:none;
                      box-shadow:0 5px 14px rgba(255,148,0,0.35); white-space:nowrap; }

    /* Hero */
    .hero { position:relative; overflow:hidden; }
    .hero .container { display:grid; grid-template-columns:1.05fr 0.95fr; gap:36px; align-items:center;
                       padding-top:48px; padding-bottom:36px; }
    .hero h1 { color:var(--navy); font-size:clamp(30px,4.4vw,46px); font-weight:800; line-height:1.15; margin-bottom:16px; }
    .hero h1 em { color:var(--laranja); font-style:normal; }
    .hero .sub { color:var(--suave); font-size:16px; line-height:1.65; max-width:480px; margin-bottom:22px; }
    .hero .foto { position:relative; }
    .hero .foto img { width:100%; border-radius:18px; box-shadow:0 24px 60px rgba(15,47,91,0.28); display:block; }

    /* Faixa de números */
    .numeros { display:flex; flex-wrap:wrap; gap:10px 28px; padding-bottom:6px; }
    .numeros .item { display:flex; align-items:center; gap:9px; }
    .numeros .item .mini { width:34px; height:34px; border-radius:10px; background:var(--navy);
                           display:flex; align-items:center; justify-content:center; flex-shrink:0; }
    .numeros .item .mini svg { display:block; }
    .numeros .item strong { display:block; font-family:'Poppins',sans-serif; font-size:16px; color:var(--navy); line-height:1.1; }
    .numeros .item small { font-size:10.5px; color:var(--suave); text-transform:uppercase; letter-spacing:0.4px; }

    /* Alternador */
    .alternador-linha { display:flex; align-items:center; justify-content:center; gap:10px;
                        padding:30px 0 0; }
    .pill-gratis { background:var(--navy); color:#fff; font-family:'Poppins',sans-serif; font-weight:600;
                   font-size:12px; padding:9px 16px; border-radius:10px; }
    .alternador button { border:1.5px solid var(--borda); background:#fff; font-family:'Poppins',sans-serif;
                         font-weight:700; font-size:13px; padding:9px 20px; border-radius:10px; cursor:pointer; color:var(--suave); }
    .alternador button.ativo { background:var(--laranja); border-color:var(--laranja); color:var(--navy-escuro);
                               box-shadow:0 4px 12px rgba(255,148,0,0.35); }

    /* Cartões de plano */
    .grade { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:22px;
             padding:30px 0 46px; }
    .plano { background:#fff; border:1px solid var(--borda); border-radius:18px; padding:26px 24px;
             position:relative; display:flex; flex-direction:column; box-shadow:0 10px 28px rgba(15,47,91,0.07); }
    .plano.destaque { border:2px solid var(--laranja); box-shadow:0 16px 40px rgba(255,148,0,0.18); }
    .plano .tag { position:absolute; top:-14px; left:50%; transform:translateX(-50%); background:#ffc233;
                  color:var(--navy-escuro); font-family:'Poppins',sans-serif; font-size:12px; font-weight:700;
                  padding:5px 16px; border-radius:999px; white-space:nowrap; }
    .plano .icone { width:52px; height:52px; border-radius:50%; background:var(--navy); display:flex;
                    align-items:center; justify-content:center; font-size:24px; margin-bottom:12px; }
    .plano.destaque .icone { background:var(--laranja); }
    .plano h3 { font-size:20px; font-weight:700; color:var(--navy); }
    .plano .frase { font-size:13px; color:var(--suave); line-height:1.5; margin:4px 0 12px; }
    .preco { font-size:34px; font-weight:800; color:var(--laranja); margin-bottom:0; }
    .preco small { font-size:14px; color:var(--suave); font-weight:500; }
    .anual-nota { font-size:12px; color:var(--whats); font-weight:500; min-height:18px; margin-bottom:10px; }
    .plano ul { list-style:none; flex:1; margin-bottom:18px; }
    .plano li { font-size:13.5px; padding:7px 0 7px 26px; position:relative; line-height:1.5; }
    .plano li::before { content:'✓'; position:absolute; left:0; top:7px; width:17px; height:17px;
                        border:1.5px solid var(--laranja); color:var(--laranja); border-radius:50%;
                        font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; }
    .plano .btn { display:block; text-align:center; font-family:'Poppins',sans-serif; font-weight:700;
                  font-size:14px; letter-spacing:0.5px; padding:14px; border-radius:11px; text-decoration:none;
                  background:var(--navy); color:#fff; box-shadow:0 6px 16px rgba(15,47,91,0.3); }
    .plano.destaque .btn { background:var(--laranja); color:var(--navy-escuro); box-shadow:0 6px 18px rgba(255,148,0,0.4); }

    /* Faixa de alcance: prova de força */
    .alcance { background:linear-gradient(100deg, var(--laranja) 0%, #ffb340 100%); padding:34px 0; }
    .alcance .container { display:flex; align-items:center; gap:30px; flex-wrap:wrap; }
    .alcance .numero-gigante { font-family:'Poppins',sans-serif; font-weight:800; color:var(--navy-escuro);
                 font-size:clamp(34px,4.6vw,52px); line-height:1; white-space:nowrap; }
    .alcance .numero-gigante small { display:block; font-size:14px; font-weight:600; letter-spacing:0.5px;
                 text-transform:uppercase; margin-top:6px; }
    .alcance p { flex:1; min-width:260px; color:var(--navy-escuro); font-size:15.5px; line-height:1.65; margin:0; }
    .alcance p strong { font-weight:700; }

    /* Como funciona na prática */
    .pratica { background:var(--fundo); padding:52px 0 46px; margin-top:8px; }
    .pratica h2, .demo h2, .fluxo h2, .faq h2 { text-align:center; color:var(--navy); font-size:clamp(22px,3vw,30px);
                 font-weight:800; margin-bottom:10px; }
    .pratica .sub-secao, .demo .sub-secao, .fluxo .sub-secao { text-align:center; color:var(--suave); font-size:15px;
                 max-width:640px; margin:0 auto 34px; line-height:1.6; }
    .pratica .tres { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:20px; }
    .pratica .cartao-passo { background:#fff; border:1px solid var(--borda); border-radius:16px; padding:26px 22px;
                 text-align:center; box-shadow:0 8px 24px rgba(15,47,91,0.06); }
    .pratica .cartao-passo .icone-grande { font-size:44px; display:block; margin-bottom:12px; }
    .pratica .cartao-passo .num-passo { display:inline-flex; align-items:center; justify-content:center;
                 width:28px; height:28px; border-radius:50%; background:var(--laranja); color:var(--navy-escuro);
                 font-family:'Poppins',sans-serif; font-weight:700; font-size:14px; margin-bottom:10px; }
    .pratica .cartao-passo h3 { font-size:16px; color:var(--navy); font-weight:700; margin-bottom:8px; }
    .pratica .cartao-passo p { font-size:13.5px; color:var(--suave); line-height:1.6; }

    /* Demonstração do mapa real: palco escuro */
    .demo { padding:56px 0 58px; background:var(--navy); }
    .demo h2 { color:#fff; }
    .demo .sub-secao { color:rgba(255,255,255,0.78); }
    .demo .categorias { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-bottom:26px; }
    .demo .categorias span { background:rgba(255,255,255,0.09); border:1px solid rgba(255,255,255,0.22);
                 border-radius:999px; padding:7px 14px; font-size:13.5px; color:#fff; }
    .demo .moldura { max-width:960px; margin:0 auto; border-radius:20px; overflow:hidden;
                 border:1px solid rgba(255,255,255,0.18); box-shadow:0 30px 80px rgba(0,0,0,0.45); position:relative; }
    .demo .moldura .barra-nav { background:#e9eef4; padding:9px 16px; display:flex; align-items:center; gap:8px; }
    .demo .moldura .barra-nav i { width:10px; height:10px; border-radius:50%; background:#c6cfda; display:block; }
    .demo .moldura .barra-nav .url { flex:1; background:#fff; border-radius:7px; font-size:12px; color:var(--suave);
                 padding:5px 12px; font-family:'Roboto',sans-serif; }
    .demo iframe { width:100%; height:520px; border:0; display:block; }
    .demo .legenda-demo { text-align:center; font-size:13px; color:rgba(255,255,255,0.7); margin-top:16px; }

    /* Fluxo: de turista a cliente */
    .fluxo { padding:56px 0 50px; }
    .fluxo .cadeia { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:6px;
                 max-width:900px; margin:0 auto; }
    .fluxo .elo { background:#fff; border:1.5px solid var(--borda); border-radius:12px; padding:11px 16px;
                 font-size:13.5px; font-weight:500; box-shadow:0 4px 12px rgba(15,47,91,0.06);
                 display:flex; align-items:center; gap:7px; }
    .fluxo .elo.forte { background:var(--laranja); border-color:var(--laranja); color:var(--navy-escuro);
                 font-family:'Poppins',sans-serif; font-weight:700; box-shadow:0 6px 18px rgba(255,148,0,0.35); }
    .fluxo .seta { color:var(--laranja); font-size:18px; font-weight:700; }

    /* Painel do parceiro */
    .painel-secao { background:var(--fundo); padding:54px 0 50px; }
    .painel-secao .duas { display:grid; grid-template-columns:0.9fr 1.1fr; gap:40px; align-items:center; }
    .painel-secao h2 { color:var(--navy); font-size:clamp(22px,3vw,30px); font-weight:800; margin-bottom:10px; }
    .painel-secao .sub-secao2 { color:var(--suave); font-size:15px; line-height:1.6; margin-bottom:20px; }
    .painel-secao ul { list-style:none; margin-bottom:18px; }
    .painel-secao li { font-size:14.5px; padding:8px 0 8px 30px; position:relative; line-height:1.5; }
    .painel-secao li::before { content:'✓'; position:absolute; left:0; top:8px; width:19px; height:19px;
                        background:var(--laranja); color:var(--navy-escuro); border-radius:50%;
                        font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center; }
    .painel-secao .tempo-real { display:inline-block; background:rgba(0,166,63,0.12); color:var(--whats);
                        font-family:'Poppins',sans-serif; font-weight:600; font-size:12.5px;
                        padding:6px 14px; border-radius:999px; }
    .painel-secao .tela { border-radius:16px; overflow:hidden; border:1px solid var(--borda);
                        box-shadow:0 24px 60px rgba(15,47,91,0.25); }
    .painel-secao .tela img { width:100%; display:block; }
    @media (max-width: 860px) {
        .painel-secao .duas { grid-template-columns:1fr; }
        .painel-secao .tela { order:-1; }
    }

    /* FAQ */
    .faq-faixa { background:var(--fundo); margin-top:14px; }
    .faq { padding:48px 0 46px; max-width:760px; margin:0 auto; }
    .faq details { background:#fff; border:1px solid var(--borda); border-radius:12px; margin-bottom:10px;
                 box-shadow:0 4px 12px rgba(15,47,91,0.05); }
    .faq summary { cursor:pointer; padding:16px 18px; font-family:'Poppins',sans-serif; font-weight:600;
                 font-size:14.5px; color:var(--navy); list-style:none; display:flex; justify-content:space-between; gap:10px; }
    .faq summary::after { content:'+'; color:var(--laranja); font-size:20px; font-weight:700; }
    .faq details[open] summary::after { content:'–'; }
    .faq details p { padding:0 18px 16px; font-size:13.5px; color:var(--suave); line-height:1.65; }

    .titulo-planos { text-align:center; padding-top:54px; }
    .titulo-planos h2 { color:var(--navy); font-size:clamp(22px,3vw,30px); font-weight:800; margin-bottom:8px; }
    .titulo-planos p { color:var(--suave); font-size:14.5px; }
    .titulo-planos p b { color:var(--whats); font-weight:600; }

    .selo-urgencia { display:inline-block; background:#ffc233; color:var(--navy-escuro);
                 font-family:'Poppins',sans-serif; font-weight:700; font-size:13px;
                 padding:7px 16px; border-radius:999px; margin-bottom:10px; }

    /* Faixa fundadora */
    .fundador { background:var(--navy); border-radius:18px; padding:28px 30px; display:flex; align-items:center;
                gap:24px; flex-wrap:wrap; margin-bottom:52px; }
    .fundador .medalha { font-size:52px; filter:drop-shadow(0 4px 10px rgba(0,0,0,0.35)); }
    .fundador .textos { flex:1; min-width:240px; }
    .fundador h2 { color:var(--laranja); font-size:21px; font-weight:700; margin-bottom:4px; }
    .fundador p { color:rgba(255,255,255,0.85); font-size:14.5px; line-height:1.5; }
    .fundador .acao { text-align:center; }
    .btn-whats { display:inline-flex; align-items:center; gap:8px; background:var(--whats); color:#fff;
                 font-family:'Poppins',sans-serif; font-weight:700; font-size:14px; padding:14px 26px;
                 border-radius:11px; text-decoration:none; box-shadow:0 6px 18px rgba(0,166,63,0.4); }
    .fundador .acao small { display:block; color:rgba(255,255,255,0.65); font-size:11.5px; margin-top:8px; }

    /* 3 passos */
    .passos { padding-bottom:46px; }
    .passos h2 { text-align:center; color:var(--navy); font-size:23px; font-weight:700; margin-bottom:28px; }
    .passos .grade-passos { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:26px; }
    .passo { display:flex; gap:14px; align-items:flex-start; }
    .passo .num { flex-shrink:0; width:34px; height:34px; border-radius:50%; background:var(--navy); color:#fff;
                  font-family:'Poppins',sans-serif; font-weight:700; font-size:15px;
                  display:flex; align-items:center; justify-content:center; }
    .passo .mini { font-size:26px; margin-right:2px; }
    .passo h3 { font-size:15px; font-weight:700; color:var(--navy); margin-bottom:3px; }
    .passo p { font-size:13px; color:var(--suave); line-height:1.55; }

    .rvcv { margin-top:0 !important; }

    @media (max-width: 860px) {
        .hero .container { grid-template-columns:1fr; padding-top:30px; }
        .hero .foto { order:-1; }
        .topo nav { display:none; }
        .fundador { text-align:center; justify-content:center; }
    }

    /* 1.0.1 · celular */
    @media (max-width: 480px) {
        .topo .container { flex-wrap:wrap; gap:8px; }
        .topo nav { gap:12px; font-size:13px; flex-wrap:wrap; }
        .btn-whats-topo { font-size:12px; padding:9px 12px; }
    }