/* ── Motivos de consulta ───────────────────────────────────────────────────
   A figure with five regions and the same five as a list beside it, wired as
   one system: picking either drives the other.

   This is the one section on the page built around the visitor's question
   rather than the doctor's service list. Somebody arrives with a knee that
   will not bend; two taps later they are in WhatsApp with a message that
   already says "rodilla".

   Ported from the first site. Three things were dropped on the way over and
   it is worth saying why:

     · the fixed "bridge" phrase that carried the previous section into this
       one — SiteV2 has no such device anywhere, and one section arriving
       differently from the other nine is not a flourish, it is a seam;
     · the dome rising out of the section above, for the same reason: these
       grounds meet flat everywhere else;
     · its own heading type. The title and eyebrow now use .h-section and
       .h-eyebrow like every other section, which is what makes this read as
       part of the page instead of a component someone pasted in.

   Nothing here names a colour. Every fork-specific value comes from
   tokens.css, so this file is byte-identical in the cream and blue editions.
   ────────────────────────────────────────────────────────────────────────── */

/* The section's rhythm, ground and gutters come from .section / .section--alt
   / .section__inner in tokens.css. All this file owns is the composition. */

.sel { overflow-x: clip; }

.sel__head { max-width: 40rem; }

/* The pill is one of the three left on the page, and it never carried the
   gap the removed ones had — it was relying on a rule scoped to a head
   block it does not share. */
.sel__head .h-eyebrow { margin-bottom: clamp(1rem, 2vw, 1.4rem); }

.sel__title { margin-bottom: clamp(0.85rem, 1.8vw, 1.15rem); }

.sel__lede { max-width: 46ch; }
.sel__lede .oh { display: block; }

/* ── The figure ──────────────────────────────────────────────────────────── */

.sel__figure {
  width: 100%;
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  height: min(24rem, 46svh);
}

.sel__svg {
  display: block;
  height: 100%;
  width: auto;
  margin: 0 auto;
  overflow: visible;
}

.sel__silhouette > * {
  fill: var(--figure);
  transition: fill 400ms var(--ease);
}

/* The fingertip target. It is never painted, so pointer-events has to be
   told to use the geometry rather than the paint — otherwise there is
   nothing there to hit. Sized well past the 24px floor: at the figure's
   widest these are roughly 44px across. */
.sel__pad {
  fill: none;
  pointer-events: all;
  cursor: pointer;
}

/* The ring carries the contrast, not the fill — the fill is a tint that the
   chosen state fills in. See --figure in tokens.css for the measurement. */
.sel__hit {
  fill: var(--mark-rest);
  stroke: var(--accent);
  stroke-width: 0.22;
  cursor: pointer;
}

/* A mouse click focuses the marker but does not match :focus-visible, so this
   rule never applied and Chrome drew its own ring instead — a rounded
   rectangle around the circle's bounding box, which is why choosing a region
   looked like a blue square appearing rather than a circle filling. The
   keyboard ring stays; the pointer one goes. */
.sel__hit:focus { outline: none; }
.sel__hit:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ── The cards ────────────────────────────────────────────────────────────
   Each card is two designs in one control.

   At rest it is a call to action and nothing more: a white pill carrying the
   name of a body part. Five of them read as a row of choices rather than as
   five blocks of text competing with the figure above.

   Chosen, it becomes the full card — a thick rule in the region's own tone,
   a tinted panel with a drawing of the joint, the name, what that region
   usually turns out to be, and a way to ask about it. Only ever one open.

   The surface is .sel__face, not the button: the WhatsApp link has to be a
   sibling of the button rather than inside it, since a link nested in a
   button is neither valid nor reachable.
   ────────────────────────────────────────────────────────────────────────── */

/* Each region takes one of the service chips and the deeper tone that goes
   with it, so the body map and Mis Servicios are visibly the same family
   rather than two palettes on one page. */
.sel__card[data-region="hombro"]  { --tint: var(--chip-4); --tint-ink: var(--chip-4-ink); }
.sel__card[data-region="mano"]    { --tint: var(--chip-1); --tint-ink: var(--chip-1-ink); }
.sel__card[data-region="cadera"]  { --tint: var(--chip-3); --tint-ink: var(--chip-3-ink); }
.sel__card[data-region="rodilla"] { --tint: var(--chip-5); --tint-ink: var(--chip-5-ink); }
.sel__card[data-region="tobillo"] { --tint: var(--chip-2); --tint-ink: var(--chip-2-ink); }

.sel__cards {
  list-style: none;
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  padding: 0;
  display: grid;
  align-content: start;
  gap: clamp(0.625rem, 1.4vw, 1rem);
}

/* Nothing until a region is picked. The figure's five markers are the way in;
   a column of five pills standing there beforehand was answering a question
   the visitor had not asked yet. Without script there is no picking, so every
   card is simply present. */
.sel__card { position: relative; display: none; }
.sel__card[data-active] { display: block; }
.no-js .sel__card { display: block; }

/* At rest the buttons are as plain as they can be: white, no rule, the name
   in ink. The tint each region owns is held back for the card it opens into,
   where it has something to do. */
.sel__face {
  overflow: hidden;
  background: var(--white);
  border: 0;
  border-radius: var(--r-pill);
  padding: 0;
  transition:
    background-color 420ms var(--ease),
    border-color 420ms var(--ease),
    border-radius 420ms var(--ease),
    border-width 420ms var(--ease),
    padding 420ms var(--ease);
}

.sel__btn {
  display: block;
  width: 100%;
  min-height: 3.25rem;
  padding: 0.9375rem 1.375rem;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  transition: padding 420ms var(--ease);
}

.sel__card-name {
  display: block;
  font-size: var(--fs-ui);
  font-weight: 600;
  letter-spacing: var(--track-body);
  color: var(--ink);
  transition: color 420ms var(--ease), font-size 420ms var(--ease);
}

/* The drawing belongs to the chosen state only. Collapsed rather than
   hidden, so the card can grow into it. */
.sel__card-art {
  display: block;
  overflow: hidden;
  width: 0;
  height: 0;
  opacity: 0;
  border-radius: 0.875rem;
  background: var(--tint);
  transition:
    width 420ms var(--ease),
    height 420ms var(--ease),
    opacity 320ms var(--ease);
}

/* The drawing is an anatomical illustration now, not a shape built from
   rectangles — so it is an image, and it carries its own colour rather than
   taking the region's. The region still owns the card's rule and its bullets,
   which is where the colour coding was doing real work. */
.sel__card-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Collapsed by row-height rather than max-height, so the card is exactly as
   tall as its own list. visibility keeps the folded-away link out of the tab
   order — a focusable control nobody can see is a trap. */
.sel__detail {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  opacity: 0;
  transition:
    grid-template-rows 420ms var(--ease),
    opacity 300ms var(--ease),
    visibility 0s linear 420ms;
}

.sel__detail-in { min-height: 0; overflow: hidden; }

.sel__list {
  list-style: none;
  margin: 0.875rem 0 0;
  padding: 0 0.375rem;
  display: grid;
  gap: 0.3125rem;
}

.sel__list li {
  position: relative;
  padding-left: 0.875rem;
  font-size: var(--fs-ui);   /* one step up: these are the reading matter of the card, not a label */
  line-height: 1.4;
  letter-spacing: var(--track-body);
  color: var(--ink-70);
  overflow-wrap: anywhere;
}

.sel__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 0.3125rem;
  height: 0.3125rem;
  border-radius: 50%;
  background: var(--tint-ink);
}

.sel__wa {
  width: 100%;
  margin-top: 0.875rem;
  min-height: 2.75rem;
}

/* ── Chosen ──────────────────────────────────────────────────────────────── */

/* No rule around it. The region's colour is still on the tile behind the
   drawing and on the bullets; a 3px frame in the same tone was the third
   place saying the same thing, and it boxed the card in. */
.sel__card[data-active] .sel__face {
  background: var(--white);
  border: 0;
  border-radius: 1.25rem;
  padding: 1.15rem;
}

/* The open card is a list item, not a tile: the drawing sits beside the name
   rather than above it, which keeps the card about as tall as its own list
   and leaves the four unchosen regions where the reader left them. */
.sel__card[data-active] .sel__btn {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.875rem;
  padding: 0;
  cursor: default;
}

.sel__card[data-active] .sel__card-art {
  width: 5.25rem;
  height: 5.25rem;
  opacity: 1;
}

.sel__card[data-active] .sel__card-name { font-size: var(--fs-lead); }

.sel__card[data-active] .sel__detail {
  grid-template-rows: 1fr;
  visibility: visible;
  opacity: 1;
  transition:
    grid-template-rows 420ms var(--ease),
    opacity 300ms var(--ease) 120ms,
    visibility 0s;
}

.sel__btn:focus-visible,
.sel__wa:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ── From 64rem: the list on the left, the figure on the right ─────────────
   The heading and the regions share the left column, the figure has the
   right one to itself and runs the height of both — which is what lets it be
   half again as tall as it was when it sat above a row of five.
   ────────────────────────────────────────────────────────────────────────── */

@media (min-width: 64rem) {
  .sel__inner {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    grid-template-areas:
      "head figure"
      "list figure";
    align-items: start;
    column-gap: clamp(2rem, 5vw, 5rem);
  }

  .sel__head   { grid-area: head; }
  .sel__cards  { grid-area: list; }
  .sel__figure { grid-area: figure; align-self: start; margin-top: 0; }

  /* Sized from what is left rather than a share of the viewport: the heading
     costs the same in pixels on a short screen as on a tall one, so a flat
     svh figure either crowds the foot at 768 or wastes room at 900. */
  .sel__figure { height: min(38rem, calc(100svh - 20rem)); }

  /* Wide enough for the longest name and the open card's list, narrow enough
     to stay a column of choices rather than five long bars. */
  .sel__cards { max-width: 34rem; margin-top: clamp(1.75rem, 3vw, 2.5rem); }
}

/* ── Entrance ────────────────────────────────────────────────────────────────
   The figure resolves in, then the cards arrive one after another. Nothing
   may start hidden if nothing will ever show it — see js/selector.js, which
   settles all three if GSAP never loads.
   ──────────────────────────────────────────────────────────────────────────── */

.sel__figure,
.sel__card,
.sel__hit { opacity: 0; }

.no-js .sel__figure,
.no-js .sel__card,
.no-js .sel__hit { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .sel__figure,
  .sel__card,
  .sel__hit { opacity: 1; transform: none; }

  /* The card still changes between its two designs — it just does not
     animate getting there. */
  .sel__face,
  .sel__btn,
  .sel__card-name,
  .sel__card-art,
  .sel__detail {
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
  }
}