/* greenfeemap · Menta
   ────────────────────────────────────────────────────────────────
   La dirección visual elegida el 05-09-2026. El razonamiento y los
   tokens están en docs/diseno.md; esto es su aplicación.

   Tarjetas de blanco puro flotando sobre un fondo con el verde apenas
   insinuado. Es verde sin ser verde, y eso hace que el blanco se lea
   limpio.                                                            */

/* ── Tokens ───────────────────────────────────────────────────── */
:root{
  /* Sin esto el navegador sigue pintando de oscuro lo que dibuja él —barras
     de scroll, controles de formulario, el fondo antes de que cargue el CSS—
     aunque la hoja no tenga un solo color oscuro. Quitar el tema no basta:
     hay que decir en qué esquema se está. */
  color-scheme:light;
  --fondo:#F2F6F2; --tarjeta:#FFFFFF;
  --tinta:#152019; --tinta-2:#657A6B; --tinta-3:#8FA396;
  --linea:#EDF1EC; --linea-2:#DCE5DD;
  --verde:#2C7A57; --sobre-verde:#FFFFFF;
  --aviso:#A8502E; --aviso-bg:#FBF0EA;
  --sombra:0 1px 2px rgba(21,32,25,.05), 0 12px 28px -18px rgba(21,32,25,.35);
  --sombra-corta:0 1px 2px rgba(21,32,25,.06);
  --r-g:20px; --r-m:16px; --r-s:12px;
}
/* El tema oscuro se retiró el 08-09-2026, por decisión de Hugo. Antes había
   tres estados —claro, `prefers-color-scheme:dark` y `[data-theme="dark"]`—
   y ahora hay uno solo. Si algún día vuelve, la regla que lo hacía seguro
   sigue valiendo y está en docs/diseno.md: ningún color se define solo
   dentro de un bloque de tema, o se acaba publicando el texto de un tema
   sobre el fondo del otro. */

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--fondo); color:var(--tinta);
  font:400 16px/1.6 "Schibsted Grotesk",system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
img{max-width:100%}

.envoltorio{max-width:44rem;margin:0 auto;padding:0 1.125rem 5rem}
.rotulo{font:400 .75rem/1.5 "IBM Plex Mono",ui-monospace,monospace;color:var(--tinta-3)}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums}

/* ── Barra ────────────────────────────────────────────────────── */
.barra-sup{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1rem 1.125rem;max-width:44rem;margin:0 auto;
}
/* La marca NO se cuelga de `.barra-sup`: también vive dentro del panel del
   mapa y en el 404. Cuando estaba anidada ahí, en el panel salía subrayada
   —heredaba el subrayado de los enlaces— y con el pin en negro, porque el
   SVG usa `currentColor` y no le llegaba el verde. */
.marca{
  display:inline-flex;align-items:center;gap:.5rem;
  font-weight:700;letter-spacing:-.02em;text-decoration:none;color:var(--tinta);
}
.marca .marca-pin{width:19px;height:23px;flex:none;display:block;color:var(--verde)}
.marca:hover .marca-pin{color:var(--tinta)}
.barra-sup .volver{
  font-size:.875rem;color:var(--tinta-2);text-decoration:none;
  display:inline-flex;align-items:center;gap:.375rem;
}
.barra-sup .volver:hover{color:var(--verde)}

/* Las temporadas: el literal del club, que es lo que se puede sostener. */
.temporadas{margin:0;display:grid;gap:.5rem}
.temporadas dt{font-weight:600;font-size:.9375rem}
.temporadas dd{margin:0 0 .25rem;color:var(--tinta-2);font-size:.875rem}

/* La salida de la tarjeta sin precio: un botón a la web del club y su
   teléfono. Es lo que convierte el hueco en un paso siguiente. */
.salidas{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;margin-top:1rem}
.salidas .boton{font-size:.875rem;padding:.5rem .875rem}
.salidas .tel{
  font:500 .9375rem/1 "IBM Plex Mono",ui-monospace,monospace;
  color:var(--tinta-2);text-decoration:none;
}
.salidas .tel:hover{color:var(--verde)}

/* ── «Soy socio de…» ──────────────────────────────────────────── */
/* La mitad del producto. Va ARRIBA de los filtros a propósito: elegir club
   cambia lo que dice cada pin, y los filtros solo esconden pines. */
/* Va dentro del panel, así que NO lleva ancho máximo ni márgenes propios:
   los tenía de cuando era una barra a lo ancho de la página, y ahí dentro lo
   que hacían era descolocarlo. */
.soy-socio{display:flex;flex-direction:column;align-items:stretch;gap:.4375rem}
.soy-socio label{display:block}
.soy-socio input{
  width:100%;min-width:0;font:inherit;font-size:.9375rem;
  padding:.5rem .75rem;border:1px solid var(--linea-2);border-radius:999px;
  background:var(--tarjeta);color:var(--tinta);
}
.soy-socio input::placeholder{color:var(--tinta-3)}

/* El desplegable propio. Se apoya sobre el mapa, así que necesita fondo
   opaco y estar por encima de los pines. */
.combo{position:relative}
.sugerencias{
  position:absolute;top:calc(100% + .25rem);left:0;right:0;z-index:6;
  margin:0;padding:.25rem;list-style:none;max-height:14rem;overflow:auto;
  background:var(--tarjeta);border-radius:var(--r-m);box-shadow:var(--sombra);
}
.sugerencias li{
  display:flex;align-items:baseline;justify-content:space-between;gap:.5rem;
  padding:.4375rem .5rem;border-radius:.5rem;cursor:pointer;font-size:.875rem;
}
.sugerencias li b{font-weight:500;color:var(--tinta);min-width:0}
.sugerencias li span{
  flex:none;font:400 .6875rem/1 "IBM Plex Mono",ui-monospace,monospace;color:var(--tinta-3);
}
.sugerencias li:hover,.sugerencias li.marcada{background:var(--fondo)}
.sugerencias li[aria-selected="true"] b{font-weight:600}
.soy-socio input:focus{outline:2px solid var(--verde);outline-offset:1px;border-color:transparent}
.soy-socio button{
  align-self:flex-start;font:inherit;font-size:.8125rem;cursor:pointer;
  padding:.4375rem .75rem;border:1px solid var(--linea-2);border-radius:999px;
  background:var(--tarjeta);color:var(--tinta-2);
}
.soy-socio button:hover{color:var(--verde);border-color:var(--verde)}
.aviso-club{margin:0;font-size:.8125rem;line-height:1.5;color:var(--tinta-2)}

/* ── Prosa: las páginas legales ───────────────────────────────── */
/* Medida corta a propósito: son textos para leer, no para escanear, y a
   partir de unos 65 caracteres por línea el ojo pierde el renglón. */
.prosa{max-width:36rem;margin:0 auto;padding:1rem 1.125rem 1rem}
.prosa h1{font-size:1.75rem;font-weight:700;letter-spacing:-.03em;margin:.5rem 0 1.5rem}
.prosa h2{
  font-size:.75rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--tinta-3);margin:2rem 0 .625rem;
}
.prosa p{margin:0 0 .875rem;line-height:1.7}
.prosa b{font-weight:600}
.prosa a{color:var(--verde);text-underline-offset:2px}

/* ── El pie del sitio ─────────────────────────────────────────── */
/* Va en todas las páginas desde `pagina()`. Tipografía pequeña y tinta
   secundaria: dice de dónde sale el dato, que importa, pero no compite con
   el precio, que es el producto. */
.pie-sitio{
  max-width:44rem;margin:2rem auto 0;padding:.875rem 1.125rem 1.75rem;
  border-top:1px solid var(--linea);
  font-size:.75rem;line-height:1.55;color:var(--tinta-3);
  display:flex;justify-content:space-between;align-items:baseline;
  gap:1rem;flex-wrap:wrap;
}
.pie-sitio p{margin:0}
.pie-sitio b{font-weight:600;color:var(--tinta)}
.pie-sitio a{color:var(--tinta-2);text-decoration:underline;text-underline-offset:2px}
.pie-sitio a:hover{color:var(--verde)}
.pie-sitio nav{display:flex;flex-wrap:wrap;gap:.625rem;flex:none}
.pie-sitio nav a{text-decoration:none;color:var(--tinta-2)}
.pie-sitio nav a:hover{color:var(--verde)}

/* ── Cabecera de ficha ────────────────────────────────────────── */
.cabecera{display:flex;align-items:center;gap:.875rem;margin:1rem 0 1.375rem}
.escudo{
  width:52px;height:52px;flex:none;display:grid;place-items:center;overflow:hidden;
  background:var(--tarjeta);border-radius:14px;box-shadow:var(--sombra-corta);
  font:700 1.25rem/1 "Schibsted Grotesk",sans-serif;color:var(--verde);
}
.escudo img{width:100%;height:100%;object-fit:contain;padding:6px}
h1{margin:0;font:700 1.875rem/1.05 "Schibsted Grotesk",sans-serif;letter-spacing:-.03em;text-wrap:balance}
.sitio{margin:.188rem 0 0;font-size:.875rem;color:var(--tinta-2)}
.sitio b{color:var(--tinta);font-weight:600}

/* ── Perfiles ─────────────────────────────────────────────────── */
.perfiles{display:flex;flex-wrap:wrap;gap:.375rem;margin-bottom:1rem}
.perfiles button{
  padding:.5rem .813rem;border-radius:999px;border:0;cursor:pointer;
  background:var(--tarjeta);color:var(--tinta-2);
  font:500 .813rem/1 "Schibsted Grotesk",sans-serif;
  box-shadow:var(--sombra-corta);transition:.15s;
}
.perfiles button:hover{color:var(--tinta)}
.perfiles button[aria-pressed="true"]{
  background:var(--tinta);color:var(--fondo);font-weight:600;box-shadow:none;
}
.perfiles button:focus-visible{outline:2px solid var(--verde);outline-offset:2px}

/* ── La tarjeta del precio ────────────────────────────────────── */
.precio{background:var(--tarjeta);border-radius:var(--r-g);box-shadow:var(--sombra);overflow:hidden}
.precio-cuerpo{padding:1.5rem 1.375rem 1.25rem}
.cifra{display:flex;align-items:flex-start;gap:.25rem}
.cifra b{
  font:700 clamp(3rem,11vw,4.25rem)/.86 "Schibsted Grotesk",sans-serif;
  letter-spacing:-.055em;font-variant-numeric:tabular-nums;
}
.cifra i{font:600 1.5rem/1 inherit;font-style:normal;color:var(--tinta-3);margin-top:.313rem}
.cifra .quien{margin-left:auto;text-align:right;font-size:.813rem;color:var(--tinta-2);
  line-height:1.45;padding-top:.375rem;max-width:11rem;text-wrap:balance}
/* Sin atajo `font`: aquí iba `font:600 .875rem/1.45 inherit` y `inherit` no es
   una familia válida, así que la regla entera se invalidaba y este bloque
   heredaba el tamaño de la cifra —4,25 rem— y se salía de la tarjeta. */
.cifra .quien b{display:block;font-size:.875rem;font-weight:600;line-height:1.45;
  letter-spacing:0;color:var(--tinta)}
/* Regla 4: «no lo sé todavía» es un estado diseñado, no una tarjeta vacía */
.precio.sin-dato .cifra b{font-size:1.5rem;line-height:1.3;color:var(--tinta-3);letter-spacing:-.02em}

.barra-datos{
  display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;margin-top:1.125rem;
  padding-top:.938rem;border-top:1px solid var(--linea);
  font-size:.875rem;color:var(--tinta-2);
}
.barra-datos b{color:var(--tinta);font-weight:600}
/* Regla 1: la fecha y la fuente van pegadas al precio, dentro de su tarjeta */
.procedencia{
  margin-top:.938rem;padding-top:.813rem;border-top:1px solid var(--linea);
  font:400 .75rem/1.5 "IBM Plex Mono",ui-monospace,monospace;color:var(--tinta-3);
}
.procedencia a{color:var(--tinta-2);text-underline-offset:2px}
.procedencia a:hover{color:var(--verde)}
/* Una condición que te IMPIDE jugar no es una nota gris */
.excluye{
  display:flex;gap:.625rem;padding:.813rem 1.375rem;
  background:var(--aviso-bg);color:var(--aviso);font-size:.875rem;line-height:1.5;
}
.excluye svg{flex:none;margin-top:.188rem}
.etiquetas{display:flex;flex-wrap:wrap;gap:.375rem;padding:0 1.375rem 1.125rem}
.etiqueta{
  font:500 .75rem/1 "IBM Plex Mono",ui-monospace,monospace;
  padding:.375rem .563rem;border-radius:6px;
  background:var(--fondo);color:var(--tinta-2);
}

/* ── Prosa ────────────────────────────────────────────────────── */
.prosa{margin:1.75rem 0 0;max-width:36rem}
.prosa p{margin:0 0 .813rem;color:var(--tinta-2)}
.prosa p:first-child{color:var(--tinta)}

/* ── Secciones plegadas ───────────────────────────────────────── */
.secciones{margin-top:1.75rem;display:flex;flex-direction:column;gap:.625rem}
details{background:var(--tarjeta);border-radius:var(--r-m);box-shadow:var(--sombra-corta);overflow:hidden}
summary{
  list-style:none;cursor:pointer;padding:1rem 1.25rem;
  display:flex;align-items:center;gap:.75rem;font-weight:600;font-size:.938rem;
}
summary::-webkit-details-marker{display:none}
summary:focus-visible{outline:2px solid var(--verde);outline-offset:-2px}
summary .cuenta{margin-left:auto;font-weight:400}
summary .flecha{transition:transform .18s;color:var(--tinta-3);flex:none}
details[open] summary .flecha{transform:rotate(90deg)}
details[open] summary{border-bottom:1px solid var(--linea)}
.contenido{padding:1rem 1.25rem 1.25rem}
.tabla-caja{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:.875rem}
th{
  text-align:left;padding:.375rem .75rem .5rem 0;border-bottom:1px solid var(--linea-2);
  font:600 .688rem/1 "Schibsted Grotesk",sans-serif;
  letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-3);white-space:nowrap;
}
td{padding:.625rem .75rem;border-bottom:1px solid var(--linea);vertical-align:baseline}
td:first-child,th:first-child{padding-left:0}
tr:last-child td{border-bottom:none}
td.n,th.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
td.n:last-child,th.n:last-child{padding-right:0}
td.n{font-weight:600}
.matiz{color:var(--tinta-3);font-size:.813rem}

/* ── Lista de correspondencias ────────────────────────────────── */
.buscador{
  width:100%;padding:.75rem .938rem;border-radius:var(--r-s);border:0;
  background:var(--tarjeta);color:var(--tinta);box-shadow:var(--sombra-corta);
  font:400 .938rem "Schibsted Grotesk",sans-serif;margin-bottom:.75rem;
}
.buscador:focus-visible{outline:2px solid var(--verde);outline-offset:1px}
.buscador::placeholder{color:var(--tinta-3)}
.lista{display:flex;flex-direction:column;gap:.375rem}
.corr{
  display:flex;align-items:center;gap:1rem;padding:.875rem 1.25rem;
  background:var(--tarjeta);border-radius:var(--r-s);box-shadow:var(--sombra-corta);
  text-decoration:none;
}
.corr:hover{box-shadow:var(--sombra)}
.corr .nom{flex:1;min-width:0;font-weight:600;font-size:.938rem}
.corr .nom small{display:block;font-weight:400;font-size:.813rem;color:var(--tinta-2)}
.corr .v{font:700 1.375rem/1 "Schibsted Grotesk",sans-serif;letter-spacing:-.04em;
  color:var(--verde);font-variant-numeric:tabular-nums;white-space:nowrap}
.corr .v.pct{font-size:1rem}
.corr .cond{font:500 .75rem/1 "IBM Plex Mono",monospace;color:var(--aviso);white-space:nowrap}

/* ── El mapa ──────────────────────────────────────────────────── */
/* ── El mapa ──────────────────────────────────────────────────── */
.mapa-pagina{height:100dvh;display:flex;flex-direction:column;overflow:hidden}
.lienzo{position:relative;flex:1;min-height:0}
#mapa{position:absolute;inset:0}

/* Los controles, en tarjeta flotante y no en barra. Una barra superior come
   alto de mapa en todas las pantallas; la tarjeta se apoya encima y en móvil
   se pliega abajo, donde llega el pulgar. */
.panel{
  position:absolute;top:.875rem;left:.875rem;z-index:3;width:17.5rem;max-width:calc(100% - 1.75rem);
  background:var(--tarjeta);border-radius:var(--r-g);box-shadow:var(--sombra);
  padding:1rem;display:flex;flex-direction:column;gap:.875rem;
}
.panel .marca{margin-bottom:.125rem}
.panel .marca span{font-size:1rem}
.panel .marca .marca-pin{width:17px;height:21px}

/* El recuento deja de ser un rótulo gris y pasa a decir algo: cuántos hay y
   por cuánto se juega en el más barato, que es la pregunta del sitio. */
.marcador{
  margin:0;padding-top:.75rem;border-top:1px solid var(--linea);
  font-size:.8125rem;color:var(--tinta-2);
}
.marcador b{
  font-weight:700;color:var(--tinta);font-size:1.0625rem;
  font-variant-numeric:tabular-nums;
}
.marcador .desde{color:var(--verde);font-weight:600}

.panel .rotulo{
  font:600 .6875rem/1 "Schibsted Grotesk",sans-serif;
  letter-spacing:.08em;text-transform:uppercase;color:var(--tinta-3);
}

/* El interruptor campos / clubes. Dos opciones excluyentes: un grupo de
   radios disfrazado, no dos botones sueltos, para que el teclado y el lector
   de pantalla entiendan que son alternativas. */
.conmutador{display:flex;background:var(--fondo);border-radius:999px;padding:.1875rem;gap:.1875rem}
.conmutador button{
  flex:1;border:0;cursor:pointer;background:transparent;color:var(--tinta-2);
  font:500 .8125rem/1 "Schibsted Grotesk",sans-serif;padding:.5rem .5rem;border-radius:999px;
}
.conmutador button[aria-pressed="true"]{background:var(--tarjeta);color:var(--tinta);font-weight:600;box-shadow:var(--sombra-corta)}
.conmutador button:focus-visible{outline:2px solid var(--verde);outline-offset:2px}

.filtros{display:flex;flex-wrap:wrap;gap:.375rem}
.filtros button{
  padding:.375rem .6875rem;border-radius:999px;border:1px solid var(--linea-2);cursor:pointer;
  background:var(--tarjeta);color:var(--tinta-2);
  font:500 .8125rem/1 "Schibsted Grotesk",sans-serif;transition:.15s;
}
.filtros button:hover{color:var(--tinta)}
.filtros button[aria-pressed="true"]{background:var(--tinta);color:var(--fondo);border-color:var(--tinta);font-weight:600}
.filtros button:focus-visible{outline:2px solid var(--verde);outline-offset:2px}

@media (max-width:44rem){
  .panel{
    top:auto;bottom:.75rem;left:.75rem;right:.75rem;width:auto;
    max-height:52dvh;overflow:auto;padding:.875rem;
  }
}

/* ── El pin ───────────────────────────────────────────────────── */
/* Lleva el precio DENTRO y tiene forma de pin: la punta señala la
   coordenada, que es lo que un cuadrado flotando no hacía. El marcador va
   anclado abajo para que la punta caiga sobre el punto exacto. */
.pin{
  position:relative;background:var(--tarjeta);color:var(--tinta);
  border:1px solid var(--linea-2);border-radius:999px;
  padding:.3125rem .6875rem;margin-bottom:10px;
  box-shadow:var(--sombra-corta);cursor:pointer;text-decoration:none;
  font:600 .8125rem/1.15 "Schibsted Grotesk",sans-serif;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
/* La punta: dos triángulos, uno del color del borde y otro del relleno
   medio píxel por encima, para que el pico tenga contorno como el cuerpo. */
.pin::before,.pin::after{
  content:"";position:absolute;left:50%;translate:-50% 0;width:0;height:0;
  border-left:7px solid transparent;border-right:7px solid transparent;
  border-top:10px solid;
}
.pin::before{top:100%;border-top-color:var(--linea-2)}
.pin::after{top:calc(100% - 1.5px);border-top-color:var(--tarjeta)}
.pin:hover{z-index:4;border-color:var(--tinta-3)}

.pin.sin{color:var(--tinta-3);font-weight:500}
/* El pin de un campo donde TIENES precio. El verde no aparece en ningún
   otro: si todo fuera verde, esto no destacaría. */
.pin.mio{background:var(--verde);color:var(--sobre-verde);border-color:var(--verde);font-weight:700;z-index:2}
.pin.mio::before{border-top-color:var(--verde)}
.pin.mio::after{border-top-color:var(--verde)}
/* Un pitch & putt no es un campo barato, es otro producto. Se distingue en
   la forma para que no compita en la misma lectura que un 18 hoyos. */
.pin.corto{border-radius:6px;font-style:italic}
/* La unidad del precio, cuando no son 18 hoyos. Va dentro del pin porque un
   precio sin su condición no es un precio, y va atenuada porque lo que se
   lee de un vistazo sigue siendo la cifra. Mismo papel en el listado de
   provincia, donde la columna ordena por importe. */
.pin .u,.lista .u{font-size:.75em;font-weight:500;color:var(--tinta-3);margin-left:.125rem}
.pin.mio .u{color:var(--sobre-verde);opacity:.75}
/* El pin cuya coordenada no cuadra con su propia provincia. El borde va
   DISCONTINUO porque es lo que dice «esto no está cerrado» sin gritar: el
   dato que enseña —el precio— sigue siendo bueno, lo que no es de fiar es
   dónde está pinchado. No se usa el verde, que está reservado a «aquí
   tienes precio», ni se esconde el pin: esconderlo sería perder el campo
   en vez de avisar de él. */
.pin.dudoso{border-style:dashed;border-color:var(--aviso)}
.pin.dudoso::before{border-top-color:var(--aviso)}
.pin.dudoso:hover{border-color:var(--aviso)}
/* Un campo que no ha abierto o del que no consta que siga abierto: se ve,
   pero atenuado. Lo desconocido se atenúa, no se pregona. */
.pin.incierto{opacity:.55}
.pin.incierto:hover{opacity:1}
.pin[hidden]{display:none!important}

/* ── Estados vacíos y 404 ─────────────────────────────────────── */
.centrado{min-height:70dvh;display:grid;place-items:center;text-align:center;padding:2rem 1.125rem}
.centrado h1{margin-bottom:.5rem}
.centrado p{color:var(--tinta-2);max-width:26rem;margin:0 auto 1.25rem}
.boton{
  display:inline-block;padding:.688rem 1.125rem;border-radius:999px;
  background:var(--verde);color:var(--sobre-verde);text-decoration:none;
  font-weight:600;font-size:.938rem;
}

.pie{margin-top:2.5rem;padding-top:1.25rem;border-top:1px solid var(--linea-2)}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}