/* Door pages: pediatría / estética */

.door-hero { min-height: 100svh; padding: clamp(96px, 13vh, 132px) var(--m) clamp(40px, 6vh, 72px); align-items: end; row-gap: 32px; }
.door-hero__photo { grid-column: 7 / 13; grid-row: 1 / 3; align-self: start; justify-self: end; width: min(100%, calc((100svh - 170px) * 0.8)); }
.door-hero__photo img { view-transition-name: var(--vt); }
.door-hero__copy { grid-column: 1 / 7; grid-row: 2; display: grid; gap: 24px; align-content: end; }
.door-hero__copy h1 { font-size: var(--t-display); line-height: 0.92; }
.door-hero__small { grid-column: 2 / 4; grid-row: 1; align-self: start; margin-top: 4vh; width: min(100%, 180px); }
.door-hero__back { font-size: var(--t-small); color: var(--muted); text-decoration: none; display: inline-flex; gap: 8px; align-items: center; min-height: 44px; }
.door-hero__back svg { width: 16px; height: 16px; transform: rotate(180deg); }
@media (max-width: 860px) {
  .door-hero { display: flex; flex-direction: column; align-items: stretch; padding-top: 84px; min-height: 0; }
  .door-hero__photo { width: 82%; align-self: flex-end; }
  .door-hero__small { display: none; }
  .door-hero__copy { margin-top: 28px; gap: 18px; }
  .door-hero__copy h1 { font-size: var(--t-display); }
}

/* Services: the same row of cards as on the phone. The card at the start is in focus;
   the next ones wait to its right, dimmed, and arrows or a swipe bring each one forward */
.rows { padding-top: var(--section); align-items: start; }
.rows__head { grid-column: 1 / 13; }
.rows__set { grid-column: 1 / 13; justify-self: stretch; min-width: 0; margin-top: clamp(32px, 4vw, 56px); }
.rows__group {
  font-family: var(--text); font-size: var(--t-small); font-weight: 500; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--gold-ink); margin-bottom: 18px;
}
/* A thin beige-gold edge, the colour of the logo ring, on the service cards and the visit photos */
.row { border: 1px solid var(--gold-light); }
.row h4 { font-family: var(--display); font-weight: 400; color: var(--purple); margin: 0; text-wrap: balance; }
.row h3, .row h4 { font-size: clamp(23px, 1.8vw, 29px); line-height: 1.12; }

@media (min-width: 861px) {
  .rows__list {
    --card: clamp(300px, 25vw, 380px);
    display: flex; gap: 20px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    margin-inline: calc(var(--m) * -1); padding: 8px var(--m) 12px; scroll-padding-inline: var(--m);
    scrollbar-width: none;
  }
  .rows__list::-webkit-scrollbar { display: none; }
  /* Room after the last card, so every card (the last one too) can come to the front */
  .rows__list::after { content: ""; flex: 0 0 calc(100% - var(--card) - 20px); }
  .row {
    flex: 0 0 var(--card); margin: 0; scroll-snap-align: start;
    display: flex; flex-direction: column; gap: 18px;
    background: var(--white); border-radius: 24px; padding: 14px 14px 28px;
    transform-origin: left center;
    transition: opacity 500ms ease, transform 600ms var(--ease-out);
  }
  .row > div { padding-inline: 10px; }
  .row p { margin-top: 10px; }
  .row .print { order: -1; aspect-ratio: 4 / 5; border-radius: 16px; }
  .row .print img { object-position: 50% 18%; }
  .rows__list.is-live .row:not(.is-focus) { opacity: 0.45; transform: scale(0.95); cursor: pointer; }
  @media (hover: hover) and (pointer: fine) {
    .rows__list.is-live .row:not(.is-focus):hover { opacity: 0.75; }
  }
  .rows .carousel-dots { display: flex; margin-top: 28px; }
  .rows .carousel-arrow { display: grid; }
}
@media (max-width: 860px) {
  .rows__head { padding-top: 0; }
  .rows__set { text-align: center; }
}
@media (prefers-reduced-motion: reduce) { .row { transition: none; } }

/* How a visit goes: three equal steps side by side, read left to right */
.steps { padding-top: var(--section); row-gap: 40px; }
.steps__head { grid-column: 1 / 13; }
.step { grid-column: span 4; display: grid; gap: 14px; align-content: start; }
.step .print { margin-bottom: 8px; border-radius: 20px; border: 1px solid var(--gold-light); }
/* On the phone the whole step is a card, so the edge goes round the card instead */
@media (max-width: 860px) { .step .print { border: 0; } .step { border: 1px solid var(--gold-light); } }
.step .print img { object-position: 50% 18%; }
.step h3 { font-size: var(--t-h3); }
.step p { max-width: 34ch; }
@media (max-width: 860px) {
  .steps { display: flex; flex-direction: column; align-items: center; text-align: center; row-gap: 0; }
  .steps__head { margin-bottom: 8px; }
  .step { width: 84%; margin-top: 48px; justify-items: center; }
  .step p { margin-inline: auto; }
}

.agenda--door { margin-top: var(--section); }

/* Each door keeps its own colour: Pediatría on warm sand, Estética on plum with gold.
   The cut-out photographs sit on the hero's own colour, so she stands on the page itself. */
.page-pediatria .door-hero { background: var(--sand); }
.page-pediatria .door-hero .print--field { background: var(--sand); }
.page-estetica .door-hero { background: var(--plum); color: var(--on-plum); }
.page-estetica .door-hero h1 { color: var(--ivory); }
.page-estetica .door-hero .print--field { background: var(--plum); }
.page-estetica .door-hero .btn { background: var(--gold-light); color: var(--plum); }
@media (hover: hover) and (pointer: fine) { .page-estetica .door-hero .btn:hover { background: var(--ivory); } }
.js .page-estetica .door-hero [data-unveil].print--field { background: var(--plum); }
.js .page-pediatria .door-hero [data-unveil].print--field { background: var(--sand); }
/* Over the plum hero the bar is light until it picks up its own ground */
.page-estetica .nav:not(.is-scrolled):not(.is-open) .nav__brand,
.page-estetica .nav:not(.is-scrolled):not(.is-open) .nav__links a:not(.btn),
.page-estetica .nav:not(.is-scrolled):not(.is-open) .nav__menu { color: var(--ivory); }
.page-estetica .nav:not(.is-scrolled):not(.is-open) .nav__brand img { filter: brightness(0) invert(94%); }
.page-estetica .nav:not(.is-scrolled):not(.is-open) .btn { background: var(--gold-light); color: var(--plum); }

/* Phones: centred column on the door pages too */
@media (max-width: 860px) {
  .door-hero { align-items: center; text-align: center; }
  .door-hero__photo { width: 84%; align-self: center; }
  .door-hero__copy { justify-items: center; }
  .door-hero__copy .lede { margin-inline: auto; }
  .rows { text-align: center; justify-items: center; }
}