/* ===== Site Isabela — style.v6.css (Option C: JS fade + leve parallax) =====
   - Um ÚNICO gradiente no body (bege -> branco).
   - A imagem do hero some via CSS MASK controlada por JS (sem emendas).
   - Fallback: se mask não for suportado, usamos o ::after (fade clássico).
   - Mantém originais intactos.
*/
html{ scroll-behavior: smooth; }
/* ===== Reset & Tokens ===== */
*{ margin:0; padding:0; box-sizing:border-box; }
:root{
  --rosa:#493327;
  --lav:#493327;
  --menta:#f3e3d6;
  --ink:#000000;
  --muted:#493327;
  --line:#493327;
  --radius:16px;
  --shadow:0 12px 30px rgba(0,0,0,.08);
  --bege:#f3e3d6;

  /* Variáveis controladas por JS */
  --mask-solid: 65svh; /* início do fade (opaco até aqui) */
  --mask-end: 100svh;  /* fim do fade (transparente daqui pra baixo) */
  --hero-shift: 0px;   /* deslocamento vertical suave da imagem (parallax leve) */
}
html,body{ height:100%; }

/* ===== Fundo global: bege -> branco ===== */
body{
  font-family: Arial, sans-serif;
  color:#333;
  
  background-color: var(--bege);
}

/* ===== Header fixo ===== */
header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:transparent; padding:20px 40px; height:auto;
}
.navbar{ display:flex; justify-content:flex-end; align-items:center; }
.menu-wrapper{ display:block; }
.menu-toggle{
  display:none;
  background:none;
  border:0;
  color:var(--ink);
  font-size:1.8rem;
  cursor:pointer;
}
.menu{ list-style:none; display:flex; gap:20px; }
.menu li a{
  text-decoration:none; color:#000; font-weight:bold;
  padding:8px 10px; border-radius:10px;
}
.menu li a:hover{ background:rgba(255,255,255,.14); }

/* ===== Hero ===== */
.hero{
  position:relative;
  min-height:100svh; /* ocupa a viewport útil (iOS/Android) */
  background-image:url('img/hero-desktop.jpg');
  background-size:cover;
  background-repeat:no-repeat;
  background-position: right calc(50% + var(--hero-shift));
  background-color: var(--bege); /* garante que qualquer área “sobrando” seja bege */

  /* Máscara (JS ajusta os pontos em px; aqui ficam fallbacks em svh) */
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 var(--mask-solid), transparent var(--mask-end));
          mask-image: linear-gradient(180deg, #000 0, #000 var(--mask-solid), transparent var(--mask-end));
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;

/*Adicionado estilo para .overlay no hero*/
}
.overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.2) 0%, rgba(0,0,0,0) 100%);
  z-index:1;
}

.hero-content{
  position:relative;
  z-index:2;
}


/* Fallback: se máscara não estiver ativa, o ::after faz o fade clássico */
.hero::after {
  content: "";
  position: absolute; inset: auto 0 0 0;
  height: 46%;
  background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, var(--bege) 100%);
  pointer-events: none;
  opacity: 1; /* visível até JS confirmar suporte a mask */
  transition: opacity .2s ease;
}
.mask-ok .hero::after{ opacity: 0; } /* quando JS ativa a máscara, ocultamos o fallback */

/* ===== Estrutura de seções ===== */
.section{ padding:80px 20px; }
.container{ max-width:1100px; margin:0 auto; }
.section .section-title,
#servicos h2, #contato h2{
  font-family:"Playfair Display", serif;
  font-weight:600; font-size:clamp(28px, 3.4vw, 40px);
  line-height:1.15; color:var(--ink); margin:0 0 16px;
}

/* ===== Sobre & Especialidades usam o fundo global ===== */
#sobre{ background:none; padding:30px 0; }
#servicos{ background:none; padding:70px 0; }
#servicos .section-sub{ color:var(--ink); opacity:.8; margin:6px 0 12px; }

/* Grade de cards */
.cards{ display:flex; gap:20px; margin-top:20px; }
.card{
  flex:1; background:#f5f5f5; padding:22px 18px; border-radius:8px; text-align:center;
}
#servicos .cards .card{
  background:#493327; border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); font-weight:700; color:#1f2328;
  transition:transform .18s ease, box-shadow .18s ease;
}
#servicos .cards .card:hover{ transform:translateY(-4px); box-shadow:0 16px 34px rgba(0,0,0,.12); }

/* Chips */
.chips{ list-style:none; padding:0; margin:12px 0 0; display:flex; flex-wrap:wrap; gap:10px; }
.chip{
  display:inline-block; padding:10px 14px; border-radius:999px;
  border:2px solid #493327; color:#000000; background:#ffffffcc;
  font-weight:800; letter-spacing:.02em; text-transform:uppercase; font-size:.9rem;
}
.chip:hover{ background:#f3e3d6;}


/* ===== Animações de entrada ===== */
.fade-up{
  opacity:0;
  transform:translateY(20px);
  transition:opacity .6s ease, transform .6s ease;
}
.fade-up.in-view{
  opacity:1;
  transform:none;
}
@media (prefers-reduced-motion: reduce){
  .fade-up{
    opacity:1;
    transform:none;
    transition:none;
  }
}

/* ===== Contato ===== */
#contato a {
  font-weight: 700;
  font-size: 1.2rem;
  text-decoration: none;
  color: #1f2328;
  background: #fff;
  padding: 10px 18px;
  border-radius: 999px;
  display: inline-block;
  transition: background 0.2s ease, color 0.2s ease;
}
#contato a:hover { background: var(--menta); color: #fff; }

/* ===== WhatsApp flutuante ===== */
.whatsapp-float{
  position:fixed; width:160px; height:160px;
  bottom:20px; right:20px; z-index:100;
}
.whatsapp-float img{
  width:100%; height:100%; object-fit:contain; display:block;
}

/* ===== Responsivo ===== */
@media (max-width: 560px){
  .hero{
    background-image: url('img/hero-mobile.jpg') !important;
    background-position: center calc(50% + var(--hero-shift));
  }
  .navbar{ position:relative; }
  .menu-wrapper{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    background:rgba(243, 227, 214,.95);
    padding:10px 20px;
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    opacity:0;
    transform:translateY(-10px);
    transition:opacity .3s ease, transform .3s ease;
  }
  .menu-wrapper.open{
    display:block;
    opacity:1;
    transform:translateY(0);
  }
  .menu{ gap:10px; flex-direction:column; }
  .menu li a{ font-size:.9rem; display:block; }
  .menu-toggle{
    display:block;
    position:absolute;
    top:0;
    left:0;
  }
  #servicos .cards{ grid-template-columns:1fr; }
  .chip{ font-size:.85rem; padding:8px 12px; }
  .section{ padding:48px 16px; }
  #contato p{ font-size:.95rem; }

  /* WhatsApp menor no mobile */
  .whatsapp-float{ width:65px; height:65px; }

  /* respiro nas laterais */
  .hero-content{ padding: 40px 20px 0; text-align:center; align-items:flex-start; }
  .container{ padding-left:16px; padding-right:16px; }

  /* títulos não quebrarem feio */
  .section .section-title{ word-break: keep-all; hyphens: auto; }
}

/* UX de âncoras */
section[id], .section{ scroll-margin-top: 72px; }