/*
 * ============================================================
 *  DELTA EXPERIENCES — DESIGN SYSTEM
 *  Versão 1.0 · Abril 2026
 *
 *  Inclua este arquivo em todas as páginas do site:
 *  <link rel="stylesheet" href="/style.css"/>
 *  (junto com Tailwind CDN + Google Fonts)
 * ============================================================
 */


/* ── RESET / BASE ──────────────────────────────────────────── */
*, body        { font-family: 'Plus Jakarta Sans', sans-serif; }
html           { scroll-behavior: smooth; }


/* ================================================================
   TOKENS — USE ESTES VALORES EM TODO O SITE
   ================================================================

   CORES
   ─────
   Fundo claro............  #faf7f2   (cream)
   Fundo areia............  #f0e8d8   (sand)
   Marrom principal.......  #3d2a1a   (brown)
   Marrom médio...........  #5a3d28   (brown-mid)
   Marrom claro...........  #6b4c35   (brown-light)
   Dourado................  #8b6914   (gold)
   Dourado escuro.........  #6e5210
   Fundo dark (seções)....  #1a1208
   Fundo footer...........  #110d06
   Azul acento (linha)....  #4a9bb5
   WhatsApp verde.........  #25d366

   TIPOGRAFIA
   ──────────
   Serif (títulos/destaques): "Noto Serif", Georgia, serif
   Sans (corpo/labels/botões): "Plus Jakarta Sans", sans-serif

   Títulos grandes:   font-serif  text-5xl–8xl  font-bold  leading-[1.05]  tracking-tight
   Títulos de seção:  font-serif  text-4xl–5xl  font-bold  leading-tight
   Label (acima do título):
                      text-xs  font-sans  font-semibold  tracking-[.25em]  uppercase  text-gold
   Corpo:             text-base  leading-relaxed  text-brown-light
   Botão / navlink:   text-xs  font-semibold  tracking-[.18em]  uppercase

   ESPAÇAMENTO DE SEÇÃO
   ────────────────────
   Seção padrão:  py-24 px-6
   Container:     max-w-7xl mx-auto
   Divisor dourado (após título):  <span class="ds-divider"></span>

================================================================ */


/* ── DIVIDER DOURADO ─────────────────────────────────────────── */
/* Uso: <span class="ds-divider"></span> */
.ds-divider {
  display: block;
  width: 3.5rem;          /* 56px */
  height: 1px;
  background-color: #8b6914;
  margin-top: 1.25rem;
  margin-bottom: 1.75rem;
}
.ds-divider--center { margin-left: auto; margin-right: auto; }
.ds-divider--blue   { background-color: #4a9bb5; width: 2.5rem; }


/* ── BOTÕES ──────────────────────────────────────────────────── */

/* Botão primário — fundo dourado */
.btn-gold {
  background-color: #8b6914;
  color: #fff;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 600;
  font-size: .78rem;
  padding: .85rem 2rem;
  display: inline-block;
  transition: background-color .25s;
  border: none;
  cursor: pointer;
}
.btn-gold:hover { background-color: #6e5210; }

/* Botão secundário — outline branco (sobre fundos escuros/foto) */
.btn-outline {
  border: 1.5px solid rgba(255,255,255,.6);
  color: #fff;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 600;
  font-size: .78rem;
  padding: .85rem 2rem;
  display: inline-block;
  transition: all .25s;
  background: transparent;
  cursor: pointer;
}
.btn-outline:hover {
  background-color: rgba(255,255,255,.12);
  border-color: #fff;
}

/* Botão WhatsApp verde */
.btn-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  background-color: #25d366;
  color: #fff;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 600;
  font-size: .875rem;
  letter-spacing: .05em;
  padding: 1rem 1.75rem;
  border: none;
  cursor: pointer;
  transition: background-color .25s;
}
.btn-whatsapp:hover { background-color: #1ebe5a; }


/* ── CARDS DE EXPERIÊNCIA ────────────────────────────────────── */
/* Estrutura:
   <a class="service-card [card-NOME]" href="...">
     <div class="service-card__inner">
       <p class="service-card__label">Subtítulo</p>
       <h3 class="service-card__title">Título</h3>
       <span class="ds-divider ds-divider--blue"></span>
       <span class="btn-gold service-card__btn">Texto →</span>
     </div>
   </a>
*/

.service-card {
  display: block;
  position: relative;
  min-height: 580px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 2.5rem;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  transition: transform .4s ease;
}
@media (min-width: 1024px) { .service-card { min-height: 640px; } }
.service-card:hover { transform: scale(1.015); }
.service-card:hover .card-arrow { transform: translateX(4px); }
.card-arrow { transition: transform .25s; }

.service-card__inner { position: relative; z-index: 10; }

.service-card__label {
  color: rgba(255,255,255,.55);
  font-size: .72rem;
  font-family: 'Plus Jakarta Sans', sans-serif;
  letter-spacing: .22em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.service-card__title {
  font-family: 'Noto Serif', Georgia, serif;
  color: #fff;
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 1.25rem;
}

/* Gradiente padrão sobre foto do card */
.card-gradient {
  background-image: linear-gradient(
    to bottom,
    rgba(10,6,2,.08) 0%,
    rgba(10,6,2,.80) 100%
  );
}


/* ── NAVBAR ──────────────────────────────────────────────────── */
.ds-navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  background: rgba(0,0,0,.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.ds-navbar__inner {
  max-width: 80rem;
  margin: 0 auto;
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ds-navbar__link {
  color: rgba(255,255,255,.75);
  font-size: .72rem;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  transition: color .2s;
  text-decoration: none;
}
.ds-navbar__link:hover { color: #fff; }


/* ── LABEL DE SEÇÃO ──────────────────────────────────────────── */
/* Uso: <p class="ds-section-label">Texto</p> */
.ds-section-label {
  color: #8b6914;
  font-size: .72rem;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 600;
  letter-spacing: .25em;
  text-transform: uppercase;
  margin-bottom: .75rem;
}


/* ── HERO BACKGROUND ─────────────────────────────────────────── */
/* Customize a imagem em cada página com uma classe específica */
.hero-bg-base {
  background-size: cover;
  background-position: center 30%;
}
/* Sobreposição padrão para textos ficarem legíveis */
.hero-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,.15) 0%, rgba(0,0,0,.55) 100%);
  z-index: 1;
}


/* ── MODAL ───────────────────────────────────────────────────── */
#modal-overlay {
  display: none;
  position: fixed; inset: 0; z-index: 200;
  background: rgba(10,7,3,.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
#modal-overlay.open { display: flex; }

#modal-box {
  background: #1a1208;
  border: 1px solid rgba(139,105,20,.25);
  max-width: 500px;
  width: 100%;
  padding: 2.5rem;
  position: relative;
  animation: modalIn .25s ease;
  max-height: 90vh;
  overflow-y: auto;
}

@keyframes modalIn {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

#modal-close {
  position: absolute; top: 1rem; right: 1rem;
  color: rgba(255,255,255,.4); cursor: pointer;
  transition: color .2s;
  background: none;
  border: none;
  padding: 0;
}
#modal-close:hover { color: #fff; }


/* ── INPUTS / FORMULÁRIOS ────────────────────────────────────── */
/* Padrão: fundo transparente, borda inferior, texto branco */
.ds-input {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,.20);
  padding: .75rem 0;
  color: #fff;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .875rem;
  outline: none;
  transition: border-color .2s;
}
.ds-input::placeholder { color: rgba(255,255,255,.30); }
.ds-input:focus        { border-bottom-color: #8b6914; }

.ds-input--light {
  color: #3d2a1a;
  border-bottom-color: rgba(61,42,26,.20);
}
.ds-input--light::placeholder { color: rgba(61,42,26,.35); }
.ds-input--light:focus         { border-bottom-color: #8b6914; }

.ds-label {
  display: block;
  font-size: .7rem;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.50);
  margin-bottom: .5rem;
}
.ds-label--light { color: rgba(61,42,26,.55); }


/* ── FOOTER ──────────────────────────────────────────────────── */
.ds-footer {
  background: #110d06;
  border-top: 1px solid rgba(255,255,255,.05);
  padding: 3rem 1.5rem;
}
.ds-footer__link {
  color: rgba(255,255,255,.35);
  font-size: .7rem;
  font-family: 'Plus Jakarta Sans', sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color .2s;
}
.ds-footer__link:hover { color: rgba(255,255,255,.70); }
.ds-footer__copy {
  text-align: center;
  color: rgba(255,255,255,.20);
  font-size: .72rem;
  font-family: 'Plus Jakarta Sans', sans-serif;
  margin-top: 2rem;
}


/* ── UTILITÁRIOS ─────────────────────────────────────────────── */

/* Seção com fundo escuro (dark sections) */
.ds-section-dark  { background-color: #1a1208; }
.ds-section-light { background-color: #faf7f2; }
.ds-section-sand  { background-color: #f0e8d8; }

/* Texto em seções escuras */
.ds-text-muted  { color: rgba(255,255,255,.60); }
.ds-text-subtle { color: rgba(255,255,255,.35); }