/* ── Sedes ─────────────────────────────────────────────────────────────────
   In the Framer file a FAQ stood in this slot, answering questions about
   business automation that nobody on this page is asking. What belongs here
   is where the doctor actually is, so this is the map from his own site.

   Cards left, map right. The cards carry every piece of information; the map
   is there to place them. If the map never arrives — blocked, offline, still
   loading — the section loses nothing but its illustration.
   ────────────────────────────────────────────────────────────────────────── */

.sedes {
  background: var(--ground-alt);
  overflow-x: clip;
}

/* ── Heading ───────────────────────────────────────────────────────────── */

.sedes__head {
  max-width: 44rem;
  margin: 0 auto clamp(2.25rem, 5vw, 3.5rem);
  text-align: center;
}

.sedes__title { margin-bottom: clamp(0.85rem, 1.8vw, 1.15rem); }
.sedes__lede  { margin-inline: auto; max-width: 40ch; }

/* ── The two columns ───────────────────────────────────────────────────── */

.sedes__body {
  display: grid;
  gap: clamp(1.25rem, 2.6vw, 2.25rem);
}

.sedes__list {
  display: grid;
  gap: clamp(0.75rem, 1.4vw, 1.125rem);
  align-content: start;
}

.sedes__wa { justify-self: start; margin-top: 0.25rem; }


/* ── A sede ────────────────────────────────────────────────────────────────
   A real <button>, so selection is keyboard-operable and announced.
   ────────────────────────────────────────────────────────────────────────── */

.sede {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "mark city"
    "...  place"
    "...  addr"
    "...  foot";
  column-gap: clamp(0.75rem, 1.4vw, 1.125rem);
  row-gap: 0.1875rem;
  width: 100%;
  margin: 0;
  padding: clamp(1.125rem, 2vw, 1.625rem);
  text-align: left;
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  background: var(--white);
  border: 1px solid var(--ink-12);
  border-radius: var(--r-card);
  cursor: pointer;
  transition: background-color 300ms var(--ease),
              border-color 300ms var(--ease),
              box-shadow 300ms var(--ease);
}

.sede:hover { border-color: rgba(42, 43, 47, 0.24); }

/* Chosen: a quiet shift of surface and a rule down the side, nothing louder */
.sede[aria-pressed="true"] {
  background: var(--white);
  border-color: rgba(42, 43, 47, 0.2);
  /* On a cream section every card is already white, so the chosen one can no
     longer lift by changing ground the way it did on the old cream one. The
     rail says which, and the shadow gives it the height the ground used to. */
  box-shadow: inset 3px 0 0 0 var(--indigo),
              0 10px 26px -18px rgba(42, 43, 47, 0.55);
}

.sede__mark {
  grid-area: mark;
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  margin-top: 0.15rem;
  color: var(--ink-mute);
  transition: color 300ms var(--ease);
}
.sede[aria-pressed="true"] .sede__mark { color: var(--indigo); }

.sede__mark svg {
  display: block;
  width: 100%; height: 100%;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sede__city {
  grid-area: city;
  font-size: var(--fs-lead);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: var(--track-body);
  color: var(--ink);
}

.sede__place {
  grid-area: place;
  margin-top: 0.125rem;
  font-size: var(--fs-ui);
  font-weight: 600;
  letter-spacing: var(--track-body);
  color: var(--ink);
}

.sede__addr {
  grid-area: addr;
  margin-top: 0.25rem;
  font-size: var(--fs-meta);
  line-height: 1.5;
  letter-spacing: var(--track-body);
  color: var(--ink-70);
  text-wrap: pretty;
}

.sede__foot { grid-area: foot; margin-top: 0.75rem; }

.sede__act {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: 0 0.875rem;
  border: 1px solid var(--ink-12);
  border-radius: var(--r-pill);
  font-size: var(--fs-meta);
  font-weight: 600;
  letter-spacing: normal;
  color: var(--ink);
  transition: background-color 300ms var(--ease), border-color 300ms var(--ease);
}

.sede[aria-pressed="true"] .sede__act {
  background: var(--indigo);
  border-color: var(--indigo);
  color: var(--white);
}

/* ── The map ───────────────────────────────────────────────────────────────
   A definite height, deliberately: Leaflet measures its container once, at
   construction, so a percentage height leaves it sizing a tile grid against
   nothing.
   ────────────────────────────────────────────────────────────────────────── */

.sedes__map {
  position: relative;
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--ink-12);
}

.sedes__canvas { height: clamp(18rem, 52vh, 34rem); }

/* Shown only until the map covers it, and left in place if it never does. */
.sedes__fallback {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  margin: 0;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  font-size: var(--fs-ui);
  line-height: 1.55;
  letter-spacing: var(--track-body);
  color: var(--ink-70);
  text-wrap: pretty;
}

.sedes--mapped .sedes__fallback { display: none; }

/* Leaflet paints its own chrome; bring it into the palette */
.sedes__map .leaflet-container { font-family: inherit; background: var(--white); }

.sedes__map .leaflet-control-zoom a {
  color: var(--ink);
  background: var(--white);
  border-color: var(--ink-12);
}

.sedes__map .leaflet-control-attribution {
  background: rgba(255, 255, 255, 0.86);
  font-size: var(--fs-label);
  color: var(--ink-mute);
}
.sedes__map .leaflet-control-attribution a { color: var(--indigo); }

.sede__pin {
  display: block;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--white);
  border: 3px solid var(--indigo);
  box-shadow: 0 1px 6px rgba(42, 43, 47, 0.35);
  transition: transform 260ms var(--ease), background-color 260ms var(--ease);
}
.sede__pin.is-on { background: var(--indigo); transform: scale(1.35); }

/* ── From 64rem: cards beside the map ──────────────────────────────────── */

@media (min-width: 64rem) {
  .sedes__body {
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    align-items: start;
  }
  .sedes__canvas { height: clamp(24rem, 58vh, 38rem); }
}

.sede, .sedes__map { will-change: transform; }