/* greenfeemap — sistema visual base.
   Registro: golf clásico ejecutado en clave actual. Crema de tarjeta de
   resultados, verde profundo de calle, salmón de cartel antiguo. Serif en
   los titulares para el poso clásico, sans para todo lo demás para que no
   envejezca. Nada de negro: quedaba cibernético. */

:root {
  --bg: #f7f3ea;          /* crema de tarjeta */
  --surface: #fffdf8;
  --surface-2: #efe9dc;
  --line: #ddd4c2;
  --line-fuerte: #c6bba4;

  --verde: #14452f;       /* verde de calle, profundo */
  --verde-2: #2c6b4f;
  --verde-claro: #e4ede6;

  --salmon: #e07a5f;      /* acento de cartel antiguo */
  --salmon-claro: #f6ded6;

  --text: #1b2620;
  --muted: #6d7b73;
  --ambar: #b5822a;

  --display: Georgia, "Iowan Old Style", "Times New Roman", serif;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --pad: clamp(1.25rem, 4vw, 3rem);
  --max: 1080px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--verde); }

/* --- Tipografía de titular ------------------------------------------- */

.display {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.02;
  color: var(--verde);
  margin: 0;
}

h1.display { font-size: clamp(2.4rem, 6.5vw, 4.6rem); }
h2.display { font-size: clamp(1.5rem, 3vw, 2.1rem); }

.eyebrow {
  font-family: var(--body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 0.7rem;
}

.eyebrow--accent { color: var(--salmon); }

/* --- Estructura ------------------------------------------------------ */

/* padding-inline y no el atajo `padding`: una `<section class="wrap">` tiene
   ambas reglas, y el atajo de la clase le borraría el padding vertical. */
.wrap { max-width: var(--max); margin: 0 auto; padding-inline: var(--pad); }

.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem var(--pad);
  background: var(--verde);
  color: var(--bg);
}

.brand { display: flex; align-items: center; text-decoration: none; line-height: 0; }
/* Sobre la barra verde va la variante clara, no un filtro CSS: probé con
   `brightness(0) invert(1)` y aplasta el pin a una mancha blanca —se pierden
   la bandera, la loma y el círculo—. La variante recolorea por tonos y
   mantiene el dibujo. */
.brand img { height: 26px; width: auto; display: block; }

.back {
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(247, 243, 234, 0.75); text-decoration: none;
}
.back:hover { color: var(--salmon); }

section { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
section + section { border-top: 1px solid var(--line); }

/* --- El precio como protagonista ------------------------------------- */

.precio-hero {
  display: flex; align-items: baseline; gap: 0.5rem;
  font-family: var(--display); font-weight: 700;
  letter-spacing: -0.04em; line-height: 0.9;
  color: var(--verde);
}
.precio-hero .cifra { font-size: clamp(4rem, 14vw, 8rem); font-variant-numeric: tabular-nums; }
.precio-hero .moneda { font-size: clamp(1.5rem, 4vw, 2.4rem); color: var(--salmon); }

/* La fecha no es letra pequeña: es parte del precio. */
.sello {
  display: inline-flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
  margin-top: 1.1rem; padding: 0.6rem 0.9rem;
  border: 1px solid var(--line); border-left: 3px solid var(--verde-2);
  background: var(--surface); border-radius: 3px;
  font-size: 0.83rem; color: var(--muted);
}
.sello b { color: var(--text); font-weight: 650; }
.sello--warn { border-left-color: var(--ambar); }

/* --- Tablas ---------------------------------------------------------- */

table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
caption { text-align: left; padding-bottom: 0.9rem; color: var(--muted); font-size: 0.9rem; }

th {
  font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--muted); text-align: right; padding: 0 0 0.7rem;
  border-bottom: 1px solid var(--line-fuerte);
}
th:first-child { text-align: left; }

td { padding: 0.78rem 0; border-bottom: 1px solid var(--line); text-align: right; }
td:first-child { text-align: left; }

tr.destacado td { color: var(--verde); font-weight: 650; }
tr.destacado td:first-child { box-shadow: inset 3px 0 0 var(--salmon); padding-left: 0.7rem; }

.tabla-scroll { overflow-x: auto; }

/* --- Piezas ---------------------------------------------------------- */

.grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

.card {
  padding: 1.3rem; background: var(--surface);
  border: 1px solid var(--line); border-radius: 4px;
}
.card .dato {
  font-family: var(--display); font-weight: 700; font-size: 2.1rem;
  letter-spacing: -0.025em; color: var(--verde);
  display: block; margin-bottom: 0.2rem; line-height: 1.05;
}
.card .etiqueta { font-size: 0.82rem; color: var(--muted); }

.nota { color: var(--muted); font-size: 0.92rem; }

footer {
  border-top: 1px solid var(--line);
  padding: 2rem var(--pad) 3rem;
  color: var(--muted); font-size: 0.82rem;
}
footer a { color: var(--verde-2); }

/* --- Fichas generadas -------------------------------------------------
   Las mil fichas de campo y de club usan lo de arriba tal cual. Solo hacían
   falta dos piezas más: el hueco del precio cuando no lo sabemos, y las
   listas de enlaces que cosen campo y club. */

/* El «no lo sé todavía» ocupa el sitio del precio y con el mismo peso
   tipográfico: es una respuesta, no una disculpa en letra pequeña. */
.sin-dato {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.7rem, 5vw, 3rem);
  letter-spacing: -0.03em; line-height: 1.05;
  color: var(--verde); margin: 0; max-width: 18ch;
}
.sin-dato em { font-style: italic; color: var(--salmon); }

.enlaces { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; gap: 0.6rem; }
.enlaces li { padding-left: 0.85rem; border-left: 2px solid var(--line-fuerte); }
.enlaces a { font-weight: 600; }

/* Utilidades de las fichas generadas. Son mil páginas: lo que en la ficha
   escrita a mano de Béjar va en un `style=` suelto, aquí se repite mil veces
   y merece una clase. */
.cabecera { padding-block: clamp(2.5rem, 6vw, 4rem) 0; }
.nota strong { color: var(--text); }
.nota--ancha { max-width: 62ch; }
.intro { margin: 0.5rem 0 1.6rem; max-width: 62ch; }
.tras { margin-top: 1.3rem; max-width: 62ch; }
.bajo-precio { margin: 0.6rem 0 0; }
.grid--sep { margin-top: 1.5rem; }
.card .dato--nombre { font-size: 1.35rem; }
.eyebrow--card { margin-bottom: 0.4rem; }
.eyebrow--sep { margin: 2rem 0 0.5rem; }