/* ============================================================================
   LusoMagnet — site layout & behaviour CSS (composes the design system tokens)
   Visual style is the design system; this file is structure only.
   ========================================================================== */

/* ----------------------------------------------------------------------------
   BRAND PRIMARY REMAP — warm orange (#FE8C4A) becomes the primary colour of the
   whole palette, replacing the navy blue. Loaded after the design-system tokens,
   so these :root overrides win. Orange is a light hue → filled primary surfaces
   use dark ink text, and text-on-light accents use deeper, AA-compliant oranges.
   --------------------------------------------------------------------------- */
:root {
  /* primitives — orange ramp */
  --color-raw-orange-700: #9C4E16;  /* deep — text/active on light (AA) */
  --color-raw-orange-600: #B85C1C;  /* accent — eyebrows/links on light (AA) */
  --color-raw-orange-500: #FE8C4A;  /* base — the primary spark / CTA fill */
  --color-raw-orange-hover: #F0792F;

  /* semantic aliases */
  --color-accent: #B85C1C;          /* eyebrows, links, checks, wordmark "Magnet" */
  --color-accent-deep: #9C4E16;     /* active nav, hero claim, link hover */
  --color-cta: #FE8C4A;             /* primary button fill */
  --color-on-cta: #16212E;          /* dark ink text on the orange fill */
  --color-cta-hover: #F0792F;
  --color-accent-on-dark: #FFAD60;  /* accent on dark sections */
  --color-focus-ring: #B85C1C;      /* visible focus halo */
  --color-surface-tint: #FFF1E6;    /* warm orange wash (was blue wash) */

  /* Material 3 colour-role layer */
  --md-sys-color-primary: #FE8C4A;
  --md-sys-color-on-primary: #16212E;
  --md-sys-color-primary-container: #FFE2CB;   /* light orange tonal fill */
  --md-sys-color-on-primary-container: #4A2400;/* deep brown-orange text (AA) */
  --md-sys-color-secondary: #B85C1C;
  --md-sys-color-on-secondary: #FFFFFF;
  --md-sys-color-secondary-container: #FFE2CB;
  --md-sys-color-on-secondary-container: #4A2400;
  --md-sys-color-inverse-primary: #FFAD60;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; }

/* ---- content well ---- */
.wrap-x { max-width: var(--wrap-max); margin: 0 auto; padding-inline: clamp(1.25rem, 4vw, 2.875rem); }

/* ---- accessibility helpers ---- */
.sr-only-x { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link {
  position: fixed; top: 8px; left: 8px; z-index: 1000;
  transform: translateY(-150%);
  background: var(--color-cta); color: var(--color-on-cta);
  font-family: var(--font-mono); font-size: var(--text-label); text-transform: uppercase;
  letter-spacing: var(--text-label-tracking); text-decoration: none;
  padding: 12px 18px; border-radius: var(--radius-pill);
  transition: transform var(--duration-base) var(--ease-standard);
}
.skip-link:focus { transform: translateY(0); box-shadow: var(--shadow-focus); }

/* visible focus everywhere (keyboard) */
a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-sm);
}

/* ---- reveal on scroll ----
   Resting state is VISIBLE. The entrance is a one-shot animation applied on enter
   (no fill-mode) so that if the animation clock is paused/unsupported the element
   simply stays visible. Set via inline style so React re-renders don't strip it. */
@keyframes lm-rise { from { transform: translateY(12px); } to { transform: none; } }
.reveal { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ---- responsive utility (mobile-first; desktop ≥768) ---- */
.show-mobile { display: flex !important; }
.hide-mobile { display: none !important; }

/* ---- shared grids ---- */
.hero-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-7); align-items: center; }
.hero-visual { order: -1; }
.founder-card { display: grid; grid-template-columns: 1fr; gap: var(--space-6); align-items: center; }
.steps-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-7); }
.prices-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-5); }
.trio-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-5); }
.footer-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-7); }
.contact-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-7); align-items: start; }
.detail-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-5); }

@media (min-width: 480px) {
  .prices-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 640px) {
  .founder-card { grid-template-columns: auto 1fr; gap: var(--space-7); }
  .footer-grid { grid-template-columns: 1.5fr 1fr 1fr; gap: var(--space-6); }
}
@media (min-width: 768px) {
  .steps-grid { grid-template-columns: repeat(3, 1fr); }
  .prices-grid { grid-template-columns: repeat(3, 1fr); align-items: start; }
  .trio-grid { grid-template-columns: repeat(3, 1fr); }
  .contact-grid { grid-template-columns: 0.9fr 1.1fr; gap: var(--space-8); }
  .show-mobile { display: none !important; }
  .hide-mobile { display: flex !important; }
}
@media (min-width: 880px) {
  .hero-grid { grid-template-columns: 1.08fr 0.92fr; }
  .hero-visual { order: 0; }
}

/* ---- WhatsApp FAB (mobile, appears after hero) ---- */
.wa-fab {
  position: fixed; right: 18px; bottom: 18px; z-index: 150;
  width: 56px; height: 56px; border-radius: var(--radius-pill);
  background: var(--color-whatsapp); color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-lg); text-decoration: none;
  opacity: 0; transform: translateY(12px) scale(0.9); pointer-events: none;
  transition: opacity var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard);
}
.wa-fab.is-shown { opacity: 1; transform: none; pointer-events: auto; }
@media (min-width: 768px) { .wa-fab { display: none; } }

/* ---- generic prose for legal page ---- */
.prose h2 { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 600; color: var(--color-fg); letter-spacing: var(--text-xl-tracking); margin: var(--space-7) 0 var(--space-3); }
.prose p { font-family: var(--font-body); font-size: var(--text-base); line-height: var(--text-base-lh); color: var(--color-fg-muted); max-width: 64ch; margin: 0; }

/* ---- breadcrumb / page hero ---- */
.page-hero { padding: var(--space-8) 0 var(--space-6); }

/* ---- list reset ---- */
ul.clean { list-style: none; margin: 0; padding: 0; }

/* ====================================================================
   Material Web — premium M3 ripple (matches material-components/material-web)
   Press ripple: soft-edge radial gradient, grows from the pointer to centre
   over 450ms (standard easing), fades out over ~375ms. Hover state layer 8%.
   ==================================================================== */
.lm-ripple { position: relative; overflow: hidden; -webkit-tap-highlight-color: transparent; }
.lm-ripple-ink {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(closest-side, currentColor max(calc(100% - 70px), 65%), transparent 100%);
  opacity: 0;
  will-change: transform, opacity;
}
@media (forced-colors: active) { .lm-ripple-ink { display: none; } }
@media (prefers-reduced-motion: reduce) { .lm-ripple-ink { display: none; } }

/* ====================================================================
   Material Web — premium M3 filled text field (floating label)
   ==================================================================== */
.m3field { display: flex; flex-direction: column; gap: var(--space-2); }
.m3field-box {
  position: relative; display: block; min-height: 56px; cursor: text;
  border-radius: var(--radius-xs) var(--radius-xs) 0 0;
  transition: box-shadow var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard);
  overflow: hidden;
}
.m3field-state { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity var(--duration-fast) var(--ease-standard); }
.m3field-label {
  position: absolute; left: 16px; pointer-events: none; transform-origin: left top;
  transition: color 180ms cubic-bezier(0.2,0,0,1);
  line-height: 1.15; white-space: nowrap; max-width: calc(100% - 32px); overflow: hidden; text-overflow: ellipsis;
}
.m3field-input {
  position: relative; z-index: 1; width: 100%; box-sizing: border-box;
  border: none; outline: none; background: transparent;
  font-family: var(--font-body); font-size: var(--text-base); line-height: 1.3;
  padding: 25px 16px 7px; min-height: 56px; -webkit-appearance: none; appearance: none;
}
.m3field-input::placeholder { color: var(--color-fg-muted); opacity: 0; transition: opacity 120ms linear; }
.m3field-box.is-float .m3field-input::placeholder { opacity: 1; }


/* ---- /brief: entrevista de projeto (wizard) ---- */
.brief-card {
  background: var(--md-sys-color-surface-container-low);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  box-shadow: var(--shadow-sm);
}
.brief-input {
  width: 100%; box-sizing: border-box; border: none; outline: none;
  background: var(--md-sys-color-surface-container-highest);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  box-shadow: inset 0 -1px 0 0 var(--md-sys-color-outline);
  font-family: var(--font-body); font-size: var(--text-base); color: var(--color-fg);
  padding: 14px 16px; min-height: 52px;
  transition: box-shadow var(--duration-fast) var(--ease-standard);
  -webkit-appearance: none; appearance: none;
}
.brief-input:focus { box-shadow: inset 0 -2px 0 0 var(--color-cta); }
.brief-input.is-error { background: var(--color-error-bg); box-shadow: inset 0 -2px 0 0 var(--color-error); }
.brief-textarea { resize: vertical; min-height: 110px; line-height: 1.5; }
.brief-opt {
  display: flex; align-items: flex-start; gap: 12px; cursor: pointer;
  padding: 12px 16px; border-radius: var(--radius-md);
  border: 1px solid var(--md-sys-color-outline-variant, var(--md-sys-color-outline));
  font-family: var(--font-body); font-size: var(--text-sm); line-height: var(--text-sm-lh);
  color: var(--color-fg); background: transparent;
  transition: border-color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard);
}
.brief-opt:hover { background: var(--md-sys-color-surface-container); }
.brief-opt.is-on { border-color: var(--color-accent); background: var(--md-sys-color-surface-container); }
.brief-opt input { accent-color: var(--color-cta); margin: 2px 0 0; flex-shrink: 0; }
.brief-progress {
  height: 4px; border-radius: var(--radius-pill);
  background: var(--md-sys-color-surface-container-highest); overflow: hidden;
}
.brief-progress span {
  display: block; height: 100%; border-radius: var(--radius-pill);
  background: var(--color-accent);
  transition: width var(--duration-base) var(--ease-standard);
}
.brief-back {
  border: none; background: transparent; cursor: pointer; padding: 10px 12px;
  font-family: var(--font-mono); font-size: var(--text-label); font-weight: 500;
  letter-spacing: var(--text-label-tracking); text-transform: uppercase;
  color: var(--color-fg-muted); border-radius: var(--radius-pill);
}
.brief-back:hover { color: var(--color-fg); }