/* ==========================================================================
   IDENTIDADE VISUAL LABAREDA — camada de repaginação (ITERAÇÃO 1)
   Fontes da marca + paleta do PSD. Aditiva (carrega depois do style.css).
   ========================================================================== */

/* ---------- Anti-overflow mobile ---------- */
html, body { overflow-x: hidden; max-width: 100vw; }

/* ---------- Fontes da marca ---------- */
@font-face {
  font-family: 'Costa';
  src: url('fonts/Costa.otf') format('opentype');
  font-weight: normal; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Ocotillo';
  src: url('fonts/OcotilloPortugues.otf') format('opentype');
  font-weight: normal; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Modern Ephemera';
  src: url('fonts/WS_MODERNEPHEMERA.otf') format('opentype');
  font-weight: normal; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/JetBrainsMono-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 800; font-style: normal; font-display: swap;
}

/* ---------- Paleta da marca (sobrescreve os tokens do style.css) ---------- */
:root {
  --preto: #2E2624;          /* cacau escuro (texto/fundos escuros) */
  --branco: #F3E9D2;         /* creme quente (era quase-branco) */
  --creme: #EFE6D2;          /* creme (fundo shop) */
  --terracota: #AA3424;      /* vermelho tijolo (cor principal) */
  --terracota-escuro: #8A2A1B;
  --verde: #3D5A3A;          /* verde mata */
  --verde-claro: #5F8A5A;
  --areia: #E9BF91;          /* tan/areia (fundo journal) */
  --dourado: #C8531E;        /* laranja/terra (destaques) */
  --turquesa: #2E9B94;       /* turquesa (detalhes) */
  --cacau: #2E2624;
  --cinza: #6b5f56;
  --cinza-claro: #9a8b7d;

  --font-display: 'Ocotillo', 'Costa', Georgia, 'Times New Roman', serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;
}

/* ---------- Tipografia da marca ---------- */
h1, h2, h3,
.section-title,
.hero-headline,
.hero-title,
.logo-text {
  font-family: var(--font-display);
  letter-spacing: 0.01em;
}

/* Rótulos, olho editorial, navegação e botões em mono maiúsculo */
.section-label,
.eyebrow,
.nav-link,
.mobile-nav-link,
.btn,
.hero-location,
.frete-option__region {
  font-family: var(--font-mono);
  letter-spacing: 0.14em;
}

/* Detalhe turquesa em divisores/linhas de destaque */
.section-label,
.eyebrow {
  color: var(--turquesa);
}

/* Favicon/estrela e acentos herdam o novo terracota automaticamente
   pois usam var(--terracota). */

/* ==========================================================================
   ITERAÇÃO 2 — texturas por seção, molduras, cards de rádio, padrões
   ========================================================================== */

/* ---- Texturas de fundo por seção (do PSD) ---- */
.section--experience,
.section--about,
.section--book {
  background-color: var(--terracota);
  background-image: url('img/textures/VERMELHO.jpg');
  background-size: 1920px auto;
  background-position: center top;
  background-repeat: repeat;
  color: var(--branco);
}
.section--radio {
  background-color: var(--cacau);
  background-image: url('img/textures/CACAU.jpg');
  background-size: 1920px auto;
  background-position: center top;
  background-repeat: repeat;
  color: var(--branco);
}
.section--shop {
  background-color: var(--creme);
  /* clareia a textura com um véu creme por cima => fundo claro igual ao exemplo */
  background-image: linear-gradient(rgba(243, 236, 219, .78), rgba(243, 236, 219, .78)), url('img/textures/BEGE.jpg');
  background-size: 1920px auto;
  background-position: center top;
  background-repeat: repeat;
  color: var(--preto);
}
.section--journal {
  background-color: #DBBD92;                       /* tan/kraft correto (igual ao exemplo) */
  background-image: url('img/textures/BEGE.jpg');  /* AREIA.jpg era creme claro demais */
  background-size: 1920px auto;
  background-position: center top;
  background-repeat: repeat;
  color: var(--preto);
}

/* Títulos claros nas seções escuras (vermelho/cacau) */
.section--about .section-title,
.section--about .about-description,
.section--book .section-title,
.section--book .book-description,
.section--radio .section-title,
.section--radio .section-subtitle,
.section--experience .section-title,
.section--experience .section-subtitle { color: var(--branco); }

/* ---- Divisor pontilhado turquesa (assinatura do PSD) ---- */
.section-header::after {
  content: '';
  display: block;
  width: 130px;
  margin: 22px auto 0;
  border-top: 2px dotted var(--turquesa);
  opacity: .75;
}

/* ---- Cards de rádio coloridos: creme / laranja / turquesa / vermelho ---- */
.radio-card {
  border-radius: 10px;
  padding: 26px 22px;
  display: flex;               /* alinha o conteudo em coluna */
  flex-direction: column;
  height: 100%;                /* preenche a celula do grid (todos iguais) */
}
.radio-grid > .radio-card:nth-child(1) { background: var(--creme); color: var(--preto); }
.radio-grid > .radio-card:nth-child(2) { background: var(--dourado); color: var(--branco); }
.radio-grid > .radio-card:nth-child(3) { background: var(--turquesa); color: #10302e; }
.radio-grid > .radio-card:nth-child(4) { background: var(--terracota); color: var(--branco); }
.radio-card-title { font-family: var(--font-mono); letter-spacing: .12em; }
/* empurra botao + player para a base => todos os players alinhados na mesma linha */
.radio-open-btn { margin-top: auto; }
/* garante o player inteiro visivel, sem corte */
.radio-embed { overflow: visible; border-radius: 12px; }
.radio-embed iframe { width: 100%; display: block; border-radius: 12px; }

/* Mobile: disco + titulo + botão Spotify (sem iframe embed) */
@media (max-width: 600px) {
  .vinyl-disc { width: 72px; height: 72px; }
  .vinyl-label { width: 26px; height: 26px; font-size: .55rem; }
  .radio-vinyl { margin-bottom: 12px; }
  .radio-card { padding: 20px 16px; text-align: center; }
  .radio-card-title { font-size: 1rem; margin-bottom: 4px; }
  .radio-card-desc { font-size: .75rem; margin-bottom: 12px; }
  .radio-embed { display: none; }
  .radio-grid { gap: 16px; }
  .radio-open-btn { margin-top: auto; }
}

/* ---- Molduras finas nas fotos (estilo editorial do PSD) ---- */
.book-slide img,
.about-image,
.about-video,
.product-card img,
.section--journal img {
  border: 1px solid rgba(46, 38, 36, .5);
  box-shadow: 0 0 0 5px rgba(255, 255, 255, .05), 0 12px 30px rgba(0, 0, 0, .18);
}
.section--shop .product-card { background: transparent; }

/* Tipografia loja: fonte local (JetBrains Mono) garante acentos (Vestuário, Cosmético) */
.shop-cat-btn,
.product-category { font-family: var(--font-mono); }

/* ---- Botões: contorno, cantos quase-retos ---- */
.btn { border-radius: 3px; }
.btn--primary { background: var(--terracota); color: var(--branco); }
.btn--secondary, .btn--outline { background: transparent; border: 1.5px solid currentColor; }

/* ---- Padrões gráficos como detalhe decorativo no Manifesto ---- */
.section--about { position: relative; overflow: hidden; }
.section--about::before,
.section--about::after {
  content: '';
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 130px; height: 130px;
  background-repeat: no-repeat; background-size: contain; background-position: center;
  opacity: .30; pointer-events: none;
}
.section--about::before { left: 2.5%; background-image: url('img/patterns/padrao-passaros.png'); }
.section--about::after  { right: 2.5%; background-image: url('img/patterns/padrao-coqueiro.png'); }

/* ---- Rodapé / contato em cacau escuro ---- */
.site-footer,
.section--contact { background: var(--cacau); color: var(--branco); }

/* ==========================================================================
   ITERAÇÃO 3 — correções (conteúdo sempre visível + refinos)
   ========================================================================== */

/* CONTEÚDO SEMPRE VISÍVEL: o efeito "reveal" deixava seções (ex: Manifesto,
   O QUE VOCÊ VAI VIVER) vazias/vermelhas até rolar. Garante que apareçam. */
.reveal,
.reveal--delay-1,
.reveal--delay-2,
.reveal--delay-3 {
  opacity: 1 !important;
  transform: none !important;
}

/* Cards claros (experience / shop) legíveis sobre o vermelho/creme */
.section--experience .exp-card,
.section--experience [class*="card"] {
  background: var(--creme);
  color: var(--preto);
}

/* Molduras de produto: quando sem foto, mostra um fundo suave (evita moldura vazia crua) */
.product-card__img,
.product-card img {
  background: rgba(46, 38, 36, .06);
}

/* ==========================================================================
   ITERAÇÃO 4 — Hero com logo (emblema) + tarja vermelha texturizada no topo
   ========================================================================== */

/* Header = tarja vermelha texturizada (igual ao PSD, em qualquer estado de scroll) */
header.site-header,
header.site-header.scrolled,
header.site-header.is-scrolled,
header.site-header.header--scrolled,
header.site-header.solid,
header.site-header.sticky {
  background-color: var(--terracota) !important;
  background-image: url('img/textures/VERMELHO.jpg') !important;
  background-size: 1920px auto !important;
  background-position: center top !important;
  background-repeat: repeat !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .18);
  border-bottom: none;
}
.site-header { color: var(--branco) !important; }
.site-header .logo-text,
.site-header .nav-link,
.site-header .lang-option,
.site-header .lang-divider,
.site-header .logo-star { color: var(--branco) !important; }

/* Hero: emblema (logo) centralizado, sem texto */
.hero-content {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-logo {
  width: min(160px, 32vw);
  height: auto;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .4));
}

/* Linha turquesa embaixo do hero (assinatura do PSD) */
.hero { border-bottom: 7px solid var(--turquesa); }

/* Remove a estrela ao lado de "LABAREDA" no menu (nao existe no PSD) */
.site-header .logo-star { display: none !important; }
/* Alinha o wordmark LABAREDA sem o espaco da estrela */
.site-header .logo { gap: 0; }

/* Player de radio e botao do WhatsApp sempre por cima ao rolar,
   mas SEMPRE abaixo dos modais (product/cart/checkout/booking/journal usam
   z-index 2000-2100) para nao sobrepor botoes como "ADICIONAR AO CARRINHO"
   dentro do modal de produto em telas pequenas (iPhone 11/13/17). */
.mini-player { z-index: 1500 !important; }
.whatsapp-float { z-index: 1490 !important; position: fixed !important; }

/* ==========================================================================
   ITERAÇÃO 5 — PARTE 2 (tagline + galeria emoldurada + manifesto), do PSD
   ========================================================================== */
.section--experience { padding-top: 70px; padding-bottom: 90px; }

/* --- Tagline --- */
.p2-tagline { text-align: center; }
.p2-tagline-texto {
  color: var(--branco);
  font-family: var(--font-mono);
  font-size: 0.95rem;
  letter-spacing: 0.03em;
  line-height: 2;
  max-width: 780px;
  margin: 0 auto 20px;
}
.p2-microbar {
  display: flex; flex-wrap: wrap; gap: 16px;
  justify-content: center; align-items: center;
  font-family: var(--font-mono);
  font-size: 0.78rem; letter-spacing: 0.14em;
  color: var(--branco);
}
.p2-microbar .p2-sep { color: var(--turquesa); }

/* --- Galeria (carrossel com moldura preta) --- */
.p2-galeria { margin: 46px auto 0; }
.p2-frame {
  max-width: 1000px;
  margin: 0 auto;
  background: #0f0f0d;              /* moldura preta */
  padding: 16px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .35);
}
.p2-track { position: relative; width: 100%; aspect-ratio: 3 / 2; overflow: hidden; }
.p2-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  opacity: 0; transition: opacity 0.8s ease;
}
.p2-img.active { opacity: 1; }
/* Bolinhas embaixo (escolher foto) */
.p2-dots {
  display: flex; gap: 12px; justify-content: center;
  margin-top: 22px;
}
.p2-dot {
  width: 11px; height: 11px; min-width: 11px; min-height: 11px;
  padding: 0; flex-shrink: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(243, 233, 210, .55);
  background: transparent; cursor: pointer;
  transition: background 0.2s;
}
.p2-dot.active { background: var(--branco); border-color: var(--branco); }

/* --- Manifesto --- */
.p2-manifesto {
  display: flex; align-items: center; justify-content: center;
  gap: 44px; max-width: 940px; margin: 80px auto 0;
  text-align: center;
}
.p2-selo { width: 120px; height: auto; flex: 0 0 auto; opacity: .9; }
.p2-manifesto-titulo {
  font-family: var(--font-display);
  color: var(--branco);
  font-size: 1.7rem; letter-spacing: .06em;
  margin-bottom: 20px;
}
.p2-manifesto-texto p {
  color: var(--branco);
  font-family: var(--font-mono);
  font-size: 0.92rem; line-height: 1.95; letter-spacing: .02em;
  max-width: 520px; margin: 0 auto;
}
.p2-manifesto-fecho { margin-top: 20px; }

@media (max-width: 720px) {
  .p2-selo { display: none; }
  .p2-manifesto { gap: 0; padding: 0 20px; margin-top: 50px; }
  .p2-manifesto-texto p { font-size: .85rem; line-height: 2; max-width: 100%; }
  .p2-manifesto-titulo { font-size: 1.4rem; }
  .section--experience { padding: 50px 16px 60px; }
  .p2-tagline-texto { font-size: .88rem; line-height: 1.85; padding: 0 8px; }
  .p2-microbar { font-size: .7rem; gap: 10px; }
  .p2-galeria { margin-top: 30px; }
  .p2-dots { gap: 7px; flex-wrap: wrap; }
  .p2-dot, .section--book .p2-dot { width: 8px; height: 8px; min-width: 8px; min-height: 8px; }
  .section--book { padding: 40px 0; }
  .p3-frase { font-size: .9rem !important; padding: 0 16px; }
  .p3-reserva-btns { flex-direction: column; gap: 10px; padding: 0 16px; }
  .p3-btn-reservar { font-size: .75rem; padding: 14px 20px; }
}

/* ==========================================================================
   ITERAÇÃO 6 — PARTE 3 (galeria emoldurada + frase + botão RESERVAR), do PSD
   ========================================================================== */
/* normaliza a seção (o CSS antigo era display:grid + min-height:100vh) */
.section--book {
  display: block !important;
  min-height: 0 !important;
  padding-top: 18px;      /* fininha tarja vermelha em cima, igual ao exemplo */
  padding-bottom: 90px;
  overflow: hidden;       /* evita scroll horizontal do full-bleed */
}
.section--book .p2-galeria { margin: 0; }

/* --- Galeria da parte 3: full-bleed (borda a borda, sem moldura preta) --- */
.section--book .p2-frame {
  max-width: none;
  width: 100vw;
  margin-left: calc(50% - 50vw);   /* quebra o container e ocupa a tela toda */
  background: transparent;
  padding: 0;
  box-shadow: none;
}
.section--book .p2-track {
  aspect-ratio: 3 / 2;
  height: auto;
  max-height: none;
}
.section--book .p2-img {
  object-fit: contain;
}
.section--book .p2-dots { margin-top: 26px; }
.section--book .p2-dot {
  border-color: rgba(243, 233, 210, .7);
}

.p3-reserva { text-align: center; margin-top: 44px; }
.p3-frase {
  color: var(--branco);
  font-family: var(--font-mono);
  font-size: 0.95rem; line-height: 2; letter-spacing: .03em;
  max-width: 640px; margin: 0 auto 28px;
}
.p3-btn-reservar {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.85rem; letter-spacing: .2em;
  color: var(--branco);
  border: 1.5px solid var(--branco);
  padding: 14px 44px;
  transition: background .2s, color .2s;
}
.p3-btn-reservar:hover { background: var(--branco); color: var(--terracota); }
.p3-reserva-btns {
  display: flex; flex-wrap: wrap; gap: 16px; justify-content: center;
}
.p3-btn-reservar--airbnb {
  border-color: var(--turquesa); color: var(--turquesa);
}
.p3-btn-reservar--airbnb:hover {
  background: var(--turquesa); color: var(--branco); border-color: var(--turquesa);
}

/* ==========================================================================
   PRODUTO ESGOTADO — badge + card esmaecido
   ========================================================================== */
.product-card--esgotado { opacity: 0.55; }
.product-card--esgotado:hover { opacity: 0.75; }
.product-image { position: relative; }
.product-badge-esgotado {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  background: var(--cacau, #2E2624); color: var(--creme, #F3E9D2);
  font-family: var(--font-mono, monospace);
  font-size: .65rem; letter-spacing: .12em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 2px;
}

/* ==========================================================================
   ITERAÇÃO 7 — JOURNAL (cards emoldurados, estilo editorial do PSD)
   ========================================================================== */
.section--journal .journal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 44px 40px;
  align-items: start;
  justify-items: center;
  max-width: 1100px;
  margin: 0 auto;
}
/* card emoldurado */
.j-card {
  background: transparent !important;
  overflow: visible !important;
  border-radius: 0 !important;
  cursor: pointer;
  text-align: center;
  transition: transform .3s ease;
}
.j-card:hover { transform: translateY(-4px); }
.j-frame {
  border: 1px solid rgba(46, 38, 36, .5);    /* linha externa fina */
  padding: 15px;                             /* passe-partout largo */
  background: #EADFC6;                        /* moldura bege claro (igual ao exemplo) */
}
.j-frame-inner {
  border: 1px solid rgba(46, 38, 36, .4);    /* linha fina em volta da foto */
  overflow: hidden;
  background: #EADFC6;
}
.j-img, .j-ph {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transition: transform .6s var(--ease-in-out, ease);
}
.j-ph {
  background: linear-gradient(135deg,
    hsl(var(--j-hue, 28), 40%, 42%), hsl(var(--j-hue, 28), 35%, 30%));
}
.j-card:hover .j-img { transform: scale(1.05); }
.j-title {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 1rem;
  color: var(--cacau, #2E2624);
  margin: 22px 0 10px;
}
.j-desc {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: .92rem;
  line-height: 1.75;
  color: #5b4a3c;
  max-width: 310px;
  margin: 0 auto 16px;
}
.j-plus {
  width: 34px; height: 34px; padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(46, 38, 36, .6);
  background: transparent;
  color: var(--cacau, #2E2624);
  font-size: 1.15rem; line-height: 1; cursor: pointer;
  transition: background .2s, color .2s;
}
.j-plus:hover { background: var(--cacau, #2E2624); color: var(--areia, #E9BF91); }

@media (max-width: 900px) {
  .section--journal .journal-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .section--journal .journal-grid { grid-template-columns: 1fr; max-width: 380px; margin: 0 auto; }
}

/* ==========================================================================
   ITERAÇÃO 8 — depoimentos ocultos + imagem de contato maior
   ========================================================================== */
.section--testimonials { display: none !important; }
/* imagem do contato maior (era max-width 220px) */
.contact-image { max-width: 340px; }

/* Estrela original no footer (substituiu SVG genérico) */
.footer-star-img {
  width: 90px;
  height: 90px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}
.footer-logo-text { display: none; }

/* Contato sem foto: grid 2 colunas */
.contact-grid { grid-template-columns: 1fr !important; }
@media (min-width: 768px) {
  .contact-grid { grid-template-columns: 1fr 1fr !important; gap: 48px; }
}

/* --- Journal: titulos legíveis (mono em vez de display) --- */
.journal-card-title,
.journal-modal__title { font-family: var(--font-mono); }
.journal-modal__tags { display: none; }

/* --- Verificação de email (checkout step 1) --- */
.checkout-verify-msg {
  font-family: var(--font-mono);
  font-size: .85rem;
  color: var(--cinza);
  text-align: center;
  margin: 18px 0 12px;
}
#checkout-verify .btn--link {
  display: block;
  margin: 8px auto 0;
  background: none;
  border: none;
  color: var(--terracota);
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .08em;
  cursor: pointer;
  text-decoration: underline;
}

/* --- Overlay aviso Mercado Pago (fallback do modal) --- */
.mp-redirect-overlay {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, .65);
  display: flex; align-items: center; justify-content: center;
  z-index: 10000;
  padding: 20px;
}
.mp-redirect-box {
  background: var(--creme, #EFE6D2);
  border-radius: 8px;
  padding: 36px 28px;
  max-width: 420px;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
}
.mp-redirect-msg {
  font-family: var(--font-mono);
  font-size: .92rem;
  line-height: 1.7;
  color: var(--cacau, #2E2624);
  margin-bottom: 24px;
}
.mp-redirect-btns {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mp-redirect-btns .btn { width: 100%; text-align: center; }