/* =========================
   VARIÁVEIS
   ========================= */
:root {
    --cor-primaria: #5c3b1e;
    --cor-secundaria: #a67c52;
    --cor-fundo: #f4f0ea;
    --cor-oliva: #6b7a3a;
    --cor-vinho: #7a2f2f;
    --cor-neutra: #666666;
    --cor-primaria: #5c3b1e;
    --cor-secundaria: #a67c52;
    --cor-texto-claro: #f5efe6;
    --cor-texto-suave: #e6dccf;
}

/* =========================
   GLOBAIS
   ========================= */
body {
    font-family: 'Montserrat', sans-serif;
    margin: 0;
    background: var(--cor-fundo);
    color: var(--cor-neutra);
}

h1, h2 {
    font-family: 'Playfair Display', serif;
    color: var(--cor-primaria);
}

.container {
    max-width: 1100px;
    margin: auto;
    padding: 40px 20px;
}

img {
    width: 100%;
    border-radius: 8px;
}

/* GRID */
.grid {
    display: grid;
    gap: 20px;
    grid-template-columns: 1fr;
}

/* =========================
   HEADER
   ========================= */
.header {
    background: #feeded;
    border-bottom: 1px solid #e5e5e5;
}

.header-container {
    max-width: 1100px;
    margin: auto;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.logo img {
    width: auto;
    max-height: 115px;
}

.menu {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.menu a {
    margin-left: 20px;
    text-decoration: none;
    color: #333;
    font-weight: 500;
}

.menu a:hover {
    color: #8b5a2b;
}

/* =========================
   HERO
   ========================= */

    .hero {
    position: relative;
    min-height: 460px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--cor-texto-claro);
    padding: 50px 20px;
}

.logo-hero {
    max-width: 260px;
    margin-bottom: 10px;
}

.hero-title {
    font-size: 2.2rem;
    margin-bottom: 10px;
    color: #f5efe6;
}



.hero .overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(rgba(92,59,30,0.8), rgba(92,59,30,0.6));
}

.hero-content {
    position: relative;
    z-index: 1;
    padding: 20px;
}

.logo-hero {
    max-width: 400px;
    width: 90%;
}

.hero-subtitle {
    max-width: 700px;
    margin: 0 auto 20px auto;
    font-size: 1rem;
    color: var(--cor-texto-suave)
}

/* =========================
   BOTÕES
   ========================= */
/* BASE */
/* BASE */
.btn {
    display: inline-block;
    padding: 12px 24px;
    border-radius: 6px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}

/* 🥇 PRIMARY (CTA forte) */
.btn-primary {
    background: var(--cor-secundaria);
    color: #fff;
    border: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.btn-primary:hover {
    background: #8c6239;
    transform: translateY(-1px);
}

/* Hero: CTAs empilhados (Método + Painel) — mesma “coluna” de texto */
.btn-hero-stack {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 14px 20px;
    min-width: min(100%, 280px);
    max-width: 320px;
    text-align: center;
    line-height: 1.3;
    box-sizing: border-box;
}

.btn-metodo-title {
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.02em;
}

.btn-metodo-sub {
    font-size: 0.78rem;
    font-weight: 500;
    opacity: 0.92;
    letter-spacing: 0.03em;
    line-height: 1.35;
}

/* Método Baratieri — mesmo “peso” visual do Painel (gradiente terroso) */
.btn-metodo {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 14px 22px;
    min-width: 200px;
    background: linear-gradient(160deg, #4a3018 0%, #6b4828 38%, #8f6638 72%, #a67c52 100%);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    text-align: center;
    line-height: 1.25;
}

.btn-metodo:hover {
    background: linear-gradient(160deg, #5c3b1e 0%, #7a5230 40%, #9d7345 75%, #b88a62 100%);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.btn-metodo:focus-visible {
    outline: 2px solid #f5efe6;
    outline-offset: 3px;
}

/* Loja e Blog: alinhados ao centro vertical dos CTAs altos */
.hero-buttons .btn-hero-side {
    align-self: center;
}

/* Painel OS — destaque no hero (paleta oliva, ecossistema Baratieri) */
.btn-painel {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 14px 22px;
    min-width: 200px;
    background: linear-gradient(160deg, #5f6d38 0%, #6b7a3a 45%, #7d8f47 100%);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    text-align: center;
    line-height: 1.25;
}

.btn-painel-title {
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.02em;
}

.btn-painel-sub {
    font-size: 0.78rem;
    font-weight: 500;
    opacity: 0.92;
    letter-spacing: 0.03em;
}

.btn-painel:hover {
    background: linear-gradient(160deg, #6a7a40 0%, #7a8c48 50%, #8a9f52 100%);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.btn-painel:focus-visible {
    outline: 2px solid #f5efe6;
    outline-offset: 3px;
}

/* 🥈 SECONDARY (adaptável ao fundo) */
.btn-secondary {
    background: transparent;
    border: 1px solid currentColor;
    color: inherit;
}

.btn-secondary:hover {
    background: rgba(255,255,255,0.1);
}

/* 🥉 BLOG (mais leve ainda) */
.btn-blog {
    background: transparent;
    border: none;
    color: var(--cor-texto-suave);
    text-decoration: underline;
    padding: 12px 8px;
}

.btn-blog:hover {
    color: #fff;
}

.hero-buttons {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}


.link-afiliado {
    color: var(--cor-texto-claro);
    text-decoration: underline;
    font-weight: 500;
}

.link-afiliado:hover {
    color: var(--cor-vinho);
    font-size: 15px;
}


/* =========================
   SEÇÕES
   ========================= */
.sobre {
    background: linear-gradient(to bottom, #f4f0ea, #ffffff);
}

.luthier {
    background: linear-gradient(to right, #a67c52, #d9b88c);
    color: white;
}

.metodo {
    background: linear-gradient(135deg, #6b7a3a, #8ca65a);
    color: white;
    padding: 40px 20px;
}

.painel-os {
    background: linear-gradient(135deg, #3d2814 0%, #5c3b1e 42%, #6d4a2a 100%);
    color: #f5efe6;
    padding: 40px 20px;
}

.painel-os h2 {
    color: #f5efe6;
}

.painel-os .btn-secondary {
    border-color: rgba(255, 255, 255, 0.55);
    color: #fff;
    margin-top: 8px;
}

.painel-os .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: #fff;
}

.painel-os-inline-list {
    margin: 6px 0 18px 0;
    padding-left: 1.2rem;
    line-height: 1.55;
    font-size: 0.95rem;
}

.painel-os-inline-list li {
    margin-bottom: 4px;
}

.painel-os img {
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
    align-self: center;
}

.loja {
    background: linear-gradient(to bottom, #ffffff, #f4f0ea);
}

.servicos {
    background: linear-gradient(135deg, #eef2e3, #dfe6c8);
}

/* =========================
   FORMULÁRIO
   ========================= */

.prova-social {
    text-align: center;
    font-size: 14px;
    color: var(--cor-neutra);
    margin-bottom: 20px;
}

.form-contato {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.form-contato .linha {
    display: flex;
    gap: 15px;
}

.form-contato input,
.form-contato textarea {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    flex: 1;
}

/* =========================
   SEO TEXTO
   ========================= */
.seo-texto {
    background: linear-gradient(to bottom, #ffffff, #f4f0ea);
    border-top: 1px solid #e5e0d8;
}

.seo-texto p {
    max-width: 820px;
    margin: 0 auto 18px auto;
    line-height: 1.8;
    font-size: 0.98rem;
    text-align: justify;
}
.seo-texto h2 {
    text-align: center;
}



/* =========================
   REDES SOCIAIS
   ========================= */

.redes {
    margin-top: 20px;
    text-align: center;
}

.redes p {
    margin-bottom: 10px;
    font-weight: 500;
    margin: auto;
    color: var(--cor-primaria);
}

.social {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-right: 15px;
    padding: 8px 14px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: 0.3s;
}

/* Instagram */
.social.instagram {
    background: #f5f0ea;
    color: #e1306c;
}

.social.instagram:hover {
    background: #e1306c;
    color: #fff;
}

/* WhatsApp */
.social.whatsapp {
    background: #f5f0ea;
    color: #25d366;
}

.social.whatsapp:hover {
    background: #25d366;
    color: #fff;
}

/* Ícones */
.social i {
    font-size: 16px;
}

/* HERO - redes mais fortes */
.hero .social {
    background: rgba(255,255,255,0.15);
    color: #fff;
    backdrop-filter: blur(4px);
}

.hero .social:hover {
    transform: scale(1.05);
}

/* =========================
   RODAPÉ – LUTHIERIA BARATIERI
   ========================= */

.footer {
    background: linear-gradient(to top, #5c3b1e, #3e2813);
    color: #f1f1f1;
    padding: 40px 20px;
    margin-top: 60px;
    font-size: 14px;
}

.footer-container {
    max-width: 1100px;
    margin: auto;
    display: flex;
    gap: 40px;
    justify-content: space-between;
    flex-wrap: wrap;
}

.footer-col {
    flex: 1;
    min-width: 220px;
}

.footer h3 {
    margin-bottom: 12px;
    font-size: 16px;
    color: #ffffff;
}

.footer a {
    display: block;
    color: #e0d6c8;
    text-decoration: underline;
    margin-bottom: 8px;
    transition: 0.2s;
}

.footer a:hover {
    color: #ffffff;
    transform: translateX(3px);
}

.footer-copy {
    font-size: 13px;
    margin-bottom: 10px;
}

.footer-local {
    font-size: 13px;
    color: #d6c6b4;
}

.btn-footer {
    display: inline-block;
    background: #c89b6d;
    color: #2b1a0d !important;
    padding: 10px 14px;
    border-radius: 6px;
    text-decoration: none;
    margin-top: 5px;
    margin-bottom: 10px;
    font-weight: bold;
}

.btn-footer:hover {
    background: #e0b382;
}

.afiliados {
    margin-top: 16px;
    font-size: 14px;
    color: var(--cor-texto-suave);
    line-height: 1.6;
}
/* =========================
   FOOTER MOBILE
   ========================= */

@media (max-width: 768px) {

  .footer {
    text-align: center;
    padding: 30px 15px;
  }

  .footer-container {
    flex-direction: column;
    align-items: center;
    gap: 25px;
  }

  .footer-col {
    width: 100%;
    max-width: 300px;
  }

  .footer h3 {
    margin-bottom: 8px;
  }

  .footer a {
    margin-bottom: 6px;
  }

  .btn-footer {
    width: 100%;
    text-align: center;
  }

  .afiliados {
    margin-top: 8px;
  }
.footer-col {
    border-top: 1px solid rgba(255,255,255,0.15);
    padding-top: 15px;
  }

  .footer-col:first-child {
    border-top: none;
    padding-top: 0;
  }
}

@media (min-width: 768px) {
    .grid {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
        align-items: center;
    }

    .logo img {
    width: auto;
    max-height: 190px;
}

   
    .hero {
        min-height: 55vh;
        padding: 60px 20px;
    }


    .container {
        padding: 60px 20px;
    }
    
}

@media (max-width: 768px) {
    .social {
        margin-right: 0;
        width: 100%;
        justify-content: center;
        box-sizing: border-box;
        padding: 12px;
        border-radius: 8px;
        margin-bottom: 10px;
    }

  

     .hero-buttons {
        flex-direction: column;
        gap: 12px; /* espaçamento vertical */
    }
}
/* HEADER */
.header {
    background: #fff;
    border-bottom: 1px solid #e5e5e5;
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* LOGO */
.logo img {
    height: 190px;
}

/* MENU DESKTOP */
.menu {
    display: flex;
}

.menu a {
    margin-left: 25px;
    text-decoration: none;
    color: #333;
    font-weight: 500;
}

/* BOTÃO HAMBURGUER */
.menu-toggle {
    display: none;
    font-size: 28px;
    background: none;
    border: none;
    cursor: pointer;
}

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

    .menu-toggle {
        display: block;
    }

    .menu {
        display: none;
        flex-direction: column;
        width: 100%;
        background: #ffffff;
        border-top: 1px solid #eee;
    }

    .menu a {
        padding: 15px 20px;
        border-bottom: 1px solid #eee;
        margin: 0;
    }

    .menu.active {
        display: flex;
    }

    .header-container {
        flex-wrap: wrap;
    }
}

.menu-toggle span {
    display: block;
    width: 25px;
    height: 3px;
    background: #333;
    margin: 5px 0;
}

/* Teclado / leitores de ecrã: foco visível no menu mobile */
.menu-toggle:focus-visible {
    outline: 2px solid #5c3b1e;
    outline-offset: 3px;
    border-radius: 4px;
}

.menu a:focus-visible {
    outline: 2px solid #5c3b1e;
    outline-offset: -4px;
}

/* BOTÃO FLUTUANTE WHATSAPP */
.float-whatsapp {
    position: fixed;
    bottom: 20px;
    right: 50px;
    z-index: 999;
}

.float-whatsapp a {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #25D366;
    color: #fff;
    padding: 12px 18px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    transition: 0.3s;
}

.float-whatsapp a:hover {
    transform: scale(1.05);
}

/* Ícone */
.float-whatsapp i {
    font-size: 20px;
}

/* MOBILE */
@media (max-width: 768px) {
    .float-whatsapp span {
        display: none;
    }

    .float-whatsapp a {
        padding: 14px;
        border-radius: 50%;
    }
}