/* ==============================
   OhanaLabs · Visual Refresh 2025
   Versão otimizada e validada
   ============================== */

/* ---------- Paleta ---------- */
:root{
  --color-primary:#1B263B;     
  --color-secondary:#4ECDC4;   
  --color-accent:#D4A373;      
  --color-bg:#F4F6F8;          
  --color-white:#FFFFFF;
  --color-text:#2B2B2B;
  --shadow-sm:0 2px 6px rgba(0,0,0,.06);
  --shadow-md:0 8px 24px rgba(0,0,0,.10);
  --radius:14px;
}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Lato',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--color-text);
  margin:0; padding:0; line-height:1.6;
  background:var(--color-bg);
}

.container{
  width:clamp(86%, 1000px, 92%);
  max-width:1200px;
  margin:0 auto;
  padding:72px 0;
}

h1,h2,h3{
  font-family:'Montserrat',system-ui,Segoe UI,Arial,sans-serif;
  color:var(--color-primary);
  text-align:center;
  margin:0 0 18px;
  letter-spacing:.2px;
}
h1{font-size:clamp(2.2rem, 2.5vw + 1.6rem, 3.2rem);}
h2{font-size:clamp(1.6rem, 1.2vw + 1.2rem, 2.2rem);}
h3{font-size:clamp(1.2rem, .8vw + 1rem, 1.5rem);}

/* ---------- Header ---------- */
header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  padding: 14px 5%;
}

/* Nome OhanaLabs à esquerda */
.logo-text {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 1.6rem;
  color: var(--color-primary);
  display: flex;
  align-items: center;
  gap: 6px;
}
.logo-text .labs-color { color: var(--color-secondary); }

/* Logo centralizada */
.logo-center {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.suricato-header {
  height: 80px; /* mantém o header baixo */
  width: auto;
  transform: scale(1.4); /* aumenta a logo sem crescer o header */
  transform-origin: center;
}
@media (max-width: 768px) {
  .suricato-header { transform: scale(1.2); }
}

/* Menu à direita */
nav {
  display: flex;
  gap: 22px;
  align-items: center;
}
nav a {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.92rem;
  padding: 10px 12px;
  border-radius: 12px;
  transition: color 0.25s ease, background-color 0.25s ease, transform 0.1s ease;
}
nav a:hover {
  color: var(--color-secondary);
  background: rgba(78, 205, 196, 0.12);
}

/* ---------- Hero ---------- */
#hero{
  position:relative;
  background:radial-gradient(1200px 420px at 20% -10%, rgba(78,205,196,.25) 0%, rgba(78,205,196,0) 60%),
             linear-gradient(135deg, var(--color-primary) 40%, #1F2F4D 100%);
  color:var(--color-white);
  text-align:center;
  padding:140px 20px 120px;
  overflow:hidden;
  isolation:isolate;
}
#hero:after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(600px 240px at 95% 85%, rgba(212,163,115,.28), transparent 70%);
}
#hero .hero-content{max-width:920px; margin:0 auto}
#hero h1{color:var(--color-white); margin-bottom:8px}
#hero h2{
  color:#DCE2F0;
  font-family:'Lato',sans-serif;
  font-weight:300; margin:0 auto 30px;
  max-width:820px;
}
.cta-button{
  display:inline-block;
  background:linear-gradient(90deg, var(--color-secondary), var(--color-accent));
  color:var(--color-white);
  padding:15px 34px;
  text-decoration:none; font-weight:800; letter-spacing:.3px;
  border-radius:999px;
  box-shadow:var(--shadow-md);
  transition:transform .12s ease, box-shadow .2s ease, filter .2s ease;
}
.cta-button:hover{filter:saturate(110%); box-shadow:0 12px 30px rgba(0,0,0,.18)}

/* ---------- Texto introdutório ---------- */
.intro-text{
  text-align:center; max-width:820px;
  margin:0 auto 36px; font-size:1.06rem; opacity:.95;
}

/* ---------- Blocos (Quem Somos & Valores) ---------- */
.blocks-container{
  display:grid; gap:22px;
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.feature-block,.value-block{
  background:var(--color-white);
  border-top:6px solid var(--color-secondary);
  padding:28px; border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  text-align:center;
  transition:transform .25s ease, box-shadow .25s ease;
}
.feature-block:hover,.value-block:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-md);
}
#valores .blocks-container { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#valores .value-block:nth-child(4) { grid-column: 1 / span 3; }

/* ---------- Serviços ---------- */
#servicos{
  background:linear-gradient(180deg, var(--color-primary), #142034 100%);
  color:var(--color-white);
  padding:80px 0;
}
#servicos h2{color:#EBF2FF}
.service-columns{
  display:grid; gap:40px; grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:start; text-align:left;
}
.service-category{padding:22px; background:rgba(255,255,255,.03); border-radius:var(--radius);}
.service-category h3{
  color:var(--color-secondary);
  text-align:left;
  border-bottom:2px solid var(--color-secondary);
  padding-bottom:10px; margin-bottom:18px;
}
.service-category ul{list-style:none; padding:0; margin:0}
.service-category li{
  background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="%234ECDC4" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>') no-repeat left 2px;
  padding-left:26px; margin:12px 0; line-height:1.5;
}

/* ---------- Rodapé ---------- */
footer{
  background:linear-gradient(180deg, #10161F, #0B0F15 100%);
  color:var(--color-white);
  text-align:center;
  padding:48px 0;
}
footer h3{color:var(--color-accent); margin-bottom:10px}
footer p{margin:10px 0}
.copyright{font-size:.85rem; opacity:.8}

/* Logo no rodapé */
.footer-logo {
  display:flex;
  justify-content:center;
  align-items:center;
  margin-top:40px;
}
.footer-logo .suricato-icon {
  height:240px;
  width:auto;
  filter:brightness(0) invert(1);
}

/* ---------- Acessibilidade & ajustes ---------- */
a{outline:none}
a:focus-visible{box-shadow:0 0 0 3px rgba(78,205,196,.35); border-radius:8px}
img{max-width:100%; display:block}
:target{scroll-margin-top:90px}

/* ---------- Responsividade ---------- */
@media (max-width:980px){
  .blocks-container{grid-template-columns:1fr 1fr}
  #hero{padding:120px 20px 100px}
}
@media (max-width:720px){
  header{flex-direction:column; gap:10px; padding:12px 20px}
  nav{flex-wrap:wrap; justify-content:center; gap:10px}
  .blocks-container{grid-template-columns:1fr}
  .service-columns{grid-template-columns:1fr}
  .logo-text{font-size:1.35rem}
}

/* ===== FIX MOBILE (até 720px) ===== */
@media (max-width: 720px) {
  /* Header em grid com logo central real oficial */
  header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "brand contact"
      "logo  logo";
    padding: 12px 16px;
  }

  .logo-text {
    grid-area: brand;
    justify-content: flex-start;
    font-size: 1.35rem;
  }

  nav {
    grid-area: contact;
    justify-content: flex-end;
    gap: 14px;
  }

  .logo-center {
    grid-area: logo;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 6px;
  }

  /* A logo não deve aumentar a altura do header no mobile */
  .suricato-header {
    height: 40px;           /* fixa a altura visível */
    transform: none;        /* remove o scale que fazia o header crescer */
    width: auto;
  }

  /* Cards: força 1 coluna para evitar colunas estreitas */
  .blocks-container {
    grid-template-columns: 1fr !important;
  }
}