/* ══════════════════════════════════════════════════════════════════════
   ESCUELAS — layout de la sección.
   ──────────────────────────────────────────────────────────────────────
   Se carga DESPUÉS de liquid-glass.css y de styles.css, y como product.css
   no define ni un color de tema ni una sombra de vidrio: todo sale de los
   tokens (`--c-ink`, `--accent`, `--glass-*`, `--hairline`…). Si aquí
   aparece un `#fff` escrito a mano, está mal — en oscuro el acento es
   blanco y la tinta que va encima, negra.

   Las FICHAS reutilizan `.product-card` entera (styles.css): el material,
   la foto a sangre, la cejilla, el título, la descripción y el botón son
   exactamente los mismos que en la tienda, y esa es la idea — una escuela
   se lee aquí igual que se lee un producto allí. Este archivo solo añade lo
   que una escuela tiene y un producto no: el número que la ata a su
   chincheta, la distancia, las habilitaciones y la ficha técnica.

   La otra mitad del archivo son los ADORNOS DE LEAFLET. Leaflet trae su
   propia hoja (vendor/leaflet-1.9.4/leaflet.css) con controles grises de
   2011; aquí se reviste con el material de la casa sin tocar ni una línea
   de la suya, que así se puede actualizar sin miedo.
   ══════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════
   ESTRUCTURA
   ══════════════════════════════════════════════════════════════════════ */

/* El hueco largo entre secciones, como en la ficha de producto: aquí cada
   bloque —el buscador, el mapa con la lista, la propuesta a las escuelas—
   es «otra cosa», no un bloque corto que se recorra de un vistazo. */
.schools-main {
  gap: clamp(1.5rem, 3.5vw, 2.5rem);
}

/* ── Migas ─────────────────────────────────────────────────────────────
   Idénticas a las de la ficha de producto y por el mismo motivo: una sola,
   hacia atrás. La tienda no tiene jerarquía de tres niveles que rastrear. */
.schools-crumbs {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  font-size: 0.78rem;
  color: rgb(var(--c-muted));
}

.schools-crumbs__back {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: rgb(var(--c-muted));
  font-weight: 600;
  transition: color 0.2s var(--lg-ease);
}

.schools-crumbs__back:hover {
  color: rgb(var(--c-ink));
}

.schools-crumbs__icon {
  width: 14px;
  height: 14px;
  transform: rotate(180deg);   /* la MISMA flecha del sprite, girada */
  transition: transform 0.3s var(--lg-spring);
}

.schools-crumbs__back:hover .schools-crumbs__icon {
  transform: rotate(180deg) translateX(3px);
}

.schools-crumbs__here {
  color: rgb(var(--c-subtle));
}

/* ── Encabezado de la sección ── */
.schools-intro {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  max-width: 60ch;
}

.schools-intro__title {
  font-size: clamp(1.6rem, 3.4vw, 2.35rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.schools-intro__subtitle {
  color: rgb(var(--c-muted));
  font-size: clamp(0.92rem, 1.4vw, 1.02rem);
  line-height: 1.6;
}

/* ══════════════════════════════════════════════════════════════════════
   BUSCADOR — ciudad, ubicación y radio en una sola pieza
   ──────────────────────────────────────────────────────────────────────
   Los tres mandos van juntos porque contestan a la misma pregunta —«dónde
   busco y hasta dónde»— y separarlos obligaría a decidir dos veces. Es el
   mismo `field-group` sólido de penny.flights: una superficie opaca sobre
   el lienzo, porque lo que se teclea tiene que leerse sin depender de lo
   que pase por detrás.
   ══════════════════════════════════════════════════════════════════════ */

.place-field {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0 0.5rem 0 1.1rem;
  min-height: 56px;
  border-radius: 2.5rem;
  background: rgb(var(--c-elevated));
  box-shadow: var(--fieldgroup-shadow);
  transition: box-shadow 0.25s var(--lg-ease);
}

.place-field:focus-within {
  box-shadow: var(--fieldgroup-shadow), var(--accent-ring);
}

.place-field__icon {
  width: 19px;
  height: 19px;
  flex-shrink: 0;
  color: rgb(var(--c-subtle));
}

.place-field__input {
  flex: 1;
  min-width: 0;
  height: 54px;
  border: none;
  background: none;
  outline: none;
  color: rgb(var(--c-ink));
  font-size: 0.98rem;
  font-weight: 500;
}

.place-field__input::placeholder {
  color: rgb(var(--c-subtle));
  font-weight: 400;
}

.place-field__input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

.place-field__clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 9999px;
  color: rgb(var(--c-muted));
  background: var(--track);
  transition: background 0.2s var(--lg-ease), color 0.2s var(--lg-ease);
}

.place-field__clear svg {
  width: 14px;
  height: 14px;
}

.place-field__clear:hover {
  color: rgb(var(--c-ink));
  background: var(--hover-soft);
}

.place-field__clear[hidden] {
  display: none;
}

/* El filete que separa los mandos dentro de la misma superficie. Un hueco
   no bastaba: sin línea, el desplegable de radio parecía flotar suelto
   dentro del campo de texto. */
.place-field__divider {
  width: 1px;
  height: 26px;
  flex-shrink: 0;
  background: var(--hairline);
}

/* Botón de «mi ubicación». Va DENTRO del campo, a la derecha, y no suelto
   al lado: es la otra forma de contestar a la misma pregunta que el campo
   de texto, no una acción aparte. */
.place-field__locate {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  height: 40px;
  padding: 0 0.9rem;
  flex-shrink: 0;
  border-radius: 9999px;
  color: rgb(var(--c-body));
  background: var(--pill);
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
  transition: background 0.2s var(--lg-ease), color 0.2s var(--lg-ease);
}

.place-field__locate:hover {
  color: rgb(var(--c-ink));
  background: var(--hover-soft);
}

.place-field__locate svg {
  width: 15px;
  height: 15px;
}

/* Mientras el navegador resuelve el GPS —que puede tardar segundos— el
   icono gira. Sin señal, el botón parece no haber hecho nada y se vuelve a
   pulsar, que es justo lo que aborta la primera petición. */
.place-field__locate.is-busy svg {
  animation: locate-spin 1s linear infinite;
}

@keyframes locate-spin {
  to { transform: rotate(360deg); }
}

.place-field__radius {
  appearance: none;
  -webkit-appearance: none;
  height: 40px;
  flex-shrink: 0;
  padding: 0 2rem 0 0.9rem;
  border: none;
  border-radius: 9999px;
  color: rgb(var(--c-body));
  background-color: var(--pill);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.65rem center;
  background-size: 11px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.2s var(--lg-ease), color 0.2s var(--lg-ease);
}

.place-field__radius:hover {
  color: rgb(var(--c-ink));
  background-color: var(--hover-soft);
}

.place-field__radius option {
  color: rgb(var(--c-ink));
  background: rgb(var(--c-elevated));
}

/* ── Sugerencias ──────────────────────────────────────────────────────
   Panel SÓLIDO sobre el vidrio (`.glass-panel-solid`): si fuera translúcido
   se vería el mapa por debajo de los nombres de ciudad y no se leería
   ninguno. Es la misma regla que en penny.flights para cualquier
   desplegable que caiga sobre una superficie con blur. */
.place-suggestions {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  right: 0;
  z-index: 60;
  max-height: 22rem;
  overflow-y: auto;
  padding: 0.4rem;
  border-radius: 1.25rem;
  list-style: none;
}

.place-suggestions[hidden] {
  display: none;
}

.place-option {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.7rem;
  border-radius: 0.9rem;
  cursor: pointer;
}

.place-option.is-active {
  background: var(--pill);
}

.place-option__flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 1.75rem;
  flex-shrink: 0;
  border-radius: 0.5rem;
  border: 1px solid var(--hairline);
  background: var(--pill);
  color: rgb(var(--c-body));
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.place-option__text {
  min-width: 0;
}

.place-option__name {
  display: block;
  color: rgb(var(--c-ink));
  font-size: 0.9rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.place-option__admin {
  display: block;
  color: rgb(var(--c-subtle));
  font-size: 0.75rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.place-status {
  padding: 0.15rem 1.1rem 0;
  color: rgb(var(--c-muted));
  font-size: 0.78rem;
}

.place-status[hidden] {
  display: none;
}

/* ══════════════════════════════════════════════════════════════════════
   TARJETA DE PERMISO
   ──────────────────────────────────────────────────────────────────────
   La petición de ubicación NO se dispara sola al entrar. Un permiso que se
   pregunta sin explicar para qué se deniega, y una denegación en el
   navegador no se puede volver a preguntar: se acabó para siempre en ese
   dispositivo. Así que primero se explica y luego se pide, y el botón que
   dispara el diálogo del navegador lo pulsa una persona.
   ══════════════════════════════════════════════════════════════════════ */

.permission-card {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 2vw, 1.5rem);
  padding: clamp(1rem, 2.2vw, 1.35rem) clamp(1.1rem, 2.5vw, 1.6rem);
}

.permission-card[hidden] {
  display: none;
}

.permission-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 9999px;
  color: var(--accent-on);
  background: var(--accent);
  box-shadow: var(--accent-shadow);
}

.permission-card__icon svg {
  width: 20px;
  height: 20px;
}

.permission-card__text {
  flex: 1;
  min-width: 0;
}

.permission-card__title {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.2rem;
}

.permission-card__body {
  color: rgb(var(--c-muted));
  font-size: 0.85rem;
  line-height: 1.55;
}

.permission-card__actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 1.05rem;
  border-radius: 2.5rem;
  color: rgb(var(--c-body));
  background: var(--pill);
  font-size: 0.79rem;
  font-weight: 700;
  white-space: nowrap;
  transition: background 0.25s var(--lg-ease), color 0.25s var(--lg-ease);
}

.btn-ghost:hover {
  color: rgb(var(--c-ink));
  background: var(--hover-soft);
}

/* ══════════════════════════════════════════════════════════════════════
   RÓTULO DEL CENTRO Y RECUENTO
   ══════════════════════════════════════════════════════════════════════ */

.schools-locus {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.schools-locus__where {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  min-width: 0;
}

.schools-locus__label {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* «aproximada»: sale cuando el punto lo ha deducido una IP y puede estar a
   cincuenta kilómetros. Sin este aviso, una lista ordenada desde el sitio
   equivocado parece una lista mal hecha. */
.schools-locus__note {
  padding: 0.1rem 0.5rem;
  border-radius: 9999px;
  background: var(--pill);
  color: rgb(var(--c-subtle));
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.schools-locus__note[hidden] {
  display: none;
}

.schools-locus__count {
  color: rgb(var(--c-muted));
  font-size: 0.82rem;
  font-weight: 600;
}

/* ══════════════════════════════════════════════════════════════════════
   LA REJILLA: LISTA + MAPA
   ──────────────────────────────────────────────────────────────────────
   En escritorio, dos columnas con el MAPA PEGADO: se leen las fichas y el
   mapa no se va de la pantalla, que es justo lo que hace falta para
   entender dónde cae cada una. Es la misma razón por la que la columna de
   compra de una ficha de producto va pegada.

   Por debajo de 1040 px se apila y el mapa sube ARRIBA (order: -1): en un
   móvil, un mapa al final de una lista de seis fichas es un mapa que no ve
   nadie, y aquí el mapa es la mitad de la respuesta.
   ══════════════════════════════════════════════════════════════════════ */

.schools-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1rem, 2.2vw, 1.75rem);
  align-items: start;
}

@media (min-width: 1040px) {
  .schools-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  }
}

.school-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(1rem, 2vw, 1.35rem);
  align-items: stretch;
}

/* ── Ficha ───────────────────────────────────────────────────────────
   Hereda `.product-card` entera. Lo que cambia es que NO es un enlace:
   una escuela tiene dos destinos (su web y su chincheta) y envolverla en
   un <a> obligaría a elegir uno. Es un <article> con `tabindex`, y por eso
   el realce de foco hay que escribirlo aquí — `.product-card:focus-visible`
   de styles.css solo se aplica al ancla. */
.school-card {
  cursor: pointer;
}

.school-card:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}

/* La ficha SELECCIONADA. No cambia de color —no hay color de marca— sino
   de canto: un anillo de tinta, que es lo mismo que distingue a la
   chincheta activa en el mapa. Las dos piezas se reconocen entre sí. */
.school-card.is-selected {
  box-shadow: var(--glass-shadow), 0 0 0 2px var(--accent);
}

/* El NÚMERO. Es lo que ata la ficha a su chincheta: sin él, seis puntos
   iguales en el mapa y seis fichas debajo son dos listas que no se hablan.
   Va en la esquina de la foto, con el mismo contraste propio que las
   insignias de dato (scrim oscuro y letra blanca en los dos temas): se
   pinta sobre una foto de la que no se sabe el brillo. */
.school-card__index {
  position: absolute;
  z-index: 2;
  top: 0.75rem;
  left: 0.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 26px;
  padding: 0 0.4rem;
  border-radius: 9999px;
  background: rgba(15, 23, 42, 0.72);
  color: #fff;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.school-badge--verified {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
}

.school-badge__icon {
  width: 11px;
  height: 11px;
}

/* La línea de sitio: distancia primero, ciudad después. En un buscador por
   proximidad la distancia es el dato que decide, y va en tinta plena
   mientras la ciudad se queda en gris. */
.school-card__where {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin: -0.25rem 0 0.7rem;
  font-size: 0.82rem;
}

.school-card__distance {
  color: rgb(var(--c-ink));
  font-weight: 700;
}

.school-card__place {
  color: rgb(var(--c-subtle));
}

.school-card__place::before {
  content: '·';
  margin-right: 0.5rem;
  color: rgb(var(--c-faint));
}

/* Habilitaciones. Son el dato por el que se elige escuela cuando ya se sabe
   qué se quiere sacar, así que van a la vista y no dentro de un acordeón. */
.school-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-bottom: 0.9rem;
  list-style: none;
}

.school-chip {
  padding: 0.2rem 0.55rem;
  border-radius: 9999px;
  border: 1px solid var(--hairline);
  background: var(--pill);
  color: rgb(var(--c-body));
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* Ficha técnica: flota e idiomas de instrucción. En dos columnas cuando
   caben —etiqueta arriba en pequeño, dato debajo—, que es como se lee una
   tabla de datos y no como se lee un párrafo. */
.school-card__facts {
  display: grid;
  gap: 0.55rem;
  margin-bottom: 1.1rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--hairline);
}

.school-fact dt {
  color: rgb(var(--c-subtle));
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 0.15rem;
}

.school-fact dd {
  color: rgb(var(--c-body));
  font-size: 0.82rem;
  line-height: 1.5;
}

.school-card__cta {
  width: 100%;
  justify-content: center;
}

/* Sin web, el botón deja de ser un botón: mismo sitio y misma forma, pero
   apagado. Enseñar una llamada a la acción que no lleva a ningún sitio es
   peor que no enseñar ninguna. */
.school-card__cta--inert {
  background: var(--pill);
  color: rgb(var(--c-muted));
  box-shadow: none;
  cursor: default;
}

.school-card:hover .school-card__cta--inert {
  background: var(--pill);
  box-shadow: none;
}

/* ── Sin resultados ── */
.schools-empty {
  padding: clamp(1.75rem, 5vw, 3rem);
  text-align: center;
}

.schools-empty[hidden] {
  display: none;
}

.schools-empty__title {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}

.schools-empty__text {
  color: rgb(var(--c-muted));
  font-size: 0.9rem;
  line-height: 1.6;
  max-width: 44ch;
  margin: 0 auto 1.25rem;
}

.schools-empty__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.schools-empty__actions .btn-ghost[hidden] {
  display: none;
}

/* ══════════════════════════════════════════════════════════════════════
   MAPA
   ══════════════════════════════════════════════════════════════════════ */

/* `isolation: isolate` no es un adorno: Leaflet reparte z-index hasta 1000
   entre sus paneles y controles, y sin un contexto de apilamiento propio
   los mandos del mapa se subirían por encima de la pastilla de idioma de
   la cabecera. Con esto, todo lo suyo se queda dentro de su caja. */
.map-shell {
  position: relative;
  isolation: isolate;
  z-index: 0;
  overflow: hidden;
  border-radius: 1.25rem;
  height: clamp(300px, 46vh, 420px);
  box-shadow: var(--glass-shadow);
}

@media (min-width: 1040px) {
  .map-shell {
    position: sticky;
    top: 1.25rem;
    /* Alto de pantalla menos el respiro de arriba y abajo, con un techo:
       más de 800 px de mapa no añade información, solo obliga a mover más
       la cabeza. */
    height: min(calc(100vh - 2.5rem), 780px);
  }
}

/* En pantallas apiladas el mapa va PRIMERO. Es la mitad de la respuesta y
   al final de la lista no lo vería nadie. */
@media (max-width: 1039px) {
  .schools-layout > .map-shell {
    order: -1;
  }
}

.map-shell[hidden] {
  display: none;
}

#map {
  width: 100%;
  height: 100%;
  background: rgb(var(--c-chip));
}

/* Pantalla completa: el MISMO contenedor llevado a `fixed`, no un segundo
   mapa dentro de una ventana modal. Un segundo mapa significaría descargar
   otra vez todos los mosaicos y mantener dos encuadres sincronizados. */
.map-shell.is-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 300;
  height: 100dvh;
  max-height: none;
  border-radius: 0;
  box-shadow: none;
}

body.has-fullscreen-map {
  overflow: hidden;
}

.map-expand {
  position: absolute;
  z-index: 10;
  top: 0.75rem;
  right: 0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  height: 36px;
  padding: 0 0.8rem;
  border-radius: 9999px;
  color: var(--dock-ink-hover);
  background: linear-gradient(180deg, var(--dock-top), var(--dock-bottom));
  -webkit-backdrop-filter: blur(7px) saturate(170%);
  backdrop-filter: blur(7px) saturate(170%);
  box-shadow: var(--dock-shadow);
  font-size: 0.75rem;
  font-weight: 700;
  transition: box-shadow 0.25s var(--lg-ease), background 0.25s var(--lg-ease);
}

.map-expand:hover {
  box-shadow: var(--dock-hover-shadow);
}

.map-expand svg {
  width: 14px;
  height: 14px;
}

/* Con el mapa abierto el botón dice «cerrar»: el icono se cruza y el texto
   lo cambia el JS. */
.map-shell.is-fullscreen .map-expand__open,
.map-shell:not(.is-fullscreen) .map-expand__close {
  display: none;
}

.map-notice {
  padding: 1.25rem;
  border-radius: 1.25rem;
  background: var(--pill);
  color: rgb(var(--c-muted));
  font-size: 0.85rem;
  text-align: center;
}

.map-notice[hidden] {
  display: none;
}

/* ── Chinchetas ───────────────────────────────────────────────────────
   El icono de Leaflet es una caja de tamaño CERO anclada exactamente en la
   coordenada; la pastilla de dentro se centra sola con un `transform`. Es
   el mismo truco que las etiquetas de precio de penny.flights: darle a
   Leaflet un tamaño real obligaría a medir el texto antes de pintar. */
.school-pin {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 26px;
  padding: 0 0.35rem;
  border-radius: 9999px;
  background: var(--accent);
  color: var(--accent-on);
  font-family: 'Inter', sans-serif;
  font-size: 0.74rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  box-shadow:
    0 2px 8px rgb(var(--accent-rgb) / 0.35),
    0 0 0 2px rgb(var(--c-elevated));
  transition: transform 0.3s var(--lg-spring), box-shadow 0.25s var(--lg-ease);
}

.school-pin:hover {
  transform: translate(-50%, -50%) scale(1.12);
}

.school-pin--active {
  transform: translate(-50%, -50%) scale(1.22);
  box-shadow:
    0 6px 16px rgb(var(--accent-rgb) / 0.45),
    0 0 0 3px rgb(var(--c-elevated));
}

/* El punto del visitante. Tinta con anillo del color de la superficie, para
   que se despegue del mapa en los dos temas, y un halo que late despacio:
   es lo único del mapa que no es un resultado, y tiene que leerse como
   «tú estás aquí» sin necesidad de rótulo. */
.centre-dot {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);
  display: block;
  width: 14px;
  height: 14px;
  border-radius: 9999px;
  background: var(--accent);
  box-shadow:
    0 0 0 2.5px rgb(var(--c-elevated)),
    0 2px 6px rgba(0, 0, 0, 0.3);
}

.centre-dot__pulse {
  position: absolute;
  inset: -6px;
  border-radius: 9999px;
  background: rgb(var(--accent-rgb) / 0.18);
  animation: centre-pulse 2.6s var(--lg-ease) infinite;
}

@keyframes centre-pulse {
  0%   { transform: scale(0.6); opacity: 0.9; }
  70%  { transform: scale(1.9); opacity: 0; }
  100% { transform: scale(1.9); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .centre-dot__pulse {
    animation: none;
    opacity: 0.35;
  }
}

/* ── Revestimiento de Leaflet ────────────────────────────────────────
   Su hoja se deja intacta (así se puede actualizar la carpeta de vendor sin
   revisar nada); lo que cambia son los controles, que vienen con el gris de
   2011 y no saben nada de modo oscuro. */
.leaflet-container {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: rgb(var(--c-chip));
}

.leaflet-bar a,
.leaflet-bar a:hover {
  width: 32px;
  height: 32px;
  line-height: 32px;
  color: rgb(var(--c-body));
  background: rgb(var(--c-elevated));
  border-bottom-color: var(--hairline);
}

.leaflet-bar a:hover {
  background: rgb(var(--c-elevated-hover));
}

.leaflet-bar {
  border: none;
  border-radius: 0.75rem;
  overflow: hidden;
  box-shadow: var(--dock-shadow);
}

.leaflet-bar a:first-child { border-radius: 0.75rem 0.75rem 0 0; }
.leaflet-bar a:last-child  { border-radius: 0 0 0.75rem 0.75rem; }

/* La atribución de OpenStreetMap y CARTO se queda SIEMPRE: los mosaicos son
   suyos y su licencia la exige. Lo que se hace es vestirla —pequeña, en el
   canto, con el vidrio de la casa— en vez de esconderla. */
.leaflet-control-attribution {
  padding: 0.15rem 0.5rem;
  border-radius: 0.6rem 0 0 0;
  background: rgb(var(--c-elevated) / 0.82);
  color: rgb(var(--c-subtle));
  font-size: 0.62rem;
}

.leaflet-control-attribution a {
  color: rgb(var(--c-muted));
  text-decoration: underline;
}

/* ══════════════════════════════════════════════════════════════════════
   PROPUESTA A LAS ESCUELAS
   ──────────────────────────────────────────────────────────────────────
   La parte comercial de la página, y va al FINAL a propósito: quien entra
   buscando dónde aprender a volar no tiene por qué leer una oferta antes
   de encontrar lo que venía a buscar. Quien viene a mirar cómo salir en
   este mapa, en cambio, baja hasta aquí sin problema.
   ══════════════════════════════════════════════════════════════════════ */

.schools-pitch {
  padding: clamp(1.75rem, 4.5vw, 3rem);
  display: flex;
  flex-direction: column;
  gap: clamp(1.25rem, 3vw, 2rem);
}

.schools-pitch__head {
  max-width: 58ch;
}

.schools-pitch__title {
  font-size: clamp(1.35rem, 2.8vw, 1.9rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0.35rem 0 0.6rem;
}

.schools-pitch__text {
  color: rgb(var(--c-muted));
  font-size: 0.95rem;
  line-height: 1.65;
}

.schools-pitch__points {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: clamp(1rem, 2.5vw, 1.75rem);
  list-style: none;
}

.schools-pitch__point h3 {
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 0.35rem;
}

.schools-pitch__point p {
  color: rgb(var(--c-muted));
  font-size: 0.86rem;
  line-height: 1.6;
}

.schools-pitch__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-bottom: 0.6rem;
  border-radius: 9999px;
  border: 1px solid var(--hairline-strong);
  color: rgb(var(--c-muted));
  font-size: 0.72rem;
  font-weight: 800;
}

.schools-pitch__cta {
  align-self: flex-start;
}

/* Aviso de la ficha de demostración. Va en tinta plena y arriba del todo:
   quien abre la página con `?demo=1` tiene que ver de un vistazo que lo que
   está mirando no es lo que ve el resto del mundo. */
.demo-notice {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1.1rem;
  border-radius: 2.5rem;
  background: var(--accent);
  color: var(--accent-on);
  font-size: 0.8rem;
  font-weight: 600;
  box-shadow: var(--accent-shadow);
}

.demo-notice[hidden] {
  display: none;
}

.demo-notice svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════════════ */

@media (max-width: 760px) {
  /* El campo se parte en dos filas: texto arriba, mandos abajo. En una
     sola fila, a 360 px de ancho, el campo de escritura se quedaba en
     ochenta píxeles y no cabía ni «Sabadell». */
  .place-field {
    flex-wrap: wrap;
    padding: 0.6rem 0.75rem;
    border-radius: 1.5rem;
  }

  .place-field__icon {
    margin-left: 0.35rem;
  }

  .place-field__input {
    height: 40px;
    flex-basis: 60%;
  }

  .place-field__divider {
    display: none;
  }

  .place-field__locate,
  .place-field__radius {
    flex: 1;
    justify-content: center;
  }

  .permission-card {
    flex-direction: column;
    align-items: flex-start;
  }

  .permission-card__actions {
    width: 100%;
  }

  .permission-card__actions .btn-primary,
  .permission-card__actions .btn-ghost {
    flex: 1;
    justify-content: center;
  }

  .schools-pitch__cta {
    align-self: stretch;
    justify-content: center;
  }
}