/* ── La invitación, y el pie ───────────────────────────────────────────────
   The last two screens. One photograph with the line the page has been
   working towards on it, and then the doctor's own footer — his phone, his
   mail, his two consulting rooms, his hours, and the only three places he
   actually keeps. No invented accounts, and no newsletter.
   ────────────────────────────────────────────────────────────────────────── */

/* ── The invitation ────────────────────────────────────────────────────── */

.invite {
  padding: clamp(1rem, 3vw, 2.5rem) var(--gutter) clamp(3rem, 6vw, 5rem);
  background: var(--ground);
}

.invite__card {
  position: relative;
  width: var(--measure);
  margin-inline: auto;
  display: grid;
  align-items: end;
  min-height: clamp(26rem, 64vh, 40rem);
  padding: clamp(2rem, 5vw, 4.5rem);
  border-radius: clamp(20px, 2.4vw, 32px);
  overflow: hidden;
  isolation: isolate;
  background: var(--ink-deep);
}

.invite__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 35%;
}

.invite__card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top,
    rgba(20, 18, 14, 0.86) 0%,
    rgba(20, 18, 14, 0.52) 42%,
    rgba(20, 18, 14, 0.14) 100%);
  pointer-events: none;
}

.invite__body { max-width: 40rem; color: var(--white); }


.invite__title {
  margin-bottom: clamp(0.85rem, 1.8vw, 1.15rem);
  color: var(--white);
}

.invite__lede {
  margin: 0 0 clamp(1.9rem, 3.8vw, 2.5rem);
  max-width: 34rem;
  font-size: var(--fs-body);
  line-height: 1.5;
  letter-spacing: var(--track-body);
  color: var(--cream);
  text-wrap: pretty;
}

.invite__acts {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.4vw, 1.75rem);
  flex-wrap: wrap;
  margin: 0;
}

.invite__tel {
  color: var(--cream);
  font-size: var(--fs-body);
  font-weight: 500;
  letter-spacing: var(--track-body);
  text-decoration: none;
  border-bottom: 1px solid rgba(245, 237, 225, 0.4);
  padding-bottom: 2px;
  transition: border-color 0.3s var(--ease);
}
.invite__tel:hover { border-color: var(--cream); }

/* ── The footer ────────────────────────────────────────────────────────── */

.foot {
  background: var(--ground-alt);
  padding: clamp(3.5rem, 7vw, 6rem) var(--gutter) clamp(1.75rem, 3vw, 2.5rem);
  border-top: 1px solid var(--ink-08);
}

.foot__inner {
  width: var(--measure);
  margin-inline: auto;
  display: grid;
  gap: clamp(2.5rem, 5vw, 4.5rem);
}

@media (min-width: 56rem) {
  .foot__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    align-items: start;
  }
}

.foot__phrase {
  margin: 0 0 clamp(1.75rem, 3.5vw, 2.5rem);
  font-size: var(--fs-title);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: var(--track-display);
  color: var(--ink);
}

.foot__wa { margin-bottom: clamp(1.75rem, 3.5vw, 2.25rem); }

/* ── The places he keeps ───────────────────────────────────────────────────
   Brought over from the doctor's own site, behaviour and all: each mark is a
   circle that fills from the bottom with its own brand's colour, while the
   glyph turns a full revolution on its Y axis and the ring takes the same
   colour as the fill.

   The fill is a panel parked one full height below the circle and slid up
   into it, not a background-colour change — a colour cannot wipe, and the
   wipe is the point. overflow: hidden on the circle is what crops it to a
   disc on the way past.
   ────────────────────────────────────────────────────────────────────────── */

.soc {
  display: flex;
  gap: 0.625rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.soc a {
  position: relative;
  z-index: 1;
  overflow: hidden;
  display: grid;
  place-items: center;
  /* A tenth bigger than the other round controls on the page. */
  width: 3.3rem;
  height: 3.3rem;
  border-radius: 50%;
  border: 1px solid rgba(42, 43, 47, 0.2);
  background: var(--white);
  color: var(--ink);
  text-decoration: none;
  transition: color 350ms var(--ease), border-color 500ms var(--ease);
}

.soc a::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  background: var(--soc, var(--ink));
  transition: top 500ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.soc a:hover::before,
.soc a:focus-visible::before { top: 0; }

.soc a:hover,
.soc a:focus-visible {
  color: var(--white);
  border-color: var(--soc-line, var(--ink));
}

.soc__mark {
  position: relative;
  z-index: 3;
  display: block;
  width: 1.4375rem;
  height: 1.4375rem;
  transition: transform 500ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.soc a:hover .soc__mark,
.soc a:focus-visible .soc__mark { transform: rotateY(360deg); }

/* Two kinds of glyph, and each has to be told how it is painted: a blanket
   fill turns an outlined mark into a solid block. */
.soc__mark svg { display: block; width: 100%; height: 100%; }

.soc__mark--solid svg { fill: currentColor; stroke: none; }

.soc__mark--line svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Each mark's own colour, which is the only reason any of them is here. */
.soc__wa { --soc: var(--wa);         --soc-line: var(--wa); }
.soc__dr { --soc: var(--doctoralia); --soc-line: var(--doctoralia); }
.soc__fb { --soc: #1877F2;           --soc-line: #1877F2; }
.soc__ig {
  --soc: linear-gradient(135deg, #F9CE34 0%, #EE2A7B 52%, #6228D7 100%);
  --soc-line: #EE2A7B;
}

/* WhatsApp's green takes ink, not white — the same reason its pill does. */
.soc__wa:hover, .soc__wa:focus-visible { color: var(--wa-ink); }

@media (prefers-reduced-motion: reduce) {
  .soc a, .soc a::before, .soc__mark { transition-duration: 1ms; }
  .soc a:hover .soc__mark,
  .soc a:focus-visible .soc__mark { transform: none; }
}

/* ── Contact ───────────────────────────────────────────────────────────── */

.foot__contact {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.25rem);
  margin: 0;
}

@media (min-width: 30rem) {
  .foot__contact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.foot__field dt {
  margin-bottom: 0.45rem;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-mute);
}

.foot__field dd {
  margin: 0;
  font-size: var(--fs-ui);
  line-height: 1.6;
  letter-spacing: var(--track-body);
  color: var(--ink-70);
}

.foot__field a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--ink-12);
  padding-bottom: 1px;
  transition: border-color 0.28s var(--ease);
}
.foot__field a:hover { border-color: var(--ink); }

.foot__legal {
  width: var(--measure);
  margin: clamp(3rem, 6vw, 5rem) auto 0;
  padding-top: clamp(1.25rem, 2.4vw, 1.75rem);
  border-top: 1px solid var(--ink-08);
  font-size: var(--fs-meta);
  letter-spacing: var(--track-body);
  color: var(--ink-mute);
}

/* The brandbook's vertical lockup: the footer is the one place on the page
   with room for the stacked version. */
.foot__logo {
  display: block;
  width: clamp(8rem, 13vw, 10.5rem);
  height: auto;
  margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem);
}