/* ── Mis Servicios ─────────────────────────────────────────────────────────
   Two components were left in this section of the Framer file, and this is
   both of them put together.

   The first is the card: white, 20px radius, 20px of padding, a tinted chip
   holding an icon on the left, a title and one line of description in the
   middle, and an arrow that sits at the right and steps out on hover.

   The second is the tone and type guide that came with it — and it is the
   reason this section does not look like the rest of the page. Its cards are
   set in Bricolage Grotesque over Instrument Sans, on a greener ink
   (#14261D over #45564B) than the page's near-black. Both faces are loaded
   for this section alone and used nowhere else, which is what makes the cards
   read as their own object rather than as more page.

   The chips rotate through four tints so a column never repeats itself, and
   what sits on them are the doctor's own icons, taken from his site.
   ────────────────────────────────────────────────────────────────────────── */

/* The section carries the seven cards and then the insurers' strip, so it is
   given noticeably more room than the page's default section rhythm — the
   strip needs air above and below it or it reads as an afterthought stuck to
   the last card. */
.svc {
  background: var(--ground);
  padding-block: clamp(5.5rem, 11vw, 10rem);
}

.svc__head {
  max-width: 40rem;
  margin: 0 auto clamp(2.75rem, 6vw, 4.5rem);
  text-align: center;
}


/* The one heading on the page the accent carries on its own. */
.svc__title {
  color: var(--indigo);
  margin-bottom: clamp(0.85rem, 1.8vw, 1.15rem);
}

.svc__lede { margin-inline: auto; }

/* ── The grid ──────────────────────────────────────────────────────────── */

.svc__grid {
  display: grid;
  gap: clamp(0.85rem, 1.6vw, 1.15rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 46rem) {
  .svc__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Seven is odd: the last one runs the full width rather than leaving a
     hole, which also gives the longest title room to stay on one line. */
  .svc__cell:last-child { grid-column: 1 / -1; }
}

.svc__cell { display: flex; }

/* ── The card ──────────────────────────────────────────────────────────── */

.card {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 1.6vw, 1.15rem);
  width: 100%;
  padding: 20px;
  border-radius: var(--r-card);
  /* White, as the Framer guide drew them — but the guide drew them white
     against a cream page, and this section is now white itself. Cream would
     have made them read instantly and muddled the palette's one rule: cream
     is the breath between sections, not a material things are made of. So
     the card keeps its white and earns its edge instead, from a rule with
     enough weight to be seen and a shadow shallow enough not to be noticed. */
  background: var(--white);
  border: 1px solid var(--card-line);
  box-shadow: 0 1px 2px rgba(20, 38, 29, 0.04),
              0 10px 26px -22px rgba(20, 38, 29, 0.30);
  text-decoration: none;
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease),
              border-color 0.45s var(--ease);
}

.card:hover {
  transform: translateY(-3px);
  border-color: rgba(20, 38, 29, 0.24);
  box-shadow: 0 1px 2px rgba(20, 38, 29, 0.05),
              0 16px 38px -22px rgba(20, 38, 29, 0.55);
}

/* The tinted chip. Four tints, set from data-chip on the card. */
.card__chip {
  display: grid;
  place-items: center;
  flex: none;
  width: clamp(3.25rem, 5vw, 3.75rem);
  aspect-ratio: 1;
  border-radius: 14px;
  background: var(--chip-1);
  transition: transform 0.45s var(--ease);
}
.card[data-chip="2"] .card__chip { background: var(--chip-2); }
.card[data-chip="3"] .card__chip { background: var(--chip-3); }
.card[data-chip="4"] .card__chip { background: var(--chip-4); }

.card:hover .card__chip { transform: scale(1.06) rotate(-3deg); }

.card__chip img {
  display: block;
  width: 72%;
  height: auto;
}

.card__body {
  display: block;
  min-width: 0;
  flex: 1 1 auto;
}

/* The guide's typography, and the only place these two faces appear. */
.card__name {
  display: block;
  font-family: var(--card-display);
  font-size: clamp(1.0625rem, 1.45vw, 1.5rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: var(--track-body);
  color: var(--card-ink);
  text-wrap: balance;
}

.card__desc {
  display: block;
  margin-top: 0.3rem;
  font-family: var(--card-sans);
  /* One step up the card guide's own ladder — 15 to 17px against the
     14 to 16 it was set at. The title and the availability line are
     untouched, so the card keeps its three distinct levels. */
  font-size: clamp(0.9375rem, 1.15vw, 1.0625rem);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: normal;
  color: var(--card-body);
  text-wrap: pretty;
}

/* Availability, as published on drantoniotrauma.com. Subordinate to the
   description — it is the answer to "when", which only matters once the
   service itself has been read. The dot keeps it from reading as a third
   sentence. */
.card__when {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.5rem;
  font-family: var(--card-sans);
  font-size: var(--fs-meta);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: normal;
  color: var(--card-body);
}

.card__when::before {
  content: "";
  flex: none;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.55;
}

.card__go {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.5rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--card-ink);
  color: var(--white);
  transition: transform 0.45s var(--ease), background 0.35s var(--ease);
}
.card__go svg { width: 1.0625rem; height: 1.0625rem; }

.card:hover .card__go {
  transform: translateX(3px);
  background: var(--indigo);
}

/* ── The price ─────────────────────────────────────────────────────────────
   One figure, at the foot of the seven services it applies to. It is the most
   asked question about a private consultation in Mexico and the page did not
   answer it anywhere.

   Set as a row rather than a headline: it is information, not a promotion,
   and the surrounding page already does the persuading.
   ────────────────────────────────────────────────────────────────────────── */


/* Hidden at every width, for now. The markup stays — the figure is
   transcribed from his Doctoralia profile and the source is linked beside it,
   so it is ready to come back by deleting one rule. */
.svc__price { display: none; }

.svc__price {
  max-width: 44rem;
  margin: clamp(2.5rem, 5vw, 4rem) auto 0;
  padding-top: clamp(1.25rem, 2.5vw, 1.75rem);
  border-top: 1px solid var(--ink-12);
}

.svc__price-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  margin: 0;
}

.svc__price-what {
  font-size: var(--fs-body);
  letter-spacing: var(--track-body);
  color: var(--ink);
}

.svc__price-fig {
  font-size: var(--fs-lead);
  font-weight: 500;
  letter-spacing: var(--track-body);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.svc__price-note {
  margin: 0.6rem 0 0;
  max-width: 52ch;
  font-size: var(--fs-meta);
  line-height: 1.6;
  letter-spacing: var(--track-body);
  color: var(--ink-mute);
  text-wrap: pretty;
}

.svc__price-note a { color: inherit; }
.svc__price-note a:hover { color: var(--accent); }

/* The cards arrive on scroll — see js/services.js. Nothing may start hidden
   if nothing will ever show it. */
.no-js .svc__cell { opacity: 1; transform: none; }

/* ── Aseguradoras ──────────────────────────────────────────────────────────
   A single row of insurer marks looping under the services, with the two ends
   faded out so the strip reads as continuing past the page rather than
   stopping at its edge.

   The loop is one animation on one rail: js/logos.js repeats the list until
   the rail is at least twice the viewport wide, then translates it by exactly
   half its own width. Half a rail of identical copies is indistinguishable
   from the start, so the reset is invisible and there is no seam to time.

   Hovering does not stop it — the reference this follows keeps the strip
   moving through interaction, and a row of logos is not something you need to
   hold still to read.
   ────────────────────────────────────────────────────────────────────────── */

.marq {
  /* The room the section was asked for: the strip is its own moment, not a
     footnote pushed against the last card. */
  margin-top: clamp(4rem, 8vw, 7rem);
  text-align: center;
  --marq-gap: clamp(2.5rem, 5vw, 4.5rem);
}

.marq__label {
  margin: 0 0 clamp(1.75rem, 3.5vw, 2.75rem);
  font-size: var(--fs-meta);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-mute);
}

.marq__viewport {
  overflow: hidden;
  /* The fade at each end. Masked rather than covered by a gradient block, so
     it works whatever the section's ground happens to be. */
  -webkit-mask-image: linear-gradient(to right,
    transparent 0, #000 9%, #000 91%, transparent 100%);
  mask-image: linear-gradient(to right,
    transparent 0, #000 9%, #000 91%, transparent 100%);
}

.marq__rail {
  display: flex;
  align-items: center;
  gap: var(--marq-gap);
  margin: 0;
  padding: 0;
  list-style: none;
  /* Only once js/logos.js has filled the rail, or a short list would visibly
     snap back. */
  flex-wrap: wrap;
  justify-content: center;
  row-gap: clamp(1.75rem, 3.5vw, 2.5rem);
}

.marq[data-rolling] .marq__rail {
  flex-wrap: nowrap;
  justify-content: flex-start;
  width: max-content;
  /* No gap while rolling: gap leaves the last item with no trailing space, so
     half the rail is half a gap short of a whole number of repeats and the
     loop lands a few dozen pixels out every time round. Carried as padding,
     every mark contributes exactly the same width and the halfway point falls
     precisely on a repeat. */
  gap: 0;
  animation: marq var(--marq-time, 48s) linear infinite;
  will-change: transform;
}

.marq[data-rolling] .marq__item {
  padding-inline: calc(var(--marq-gap) / 2);
}

@keyframes marq {
  to { transform: translate3d(-50%, 0, 0); }
}

.marq__item { flex: none; }

.marq__item img {
  display: block;
  width: auto;
  height: clamp(1.625rem, 2.6vw, 2.125rem);
  /* The widest marks are four times the width of the narrowest at a common
     height; this keeps one from owning the row. */
  max-width: clamp(7rem, 12vw, 10rem);
  object-fit: contain;
  /* They are fifteen different brand palettes on one cream page. Held back a
     little, they read as a set instead of as fifteen arguments. */
  opacity: 0.78;
}

.marq__note {
  max-width: 44rem;
  margin: clamp(2rem, 4vw, 3rem) auto 0;
  font-size: var(--fs-meta);
  line-height: 1.6;
  letter-spacing: var(--track-body);
  color: var(--ink-mute);
  text-wrap: pretty;
}

/* Standing still, it is a centred block of marks — which says the same thing. */
@media (prefers-reduced-motion: reduce) {
  .marq[data-rolling] .marq__rail {
    flex-wrap: wrap;
    justify-content: center;
    width: auto;
    gap: var(--marq-gap);
    animation: none;
  }
  .marq[data-rolling] .marq__item { padding-inline: 0; }
}