@charset "utf-8";

/* N&D Brain — Unidad de Epilepsia
   The established system, on the web. Tokens, type roles and rules all come from
   DESIGN.md; nothing here invents a second identity. No third-party request is made
   from this file: the only fonts are the self-hosted Plex subsets beside it. */

/* ---------------------------------------------------------------- typeface */

@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/ibm-plex-sans-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/ibm-plex-sans-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/ibm-plex-sans-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ---------------------------------------------------------------- tokens */

:root {
  --navy: #1b2b52;
  --navy-tint: #5d6881;
  --paper: #f8f5ee;
  --paper-line: #e8e3d6;
  --navy-line: #485373;
  --reverse-tint: #bbbfcb;
  --white: #fff;

  /* The card's 24-unit rhythm, in rem. */
  --u: 1.5rem;
  --gutter: clamp(1.25rem, 5vw, 3.5rem);
  --measure: 36rem;     /* ~68 characters at the body size */
  --page: 64rem;

  /* Type. Body never falls below 18px: this is read on a phone, often by someone
     who is frightened, sometimes by someone who has just had a seizure. */
  --t-body: clamp(1.125rem, 1.06rem + 0.3vw, 1.1875rem);
  --t-lead: clamp(1.25rem, 1.13rem + 0.55vw, 1.4375rem);
  --t-display: clamp(1.75rem, 1.1rem + 2.9vw, 3.125rem);
  --t-h2: clamp(1.4375rem, 1.19rem + 1.1vw, 2.125rem);
  --t-h3: clamp(1.1875rem, 1.12rem + 0.3vw, 1.3125rem);
  --t-small: clamp(1.0625rem, 1.02rem + 0.2vw, 1.125rem);
  --t-caps: 0.8125rem;

  --lh-body: 1.65;
  --lh-display: 1.14;
}

/* ---------------------------------------------------------------- reset */

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

html {
  -webkit-text-size-adjust: 100%;
  scrollbar-color: var(--navy-tint) var(--paper);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--navy);
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  font-size: var(--t-body);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 {
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: var(--lh-display);
  margin: 0;
  text-wrap: balance;
}

p, ul, ol, dl { margin: 0; }
img, svg { max-width: 100%; height: auto; }

/* Browser surfaces carry the design too. */
::selection { background: var(--navy); color: var(--paper); }
.band--navy ::selection { background: var(--paper); color: var(--navy); }

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: 1px;
}

/* The action is a filled block, so its own currentColor is the colour of the field
   behind it: a currentColor ring on the CTA is drawn navy on navy, or paper on paper,
   and disappears. The ring takes the surrounding band's colour instead. */
.band--navy .cta:focus-visible,
.band--navy .skip:focus-visible { outline-color: var(--white); }
.band:not(.band--navy) .cta:focus-visible { outline-color: var(--navy); }
.skip:focus-visible { outline-color: var(--navy); }

/* ---------------------------------------------------------------- links */

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }

.band--navy a { text-decoration-color: var(--reverse-tint); }

/* ---------------------------------------------------------------- structure */

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--paper);
  color: var(--navy);
  padding: 0.75rem 1.25rem;
  z-index: 10;
}
.skip:focus { left: 0; }

.band { padding-inline: var(--gutter); }
.band--navy { background: var(--navy); color: var(--white); }
.band--navy h1, .band--navy h2, .band--navy h3 { color: var(--white); }

.wrap { max-width: var(--page); margin-inline: auto; }
.prose { max-width: var(--measure); }
.prose > * + * { margin-top: 1em; }

.section { padding-block: calc(var(--u) * 2.5); }
.section + .section { border-top: 1px solid var(--paper-line); }
.section > h2 { margin-bottom: calc(var(--u) * 1.1); }

@media (min-width: 56em) {
  .section { padding-block: calc(var(--u) * 3.25); }
}

/* ---------------------------------------------------------------- small caps
   The wordmark's own program-line setting, reused wherever the interface needs a
   label: weight 400 and +0.28em on paper, stepping up to 500 and +0.30em on navy,
   which is the light-on-dark compensation DESIGN.md applies everywhere else. */

.caps {
  font-size: var(--t-caps);
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--navy-tint);
  margin: 0;
}
.band--navy .caps { font-weight: 500; letter-spacing: 0.3em; color: var(--reverse-tint); }

/* ---------------------------------------------------------------- hero */

.hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100svh;
  padding-block: calc(var(--u) * 2) calc(var(--u) * 2.5);
  border-bottom: 1px solid var(--navy-line);
}
.hero__mark {
  display: block;
  width: clamp(9.5rem, 30vw, 13rem);
  /* the master bakes in its own clear space, so the gap here is the remainder */
  margin-bottom: calc(var(--u) * 0.8);
}
.hero h1 {
  font-size: var(--t-display);
  max-width: 18ch;
}
.hero__specifics {
  margin-top: calc(var(--u) * 0.7);
  max-width: var(--measure);
  color: var(--reverse-tint);
  font-size: var(--t-body);
}
/* The card's rule for this line: never shrunk to fit, and broken at the middle-dot
   separator rather than mid-phrase. At the specced size it never fits on one line here
   — the measure caps at 36rem and the line needs about 645px at 19px — so it is always
   at least two lines, and the only question is where they fall.

   Each phrase is its own block, so a phrase never shares a line with the next one and
   the break is always at the separator. Without this the second phrase starts on the
   tail of the first and a 320px screen orphans its last two words. The dot is bound to
   the phrase it follows by a non-breaking space in the markup. */
.hero__specifics .phrase { display: block; }

/* Belt and braces above 30em: where there is room for the whole phrase, forbid an
   internal break outright, so a later copy edit cannot reintroduce one quietly. Not
   below it — phrase one needs ~378px and a 414px phone offers 373px of measure, so
   nowrap at every width would push the hero into horizontal overflow, which is the one
   thing reflow at 320px must never do. In em, so a reader who enlarges their root size
   moves the breakpoint with the type instead of overflowing. */
@media (min-width: 30em) {
  .hero__specifics .phrase { white-space: nowrap; }
}
.hero__cta { margin-top: calc(var(--u) * 1.3); }

@media (min-width: 56em) {
  .hero { padding-block: calc(var(--u) * 3) calc(var(--u) * 3.5); }
}

/* ---------------------------------------------------------------- the action */

.cta {
  display: inline-flex;
  align-items: baseline;
  /* The longer second channel does not fit one line on a 320px screen, and an
     inline-flex block will not shrink below its content: let the note wrap instead
     of pushing a pixel of horizontal scroll onto the whole page. */
  flex-wrap: wrap;
  max-width: 100%;
  gap: 0.15rem 0.6ch;
  min-height: 3.25rem;
  padding: 0.95rem 1.6rem;
  background: var(--paper);
  color: var(--navy);
  font-weight: 500;
  font-size: var(--t-lead);
  letter-spacing: 0.01em;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background-color 120ms ease-out, color 120ms ease-out;
}
.cta:hover { background: var(--white); }
.cta__note { font-size: var(--t-small); font-weight: 400; color: var(--navy-tint); }

/* On paper the action inverts: navy field, paper text. */
.band:not(.band--navy) .cta { background: var(--navy); color: var(--paper); }
.band:not(.band--navy) .cta:hover { background: #16233f; }
.band:not(.band--navy) .cta__note { color: var(--reverse-tint); }

/* ---------------------------------------------------------------- divider
   The badge trace, the identity's one pictorial element, at a uniform scale and
   once on this page. Never redrawn, never replaced by a rule.

   It is deliberately not animated. A scroll-driven draw was built and removed: any
   reveal that starts from an undrawn state leaves the mark blank wherever the
   timeline never advances — printing, a full-page capture, a reader view — and the
   one pictorial element in this identity must be present in every rendering of the
   page. Restraint is also the right register for the audience. */

.trace {
  display: block;
  width: clamp(9rem, 24vw, 12.5rem);
  margin: 0 0 calc(var(--u) * 1.6);
  color: var(--navy);
  overflow: visible;
}

/* ---------------------------------------------------------------- services */

.services { margin-top: calc(var(--u) * 0.5); }

.service {
  padding-block: calc(var(--u) * 1.4);
  border-top: 1px solid var(--paper-line);
}
.service h3 { margin-bottom: 0.5em; }
.service p + p { margin-top: 0.8em; }
.service__includes {
  margin-top: 0.9em;
  color: var(--navy-tint);
  font-size: var(--t-small);
}

@media (min-width: 56em) {
  .service {
    display: grid;
    grid-template-columns: 15rem 1fr;
    column-gap: calc(var(--u) * 2);
    padding-block: calc(var(--u) * 1.8);
  }
  .service h3 { grid-column: 1; margin-bottom: 0; }
  .service__body { grid-column: 2; max-width: var(--measure); }
}

/* ---------------------------------------------------------------- checklist
   No glyph bullets. The marker is a hairline, drawn, in the system's own
   vocabulary — the same rule that divides everything else on the page. */

.checklist { list-style: none; padding: 0; }
.checklist li {
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  column-gap: 1rem;
  padding-block: 0.8rem;
  border-top: 1px solid var(--paper-line);
}
.checklist li::before {
  content: "";
  display: block;
  height: 1px;
  background: var(--navy-tint);
  margin-top: 0.82em;
}

@media (min-width: 56em) {
  .checklist {
    columns: 2;
    column-gap: calc(var(--u) * 2.5);
  }
  .checklist li { break-inside: avoid; }
}

/* ---------------------------------------------------------------- process
   The steps are numbered because the sequence is the information: this is the order
   a visit actually happens in. The services list above is deliberately unnumbered —
   those are offerings, not a sequence. */

.steps { list-style: none; padding: 0; counter-reset: step; margin-top: calc(var(--u) * 1.2); }
.steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 2.25rem 1fr;
  column-gap: 1rem;
  padding-block: calc(var(--u) * 0.9);
  border-top: 1px solid var(--paper-line);
  max-width: calc(var(--measure) + 3.25rem);
}
.steps li::before {
  content: counter(step);
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--navy-tint);
  font-size: var(--t-small);
  line-height: inherit;
}
.steps b { font-weight: 500; }

/* ---------------------------------------------------------------- questions */

.faq { margin-top: calc(var(--u) * 0.4); }
.faq__item {
  padding-block: calc(var(--u) * 1.1);
  border-top: 1px solid var(--paper-line);
  max-width: var(--measure);
}
.faq__item h3 { margin-bottom: 0.55em; }
/* The sheet FAQ 2 promises, reachable before the reader calls rather than only after.
   No `download` attribute: the answer is meant to be read, and a phone browser shows
   a one-page PDF faster than it saves one. */
.faq__file { margin-top: 0.9em; }
.faq__file a { display: inline-flex; align-items: center; min-height: 2.75rem; }

/* ---------------------------------------------------------------- doctor, place */

/* The doctor block keeps the card's order — name, specialty, registration — and the
   unit's own paragraphs sit below it. */
.doctor { display: grid; gap: calc(var(--u) * 1.3); }
.doctor__body { max-width: var(--measure); }
.doctor__body > * + * { margin-top: 1em; }
.doctor__name { font-size: var(--t-h3); font-weight: 500; }
.doctor__role { color: var(--navy-tint); }
.doctor__role + .doctor__reg { margin-top: 0.3em; }
.doctor__reg + p { margin-top: calc(var(--u) * 1.1); }
.doctor__reg, .place__line--muted { color: var(--navy-tint); font-size: var(--t-small); }

/* The long biography folds away behind a native disclosure, so the section stays
   scannable without a line of JavaScript. The marker is drawn from borders, not a
   glyph lifted out of some other font. */
.trayectoria { margin-top: calc(var(--u) * 1.2); border-top: 1px solid var(--paper-line); }
.trayectoria > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 2.75rem;
  padding-block: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}
.trayectoria > summary::-webkit-details-marker { display: none; }
.trayectoria > summary::after {
  content: "";
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 1.5px solid var(--navy-tint);
  border-bottom: 1.5px solid var(--navy-tint);
  transform: translateY(-0.15em) rotate(45deg);
  transition: transform 150ms ease-out;
}
.trayectoria[open] > summary::after { transform: translateY(0.1em) rotate(-135deg); }
@media (prefers-reduced-motion: reduce) {
  .trayectoria > summary::after { transition: none; }
}
.trayectoria ul { list-style: none; padding: 0; margin: 0 0 calc(var(--u) * 0.9); }
.trayectoria li { padding-block: calc(var(--u) * 0.75); border-top: 1px solid var(--paper-line); }
.trayectoria li:first-child { border-top: 0; }
.trayectoria b { font-weight: 500; }

.doctor__links { display: flex; flex-wrap: wrap; gap: 0.4rem 1.75rem; margin-top: calc(var(--u) * 1.1); }
.doctor__links a { min-height: 2.75rem; display: inline-flex; align-items: center; font-size: var(--t-small); }

/* Where and how to get an appointment. */
.place__meta { margin-top: calc(var(--u) * 1.2); max-width: var(--measure); }
.place__meta dt { color: var(--navy-tint); font-size: var(--t-small); }
.place__meta dd { margin: 0.15em 0 0; }
.place__meta div + div { margin-top: calc(var(--u) * 0.8); }
.place__channels { display: flex; flex-wrap: wrap; gap: 0.9rem 1rem; margin-top: calc(var(--u) * 1.3); }

/* The second channel is a counterpart to the phone, not a rival: same block, outlined. */
.band:not(.band--navy) .cta--secondary {
  background: transparent;
  color: var(--navy);
  border-color: var(--navy);
}
.band:not(.band--navy) .cta--secondary:hover { background: var(--paper-line); }
.band:not(.band--navy) .cta--secondary .cta__note { color: var(--navy-tint); }

/* Portrait. The section becomes two columns only when a portrait is actually in it,
   so a page without one is not a page with a hole in it. The image carries no fixed
   aspect ratio and no object-fit: it ships at the photograph's own proportions, so
   nothing is cropped here that the photographer did not crop. */
.doctor__portrait { max-width: 15rem; }
.doctor__portrait img { display: block; width: 100%; height: auto; }
@media (min-width: 56em) {
  .doctor:has(.doctor__portrait) {
    grid-template-columns: 15rem 1fr;
    column-gap: calc(var(--u) * 2);
    align-items: start;
  }
}
.place__line { font-size: var(--t-lead); font-weight: 500; }
.place address { font-style: normal; }

/* ---------------------------------------------------------------- figures */

.figpair {
  --fig-ref: 440;
  display: grid;
  gap: calc(var(--u) * 1.2);
  margin-top: calc(var(--u) * 1.2);
  align-items: start;
}
@media (min-width: 40em) {
  .figpair { grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 1.6); }
}

.figpair figure {
  margin: 0;
  display: grid;
  grid-template-rows: 1fr auto;   /* renders share a row, captions land on one line */
}
/* --fig-ref is the widest render in the set; --w is each render's own 1x width.
   The per-render widths below are written by build/prepare_assets.py from
   figures.json — they live in the stylesheet rather than in a style attribute so the
   Content-Security-Policy can refuse inline styles outright. Do not edit by hand. */

/* figure-widths:begin */
.figpair img.fig-19-lateral { --w: 344; }
.figpair img.fig-19-superior { --w: 397; }
.figpair img.fig-37-lateral { --w: 440; }
.figpair img.fig-37-superior { --w: 427; }
.figpair img.fig-47-lateral { --w: 440; }
.figpair img.fig-47-superior { --w: 427; }
/* figure-widths:end */
.figpair img {
  display: block;
  width: calc(var(--w) / var(--fig-ref) * 100%);
  max-width: 100%;
  height: auto;
  align-self: end;
}
.figpair figcaption {
  margin-top: 0.7rem;
  color: var(--navy-tint);
  font-size: var(--t-small);
  line-height: 1.45;
}

.montage { padding-block: calc(var(--u) * 2); border-top: 1px solid var(--paper-line); }
.montage h2 { font-size: var(--t-h2); }
.montage__composition { margin-top: 0.6em; color: var(--navy-tint); max-width: var(--measure); }
.montage__measure { margin-top: 0.8em; max-width: var(--measure); }
.montage__measure b { font-weight: 600; }

/* The figures' own category colours encode electrode groups. They are data, exempt
   from the palette, and are never restyled to match it. */
.legend { list-style: none; padding: 0; margin-top: calc(var(--u) * 1.1); display: flex; flex-wrap: wrap; gap: 0.6rem 1.75rem; }
.legend li { display: flex; align-items: center; gap: 0.6rem; font-size: var(--t-small); color: var(--navy-tint); }
.legend i { display: block; width: 0.9rem; height: 0.9rem; flex: none; }
/* The renders' own category colours, named once. Data, not palette. */
.legend i.is-standard { background: #6b7d9e; }
.legend i.is-ifcn     { background: #219942; }
.legend i.is-extra    { background: #ed780f; }

.notes { margin-top: calc(var(--u) * 0.9); color: var(--navy-tint); font-size: var(--t-small); line-height: 1.5; }
.notes p + p { margin-top: 0.35em; }

/* A column of measured values, so magnitudes compare by eye. Plex Sans's figures
   are lining and tabular by construction, so the column aligns without changing face. */
.coverage { width: 100%; border-collapse: collapse; margin-top: calc(var(--u) * 1.2); max-width: var(--measure); }
.coverage th, .coverage td { text-align: left; padding: 0.7rem 1rem 0.7rem 0; border-top: 1px solid var(--paper-line); }
.coverage thead th { border-top: 0; font-weight: 400; color: var(--navy-tint); font-size: var(--t-small); }
.coverage td { font-variant-numeric: tabular-nums lining-nums; }
.coverage td:first-child { font-weight: 500; }
.coverage .num { text-align: right; width: 7rem; }

/* ---------------------------------------------------------------- footer */

.footer { padding-block: calc(var(--u) * 2.5); border-top: 1px solid var(--navy-line); }
.footer__badge { display: block; width: 6.5rem; margin-bottom: calc(var(--u) * 1.3); }
.footer__grid { display: grid; gap: calc(var(--u) * 1.2); }
.footer nav ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.8rem 1.75rem; }
.footer a { min-height: 2.75rem; display: inline-flex; align-items: center; }
.footer__legal { color: var(--reverse-tint); font-size: var(--t-small); }
.footer__legal p + p { margin-top: 0.4em; }
/* Inline links in a sentence are exempt from WCAG 2.2 target size, but the phone
   number is a contact action: vertical padding enlarges the hit area on an inline
   box without disturbing the line it sits in. */
.footer__legal a { padding-block: 0.7rem; }

@media (min-width: 56em) {
  .footer__grid { grid-template-columns: 1fr auto; align-items: start; column-gap: calc(var(--u) * 2); }
}

/* ---------------------------------------------------------------- legal pages */

.doc { padding-block: calc(var(--u) * 2); }
.doc h2 { font-size: var(--t-h3); margin-top: calc(var(--u) * 1.6); margin-bottom: 0.5em; }
.doc .prose { max-width: var(--measure); }
.updated {
  margin-top: calc(var(--u) * 1.6);
  padding-top: calc(var(--u) * 0.8);
  border-top: 1px solid var(--paper-line);
  color: var(--navy-tint);
  font-size: var(--t-small);
  max-width: var(--measure);
}

/* Unused since the asesor's sign-off on 2026-10-19 removed both BORRADOR banners.
   Kept, not deleted: six lines of the two legal pages are still unreviewed (see
   LEGAL.md), so a banner may be asked for again. 190 bytes, ~60 gzipped. */
.draft {
  border: 1px solid var(--paper-line);
  border-left: 1px solid var(--paper-line);
  padding: 1rem 1.25rem;
  margin-bottom: calc(var(--u) * 1.4);
  color: var(--navy-tint);
  font-size: var(--t-small);
  max-width: var(--measure);
}

/* ---------------------------------------------------------------- page head
   Every page but the first opens with the wordmark as the way back to it. */

.pagehead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 2rem;
  margin: 0;
  padding-block: calc(var(--u) * 1.1);
  border-bottom: 1px solid var(--paper-line);
}
.pagehead a { display: inline-block; }
.pagehead img { display: block; width: clamp(8.5rem, 26vw, 11rem); }

.page-title { font-size: var(--t-display); }
.standfirst { margin-top: var(--u); }
.hero-figure { margin-top: calc(var(--u) * 1.4); }
.hero-figure img { display: block; width: min(100%, 22rem); }
.after-table { margin-top: calc(var(--u) * 1.4); }
.doc h1 { font-size: var(--t-h2); }

/* ---------------------------------------------------------------- utilities */

.lead { font-size: var(--t-lead); }
.muted { color: var(--navy-tint); }
.vh {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}