/* ============================================================
   ALTAS CUMBRES 0.7 — DESIGN SYSTEM
   Tokens, base, typography, accessibility and shared primitives.
   The four legacy stylesheets remain in /assets/css as reference,
   but are no longer enqueued or part of the active cascade.
   ============================================================ */

:root {
  color-scheme: light;

  /* Brand and semantic colour */
  --ac-navy-950: #051321;
  --ac-navy-900: #071b30;
  --ac-navy-850: #0a2743;
  --ac-navy-800: #103858;
  --ac-blue-600: #1462c0;
  --ac-blue-700: #104d98;
  --ac-cyan-400: #35c1ee;
  --ac-cyan-500: #1baddd;
  --ac-orange-500: #f47c20;
  --ac-orange-400: #ff963e;
  --ac-white: #ffffff;
  --ac-snow: #f7fbff;
  --ac-mist: #eaf7ff;
  --ac-sky: #dceff8;
  --ac-aqua: #ccebe7;
  --ac-warm: #fff1df;
  --ac-teal: #066a7a;
  --ac-photo-plate: rgba(255, 255, 255, 0.97);
  --ac-on-blue: #e7f4ff;
  --ac-on-deep: #e7f4ff;
  --ac-muted-deep: #bdcfdb;
  --ac-line-deep: #2e506b;
  /* Surface roles: editorial contrast is not a global dark theme. */
  --ac-surface-info: var(--ac-sky);
  --ac-surface-discover: var(--ac-aqua);
  --ac-surface-trust: var(--ac-navy-850);
  --ac-surface-convert: var(--ac-warm);
  --ac-surface-footer: var(--ac-navy-900);
  --ac-orange-ink: #241307;
  --ac-line: #d8e4ef;
  --ac-line-strong: #bfd0df;
  --ac-ink: #16364c;
  --ac-muted: #466779;
  --ac-muted-dark: #a9bfd2;
  --ac-error: #bd2f3b;
  --ac-success: #167d67;

  /* Backwards-compatible aliases while PHP/JS markup migrates */
  --noche: var(--ac-navy-950);
  --noche-2: var(--ac-navy-900);
  --noche-3: var(--ac-navy-800);
  --azul: var(--ac-blue-600);
  --cian: var(--ac-cyan-400);
  --naranja: var(--ac-orange-500);
  --naranja-h: var(--ac-orange-400);
  --nieve: var(--ac-white);
  --hueso: var(--ac-snow);
  --hueso-2: var(--ac-line);
  --bruma: var(--ac-mist);
  --bruma-2: var(--ac-line);
  --tinta: var(--ac-ink);
  --gris: var(--ac-muted);
  --gris-cl: var(--ac-muted-dark);

  /* Typography */
  --display: "Archivo", system-ui, -apple-system, sans-serif;
  --texto: "Instrument Sans", system-ui, -apple-system, sans-serif;
  --dato: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
  --ac-text-xs: 0.75rem;
  --ac-text-sm: 0.875rem;
  --ac-text-base: clamp(1rem, 0.96rem + 0.16vw, 1.0625rem);
  --ac-text-lead: clamp(1.0625rem, 0.98rem + 0.34vw, 1.25rem);
  --ac-h3: clamp(1.125rem, 1.03rem + 0.34vw, 1.375rem);
  --ac-h2: clamp(2rem, 1.4rem + 2.4vw, 3.75rem);
  --ac-h1: clamp(2.65rem, 1.7rem + 4vw, 5.5rem);

  /* Layout and spacing */
  --ac-max: 80rem;
  --ac-reading: 45rem;
  --ac-gutter: clamp(1rem, 3vw, 2.75rem);
  --ac-section: clamp(4rem, 6.5vw, 6.5rem);
  --ac-section-tight: clamp(1.75rem, 3vw, 3rem);
  --ac-space-1: 0.25rem;
  --ac-space-2: 0.5rem;
  --ac-space-3: 0.75rem;
  --ac-space-4: 1rem;
  --ac-space-5: 1.25rem;
  --ac-space-6: 1.5rem;
  --ac-space-8: 2rem;
  --ac-space-10: 2.5rem;
  --ac-space-12: 3rem;
  --ac-space-16: 4rem;
  --ac-space-20: 5rem;

  /* Shape, border, elevation and motion */
  --ac-radius-sm: 0.625rem;
  --ac-radius-md: 1rem;
  --ac-radius-lg: 1.5rem;
  --ac-radius-xl: 2rem;
  --ac-radius-pill: 999px;
  --r-s: var(--ac-radius-sm);
  --r-m: var(--ac-radius-md);
  --r-l: var(--ac-radius-lg);
  --ancho: var(--ac-max);
  --sec: var(--ac-section);
  --ac-shadow-sm: 0 8px 26px rgba(5, 25, 45, 0.09);
  --ac-shadow-md: 0 20px 55px rgba(5, 25, 45, 0.15);
  --ac-shadow-dark: 0 26px 70px rgba(1, 9, 18, 0.34);
  --sombra-s: var(--ac-shadow-sm);
  --sombra: var(--ac-shadow-md);
  --ac-ease: cubic-bezier(0.2, 0.72, 0.25, 1);
  --ease: var(--ac-ease);
  --ac-fast: 160ms;
  --ac-normal: 260ms;
}

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

html {
  scroll-behavior: smooth;
  background: var(--ac-snow);
}

body {
  margin: 0;
  background: var(--ac-snow);
  color: var(--ac-ink);
  font-family: var(--texto);
  font-size: var(--ac-text-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

main {
  min-height: 55vh;
}

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

/* Preserve HTML intrinsic dimensions for layout reservation, but let resized
   CMS images keep their ratio. Intentional cover frames override height below. */
img {
  height: auto;
}

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

button,
[role="button"] {
  cursor: pointer;
}

a {
  color: inherit;
  text-underline-offset: 0.18em;
}

p,
h1,
h2,
h3,
h4,
dl,
dd {
  margin-top: 0;
}

/* CMS copy must wrap rather than disappear behind a global overflow mask. */
p, h1, h2, h3, h4, dd, a, label, summary {
  overflow-wrap: anywhere;
}

button, input, select, textarea {
  max-width: 100%;
}

section[id] {
  scroll-margin-top: 6rem;
}

::selection {
  background: rgba(53, 193, 238, 0.3);
  color: var(--ac-ink);
}

:focus-visible {
  outline: 3px solid var(--ac-blue-600);
  outline-offset: 3px;
  border-radius: 0.25rem;
}

.wrap {
  width: min(calc(100% - (2 * var(--ac-gutter))), var(--ac-max));
  margin-inline: auto;
}

.skip,
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}

.skip:focus,
.screen-reader-text:focus {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 500;
  width: auto;
  height: auto;
  padding: 0.75rem 1rem;
  margin: 0;
  overflow: visible;
  clip-path: none;
  border-radius: var(--ac-radius-sm);
  background: var(--ac-white);
  color: var(--ac-ink);
  box-shadow: var(--ac-shadow-md);
  text-decoration: none;
}

/* Type roles */
.h2,
.post-hero h1,
.dhero__title,
.hero__h1 {
  font-family: var(--display);
  font-variation-settings: "wdth" 108, "wght" 680;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.h2 {
  max-width: 17ch;
  margin: 0.16em 0 0.38em;
  font-size: var(--ac-h2);
  line-height: 1.02;
}

.eyebrow,
.post-hero__meta,
.card__co,
.post__meta,
.pack__len,
.merch__cat {
  margin: 0 0 var(--ac-space-3);
  color: var(--ac-blue-600);
  font-family: var(--dato);
  font-size: var(--ac-text-xs);
  font-weight: 500;
  letter-spacing: 0.13em;
  line-height: 1.4;
  text-transform: uppercase;
}

.eyebrow--cyan,
.section--dark .eyebrow,
.finder .eyebrow,
.trust .eyebrow {
  color: var(--ac-teal);
}

.sub {
  max-width: 60ch;
  margin: 0;
  color: var(--ac-muted);
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  color: var(--ac-blue-600);
  font-size: 0.94rem;
  font-weight: 650;
  text-decoration: none;
  transition: color var(--ac-fast), transform var(--ac-fast);
}

.link-arrow:hover {
  color: var(--ac-blue-700);
  transform: translateX(0.2rem);
}

.section--dark .link-arrow,
.finder .link-arrow,
.trust .link-arrow {
  color: var(--ac-teal);
}

/* Buttons */
.btn {
  display: inline-flex;
  min-height: 3rem;
  align-items: center;
  justify-content: center;
  gap: var(--ac-space-2);
  padding: 0.8rem 1.4rem;
  border: 1px solid transparent;
  border-radius: var(--ac-radius-pill);
  font-weight: 700;
  font-size: 0.96rem;
  letter-spacing: 0.005em;
  line-height: 1.2;
  text-decoration: none;
  transition: transform var(--ac-fast) var(--ac-ease), background var(--ac-fast),
    border-color var(--ac-fast), box-shadow var(--ac-fast);
}

.btn:hover {
  transform: translateY(-2px);
}

.btn:active {
  transform: translateY(0);
}

.btn--orange {
  background: var(--ac-orange-500);
  color: var(--ac-orange-ink);
  box-shadow: 0 10px 28px rgba(244, 124, 32, 0.27);
}

.btn--orange:hover {
  background: var(--ac-orange-400);
  box-shadow: 0 14px 32px rgba(244, 124, 32, 0.34);
}

.btn--ghost {
  border-color: var(--ac-blue-600);
  background: var(--ac-white);
  color: var(--ac-blue-600);
}

.btn--ghost:hover {
  border-color: var(--ac-blue-700);
  background: var(--ac-mist);
}

.btn--sm {
  min-height: 2.75rem;
  padding: 0.65rem 1.05rem;
  font-size: 0.88rem;
}

.btn--full {
  width: 100%;
}

/* Icon family */
.ac-icon {
  width: 1.5rem;
  height: 1.5rem;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Section surfaces */
.section {
  position: relative;
  padding-block: var(--ac-section);
}

.section--light {
  background: var(--ac-snow);
  color: var(--ac-ink);
}

.section--dark {
  /* Legacy editorial value "dark" retains its CMS contract as aqua contrast. */
  background: var(--ac-aqua);
  color: var(--ac-ink);
}

.section--tight {
  padding-top: var(--ac-section-tight);
}

.section__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--ac-space-8);
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
}

.section__head > div {
  min-width: 0;
}

.section__head .h2 {
  margin-bottom: 0;
}

.section__note {
  max-width: 36ch;
  margin: 0;
  color: var(--ac-muted);
  font-size: 0.95rem;
}

.section__note--light {
  color: var(--ac-muted);
}

/* Small entrance motion */
.reveal {
  opacity: 1;
  transform: none;
}

.reveal.is-pending {
  opacity: 0;
  transform: translateY(1.25rem);
  transition: opacity 560ms var(--ac-ease), transform 560ms var(--ac-ease);
}

.reveal.is-in {
  opacity: 1;
  transform: none;
}

@media (max-width: 48rem) {
  .section__head {
    display: block;
  }

  .section__note {
    margin-top: var(--ac-space-5);
  }

  .btn {
    min-height: 2.875rem;
  }
}

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

  .reveal,
  .reveal.is-in,
  .reveal.is-pending {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .btn,
  .link-arrow {
    transition: none;
  }
}