@layer reset, base, layout, components, utilities;

@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body,
  h1,
  h2,
  h3,
  h4,
  p,
  figure,
  blockquote,
  dl,
  dd {
    margin: 0;
  }

  ul[class],
  ol[class] {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  img,
  picture,
  svg {
    display: block;
    max-width: 100%;
  }

  img {
    height: auto;
  }

  input,
  button,
  textarea,
  select {
    font: inherit;
    color: inherit;
  }

  button {
    background: none;
    border: 0;
    cursor: pointer;
  }

  a {
    color: inherit;
  }
}

@layer base {
  :root {
    --stage: hsl(145 24% 9.8%);
    --stage-deep: hsl(145 28% 6.5%);
    --panel: hsl(142.5 22.9% 13.7%);
    --panel-hi: hsl(142.5 22.9% 17.5%);
    --moss: hsl(124.3 12.2% 54.9%);
    --moss-dim: hsl(124.3 12.2% 40%);
    --brass: hsl(37.8 51.4% 48.4%);
    --brass-hi: hsl(37.8 58% 58%);
    --text: hsl(85.7 18.9% 92.7%);
    --chalk: hsl(84 18.5% 94.7%);
    --chalk-text: hsl(145 28% 12%);
    --line: hsl(142.5 20% 22%);

    --font-display: 'Space Grotesk', 'Arial Narrow', sans-serif;
    --font-text: 'Inter', 'Segoe UI', sans-serif;

    --container: 76rem;
    --gap-xs: 0.5rem;
    --gap-sm: 1rem;
    --gap-md: 1.75rem;
    --gap-lg: 3rem;
    --gap-xl: 5.5rem;

    --radius-sm: 0.4rem;
    --radius-md: 0.9rem;
    --radius-lg: 1.6rem;

    --ease: cubic-bezier(0.22, 0.7, 0.28, 1);
    --z-header: 10;
    --z-notice: 15;
    --z-menu: 20;
  }

  @font-face {
    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/space-grotesk-500.woff2') format('woff2');
  }

  @font-face {
    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/space-grotesk-700.woff2') format('woff2');
  }

  @font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/inter-400.woff2') format('woff2');
  }

  @font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: optional;
    src: url('../fonts/inter-600.woff2') format('woff2');
  }

  html {
    scroll-behavior: smooth;
  }

  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }
  }

  body {
    background: var(--stage);
    color: var(--text);
    font-family: var(--font-text);
    font-size: 1rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
  }

  h1,
  h2,
  h3,
  h4 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.01em;
  }

  h1 {
    font-size: clamp(2.4rem, 1.6rem + 3.6vw, 4.4rem);
  }

  h2 {
    font-size: clamp(1.8rem, 1.4rem + 1.8vw, 2.8rem);
  }

  h3 {
    font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.6rem);
    font-weight: 500;
  }

  p {
    max-width: 62ch;
  }

  a {
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.2em;
  }

  :focus-visible {
    outline: 2px solid var(--brass-hi);
    outline-offset: 3px;
  }

  ::selection {
    background: var(--brass);
    color: var(--stage-deep);
  }

  ::-moz-selection {
    background: var(--brass);
    color: var(--stage-deep);
  }
}

@layer layout {
  .container {
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: clamp(1.1rem, 4vw, 2.5rem);
  }

  main {
    display: block;
  }

  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }

  .skip {
    position: fixed;
    top: -120px;
    left: 1rem;
    z-index: 30;
    padding: 0.75rem 1.25rem;
    background: var(--brass);
    color: var(--stage-deep);
    border-radius: var(--radius-sm);
    font-weight: 600;
    transition: top 0.2s var(--ease);
  }

  .skip:focus {
    top: 1rem;
  }
}

@layer components {
  .topbar {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    background: hsl(145 28% 8% / 0.97);
    border-bottom: 1px solid var(--line);
    backdrop-filter: none;
  }

  .topbar__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-md);
    padding-block: 0.9rem;
  }

  .mark {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: -0.01em;
  }

  .mark span {
    color: var(--brass);
  }

  .topbar__nav {
    display: none;
  }

  .topbar__list {
    display: flex;
    align-items: center;
    gap: var(--gap-md);
  }

  .topbar__list a {
    font-size: 0.94rem;
    color: var(--moss);
    text-decoration: none;
    transition: color 0.18s var(--ease);
  }

  .topbar__list a:hover,
  .topbar__list a[aria-current='page'] {
    color: var(--text);
  }

  .topbar__cta {
    display: none;
  }

  .burger {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--line);
  }

  .burger__box {
    position: relative;
    width: 20px;
    height: 14px;
  }

  .burger__box span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--text);
    border-radius: 2px;
    transition: transform 0.25s var(--ease), opacity 0.2s var(--ease), top 0.25s var(--ease);
  }

  .burger__box span:nth-child(1) {
    top: 0;
  }

  .burger__box span:nth-child(2) {
    top: 6px;
  }

  .burger__box span:nth-child(3) {
    top: 12px;
  }

  .burger[aria-expanded='true'] .burger__box span:nth-child(1) {
    top: 6px;
    transform: rotate(45deg);
  }

  .burger[aria-expanded='true'] .burger__box span:nth-child(2) {
    opacity: 0;
  }

  .burger[aria-expanded='true'] .burger__box span:nth-child(3) {
    top: 6px;
    transform: rotate(-45deg);
  }

  .panel-movil {
    position: fixed;
    inset: 0;
    z-index: var(--z-menu);
    background: var(--stage-deep);
    display: none;
    overflow-y: auto;
  }

  .panel-movil.is-open {
    display: block;
  }

  .panel-movil__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-block: 0.9rem;
    border-bottom: 1px solid var(--line);
  }

  .panel-movil__close {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--line);
    font-size: 1.4rem;
    line-height: 1;
  }

  .panel-movil__list {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-block: 1rem;
  }

  .panel-movil__list a {
    display: block;
    padding-block: 1rem;
    border-bottom: 1px solid var(--line);
    font-family: var(--font-display);
    font-size: 1.5rem;
    text-decoration: none;
    color: var(--text);
  }

  .panel-movil__foot {
    padding-block: 1.5rem 2.5rem;
    color: var(--moss);
    font-size: 0.92rem;
  }

  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.95rem 1.7rem;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 0.98rem;
    text-decoration: none;
    border: 1px solid transparent;
    transition: transform 0.18s var(--ease), background 0.18s var(--ease), border-color 0.18s var(--ease);
    min-height: 48px;
  }

  .btn:active {
    transform: translateY(1px);
  }

  .btn--brass {
    background: var(--brass);
    color: var(--stage-deep);
  }

  .btn--brass:hover {
    background: var(--brass-hi);
  }

  .btn--ghost {
    background: transparent;
    color: var(--text);
    border-color: var(--line);
  }

  .btn--ghost:hover {
    border-color: var(--moss);
  }

  .data-notice {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-notice);
    background: var(--stage-deep);
    border-top: 1px solid var(--line);
    padding: 1rem clamp(1.1rem, 4vw, 2.5rem);
    display: none;
  }

  .data-notice.is-visible {
    display: block;
  }

  .data-notice__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    max-width: var(--container);
    margin-inline: auto;
  }

  .data-notice p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--moss);
    max-width: 48ch;
  }

  .data-notice__actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
  }
}

@layer utilities {
  @media (min-width: 62.5rem) {
    .topbar__nav {
      display: block;
    }

    .topbar__cta {
      display: inline-flex;
    }

    .burger {
      display: none;
    }

    .panel-movil {
      display: none;
    }
  }
}