/*
Theme Name: Espirit Suporte - Mesmerize Child
Theme URI: https://suportecuritiba.com.br/
Description: Child theme do Mesmerize para a Espirit Suporte Curitiba Informática. Inclui seções otimizadas para SEO e conversão via WhatsApp.
Author: Espirit
Author URI: https://suportecuritiba.com.br/
Template: mesmerize
Version: 1.0.0
Text Domain: espirit-mesmerize-child
*/

/* ===== VARIÁVEIS E BASE ===== */
:root{
  --esp-azul:#0b3d91;
  --esp-azul-escuro:#072a63;
  --esp-ciano:#00c2ff;
  --esp-laranja:#ff7a00;
  --esp-cinza:#f4f6f9;
  --esp-texto:#1c2333;
  --esp-verde:#25d366;
}

/* ===== HERO PERSONALIZADO ===== */
.esp-hero{
  background:linear-gradient(135deg,var(--esp-azul-escuro),var(--esp-azul) 60%,#0e5aa8);
  color:#fff;
  text-align:center;
  padding:90px 20px;
}
.esp-hero h1{font-size:2.6rem;margin-bottom:18px}
.esp-hero h1 span{color:var(--esp-ciano)}
.esp-hero p{font-size:1.2rem;max-width:720px;margin:0 auto 30px;opacity:.95}
.esp-cta-duplo{display:flex;gap:15px;justify-content:center;flex-wrap:wrap}
.esp-btn{padding:15px 30px;border-radius:40px;font-weight:700;font-size:1.05rem;display:inline-flex;align-items:center;gap:8px;transition:transform .2s,box-shadow .2s;border:none;cursor:pointer}
.esp-btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.25)}
.esp-btn-whats{background:var(--esp-verde);color:#fff}
.esp-btn-ligar{background:#fff;color:var(--esp-azul)}
.esp-selos{margin-top:30px;display:flex;justify-content:center;gap:30px;flex-wrap:wrap;font-size:.9rem;opacity:.9}
.esp-selos span::before{content:"✓ ";color:var(--esp-verde);font-weight:800}

/* ===== PROVA SOCIAL ===== */
.esp-prova{background:var(--esp-cinza);text-align:center;padding:70px 20px}
.esp-numeros{display:flex;justify-content:center;gap:60px;flex-wrap:wrap;margin-top:30px}
.esp-numero h3{font-size:2.5rem;color:var(--esp-azul)}
.esp-numero p{color:#666;font-weight:600}

/* ===== SERVIÇOS ===== */
.esp-servicos{padding:70px 20px}
.esp-titulo-secao{text-align:center;margin-bottom:45px}
.esp-titulo-secao h2{font-size:2.1rem;color:var(--esp-azul)}
.esp-titulo-secao p{color:#666;max-width:650px;margin:12px auto 0}
.esp-servicos-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:25px}
.esp-card-servico{background:#fff;border:1px solid #e5e8ef;border-radius:14px;padding:30px;transition:transform .2s,box-shadow .2s}
.esp-card-servico:hover{transform:translateY(-5px);box-shadow:0 12px 30px rgba(0,0,0,.1)}
.esp-card-servico .esp-icone{font-size:2.2rem;margin-bottom:15px}
.esp-card-servico h3{color:var(--esp-azul);margin-bottom:10px}
.esp-card-servico p{color:#555;font-size:.95rem;margin-bottom:18px}
.esp-link-servico{color:var(--esp-laranja);font-weight:700;font-size:.9rem}

/* ===== DIFERENCIAIS ===== */
.esp-diferenciais{background:var(--esp-azul-escuro);color:#fff;padding:70px 20px}
.esp-diferenciais .esp-titulo-secao h2{color:#fff}
.esp-diferenciais .esp-titulo-secao p{color:#b9c6e0}
.esp-diff-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:25px}
.esp-diff-item{background:rgba(255,255,255,.06);border-radius:12px;padding:25px;border-left:4px solid var(--esp-ciano)}
.esp-diff-item h3{color:var(--esp-ciano);margin-bottom:8px;font-size:1.1rem}
.esp-diff-item p{color:#d5ddeb;font-size:.92rem}

/* ===== COMO FUNCIONA ===== */
.esp-passos{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:30px;text-align:center;padding:70px 20px}
.esp-passo .esp-num{width:60px;height:60px;margin:0 auto 15px;background:var(--esp-azul);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.6rem;font-weight:800}
.esp-passo h3{color:var(--esp-azul);margin-bottom:8px}
.esp-passo p{color:#666;font-size:.95rem}

/* ===== DEPOIMENTOS ===== */
.esp-depoimentos{background:var(--esp-cinza);padding:70px 20px}
.esp-depo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:25px}
.esp-depo{background:#fff;border-radius:12px;padding:25px;box-shadow:0 4px 15px rgba(0,0,0,.06)}
.esp-depo .esp-estrelas{color:#ffb400;margin-bottom:10px}
.esp-depo p{color:#444;font-style:italic;margin-bottom:15px}
.esp-depo .esp-autor{font-weight:700;color:var(--esp-azul)}

/* ===== FAQ ===== */
.esp-faq{padding:70px 20px}
.esp-faq-item{background:#fff;border:1px solid #e5e8ef;border-radius:10px;margin-bottom:12px;overflow:hidden}
.esp-faq-item summary{cursor:pointer;padding:18px 22px;font-weight:700;color:var(--esp-azul);list-style:none;display:flex;justify-content:space-between;align-items:center}
.esp-faq-item summary::after{content:"+";font-size:1.5rem;color:var(--esp-laranja)}
.esp-faq-item[open] summary::after{content:"–"}
.esp-faq-item p{padding:0 22px 18px;color:#555}

/* ===== FORMULÁRIO ===== */
.esp-formulario{background:linear-gradient(135deg,var(--esp-azul),var(--esp-azul-escuro));color:#fff;padding:70px 20px}
.esp-formulario .esp-titulo-secao h2{color:#fff}
.esp-formulario .esp-titulo-secao p{color:#b9c6e0}
.esp-form-box{max-width:640px;margin:0 auto;background:#fff;border-radius:16px;padding:35px;color:var(--esp-texto)}
.esp-form-box label{display:block;font-weight:600;margin-bottom:6px;color:var(--esp-azul)}
.esp-form-box input,.esp-form-box select,.esp-form-box textarea{width:100%;padding:13px 15px;margin-bottom:18px;border:1.5px solid #d5d9e5;border-radius:8px;font-size:1rem;font-family:inherit}
.esp-form-box input:focus,.esp-form-box select:focus,.esp-form-box textarea:focus{outline:none;border-color:var(--esp-azul)}
.esp-form-box textarea{min-height:110px;resize:vertical}
.esp-btn-enviar{width:100%;background:var(--esp-verde);color:#fff;padding:16px;border:none;border-radius:40px;font-size:1.1rem;font-weight:800;cursor:pointer;transition:transform .2s}
.esp-btn-enviar:hover{transform:scale(1.02)}
.esp-nota-form{text-align:center;font-size:.85rem;color:#888;margin-top:12px}

/* ===== BOTÃO FLUTUANTE ===== */
.esp-whats-float{position:fixed;bottom:22px;right:22px;background:var(--esp-verde);color:#fff;width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.9rem;box-shadow:0 6px 20px rgba(37,211,102,.5);z-index:99999;transition:transform .2s}
.esp-whats-float:hover{transform:scale(1.1)}

/* ===== RESPONSIVO ===== */
@media(max-width:768px){
  .esp-hero h1{font-size:1.9rem}
  .esp-hero p{font-size:1.05rem}
  .esp-numeros{gap:30px}
  .esp-hero,.esp-prova,.esp-servicos,.esp-diferenciais,.esp-passos,.esp-depoimentos,.esp-faq,.esp-formulario{padding:50px 20px}
}