/* MybrAIn — design system, 2026 redesign.
   Loaded via <link> in includes/page-head.php. No build, no @import. */

/* Breakpoints — 320px floor + 4 explicit max-width tokens used throughout.
     base   320px   smallest supported phone
     sm     480px   large phones                  (max-width: 479px)
     md     720px   tablet portrait              (max-width: 719px)
     lg     900px   tablet landscape / hamburger (max-width: 899px)
     xl    1100px   desktop                      (max-width: 1099px)
   The matching JS threshold (js/main.js MOBILE_MAX) is 900 — same as `lg`. */

:root {
  /* Brand navy #1c3869 */
  --brand:        oklch(28% 0.075 260);
  --brand-deep:   oklch(20% 0.060 260);
  --brand-faint:  oklch(94% 0.020 260);

  /* Paper */
  --paper:        oklch(98.5% 0.005 260);
  --paper-rule:   oklch(91%   0.010 260);
  --paper-deep:   oklch(95%   0.010 260);

  /* Ink */
  --ink:          var(--brand);
  --ink-muted:    oklch(42% 0.030 260);
  --ink-faint:    oklch(62% 0.018 260);

  /* Deep surface */
  --ink-deep:     var(--brand-deep);
  --paper-on-ink: oklch(96% 0.008 260);
  --rule-on-ink:  oklch(35% 0.040 260);

  /* Functional accents */
  --data:         oklch(60% 0.13 250);
  --data-faint:   oklch(94% 0.030 250);
  /* Clauger red — exact spec #d9131a */
  --ember:        #d9131a;
  --ember-deep:   oklch(45% 0.20 28);
  --ember-faint:  oklch(94% 0.030 28);

  /* Status (form feedback only) */
  --ok:           oklch(58% 0.13 150);
  --warn:         oklch(70% 0.14 75);
  --err:          var(--ember);

  /* Type */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --text-display: clamp(2.25rem, 4.5vw + 1rem, 5rem);
  --text-h2:      clamp(1.75rem, 2vw + 1rem, 2.5rem);
  --text-h3:      clamp(1.25rem, 1vw + 1rem, 1.5rem);
  --text-body:    1rem;
  --text-meta:    0.8125rem;
  --text-tiny:    0.75rem;

  --pad-x: clamp(1rem, 4vw, 3rem);
  --section-y: clamp(4rem, 7vw, 6rem);
  --rule: 1px solid var(--paper-rule);
  --rule-dark: 1px solid var(--rule-on-ink);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  --nav-h: 64px;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img, svg, video { display: block; max-width: 100%; }

body {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
::selection { background: var(--brand-faint); }

main { display: block; }

/* ============== Accessibility utilities ============== */

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

.skip-link {
  position: absolute;
  top: 8px; left: 8px;
  transform: translateY(-200%);
  background: var(--brand); color: var(--paper);
  padding: 0.5rem 1rem; border-radius: 2px;
  z-index: 2000;
  font-family: var(--font-mono);
  font-size: var(--text-tiny);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: transform .15s var(--ease);
}
.skip-link:focus { transform: translateY(0); outline: 2px solid var(--ember); outline-offset: 2px; }

:where(a, button, [role="button"], input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--ember);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto !important; }
}

/* ============== Nav ============== */

.nav {
  position: sticky; top: 0; z-index: 80;
  background: var(--paper);
  border-bottom: var(--rule);
}
.nav-content {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 0 var(--pad-x);
  min-height: var(--nav-h);
  max-width: none;
}
.nav-logo {
  display: inline-flex; align-items: center;
  order: 1; flex: 0 0 auto;
}
.nav-logo img { height: 32px; width: auto; }

.nav-logo-clauger {
  display: inline-flex; align-items: center;
  padding-left: 1.25rem;
  color: var(--ink-muted);
  order: 3; flex: 0 0 auto;
}
.nav-logo-clauger img { height: 18px; width: auto; opacity: 0.85; }

.hamburger-menu {
  display: none;
  background: transparent; border: 0;
  width: 44px; height: 44px;
  margin: -6px;
  padding: 0; cursor: pointer;
  flex-direction: column; justify-content: center; align-items: center; gap: 4px;
  order: 4; flex: 0 0 auto;
  position: relative; z-index: 70;
}
.hamburger-menu span {
  display: block; width: 20px; height: 1.5px;
  background: var(--ink);
  transition: transform .22s var(--ease), opacity .22s var(--ease);
}
.hamburger-menu.active span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.hamburger-menu.active span:nth-child(2) { opacity: 0; }
.hamburger-menu.active span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

.nav-links {
  display: flex; align-items: center;
  gap: 1.75rem; justify-content: center;
  font-size: 0.95rem;
  order: 2; flex: 1 1 0;
}
.nav-links > a,
.dropdown-toggle {
  font: inherit;
  background: transparent; border: 0; cursor: pointer;
  color: var(--ink-muted);
  padding: 0.5rem 0;
  display: inline-flex; align-items: center; gap: 0.35rem;
  transition: color .2s var(--ease), box-shadow .2s var(--ease);
}
.nav-links > a:hover, .dropdown-toggle:hover { color: var(--brand); }
.nav-links > a.active,
.nav-links > a[aria-current="page"],
.dropdown-toggle[aria-current="true"] {
  color: var(--brand);
  box-shadow: 0 1px 0 0 var(--brand);
}
.dropdown { position: relative; }
.dropdown-caret { font-size: 0.8em; line-height: 1; transition: transform .2s var(--ease); }
.dropdown.active .dropdown-caret { transform: rotate(-180deg); }
.dropdown-menu {
  position: absolute; top: calc(100% + 0.5rem); left: 50%; transform: translateX(-50%);
  background: var(--paper);
  border: var(--rule);
  list-style: none; margin: 0; padding: 0.5rem 0;
  min-width: 16rem;
  opacity: 0; visibility: hidden;
  transition: opacity .15s var(--ease), visibility .15s var(--ease);
  z-index: 60;
}
.dropdown.active .dropdown-menu { opacity: 1; visibility: visible; }
.dropdown-menu a {
  display: block;
  padding: 0.55rem 1rem;
  color: var(--ink-muted);
  font-size: 0.9rem;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.dropdown-menu a:hover, .dropdown-menu a.active { background: var(--paper-deep); color: var(--brand); }

@media (max-width: 899px) {
  .nav-content { justify-content: space-between; gap: 0.75rem; }
  .nav-logo-clauger {
    padding-left: 0.75rem;
    margin-left: auto;
    order: 2;
  }
  .nav-logo-clauger img { height: 14px; opacity: 0.75; }
  .hamburger-menu { display: flex; order: 3; }

  /* Full-width drawer pinned beneath the topbar. Slides in from the left.
     Topbar stays fully visible and the X (active hamburger) closes it. */
  .nav-links {
    position: fixed;
    top: var(--nav-h); bottom: 0; left: 0; right: 0;
    width: 100%;
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    gap: 0;
    background: var(--paper);
    padding: 1.5rem var(--pad-x) 2rem;
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform .36s var(--ease), visibility 0s linear .36s;
    overflow-y: auto;
    z-index: 60;
    -webkit-overflow-scrolling: touch;
  }
  .nav-links.active {
    transform: translateX(0);
    visibility: visible;
    transition: transform .36s var(--ease), visibility 0s linear 0s;
  }
  .nav-links > a, .dropdown-toggle { padding: 1rem 0; width: 100%; font-size: 1.1rem; }
  .dropdown { width: 100%; }
  .dropdown-menu {
    position: static; transform: none;
    border: 0; padding: 0;
    opacity: 1; visibility: visible;
    display: none;
    margin-bottom: 0.5rem;
  }
  .dropdown.active .dropdown-menu { display: block; }
  .dropdown-menu a { padding-left: 1rem; }
}

/* Lock body scroll while the drawer is open. */
body.nav-open { overflow: hidden; }

/* ============== Hero (homepage) ============== */

.hero {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: clamp(1.5rem, 4vw, 4rem);
  padding: var(--section-y) var(--pad-x) clamp(1.5rem, 3vw, 2.5rem);
  align-items: end;
}
.hero__kicker {
  font-family: var(--font-mono);
  font-size: var(--text-tiny);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  display: inline-flex; align-items: center; gap: 0.6rem;
  margin: 0 0 1.5rem;
}
.hero__kicker::before {
  content: ""; width: 6px; height: 6px;
  background: var(--ink-faint); border-radius: 50%;
  display: inline-block;
}
.hero__title {
  font-size: var(--text-display);
  line-height: 1.02;
  letter-spacing: -0.025em;
  font-weight: 700;
  margin: 0 0 1.25rem;
  max-width: 18ch;
  color: var(--brand);
}
.hero__title .accent { color: var(--ember); font-style: normal; }
.hero__lede {
  font-size: 1.125rem; line-height: 1.55;
  color: var(--ink-muted);
  max-width: 50ch;
  margin: 0 0 2rem;
}
.hero__cta { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.hero__visual { display: flex; flex-direction: column; gap: 1rem; }

@media (max-width: 899px) { .hero { grid-template-columns: 1fr; align-items: start; } }

/* ============== Buttons ============== */

.btn, .cta-button, .cta-button-outline, .book-btn {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font: inherit; font-weight: 500;
  padding: 0.85rem 1.4rem;
  border-radius: 2px; border: 1px solid var(--brand);
  cursor: pointer; text-decoration: none;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.btn--primary, .cta-button, .book-btn { background: var(--brand); color: var(--paper); }
.btn--primary:hover, .cta-button:hover, .book-btn:hover { background: var(--ember-deep); border-color: var(--ember-deep); }
.btn--ghost, .cta-button-outline { background: transparent; color: var(--brand); }
.btn--ghost:hover, .cta-button-outline:hover { background: var(--brand); color: var(--paper); }
.btn .arrow { font-family: var(--font-mono); font-weight: 400; }

/* ============== Editorial figure ============== */

.figure {
  display: flex; flex-direction: column; gap: 0.6rem;
  margin: 0;
}
.figure img {
  width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover;
}
.figure figcaption {
  display: grid; grid-template-columns: auto 1fr;
  gap: 0.75rem; align-items: baseline;
  font-family: var(--font-mono); font-size: var(--text-tiny);
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-muted);
}
.figure figcaption .ref { color: var(--brand); }
.figure figcaption .desc {
  text-transform: none; letter-spacing: 0;
  font-family: var(--font-sans); font-size: var(--text-meta);
  color: var(--ink-muted);
}

/* ============== Hero spec card ============== */

.spec {
  border: var(--rule);
  background: var(--paper);
  padding: 1.25rem 1.5rem;
  font-family: var(--font-mono);
  font-size: var(--text-meta);
}
.spec__head {
  display: flex; justify-content: space-between; align-items: baseline;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-muted);
  font-size: var(--text-tiny);
  margin-bottom: 1rem;
}
.spec__head .live { color: var(--ember); display: inline-flex; align-items: center; gap: 0.4rem; }
.spec__head .live::before {
  content: ""; width: 6px; height: 6px; background: var(--ember); border-radius: 50%;
  animation: pulse 2.2s var(--ease) infinite;
}
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
.spec__row {
  display: grid; grid-template-columns: 1fr auto;
  align-items: baseline; gap: 1rem;
  padding: 0.35rem 0;
}
.spec__row .lbl { color: var(--ink-muted); font-family: var(--font-sans); font-size: var(--text-meta); }
.spec__row .val { color: var(--brand); font-feature-settings: "tnum"; font-weight: 500; }
.spec__row .val em { font-style: normal; color: var(--ink-muted); font-weight: 400; margin-left: 0.25rem; }

/* ============== Sections ============== */

.section {
  padding: var(--section-y) var(--pad-x);
}
.section + .section {
  padding-top: clamp(2.5rem, 4vw, 3.5rem);
}
.section:has(+ .section) {
  padding-bottom: clamp(3rem, 5vw, 4.5rem);
}
.section:has(> .three) {
  padding-bottom: clamp(1.75rem, 3vw, 2.5rem);
}
.section--invert {
  background: var(--ink-deep);
  color: var(--paper-on-ink);
}
.section--invert .section__num { color: oklch(70% 0.030 260); }
.section--invert .section__num strong { color: var(--paper-on-ink); }
.section--invert .section__title { color: var(--paper-on-ink); }

.section__head {
  display: grid; grid-template-columns: 4fr 8fr;
  gap: clamp(1rem, 4vw, 4rem);
  margin-bottom: 1.75rem;
  align-items: baseline;
}
.section__num {
  font-family: var(--font-mono);
  font-size: var(--text-tiny); letter-spacing: 0.12em;
  color: var(--ink-muted); text-transform: uppercase;
  display: flex; flex-direction: column; gap: 0.4rem;
}
.section__num strong {
  font-weight: 500; color: var(--brand);
  font-size: 1rem; letter-spacing: 0;
}
.section__title {
  font-size: var(--text-h2); margin: 0;
  line-height: 1.1; letter-spacing: -0.02em;
  max-width: 24ch; color: var(--brand);
}
.section__title .accent { color: var(--ember); font-style: normal; }
@media (max-width: 719px) { .section__head { grid-template-columns: 1fr; gap: 1rem; } }

/* ============== Three principles ============== */

.three {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 4vw, 4rem);
  padding-top: 2rem;
  border-top: var(--rule);
}
.three__item { padding: 0; }
.three__item h3 {
  font-size: var(--text-h3); margin: 0 0 0.75rem;
  letter-spacing: -0.01em; font-weight: 600; color: var(--brand);
}
.three__item p { color: var(--ink-muted); margin: 0 0 1rem; line-height: 1.55; max-width: 38ch; }
.three__item ul {
  margin: 0; padding: 0; list-style: none;
  font-family: var(--font-mono); font-size: var(--text-meta);
  display: grid; gap: 0.4rem;
}
.three__item li {
  display: grid;
  grid-template-columns: 1rem 1fr;
  gap: 0.6rem;
  align-items: baseline;
  color: var(--ink-muted);
}
.three__item li::before {
  content: "+";
  color: var(--ink-faint);
  font-weight: 500;
}
@media (max-width: 899px) {
  .three { grid-template-columns: 1fr; gap: 1.75rem; }
}

/* ============== Modules list ============== */

.modules {
  display: grid; grid-template-columns: 1fr;
  margin-inline: calc(-1 * var(--pad-x));
  border-top: var(--rule);
}
.module-row {
  display: grid;
  grid-template-columns: 4.5rem 1fr 5rem;
  gap: 1.5rem;
  padding: 1.75rem var(--pad-x);
  align-items: baseline;
  border-bottom: var(--rule);
  transition: background .2s var(--ease);
}
.module-row:hover { background: var(--paper-deep); }
.module-row:hover .module-row__cta { color: var(--ember-deep); border-color: var(--ember-deep); }
.module-row__num {
  font-family: var(--font-mono); color: var(--ink-faint);
  font-size: var(--text-meta); letter-spacing: 0.04em;
}
.module-row__body h3 {
  font-size: 1.45rem; margin: 0 0 0.35rem;
  letter-spacing: -0.015em; font-weight: 500; color: var(--brand);
}
.module-row__body p {
  margin: 0; color: var(--ink-muted);
  max-width: 56ch; font-size: 0.95rem;
}
.module-row__tag {
  font-family: var(--font-mono); font-size: var(--text-tiny);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 0.5rem;
}
.module-row__tag span { color: var(--ink-faint); }
.module-row__cta {
  font-family: var(--font-mono); font-size: var(--text-meta);
  color: var(--brand); border-bottom: 1px solid var(--brand);
  padding-bottom: 2px; justify-self: end;
  white-space: nowrap;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
@media (max-width: 1099px) { .module-row { grid-template-columns: 3.5rem 1fr 5rem; } }
@media (max-width: 719px) {
  .module-row { grid-template-columns: 1fr; gap: 0.5rem; padding: 1.25rem var(--pad-x); }
  .module-row__num { font-size: var(--text-tiny); }
  .module-row__cta { justify-self: start; }
}

/* ============== Caesura (full-bleed photographic break) ============== */

.caesura {
  margin: 0;
  background: var(--ink-deep);
}
.caesura img {
  width: 100%; aspect-ratio: 21 / 9;
  object-fit: cover; display: block;
}
.caesura figcaption {
  display: grid; grid-template-columns: auto 1fr auto;
  gap: 1rem; align-items: baseline;
  padding: 1.25rem var(--pad-x) 0.5rem;
  background: var(--ink-deep);
  font-family: var(--font-mono); font-size: var(--text-tiny);
  letter-spacing: 0.06em; text-transform: uppercase;
  color: oklch(72% 0.020 260);
}
.caesura figcaption .ref { color: var(--paper-on-ink); }
.caesura figcaption .desc {
  text-transform: none; letter-spacing: 0;
  font-family: var(--font-sans); font-size: var(--text-meta);
  color: oklch(78% 0.020 260);
}
@media (max-width: 719px) {
  .caesura img { aspect-ratio: 4 / 3; }
  .caesura figcaption { grid-template-columns: auto 1fr; }
  .caesura figcaption :nth-child(3) { display: none; }
}

/* ============== Plates appendix ============== */

.plates {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2.5vw, 2rem);
  border-top: var(--rule);
  padding-top: 1.5rem;
}
.plate { display: flex; flex-direction: column; gap: 0.6rem; margin: 0; }
.plate img {
  width: 100%; aspect-ratio: 4 / 3;
  object-fit: cover;
}
.plate figcaption {
  display: grid; grid-template-columns: auto 1fr;
  gap: 0.6rem; align-items: baseline;
  font-family: var(--font-mono); font-size: var(--text-tiny);
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-muted);
}
.plate figcaption .ref { color: var(--brand); }
.plate figcaption .desc {
  text-transform: none; letter-spacing: 0;
  font-family: var(--font-sans); font-size: var(--text-meta);
  color: var(--ink-muted);
}
@media (max-width: 719px) { .plates { grid-template-columns: 1fr; } }

/* ============== Metrics (dark inverted block) ============== */

.metrics {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 4vw, 3.5rem) clamp(2.5rem, 5vw, 5rem);
  padding-top: 2rem;
  border-top: var(--rule-dark);
}
.metric {
  display: flex; flex-direction: column;
  gap: 0.85rem;
  padding: 0;
}
.metric__lbl {
  font-family: var(--font-mono); font-size: var(--text-tiny);
  text-transform: uppercase; letter-spacing: 0.08em;
  color: oklch(70% 0.030 260);
}
.metric__val {
  font-family: var(--font-mono); font-feature-settings: "tnum";
  font-size: clamp(1.75rem, 2.5vw, 2.75rem);
  letter-spacing: -0.02em;
  font-weight: 500;
  color: var(--paper-on-ink);
}
.metric__val em {
  font-style: normal; font-size: 0.5em;
  color: oklch(75% 0.030 260);
  margin-left: 0.4rem; font-weight: 400;
}
.metric__val .accent { color: var(--ember); }
.metric__note {
  font-size: var(--text-meta);
  color: oklch(72% 0.020 260);
  margin: 0.25rem 0 0; max-width: 42ch;
}
@media (max-width: 719px) {
  .metrics { grid-template-columns: 1fr; gap: 1.75rem; }
}

/* ============== Form ============== */

.form-section {
  display: grid; grid-template-columns: 5fr 7fr;
  gap: clamp(1.5rem, 4vw, 4rem);
}
.form-section__intro p { color: var(--ink-muted); max-width: 38ch; }
.form-section__num { margin-bottom: 1rem; }
.form-section__lede { margin-top: 1rem; color: var(--ink-muted); }
.form-section__meta {
  font-family: var(--font-mono); font-size: var(--text-meta);
  color: var(--ink-muted); margin-top: 1.5rem;
}
.form-section__meta span { color: var(--ink-faint); }

.booking-form {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1.25rem 1.5rem;
}
.form-group {
  display: flex; flex-direction: column;
  gap: 0.4rem;
}
.form-group--wide { grid-column: 1 / -1; }

.form-group label {
  font-family: var(--font-sans); font-size: var(--text-meta);
  font-weight: 500; letter-spacing: 0;
  color: var(--ink);
  display: inline-flex; align-items: center; gap: 0.4rem;
}
.form-group label > span[aria-hidden="true"] {
  display: inline-block;
  width: 5px; height: 5px;
  background: var(--data);
  border-radius: 50%;
  text-indent: -9999px; overflow: hidden;
}

.form-group input, .form-group textarea {
  font: inherit;
  color: var(--brand); background: var(--paper);
  border: 1px solid var(--ink-faint); border-radius: 2px;
  padding: 0.75rem 0.9rem;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.form-group input::placeholder, .form-group textarea::placeholder {
  color: var(--ink-faint);
}
.form-group input:focus, .form-group textarea:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 2px var(--brand-faint);
}
.form-group textarea {
  resize: vertical; min-height: 8rem;
}
.help-text {
  font-family: var(--font-sans); font-size: var(--text-meta);
  color: var(--ink-faint);
}

.consent, .consent-label {
  display: flex; align-items: flex-start; gap: 0.75rem;
  font-size: var(--text-meta);
  color: var(--ink-muted);
  line-height: 1.5;
  text-transform: none; letter-spacing: 0;
  font-family: var(--font-sans);
}
.consent input, .consent-label input { margin-top: 0.2rem; accent-color: var(--brand); }
.consent a, .consent-label a {
  color: var(--brand);
  border-bottom: 1px solid var(--brand);
  padding-bottom: 1px;
}

.field-error {
  font-family: var(--font-sans); font-size: var(--text-meta);
  color: var(--err);
  min-height: 1em;
}
.form-status {
  grid-column: 1 / -1;
  font-family: var(--font-mono); font-size: var(--text-meta);
  color: var(--ink-muted);
  padding: 0.75rem 0;
}
.form-status--loading { color: var(--ink-muted); }
.form-status--success { color: var(--ok); }
.form-status--error   { color: var(--err); }

@media (max-width: 899px) { .form-section { grid-template-columns: 1fr; } }
@media (max-width: 719px) { .booking-form { grid-template-columns: 1fr; } }

/* ============== Footer ============== */

.footer {
  padding: var(--section-y) var(--pad-x) 2rem;
  background: var(--ink-deep);
  color: var(--paper-on-ink);
}
.footer-content { max-width: none; }
.footer-grid {
  display: grid;
  grid-template-columns: 4fr 3fr 3fr 3fr;
  gap: clamp(1.5rem, 4vw, 4rem);
  padding-bottom: 1.5rem;
}
.foot__brand { display: flex; flex-direction: column; gap: 1.25rem; max-width: 22rem; }
.foot__lockup {
  align-self: flex-start;
  display: block;
  width: auto;
  height: 5.25rem;
  max-width: 100%;
  margin: 0;
  filter: brightness(0) invert(1);
}
.foot__signature {
  font-family: var(--font-mono); font-size: var(--text-tiny);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: oklch(72% 0.030 260);
  display: inline-flex; align-items: center; gap: 0.6rem;
}
.foot__signature::before {
  content: ""; width: 6px; height: 6px; background: oklch(55% 0.030 260); border-radius: 50%;
  display: inline-block;
}
.foot__brand p {
  color: oklch(78% 0.020 260);
  font-size: 0.95rem; line-height: 1.55; margin: 0;
}

.footer-column h4 {
  font-family: var(--font-sans); font-size: 0.95rem;
  letter-spacing: 0;
  color: var(--paper-on-ink);
  margin: 0 0 1rem; font-weight: 600;
}
.footer-column ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 0.6rem;
}
.footer-column a {
  color: oklch(85% 0.015 260);
  transition: color .2s var(--ease), box-shadow .2s var(--ease);
}
.footer-column a:hover { color: var(--paper-on-ink); box-shadow: 0 1px 0 var(--paper-on-ink); }
.footer-column p { color: oklch(85% 0.015 260); margin: 0 0 0.4rem; }
.footer-column address { font-style: normal; }
.footer-column__meta {
  font-family: var(--font-mono); font-size: var(--text-tiny);
  letter-spacing: 0.06em; text-transform: uppercase;
  color: oklch(72% 0.020 260) !important;
  margin: 1.25rem 0 0 !important;
  padding-top: 1rem;
  border-top: var(--rule-dark);
}

.footer-bottom {
  display: flex; flex-wrap: wrap;
  gap: 1rem 2rem; justify-content: space-between; align-items: center;
  padding-top: 1.5rem;
  font-family: var(--font-mono); font-size: var(--text-tiny);
  letter-spacing: 0.04em; color: oklch(70% 0.020 260);
  border-top: var(--rule-dark);
}
.footer-bottom__copy { margin: 0; }
.footer-bottom__legal {
  display: flex; flex-wrap: wrap; gap: 1rem 1.5rem;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.footer-bottom__legal a { color: oklch(75% 0.020 260); }
.footer-bottom__legal a:hover { color: var(--paper-on-ink); }

.foot__parent {
  display: inline-flex; align-items: center;
  padding: 0.45rem 0.75rem;
  border: var(--rule-dark); border-radius: 2px;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.foot__parent:hover { border-color: var(--ember); background: oklch(28% 0.060 260); }
.foot__parent-mark {
  display: block;
  height: 14px; width: auto;
  filter: brightness(0) invert(1);
  opacity: 0.9;
}
.foot__parent:hover .foot__parent-mark { opacity: 1; }

@media (max-width: 1099px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 719px) {
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* ============== Module page (modulo-template) ============== */

.module-page__head {
  padding: var(--section-y) var(--pad-x) clamp(1.5rem, 3vw, 2.5rem);
}
.module-page__kicker {
  font-family: var(--font-mono); font-size: var(--text-tiny);
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-muted);
  display: inline-flex; align-items: center; gap: 0.6rem;
  margin: 0 0 1.5rem;
}
.module-page__kicker::before {
  content: ""; width: 6px; height: 6px;
  background: var(--ink-faint); border-radius: 50%;
  display: inline-block;
}
.module-page__kicker .num {
  font-weight: 500; color: var(--brand);
  letter-spacing: 0.04em;
}
.module-page__title {
  font-size: clamp(1.875rem, 3.5vw + 1rem, 3.5rem);
  line-height: 1.05; letter-spacing: -0.025em;
  font-weight: 700;
  margin: 0 0 1rem;
  max-width: 22ch;
  color: var(--brand);
}
.module-page__subtitle {
  font-size: 1.25rem; line-height: 1.45;
  color: var(--ink-muted);
  max-width: 50ch; margin: 0 0 0.75rem;
}
.module-page__lede {
  font-size: 1rem; color: var(--ink-muted);
  max-width: 60ch; margin: 0 0 2rem;
}

.features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.75rem, 3.5vw, 3rem) clamp(2rem, 4vw, 4rem);
  padding-top: 1.75rem;
  border-top: var(--rule);
}
.feature {
  padding: 0;
  display: flex; flex-direction: column; gap: 0.5rem;
}
.feature__num {
  font-family: var(--font-mono); font-size: var(--text-tiny);
  letter-spacing: 0.08em; color: var(--ink-faint);
}
.feature h3 {
  font-size: 1.2rem; margin: 0;
  letter-spacing: -0.01em; font-weight: 600; color: var(--brand);
}
.feature p {
  margin: 0; color: var(--ink-muted);
  font-size: 0.95rem; line-height: 1.55;
  max-width: 56ch;
}
@media (max-width: 719px) {
  .features { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* Grouped features (used by salas-maquinas) */
.feature-group + .feature-group { margin-top: 2.5rem; }
.feature-group__head {
  display: flex; align-items: baseline; gap: 1rem;
  margin: 0 0 0.5rem;
  padding-bottom: 0.5rem;
  font-family: var(--font-mono);
  font-size: var(--text-tiny);
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-muted);
}
.feature-group__idx { color: var(--ink-faint); }
.feature-group__title {
  letter-spacing: 0.06em; color: var(--brand); font-weight: 500;
}
.feature-group .features { border-top: var(--rule); }

/* Module figure (photo between header and features) */
.module-figure {
  margin: 0;
  padding: 0 var(--pad-x) var(--section-y);
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: clamp(1rem, 4vw, 3rem);
  align-items: end;
}
.module-figure img {
  width: 100%; aspect-ratio: 16 / 9;
  object-fit: cover;
}
.module-figure figcaption {
  display: flex; flex-direction: column; gap: 0.5rem;
  padding-bottom: 0.4rem;
}
.module-figure figcaption .ref {
  font-family: var(--font-mono); font-size: var(--text-tiny);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--brand);
}
.module-figure figcaption .desc {
  font-size: var(--text-meta); color: var(--ink-muted); line-height: 1.5;
  max-width: 36ch;
}
@media (max-width: 899px) {
  .module-figure { grid-template-columns: 1fr; align-items: start; gap: 1rem; }
  .module-figure img { aspect-ratio: 4 / 3; }
}

/* Specimen (per-module schematic / curve / Gantt — between features and CTA) */
.specimen {
  padding: var(--section-y) var(--pad-x);
}
.specimen__frame {
  border: var(--rule);
  background: var(--paper);
  padding: clamp(1.25rem, 3vw, 2.25rem);
  margin-top: 1rem;
}
.specimen__svg {
  width: 100%; height: auto;
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-tiny);
  letter-spacing: 0.06em;
}
.specimen__svg .stroke-rule { stroke: var(--paper-rule); fill: none; }
.specimen__svg .stroke-ink { stroke: var(--brand); fill: none; }
.specimen__svg .stroke-data { stroke: var(--data); fill: none; }
.specimen__svg .stroke-ink-thin { stroke: var(--ink-faint); fill: none; }
.specimen__svg .fill-paper { fill: var(--paper); }
.specimen__svg .fill-ink { fill: var(--brand); }
.specimen__svg .fill-data { fill: var(--data); }
.specimen__svg .fill-paper-deep { fill: var(--paper-deep); }
.specimen__svg .fill-muted { fill: var(--ink-muted); }
.specimen__svg .fill-faint { fill: var(--ink-faint); }
.specimen__svg .label-mono { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; fill: var(--ink-muted); }
.specimen__svg .label-data { fill: var(--data); }
.specimen__svg .label-brand { fill: var(--brand); }
.specimen__caption {
  display: grid; grid-template-columns: auto 1fr auto;
  gap: 1rem; align-items: baseline;
  padding-top: 1rem;
  font-family: var(--font-mono); font-size: var(--text-tiny);
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-muted);
}
.specimen__caption .ref { color: var(--brand); }
.specimen__caption .desc {
  text-transform: none; letter-spacing: 0;
  font-family: var(--font-sans); font-size: var(--text-meta);
  color: var(--ink-muted);
}
@media (max-width: 719px) {
  .specimen__caption { grid-template-columns: auto 1fr; }
  .specimen__caption :nth-child(3) { display: none; }
}

.cta-section {
  padding: var(--section-y) var(--pad-x);
  background: var(--ink-deep);
  color: var(--paper-on-ink);
  display: grid; grid-template-columns: 7fr 5fr;
  gap: clamp(1.5rem, 4vw, 4rem); align-items: end;
  border-bottom: 0;
}
.cta-section h2 {
  font-size: var(--text-h2); margin: 0 0 0.75rem;
  line-height: 1.1; letter-spacing: -0.02em; max-width: 22ch;
  color: var(--paper-on-ink); font-weight: 700;
}
.cta-section p {
  color: oklch(78% 0.020 260);
  margin: 0; max-width: 50ch;
}
.cta-section .cta-buttons {
  display: flex; flex-wrap: wrap; gap: 0.75rem;
  justify-self: end;
}
.cta-section .cta-button {
  background: var(--paper); color: var(--brand);
  border-color: var(--paper);
}
.cta-section .cta-button:hover {
  background: var(--ember); color: var(--paper); border-color: var(--ember);
}
.cta-section .cta-button-outline {
  background: transparent; color: var(--paper-on-ink);
  border-color: var(--rule-on-ink);
}
.cta-section .cta-button-outline:hover {
  background: var(--paper); color: var(--brand); border-color: var(--paper);
}
@media (max-width: 719px) {
  .cta-section { grid-template-columns: 1fr; }
  .cta-section .cta-buttons { justify-self: start; }
}

/* ============== Module dashboard demo (monitorizacion only) ============== */

.dashboard-demo {
  padding: var(--section-y) var(--pad-x);
}
.dashboard-demo__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.25rem, 2.5vw, 2rem) clamp(1.5rem, 3vw, 2.5rem);
  padding-top: 1.5rem;
  border-top: var(--rule);
}
.dashboard-demo__cell {
  padding: 0;
  display: flex; flex-direction: column; gap: 0.5rem;
}
.dashboard-demo__lbl {
  font-family: var(--font-mono); font-size: var(--text-tiny);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-muted);
}
.dashboard-demo__val {
  font-family: var(--font-mono); font-feature-settings: "tnum";
  font-size: clamp(1.75rem, 2.5vw, 2.5rem);
  font-weight: 500; color: var(--brand);
  letter-spacing: -0.02em;
}
.dashboard-demo__val.is-alert { color: var(--warn); }
@media (max-width: 719px) {
  .dashboard-demo__grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
}

/* ============== Legal pages ============== */

.legal-page {
  max-width: 65ch;
  margin: 0 auto;
  padding: var(--section-y) var(--pad-x);
}
.legal-page h1 {
  font-size: clamp(2rem, 3vw + 1rem, 3rem);
  line-height: 1.05; letter-spacing: -0.025em;
  font-weight: 700; color: var(--brand);
  margin: 0 0 1rem;
}
.legal-meta {
  font-family: var(--font-mono); font-size: var(--text-tiny);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 3rem;
  padding-bottom: 1rem; border-bottom: var(--rule);
}
.legal-page h2 {
  font-size: 1.5rem; margin: 2.5rem 0 1rem;
  letter-spacing: -0.015em; color: var(--brand);
  font-weight: 600;
}
.legal-page h3 {
  font-size: 1.1rem; margin: 1.75rem 0 0.5rem;
  color: var(--brand); font-weight: 600;
}
.legal-page p, .legal-page li {
  color: var(--ink-muted); line-height: 1.65;
}
.legal-page a {
  color: var(--brand);
  border-bottom: 1px solid var(--brand);
  padding-bottom: 1px;
}
.legal-page ul, .legal-page ol {
  padding-left: 1.5rem; margin: 1rem 0;
}
.legal-page li { margin-bottom: 0.5rem; }

/* ============== Document page (ficha-tecnica) ============== */

.doc__main {
  max-width: 72ch;
  margin: 0 auto;
  padding: var(--section-y) var(--pad-x);
}
.doc__head { padding-bottom: 2rem; border-bottom: var(--rule); margin-bottom: 2.5rem; }
.doc__kicker {
  font-family: var(--font-mono); font-size: var(--text-tiny);
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 1.25rem;
}
.doc__title {
  font-size: clamp(2rem, 3vw + 1rem, 3rem);
  line-height: 1.05; letter-spacing: -0.025em;
  font-weight: 700;
  margin: 0 0 1rem;
  color: var(--brand);
  max-width: 24ch;
}
.doc__lede {
  font-size: 1.05rem; color: var(--ink-muted);
  line-height: 1.55; margin: 0 0 1.5rem;
  max-width: 56ch;
}
.doc__meta {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem 1.5rem;
  margin: 1.5rem 0 0;
}
.doc__meta div {
  display: grid; grid-template-columns: 9rem 1fr;
  align-items: baseline; gap: 0.75rem;
  padding-top: 0.5rem; border-top: var(--rule);
}
.doc__meta dt {
  font-family: var(--font-mono); font-size: var(--text-tiny);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0;
}
.doc__meta dd {
  margin: 0; color: var(--brand); font-size: 0.95rem;
  font-feature-settings: "tnum";
}
.doc__meta dd a {
  color: var(--brand);
  border-bottom: 1px solid var(--brand);
  padding-bottom: 1px;
}
.doc__section { margin: 2.5rem 0; }
.doc__h2 {
  font-family: var(--font-mono); font-size: var(--text-tiny);
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 1rem;
  padding-bottom: 0.5rem; border-bottom: var(--rule);
  font-weight: 500;
}
.doc__table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
  font-size: 0.95rem;
}
.doc__table th, .doc__table td {
  text-align: left;
  padding: 0.65rem 0;
  border-bottom: var(--rule);
  vertical-align: baseline;
}
.doc__table th {
  font-family: var(--font-mono); font-size: var(--text-tiny);
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-muted); font-weight: 500;
  width: 40%;
}
.doc__table td {
  color: var(--brand);
  font-feature-settings: "tnum";
}
.doc__table td em {
  font-style: normal; color: var(--ink-muted);
  font-size: var(--text-meta); margin-left: 0.4rem;
}
.doc__modules {
  list-style: none; margin: 0; padding: 0;
}
.doc__modules li {
  display: grid; grid-template-columns: 4rem 1fr;
  align-items: baseline; gap: 1rem;
  padding: 0.85rem 0;
  border-bottom: var(--rule);
}
.doc__modules-num {
  font-family: var(--font-mono); font-size: var(--text-meta);
  color: var(--ink-faint);
  letter-spacing: 0.04em;
}
.doc__modules-title {
  font-weight: 600; color: var(--brand); font-size: 1.05rem;
  display: block;
}
.doc__modules-body {
  color: var(--ink-muted); font-size: 0.95rem; display: block;
  grid-column: 2;
}
.doc__note {
  font-family: var(--font-mono); font-size: var(--text-meta);
  color: var(--ink-muted); margin: 1.25rem 0 0;
}
.doc__foot {
  margin-top: 3rem; padding-top: 1rem;
  border-top: var(--rule);
  font-family: var(--font-mono); font-size: var(--text-tiny);
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-faint);
}
.doc__foot p { margin: 0; }
@media (max-width: 719px) {
  .doc__meta { grid-template-columns: 1fr; }
  .doc__table th { width: 50%; }
}

@media print {
  @page { size: A4; margin: 14mm 14mm 16mm; }
  html, body { background: #fff !important; color: #1c3869 !important; }
  .nav, .footer, .skip-link { display: none !important; }
  .doc__main { max-width: none; padding: 0; margin: 0; }
  .doc__head { border-bottom: 1px solid #c8cfdc; margin-bottom: 1.25rem; padding-bottom: 1rem; }
  .doc__title { font-size: 22pt; line-height: 1.1; max-width: none; }
  .doc__lede { font-size: 10pt; }
  .doc__h2 { font-size: 8pt; border-bottom: 1px solid #c8cfdc; padding-bottom: 0.25rem; }
  .doc__section { margin: 1rem 0; page-break-inside: avoid; }
  .doc__table th, .doc__table td { font-size: 9pt; padding: 0.35rem 0; border-bottom: 1px solid #e6e8ee; }
  .doc__modules li { padding: 0.4rem 0; border-bottom: 1px solid #e6e8ee; }
  .doc__modules-title { font-size: 10pt; }
  .doc__modules-body { font-size: 9pt; }
  .doc__meta dt, .doc__meta dd { font-size: 9pt; }
  .doc__foot { color: #6a7488; }
  a { color: #1c3869 !important; text-decoration: none; }
  a[href]::after { content: ""; }
}

/* ============== Legal-page inventory table (cookies) ============== */
/* Wider, multi-column inventories inside .legal-page need their own treatment;
   .doc__table forces a 40% th column which doesn't fit a 6-column listing. */

.legal-page .legal-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0 1.5rem;
  font-size: var(--text-meta);
  font-feature-settings: "tnum";
}
.legal-page .legal-table th,
.legal-page .legal-table td {
  text-align: left;
  vertical-align: baseline;
  padding: 0.55rem 0.75rem 0.55rem 0;
  border-bottom: var(--rule);
}
.legal-page .legal-table th {
  font-family: var(--font-mono);
  font-size: var(--text-tiny);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 500;
}
.legal-page .legal-table td { color: var(--brand); }
.legal-page .legal-table code {
  font-family: var(--font-mono);
  font-size: 0.95em;
  color: var(--ink);
}

/* ============== Confirmation result page (confirm.php) ============== */

.confirm {
  max-width: 60ch;
  margin: 0 auto;
  padding: var(--section-y) var(--pad-x);
}
.confirm__kicker {
  font-family: var(--font-mono);
  font-size: var(--text-tiny);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 1.5rem;
}
.confirm__title {
  font-size: clamp(2rem, 3vw + 1rem, 3.25rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  font-weight: 700;
  color: var(--brand);
  margin: 0 0 1.25rem;
  max-width: 18ch;
}
.confirm__lede {
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--ink-muted);
  margin: 0 0 2rem;
}
.confirm__status {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: var(--text-tiny);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding: 0.6rem 0;
  border-top: var(--rule);
  border-bottom: var(--rule);
  margin: 0 0 2rem;
}
.confirm__status::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ink-faint);
}
.confirm__status--ok { color: var(--brand); }
.confirm__status--ok::before { background: var(--data); }
.confirm__status--err { color: var(--ember); }
.confirm__status--err::before {
  background: var(--ember);
  animation: pulse 2.2s var(--ease) infinite;
}
.confirm__cta { display: flex; flex-wrap: wrap; gap: 0.75rem; }