/* base.css: reset, typography, layout, buttons, forms, cards. Uses variables from variables.css only. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; max-width: 100vw; }
body { margin: 0; max-width: 100vw; overflow-x: hidden; background: var(--white); color: var(--ink); font-family: var(--font-body); font-size: var(--fs-base); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; }
img, video { max-width: 100%; height: auto; display: block; }
svg { flex-shrink: 0; }

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: var(--lh-tight); margin: 0 0 var(--space-4); color: var(--ink); text-wrap: balance; }
h1 { font-size: var(--fs-hero); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }
p { margin: 0 0 var(--space-4); }
a { color: var(--gold-dark); text-decoration: none; }
a:hover { text-decoration: underline; }
ul, ol { margin: 0; padding: 0; }
:focus-visible { outline: 2px solid var(--gold-dark); outline-offset: 3px; }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); }
.section--white { background: var(--white); }
.section--offwhite { background: var(--off-white); }
.eyebrow { display: block; margin-bottom: var(--space-3); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-dark); }
.lead { font-size: var(--fs-md); color: var(--ink-muted); max-width: 62ch; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: var(--space-3); top: -100px; z-index: var(--z-modal); background: var(--black); color: var(--ink-on-dark); padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm); }
.skip-link:focus { top: var(--space-3); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 48px; padding: 0 var(--space-6); border: 1.5px solid transparent; border-radius: var(--radius-md); font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.02em; line-height: 1; cursor: pointer; text-decoration: none; transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.btn:hover { text-decoration: none; }
.btn--gold { background: var(--gold); color: var(--white); }
.btn--gold:hover { background: var(--gold-dark); color: var(--white); }
.btn--dark { background: var(--black); color: var(--ink-on-dark); }
.btn--dark:hover { background: var(--black-soft); }
.btn--outline { background: transparent; border-color: var(--black); color: var(--black); }
.btn--outline:hover { background: var(--black); color: var(--ink-on-dark); }
.btn--outline-light { background: transparent; border-color: var(--gold-light); color: var(--gold-light); }
.btn--outline-light:hover { background: var(--gold); border-color: var(--gold); color: var(--white); }
.btn[disabled] { opacity: 0.6; cursor: not-allowed; }
@media (max-width: 639px) { .btn--block-mobile { width: 100%; } }

/* Forms */
.field { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); }
.field label { font-size: var(--fs-sm); font-weight: 500; color: var(--ink); }
.field .req { color: var(--error); }
.field input, .field select, .field textarea { width: 100%; min-height: 48px; padding: 0 var(--space-4); background: var(--white); border: 1.5px solid var(--line-strong); border-radius: var(--radius-md); font: inherit; font-size: 1rem; color: var(--ink); transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.field textarea { min-height: 110px; padding: var(--space-3) var(--space-4); resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--gold-dark); box-shadow: 0 0 0 3px var(--gold-tint); }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--error); background: var(--error-tint); }
.field-error { display: none; font-size: var(--fs-xs); font-weight: 500; color: var(--error); }
.field.has-error .field-error { display: block; }
.field-hint { font-size: var(--fs-xs); color: var(--ink-muted); }
.consent { display: flex; gap: var(--space-3); align-items: flex-start; margin-bottom: var(--space-4); font-size: var(--fs-xs); color: var(--ink-muted); }
.consent input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--gold-dark); flex: none; }
.form-status { display: none; margin-bottom: var(--space-4); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); font-size: var(--fs-sm); }
.form-status.is-error { display: block; background: var(--error-tint); color: var(--error); }
.form-status.is-success { display: block; background: var(--success-tint); color: var(--success); }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Cards and tables */
.card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-md); }
.table-wrap table { width: 100%; min-width: 520px; border-collapse: collapse; }
.table-wrap th, .table-wrap td { padding: var(--space-3) var(--space-4); text-align: left; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); }
.table-wrap th { background: var(--off-white); font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* WhatsApp sticky button */
.wa-float { position: fixed; z-index: 90; right: var(--space-4); bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px)); display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: var(--success); color: var(--white); box-shadow: var(--shadow-lg); transition: background var(--dur) var(--ease); animation: wa-beat 2.4s ease-in-out infinite; }
.wa-float:hover { background: var(--black-soft); animation-play-state: paused; }
.wa-float:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.wa-float::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 50%; background: var(--success); animation: wa-ring 2.4s ease-out infinite; }
@keyframes wa-beat { 0%, 45%, 100% { transform: scale(1); } 10%, 30% { transform: scale(1.12); } 20% { transform: scale(1); } }
@keyframes wa-ring { 0% { transform: scale(1); opacity: 0.45; } 60%, 100% { transform: scale(1.7); opacity: 0; } }
@media (min-width: 768px) { .wa-float { right: var(--space-5); bottom: var(--space-5); width: 60px; height: 60px; } }
@media (prefers-reduced-motion: reduce) { .wa-float, .wa-float::before { transition: none; animation: none; } }