/* ═══════════════════════════════════════════════════
   RESERVA FIGUEIRA — BRAND GUIDELINES SHARED CSS
   Version 1.0 — 2024
═══════════════════════════════════════════════════ */

/* TOKENS */
:root {
  --areia:       #F2EDE4;
  --areia-deep:  #EAE3D8;
  --pedra:       #E0D9CC;
  --falha:       #C4B8A5;
  --oliva:       #3C4A35;
  --oliva-light: #4D5F43;
  --cafe:        #3B2E26;
  --bronze:      #8C6B3E;
  --carvao:      #1C1C1C;
  --muted:       #8A7E72;
  --text:        #2C2820;
  --off-white:   #FAF8F5;

  --font-display: 'Gazpacho', Georgia, serif;
  --font-deck:    'Gazpacho', Georgia, serif;
  --font-body:    'Montserrat', 'Helvetica Neue', sans-serif;

  --track-wide:  0.15em;
  --track-wider: 0.22em;

  --gutter: clamp(2rem, 6vw, 6rem);
  --max-w:  1320px;

  --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* FONTS */








/* RESET */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { -webkit-font-smoothing:antialiased; scroll-behavior:smooth; }
body { font-family:var(--font-body); font-size:0.875rem; color:var(--text); background:var(--areia); line-height:1.7; }
img { display:block; max-width:100%; }
a { text-decoration:none; color:inherit; }

/* SHARED NAV */
.bg-nav {
  position:fixed; top:0; left:0; right:0; z-index:100;
  height:64px; display:flex; align-items:center; justify-content:space-between;
  padding:0 var(--gutter);
  background:rgba(242,237,228,0.96); backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(196,184,165,0.25);
}
.bg-nav-brand { display:flex; align-items:center; gap:1rem; }
.bg-nav-brand img { height:28px; }
.bg-nav-title { font-family:var(--font-body); font-size:10px; letter-spacing:var(--track-wider); text-transform:uppercase; color:var(--muted); }
.bg-nav-links { display:flex; align-items:center; gap:0.25rem; }
.bg-nav-links a {
  font-family:var(--font-body); font-size:10px; letter-spacing:var(--track-wider); text-transform:uppercase;
  color:var(--muted); padding:0.4rem 0.75rem; border-radius:2px;
  transition:background 200ms, color 200ms;
}
.bg-nav-links a:hover, .bg-nav-links a.active { background:var(--carvao); color:var(--areia); }

/* PAGE WRAPPER */
.bg-page { padding-top:64px; min-height:100svh; }

/* SECTION HERO */
.bg-section-hero {
  padding: 6rem var(--gutter) 5rem;
  position:relative; overflow:hidden;
  border-bottom:1px solid rgba(196,184,165,0.25);
}
.bg-section-hero-texture {
  position:absolute; inset:0; opacity:0.12;
  background-size:cover; background-position:center;
}
.bg-section-number {
  font-family:var(--font-body); font-size:10px; letter-spacing:var(--track-wider);
  text-transform:uppercase; color:var(--muted);
  display:flex; align-items:center; gap:0.75rem; margin-bottom:2rem;
}
.bg-section-number::before { content:''; display:block; width:2rem; height:1px; background:var(--muted); }
.bg-section-title {
  font-family:var(--font-display); font-weight:100;
  font-size:clamp(3rem,6vw,6rem); line-height:0.95;
  letter-spacing:-0.01em; color:var(--carvao);
  max-width:14ch; margin-bottom:1.5rem;
}
.bg-section-sub {
  font-family:var(--font-body); font-size:0.8125rem; line-height:1.8;
  color:var(--muted); max-width:60ch;
}

/* CONTENT AREA */
.bg-content { padding:4rem var(--gutter) 6rem; max-width:var(--max-w); margin:0 auto; }
.bg-content + .bg-content { padding-top:0; }

/* SUBSECTION */
.bg-sub { margin-bottom:4rem; }
.bg-sub-title {
  font-family:var(--font-display); font-weight:300;
  font-size:clamp(1.5rem,2.5vw,2.25rem); line-height:1.1;
  letter-spacing:-0.01em; color:var(--carvao);
  margin-bottom:1.5rem; padding-bottom:1.25rem;
  border-bottom:1px solid rgba(196,184,165,0.3);
}
.bg-body { font-size:0.8125rem; line-height:1.85; color:var(--muted); max-width:68ch; }
.bg-body + .bg-body { margin-top:1rem; }

/* RULE */
.bg-rule { display:block; width:2.5rem; height:1px; background:var(--falha); margin:2rem 0; }

/* LABEL */
.bg-label {
  font-family:var(--font-body); font-size:10px; letter-spacing:var(--track-wider);
  text-transform:uppercase; color:var(--muted); display:block; margin-bottom:0.75rem;
}

/* HIGHLIGHT BLOCK */
.bg-highlight {
  background:var(--areia-deep); border-left:2px solid var(--bronze);
  padding:1.5rem 2rem; margin:2rem 0;
}
.bg-highlight p { font-family:var(--font-display); font-weight:300; font-size:1.25rem; line-height:1.5; color:var(--carvao); }

/* TABLE */
.bg-table { width:100%; border-collapse:collapse; margin:1.5rem 0; }
.bg-table th {
  font-family:var(--font-body); font-size:9px; letter-spacing:var(--track-wider);
  text-transform:uppercase; color:var(--muted); text-align:left;
  padding:0.75rem 1rem; border-bottom:1px solid rgba(196,184,165,0.3);
  background:rgba(196,184,165,0.1);
}
.bg-table td {
  font-size:0.8125rem; color:var(--text);
  padding:0.875rem 1rem; border-bottom:1px solid rgba(196,184,165,0.15);
  vertical-align:top;
}
.bg-table td:first-child { font-family:'Courier New',monospace; font-size:0.75rem; color:var(--bronze); }
.bg-table tr:hover td { background:rgba(196,184,165,0.08); }

/* GRID UTILITIES */
.bg-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; }
.bg-grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.bg-grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; }
@media(max-width:900px) { .bg-grid-3,.bg-grid-4 { grid-template-columns:1fr 1fr; } }
@media(max-width:600px) { .bg-grid-2,.bg-grid-3,.bg-grid-4 { grid-template-columns:1fr; } }

/* CARD */
.bg-card {
  background:var(--off-white); border:1px solid rgba(196,184,165,0.25);
  padding:1.75rem; display:flex; flex-direction:column; gap:0.75rem;
}
.bg-card-title { font-family:var(--font-deck); font-weight:400; font-size:1rem; color:var(--carvao); }
.bg-card-body { font-size:0.75rem; line-height:1.7; color:var(--muted); }
.bg-card-tag {
  display:inline-block; font-size:9px; letter-spacing:var(--track-wider);
  text-transform:uppercase; padding:0.25rem 0.625rem; margin-top:auto;
  background:var(--areia-deep); color:var(--muted);
}
.bg-card-tag.green { background:rgba(60,74,53,0.1); color:var(--oliva); }
.bg-card-tag.bronze { background:rgba(140,107,62,0.12); color:var(--bronze); }
.bg-card-tag.red { background:rgba(140,60,60,0.1); color:#8C3C3C; }

/* TEXTURE SWATCH */
.bg-tex-swatch { aspect-ratio:3/2; overflow:hidden; margin-bottom:1rem; }
.bg-tex-swatch img { width:100%; height:100%; object-fit:cover; }

/* COLOR SWATCH */
.bg-color-swatch { height:120px; margin-bottom:1rem; position:relative; }
.bg-color-badge {
  position:absolute; bottom:0.75rem; left:0.75rem;
  font-size:9px; font-family:'Courier New',monospace;
  padding:0.25rem 0.5rem;
}

/* LOGO SPECIMEN */
.bg-logo-specimen {
  display:flex; align-items:center; justify-content:center;
  padding:3rem; min-height:180px; border:1px solid rgba(196,184,165,0.25);
}
.bg-logo-specimen img { max-height:80px; width:auto; }
.bg-logo-specimen.dark { background:var(--carvao); }
.bg-logo-specimen.green { background:var(--oliva); }
.bg-logo-specimen.cafe { background:var(--cafe); }

/* LAYOUT DIAGRAM */
.bg-layout-diagram {
  background:var(--pedra); padding:0; overflow:hidden;
  aspect-ratio:16/9; display:grid; position:relative;
  border:1px solid rgba(196,184,165,0.4);
}
.bg-layout-diagram .zone {
  display:flex; align-items:center; justify-content:center;
  font-size:9px; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--muted); font-family:var(--font-body);
}
.bg-layout-diagram .zone-image { background:var(--falha); }
.bg-layout-diagram .zone-text { background:var(--areia); padding:1rem; flex-direction:column; gap:0.35rem; align-items:flex-start; }
.bg-layout-diagram .zone-dark { background:var(--oliva); color:rgba(242,237,228,0.5); }

/* PROMPT CARD */
.bg-prompt {
  background:var(--carvao); color:var(--areia);
  padding:2rem; margin-bottom:1.5rem;
}
.bg-prompt-id { font-size:9px; letter-spacing:var(--track-wider); text-transform:uppercase; color:var(--bronze); margin-bottom:1rem; }
.bg-prompt-title { font-family:var(--font-display); font-weight:300; font-size:1.25rem; color:var(--areia); margin-bottom:1rem; }
.bg-prompt-text { font-size:0.75rem; line-height:1.85; color:rgba(242,237,228,0.65); font-family:'Courier New',monospace; }
.bg-prompt-use { margin-top:1rem; font-size:9px; letter-spacing:var(--track-wider); text-transform:uppercase; color:rgba(242,237,228,0.35); }

/* DO / DON'T */
.bg-do-dont { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; margin:2rem 0; }
.bg-do { border-top:2px solid var(--oliva); padding-top:1rem; }
.bg-dont { border-top:2px solid #8C3C3C; padding-top:1rem; }
.bg-do-label { font-size:9px; letter-spacing:var(--track-wider); text-transform:uppercase; color:var(--oliva); margin-bottom:1rem; }
.bg-dont-label { font-size:9px; letter-spacing:var(--track-wider); text-transform:uppercase; color:#8C3C3C; margin-bottom:1rem; }
.bg-do-list, .bg-dont-list { list-style:none; display:flex; flex-direction:column; gap:0.5rem; }
.bg-do-list li, .bg-dont-list li { font-size:0.75rem; color:var(--muted); padding-left:1.25rem; position:relative; }
.bg-do-list li::before { content:'✓'; position:absolute; left:0; color:var(--oliva); font-weight:500; }
.bg-dont-list li::before { content:'×'; position:absolute; left:0; color:#8C3C3C; font-weight:500; }

/* DIVIDER */
.bg-divider { border:none; border-top:1px solid rgba(196,184,165,0.25); margin:3rem 0; }

/* FULL BLEED BAND */
.bg-band {
  padding:3rem var(--gutter); position:relative; overflow:hidden;
  background:var(--carvao); color:var(--areia); margin:3rem 0;
}
.bg-band-texture { position:absolute; inset:0; opacity:0.06; background-size:cover; }
.bg-band h3 { font-family:var(--font-display); font-weight:100; font-size:clamp(1.75rem,3vw,2.75rem); color:var(--areia); margin-bottom:0.75rem; position:relative; }
.bg-band p { font-size:0.8125rem; color:rgba(242,237,228,0.55); max-width:60ch; position:relative; }

/* FOOTER NAV */
.bg-footer-nav {
  border-top:1px solid rgba(196,184,165,0.25);
  padding:2rem var(--gutter);
  display:flex; align-items:center; justify-content:space-between;
  background:var(--areia-deep);
}
.bg-footer-prev, .bg-footer-next {
  font-size:10px; letter-spacing:var(--track-wider); text-transform:uppercase;
  color:var(--muted); display:flex; align-items:center; gap:0.75rem;
  transition:color 200ms;
}
.bg-footer-prev:hover, .bg-footer-next:hover { color:var(--carvao); }
.bg-footer-index { font-size:10px; letter-spacing:var(--track-wider); text-transform:uppercase; color:var(--muted); }