/*HOME*/
:root{
    --laranja:   #c05f3f;
    --laranja-2: #d2683f;
    --amarelo:   #d5b256;
    --bege:      #c7b992;
    --azul-esv:  #68a498;
    --vermelho:  #d74550;
    --bg:        #0e0e10;
    --bg-2:      #15110f;
    --ink:       #f3ede4;
    --ink-soft:  rgba(243,237,228,.80);
    --ink-mute:  rgba(243,237,228,.5);
    --line:      rgba(243,237,228,.08);

    --ff-display: "Inter", system-ui, sans-serif;
    --ff-serif:   "Cormorant Garamond", Georgia, serif;
    --ff-sans:    "Inter", system-ui, sans-serif;

    --maxw: 1320px;
    --ease: cubic-bezier(0.23, 1, 0.32, 1);
  }
  .h2-serif {
    font-family: var(--ff-sans); /* Troquei para Sans para leitura direta */
    font-weight: 600; 
    font-size: clamp(2rem, 5vw, 3.8rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
    text-transform: uppercase; /* Dá um ar mais moderno e menos 'antigo' */
    }
.h2-serif span.serif-detail {
  font-family: var(--ff-serif);
  font-style: italic;
  text-transform: none;
  font-weight: 400;
  letter-spacing: 0;
}
  *,*::before,*::after{box-sizing:border-box}
  html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
  body{
    margin:0;
    font-family:var(--ff-sans);
    color:var(--ink);
    background:var(--bg);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
    overflow-x:hidden;
  }
  img{max-width:100%; display:block}
  a{color:inherit; text-decoration:none; transition: color .3s var(--ease)}
  button{font:inherit; cursor:pointer; border:0; background:none; color:inherit}

  .grain::after{
    content:"";
    position:absolute; inset:0;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.4 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    opacity:.05; pointer-events:none; mix-blend-mode:overlay;
  }

  .wrap{max-width:var(--maxw); margin:0 auto; padding: 0 32px}

  /* NAV */
  .nav{
    position:fixed; top:0; left:0; right:0; z-index:100;
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    background: rgba(14,12,10,.75);
    border-bottom:1px solid var(--line);
    transition: transform .4s var(--ease), background .4s var(--ease);
  }
  .nav-inner{
    display:flex; align-items:center; justify-content:space-between;
    padding: 18px 32px; max-width:var(--maxw); margin:0 auto;
  }
  .logo{display:inline-flex; align-items:center; gap:.7rem; font-family:var(--ff-display); letter-spacing:.03em; font-size:1.3rem; line-height:1;}
  .logo .mark{
    width:28px; height:28px; border-radius:50%;
    background: conic-gradient(from 200deg, #68a498, #d5b256, #c05f3f, #d74550, #68a498);
    position:relative; flex:none;
    box-shadow: 0 0 0 1px rgba(255,255,255,.1) inset, 0 4px 15px rgba(192,95,63,.3);
  }
  .logo .mark::before{ content:""; position:absolute; inset:6px; border-radius:50%; background: var(--bg); }
  .logo .name{font-weight:400}
  .logo .name span{color:var(--laranja); font-size:.6em; letter-spacing:.4em; display:block; margin-top:3px; font-family:var(--ff-sans); font-weight:600; text-transform: uppercase}

  .nav ul{display:flex; gap:32px; list-style:none; padding:0; margin:0}
  .nav ul a{font-size:.82rem; color:var(--ink-soft); font-weight:500; letter-spacing:.05em; text-transform: uppercase;}
  .nav .cta{
    background: var(--laranja); color:#fff; padding:.7rem 1.4rem; border-radius:999px;
    font-size:.8rem; font-weight:700; letter-spacing:.05em; text-transform: uppercase;
  }

  /* AJUSTE HERO SOLICITADO */
  .hero {
    position: relative;
    height: 100vh; /* Altura exata da tela */
    min-height: 600px; /* Previne que amasse demais em telas muito baixas */
    display: flex;
    align-items: center; /* Centraliza verticalmente o conteúdo */
    justify-content: flex-start;
    overflow: hidden;
    background: var(--bg);
    color: #fff;
    padding-top: 80px;
    padding-bottom: 0; /* Remove o espaço entre a imagem e a marquee */
    margin-bottom: 0;
  }

 .hero-bg {
    position: absolute;
    inset: 0;
    /* Imagem baseada no close da mulher e no ambiente spa */
    background-image: url('hero3.png'); 
    
    /* Mantive o zoom agressivo de 220% */
    background-size: 160%; 
    
    /* IMPORTANTE: Mudei para 'left 0%' para alinhar a borda esquerda da imagem (onde ela está) 
       na borda esquerda do container, deslocando-a totalmente para a esquerda. Mantive o 10% vertical. */
    background-position: left 15% top 30%; 
    background-repeat: no-repeat;
    opacity: 0.45;
    z-index: 1;
  }

  .hero-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(14,12,10,0.95) 0%, rgba(14,12,10,0.4) 60%, rgba(14,12,10,0.2) 100%);
  }

  .hero-content {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 32px;
  }

  .hero-text-wrapper { 
    max-width: 60%; 
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .hero .eyebrow {
    margin-bottom: 1.5rem; /* Reduzido */
  }

  .hero h1 {
    font-family: var(--ff-display);
    font-size: clamp(2.8rem, 7.5vw, 5.5rem); /* Reduzi o limite máximo de 6.5 para 5.5 */
    line-height: 0.95;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    margin: 1rem 0; /* Margem vertical controlada */
    font-weight: 400;
    color: #fff;
  }

  .hero h1 span { display: block; }

  .hero p.lead {
    font-family: var(--ff-sans);
    font-weight: 300;
    font-size: clamp(1rem, 1.5vw, 1.2rem);
    color: var(--ink-soft);
    max-width: 500px;
    line-height: 1.5;
    margin-bottom: 2rem; /* Reduzido de 3rem para 2rem */
  }

  .hero-cta {
    display: flex;
    gap: 16px;
    margin-top: 10px;
  }

  /* Ajuste na Marquee para não roubar espaço do Hero */
  .marquee {
    position: absolute;
    bottom: 0;
    width: 100%;
    margin-top: 0; /* Remove qualquer margem superior */
    border-bottom: none; /* Opcional: remove a linha inferior se quiser colar na seção seguinte */
    background: rgba(14,12,10,0.8);
    backdrop-filter: blur(10px);
    }
    /* Se a seção seguinte for a "#sobre", remova o padding superior dela */
    #sobre {
    padding-top: 60px; /* Reduzido de 140px para 60px para dar sequência imediata */
    }
    .hero-text-wrapper h1 {
    margin-top: 0;
    }
  @media (max-width: 980px) {
    .hero-text-wrapper { max-width: 100%; text-align: center; }
    .hero { justify-content: center; }
    .hero-cta { justify-content: center; }
    .hero h1 { font-size: clamp(2.5rem, 12vw, 4rem); }
  }

  .btn{
    display:inline-flex; align-items:center; gap:.7rem;
    padding: 1.1rem 2rem; border-radius:999px;
    font-weight:700; letter-spacing:.06em; font-size:.85rem; text-transform: uppercase;
    transition: all .4s var(--ease);
  }
  .btn-primary{background:var(--laranja); color:#fff}
  .btn-ghost{border:1px solid var(--line); color:var(--ink)}

  .marquee{
    border-top:1px solid var(--line); border-bottom:1px solid var(--line);
    overflow:hidden; padding: 25px 0; margin-top: 50px; position: relative; z-index: 10;
  }
  .marquee-track{
    display:flex; gap:80px; animation: scroll 40s linear infinite; white-space:nowrap;
    font-family:var(--ff-display); font-size: clamp(2rem, 4vw, 3.5rem); text-transform:uppercase;
  }
  @keyframes scroll{to{transform:translateX(-50%)}}

  /* SEÇÕES GERAIS */
  .section{padding: 80px 0; position:relative;}
  .section-head{display:grid; grid-template-columns: 1fr 1fr; gap:80px; margin-bottom: 40px; align-items: flex-start}
  .h2{ font-family: var(--ff-display); font-size: clamp(2.5rem, 6vw, 4.8rem); line-height:0.95; text-transform:uppercase; margin:0; }

  .cards{display:grid; grid-template-columns:repeat(4, 1fr); gap:20px}
  .card{
    padding: 40px 32px; border-radius:24px; border:1px solid var(--line);
    background: rgba(243,237,228,.02); transition: all .4s var(--ease);
    display:flex; flex-direction:column; gap: 15px;
  }
  .card .num{ font-family: var(--ff-display); font-size: 3rem; color: var(--laranja); line-height:1; opacity: 0.6 }
    .card h3 {
        font-family: var(--ff-sans);
        font-weight: 600;
        font-size: 1.2rem;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        margin-bottom: 15px;
    } 
.card p {
  font-family: var(--ff-sans);
  font-weight: 400; /* Aumentado de 300 para 400 */
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--ink-soft);
}
  .card .tag{ font-size:.7rem; letter-spacing:.15em; text-transform:uppercase; color:var(--bege); font-weight: 700; margin-top: auto; padding-top: 20px}

  .recovery-cta{
    margin-top:60px; padding: 48px; border-radius:32px; border:1px solid var(--line);
    background: linear-gradient(135deg, rgba(192,95,63,.1), rgba(21,17,15,0.4));
    display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap;
  }

  .spa-item{
    display:grid; grid-template-columns: 70px 1fr auto; gap:30px;
    padding: 30px 0; border-top:1px solid var(--line); align-items:center;
  }

  .whats-fab{
    position:fixed; right:30px; bottom:30px; z-index:99;
    width:64px; height:64px; border-radius:50%; background: #25D366;
    display:grid; place-items:center; box-shadow: 0 10px 30px rgba(37, 211, 102, .3);
  }

  .reveal{opacity:0; transform: translateY(30px); transition: opacity 1.2s var(--ease), transform 1.2s var(--ease)}
  .reveal.in{opacity:1; transform:none}

  @media (max-width:980px){
    .hero-text-wrapper { max-width: 100%; text-align: center; }
    .hero { justify-content: center; padding-top: 160px; padding-bottom: 60px;}
    .hero-cta { justify-content: center; }
    .section-head { grid-template-columns: 1fr; gap: 30px; }
    .cards { grid-template-columns: repeat(2, 1fr); }
  }
  .logo img {
    height: 62px;      /* Define uma altura fixa proporcional ao texto */
    width: auto;       /* Mantém a proporção da largura */
    flex: none;        /* Impede que o flexbox deforme a imagem */
    object-fit: contain;
    margin-right: 4px; /* Espaço opcional entre o ícone e o texto */
    }

/*RECOVERYSTEPS*/
.recovery-steps {
    display: flex;
    flex-direction: column;
    gap: 60px; /* Espaço entre as etapas */
  }

  .step-item {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
  }

  /* Inverte a ordem das colunas em itens pares no desktop */
  .step-item.reverse .step-image { order: 2; }
  .step-item.reverse .step-info { order: 1; }

  .step-image img {
    width: 100%;
    height: 600px;
    object-fit: cover;
    border-radius: 32px;
    border: 1px solid var(--line);
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
  }

  .step-info {
    padding: 20px;
  }

  .step-info .num {
    font-family: var(--ff-display);
    font-size: 5rem;
    color: var(--laranja);
    opacity: 0.2;
    display: block;
    line-height: 1;
    margin-bottom: -20px;
  }

  .step-info h3 {
    font-family: var(--ff-display);
    font-size: 2.5rem;
    text-transform: uppercase;
    margin-bottom: 25px;
  }

  .step-info p {
    font-size: 1.15rem;
    color: var(--ink-soft);
    line-height: 1.7;
    text-align: justify;
  }

  @media (max-width: 980px) {
    .step-item {
      grid-template-columns: 1fr;
      gap: 40px;
      text-align: center;
    }
    .step-item.reverse .step-image { order: 1; }
    .step-item.reverse .step-info { order: 2; }
    .step-image img { height: 400px; }
    .step-info p { text-align: center; }
  }

  /* Aproveitando os estilos de recovery-steps, mas com toques específicos para SPA */
  .spa-steps {
    display: flex;
    flex-direction: column;
    gap: 60px;
  }

  /* Usando a mesma estrutura de grid do Recovery para consistência */
  .step-item {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
  }

  .step-item.reverse .step-image { order: 2; }
  .step-item.reverse .step-info { order: 1; }

  .step-image img {
    width: 100%;
    height: 650px; /* Um pouco mais alta que a do recovery para fotos verticais */
    object-fit: cover;
    border-radius: 40px; /* Cantos um pouco mais suaves para o SPA */
    border: 1px solid var(--line);
  }

  .step-info h3 {
    font-family: var(--ff-display);
    font-size: 2.8rem;
    font-weight: 400; /* Leveza conforme solicitado */
    text-transform: uppercase;
    margin-bottom: 25px;
    letter-spacing: 0.05em;
  }

  .step-info p {
    font-size: 1.1rem;
    font-weight: 300;
    color: var(--ink-soft);
    line-height: 1.8;
    text-align: justify;
  }

  @media (max-width: 980px) {
    .step-item { grid-template-columns: 1fr; gap: 40px; text-align: center; }
    .step-item.reverse .step-image { order: 1; }
    .step-item.reverse .step-info { order: 2; }
    .step-image img { height: 450px; }
    .step-info p { text-align: center; }
  }


/* =====================================================
   MOBILE — ajustes adicionais (≤ 640px)
   Não altera nada acima, só complementa o que faltava.
   ===================================================== */
@media (max-width: 640px) {

  /* NAV: esconde links, mantém logo + botão agendar */
  .nav ul { display: none; }
  .nav-inner { padding: 14px 20px; }
  .nav .cta { font-size: .75rem; padding: .6rem 1.1rem; }
  .logo img { height: 44px; }

  /* HERO */
  .hero {
    align-items: flex-end;          /* empurra conteúdo para baixo, acima da marquee */
    padding-bottom: 80px;           /* espaço para a marquee absoluta */
    padding-top: 0;
  }
  .hero-bg {
    background-size: 280%;          /* mais zoom para preencher tela estreita */
    background-position: center top 20%;
    opacity: 0.35;
  }
  .hero-bg::after {
    /* gradiente vertical no mobile, cobre melhor */
    background: linear-gradient(
      180deg,
      rgba(14,12,10,0.55) 0%,
      rgba(14,12,10,0.85) 60%,
      rgba(14,12,10,1) 100%
    );
  }
  .hero-content { padding: 0 20px; }
  .hero-text-wrapper { max-width: 100%; text-align: center; }
  .hero p.lead { max-width: 100%; font-size: 1rem; }
  .hero-cta { flex-direction: column; align-items: center; gap: 12px; }
  .btn { width: 100%; justify-content: center; padding: .95rem 1.5rem; }

  /* WRAP padding menor */
  .wrap { padding: 0 20px; }

  /* SOBRE — cards empilham */
  .cards[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* CONTATO — grid inline do HTML vira coluna */
  #contato .wrap > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  /* Mapa: altura fixa menor */
  #contato .reveal[style*="height:550px"],
  #contato [style*="height:550px"] {
    height: 300px !important;
    border-radius: 20px !important;
  }

  /* SECTION HEAD inline (recovery) */
  .section-head[style*="text-align: center"] {
    margin-bottom: 48px !important;
  }

  /* FOOTER wordmark não vaza */
  footer div[style*="font-family:var(--ff-display)"] {
    font-size: clamp(2.4rem, 13vw, 5rem) !important;
  }

  /* FAB menor */
  .whats-fab { width: 52px; height: 52px; right: 18px; bottom: 18px; }

  /* MARQUEE — texto menor em telas finas */
  .marquee-track { font-size: clamp(1.4rem, 7vw, 2.2rem); gap: 40px; }
}