/* =========================================================
   styles.css — Barbearia El Hombre
   Paleta
     Primário (dourado): #c8a15b
     Escuro            : #000000
     Claro             : #f5f5f5
   Tipografia: Poppins (títulos) + Roboto (texto)
========================================================= */

/* ---------- Variáveis ---------- */
:root {
  --clr-primary: #c8a15b;
  --clr-dark   : #000000;
  --clr-light  : #f5f5f5;
  --clr-grey   : #bfbfbf;
  --trans      : .3s ease-in-out;

  /* Ajuste âncoras (offset para header fixo) */
  scroll-padding-top: 90px;
}

/* ---------- Reset / Base ---------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  color-scheme: light;        /* só esquema claro */
  forced-color-adjust: none;  /* impede filtros UA */
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: 'Roboto', sans-serif;
  color: var(--clr-light);
  background: var(--clr-dark);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  margin: 0;
  /* Espaço para o header fixo (ajuste se mudar a altura do header) */
  padding-top: 90px;
}

h1, h2, h3, h4 {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  line-height: 1.15;
  margin: 0;
}

p { margin: 0 0 1rem; }

/* Links básicos */
a {
  color: inherit;
  text-decoration: none;
  outline: none;
  transition: color var(--trans), opacity var(--trans);
}
a:focus-visible {
  outline: 2px solid var(--clr-primary);
  outline-offset: 3px;
}
img {
  max-width: 100%;
  display: block;
}

/* ---------- Header / Nav (ajuste sem alterar HTML) ---------- */
header {
  --header-h: 140px;               /* altura total do header (ajuste 100–120) */
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  margin: 0;
  padding: 10px 5vw;              /* padding vertical agora aplica “respiro” */
  height: var(--header-h);
  background:
    linear-gradient(90deg,
      rgba(0,0,0,0.92),
      rgba(0,0,0,0.85) 40%,
      rgba(0,0,0,0.78));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-bottom: 2px solid rgba(200,161,91,0.30);
  box-shadow: 0 3px 10px -5px rgba(0,0,0,0.65);
  display: flex;
  align-items: center;
}

/* Wrapper interno que já existe */
header .conteiner.nav,
header .conteiner.navbar,
header .conteiner-nav {
  flex: 1;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.8rem;
  padding: 0;                     /* padding lateral já está no header */
  box-sizing: border-box;
  margin: 0 auto;
}

/* Logo */
header .conteiner.nav img,
header .conteiner.navbar img,
header .conteiner-nav img {
  display: block;
  height: 100%;                   /* ocupa toda a altura útil */
  max-height: 100%;
  width: auto;
  object-fit: contain;
  margin: 0;
  padding: 0;
  user-select: none;
  -webkit-user-drag: none;
}

/* Nav list */
header .conteiner.nav ul,
header .conteiner.navbar ul,
header .conteiner-nav ul {
  list-style: none;
  display: flex;
  gap: 48px;                      /* ligeiramente maior para respirar */
  margin: 0;
  padding: 0;
  align-items: center;
}

header .conteiner.nav li,
header .conteiner.navbar li,
header .conteiner-nav li {
  margin: 0;
  padding: 0;
}

header .conteiner.nav a,
header .conteiner.navbar a,
header .conteiner-nav a {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .55px;
  position: relative;
  padding: 8px 0;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  color: var(--clr-light);
  transition: color var(--trans), opacity var(--trans);
  text-decoration: none;
}

header .conteiner.nav a::after,
header .conteiner.navbar a::after,
header .conteiner-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -10px;
  width: 0;
  height: 3px;
  background: linear-gradient(90deg,var(--clr-primary),#e5c281);
  border-radius: 3px;
  transition: width .35s ease;
}

header .conteiner.nav a:hover::after,
header .conteiner.navbar a:hover::after,
header .conteiner-nav a:hover::after,
header .conteiner.nav a:focus-visible::after,
header .conteiner.navbar a:focus-visible::after,
header .conteiner-nav a:focus-visible::after {
  width: 100%;
}

header .conteiner.nav a:hover,
header .conteiner.navbar a:hover,
header .conteiner-nav a:hover {
  color: var(--clr-primary);
}

header .conteiner.nav a:focus-visible,
header .conteiner.navbar a:focus-visible,
header .conteiner-nav a:focus-visible {
  outline: 2px solid var(--clr-primary);
  outline-offset: 5px;
  border-radius: 3px;
}

/* Compensa o header fixo no conteúdo */
body {
  padding-top: var(--header-h);
}

/* ---------- Responsivo ---------- */
@media (max-width: 900px) {
  header { --header-h: 120px; padding: 12px 4vw; }
  header .conteiner.nav ul,
  header .conteiner.navbar ul,
  header .conteiner-nav ul { gap: 34px; }
  header .conteiner.nav a,
  header .conteiner.navbar a,
  header .conteiner-nav a {
    font-size: .92rem;
    padding: 6px 0;
  }
  header .conteiner.nav a::after,
  header .conteiner.navbar a::after,
  header .conteiner-nav a::after {
    bottom: -8px;
  }
  body { padding-top: var(--header-h); }
}

@media (max-width: 640px) {
  header { --header-h: 130px; padding: 12px 4vw; }
  header .conteiner.nav ul,
  header .conteiner.navbar ul,
  header .conteiner-nav ul { gap: 20px; }
  header .conteiner.nav a,
  header .conteiner.navbar a,
  header .conteiner-nav a {
    font-size: .8rem;
    letter-spacing: .4px;
    padding: 5px 0;
  }
  header .conteiner.nav a::after,
  header .conteiner.navbar a::after,
  header .conteiner-nav a::after {
    height: 3px;
    bottom: -6px;
  }
  body { padding-top: var(--header-h); }
}

/* ---------- Utilidades ---------- */
.container {
  width: min(1200px, 90%);
  margin: 0 auto;
}

.btn {
  --btn-bg: var(--clr-primary);
  --btn-color: var(--clr-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .72rem 1.5rem;
  font-size: .9rem;
  font-weight: 600;
  line-height: 1;
  border-radius: 8px;
  background: linear-gradient(135deg,var(--clr-primary),#e5c281);
  border: 2px solid var(--clr-primary);
  color: var(--btn-color);
  cursor: pointer;
  transition: transform var(--trans),
             box-shadow var(--trans),
             filter var(--trans),
             background var(--trans);
  text-transform: uppercase;
  letter-spacing: .6px;
  box-shadow: 0 6px 18px -8px rgba(200,161,91,0.55);
}

.btn.outline {
  background: transparent;
  color: var(--clr-primary);
  box-shadow: none;
}

.btn:hover {
  transform: translateY(-3px);
  filter: brightness(1.04);
  box-shadow: 0 14px 28px -12px rgba(200,161,91,0.65);
}

.btn:active {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px -10px rgba(200,161,91,0.55);
}

.btn:focus-visible {
  outline: 2px solid var(--clr-primary);
  outline-offset: 3px;
}

/* Pequena redução tipográfica em telas menores */
@media (max-width: 900px) {
  header {
    padding: 12px 4vw;
  }
  header .logo { height: 50px;}
  header nav ul { gap: 26px; }
  body { padding-top: 82px; }
}
@media (max-width: 640px) {
  header nav ul {
    gap: 20px;
  }
  header nav a { font-size: .82rem; }
  header .logo { height: 52px; }
  body { padding-top: 78px; }
}

/* =========================================================
   CABEÇALHO / NAV
========================================================= */
header {
  position       : fixed;
  top            : 0;
  left           : 0;
  right          : 0;
  background     : rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(4px);
  z-index        : 1000;
}
.nav {
  display        : flex;
  justify-content: space-between;
  align-items    : center;
  padding        : 1rem 0;
}
.logo {
  font-size     : 1.5rem;
  font-weight   : 700;
  color         : var(--clr-primary);
  letter-spacing: 1px;
  display       : flex;
  align-items   : center;
  gap           : .5rem;
}
.logo-img { width: 100px; height: 107px; object-fit: contain; }
.nav-links {
  list-style: none;
  display   : flex;
  gap       : 1.5rem;
}
.nav-links a {
  font-weight: 500;
  transition : var(--trans);
}
.nav-links a:hover,
.nav-links a.active { color: var(--clr-primary); }

/* Hamburger (mobile) */
.hamburger {
  display        : none;
  flex-direction : column;
  gap            : 4px;
  cursor         : pointer;
  background     : transparent;
  border         : none;
}
.hamburger span {
  width     : 25px;
  height    : 3px;
  background: var(--clr-light);
  transition: var(--trans);
}
@media (max-width: 768px) {
  .nav-links {
    position      : absolute;
    top           : 100%;
    right         : 0;
    width         : 200px;
    padding       : 1rem;
    flex-direction: column;
    align-items   : flex-start;
    gap           : 1rem;
    background    : var(--clr-dark);
    transform     : translateX(100%);
    transition    : var(--trans);
  }
  .nav-links.open { transform: translateX(0); }
  .hamburger      { display: flex; }
}

/* =========================================================
   HERO
========================================================= */
.hero {
  position: relative;
  overflow: hidden;
  min-height: 100vh;

  display: flex;
  align-items: center;
  justify-content: center;

  animation: none !important;
}

/* Vídeo cobrindo toda a área do hero (desktop) */
/*.hero-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 110%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
/* 1. Base: cobre todo o hero em QUALQUER proporção */
.hero-video{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-53%,-40%);   /* centra o ponto médio */
  min-width:100%;  min-height:100%; /* garante cobertura */
  width:auto;      height:auto;     /* deixa o browser decidir */
  object-fit:cover;                 /* corta só o excedente */
  object-position:center center;    /* alinha o corte */
  z-index:0;
}

/* 2. Opcional: ajuste fino em telas MUITO altas (20:9, 21:9)  */
/* =========================================================
   HERO – Mobile (≤768 px) | centralizado e levemente à direita
   ========================================================= */
/* =========================================================
   HERO – MOBILE (≤768px) – vídeo enquadrado à direita
   ========================================================= */
/* ===== HERO – MOBILE (≤768 px) – enquadrar para a direita ===== */
@media (max-width: 768px) {

  /* limpa hacks antigos */
  .hero-video{
    /* ancora o ponto central do vídeo no centro da seção */
    position: absolute;
    top: 50%;
    left: 50%;

    /* cobre toda a área */
    width: auto;
    height: 100%;
    min-width: 100%;
    min-height: 100%;
    object-fit: cover;

    /* MOVE o vídeo 20 % para a ESQUERDA  ➜ revela +20 % da DIREITA  */
    /* ajuste o primeiro valor até conseguir o enquadramento perfeito */
    transform: translate(-55%, -44%);
               /*     ^        ^        */
               /*     |        |        */
               /*     |        └── corrige vertical                */
               /*     └── “-70%” = 20 % mais à direita (‑50% ↔ centro) */
  }

  /* evita “pulo” de barra de endereço em iOS/Android */
  .hero{ min-height: 100dvh; }

}



/* Overlay escuro */
.hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.75);
  z-index: 1;
}

/* Conteúdo acima do overlay */
.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  width: 100%;
  padding: 0 1rem;
}
.hero h1 {
  font-size: clamp(2rem, 5vw, 4rem);
  color: var(--clr-primary);
}
.hero p {
  margin: 1rem 0 2rem;
  font-size: 1.1rem;
  max-width: 600px;
  margin-inline: auto;
}


/* =========================================================
   SEÇÕES GERAIS
========================================================= */
section { padding: 4rem 0 2rem; }
section h2 {
  text-align   : center;
  margin-bottom: 2rem;
  font-size    : 2rem;
  color        : var(--clr-primary);
}

/* =========================================================
   SOBRE / DIFERENCIAIS
========================================================= */
.about-grid {
  display              : grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap                  : 2rem;
}
.about-item {
  position            : relative;
  padding             : 2rem 1.5rem;
  border-radius       : 6px;
  text-align          : center;
  color               : var(--clr-light);
  overflow            : hidden;
  background-size     : cover;
  background-position : center;
}
.about-item i {
  font-size    : 2rem;
  margin-bottom: 1rem;
  color        : var(--clr-primary);
  position     : relative;
  z-index      : 1;
}
.about-item h3,
.about-item p { position: relative; z-index: 1; }
.about-item::before {
  content    : "";
  position   : absolute;
  inset      : 0;
  background : rgba(0, 0, 0, 0.747);
  transition : var(--trans);
  z-index    : 0;
}
.about-item:hover::before { background: rgba(0, 0, 0, 0.603); }
.about-item.price    { background-image: url('imagens/about-preco.png'); }
.about-item.location { background-image: url('imagens/about-localizacao.png'); }
.about-item.team     { background-image: url('imagens/about-equipe.png'); }
.about-item.ambience { background-image: url('imagens/about-ambiente.png'); }
/* =========================================================
   SERVIÇOS
========================================================= */
.service {
  background    : #2b2b2b;
  border-radius : 6px;
  overflow      : hidden;
  display       : flex;
  flex-direction: column;
}

.services-grid {
  display              : grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap                  : 2rem;

  /* centralização em telas grandes */
  max-width: 1200px;
  margin-inline: auto;
}

.service img { 
  height: 180px; 
  object-fit: cover; 
}

.service-content {
  padding : 1.5rem;
  flex    : 1;
}

.service-content h3 { 
  margin-bottom: .75rem; 
}

.service-content p  { 
  font-size: .95rem; 
  color: var(--clr-grey); 
  margin-bottom: 1rem; 
}

/* alinhamento central + espaçamento */
.services-action {
  text-align:center;
  margin-top:3rem;
}

/* ajuste para desktops/laptops */
@media (min-width: 992px) {
  .services-grid {
    justify-items: center;    /* centraliza os cards dentro da grid */
  }
  .service {
    width: 100%;
    max-width: 320px;         /* evita que fiquem muito largos */
  }
}



/* ====== Seção ====== */
#all-services.bg-image-servicos {
  /* mantém seus fundos existentes; só ajusta leitura */
  padding: 60px 0;
}

#all-services .section2-title{
  margin: 0 0 1.8rem;
  text-align: center;
  font-size: clamp(1.6rem, 2.5vw, 2rem);
  font-weight: 700;
  letter-spacing: .6px;
  color: var(--clr-primary, #e0b86f);
}

/* ====== Grid ====== */
.services2-grid{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 30px;
}
.services2-grid > .service2{ grid-column: span 4; }   /* 3 por linha no desktop */

@media (max-width: 992px){
  .services2-grid > .service2{ grid-column: span 6; } /* 2 por linha */
}
@media (max-width: 640px){
  .services2-grid{ gap: 25px; }
  .services2-grid > .service2{ grid-column: span 12; }/* 1 por linha */
}

/* ====== Card base (estilo planos2) ====== */
.service2{
  --card-bg: rgba(26,26,26,0.68);
  --card-border: rgba(200,161,91,0.25);
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  isolation: isolate;

  border: 1px solid var(--card-border);
  border-radius: 18px;
  min-height: 220px;                 /* ↓ antes 260px */
  background: var(--card-bg);

  backdrop-filter: blur(10px) saturate(125%);
  -webkit-backdrop-filter: blur(10px) saturate(125%);

  box-shadow:
    0 8px 20px -10px rgba(0,0,0,.70),
    0 3px 8px  -2px rgba(0,0,0,.55);

  transition:
    transform .45s cubic-bezier(.22,.68,.34,1),
    box-shadow .45s,
    border-color .45s;
}

/* Top bar brilhante */
.service2::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:4px;
  background:linear-gradient(90deg,rgba(200,161,91,0),var(--clr-primary,#e0b86f),rgba(200,161,91,0));
  opacity:.85;
  pointer-events:none;
  z-index:1;
}

/* Hover */
.service2:hover{
  transform: translateY(-8px);
  border-color: var(--clr-primary, #e0b86f);
  box-shadow:
    0 22px 44px -16px rgba(0,0,0,.85),
    0 12px 28px -10px rgba(0,0,0,.7),
    0 0 0 1px rgba(200,161,91,.30);
}

/* Destaque opcional */
.service2.is-featured{
  transform: scale(1.02);
  border-color: var(--clr-primary, #e0b86f);
  box-shadow:
    0 18px 36px -14px rgba(0,0,0,.85),
    0 8px 22px -8px rgba(0,0,0,.65),
    0 0 0 1px rgba(200,161,91,.25);
}

/* ====== Imagem (opcional) ====== */
.service2 > img{
  width: 100%;
  height: 140px;                    /* ↓ antes 160px */
  object-fit: cover;
  display: block;
  filter: saturate(115%);
  opacity:.95;
}
/* ====== Títulos das seções ====== */
.service2-title{
  margin: 0 auto 1.8rem;              /* auto → centraliza horizontalmente */
  text-align: center;
  font-size: clamp(1.6rem, 2.5vw, 2rem);
  font-weight: 700;
  color: #fff;
  position: relative;
  display: block;                     /* garante que ocupe a linha toda */
  padding-bottom: .6rem;
  width: max-content;                 /* largura ajustada ao conteúdo */
}

/* barrinha dourada centralizada */
.service2-title::after{
  content:"";
  display:block;
  width: 60px;
  height: 3px;
  margin: .4rem auto 0;               /* auto centraliza a barrinha */
  background: var(--clr-primary,#e0b86f);
  border-radius: 2px;
}


/* ====== Cabeçalho simples (somente título) ====== */
.service2-head{
  margin: 0;
  padding: .7rem .6rem;             /* ↓ menos alto */
  text-align: center;
  border-bottom: 1px solid rgba(200,161,91,.35);
  background: rgba(0,0,0,.25);
  position: relative;
  z-index: 2;
}
.service2-head h3{
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--clr-primary, #e0b86f);
}

/* ====== Cabeçalho FAIXA (título + preço grande) ====== */
.service2--faixa{ padding-top: 0; }

.service2-head--faixa{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;

  padding: 14px 14px 12px;          /* ↓ faixa mais compacta */
  background: rgba(0,0,0,.28);
  position: relative;
  z-index: 2;
}
.service2-head--faixa::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-1px;
  height:1px;
  background: rgba(200,161,91,.35);
}
.service2-head--faixa h3{
  margin:0 0 4px;                   /* ↓ menor espaçamento */
  font-size:.95rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.6px;
  color: var(--clr-primary, #e0b86f);
}

/* Preço grande central (na faixa) */
.service2-price{
  margin:0;
  display:flex;
  align-items:flex-end;
  gap:.3rem;
  line-height:1;
  color:#fff;
  font-family:'Poppins',sans-serif;
}
.service2-price .currency{
  font-size:.85rem;
  font-weight:700;
  opacity:.95;
}
.service2-price strong{
  font-size:2rem;                   /* ↓ antes 2.2rem */
  font-weight:800;
}

/* ====== Conteúdo ====== */
.service2-content{
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: .5rem;

  padding: .9rem .9rem 1rem;        /* ↓ padding mais enxuto */
  text-align: left;
}
.service2.service2--faixa .service2-content{
  padding: .85rem .9rem 1rem;       /* ↓ sob a faixa */
}

.service2-content p{
  margin: 0;
  color: #f5f5f5;
  font-size: .95rem;
  line-height: 1.35;
}
.service2-content strong{
  color: #fff;
  font-weight: 700;
}

/* ====== Botão (centralizado) ====== */
.service2 .btn.outline{
  --btn-h: 40px;                    /* ↓ antes 42px */
  align-self: center;               /* << centraliza o botão */
  position: relative;

  min-width: 180px;                 /* leve ajuste */
  height: var(--btn-h);
  padding: 0 1.4rem;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 10px;
  border: none;
  background: linear-gradient(135deg, var(--clr-primary,#e0b86f), #e9c884);
  color: #1d1405 !important;
  text-transform: uppercase;
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .6px;
  cursor: pointer;

  box-shadow:
    0 6px 18px -8px rgba(200,161,91,.55),
    0 2px 6px -1px rgba(0,0,0,.65);

  transition: transform .35s, box-shadow .35s, filter .35s;
  margin-top: .6rem;                /* ↑ mais respiro */
}
.service2 .btn.outline::after{
  content:"";
  position:absolute;
  bottom:0; left:0; right:0;
  height:3px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);
  opacity:.35;
}
.service2 .btn.outline:hover{
  transform: translateY(-4px);
  box-shadow:
    0 12px 28px -10px rgba(200,161,91,.7),
    0 4px 12px -2px rgba(0,0,0,.7);
  filter: brightness(1.03);
}
.service2 .btn.outline:active{
  transform: translateY(-1px);
  box-shadow: 0 6px 16px -8px rgba(200,161,91,.55);
}

/* ====== Ação (voltar) ====== */
.services2-action{
  margin-top: 24px;                 /* ↓ um pouco menor */
  display: flex;
  justify-content: center;
}
.services2-action .btn.primary{
  background: linear-gradient(135deg, var(--clr-primary,#e0b86f), #e7c889);
  color: #1e1404;
  border: none;
  box-shadow:
    0 6px 18px -8px rgba(200,161,91,.45),
    0 2px 6px -1px rgba(0,0,0,.45);
}

/* ====== Responsivo extra ====== */
@media (max-width:640px){
  .service2-price strong{ font-size: 1.8rem; }
  .service2 .btn.outline{
    min-width: 100%;
    align-self: stretch;            /* botão cheio no mobile */
  }
}


/* ====== Acessibilidade rápida ====== */
#all-services a.btn:focus-visible{
  outline: 2px solid var(--clr-primary,#e0b86f);
  outline-offset: 3px;
  border-radius: 12px;
}


/* caso não exista .btn.primary */
.btn.primary{
  display:inline-block;
  padding:.9rem 2.4rem;
  border-radius:6px;
  background:linear-gradient(135deg,var(--clr-primary),#e9c884);
  color:#1d1405;
  font-weight:600;
  letter-spacing:.6px;
  text-transform:uppercase;
  transition:transform .3s, box-shadow .3s;
}
.btn.primary:hover{
  transform:translateY(-4px);
  box-shadow:0 10px 24px -8px rgba(0,0,0,.55);
}

/* ==========================================================
   BG-ELHOMBRE – fundo com overlay MAIS escuro
   ========================================================== 
.bg-elhombre{
  position:relative;
  background:url("imagens/quadro.png") center/cover no-repeat fixed;
  color:#fff;
}


.bg-elhombre::before{
  content:"";
  position:absolute;
  inset:0;
  
  background:rgba(0,0,0,.885);
  pointer-events:none;
  z-index:1;
}


.bg-elhombre > *{
  position:relative;
  z-index:2;
}

/* ==========================================================
   PROMOÇÕES – fundo sólido uniforme
   ========================================================== */
.promo-section{
  background:#000;              /* ajuste para o tom que preferir */
  color:#fff;
  padding:4rem 5vw;
}


/* =========================================================
   PROMOÇÕES
========================================================= */
.promo-grid {
  display              : grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap                  : 2rem;
}
.promo {
  background     : #2b2b2b;
  border-left    : 6px solid var(--clr-primary);
  padding        : 1.5rem 1.5rem 1.5rem 2rem;
  border-radius  : 6px;
}

/* =========================================================
   GALERIA
========================================================= */
/* ===== GALERIA COM FUNDO DE LOGO ===== */
/* ==== GALERIA COM BACKGROUND FULL COVER ==== */
/* ===== SEÇÃO PLANOS – Fundo mais escuro + dim ===== */
#gallery {
  --gallery-dim: 0.25; /* aumenta para escurecer mais (0.55→0.65) */
  position: relative;
  padding: 4rem 0 4.5rem;
  overflow: hidden;
  background: #000;
}

#gallery::before {
  content:"";
  position:absolute;
  inset:0;
  background: url("imagens/quadro.png") center center / cover no-repeat fixed;
  filter: brightness(calc(1 - (var(--gallery-dim) - 0.20))) saturate(.95);
  opacity:.70; /* antes .65 */
  pointer-events:none;
  z-index:0;
}

#gallery::after {
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 60% 40%, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.62) 55%),
    linear-gradient(180deg, rgba(0,0,0,0.50) 0%, rgba(0,0,0,0.60) 60%, rgba(0,0,0,0.55) 100%);
  mix-blend-mode: normal;
  pointer-events:none;
  z-index:1;
}

#gallery .section-title {
  position:relative;
  z-index:2;
  color:#fff;
  font-size:2.2rem;
  text-align:center;
  margin:0 0 2.8rem;
  letter-spacing:.6px;
}
#gallery .section-title::after {
  content:"";
  display:block;
  width:110px;
  height:3px;
  margin:1rem auto 0;
  background:linear-gradient(90deg,var(--clr-primary),#e7c889);
  border-radius:2px;
  opacity:.9;
}

/* ===== GRID ===== */
.plans-grid {
  position:relative;
  z-index:2;
  display:grid;
  gap:2.2rem;
  grid-template-columns: repeat(auto-fit, minmax(300px,1fr));
  align-items:stretch;
}

/* ===================================================================== *
 *  PLANOS – CARD PREMIUM (versão otimizada)                             *
 *  →  Ajustes:                                                          *
 *      • contraste + legibilidade                                       *
 *      • destaque suave para “recomendado”                              *
 *      • lista em 1-coluna (desktop) + accordion no mobile              *
 *      • CTA com barra dourada fixa e micro-animação                    *
 * ===================================================================== */

/* ===== CARD BASE ===== */
/* ==========================================================
   PLANOS – CARD COMPLETO (versão final consolidada)
   ========================================================== */

/* ---------- CARD BASE ---------- */
.plan-card{
  /* cores base */
  --card-bg: rgba(26,26,26,0.68);
  --card-border: rgba(200,161,91,0.25);

  position:relative;
  display:flex;
  flex-direction:column;
  padding:1.9rem 1.6rem 2.4rem;
  border-radius:22px;
  border:1px solid var(--card-border);

  /* fundo simples, sem véu diagonal */
  background:var(--card-bg);

  /* vidro */
  backdrop-filter:blur(10px) saturate(125%);
  -webkit-backdrop-filter:blur(10px) saturate(125%);

  /* sombra */
  box-shadow:
    0 10px 25px -8px rgba(0,0,0,.70),
    0  4px 10px -2px rgba(0,0,0,.55);

  overflow:hidden;
  isolation:isolate;
  transition:
    transform .55s cubic-bezier(.22,.68,.34,1),
    box-shadow .55s,
    border-color .55s;

  min-height:380px;
}

/* destaque opcional */
.plan-card.recommended{
  transform:scale(1.04);
  border-color:var(--clr-primary);
  box-shadow:
    0 22px 46px -14px rgba(0,0,0,.85),
    0 10px 28px  -6px rgba(0,0,0,.65),
    0  0  0   1px rgba(200,161,91,.25);
}

/* top-stripe dourado */
.plan-card::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:5px;
  background:linear-gradient(90deg,rgba(200,161,91,0),var(--clr-primary),rgba(200,161,91,0));
  opacity:.85;
  pointer-events:none;
  z-index:1;            /* fica atrás do conteúdo */
}

/* remove o véu radial anterior */
.plan-card::after{display:none;}

/* hover */
.plan-card:hover{
  transform:translateY(-14px);
  border-color:var(--clr-primary);
  box-shadow:
    0 26px 52px -16px rgba(0,0,0,.85),
    0 14px 34px -10px rgba(0,0,0,.70),
    0  0   0   1px rgba(200,161,91,.30);
}

/* ---------- CABEÇALHO ---------- */
.plan-head{
  margin:0 0 1.6rem;
  padding-bottom:1.2rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.35rem;
  text-align:center;

  border-bottom:1px solid rgba(200,161,91,.35);
  background:none !important;
  position:relative; z-index:2;          /* sempre acima da stripe */
}

.plan-head h3{
  margin:0;
  font-size:1.05rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.6px;
  color:var(--clr-primary);
}

.plan-price{
  margin:0;
  display:flex;
  align-items:flex-end;
  gap:.25rem;

  font-family:'Poppins',sans-serif;
  font-size:2.8rem;      /* ajuste se necessário */
  font-weight:700;
  line-height:1;
  color:#fff;
}
.plan-price span:first-child{font-size:.9rem;}
.plan-period{display:none;}          /* “/mês” oculto */

/* ---------- LISTA DE VANTAGENS ---------- */
.plan-features{
  margin:1rem 0 1.8rem;
  padding:0;
  list-style:none;

  display:grid;
  grid-template-columns:1fr 1fr;      /* 2 × 2 */
  column-gap:1.8rem;
  row-gap:.8rem;

  font-size:.9rem;
  color:#f5f5f5;
  position:relative; z-index:2;
}
.plan-features li{
  position:relative;
  padding-left:1.15rem;
  line-height:1.3;
}
.plan-features li::before{
  content:"";
  position:absolute; left:0; top:7px;
  width:7px;height:7px;border-radius:2px;
  background:linear-gradient(135deg,var(--clr-primary),#f2d08b);
  box-shadow:0 0 0 2px rgba(200,161,91,.18);
}

/* ---------- CTA ---------- */
.plan-cta{
  margin-top:auto;
  display:flex;
  justify-content:center;
  position:relative; z-index:2;
}
.plan-btn{
  --btn-h:50px;
  position:relative;
  min-width:180px;
  height:var(--btn-h);
  padding:0 2.4rem;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  border:none;
  border-radius:10px;
  background:linear-gradient(135deg,var(--clr-primary),#e9c884);
  color:#1d1405;
  font-size:.95rem;
  font-weight:600;
  letter-spacing:.6px;
  text-transform:uppercase;
  cursor:pointer;

  box-shadow:0 6px 20px -6px rgba(200,161,91,.55),
             0 2px  6px -1px rgba(0,0,0,.65);
  transition:transform .45s,box-shadow .45s,filter .45s;
}
.plan-btn::after{
  content:"";
  position:absolute;
  bottom:0; left:0; right:0;
  height:3px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);
  opacity:.35;
}
.plan-btn:hover{
  transform:translateY(-6px);
  box-shadow:0 14px 34px -10px rgba(200,161,91,.70),
             0  4px 14px  -2px rgba(0,0,0,.70);
  filter:brightness(1.03);
}
.plan-btn:active{
  transform:translateY(-2px);
  box-shadow:0 6px 18px -6px rgba(200,161,91,.55);
}

/* ---------- RIBBON (plano premium) ---------- */
.plan-ribbon{
  position:absolute;
  top:16px; right:-48px;
  padding:6px 70px 7px;
  background:linear-gradient(135deg,var(--clr-primary),#e7c889);
  color:#1e1404;

  font-size:.62rem;
  font-weight:700;
  letter-spacing:1px;
  transform:rotate(34deg);

  box-shadow:0 6px 14px -4px rgba(0,0,0,.55);
  pointer-events:none;
  z-index:3;
}

/* ---------- MOBILE ---------- */
@media(max-width:640px){
  .plan-price{font-size:2.4rem;}
  .plan-features{
    grid-template-columns:1fr;       /* empilha em 1 coluna */
    column-gap:0;
  }
}

/* ==========================================================
   VIP-GALLERY – grid responsivo
   ========================================================== */

.vip-gallery-section{
  padding:4rem 5vw;
  background:#9c7327;              /* fundo mostarda (ajuste se quiser) */
}

.vip-gallery-section .section-title{
  font-family:'Poppins',sans-serif;
  font-size:2.6rem;
  margin:0 0 2.4rem;
  text-align:center;
  color:#000;
}

/* grid adaptável: 3 col desktop, 2 col tablet, 1 col mobile */
.vip-gallery-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:1.9rem;
}

.vip-gallery-grid img{
  width:100%;
  height:240px;                    /* altura fixa dá ritmo */
  object-fit:cover;
  border-radius:6px;
  box-shadow:0 6px 18px -6px rgba(0,0,0,.55);
  transition:transform .4s ease;
}

.vip-gallery-grid img:hover{
  transform:scale(1.03);
}

/* === VIP GALLERY – Mobile: mostrar a imagem inteira, sem cortes === */
@media (max-width: 768px) {
  .vip-gallery-grid {
    grid-template-columns: 1fr;   /* 1 coluna: foco total na imagem */
    gap: 1rem;                     /* leve respiro */
  }

  .vip-gallery-grid img {
    height: auto !important;       /* remove as alturas fixas (240/200px) */
    max-height: 70vh;              /* evita imagens gigantes na rolagem */
    object-fit: contain !important;/* exibe 100% da imagem, sem crop */
    background: #000;              /* letterbox discreto nas bordas */
    padding: 6px;                  /* evita encostar no contorno arredondado */
    border-radius: 8px;            /* mantém o look dos cards */
    box-shadow: 0 6px 18px -6px rgba(0,0,0,.55);
  }
}

/* ==========================================================
   ZIG-DIVIDER – divisor serrilhado
   Basta adicionar a classe .zig-divider à <section> superior
   ========================================================== */

.zig-divider{
  position:relative;
  overflow:hidden;                 /* recorte limpo */
}

.zig-divider::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-1px;    /* -1px cobre eventual gap */
  height:22px;                     /* altura dos “dentes”     */

  /* repete a cada 11 px: metade cor de cima, metade cor de baixo */
  background:repeating-linear-gradient(
              -45deg,
              #9c7327 0   11px,    /* cor da seção acima      */
              #000     11px 22px   /* cor da seção abaixo     */
            );
  pointer-events:none;
  z-index:3;
}

/* se a próxima seção não for preta, troque #000 por sua cor */



/* =========================================================
   DEPOIMENTOS
========================================================= */
.testimonial {
  background    : #2b2b2b;
  padding       : 2rem;
  border-radius : 6px;
  text-align    : center;
  margin-bottom : 2rem;
}
.testimonial img {
  width         : 80px;
  height        : 80px;
  border-radius : 50%;
  object-fit    : cover;
  margin        : 0 auto 1rem;
}

/* =========================================================
   CONTATO
========================================================= */
.contact-grid {
  display              : grid;
  grid-template-columns: 1fr 1fr;
  gap                  : 2rem;
}
@media (max-width:600px) {
  .contact-grid { grid-template-columns: 1fr; }
}
.contact-info p { margin-bottom: .5rem; color: var(--clr-grey); }

/* =========================================================
   RODAPÉ
========================================================= */
footer {
  background : #0b0b0b;
  text-align : center;
  padding    : 1rem 0;
  font-size  : .9rem;
  color      : var(--clr-grey);
}

/* =========================================================
   PROMO TOAST
========================================================= */
/* =========================================================
   PROMO TOAST (com fundo borrado)
========================================================= */
/* =========================================================
   PROMO TOAST
========================================================= */
/* =========================================================
   PROMO TOAST
========================================================= */
/* ===== PROMO TOAST (lado ESQUERDO) ===== */
/* ===== PROMO TOAST (lado ESQUERDO) – fundo full cover ===== */
.promo-toast {
  --toast-w: 350px;
  --toast-h: 200px;
  position: fixed;
  bottom: 20px;
  left: 20px;
  right: auto;
  width: var(--toast-w);
  height: var(--toast-h);
  /* Imagem cobre 100% do card */
  background: url('imagens/quadro.png') center center / cover no-repeat;
  /* Camada “glass” via blur + leve escurecimento virá do ::before */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 18px;
  box-shadow:
    0 14px 34px -10px rgba(0,0,0,0.75),
    0 6px 18px -6px rgba(0,0,0,0.60);
  overflow: hidden;
  opacity: 0;
  transform: translateX(-28px) translateY(12px) scale(.88);
  transition: opacity .55s cubic-bezier(.22,.68,.34,1),
              transform .55s cubic-bezier(.22,.68,.34,1);
  z-index: 1300;
  display: flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
  border: 1px solid rgba(200,161,91,0.35);
}

.promo-toast::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
  linear-gradient(145deg, rgba(0,0,0,0.70), rgba(0,0,0,0.60)),
  radial-gradient(circle at 30% 25%, rgba(200,161,91,0.22), rgba(0,0,0,0) 70%);

  mix-blend-mode: normal;
  opacity: 1;
  z-index: 0;
}
.promo-toast::before {
  background: rgba(0, 0, 0, 0.911) !important;
}


.promo-toast.show {
  opacity: 1;
  transform: translateX(0) translateY(0) scale(1);
}

.promo-toast.hide {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-30px) translateY(10px) scale(.85);
}

.promo-toast-content {
  position: relative;
  z-index: 1;
  color: var(--clr-light);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem .95rem 1.1rem;
  gap: .55rem;
  width: 100%;
}

.promo-toast-content h4 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: .8px;
  color: var(--clr-primary);
  text-transform: uppercase;
}

.promo-toast-content .promo-toast-price {
  margin: 0;
  font-size: 1.55rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .5px;
  color: #fff;
}

.promo-toast-content p.promo-desc {
  margin: 0;
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .4px;
  color: rgba(255,255,255,0.70);
}

.promo-toast-content .promo-toast-btn {
  padding: .70rem 1.55rem;
  border: none;
  background: linear-gradient(135deg,var(--clr-primary),#e8c885);
  color: #1d1405;
  font-weight: 600;
  font-size: .85rem;
  border-radius: 9px;
  cursor: pointer;
  transition: transform .45s cubic-bezier(.22,.68,.34,1),
              box-shadow .45s,
              filter .45s;
  letter-spacing: .6px;
  box-shadow: 0 8px 24px -8px rgba(200,161,91,0.55),
              0 4px 10px -3px rgba(0,0,0,0.55);
}

.promo-toast-content .promo-toast-btn:hover {
  transform: translateY(-4px);
  filter: brightness(1.05);
  box-shadow: 0 14px 34px -12px rgba(200,161,91,0.65),
              0 6px 16px -4px rgba(0,0,0,0.65);
}

.promo-toast-content .promo-toast-btn:active {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px -10px rgba(200,161,91,0.55);
}

/* Botão de fechar (opcional) */
.promo-toast-close {
  position: absolute;
  top: 6px;
  right: 8px;
  width: 28px;
  height: 28px;
  border: none;
  background: rgba(255,255,255,0.10);
  color: var(--clr-light);
  font-size: .85rem;
  font-weight: 600;
  line-height: 1;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items:center;
  justify-content:center;
  backdrop-filter: blur(4px);
  transition: background .35s, transform .35s;
}

.promo-toast-close:hover {
  background: rgba(255,255,255,0.18);
  transform: scale(1.06);
}

.promo-toast-close:active {
  transform: scale(.92);
}
/* ===== Animação interna de troca de plano ===== */
.promo-toast .promo-toast-content {
  transition: opacity .5s ease, transform .5s ease;
}

.promo-toast.promo-switching .promo-toast-content {
  opacity: 0;
  transform: translateY(6px) scale(.97);
}

/* ===== MOBILE ===== */
@media (max-width: 768px) {
  .promo-toast {
    --toast-w: 260px;
    --toast-h: 150px;
    width: var(--toast-w);
    height: var(--toast-h);
    bottom: 12px;
    left: 12px;
    border-radius: 16px;
    padding: 0;
    backdrop-filter: blur(10px);
    transform: translateX(-24px) translateY(10px) scale(.9);
    background: url('imagens/quadro.png') center center / cover no-repeat; /* também full cover em mobile */
  }
  .promo-toast::before {
    background:
      linear-gradient(145deg, rgba(0,0,0,0.65), rgba(0,0,0,0.55)),
      radial-gradient(circle at 25% 22%, rgba(200,161,91,0.20), rgba(0,0,0,0) 65%);
    opacity: 1;
  }
  .promo-toast-content {
    padding: .65rem .7rem .75rem;
    gap: .4rem;
  }
  .promo-toast-content h4 {
    font-size: .92rem;
    letter-spacing: .6px;
  }
  .promo-toast-content .promo-toast-price {
    font-size: 1.25rem;
  }
  .promo-toast-content p.promo-desc {
    font-size: .66rem;
  }
  .promo-toast-content .promo-toast-btn {
    padding: .5rem 1rem;
    font-size: .72rem;
    border-radius: 7px;
  }
  .promo-toast-close {
    width: 24px;
    height: 24px;
    top: 4px;
    right: 6px;
    font-size: .75rem;
  }
}


/* ============ BOTÃO FLUTUANTE WHATSAPP (GLOBAL) ============ */
.whatsapp-fab {
  --fab-size: 62px;
  position: fixed;
  bottom: 22px;
  right: 22px;
  width: var(--fab-size);
  height: var(--fab-size);
  display: flex;
  align-items: center;
  justify-content: center;
  background: #25d366;
  border: 4px solid #ffffff;
  border-radius: 50%;
  box-shadow:
    0 6px 18px -4px rgba(0,0,0,0.55),
    0 3px 7px -2px rgba(0,0,0,0.40);
  text-decoration: none;
  cursor: pointer;
  z-index: 1400;
  isolation: isolate;
  overflow: hidden;
  transition: transform .4s cubic-bezier(.22,.68,.34,1), box-shadow .4s, filter .4s;
}

.whatsapp-fab .wa-icon {
  width: 60%;
  height: 60%;
  display: block;
  flex: 0 0 auto;
}

.whatsapp-fab::after {
  content:"";
  position:absolute;
  inset:0;
  background:#25d366;
  border-radius:50%;
  opacity:.5;
  animation: wa-pulse 2.8s ease-out infinite;
  z-index:-1;
}

@keyframes wa-pulse {
  0% { transform:scale(1); opacity:.55; }
  60% { transform:scale(1.45); opacity:0; }
  100% { transform:scale(1.45); opacity:0; }
}

.whatsapp-fab:hover {
  transform: translateY(-6px) scale(1.05);
  box-shadow:
    0 14px 34px -10px rgba(0,0,0,0.75),
    0 6px 18px -4px rgba(0,0,0,0.55);
  filter: brightness(1.05);
}

.whatsapp-fab:active {
  transform: translateY(-2px) scale(1.02);
}

@media (max-width: 600px) {
  .whatsapp-fab {
    --fab-size: 54px;
    bottom: 14px;
    right: 14px;
    border-width: 3px;
  }
}
/* =========================================
   Compensa a altura do header fixo
   =========================================*/
#all-services{
  scroll-margin-top:100px;   /* evita corte ao navegar por âncora */
}

#all-services .container{
  padding-top:120px;         /* empurra o título para baixo do menu */
}

/* Se quiser menos espaço, reduza 120 px conforme a altura real do header */
/* ==========================================================
   FUNDO GLOBAL COM IMAGEM + OVERLAY
   (aplicado ao <body class="bg-imagem">)
   ========================================================== */
.bg-imagem{
  position:relative;                 /* base para ::before     */
  min-height:100vh;                  /* garante cobertura      */
}

/* imagem + escurecedor */
.bg-imagem::before{
  content:"";
  position:fixed;                    /* cobre viewport inteiro */
  inset:0;
  background:
    linear-gradient(rgba(0,0,0,.76), rgba(0,0,0,.76)), /* overlay */
    url("imagens/image.png") center/cover no-repeat;     /* imagem */
  z-index:-1;                        /* fica atrás do conteúdo */
  pointer-events:none;
}
/* ==========================================================
   PRODUCTS – grid + efeito flip (imagem cobre 100 % do card)
   ========================================================== */
.products-section{
  padding:4rem 5vw;
  background:#000;          /* fundo preto */
  color:#fff;
}

/* ---------- GRID ---------- */
.products-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:2rem;
  grid-auto-rows:1fr;       /* cada linha mesma altura                   */
}

/* ---------- CARD ---------- */
.product-card{
  perspective:1200px;       /* profundidade 3D */
  height:400px;             /* ajuste a seu gosto (altura fixa)          */
  display:block;
}
.card-inner{
  position:relative;
  width:100%; height:100%;
  transform-style:preserve-3d;
  transition:transform .8s cubic-bezier(.4,.2,.2,1);
}
.product-card:hover .card-inner{transform:rotateY(180deg);}   /* desktop */
.product-card.flipped .card-inner{transform:rotateY(180deg);} /* mobile */

/* ---------- FACES ---------- */
.card-face{
  position:absolute;
  inset:0;
  height:100%;
  backface-visibility:hidden;
  background:#262626;
  border-radius:8px;
  box-shadow:0 6px 18px -6px rgba(0,0,0,.55);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:0;                                   /* zera padding */
}

/* ---- frente: imagem cobre tudo ---- */
.card-front img{
  width:100%; height:100%;
  object-fit:cover;
  border-radius:8px;                            /* mesmo raio do card */
}
.card-front h3{display:none;}                   /* oculto ou overlay se preferir */

/* ---- verso ---- */
.card-back{
  transform:rotateY(180deg);
  text-align:center;
  padding:1.6rem 1.4rem 2.2rem;                 /* padding só no verso */
}
.card-back h3{margin:0 0 .8rem;}
.card-back p{margin:.25rem 0; line-height:1.4;}
.card-back .price{
  margin-top:1rem;
  font-size:1.05rem;
  font-weight:700;
  color:#e9c884;
}

/* ---------- MOBILE ---------- */
@media(max-width:600px){
  .products-grid{grid-template-columns:1fr;}    /* 1 coluna */
  /* opcional: se quiser manter hover em telas pequenas, remova a linha abaixo */
  /* .product-card:hover .card-inner{transform:none;} */
}
/* ==========================================================
   BACKGROUND exclusivo da seção “Nossos Serviços”
   ========================================================== */
/* ==========================================================
   FUNDO “Nossos Serviços” — enquadramento ajustado
   Mostra +10 % do topo da foto em TODAS as larguras
   ========================================================== */
/* ==========================================================
   BACKGROUND “Nossos Serviços” – imagem ajustada (10 % top)
   ========================================================== */
   /* ==========================================================
   FUNDO “Nossos Serviços”  – exibe MAIS do topo da foto
   ========================================================== */
.bg-image-servicos{
  position:relative;
  color:#fff;
}

/* ------------- DESKTOP (≥1201 px) ------------- */
.bg-image-servicos::before{
  content:"";
  position:absolute; inset:0;

  /* Camada 1 = gradiente  |  Camada 2 = foto */
  background:
    linear-gradient(rgba(0,0,0,.75),rgba(0,0,0,.75)),
    url("imagens/image.webp") center/cover no-repeat fixed;

  /* Posição das camadas      [gradiente]          [foto]  */
  background-position:        center center,      center 0.5%;
  /* 8 % mostra ~mais topo; ajuste p/ 5 % ou 10 % conforme o gosto */

  pointer-events:none;
  z-index:1;
}

/* ------------- NOTEBOOK/TABLET (≤1200 px) ------------- */
@media (max-width:1200px){
  .bg-image-servicos::before{
    background-size:auto, contain;                 /* foto inteira   */
    background-position:center center, center 8%;  /* foca topo      */
  }
}

/* ------------- CELULAR (≤700 px) ------------- */
@media (max-width:700px){
  .bg-image-servicos::before{
    background:
    linear-gradient(rgba(0,0,0,.80),rgba(0,0,0,.80)),
    url("imagens/quadro.png") center/cover no-repeat fixed;
    background-size:auto, cover;                   /* volta a preencher */
    background-position:center center, center 90%;  /* ainda mostra topo */
  }
}

/* garante texto/cards acima das camadas */
.bg-image-servicos > *{
  position:relative;
  z-index:2;
}
.card-servico {
  background: #1c1c1c;        /* fundo escuro elegante */
  color: #f5f5f5;             /* texto claro para contraste */
  border-radius: 12px;        /* cantos arredondados */
  padding: 20px;
  width: 260px;               /* tamanho fixo p/ consistência */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  text-align: center;
  box-shadow: 0 4px 10px rgba(0,0,0,0.4); /* sombra sutil */
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card-servico:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 15px rgba(0,0,0,0.6); /* efeito hover */
}

.card-servico .icone {
  font-size: 40px;            /* espaço para emoji ou ícone */
  margin-bottom: 15px;
}

.card-servico h3 {
  font-size: 1.2rem;
  margin: 10px 0;
  color: #ffd700;             /* destaque dourado */
}

.card-servico p {
  font-size: 0.9rem;
  color: #cccccc;
  margin-bottom: 12px;
}

.card-servico .preco {
  font-size: 1rem;
  font-weight: bold;
  color: #ffffff;
  margin-bottom: 15px;
}

.card-servico button {
  background: transparent;
  border: 2px solid #ffd700;
  color: #ffd700;
  font-weight: bold;
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease;
}

.card-servico button:hover {
  background: #ffd700;
  color: #1c1c1c;
}