/* =========================
   Guarámaq • styles.css (final)
   ========================= */

/* ===== Variáveis ===== */
:root{
  --brand:#2563eb;
  --brand-2:#0ea5e9;
  --bg:#f8fafc;
  --txt:#0f172a;
  --muted:#475569;
  --ok:#16a34a;
  --surface:#ffffff;
  --border:#e2e8f0;
  --shadow:0 12px 30px rgba(2,6,23,.10);

  /* Ajustes finos do “zoom limpo” da logo (desktop) */
  --logoCropTop:    10%;
  --logoCropRight:   6%;
  --logoCropBottom: 10%;
  --logoCropLeft:    6%;
  --logoScale:     1.32;  /* 1.28–1.38 costuma ficar ótimo */
}

/* ===== Reset & base ===== */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg); color:var(--txt); line-height:1.5;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}

/* ===== Containers ===== */
.container{max-width:1120px;margin:0 auto;padding:0 16px}
.wrap{display:flex;align-items:center;justify-content:space-between;gap:16px}

/* ================= HEADER ================= */
.header{
  position:sticky; top:0; z-index:50;
  background: linear-gradient(90deg, #003C92 0%, #00B4FF 100%);
  border-bottom:1px solid rgba(255,255,255,.12);
  box-shadow:0 4px 12px rgba(0,0,0,.15);
  min-height:120px; /* firme e elegante no topo */
}

/* Grid principal do cabeçalho: logo | espaço | ações */
.header .header-grid{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:12px;
  min-height:86px;
  padding:12px 0;
}

/* Logo (link) */
.header .brand{
  display:inline-block; line-height:0; overflow:hidden;
  background:transparent!important; border:0!important; box-shadow:none!important;
}

/* Logo desktop: “zoom limpo” que encosta nas bordas */
.logo-desktop{
  display:block;
  height:118px;
  width:auto;
  object-fit:contain!important;
  clip-path: inset(var(--logoCropTop) var(--logoCropRight) var(--logoCropBottom) var(--logoCropLeft));
  transform: scale(var(--logoScale));
  transform-origin:center;
}
.logo-mobile{ display:none; height:80px; width:auto; }

/* Ações (botões) */
.header-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
}
.header .header-actions .btn{
  border-radius:12px; font-weight:800;
  padding:10px 14px; font-size:14px; line-height:1;
  white-space:nowrap;
}

/* Botões padrão do header (sobre gradiente) */
.header .btn.ghost{
  background:transparent; color:#fff;
  border:1px solid rgba(255,255,255,.7);
}
.header .btn.ghost:hover{ background:rgba(255,255,255,.14); border-color:#fff; color:#fff; }

.header .btn.whats{
  background:#25D366; color:#06220f; border:1px solid rgba(255,255,255,.2);
}
.header .btn.whats:hover{ background:#16a34a; color:#fff; }

.header .btn.primary{
  background:#fff; color:#003C92; border:2px solid #fff; font-weight:900;
}
.header .btn.primary:hover{ background:#f1f5f9; color:#003C92; }

/* ===== Tipografia base ===== */
h1{margin:0 0 10px;font-size:clamp(28px,4.8vw,48px);line-height:1.15}
h2{margin:0 0 18px;font-size:28px}
h3{margin:0 0 8px;font-size:20px}
h4{margin:0 0 6px;font-size:16px}
p{margin:0 0 14px;font-size:16px;color:#334155}

/* ===== Botões genéricos ===== */
.actions{display:flex;gap:8px;flex-wrap:wrap}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 16px;border-radius:10px;border:1px solid transparent;
  font-weight:700;font-size:15px;line-height:1;cursor:pointer;
  transition:.15s ease; transition-property:transform,box-shadow,background,border,color;
}
.btn:hover{transform:translateY(-1px);box-shadow:0 10px 20px rgba(2,6,23,.10)}
.btn:active{transform:translateY(0);box-shadow:0 4px 8px rgba(2,6,23,.10)}
.btn.primary{background:var(--brand);color:#fff}
.btn.primary:hover{background:#1d4ed8}
.btn.whats{background:#25D366;color:#06220f}
.btn.whats:hover{background:#16a34a;color:#fff}
.btn.ghost{background:#fff;border-color:#cbd5e1}

/* Botão com animação “pulse” (usado no hero) */
.btn.pulse{animation:pulse 1.8s infinite}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(37,99,235,.55)}
  70%{box-shadow:0 0 0 12px rgba(37,99,235,0)}
  100%{box-shadow:0 0 0 0 rgba(37,99,235,0)}
}

/* ===== Hero ===== */
.hero{background:#fff;padding:50px 0}
.hero .grid{
  display:grid; grid-template-columns:1.1fr .9fr; gap:28px; align-items:center;
}

/* Título + sirene */
.hero-title{ margin:0 0 18px; line-height:1.15; color:#0f172a; }
.hero-title .title-top{ display:flex; align-items:center; gap:10px; font-size:clamp(28px,5vw,48px); font-weight:900; }
@media (min-width:901px){ .title-top{ white-space:nowrap; } }
.siren{ width:38px; height:38px; flex:0 0 38px; }
@media (max-width:640px){ .siren{ width:32px; height:32px } }
.hero-title .title-mid{ display:block; margin-top:4px; font-size:clamp(22px,3.6vw,34px); font-weight:800; letter-spacing:-.2px; color:#1e293b; }
.hero-title .title-bottom{ display:block; margin-top:2px; font-size:clamp(18px,3vw,24px); color:#334155; font-weight:700; }
.hero-text p{font-size:18px;color:#475569;margin:0 0 22px}

/* Banner clicável */
.hero-image a.banner{ display:block; border-radius:14px; overflow:hidden; box-shadow:var(--shadow); }
.hero-image a.banner img{ width:100%; display:block; transition:transform .45s ease; }
.hero-image a.banner:hover img{ transform:scale(1.04); }

/* ===== Badges ===== */
.badges{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0 24px}
.badge{
  background:#e2e8f0;color:#0f172a;padding:8px 12px;border-radius:999px;font-size:13px;font-weight:600;
  border:1px solid rgba(15,23,42,.06);position:relative;cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border .18s ease;
  outline:0;
}
.badge:hover,.badge:focus-visible{
  transform:translateY(-2px) scale(1.03);
  box-shadow:0 10px 20px rgba(2,6,23,.12),0 2px 6px rgba(2,6,23,.08);
  background:linear-gradient(135deg,#e2e8f0 0%,#ffffff 100%);
  border-color:rgba(37,99,235,.25);
}
.badge[data-tip]::after{
  content:attr(data-tip);
  position:absolute; left:50%; top:calc(100% + 10px);
  transform:translateX(-50%) translateY(6px);
  padding:8px 10px; font-size:12px; color:#0f172a; background:#fff;
  border:1px solid #e2e8f0; border-radius:8px; box-shadow:0 10px 24px rgba(2,6,23,.12);
  opacity:0; pointer-events:none; transition:opacity .15s ease, transform .15s ease;
  white-space:nowrap; z-index:20;
}
.badge[data-tip]:hover::after,.badge[data-tip]:focus-visible::after{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ===== Seções ===== */
.section{padding:40px 0}

/* ===== Cards ===== */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{
  background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:18px;
  box-shadow:0 4px 12px rgba(15,23,42,.06); transition:box-shadow .15s, transform .15s;
}
.card:hover{box-shadow:0 16px 30px rgba(2,6,23,.10); transform:translateY(-2px)}
.card h3{margin:6px 0 8px}
.card p{margin:0;color:var(--muted)}

/* ===== Steps ===== */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.step{
  display:block; background:#fff; border:1px solid var(--border); border-radius:12px; padding:18px;
  text-decoration:none; color:inherit; position:relative; overflow:hidden;
  transition:transform .15s, box-shadow .15s, border-color .15s;
}
.step:hover,.step:focus-visible{
  transform:translateY(-2px);
  box-shadow:0 16px 30px rgba(2,6,23,.12);
  border-color:rgba(37,99,235,.35);
}
.step h4{margin:0 0 6px; font-size:18px; display:flex; align-items:center; gap:8px}
.step h4 .icon{
  font-size:20px;
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:999px;
  background:rgba(37,99,235,.08);
  margin-right:2px;
}
.step .meta{display:flex; align-items:center; gap:10px; margin-top:10px; font-size:14px; color:#334155}
.step .cta{ margin-top:12px; display:inline-flex; align-items:center; gap:8px; font-weight:700; color:var(--brand); }
.step .cta::after{content:"→"}
.step.is-contact h4 .icon{ background:rgba(22,163,74,.12); }
.step.is-diagnose h4 .icon{ background:rgba(37,99,235,.12); }
.step.is-repair h4 .icon{ background:rgba(245,158,11,.15); }

/* ===== Quem Somos ===== */
.about p{ max-width:86ch; }

/* ===== Depoimentos ===== */
.testimonials .card{ min-height:140px; display:flex; flex-direction:column; justify-content:space-between; }
.testimonials .card p{ margin-bottom:10px; }
.testimonials .card strong{ color:#0f172a; font-size:14px; }

/* ===== Form ===== */
form{display:grid;gap:12px;max-width:560px;background:#fff;border:1px solid var(--border);border-radius:12px;padding:18px}
label{display:grid;gap:6px;font-weight:600}
input,textarea{
  padding:12px 14px;border:1px solid #cbd5e1;border-radius:10px;font:inherit;outline:none;
  transition:border .12s, box-shadow .12s;
}
input:focus,textarea:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(37,99,235,.15)}
textarea{min-height:110px;resize:vertical}
.disclaimer{color:#64748b}

/* ===== Footer ===== */
footer{background:#0b1220;color:#cbd5e1}
footer .wrap{padding:22px 0;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px}
footer .actions .btn{border-color:rgba(255,255,255,.2)}
footer .actions .btn.ghost{background:transparent;color:#cbd5e1}

/* ===== Acessibilidade ===== */
:focus-visible{outline:3px solid rgba(37,99,235,.35); outline-offset:2px}
@media (prefers-reduced-motion: reduce){ *{transition:none !important; animation:none !important} }

/* ===== Responsividade geral ===== */
@media (max-width:1180px){ .container{max-width:1000px} }

/* Header: responsividade e botões menores no mobile */
@media (max-width:900px){
  /* logo mobile enxuta com leve zoom */
  .logo-desktop{ display:none !important; }
  .logo-mobile{
    display:block;
    height:80px; width:auto;
    object-fit:contain!important;
    clip-path: inset(6% 4% 6% 4%);
    transform: scale(1.10);
    transform-origin:center;
  }

  /* ações quebram com elegância, 2–3 por linha */
  .header-actions{
    flex-wrap:wrap;
    gap:6px;
  }
  .header-actions .btn{
    padding:8px 10px;
    font-size:13px;
    border-radius:10px;
    flex:1 1 calc(33.333% - 6px); /* tenta 3 por linha */
    justify-content:center;
  }
  /* números longos escondidos para caber melhor */
  .header-actions .btn span{ display:none; }

  /* grid do topo se ajusta bem */
  .header .header-grid{ gap:10px; }
}

@media (max-width:640px){
  .actions{display:flex;flex-wrap:wrap;gap:8px}
  .actions .btn{width:100%;justify-content:center}
  .section{padding:34px 0}
  h1{font-size:28px}
  h2{font-size:22px}
  p{font-size:15px}
  .hero .grid{grid-template-columns:1fr;text-align:center}
}

/* ===== Marcas/Fabricantes ===== */
.brands{background:#fff;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.brands__subtitle{margin:0 0 16px;color:#334155;max-width:90ch}
.brands__grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.brand{
  display:grid;place-items:center;background:#fff;border:1px solid var(--border);border-radius:12px;
  padding:14px;height:86px;box-shadow:0 4px 10px rgba(2,6,23,.06);
  transition:transform .15s ease, box-shadow .2s ease, border-color .15s ease;
}
.brand img{max-height:52px;width:auto;object-fit:contain;transition:transform .2s ease}
.brand:hover{transform:translateY(-2px);border-color:rgba(37,99,235,.35);box-shadow:0 16px 28px rgba(2,6,23,.12)}
.brand:hover img{transform:scale(1.06)}

@media (max-width:1180px){.brands__grid{grid-template-columns:repeat(5,1fr)}}
@media (max-width:900px){
  .brands__grid{grid-template-columns:repeat(3,1fr)}
  .brand{height:80px;padding:12px}
  .brand img{max-height:46px}
}
@media (max-width:640px){
  .brands__grid{grid-template-columns:repeat(2,1fr)}
  .brand{height:76px}
  .brand img{max-height:42px}
}

/* Boost de tamanho para marcas específicas */
.brand img[src*="brastemp"],
.brand img[src*="soft"],
.brand img[src*="panasonic"],
.brand img[src*="continental"],
.brand img[src*="metalfrio"]{
  max-height:80px !important;
  transform:scale(1.15);
}
@media (max-width:900px){
  .brand img[src*="brastemp"],
  .brand img[src*="soft"],
  .brand img[src*="panasonic"],
  .brand img[src*="continental"],
  .brand img[src*="metalfrio"]{
    max-height:70px !important;
    transform:scale(1.1);
  }
}



/* ================= MOBILE: header 100% vertical (logo full-width + botões 100%) ================= */
@media (max-width: 900px){
  /* Grid vira uma coluna única */
  .header .header-grid{
    display: grid;
    grid-template-columns: 1fr;  /* tudo empilhado */
    row-gap: 10px;
    column-gap: 0;
    padding: 10px 0 12px;
  }

  /* LOGO: ocupar a largura inteira, sem corte nem zoom */
  .header .brand{
    display:block;
    width: 100%;
    overflow: visible;        /* sem cortar a arte */
  }
  .logo-desktop{ display:none !important; }
  .logo-mobile{
    display:block !important;
    width: 100%;              /* vai de uma borda à outra */
    height: auto;             /* mantém proporção */
    object-fit: contain !important;
    clip-path: none !important;
    transform: none !important;
  }

  /* AÇÕES: empilhar e ocupar 100% */
  .header-actions{
    display: flex;
    flex-direction: column;   /* vertical */
    align-items: stretch;     /* cada botão com 100% */
    gap: 8px;
    grid-column: 1 / -1;      /* garante que fique logo abaixo da logo */
  }
  .header-actions .btn{
    width: 100%;
    padding: 12px 14px;       /* altura confortável para toque */
    font-size: 14px;
    border-radius: 12px;
    justify-content: center;
  }
  /* Mostra o texto completo dos botões (com número) — há espaço agora */
  .header-actions .btn span{ display: inline; }
}

/* ================= MOBILE: tudo em coluna ================= */
@media (max-width: 900px){

  /* HERO – CTAs em coluna */
  .hero .actions{
    flex-direction: column;
    align-items: stretch;
  }
  .hero .actions .btn{
    width: 100%;
    justify-content: center;
  }

  /* DEPOIMENTOS em coluna */
  .testimonials .grid-3{
    grid-template-columns: 1fr; /* uma coluna só */
    gap: 16px;
  }

  /* COMO FUNCIONA em coluna */
  .steps{
    grid-template-columns: 1fr; /* uma coluna só */
    gap: 16px;
  }

  /* SERVIÇOS em coluna */
  .grid-3{
    grid-template-columns: 1fr; /* uma coluna só */
    gap: 16px;
  }

  /* MARCAS (mantém 2 colunas pequenas, mas pode forçar 1 se quiser) */
  .brands__grid{
    grid-template-columns: 1fr; /* força uma marca por linha */
    gap: 12px;
  }
}



/* ================= MOBILE AJUSTADO ================= */
@media (max-width: 900px){

  /* Logo maior e centralizada */
  .header .header-grid{
    grid-template-columns: 1fr;
    text-align: center;
  }
  .header .brand{
    width: 100%;
  }
  .logo-desktop{ display: none !important; }
  .logo-mobile{
    display: block !important;
    width: 95%;          /* ocupa quase toda a tela */
    max-width: 360px;    /* limite para não distorcer */
    margin: 0 auto;      /* centraliza */
    height: auto;
    object-fit: contain !important;
    clip-path: none !important;
    transform: none !important;
  }

  /* Botões do header: um embaixo do outro */
  .header-actions{
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .header-actions .btn{
    width: 100%;
    justify-content: center;
    font-size: 15px;
    padding: 12px 14px;
  }

  /* Hero CTAs: coluna */
  .hero .actions{
    flex-direction: column;
    align-items: stretch;
  }
  .hero .actions .btn{
    width: 100%;
    justify-content: center;
  }

  /* Depoimentos em coluna */
  .testimonials .grid-3{
    grid-template-columns: 1fr;
    gap: 16px;
  }

  /* Como funciona em coluna */
  .steps{
    grid-template-columns: 1fr;
    gap: 16px;
  }

  /* Serviços em coluna */
  .grid-3{
    grid-template-columns: 1fr;
    gap: 16px;
  }

  /* Marcas → mantém versão anterior (2 colunas no mobile) */
  .brands__grid{
    grid-template-columns: repeat(2,1fr);
    gap: 12px;
  }
  .brand{ height: 76px; }
  .brand img{ max-height: 42px; }
}