/* =====================================================
   ZAN-LUCK — style.css
   Índice:
   1. Variáveis e base
   2. Tipografia
   3. Botões 
   4. Acessibilidade (foco e "pular para o conteúdo")
   5. Cabeçalho e menu
   6. Primeira tela (hero)
   7. (reservado)
   8. Sobre nós
   9. Cartões (com efeito ao passar o cursor)
   10. Aviso importante
   11. Faixa azul que passa (marquee, logo abaixo do hero)
   12. Endereço e mapa
   12B. Ícones de contato (telefone, WhatsApp, e-mail)
   13. Chamada final (contato)
   14. Rodapé
   15. Responsivo
   16. Movimento reduzido
   ===================================================== */

/* ---------- 1. VARIÁVEIS E BASE ---------- */
:root{
  --blue:#0a3fb5; --navy:#0a2a6e; --blue2:#1573ff; --sky:#35b6ff;
  --red:#d3001c; --ink:#0d1b3d; --mute:#4d5b7c; --grey:#f2f6fd; --line:#dbe4f5;
  --hover-shadow:0 14px 28px rgba(10,42,110,.45); /* sombra azul escuro do hover */
  color-scheme:light; box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
html{scroll-padding-top:5rem; scroll-behavior:smooth}
*,*::before,*::after{box-sizing:inherit}
body{cursor:default; /* mantém a setinha sobre os textos */ margin:0; background:#fff; color:var(--ink); font-family:"Plus Jakarta Sans","Helvetica Neue",Arial,sans-serif; font-size:1.05rem; line-height:1.65}
a{color:inherit}
p{margin:0 0 1rem}
section{padding:4.5rem 0}
.soft{background:var(--grey)}
.wrap{max-width:1120px; margin:0 auto; padding:0 1.5rem}
.actions{display:flex; flex-wrap:wrap; gap:.75rem}

/* ---------- 2. TIPOGRAFIA ---------- */
h1,h2,h3{margin:0; line-height:1.15; letter-spacing:-.02em}
h1{font-size:clamp(2.1rem,4.8vw,3.4rem); font-weight:800; color:var(--navy)}
h2{font-size:clamp(1.6rem,3.2vw,2.3rem); font-weight:800; margin-bottom:1.25rem; color:var(--navy); max-width:24ch}
h3{font-size:1.1rem; font-weight:700; margin-bottom:.4rem; letter-spacing:0}
.lead{color:var(--mute); max-width:62ch; margin-bottom:2rem}

/* ---------- 3. BOTÕES ---------- */
/* botão base (todos os botões) */
.btn{display:inline-block; padding:.85rem 1.5rem; border-radius:8px; font-weight:700; font-size:.98rem; text-decoration:none; border:2px solid transparent; transition:background .2s,border-color .2s}
/* botão vermelho (WhatsApp / ações principais) */
.btn-red{background:var(--red); color:#fff}
.btn-red:hover{background:#a80016}
/* botão azul (Como chegar) */
.btn-blue{background:var(--blue); color:#fff}
.btn-blue:hover{background:#082f8a}
/* botão contorno (Conheça nossas soluções / Entre em contato) */
.btn-ghost{border-color:var(--line); color:var(--ink); background:#fff}
.btn-ghost:hover{border-color:var(--blue)}
/* botão WhatsApp pequeno do cabeçalho */
.nav-cta{display:inline-flex; align-items:center; gap:.5rem; padding:.55rem 1.1rem}
/* ícone do WhatsApp dentro do botão do cabeçalho */
.nav-cta svg{width:20px; height:20px; fill:#fff; flex:none}
/* botão do menu (celular) */
.burger{display:none; background:none; border:0; padding:.4rem; line-height:0; color:var(--navy); cursor:pointer}
.burger svg{width:28px; height:28px; display:block}

/* ---------- 4. ACESSIBILIDADE ---------- */
a:focus-visible,button:focus-visible{outline:3px solid var(--blue2); outline-offset:3px}
.skip{position:absolute; left:-999px}
.skip:focus{left:1rem; top:1rem; background:#fff; padding:.5rem 1rem; z-index:99}

/* ---------- 5. CABEÇALHO E MENU ---------- */
.nav{position:sticky; top:0; z-index:20; background:#fff; border-bottom:1px solid var(--line)}
.nav .wrap{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-top:.6rem; padding-bottom:.6rem}
.nav img{height:42px; width:auto; display:block}
.nav nav{display:flex; gap:1.5rem; font-size:.93rem; font-weight:500}
.nav nav a{text-decoration:none; color:var(--mute)}
.nav nav a:hover{color:var(--blue)}

/* ---------- 6. PRIMEIRA TELA (HERO) ---------- */
.hero{
  --hero-top:color-mix(in srgb,var(--blue2) 30%,#fff); /* azul do topo: aumente o 30% para mais escuro, diminua para mais claro */
  background:linear-gradient(to bottom,var(--hero-top) 0%,#fff 90%); /* degradê azul de cima para baixo (todas as telas) */
  padding:9rem 0 4.5rem} /* 9rem = espaço acima do texto no computador: aumente para descer mais */
.hero .wrap{display:grid; grid-template-columns:1.1fr .9fr; gap:3rem; align-items:start} /* start = quadro da logo alinhado com o topo do texto; use center para centralizar na vertical */
.hero p{color:var(--mute); font-size:1.12rem; max-width:42ch; margin:1.25rem 0 2rem}
.panel{background:linear-gradient(135deg,#d6e6ff,#eaf3ff 60%,#fff); border-radius:20px; padding:2rem}
.panel img{width:100%; height:auto; display:block}

/* ---------- 8. SOBRE NÓS ---------- */
.about{display:grid; grid-template-columns:1.3fr .7fr; gap:3rem; align-items:center}
.about p{color:var(--mute); max-width:60ch}
.figs{display:grid; gap:1rem}
.figs div{border-left:4px solid var(--red); padding:.6rem 1rem .6rem 1.1rem; border-radius:6px; background:#fff; transition:transform .25s ease,box-shadow .25s ease}
.figs div:hover{transform:translateY(-6px); box-shadow:var(--hover-shadow)}
.figs strong{display:block; font-size:2.6rem; color:var(--blue); line-height:1.1}
.figs span{color:var(--mute)}

/* ---------- 9. CARTÕES (desafios, soluções, por que a Zan-Luck) ---------- */
.cards{display:grid; grid-template-columns:repeat(4,1fr); gap:1.25rem}
.card{border:1px solid var(--line); border-top:3px solid var(--blue); border-radius:10px; padding:1.4rem; background:#fff; transition:transform .25s ease,box-shadow .25s ease; display:flex; flex-direction:column}
/* efeito ao passar o cursor: ergue levemente + sombra azul escuro */
.card:hover{transform:translateY(-6px); box-shadow:var(--hover-shadow)}
.card p{color:var(--mute); font-size:.95rem; margin:0}
/* link "Conversar com a equipe" dentro do cartão */
.card>a{display:inline-block; margin-top:auto; padding-top:1rem; align-self:flex-start; font-weight:700; font-size:.92rem; color:var(--blue); text-decoration:none}
.card>a:hover{text-decoration:underline}
/* numeração do "Por que a Zan-Luck" */
.n{display:block; font-weight:800; color:var(--red); font-size:.9rem; margin-bottom:.5rem}

/* ---------- 10. AVISO IMPORTANTE ---------- */
.note{margin:2rem 0 0; padding:1rem 1.25rem; background:var(--grey); border-left:4px solid var(--blue); border-radius:6px; color:var(--mute); font-size:.95rem; max-width:80ch}

/* ---------- 11. FAIXA QUE PASSA (MARQUEE) ---------- */
.marq{background:color-mix(in srgb, var(--navy) 83%, transparent); color:#fff; overflow:hidden; padding:1.1rem 0; white-space:nowrap}
.marq div{display:inline-block; animation:run 120s linear infinite; font-weight:800; font-size:1.3rem; letter-spacing:.02em}
.marq span{margin:0 1.5rem; color:var(--sky)}
@keyframes run{to{transform:translateX(-50%)}}

/* ---------- 12. ENDEREÇO E MAPA ---------- */
.addr{display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center}
.addr p{color:var(--mute); max-width:46ch}
.addr address{font-style:normal; font-weight:700; line-height:1.6; margin:1.25rem 0 1.5rem}
.addr address a{text-decoration:none; color:var(--blue)}
.map{border-radius:20px; overflow:hidden; border:1px solid var(--line); min-height:340px; background:var(--grey); transition:transform .25s ease,box-shadow .25s ease}
.map:hover{transform:translateY(-6px); box-shadow:var(--hover-shadow)}
.map iframe{display:block; width:100%; height:100%; min-height:340px; border:0}

/* ---------- 12B. ÍCONES DE CONTATO (telefone, WhatsApp, e-mail) ---------- */
.contacts{list-style:none; margin:0 0 1.5rem; padding:0; display:grid; gap:.6rem}
.contacts a{display:inline-flex; align-items:center; gap:.7rem; text-decoration:none; font-weight:700; color:var(--ink)}
.contacts a:hover span{text-decoration:underline}
.contacts svg{width:38px; height:38px; padding:9px; border-radius:50%; background:var(--blue); fill:#fff; flex:none}
/* cor de cada ícone */
.contacts li:nth-child(2) svg{background:#1f9d55} /* WhatsApp */
.contacts li:nth-child(3) svg{background:var(--red)} /* e-mail */
.contacts li:nth-child(4) svg{background:#c13584} /* Instagram */
/* versão centralizada (chamada final) */
.contacts.center{justify-content:center; justify-items:center; margin:1.5rem 0 0; grid-auto-flow:row}
@media(min-width:760px){.contacts.center{grid-auto-flow:column; gap:2rem}}

/* ---------- 13. CHAMADA FINAL (CONTATO) ---------- */
.cta{text-align:center; background:var(--grey)}
.cta h2{margin:0 auto 1rem}
.cta p{color:var(--mute); max-width:50ch; margin:0 auto 2rem}
.cta .tel{display:block; margin-top:1.25rem; font-weight:700; color:var(--blue); text-decoration:none; font-size:1.15rem}

/* ---------- 14. RODAPÉ ---------- */
footer{background:var(--navy); color:#c9d8f5; padding:2.5rem 0 1.5rem; font-size:.92rem}
footer p{margin:0}
footer strong{color:#fff}
footer p a{color:#fff; text-decoration:none}
footer p a:hover{text-decoration:underline}
.foot{display:flex; justify-content:space-between; gap:2rem; flex-wrap:wrap}
.flogo{height:48px; width:auto; background:#fff; border-radius:8px; padding:.35rem .6rem; margin-bottom:1rem}
footer nav{display:flex; flex-direction:column; gap:.4rem}
footer nav a{text-decoration:none}
footer nav a:hover{color:#fff}
.copy{margin-top:1.75rem; padding-top:1.25rem; border-top:1px solid rgba(255,255,255,.18); font-size:.85rem}

/* ---------- 15. RESPONSIVO ---------- */
@media(max-width:900px){.cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:820px){
  .burger{display:block}
  .nav-cta{display:none}
  .nav nav{display:none; position:absolute; left:0; right:0; top:100%; background:#fff; border-bottom:1px solid var(--line); flex-direction:column; gap:0; padding:.5rem 1.5rem 1rem}
  .nav nav.open{display:flex}
  .nav nav a{padding:.7rem 0}
}
@media(max-width:760px){
  .hero .wrap,.addr,.about{grid-template-columns:1fr}
  section{padding:3.25rem 0}
  .hero{padding:2.25rem 0 3rem}
  .cards{grid-template-columns:1fr}
  .marq div{font-size:1.1rem}
  .panel{display:none}
  /* hero no celular: logo centralizada no espaço azul acima do texto (o degradê vem da regra do hero, lá em cima) */
  .hero{position:relative; overflow:hidden; padding-top:17.5rem} /* espaço acima do texto no celular: aumente para descer mais o texto */
  .hero::before{content:""; position:absolute; top:1.5rem; left:1.5rem; right:1.5rem; height:8rem; z-index:0; pointer-events:none;
    background:url("../images/logo.png") center/contain no-repeat; opacity:.8;
    mix-blend-mode:multiply} /* o fundo branco da logo some em cima do azul */
  .hero .wrap{position:relative; z-index:1}
}

/* ---------- 16. MOVIMENTO REDUZIDO ---------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important}
}