/* =====================================================================
   MeChame — home.css
   Estilo só da página inicial (index.html). Não mexe no resto do site;
   usa as mesmas variáveis de cor de mechame.css (que continua carregado
   antes deste arquivo).
   ===================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,500&display=swap");

:root {
    --serif: "Fraunces", Georgia, "Times New Roman", serif;
    --noite-900: #050b16;
    --noite-800: #08132a;
    --noite-700: #0c1c3d;
}


/* ---------------------------------------------------------------
   Faixa de cima (fixa, sempre sólida — igual a sites de referência
   que mantêm o logo legível mesmo com hero animado atrás)
   --------------------------------------------------------------- */

.topo-home {
    position: relative;
    z-index: 5;
    background: var(--noite-900);
}

.topo-home .wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 24px;
}

.topo-home .marca img { height: 30px; filter: brightness(0) invert(1) opacity(.92); }

.topo-home nav {
    display: flex;
    align-items: center;
    gap: 22px;
}

.topo-home nav a {
    color: rgba(255,255,255,.78);
    text-decoration: none;
    font-size: 14.5px;
    font-weight: 600;
}

.topo-home nav a:hover { color: #fff; }

.topo-home nav a.btn { color: #16202c; }


/* ---------------------------------------------------------------
   HERO — cheio de tela, com "gif" animado por CSS (sem depender de
   nenhum vídeo/arquivo externo) e o cartão flutuante do WhatsApp
   --------------------------------------------------------------- */

.hero-home {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(ellipse 900px 600px at 18% -10%, rgba(24,88,200,.35), transparent 60%),
        radial-gradient(ellipse 700px 500px at 90% 10%, rgba(212,165,42,.16), transparent 55%),
        linear-gradient(180deg, var(--noite-900) 0%, var(--noite-800) 55%, var(--noite-700) 100%);
    padding: 64px 0 130px;
}

.hero-home .fundo-animado {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.orbe {
    position: absolute;
    border-radius: 50%;
    filter: blur(2px);
    opacity: .55;
    background: radial-gradient(circle at 35% 35%, rgba(212,165,42,.9), rgba(212,165,42,0) 70%);
    animation: flutuar 16s ease-in-out infinite;
}

.orbe.o2 {
    background: radial-gradient(circle at 35% 35%, rgba(47,111,224,.85), rgba(47,111,224,0) 70%);
    animation-duration: 21s;
    animation-delay: -6s;
}

.orbe.o3 {
    background: radial-gradient(circle at 35% 35%, rgba(255,255,255,.35), rgba(255,255,255,0) 70%);
    animation-duration: 13s;
    animation-delay: -3s;
}

.orbe.o1 { width: 340px; height: 340px; left: -80px;  top: 40px; }
.orbe.o2 { width: 460px; height: 460px; right: -140px; top: 120px; }
.orbe.o3 { width: 180px; height: 180px; left: 46%;    top: 260px; }

@keyframes flutuar {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33%      { transform: translate(24px, -30px) scale(1.08); }
    66%      { transform: translate(-18px, 18px) scale(.94); }
}

/* ondas concêntricas, tipo "chamada tocando" */
.ondas {
    position: absolute;
    right: 6%;
    bottom: -120px;
    width: 520px;
    height: 520px;
}

.onda {
    position: absolute;
    inset: 0;
    border: 1.5px solid rgba(212,165,42,.35);
    border-radius: 50%;
    animation: tocar 4.5s ease-out infinite;
}

.onda:nth-child(2) { animation-delay: 1.5s; }
.onda:nth-child(3) { animation-delay: 3s; }

@keyframes tocar {
    0%   { transform: scale(.4); opacity: 0; }
    15%  { opacity: .8; }
    100% { transform: scale(1); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .orbe, .onda { animation: none; }
}


.hero-home .wrap {
    position: relative;
    z-index: 2;
    padding-top: 56px;
}

.hero-home-grid {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 48px;
    align-items: center;
}

.fita {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    color: rgba(255,255,255,.75);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    margin-bottom: 26px;
}

.fita::before, .fita::after {
    content: "";
    width: 34px;
    height: 1px;
    background: rgba(255,255,255,.32);
}

.hero-home h1 {
    font-family: var(--serif);
    font-weight: 600;
    font-size: clamp(38px, 5vw, 62px);
    line-height: 1.08;
    letter-spacing: -.01em;
    color: #fdfaf3;
}

.hero-home h1 em {
    font-style: italic;
    font-weight: 500;
    color: var(--ouro-500);
}

.hero-home h1 .link-bonito {
    display: inline-block;
    color: #fff;
    border-bottom: 3px solid var(--ouro-500);
    padding-bottom: 2px;
}

.hero-home .sub {
    margin-top: 22px;
    max-width: 480px;
    color: rgba(255,255,255,.72);
    font-size: 17px;
    line-height: 1.65;
}

.hero-home .hero-acoes {
    margin-top: 34px;
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.hero-home .btn-ouro {
    background: linear-gradient(180deg, #e3ba52, var(--ouro-500));
    color: #2b1e05;
    box-shadow: 0 14px 30px rgba(212,165,42,.32);
}

.hero-home .btn-ouro:hover { transform: translateY(-2px); }

.hero-home .btn-fantasma {
    background: transparent;
    color: #fff;
    border: 1.5px solid rgba(255,255,255,.35);
}

.hero-home .btn-fantasma:hover { background: rgba(255,255,255,.08); }

.hero-home .hero-nota {
    margin-top: 22px;
    color: rgba(255,255,255,.55);
    font-size: 14px;
}

.hero-home .hero-nota b { color: var(--ouro-200); font-weight: 700; }


/* cartão flutuante do celular */

.cartao-flutuante {
    position: relative;
    justify-self: center;
    width: min(100%, 340px);
    padding: 22px;
    border-radius: 26px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.14);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 40px 90px rgba(0,0,0,.45);
    animation: boiar 6s ease-in-out infinite;
}

@keyframes boiar {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-14px); }
}

@media (prefers-reduced-motion: reduce) {
    .cartao-flutuante { animation: none; }
}

.cartao-flutuante .demo-barra {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    margin-bottom: 14px;
    background: rgba(0,0,0,.28);
    border-radius: 12px;
}

.cartao-flutuante .demo-bolinha {
    width: 9px; height: 9px; border-radius: 50%;
    background: rgba(255,255,255,.3);
}

.cartao-flutuante .demo-url {
    margin-left: 8px;
    font-size: 12.5px;
    color: rgba(255,255,255,.85);
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    background: transparent;
    border: 0;
    padding: 0;
    border-radius: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cartao-flutuante .demo-url b { color: var(--ouro-200); font-weight: 700; }

.cartao-flutuante .demo-corpo {
    background: #fff;
    border-radius: 18px;
    padding: 26px 20px;
    text-align: center;
}

.cartao-flutuante .demo-avatar {
    width: 56px; height: 56px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: var(--azul-50);
    display: grid;
    place-items: center;
    font-size: 24px;
}

.cartao-flutuante .demo-corpo h3 { font-family: var(--serif); font-size: 20px; color: var(--azul-900); }

.cartao-flutuante .demo-corpo p {
    margin: 8px 0 18px;
    color: var(--muted);
    font-size: 14px;
}

.cartao-flutuante .demo-botao {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #1faa59;
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    padding: 12px 20px;
    border-radius: 999px;
}

.selinho-flutuante {
    position: absolute;
    top: -14px;
    right: -14px;
    background: var(--ouro-500);
    color: #2b1e05;
    font-size: 12px;
    font-weight: 800;
    padding: 8px 14px;
    border-radius: 999px;
    box-shadow: 0 10px 22px rgba(212,165,42,.4);
    transform: rotate(6deg);
}


/* curva de transição pro resto da página, tipo a onda entre seções */

.curva-transicao {
    display: block;
    width: 100%;
    height: 90px;
    margin-top: -2px;
    position: relative;
    z-index: 3;
}


/* ---------------------------------------------------------------
   HISTÓRIA — o que é / problema / solução / grande ideia
   --------------------------------------------------------------- */

.secao-historia {
    background: var(--branco);
    padding: 96px 0 88px;
}

.titulo-central {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 64px;
}

.explorar-central {
    justify-content: center;
}

.explorar-central::after,
.explorar-central::before { display: none; }

.titulo-central h2 {
    font-family: var(--serif);
    font-size: clamp(26px, 3.4vw, 38px);
    color: var(--azul-900);
    line-height: 1.2;
}


/* blocos alternados texto / mockup */

.historia-bloco {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
    margin-bottom: 88px;
}

/* itens de grid/flex não encolhem abaixo do conteúdo por padrão — sem
   isso, os links falsos (nowrap) do bloco 2 empurram a coluna inteira
   pra fora da tela no mobile */
.historia-texto,
.historia-mockup {
    min-width: 0;
}

.historia-bloco.inverte .historia-texto { order: 2; }
.historia-bloco.inverte .historia-mockup { order: 1; }

.historia-num {
    display: inline-block;
    font-family: var(--serif);
    font-size: 15px;
    font-weight: 700;
    color: var(--ouro-600);
    letter-spacing: .1em;
    margin-bottom: 10px;
}

.historia-texto h3 {
    font-family: var(--serif);
    font-size: clamp(22px, 2.6vw, 29px);
    color: var(--azul-900);
    line-height: 1.25;
    margin-bottom: 14px;
}

.historia-texto p {
    color: var(--muted);
    font-size: 16px;
    line-height: 1.7;
    max-width: 46ch;
}

.historia-mockup {
    display: flex;
    justify-content: center;
}


/* mockup de perfil (bom e ruim) */

.ig-mockup {
    width: min(100%, 340px);
    min-width: 0;
    background: #fff;
    border: 1px solid var(--borda);
    border-radius: var(--raio-lg);
    box-shadow: var(--sombra);
    padding: 20px;
}

.ig-topo {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ig-avatar {
    width: 52px;
    height: 52px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--azul-50);
    display: grid;
    place-items: center;
    font-size: 22px;
}

.ig-quem {
    flex: 1;
    min-width: 0;
}

.ig-quem b {
    display: block;
    font-size: 14.5px;
    color: var(--texto);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ig-quem span {
    display: block;
    font-size: 12.5px;
    color: var(--muted);
}

.ig-seguir {
    flex: 0 0 auto;
    font-size: 12.5px;
    font-weight: 700;
    color: #fff;
    background: var(--azul-600);
    padding: 6px 14px;
    border-radius: 999px;
}

.ig-stats {
    display: flex;
    justify-content: space-between;
    margin: 16px 0;
    padding: 12px 4px;
    border-top: 1px solid var(--borda);
    border-bottom: 1px solid var(--borda);
}

.ig-stats div {
    text-align: center;
}

.ig-stats b {
    display: block;
    font-size: 14px;
    color: var(--texto);
}

.ig-stats span {
    font-size: 11.5px;
    color: var(--muted);
}

.ig-bio {
    margin: 14px 0;
}

.ig-bio p {
    font-size: 13.5px;
    color: var(--texto);
    line-height: 1.5;
}

.ig-link-limpo {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 12px 16px;
    background: linear-gradient(180deg, var(--ouro-50), #fff);
    border: 1.5px solid var(--ouro-200);
    border-radius: 12px;
    color: var(--ouro-700);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

.ig-link-limpo b { color: var(--azul-700); }

.ig-link-icone { font-size: 15px; }


/* variação "ruim" — pilha de links zoados */

.ig-mockup-ruim {
    border-color: #f0d9d9;
}

.ig-mockup-ruim .ig-seguir { background: var(--vermelho); }

.ig-link-feio {
    margin-top: 8px;
    padding: 11px 14px;
    border-radius: 8px;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 11.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #7a5a1f;
    background: #fdf6e3;
    border: 1px dashed #e4cf9a;
}

.ig-link-feio-2 {
    color: #1f6f4a;
    background: #e9f7ef;
    border-color: #bfe3cd;
    transform: rotate(-.6deg);
}

.ig-link-feio-3 {
    color: #6b3fa0;
    background: #f3ecfa;
    border-color: #dcc9f0;
    transform: rotate(.5deg);
}

.ig-link-feio-mais {
    text-align: center;
    font-family: var(--fonte);
    font-style: italic;
    color: var(--muted);
    background: transparent;
    border: none;
    padding-top: 4px;
}


/* bloco 3 — solução, centralizado, largura total */

.historia-bloco-central {
    max-width: 760px;
    margin: 0 auto 88px;
    text-align: center;
}

.historia-bloco-central h3 {
    font-family: var(--serif);
    font-size: clamp(22px, 2.6vw, 29px);
    color: var(--azul-900);
    margin-bottom: 10px;
}

.historia-bloco-central > p {
    color: var(--muted);
    font-size: 16px;
    line-height: 1.7;
}

.enderecos-exemplo {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 22px 0 30px;
}

.endereco-chip {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 14px;
    color: var(--azul-700);
    background: var(--azul-50);
    border: 1px solid var(--azul-100);
    padding: 9px 16px;
    border-radius: 999px;
}

.endereco-chip b { color: var(--ouro-700); }

.historia-pergunta {
    font-size: 15.5px;
    color: var(--texto);
    max-width: 52ch;
    margin: 0 auto 28px;
}

.destinos-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 30px;
}

.destino-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 18px 10px;
    background: var(--areia);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    font-size: 13px;
    font-weight: 600;
    color: var(--texto);
}

.destino-icone {
    font-size: 24px;
}

.historia-exemplo-final {
    color: var(--muted);
    font-size: 15px;
    line-height: 1.7;
    max-width: 60ch;
    margin: 0 auto;
}

.historia-exemplo-final b { color: var(--azul-700); }


/* bloco 4 — grande ideia / fechamento */

.ideia-final {
    max-width: 620px;
    margin: 0 auto;
    text-align: center;
    padding-top: 8px;
}

.ideia-final h3 {
    font-family: var(--serif);
    font-size: clamp(24px, 3vw, 32px);
    color: var(--azul-900);
    line-height: 1.3;
    margin: 18px 0 34px;
}

.antes-depois {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}

.antes, .depois {
    flex: 1 1 220px;
    max-width: 260px;
    padding: 18px 20px;
    border-radius: var(--raio);
}

.antes-depois-rotulo {
    display: block;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.antes {
    background: #fdf3f2;
    border: 1px solid #f2d9d6;
}

.antes .antes-depois-rotulo { color: var(--vermelho); }

.antes p {
    color: #8a4a42;
    font-size: 14.5px;
    font-style: italic;
}

.depois {
    background: var(--ouro-50);
    border: 1.5px solid var(--ouro-200);
}

.depois .antes-depois-rotulo { color: var(--ouro-700); }

.depois p {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    color: var(--azul-700);
    font-size: 15px;
}

.depois p b { color: var(--ouro-700); }

.antes-depois-seta {
    font-size: 20px;
    color: var(--muted);
    flex: 0 0 auto;
}

.ideia-final-texto {
    color: var(--muted);
    font-size: 15.5px;
    line-height: 1.75;
    margin-bottom: 26px;
}

.ideia-final-assinatura {
    font-family: var(--serif);
    font-size: 17px;
    color: var(--azul-900);
}

.ideia-final-assinatura b { color: var(--ouro-700); }


@media (max-width: 860px) {

    .historia-bloco {
        grid-template-columns: 1fr;
        gap: 26px;
        margin-bottom: 60px;
    }

    .historia-bloco.inverte .historia-texto { order: 1; }
    .historia-bloco.inverte .historia-mockup { order: 2; }

    .historia-texto { text-align: center; }
    .historia-texto p { margin: 0 auto; }

    .destinos-grid { grid-template-columns: repeat(2, 1fr); }

    .historia-bloco-central { margin-bottom: 60px; }
}

@media (max-width: 560px) {

    .secao-historia { padding: 64px 0; }
    .titulo-central { margin-bottom: 44px; }
    .antes-depois-seta { transform: rotate(90deg); }
}


/* ---------------------------------------------------------------
   COMO FUNCIONA — cartões numerados
   --------------------------------------------------------------- */

.explorar {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--muted);
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    font-size: 12.5px;
    margin-bottom: 8px;
}

.explorar::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--borda);
}


/* ---------------------------------------------------------------
   NÚMEROS — estatísticas com selo rotacionado "você sabia?"
   --------------------------------------------------------------- */

.secao-numeros {
    background: var(--areia);
    padding: 90px 0;
}

.numeros-grid {
    display: grid;
    grid-template-columns: auto 1fr 1fr;
    gap: 50px;
    align-items: start;
}

.rotulo-vertical {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ouro-600);
    align-self: stretch;
    display: flex;
    align-items: center;
    gap: 12px;
}

.rotulo-vertical::after {
    content: "";
    width: 1.5px;
    flex: 1;
    background: var(--ouro-200);
    max-height: 90px;
}

.numeros-lista {
    display: flex;
    flex-direction: column;
    gap: 34px;
}

.numero-item {
    display: flex;
    align-items: flex-start;
    gap: 18px;
}

.numero-item .icone {
    font-size: 30px;
    line-height: 1;
    flex: 0 0 auto;
}

.numero-item strong {
    display: block;
    font-family: var(--serif);
    font-size: 34px;
    color: var(--azul-900);
    letter-spacing: -.02em;
}

.numero-item span {
    color: var(--muted);
    font-size: 14.5px;
}

.numeros-texto .selo { margin-bottom: 14px; }

.numeros-texto h2 {
    font-family: var(--serif);
    font-size: clamp(26px, 3vw, 36px);
    color: var(--azul-700);
    line-height: 1.2;
    margin-bottom: 16px;
}

.numeros-texto p {
    color: var(--muted);
    font-size: 15.5px;
    line-height: 1.7;
    max-width: 42ch;
}


/* ---------------------------------------------------------------
   Ajustes finos de tipografia editorial nas seções já existentes
   --------------------------------------------------------------- */

#preco .titulo h2,
.final h2 {
    font-family: var(--serif);
}

.preco {
    position: relative;
    overflow: hidden;
}

.preco::before {
    content: "";
    position: absolute;
    top: -60px; right: -60px;
    width: 180px; height: 180px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--ouro-50), transparent 70%);
}


@media (max-width: 900px) {

    .hero-home-grid { grid-template-columns: 1fr; }
    .cartao-flutuante { margin-top: 20px; }
    .ondas { display: none; }

    .numeros-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .rotulo-vertical {
        writing-mode: horizontal-tb;
        transform: none;
        flex-direction: row;
    }

    .rotulo-vertical::after { display: none; }
}

@media (max-width: 560px) {

    .topo-home nav a.esconde { display: none; }
    .hero-home { padding-bottom: 90px; }
    .fita::before, .fita::after { display: none; }
}