/* ── Design system ─────────────────────────────────────────────────────────
   The palette and the type are the Framer project's, sampled from it rather
   than re-invented: the cream page, the indigo that carries every heading,
   and the two faces the service cards were drawn in.

   The one thing brought in from the doctor's own site is WhatsApp green,
   because on this site WhatsApp is the action — every call to action on the
   page is that pill, and it has to be the same pill everywhere.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  /* Paper. Two steps, the way the Framer project alternates its sections. */
  /* One cream, not three. #FEF9EF was the old page ground and measured 1.05
     against white — as a band beside white it read as a rendering artifact
     rather than a decision, so it went. This is the tone that was --cream-2,
     which is also the light the hero and the footer already print in over
     their photographs: 1.20 against white, and --ink-mute still clears 4.5
     on it with room to spare. */
  --cream:   #F5EDE1;
  --white:   #FFFFFF;

  /* ── The two grounds, named for the job rather than the hue ───────────────
     White is the page. Cream is the breath between its parts.

     Before this the page was cream throughout and white was what cards were
     made of, which left five consecutive cream sections in the middle and
     nothing to mark where one thing ended and the next began. Inverted, the
     page reads as white with cream drawn across it at four points —
     Motivos, Consultas, Sedes and the footer — and each one lands where the
     subject actually changes.

     --cream-3 went with the change: it existed for a single panel that is
     now plain cream, and a token used once is a token nobody can reason
     about. */
  --ground:     var(--white);
  --ground-alt: var(--cream);

  /* Ink */
  --ink:      #2A2B2F;
  --ink-deep: #1D1D1D;

  /* The hero's fallback ground — the only thing behind the photograph, and
     visible only in the window before it decodes. Deliberately the same
     neutral dark in both editions rather than each fork's own --ink-deep,
     which on the blue one is #0A0C26 and read as a navy panel sitting over
     the hero. White hero type still needs something dark under it; it just
     must not be a colour. */
  --hero-ground: #1D1D1D;
  --ink-70:   rgba(42, 43, 47, 0.70);
  /* The muted label tone — cédula headings, review dates, the emergency note,
     the footer contacts. Every one of them is 11–13px, and at 0.55 they
     measured 3.2–3.4:1 against the paper: the smallest type on the page was
     the hardest to read, which is backwards.

     0.68 is what clears 4.5:1 against all three creams AND white, measured
     rather than assumed. It sits close to --ink-70, and that is fine: these
     labels are separated from body copy by size, uppercase, 600 weight and
     wide tracking. Holding them apart by lightness alone is what made them
     unreadable in the first place.

     Named for the role, not the number — the blue edition needs a different
     value here because its ink is far darker, and a name carrying "62" would
     be a lie in one of the two. */
  --ink-mute: rgba(42, 43, 47, 0.68);
  --ink-12:   rgba(42, 43, 47, 0.12);
  --ink-18:   rgba(42, 43, 47, 0.18);
  --ink-08:   rgba(42, 43, 47, 0.08);

  /* The accent. Section titles, the secondary pill, the word picked out of
     a heading — all of it is this one indigo. */
  --indigo:       #5465E3;
  --indigo-deep:  #4453CC;
  --indigo-soft:  rgba(84, 101, 227, 0.10);

  /* The accent, named for its job rather than its hue.

     Everything above calls this colour "indigo", which is true in this
     edition and false in the blue one — and that is exactly how the blue
     fork ended up painting its selection highlight in this fork's purple.
     New work refers to --accent, so a component written once is correct in
     both editions without being edited into each. */
  --accent: var(--indigo);

  /* The service cards keep their own, greener ink — this is the tone half
     of the card guide left in "Mis Servicios". */
  --card-ink:  #14261D;
  --card-body: #45564B;
  --card-line: rgba(20, 38, 29, 0.20);

  /* The chip behind each service icon: three tints, rotated across the row
     the way the guide's three cards do. A fifth was added when "Motivos de
     consulta" arrived — it needs one per body region, and five regions
     against four tints would have made two of them twins.

     Each tint now carries the deeper tone drawn on top of it. Servicios only
     ever needed the grounds, because its icons come pre-coloured; the body
     map draws its own joints, rules its own cards and bullets its own lists,
     and all of that has to be the region's colour rather than a flat ink.
     Every -ink clears 3:1 on its own tint and on white, which is the ground
     the chosen card changes to. */
  --chip-1: #E4EDD8;   /* green   */
  --chip-2: #F6DFE8;   /* pink    */
  --chip-3: #F9DFC8;   /* orange  */
  --chip-4: #DDE4F7;   /* indigo  */
  --chip-5: #D9E9EF;   /* teal    */

  --chip-1-ink: #3F5A2C;
  --chip-2-ink: #8B3A5E;
  --chip-3-ink: #8A4A24;
  --chip-4-ink: #3A47A5;
  --chip-5-ink: #1F5A75;

  /* The silhouette in the body map: present enough to read as a figure,
     quiet enough that the five markers on it are what the eye goes to.

     These three are one decision, not three. Darkening the figure so it reads
     against the paper also darkens the ground the markers sit on: at #C5D1B8
     a marker measured 3.03:1, which is passing by a hundredth and therefore
     not passing. #CDD8C2 is as dark as the figure can go while a marker on it
     still clears 3:1 with room to spare.

     What carries that 3.27:1 is the marker's ring, not its fill — the resting
     fill is only a tint, so the ring is doing the work and the chosen state
     has somewhere to go. */
  --figure:       #CDD8C2;
  --mark-rest:    rgba(84, 101, 227, 0.12);
  --mark-chosen:  #5465E3;

  /* WhatsApp is the one action colour, from the doctor's own site. Ink on
     green reads 9:1; white on #25D366 is 2.1:1 and fails, so the label is
     ink. */
  --wa:       #25D366;
  --wa-hover: #1FBA59;
  --wa-ink:   #12143A;

  /* Doctoralia's own green, sampled from their wordmark, because their
     lockup is white-on-transparent and this is the ground it is drawn to be
     reversed out on. The one colour from outside the palette, and it earns
     the exception: the point of that badge is that the proof is somebody
     else's. */
  --doctoralia:       #00715E;
  --doctoralia-hover: #005A4B;

  --star: #3D4CB8;

  /* Urgencias. The one red on the site, and the only thing that is not the
     WhatsApp pill — an emergency is a call, not a message left to be read.
     White on this red is 4.8:1, so the label can be white; a brighter red
     would have failed and had to be set in ink. */
  --alert:       #D92D20;
  --alert-hover: #C0281C;

  /* Type. Inter is the page; Bricolage Grotesque and Instrument Sans are the
     service cards, which is the typography half of the card guide. The
     Framer file also carried Clash Grotesk on the hero title and Uncut Sans
     on the step cards — both are licensed faces, and the hero has been
     brought back onto Inter by design anyway, so neither is used here. */
  --sans:  "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --card-display: "Bricolage Grotesque", "Inter", system-ui, sans-serif;
  --card-sans:    "Instrument Sans", "Inter", system-ui, sans-serif;

  /* ── Type scale ────────────────────────────────────────────────────────────
     There were thirty-one distinct font-sizes on this page and no token for
     any of them: eleven fixed steps running 10, 11, 12, 13, 14, 15, 16, 17,
     19, 20px — a one-pixel ladder rather than a scale — and twenty separate
     clamp() expressions, some differing only in the middle term. .about__text
     and .step__text were clamp(1rem, 1.2vw, 1.0625rem) while .lede was
     clamp(1rem, 1.3vw, 1.0625rem): identical floor, identical ceiling, a
     different slope for no reason anyone could state.

     Five steps for fixed type, named for the job. Below 17px the steps are
     two pixels apart, which is what small type needs — a ratio at this end
     gives jumps you cannot set an interface in.
     ──────────────────────────────────────────────────────────────────────── */

  --fs-label: 0.6875rem;   /* 11 — the small-caps labels */
  --fs-meta:  0.8125rem;   /* 13 — kickers, notes, pill labels, legal */
  --fs-ui:    0.9375rem;   /* 15 — secondary body and controls */
  --fs-base:  1rem;        /* 16 — the document base, the WhatsApp pill */
  --fs-body:  1.0625rem;   /* 17 — running text and ledes */

  /* Display. The last three are the Framer file's own proportions and are
     reproduced exactly; they are what makes the page look like itself. */
  --fs-lead:    clamp(1.125rem, 1.6vw, 1.375rem);
  --fs-title-s: clamp(1.5rem, 3.1vw, 2.375rem);
  --fs-title:   clamp(2rem, 4.9vw, 3.5rem);
  --fs-display: clamp(2.5rem, 6.4vw, 5rem);
  --fs-mega:    clamp(1.75rem, 8.6vw, 8.25rem);

  /* ── Tracking ──────────────────────────────────────────────────────────────
     Seventeen values were in use — seven positive, ten negative — including
     -0.045em beside -0.04em beside -0.05em, and 0.12em beside 0.14em beside
     0.15em. Differences nobody could see, in a property where a difference
     you cannot see is just an inconsistency you have to maintain.

     Four. The positive values below 0.1em went to normal: at 12 and 13px they
     were doing nothing a reader could detect. */
  --track-body:    -0.05em;    /* everything set in running text */
  --track-hero:    -0.055em;   /* .hero__title, the Framer file's own */
  --track-display: -0.07em;    /* .h-section and the footer phrase */
  --track-label:    0.12em;    /* the small-caps labels */

  /* Measure. The Framer page runs a 32px gutter at 1146px wide and opens up
     from there; this keeps that and lets it breathe on a large screen. */
  --gutter:  clamp(1.25rem, 2.8vw, 2.75rem);
  --measure: min(100%, 75rem);

  --nav-h: clamp(4.25rem, 6vw, 5.25rem);

  /* Motion — one curve for the whole page */
  --ease:        cubic-bezier(0.16, 1, 0.3, 1);
  --ease-flight: cubic-bezier(0.62, 0.02, 0.15, 1);

  --r-card: 20px;   /* the Framer card radius, used everywhere */
  --r-pill: 999px;
}

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

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

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: var(--track-body);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* clip, not hidden: overflow:hidden on the page box makes it a scroll
     container, and a scroll container is what position:sticky then sticks
     inside — which breaks the hero's pin. clip cuts the overflow without
     creating one. */
  overflow-x: clip;
}

/* Scroll is held while the opening sequence and its handover own the screen */
body[data-intro="running"],
body[data-intro="handover"] { overflow: hidden; }

img { max-width: 100%; }

/* ── Shared type ───────────────────────────────────────────────────────────
   The Framer page sets every section title at one size with a very tight
   track: 56/61.6 at -0.07em. That ratio is what makes the page look like
   itself, so it is expressed once, here, and never restated. */

.h-section {
  margin: 0;
  font-size: var(--fs-title);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: var(--track-display);
}

.h-eyebrow {
  display: inline-block;
  margin: 0;
  padding: 0.4rem 0.9rem;
  border-radius: var(--r-pill);
  background: var(--white);
  /* White on cream is nearly the same value, so the pill read as a faint
     smudge rather than as a label. The edge is what makes it an object. */
  /* The pill sits on white sections and on cream ones. On cream the ground
     shift alone would carry it; on white there is no shift, so the rule has
     to be strong enough to be the whole of the edge. */
  border: 1px solid var(--ink-18);
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: var(--track-body);
  color: var(--ink);
}

.lede {
  margin: 0;
  font-size: var(--fs-body);
  line-height: 1.5;
  letter-spacing: var(--track-body);
  color: var(--ink-70);
}

.section {
  position: relative;
  padding-block: clamp(4.5rem, 9vw, 8rem);
}
.section__inner {
  width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section--alt { background: var(--ground-alt); }

/* ── The one button ────────────────────────────────────────────────────────
   Every call to action on this site is WhatsApp, so there is one pill and
   the page never draws a second. The only exceptions are the two Doctoralia
   badges, which are somebody else's mark and keep their own green. */

.wa {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.85rem 1.45rem;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--wa);
  color: var(--wa-ink);
  font-family: var(--sans);
  font-size: var(--fs-base);
  font-weight: 500;
  letter-spacing: var(--track-body);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.25s var(--ease), transform 0.25s var(--ease);
}
.wa:hover  { background: var(--wa-hover); }
.wa:active { transform: translateY(1px); }
.wa svg    { width: 1.125rem; height: 1.125rem; flex: none; }

.wa--sm { padding: 0.7rem 1.15rem; font-size: var(--fs-ui); }
.wa--lg { padding: 1rem 1.75rem; font-size: var(--fs-body); }

/* The Doctoralia badge, the one lockup on the page that is not ours. */
.dr-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.55rem 0.95rem;
  border-radius: 10px;
  background: var(--doctoralia);
  text-decoration: none;
  transition: background 0.25s var(--ease);
}
.dr-badge:hover { background: var(--doctoralia-hover); }
.dr-badge img   { display: block; width: auto; height: 1.125rem; }

/* Under the opinions, where it is the proof's own signature and was reading
   small against the panel it sits on. */
.dr-badge--lg     { padding: 0.75rem 1.3rem; }
.dr-badge--lg img { height: 1.5rem; }

/* Beside "Escríbeme" in Sobre mí. Same box as .wa — 0.85rem of padding above
   and below a 1.5rem lockup comes to the same height as 0.85rem above and
   below a 1rem line — and the same pill, because two controls standing side
   by side should not disagree about their own shape. */
.dr-badge--wa     { padding: 0.85rem 1.45rem; border-radius: var(--r-pill); }

/* In the hero, under the WhatsApp pill. Built to .wa--lg's box: 1rem of
   padding above and below a 1.6rem lockup comes to the same height as 1rem
   around a 1.0625rem line. */
.dr-badge--hero     { padding: 1rem 1.75rem; border-radius: var(--r-pill); }
.dr-badge--hero img { height: 1.6rem; }
.dr-badge--wa img { height: 1.5rem; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

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

/* ── The surfaces the browser draws ────────────────────────────────────────
   Selection, the scrollbar and the underline offset ship with defaults that
   belong to no design system — a Windows-blue highlight on this cream is the
   giveaway that a page was assembled rather than built. They come from the
   palette like everything else.
   ────────────────────────────────────────────────────────────────────────── */

::selection {
  background: var(--indigo-soft);
  color: var(--ink);
}

::-moz-selection {
  background: var(--indigo-soft);
  color: var(--ink);
}

/* Over the photographs, where the ink would disappear. */
.hero ::selection,
.invite ::selection,
.gal__panel ::selection {
  background: rgba(255, 255, 255, 0.26);
  color: var(--white);
}

html {
  scrollbar-color: var(--ink-mute) transparent;
  scrollbar-width: thin;
}

/* Underlines sit off the baseline far enough to clear the descenders they
   would otherwise cut through. */
a { text-underline-offset: 0.18em; text-decoration-thickness: from-font; }

/* ── Reduced motion ────────────────────────────────────────────────────────
   Asking for less motion is not asking for less interface. The blanket this
   replaces killed every transition on the page, which took hover, focus and
   pressed states down with the parallax — a button that no longer answers is
   a worse outcome than a button that slides.

   So the property list is narrowed instead of the duration zeroed: colour,
   opacity, shadow and outline still transition, and everything positional is
   simply dropped. Looping animations stop outright, which is what they were
   the problem for.
   ────────────────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    /* feedback survives; travel does not */
    transition-property: color, background-color, border-color, outline-color,
                         box-shadow, opacity, fill, stroke !important;
    transition-duration: 180ms !important;
  }
}