/*
Theme Name: Wawazoo Theme
Theme URI: https://wawazoo.com
Description: Tema custom sin builder. ACF + CPTs nativos.
Version: 1.6.0
Author: Enlairar
Text Domain: wawazoo
*/

/* ── Tokens ─────────────────────────────────────────────── */
:root {
  --green:    #4B6A47;
  --green-d:  #3a5437;
  --amber:    #C8793A;
  --brown:    #6A5747;
  --brown-d:  #3d2f24;
  --black:    #111110;
  --text:     #5c5855;
  --bg:       #F7F4EF;
  --border:   #E8E2D9;
  --white:    #ffffff;
  --px:       clamp(20px, 5vw, 80px);
  --max:      1400px;
  --r-sm:     8px;
  --r-md:     12px;
  --r-lg:     20px;
  --r-xl:     24px;
  --r-full:   9999px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.08);
  --shadow-md: 0 8px 30px rgba(0,0,0,.1);
  --shadow-lg: 0 20px 60px rgba(0,0,0,.14);
  --t: .22s ease;
}

/* ── Reset ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  font-family: 'Inter', sans-serif;
  color: var(--text);
  background: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, video { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }

/* ── Focus & skip link ──────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
  border-radius: 2px;
}
.skip-link {
  position: absolute; top: -100px; left: 16px; z-index: 200;
  padding: 12px 20px; border-radius: var(--r-sm);
  background: var(--black); color: var(--white);
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 600; font-size: .9rem;
  transition: top .15s ease;
}
.skip-link:focus { top: 16px; }

/* ── Type ───────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Bricolage Grotesque', sans-serif;
  line-height: 1.1;
  color: var(--black);
}
h1 { font-size: clamp(2.4rem, 5.5vw, 4.2rem); font-weight: 700; letter-spacing: -.02em; text-wrap: balance; }
h2 { font-size: clamp(1.8rem, 3.5vw, 2.8rem); font-weight: 700; letter-spacing: -.015em; text-wrap: balance; }
h3 { font-size: clamp(1.1rem, 2vw, 1.4rem); font-weight: 600; text-wrap: balance; }
h4 { font-size: 1rem; font-weight: 600; }
p  { line-height: 1.75; }

.eyebrow {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: .72rem; font-weight: 600;
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--amber); display: block; margin-bottom: 14px;
}

/* ── Layout ─────────────────────────────────────────────── */
.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--px); }
.wrap--narrow { max-width: 900px; margin-inline: auto; padding-inline: var(--px); }
section { padding-block: 100px; }

/* ── Buttons ────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 28px; border-radius: var(--r-full);
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 600; font-size: .95rem;
  transition: var(--t); white-space: nowrap;
  border: 2px solid transparent; cursor: pointer;
}
.btn-primary  { background: var(--amber); color: #fff; }
.btn-primary:hover  { background: #b36830; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(200,121,58,.35); }
.btn-green    { background: var(--green); color: #fff; }
.btn-green:hover    { background: var(--green-d); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(75,106,71,.35); }
.btn-outline  { border-color: rgba(255,255,255,.5); color: #fff; }
.btn-outline:hover  { border-color: #fff; background: rgba(255,255,255,.1); }
.btn-ghost    { border-color: var(--border); color: var(--black); }
.btn-ghost:hover    { border-color: var(--green); color: var(--green); }
.btn-full     { width: 100%; justify-content: center; }

/* ── Prose (páginas legales) ─────────────────────────────── */
.prose { line-height: 1.8; }
.prose h2 { margin-top: 2.5rem; margin-bottom: 1rem; }
.prose h3 { margin-top: 2rem; margin-bottom: .75rem; }
.prose p  { margin-bottom: 1rem; }
.prose ul, .prose ol { margin-bottom: 1rem; padding-left: 1.5rem; }
.prose li { margin-bottom: .5rem; list-style: disc; }
.prose a  { color: var(--green); text-decoration: underline; }

@media (max-width: 768px) {
  section { padding-block: 60px; }
}