@charset "UTF-8";
/* ═══════════════════════════════════════════════
   TOKENS · MALASHPINA EDITORIAL
═══════════════════════════════════════════════ */
:root {
  /* Paleta Malashpina · Costa del Sol Golf Residences — navy / greige */
  --bg-0: #FFFFFF;          /* White */
  --bg-1: #FAFAFB;          /* blanco frío para cards */
  --bg-2: #F1F2F4;          /* gris muy claro */
  --bg-3: #E5E7EB;          /* Light Gray */
  --greige: #CFC8BE;        /* Greige */
  --line: rgba(30,58,95,.10);
  --line-strong: rgba(30,58,95,.24);

  --y-1: #1A1A1A;           /* Negro al 90 % — acentos y texto pequeño (antes navy #1E3A5F) */
  --y-2: #2C5384;
  --y-3: #3E6BA0;           /* navy medio — filetes y detalles */
  --y-4: #7FA3C9;           /* navy claro — highlights */
  --y-soft: rgba(30,58,95,.09);

  --text: #1A1A1A;          /* Negro al 90 % — titulares (antes navy #1E3A5F) */
  --text-mid: #374151;      /* Charcoal — cuerpo */
  --text-mute: #6B7280;     /* gris medio — labels */

  --amarillo: #F2BB16;      /* Amarillo — estrellas de puntuación */
  --verde-1: #88A53C;       /* Verde claro — acento sobre imagen (en uso) */
  --verde-2: #558025;       /* Verde oscuro — acento sobre fondo claro (4,7:1 en blanco) */
  --verde-soft: rgba(85,128,37,.10);
  --verde-line: rgba(85,128,37,.42);

  --grad-y: linear-gradient(135deg, #1E3A5F 0%, #2C5384 40%, #3E6BA0 70%, #1E3A5F 100%);

  --f-display: 'Antonio', 'Oswald', Impact, sans-serif;
  --f-sans: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;

  --velo: .4;         /* velo de las fichas · 0,4 es el mínimo con el que las 14 pasan AA (peor caso 4,7:1) · 0 = sin velo · 1 = el original */
  --px: 64px;
  --ease: cubic-bezier(.25,.46,.45,.94);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* El hueco de la barra se reserva siempre: al bloquear el fondo con
   .ficha-abierta la barra desaparece y, sin gutter, toda la pagina se
   desplazaba lateralmente al abrir y al cerrar la ficha. */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }
body {
  background: var(--bg-0);
  color: var(--text);
  font-family: var(--f-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { text-decoration: none; color: inherit; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }

::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: var(--bg-1); }
::-webkit-scrollbar-thumb { background: var(--y-3); }

/* ═══════════════════════════════════════════════
   LAYOUT SHELL
═══════════════════════════════════════════════ */
#shell { display: flex; min-height: 100vh; }

/* Sidebar */
#sidebar {
  width: 72px;
  min-height: 100vh;
  background: var(--bg-1);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 28px 0;
  position: sticky;
  top: 0;
  flex-shrink: 0;
  z-index: 10;
}
.brand-mark {
  width: 34px; height: 34px;
  background: var(--y-3);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-display);
  font-size: 18px; font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 20px;
}
.brand {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--f-display);
  font-size: 12px;
  letter-spacing: .42em;
  color: var(--y-1);
  text-transform: uppercase;
  font-weight: 700;
}
.nav-dots {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-bottom: 24px;
}
.nav-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(10,10,10,.15);
  cursor: pointer;
  transition: all .3s var(--ease);
  position: relative;
  display: block;
}
.nav-dot:hover, .nav-dot.active { background: var(--y-3); transform: scale(1.5); }
.nav-dot::before {
  content: attr(data-label);
  position: absolute;
  left: 22px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--text);
  color: #FFFFFF;
  padding: 5px 10px;
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
  font-weight: 600;
  font-family: var(--f-sans);
}
.nav-dot:hover::before { opacity: 1; }

/* Main */
#main { flex: 1; min-width: 0; }

/* ═══════════════════════════════════════════════
   HERO
═══════════════════════════════════════════════ */
.hero {
  min-height: 92vh;
  padding: 72px var(--px) 88px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: #0F1726;
  border-bottom: 1px solid var(--line-strong);
  position: relative;
  isolation: isolate;
  color: #FFFFFF;
}
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: -2;
  background-image: url('../images/hero/hero-golf.jpg?v=5f2a3452');
  background-size: cover; background-position: 50% 58%;
}
.hero::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  /* Un solo velo para los ocho heros. Antes eran dos: la portada plana al 30 %
     y las bandas interiores en degradado hasta el 84 %. Este es el punto medio.
     En negro puro, no en el navy que llevaban las bandas interiores: decision de
     Pedro. El negro ademas oscurece algo mas a igual alfa, asi que el contraste
     sube un poco. Medido sobre las cinco fotos interiores y sobre catorce
     fotogramas de los dos videos de portada, peor 5 % de pixeles. */
  background: linear-gradient(180deg, rgba(0,0,0,.30) 0%, rgba(0,0,0,.50) 58%, rgba(0,0,0,.64) 100%);
}
@media (max-width: 900px) { .hero::before { background-image: url('../images/hero/hero-golf-m.jpg?v=81d97f1d'); } }
.hero-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  font-size: 11px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
  font-weight: 500;
}
.hero-top strong { color: #FFFFFF; }
.hero-top-right { text-align: right; }
.hero-top-right strong { color: #CFC8BE; font-weight: 700; }

.hero-center { margin-top: auto; max-width: 1080px; }
.hero-kicker {
  font-size: 12px;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: #C8A45C;           /* oro claro — antes azul claro #A8C4E0 */
  /* La foto de portada es gris media justo en esta franja: sin sombra ningun
     color llega a AA aqui, ni el blanco (4,4:1). Es la misma mitigacion que
     ya llevaban las siete paginas interiores. */
  text-shadow: 0 1px 14px rgba(15,23,38,.8);
  margin-bottom: 32px;
  font-weight: 700;
}
.hero-title {
  font-family: var(--f-display);
  font-size: clamp(38px, 6.6vw, 108px);
  font-weight: 700;
  line-height: .98;
  letter-spacing: -.005em;
  text-transform: uppercase;
  color: #FFFFFF;
  opacity: .80;
  margin-bottom: 32px;
  text-shadow: 0 2px 34px rgba(15,23,38,.5);
}
.hero-title span { display: block; text-wrap: nowrap; }
.hero-title em {
  font-style: normal;
  font-weight: 700;
  color: var(--verde-1);
}
.hero-lede {
  font-family: var(--f-sans);
  font-size: 21px;
  font-weight: 300;
  font-style: italic;
  color: rgba(255,255,255,.9);
  max-width: 680px;
  line-height: 1.55;
}
.hero-lede strong { color: #CFC8BE; font-weight: 600; font-style: normal; }

.hero-bottom {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  padding-top: 56px;
  border-top: 1px solid rgba(255,255,255,.24);
  margin-top: 56px;
}
.hero-stat-label {
  font-size: 10px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(255,255,255,.66);
  margin-bottom: 10px;
  font-weight: 600;
}
.hero-stat-value {
  font-family: var(--f-display);
  font-size: 40px;
  font-weight: 700;
  color: #FFFFFF;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: -.005em;
}
.hero-stat-sub {
  font-size: 12px;
  color: rgba(255,255,255,.72);
  margin-top: 8px;
  line-height: 1.4;
}

/* ═══════════════════════════════════════════════
   SECTION COMMON
═══════════════════════════════════════════════ */
section {
  padding: 120px var(--px);
  border-bottom: 1px solid var(--line);
  position: relative;
}
.sec-eyebrow {
  font-size: 11px;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--y-1);
  margin-bottom: 28px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 14px;
}
.sec-eyebrow::before {
  content: '';
  width: 40px;
  height: 2px;
  background: var(--y-3);
}
.sec-title {
  font-family: var(--f-display);
  font-size: clamp(42px, 5.2vw, 76px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -.005em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 28px;
  max-width: 1040px;
}
.sec-title em {
  font-style: normal;
  color: var(--y-3);
  font-weight: 700;
}
.sec-lede {
  font-family: var(--f-sans);
  font-size: 20px;
  font-weight: 300;
  font-style: italic;
  color: var(--text-mid);
  max-width: 780px;
  line-height: 1.6;
  margin-bottom: 88px;
}

/* Caveat */
.caveat {
  margin-top: 56px;
  padding: 32px 40px;
  background: var(--bg-2);
  border-left: 3px solid var(--y-3);
}
.caveat-title {
  font-size: 11px;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--y-1);
  margin-bottom: 12px;
  font-weight: 700;
}
.caveat-body {
  font-size: 15px;
  color: var(--text-mid);
  line-height: 1.75;
}
.caveat-body strong { color: var(--text); font-weight: 600; }

/* ═══════════════════════════════════════════════
   METHOD SECTION
═══════════════════════════════════════════════ */
.method-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
}
.method-block {
  border: 1px solid var(--line-strong);
  padding: 48px;
  background: var(--bg-1);
}
.method-block h3 {
  font-family: var(--f-display);
  font-size: 30px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: -.005em;
}
.method-weight {
  font-size: 11px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: 32px;
  font-weight: 600;
}
.method-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  align-items: center;
}
.method-row:last-child { border-bottom: none; }
.method-row-label { font-size: 14px; color: var(--text); font-weight: 500; }
.method-row-sub { font-size: 12px; color: var(--text-mute); margin-top: 4px; line-height: 1.5; }
.method-row-pts {
  font-family: var(--f-display);
  font-size: 30px;
  color: var(--y-1);
  font-weight: 700;
  min-width: 46px;
  text-align: right;
  letter-spacing: -.01em;
}

.method-note {
  margin-top: 56px;
  padding: 32px 40px;
  background: var(--bg-2);
  border-left: 3px solid var(--y-3);
  font-family: var(--f-sans);
  font-style: italic;
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-mid);
  font-weight: 300;
}

/* ═══════════════════════════════════════════════
   RANKING TABLE
═══════════════════════════════════════════════ */
.ranking-wrap {
  border: 1px solid var(--line-strong);
  background: var(--bg-1);
  overflow: hidden;
}
.ranking-head, .ranking-row {
  display: grid;
  grid-template-columns: 60px 2.4fr 1.4fr 100px 100px 130px;
  gap: 18px;
  padding: 20px 28px;
  align-items: center;
}
.ranking-head {
  background: var(--bg-2);
  border-bottom: 1px solid var(--line-strong);
  font-size: 10px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--text-mute);
  font-weight: 700;
}
.ranking-row {
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: background .25s var(--ease);
  padding: 28px;
}
.ranking-row:hover { background: var(--bg-2); }
.ranking-row:last-child { border-bottom: none; }
.r-pos {
  font-family: var(--f-display);
  font-size: 38px;
  color: var(--y-1);
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1;
}
.r-name { display: flex; flex-direction: column; gap: 4px; }
.r-name-title {
  font-family: var(--f-display);
  font-size: 24px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: -.005em;
}
.r-name-sub { font-size: 12px; color: var(--text-mute); letter-spacing: .06em; }
.r-loc { font-size: 13px; color: var(--text-mid); font-weight: 500; }
.r-loc small { display: block; color: var(--text-mute); font-size: 11px; margin-top: 3px; font-weight: 400; letter-spacing: .04em; }
.r-stars { font-size: 15px; color: var(--amarillo); letter-spacing: 2px; }
.r-stars small { display: block; font-size: 10px; color: var(--text-mute); letter-spacing: .18em; margin-top: 4px; text-transform: uppercase; font-weight: 600; }
.r-price { font-size: 13px; color: var(--text); font-weight: 600; }
.r-price small { display: block; color: var(--text-mute); font-size: 11px; margin-top: 3px; font-weight: 400; letter-spacing: .04em; text-transform: uppercase; }
.r-score { text-align: right; }
.r-score-num {
  font-family: var(--f-display);
  font-size: 40px;
  color: var(--y-1);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.01em;
}
.r-score-bar {
  height: 3px;
  background: var(--bg-3);
  margin-top: 10px;
  position: relative;
  overflow: hidden;
}
.r-score-bar::after {
  content: '';
  position: absolute;
  left: 0; top: 0; height: 100%;
  background: var(--grad-y);
  width: var(--barw, 0);
}
.r-score-lbl {
  font-size: 10px;
  color: var(--text-mute);
  letter-spacing: .22em;
  text-transform: uppercase;
  margin-top: 6px;
  font-weight: 600;
}

/* ═══════════════════════════════════════════════
   FICHAS · DETAIL CARDS
═══════════════════════════════════════════════ */
.detail-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 64px;
}
.detail-card {
  border: 1px solid var(--line);
  background: var(--bg-1);
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.detail-card:hover {
  border-color: var(--line-strong);
  box-shadow: 0 12px 40px rgba(10,10,10,.07);
}

.dc-head {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 420px; display: flex; align-items: flex-end;
  padding: 48px 44px 40px; background: #0F1726;
}
.dc-head-bg {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .9s var(--ease);
}
.detail-card:hover .dc-head-bg { transform: scale(1.035); }
.dc-head::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(15,23,38,calc(.52 * var(--velo))) 0%, rgba(15,23,38,calc(.26 * var(--velo))) 34%, rgba(15,23,38,calc(.90 * var(--velo))) 100%),
    linear-gradient(96deg, rgba(30,58,95,calc(.74 * var(--velo))) 0%, rgba(30,58,95,calc(.16 * var(--velo))) 62%);
}
.dc-head.sin-img { background: linear-gradient(135deg, #1E3A5F 0%, #2C5384 55%, #1E3A5F 100%); }
.dc-head-inner { position: relative; z-index: 1; max-width: 760px; }

.dc-rank-badge {
  position: absolute; top: 26px; left: 26px;
  background: #FFFFFF; border: 1px solid rgba(255,255,255,.5);
  padding: 8px 14px; font-family: var(--f-display); font-size: 13px; font-weight: 700;
  letter-spacing: .12em; color: var(--y-1); z-index: 2; text-transform: uppercase;
}
.dc-score-overlay {
  position: absolute; bottom: 40px; right: 44px; z-index: 2;
  font-family: var(--f-display); font-size: 76px; font-weight: 700; color: #FFFFFF;
  line-height: 1; letter-spacing: -.02em; text-shadow: 0 2px 22px rgba(15,23,38,.7);
}
/* El "/ 100" se alinea con el numero: su linea de texto mide exactamente lo
   que mide la cifra, de la izquierda del primer digito a la derecha del
   ultimo. En em, para que la proporcion aguante en los cuatro tamanos que
   toma el marcador (44 y 76 px, 34 y 52 en movil). El margen derecho negativo
   descuenta el espaciado que .3em anade DESPUES del ultimo caracter y que,
   sin compensar, separaba el texto del borde. */
.dc-score-overlay small {
  display: block; font-size: .27em; color: rgba(255,255,255,.85); font-weight: 600;
  letter-spacing: .3em; margin-right: -.3em; margin-top: 9px;
  text-align: right; font-family: var(--f-sans);
}

.dc-body {
  padding: 40px 44px 44px;
  position: relative;
}
.dc-cols {
  display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: start;
}
.dc-rank {
  position: absolute;
  top: 24px;
  right: 24px;
  font-family: var(--f-display);
  font-size: 78px;
  font-weight: 700;
  color: rgba(212,168,43,.13);
  line-height: 1;
  letter-spacing: -.02em;
  pointer-events: none;
  user-select: none;
}
.dc-eyebrow {
  font-size: 10px;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: #C8A45C;           /* oro claro — antes azul claro #A8C4E0 */
  margin-bottom: 14px;
  font-weight: 700;
}
.dc-title {
  font-family: var(--f-display);
  font-size: clamp(38px, 4.4vw, 62px);
  font-weight: 700;
  line-height: .98;
  color: #FFFFFF;
  margin-bottom: 12px;
  letter-spacing: -.008em;
  text-transform: uppercase;
  text-shadow: 0 2px 26px rgba(15,23,38,.55);
}
.dc-loc {
  font-size: 14px;
  color: rgba(255,255,255,.86);
  margin-bottom: 0;
  font-weight: 500;
}
.dc-loc strong { color: #CFC8BE; font-weight: 700; }

.dc-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}
.tag {
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 7px 12px;
  border: 1px solid var(--y-1);
  color: var(--y-1);
  background: var(--y-soft);
  font-weight: 600;
}

.dc-stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  padding: 24px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-bottom: 24px;
}
.dc-stat-lbl {
  font-size: 10px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--text-mute);
  font-weight: 600;
  margin-bottom: 5px;
}
.dc-stat-val {
  font-family: var(--f-display);
  font-size: 22px;
  color: var(--text);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -.005em;
  line-height: 1.15;
}
.dc-stat-val.large { font-size: 30px; }

.dc-courses {
  margin-top: 8px;
}
.dc-courses-title {
  font-size: 11px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: 14px;
  font-weight: 700;
}
.course-mini {
  display: grid;
  grid-template-columns: 1fr 60px 55px;
  gap: 10px;
  padding: 11px 0;
  border-bottom: 1px dotted var(--line-strong);
  font-size: 13px;
  align-items: center;
}
.course-mini:last-child { border-bottom: none; }
.course-mini-name { color: var(--text); font-weight: 500; }
.course-mini-name em { font-style: normal; color: var(--text-mute); font-size: 11px; margin-left: 4px; }
.course-mini-time { color: var(--text-mid); font-size: 12px; text-align: right; font-weight: 500; }
.course-mini-stars { color: var(--amarillo); letter-spacing: 1.5px; text-align: right; font-size: 12px; }

.dc-rationale {
  margin-top: 28px;
  padding: 24px 28px;
  background: var(--bg-2);
  border-left: 3px solid var(--y-3);
  font-family: var(--f-sans);
  font-style: italic;
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-mid);
  font-weight: 300;
}
.dc-rationale strong { color: var(--y-1); font-weight: 700; font-style: normal; }

.dc-score {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.sb-lbl {
  font-size: 10px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--text-mute);
  font-weight: 600;
  margin-bottom: 6px;
}
.sb-val {
  font-family: var(--f-display);
  font-size: 32px;
  color: var(--y-1);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -.005em;
  line-height: 1;
}
.sb-val small { color: var(--text-mute); font-size: 15px; font-weight: 400; font-family: var(--f-sans); }

/* ═══════════════════════════════════════════════
   MAP
═══════════════════════════════════════════════ */
.map-wrap {
  border: 1px solid var(--line-strong);
  background: var(--bg-1);
  padding: 20px;
}
#bigMap {
  width: 100%;
  height: 640px;
  background: var(--bg-2);
  border: 1px solid var(--line);
}
#mapFallback {
  display: none;
  padding: 60px 40px;
  text-align: center;
  color: var(--text-mute);
  font-size: 14px;
  border: 1px solid var(--line);
  margin-top: 8px;
  background: var(--bg-2);
}

.map-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  margin-top: 24px;
  padding: 20px 32px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  align-items: center;
}
.legend-item { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--text-mid); font-weight: 500; }
.legend-dot { width: 16px; height: 16px; border-radius: 50%; border: 2px solid #FFFFFF; box-shadow: 0 1px 4px rgba(10,10,10,.2); }
.legend-dot.promo { background: linear-gradient(135deg,#2C5384,#7FA3C9); }
.legend-dot.g4 { background: #88A53C; border-color: #2F4A16; width: 14px; height: 14px; }
.legend-dot.g3 { background: #6E9130; border-color: #2F4A16; width: 12px; height: 12px; }
.legend-dot.g2 { background: #558025; border-color: #FFFFFF; width: 10px; height: 10px; }
.legend-dot.g1 { background: #3E5F1C; border-color: #FFFFFF; width: 8px; height: 8px; }

/* Leaflet overrides */
.leaflet-popup-content-wrapper {
  background: #FFFFFF !important;
  color: var(--text) !important;
  border: 1px solid var(--line-strong) !important;
  border-radius: 0 !important;
  box-shadow: 0 8px 32px rgba(10,10,10,.18) !important;
  font-family: var(--f-sans) !important;
}
.leaflet-popup-tip { background: #FFFFFF !important; border: 1px solid var(--line-strong) !important; }
.leaflet-popup-content { margin: 14px 18px !important; font-family: var(--f-sans) !important; font-size: 12px !important; line-height: 1.55 !important; color: var(--text-mid) !important; }
.leaflet-popup-content b { font-family: var(--f-display); font-size: 16px; color: var(--text); font-weight: 700; text-transform: uppercase; letter-spacing: -.005em; }
.leaflet-popup-close-button { color: var(--y-1) !important; font-size: 20px !important; }
.leaflet-container { background: #F1F2F4 !important; font-family: var(--f-sans) !important; }
.leaflet-control-attribution { background: rgba(255,255,255,.9) !important; color: var(--text-mute) !important; font-size: 10px !important; }
.leaflet-control-attribution a { color: var(--y-1) !important; }

/* ═══════════════════════════════════════════════
   GOLF TABLE
═══════════════════════════════════════════════ */
.golf-filter {
  display: flex;
  gap: 14px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}
.golf-filter button {
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  padding: 10px 18px;
  border: 1px solid var(--line-strong);
  color: var(--text-mid);
  background: transparent;
  font-weight: 600;
  transition: all .25s;
}
.golf-filter button:hover, .golf-filter button:hover { border-color: var(--verde-line); color: var(--verde-2); }
.golf-filter button.active {
  border-color: var(--y-1);
  color: var(--y-1);
  background: var(--y-soft);
}

.golf-table {
  border: 1px solid var(--line-strong);
  background: var(--bg-1);
}
.golf-th, .golf-tr {
  display: grid;
  grid-template-columns: 2.4fr 1.4fr 1.6fr 1fr 1.2fr 90px;
  gap: 18px;
  padding: 18px 28px;
  align-items: center;
}
.golf-th {
  background: var(--bg-2);
  border-bottom: 1px solid var(--line-strong);
  font-size: 10px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--text-mute);
  font-weight: 700;
}
.golf-tr {
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  transition: background .2s;
}
.golf-tr:hover { background: var(--bg-2); }
.golf-tr:last-child { border-bottom: none; }
.golf-tr-name {
  font-family: var(--f-display);
  font-size: 19px;
  color: var(--text);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -.005em;
  line-height: 1.15;
}
.golf-tr-meta { font-size: 11px; color: var(--text-mute); margin-top: 4px; font-weight: 500; letter-spacing: .04em; }
.golf-tr-stars { color: var(--amarillo); letter-spacing: 2px; font-size: 15px; text-align: right; }
.golf-tr-stars small { display: block; font-size: 9px; color: var(--text-mute); letter-spacing: .18em; margin-top: 5px; text-transform: uppercase; font-weight: 700; }

/* ═══════════════════════════════════════════════
   SOURCES
═══════════════════════════════════════════════ */
.sources-grid {
  columns: 3;
  column-gap: 56px;
  font-size: 14px;
  color: var(--text-mid);
  line-height: 1.9;
  font-weight: 400;
}
.sources-grid strong {
  color: var(--y-1);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .24em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 6px;
  margin-top: 22px;
}
.sources-grid strong:first-child { margin-top: 0; }
.sources-grid a { color: var(--text); border-bottom: 1px solid var(--y-3); transition: color .2s; }
.sources-grid a:hover { color: var(--y-1); }

/* ═══════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════ */
footer {
  padding: 88px var(--px) 56px;
  background: var(--bg-1);
  border-top: 1px solid var(--line-strong);
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 56px;
  align-items: start;
}
.foot-logo { height: 28px; width: auto; display: block; }
.foot-brand {
  font-family: var(--f-display);
  font-size: 32px;
  color: var(--text);
  letter-spacing: -.005em;
  margin-bottom: 14px;
  font-weight: 700;
  text-transform: uppercase;
}
.foot-tag {
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--text-mute);
  max-width: 380px;
  line-height: 1.75;
}
.foot-col-title {
  font-size: 10px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--y-1);
  margin-bottom: 16px;
  font-weight: 700;
}
.foot-col-item { font-size: 13px; color: var(--text-mid); line-height: 2; }
.foot-copy {
  grid-column: 1 / -1;
  padding-top: 32px;
  border-top: 1px solid var(--line);
  margin-top: 32px;
  font-size: 11px;
  color: var(--text-mute);
  letter-spacing: .08em;
  display: flex;
  justify-content: space-between;
  text-transform: uppercase;
  font-weight: 600;
}

/* ═══════════════════════════════════════════════
   REVEAL — visible por defecto, animación aditiva
═══════════════════════════════════════════════ */
.reveal { opacity: 1; transform: none; transition: opacity .7s var(--ease), transform .7s var(--ease); }
html.js-reveal-armed .reveal:not(.in) { opacity: 0; transform: translateY(20px); }
.reveal.in { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  html.js-reveal-armed .reveal:not(.in) { opacity: 1; transform: none; }
  .detail-card:hover .dc-img img { transform: none; }
}

/* ═══════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .detail-grid { grid-template-columns: 1fr; }
  .method-grid { grid-template-columns: 1fr; }
  .ranking-head, .ranking-row { grid-template-columns: 50px 2fr 1fr 90px 110px; }
  .ranking-head > :nth-child(5), .ranking-row > :nth-child(5) { display: none; }
  .golf-th, .golf-tr { grid-template-columns: 2fr 1fr 1.4fr 80px; }
  .golf-th > :nth-child(4), .golf-tr > :nth-child(4),
  .golf-th > :nth-child(5), .golf-tr > :nth-child(5) { display: none; }
  .sources-grid { columns: 2; }
}
@media (max-width: 760px) {
  :root { --px: 24px; }
  section { padding: 72px var(--px); }
  #sidebar { display: none; }
  .hero { min-height: auto; padding: 56px var(--px) 72px; }
  .hero-bottom { grid-template-columns: 1fr 1fr; }
  .ranking-head { display: none; }
  .ranking-row { grid-template-columns: 46px 1fr 100px; gap: 12px; padding: 22px 20px; }
  .ranking-row > :nth-child(3), .ranking-row > :nth-child(4) { display: none; }
  .dc-body { padding: 32px 24px; }
  .dc-title { font-size: 30px; }
  .dc-rank { font-size: 56px; top: 20px; right: 20px; }
  .sources-grid { columns: 1; }
  footer { grid-template-columns: 1fr; gap: 40px; padding: 56px var(--px) 40px; }
  .golf-th, .golf-tr { grid-template-columns: 2fr 80px; gap: 12px; padding: 14px 20px; }
  .golf-th > :nth-child(2), .golf-tr > :nth-child(2),
  .golf-th > :nth-child(3), .golf-tr > :nth-child(3) { display: none; }
}

.galeria-nota { font-size: 12px; color: var(--text-mute); font-style: italic; margin: -22px 0 30px; }
/* ═══════════════════════════════════════════════
   v1.1 · JUGABILIDAD, DESGLOSE, VERIFICACIÓN
═══════════════════════════════════════════════ */
.acc {
  display: inline-block; margin-left: 7px; padding: 1px 6px 2px;
  font-size: 9px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  border: 1px solid var(--line-strong); color: var(--text-mute); vertical-align: middle;
}
.acc-1 { color: var(--y-1); border-color: rgba(62,107,160,.55); background: rgba(30,58,95,.07); }
.acc-05 { color: var(--text-mute); }
.acc-0 { color: var(--text-mute); text-decoration: line-through; }

.dc-derechos {
  margin: 22px 0 0; padding: 16px 18px; background: var(--bg-2);
  border-left: 3px solid var(--y-3); font-size: 13px; line-height: 1.5; color: var(--text-mid);
}
.dc-derechos span {
  display: block; font-size: 9.5px; letter-spacing: .26em; text-transform: uppercase;
  color: var(--y-1); font-weight: 700; margin-bottom: 5px;
}
.dc-derechos em {
  display: block; font-style: normal; font-size: 9.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-mute); margin-top: 6px;
}
.dc-golfbar {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
  margin: 22px 0 4px; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  font-size: 11px; line-height: 1.35; color: var(--text-mute);
  letter-spacing: .04em;
}
.dc-golfbar .gb-num {
  display: block; font-family: var(--f-display); font-weight: 700;
  font-size: 24px; color: var(--text); letter-spacing: -.01em; margin-bottom: 2px;
}
.course-mini.pendiente { opacity: .5; font-style: italic; }
.course-mini-time sup { color: var(--y-2); font-weight: 700; cursor: help; }

.sb-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.sb-table th {
  text-align: left; font-weight: 600; color: var(--text-mid); padding: 7px 8px 7px 0;
  border-bottom: 1px dotted var(--line-strong); font-size: 12px; line-height: 1.3;
}
.sb-table th span {
  display: block; font-weight: 400; color: var(--text-mute); font-size: 10.5px;
  margin-top: 2px; line-height: 1.35;
}
.sb-table td {
  text-align: right; vertical-align: top; padding: 7px 0; white-space: nowrap;
  border-bottom: 1px dotted var(--line-strong);
  font-family: var(--f-display); font-weight: 700; font-size: 17px; color: var(--text);
}
.sb-table td small { font-family: var(--f-sans); font-weight: 400; font-size: 11px; color: var(--text-mute); }
.sb-table .sb-total th {
  border-bottom: none; padding-top: 11px; text-transform: uppercase;
  letter-spacing: .18em; font-size: 10px; color: var(--y-1); font-weight: 700;
}
.sb-table .sb-total td { border-bottom: none; padding-top: 11px; font-size: 26px; color: var(--y-1); }


.ranking-head [data-sort] { cursor: pointer; user-select: none; transition: color .18s; }
.ranking-head [data-sort]:hover { color: var(--text); }
.ranking-head [data-sort]::after { content: ' \21C5'; opacity: .35; font-size: 10px; }
.ranking-head [data-sort].sorted { color: var(--y-1); }
.ranking-head [data-sort].sorted[data-dir="asc"]::after { content: ' \2191'; opacity: 1; }
.ranking-head [data-sort].sorted[data-dir="desc"]::after { content: ' \2193'; opacity: 1; }

.detail-card-placeholder-tag {
  position: absolute; top: 26px; right: 26px; z-index: 3;
  background: rgba(10,10,10,.72); color: #FAFAFB;
  font-size: 8.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  padding: 4px 8px;
}
/* Cuando lleguen los renders oficiales: cambiar la línea de arriba por display:none */

.avisos-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 40px; }
.aviso { padding: 18px 0; border-bottom: 1px solid var(--line); break-inside: avoid; }
.aviso-promo {
  font-family: var(--f-display); font-weight: 700; text-transform: uppercase;
  font-size: 17px; letter-spacing: -.005em; margin-bottom: 7px;
}
.aviso ul { list-style: none; margin: 0; padding: 0; }
.aviso li {
  display: grid; grid-template-columns: 118px 1fr; gap: 10px; align-items: baseline;
  font-size: 12.5px; line-height: 1.5; color: var(--text-mid); margin-bottom: 6px;
}
.aviso li span {
  color: var(--y-1); font-size: 9.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; line-height: 1.7;
}
@media (max-width: 760px) { .aviso li { grid-template-columns: 1fr; gap: 2px; } }
@media (max-width: 1100px) {
  .dc-head { min-height: 320px; padding: 36px 26px 30px; }
  .dc-body { padding: 30px 26px 34px; }
  .dc-cols { grid-template-columns: 1fr; gap: 30px; }
  .dc-stats { grid-template-columns: repeat(2, 1fr); }
  .dc-score-overlay { font-size: 52px; bottom: 28px; right: 26px; }
  .dc-score { grid-template-columns: 1fr; }
  .avisos-grid { grid-template-columns: 1fr; }
  .dc-golfbar { grid-template-columns: 1fr; gap: 10px; }
}

/* ── Banda de imagen a sangre ── */
.banda { margin: 0; position: relative; overflow: hidden; }
.banda img { display: block; width: 100%; height: clamp(240px, 34vw, 460px); object-fit: cover; }
.banda figcaption {
  position: absolute; left: 0; bottom: 0; right: 0; padding: 46px 56px 16px;
  background: linear-gradient(180deg, rgba(10,10,10,0) 0%, rgba(10,10,10,.62) 100%);
  color: #FAFAFB; font-size: 10px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase;
}
.banda figcaption em { font-style: normal; opacity: .62; letter-spacing: .16em; margin-left: 12px; }

/* ── Galería de campos ── */
.galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(238px, 1fr)); gap: 28px 22px; margin: 34px 0 44px; }
.gc { margin: 0; }
.gc-img { position: relative; aspect-ratio: 3/2; overflow: hidden; background: var(--bg-3); border: 1px solid var(--line); }
.gc-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--ease); }
.gc:hover .gc-img img { transform: scale(1.035); }
.gc-stars {
  position: absolute; left: 10px; bottom: 8px; color: var(--amarillo); font-size: 13px; letter-spacing: 2px;
  text-shadow: 0 1px 5px rgba(10,10,10,.85);
}
.gc-ph {
  position: absolute; top: 9px; right: 9px; background: rgba(10,10,10,.72); color: #FAFAFB;
  font-size: 8px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; padding: 3px 7px;
}
.gc figcaption { padding-top: 11px; display: flex; flex-direction: column; gap: 3px; }
.gc figcaption strong {
  font-family: var(--f-display); font-weight: 700; text-transform: uppercase;
  font-size: 17px; line-height: 1.05; letter-spacing: -.005em;
}
.gc-meta { font-size: 11px; color: var(--text-mute); }
.gc-pie { font-size: 12px; color: var(--text-mid); line-height: 1.4; margin-top: 2px; }
.gc-cred { font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-mute); margin-top: 4px; }
.gc-cred a { color: var(--y-1); text-decoration: none; border-bottom: 1px solid rgba(62,107,160,.42); }

/* ── Pie sobre la imagen de la ficha ── */
.dc-img-pie {
  position: relative; margin-top: 20px; z-index: 3; max-width: 520px;
  color: rgba(255,255,255,.78); font-size: 11.5px; line-height: 1.4;
  padding-left: 12px; border-left: 2px solid rgba(207,200,190,.5);
}
.dc-img-pie em { display: block; font-style: normal; font-size: 8.5px; letter-spacing: .2em;
  text-transform: uppercase; opacity: .72; margin-top: 3px; }
@media (max-width: 760px) {
  .banda figcaption { padding: 40px 24px 14px; }
}

.star,
.dc-golfbar .star,
.sb-table th .star,
.sb-table th span .star,
.method-row-sub .star,
.golf-filter button .star,
.legend-item .star { color: var(--amarillo); }


/* ═══════════════════════════════════════════════
   WEB EN PÁGINAS · nav superior, acordeón, bullets
═══════════════════════════════════════════════ */
#shell { display: block; }
#sidebar { display: none; }
.topnav {
  position: sticky; top: 0; z-index: 60; height: 64px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 0 var(--px); background: rgba(26,26,26,.90);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.14);
}
.topnav-brand { display: flex; align-items: center; text-decoration: none; color: #FFFFFF; line-height: 1; min-width: 0; }
/* La altura se fija a la altura de mayuscula del rotulo que lo acompana, no al
   cuerpo: el logotipo es solo caja alta y si se iguala al font-size sobresale. */
.brand-logo { height: 18px; width: auto; flex: none; display: block; margin-right: .1em; }
/* El bloque de marca: PRIME y GOLF en negrita, el "and" y la coletilla en
   la misma Antonio pero en fina. El "/" separa el nombre del descriptor. */
.topnav-brand em { font-style: normal; font-weight: 300; }
.topnav-brand .brand-sep { margin: 0 .4em 0 .55em; }
/* Todo en blanco: el peso hace el trabajo que hacía el color. El nexo va en
   fina con un pelo de aire a cada lado —no un espacio de palabra, que separa
   demasiado— y el descriptor baja al 80 % para quedar por detrás del nombre. */
.topnav-brand .brand-cola { font-weight: 300; color: rgba(255,255,255,.8); }
.topnav-brand b { font-family: var(--f-display); font-weight: 700; text-transform: uppercase; font-size: 25px; letter-spacing: .005em; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Menú desplegable */
/* El selector de idioma comparte esquina con el boton de menu, asi que el
   contenedor pasa a flex: si no, el enlace cae en su propia linea y empuja
   el boton contra el borde inferior de la barra. Va sin caja a proposito,
   para que el boton siga siendo el unico control con borde y no compitan
   dos rectangulos en el mismo rincon. */
.topnav-menu { position: relative; flex: none; display: flex; align-items: center; gap: 16px; }
.topnav-idioma {
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase; font-weight: 700;
  color: rgba(255,255,255,.72); text-decoration: none; white-space: nowrap;
  transition: color .2s;
}
.topnav-idioma:hover, .topnav-idioma:focus-visible { color: #FFFFFF; }
@media (max-width: 520px) { .topnav-menu { gap: 10px; } .topnav-idioma { letter-spacing: .14em; } }
.topnav-toggle {
  display: flex; align-items: center; justify-content: center; width: 44px; height: 40px; padding: 0;
  background: transparent; border: 1px solid rgba(255,255,255,.34); cursor: pointer; color: #FFFFFF;
  font-family: var(--f-sans); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; font-weight: 700;
  transition: background-color .2s, border-color .2s, color .2s;
}
.topnav-toggle:hover, .topnav-toggle[aria-expanded="true"] { background: #FFFFFF; border-color: #FFFFFF; color: #1A1A1A; }
.topnav-toggle-icon { width: 36px; height: 36px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px; }
.topnav-toggle-icon i { display: block; width: 16px; height: 2px; background: currentColor; transition: transform .25s var(--ease), opacity .2s; }
.topnav-toggle[aria-expanded="true"] .topnav-toggle-icon i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.topnav-toggle[aria-expanded="true"] .topnav-toggle-icon i:nth-child(2) { opacity: 0; }
.topnav-toggle[aria-expanded="true"] .topnav-toggle-icon i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.topnav-links {
  position: absolute; right: 0; top: calc(100% + 10px); min-width: 240px; z-index: 70;
  display: flex; flex-direction: column; padding: 8px 0;
  background: #1A1A1A; border: 1px solid rgba(255,255,255,.22); box-shadow: 0 18px 48px rgba(0,0,0,.45);
}
.topnav-links[hidden] { display: none; }
.topnav-links a {
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase; font-weight: 700;
  color: rgba(255,255,255,.72); text-decoration: none; padding: 13px 22px;
  border-left: 3px solid transparent; transition: color .2s, background-color .2s, border-color .2s; white-space: nowrap;
}
.topnav-links a:hover { color: #FFFFFF; background: rgba(255,255,255,.10); }
.topnav-links a[aria-current="page"] { color: #FFFFFF; border-left-color: var(--oro-1); }
.topnav-links a.nav-ranking { color: #FFFFFF; }
@media (max-width: 860px) { .topnav-brand .brand-cola { display: none; } }
@media (max-width: 640px) { .topnav-brand b { font-size: 21px; } .brand-logo { height: 15px; } }

/* Portada · los tres pasos */
.pasos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.paso {
  border: 1px solid var(--line); background: var(--bg-1); padding: 34px 30px 30px;
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease);
}
.paso:hover { border-color: var(--line-strong); box-shadow: 0 14px 44px rgba(30,58,95,.09); transform: translateY(-2px); }
.paso-num { font-family: var(--f-display); font-weight: 700; font-size: 46px; line-height: 1; color: var(--oro-2); }
.paso h3 { font-family: var(--f-display); font-weight: 700; text-transform: uppercase; font-size: 28px; line-height: 1.02; margin: 16px 0 14px; letter-spacing: -.005em; }
.paso-cta { margin-top: auto; padding-top: 22px; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; font-weight: 700; color: var(--y-1); }
/* Gama de grises: cada tarjeta un punto más oscura que la anterior */
.pasos .paso:nth-child(1) { background: var(--bg-1); }
.pasos .paso:nth-child(2) { background: var(--bg-2); }
.pasos .paso:nth-child(3) { background: var(--bg-3); border-color: var(--line-strong); }
/* Mouse over: gris marengo y texto en blanco, además de la elevación */
.paso, .paso h3, .paso .puntos li, .paso .puntos li strong, .paso-num, .paso-cta { transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease); }
.pasos .paso:hover { background: var(--marengo); border-color: var(--marengo); color: #FFFFFF; }
.paso:hover h3, .paso:hover .puntos li strong { color: #FFFFFF; }
.paso:hover .puntos li { color: rgba(255,255,255,.86); }
.paso:hover .paso-num, .paso:hover .paso-cta { color: var(--oro-1); }

/* Bullets editoriales */
.puntos { list-style: none; margin: 0; padding: 0; }
.puntos li { position: relative; padding-left: 20px; font-size: 15px; line-height: 1.5; color: var(--text-mid); margin-bottom: 9px; }
.puntos li::before { content: ''; position: absolute; left: 0; top: .72em; width: 11px; height: 1.5px; background: var(--oro-2); }
.puntos li strong { color: var(--text); font-weight: 700; }
.puntos.compacta li { font-size: 14px; margin-bottom: 6px; }
.nota-bloque { border: 1px solid var(--line); background: var(--bg-1); padding: 28px 30px 20px; margin-top: 24px; }
.nota-bloque h4 { font-family: var(--f-display); font-weight: 700; text-transform: uppercase; font-size: 22px; margin: 0 0 14px; letter-spacing: -.005em; }
.notas-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 40px; }
.notas-grid .nota-bloque { margin-top: 0; }
/* ═══════════════════════════════════════════════
   COLOR SECUNDARIO POR PÁGINA
   navy (defecto) · campos = verde · ranking = oro
═══════════════════════════════════════════════ */
:root {
  --oro-1: #C8A45C;         /* Oro claro — sobre imagen y fondos oscuros */
  --oro-2: #B48F3C;         /* Oro medio — titulares grandes (3,1:1 en blanco) */
  --oro-3: #8A6D28;         /* Oro oscuro — texto pequeño (4,9:1 en blanco) */
  --oro-soft: rgba(200,164,92,.14);
  --oro-line: rgba(138,109,40,.48);
  --marengo: #1A1A1A;       /* Negro al 90 % — fondo de tarjetas y botón del menú en mouse over (antes marengo #374151) */
}
body {
  --sec: var(--y-3);            /* filetes, em de titular, puntos */
  --sec-text: var(--y-1);       /* texto pequeño y etiquetas */
  --sec-soft: var(--y-soft);
  --sec-line: rgba(62,107,160,.5);
  --sec-img: var(--y-4);        /* acento sobre imagen */
}
body[data-pagina="campos"] { --sec: var(--verde-2); --sec-text: var(--verde-2); --sec-soft: var(--verde-soft); --sec-line: var(--verde-line); --sec-img: var(--verde-1); }
body[data-pagina="ranking"] { --sec: var(--oro-2); --sec-text: var(--oro-3); --sec-soft: var(--oro-soft); --sec-line: var(--oro-line); --sec-img: var(--oro-1); }

body[data-pagina] .sec-eyebrow { color: var(--sec-text); }
body[data-pagina] .sec-eyebrow::before { background: var(--sec); }
body[data-pagina] .sec-title em { color: var(--oro-2); }              /* énfasis de titular en dorado en todas las páginas… */
body[data-pagina="campos"] .sec-title em { color: var(--sec); }     /* …salvo Campos, que va en verde */
.sec-title em.linea-oro { display: block; color: var(--oro-2) !important; font-size: calc(1em + 4px); margin-top: .04em; }   /* frase destacada en línea propia, dorada y 4 px mayor */
body[data-pagina] .caveat, body[data-pagina] .method-note, body[data-pagina] .dc-rationale { border-left-color: var(--sec); }
body[data-pagina] .caveat-title, body[data-pagina] .dc-rationale strong, body[data-pagina] .method-row-pts,
body[data-pagina] .r-pos, body[data-pagina] .r-score-num, body[data-pagina] .sb-val,
body[data-pagina] .sb-table .sb-total th, body[data-pagina] .sb-table .sb-total td,
body[data-pagina] .ranking-head [data-sort].sorted, body[data-pagina] .pop-score,
body[data-pagina] .course-mini-time sup, body[data-pagina] .golf-tr-stars small,
body[data-pagina] .gc figcaption strong, body[data-pagina] .btn-linea, body[data-pagina] .paso-cta { color: var(--sec-text); }
body[data-pagina] .tag, body[data-pagina] .acc-1 { color: var(--sec-text); border-color: var(--sec-line); background: var(--sec-soft); }
/* Titular del banner: posición, nombre y municipio en la misma línea y cuerpo */
.dc-rank-badge { display: none; }
.dc-title .dc-t-rank { color: var(--oro-1); margin-right: .34em; }
.dc-title .dc-t-name { color: #FFFFFF; }
.dc-title .dc-t-loc { color: var(--greige); margin-left: .34em; }
details.promo > summary .dc-loc { color: rgba(255,255,255,.72); }
body[data-pagina] .gc-cred a { color: var(--sec-text); border-bottom-color: var(--sec-line); }
body[data-pagina] .golf-filter button:hover { border-color: var(--sec-line); color: var(--sec-text); }
body[data-pagina] .golf-filter button.active { border-color: var(--sec); color: var(--sec-text); background: var(--sec-soft); }
body[data-pagina] .golf-tr:hover { background: var(--sec-soft); }
body[data-pagina] .map-wrap { border-color: var(--sec-line); }
body[data-pagina] .siguiente a:hover, body[data-pagina] .btn-linea:hover { background: var(--sec-text); border-color: var(--sec-text); color: #FFFFFF; }
body[data-pagina] .dc-loc strong { color: var(--sec-img); }
body[data-pagina] .banda figcaption em { color: var(--sec-img); opacity: 1; }
body[data-pagina="ranking"] .siguiente a:hover small { color: var(--oro-1); }
body[data-pagina="ranking"] .pin-promo-num { background: linear-gradient(135deg, var(--oro-3), var(--oro-1)); }
/* El punto de promoción imita el anillo del atlas: blanco con borde negro. */
body[data-pagina="ranking"] .legend-dot.promo { background: var(--bg-0); border: 2px solid var(--text); }

/* Filas alternas de la tabla de campos */
#golfBody .golf-tr:nth-child(even) { background: rgba(30,58,95,.035); }
#golfBody .golf-tr:hover { background: var(--sec-soft); }

/* Código de color de la columna "Hoyos · membresía" */
.mem {
  display: inline-block; margin-top: 4px; padding: 2px 7px 3px;
  font-size: 9px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  border: 1px solid; border-radius: 2px; vertical-align: middle; white-space: nowrap;
}
/* Semaforo de acceso: color plano y texto en blanco. El amarillo y el naranja
   van en su version profunda porque a 9 px el blanco sobre un amarillo vivo no
   se lee: aun asi el amarillo se queda en 3,3:1, por debajo del 4,5 de la AA. */
.mem-pub { color: #FFFFFF; background: #4E7A21; border-color: #4E7A21; }
.mem-res { color: #FFFFFF; background: #B8860B; border-color: #B8860B; }
.mem-soc { color: #FFFFFF; background: #CC5500; border-color: #CC5500; }
.mem-cer { color: #FFFFFF; background: #C0392B; border-color: #C0392B; }
.mem-leyenda { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0 0 14px; font-size: 11px; letter-spacing: .06em; color: var(--text-mid); }
.mem-leyenda span { display: inline-flex; align-items: center; gap: 7px; }
.mem-dot { width: 10px; height: 10px; border: 1px solid; border-radius: 2px; display: inline-block; }
.mem-dot.mem-pub { background: #4E7A21; border-color: #4E7A21; }
.mem-dot.mem-res { background: #B8860B; border-color: #B8860B; }
.mem-dot.mem-soc { background: #CC5500; border-color: #CC5500; }
.mem-dot.mem-cer { background: #C0392B; border-color: #C0392B; }

/* Página de contacto */
.contacto-grid { display: grid; grid-template-columns: minmax(0,760px); gap: 28px; margin-top: 32px; align-items: start; }
/* Sin caja (24/09): los datos del estudio van directamente sobre la página,
   como el resto de la sección. */
.contacto-card { border: 0; background: transparent; padding: 0; }
.contacto-firma { font-family: var(--f-display); font-weight: 700; text-transform: uppercase; font-size: 24px; line-height: 1; letter-spacing: -.005em; margin-bottom: 20px; }
.contacto-persona { margin: 8px 0 22px; font-size: 14px; color: var(--text-mid); font-weight: 600; }
.contacto-persona span { color: var(--text-mute); font-weight: 400; }
/* Remaquetado 24/09: los cuatro datos en dos columnas, sin filetes entre
   filas; la firma baja de cuerpo para que el bloque pese lo que le toca. */
.contacto-datos { margin: 0; padding: 0; border-top: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 40px; }
.contacto-datos > div { display: grid; grid-template-columns: 24px 1fr; gap: 12px; padding: 4px 0; border-bottom: 0; align-items: center; }
.contacto-datos > .contacto-dato--ancho { grid-column: 1 / -1; }
.contacto-datos dt { display: flex; align-items: center; gap: 8px; font-size: 10px; letter-spacing: .24em; text-transform: uppercase; font-weight: 700; color: var(--text-mute); padding-top: 3px; }
.ico-contacto { width: 16px; height: 16px; flex: none; color: var(--sec-text); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.contacto-datos dd { margin: 0; font-size: 15px; color: var(--text); }
.contacto-datos a { color: var(--text); text-decoration: none; border-bottom: 1px solid var(--sec-line); transition: color .2s; }
.contacto-datos a:hover { color: var(--sec-text); }
.contacto-cta { margin-top: 24px; }
.contacto-usos h3 { font-family: var(--f-display); font-weight: 700; text-transform: uppercase; font-size: 26px; margin: 8px 0 18px; letter-spacing: -.005em; }
.contacto-nota { margin: 26px 0 0; padding: 16px 20px; border-left: 3px solid var(--sec); background: var(--bg-1); font-size: 13px; line-height: 1.55; color: var(--text-mid); }
footer .foot-col-item a, footer .foot-tag a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--line-strong); }
footer .foot-tag a:hover { color: var(--text); }
footer .foot-col-item a:hover { color: var(--text); }
@media (max-width: 900px) { .contacto-grid { grid-template-columns: 1fr; } .contacto-card { padding: 0; } .contacto-datos { grid-template-columns: 1fr; }
  .contacto-datos > div { grid-template-columns: 24px 1fr; gap: 12px; } }

/* Paleta "verdes_01" (registrada 16 septiembre) */
:root {
  --v01-1: #C5E13B;   /* lima */
  --v01-2: #8DBF46;   /* verde claro */
  --v01-3: #4E9A1F;   /* verde medio */
  --v01-4: #2E5A17;   /* verde oscuro */
  --v01-5: #4A5A6A;   /* gris pizarra */
  --v01-2-05: rgba(141,191,70,.05);   /* verde claro al 5 % — tonos muy suaves */
}
/* Bloque A · Entorno de golf: fondo verde claro al 5 % */
.method-grid .method-block:first-child { background: var(--v01-2-05); border-color: rgba(141,191,70,.40); }
/* Bloque B · Calidad y exclusividad: fondo dorado al 5 % (oro claro #C8A45C) */
.method-grid .method-block:nth-child(2) { background: rgba(200,164,92,.05); border-color: rgba(200,164,92,.40); }
.method-grid .method-block:first-child h3 { color: var(--v01-4); }   /* título del Bloque A en verde oscuro (verdes_01 · 4) */
.method-grid .method-block:nth-child(2) h3 { color: var(--oro-3); }   /* título del Bloque B en oro oscuro (4,9:1 sobre el fondo) */

/* La función de puntuación (Método) */
.formula-card { border: 1px solid var(--line); background: var(--bg-1); padding: 36px 40px 30px; margin-top: 40px; }
.sub-cabecera { margin-top: 128px; }
.sub-cabecera .sec-eyebrow { font-size: clamp(26px, 3.2vw, 42px); }
.formula-card { margin-top: 0; padding: 40px 40px 34px; }
.sub-cabecera .sec-lede { margin-bottom: 44px; }   /* mitad del margen estándar entre lede y card */
.formula-head h3 { font-family: var(--f-display); font-weight: 700; text-transform: uppercase; font-size: 30px; line-height: 1; margin: 0 0 10px; letter-spacing: -.005em; }
.formula-head p { margin: 0 0 8px; font-size: 15px; line-height: 1.5; color: var(--text-mid); max-width: 720px; }
.formula-lista { display: flex; flex-direction: column; gap: 18px; margin-top: 18px; }
.formula-item { border: 1px solid var(--line); background: var(--bg-0); transition: border-color .25s var(--ease), box-shadow .25s var(--ease); }
.formula-item:hover, .formula-item[open] { border-color: var(--line-strong); box-shadow: 0 10px 30px rgba(30,58,95,.07); }
.formula-item > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 44px 1fr 28px; gap: 12px; align-items: center; padding: 26px 26px 26px 28px; }
.formula-item > summary::-webkit-details-marker { display: none; }
.fi-num, .fi-titulo { font-family: var(--f-display); font-weight: 700; font-size: 22px; line-height: 1; text-transform: uppercase; letter-spacing: -.005em; }
.fi-num { color: var(--oro-2); }
.fi-titulo { color: var(--text); }
.formula-item[open] .fi-titulo { color: var(--oro-3); }
.fi-chevron { position: relative; width: 28px; height: 28px; }
.fi-chevron::before, .fi-chevron::after { content: ''; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; background: var(--text); transform: translate(-50%,-50%); transition: transform .25s var(--ease); }
.fi-chevron::after { transform: translate(-50%,-50%) rotate(90deg); }
.formula-item[open] .fi-chevron::after, .nota-item[open] .fi-chevron::after { transform: translate(-50%,-50%) rotate(0deg); }
.fi-detalle { padding: 6px 28px 34px 84px; box-sizing: border-box; }
/* Mouse over como el botón «Siguiente»: fondo negro, texto blanco, número en oro claro */
.formula-item > summary, .fi-num, .fi-titulo, .fi-chevron::before, .fi-chevron::after { transition: background-color .25s var(--ease), color .25s var(--ease); }
.formula-item > summary:hover { background: var(--text); }
.formula-item > summary:hover .fi-titulo { color: #FFFFFF; }
.formula-item > summary:hover .fi-num { color: var(--oro-1); }
.formula-item > summary:hover .fi-chevron::before, .formula-item > summary:hover .fi-chevron::after { background: #FFFFFF; }
.fi-detalle .formula { margin-top: 18px; }
.formula { font-family: 'Times New Roman', Times, Georgia, serif; font-size: 20px; line-height: 1.5; color: var(--text); overflow-x: auto; padding-bottom: 2px; }
.formula var { font-style: italic; }
.formula sub, .formula sup { font-size: .62em; line-height: 0; }
.formula .sum { font-size: 1.35em; line-height: 0; vertical-align: -.08em; }
.formula .sum sub, .formula .sum sup { font-size: .45em; }
.formula .cond { display: block; font-size: 14px; color: var(--text-mute); margin-top: 6px; }
.fi-detalle p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--text-mid); max-width: 820px; }
.fi-detalle p var { font-family: 'Times New Roman', Times, Georgia, serif; font-size: 1.08em; }
.escalas { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 32px; margin-top: 18px; }
.escalas > div { display: flex; flex-direction: column; gap: 4px; font-size: 13px; line-height: 1.4; }
.escalas b { font-family: 'Times New Roman', Times, Georgia, serif; font-weight: 700; font-size: 16px; color: var(--text); }
.escalas b var { font-style: italic; }
.escalas span { color: var(--text-mid); }
@media (max-width: 900px) { .formula-card { padding: 28px 24px 22px; } .escalas { grid-template-columns: 1fr; } .formula-item > summary { grid-template-columns: 34px 1fr 24px; padding: 20px 16px; } .fi-detalle { padding: 4px 16px 24px 16px; } .formula { font-size: 17px; } }

/* Intercambio de estilos: el número y nombre del capítulo van en la fuente display; la frase, en versalitas con filete */
.sec-eyebrow {
  font-family: var(--f-display); font-size: clamp(28px, 4.2vw, 56px); font-weight: 700;
  line-height: 1.02; letter-spacing: -.005em; text-transform: uppercase; display: block; margin-bottom: 18px; max-width: 1040px;
}
.sec-eyebrow::before { display: none; }
.sec-title {
  position: relative; font-family: var(--f-sans); font-size: 11px; font-weight: 700; line-height: 1.7;
  letter-spacing: .42em; text-transform: uppercase; padding-left: 54px; margin-bottom: 28px; max-width: none;
}
.sec-title::before { content: ''; position: absolute; left: 0; top: .85em; width: 40px; height: 2px; background: var(--sec); }
body[data-pagina="metodologia"] .sec-title::before { background: var(--oro-2); }   /* Método: filetes en dorado */
.sec-title em.linea-oro { display: inline; font-size: inherit; margin: 0; }
@media (max-width: 640px) { .sec-title { padding-left: 0; } .sec-title::before { display: none; } }

/* Campo de referencia dentro de la ficha de promoción */
.dc-ref { margin: 0 0 22px; border: 1px solid var(--line); background: var(--bg-1); }
.dc-ref img { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; border-bottom: 1px solid var(--line); }
.dc-ref figcaption { display: flex; flex-direction: column; gap: 3px; padding: 12px 16px 14px; }
.dc-ref-lbl { font-size: 9px; letter-spacing: .24em; text-transform: uppercase; font-weight: 700; color: var(--text-mute); }
.dc-ref figcaption strong { font-family: var(--f-display); font-weight: 700; text-transform: uppercase; font-size: 20px; line-height: 1.05; letter-spacing: -.005em; color: var(--text); }
.dc-ref-meta { font-size: 12px; color: var(--text-mid); letter-spacing: .02em; }
.dc-ref-cred { font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-mute); margin-top: 3px; }
.dc-ref-cred a { color: var(--text-mute); text-decoration: none; border-bottom: 1px solid var(--line-strong); }

/* ═══════════════════════════════════════════════
   BANNER CERRADO DEL RANKING · banda sin foto que gira sobre el eje
   horizontal (rotateX) y enseña la evidencia. Abierto, vuelve la foto.
═══════════════════════════════════════════════ */
details.promo > summary .dc-flip { display: block; position: relative; perspective: 1400px; }
details.promo[open] > summary .dc-flip { display: none; }
details.promo:not([open]) > summary .dc-head { display: none; }
details.promo:not([open]) > summary:focus-visible .dc-flip { outline: 3px solid var(--oro-1); outline-offset: -3px; }
.dc-flip-inner { position: relative; min-height: 118px; transform-style: preserve-3d; transition: transform .6s cubic-bezier(.2,.72,.2,1); }
.dc-face {
  position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  display: grid; align-items: center; padding: 0 120px 0 44px; background: var(--text); color: #FFFFFF;
}
/* La cara frontal usa la misma composición que la de evidencia —filete de acento,
   rótulo fino, titular grande y pie— pero en claro: lo que se rankea son las
   promociones, así que el nombre manda y la cifra acompaña. */
.dc-front { grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 28px; background: var(--bg-2); color: var(--text); border: 1px solid var(--line); border-left: 4px solid var(--oro-2); }
/* Una sola línea: puesto y nombre pesan igual, las estrellas siguen al nombre y la
   ubicación va detrás. Si no cabe, pliega por ahí en vez de recortar el nombre. */
.dc-f-linea { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; min-width: 0; }
.dc-front .dc-f-label { color: var(--oro-3); font-family: var(--f-display); font-size: clamp(26px, 2.8vw, 36px); line-height: 1.05; letter-spacing: -.005em; }
/* Las estrellas al mismo cuerpo que en el reverso: en el rótulo de 10 px el glifo
   quedaba desproporcionado y no se leía como una calificación. */
.dc-f-estrellas { flex: none; font-size: clamp(26px, 2.8vw, 36px); line-height: 1; letter-spacing: .03em; }
.dc-f-name { font-family: var(--f-display); font-weight: 700; text-transform: uppercase; font-size: clamp(26px, 2.8vw, 36px); line-height: 1.05; letter-spacing: -.005em; color: var(--text); }
/* Sin encogerse: si no cabe detras de las estrellas, baja entera a la linea
   siguiente en vez de recortarse con puntos suspensivos. */
.dc-front .dc-f-loc { color: var(--text-mute); flex: none; max-width: 100%; }
.dc-back { transform: rotateX(180deg); grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 0 34px; background: var(--text); border-left: 4px solid var(--oro-1); }
.dc-b-prueba { display: grid; gap: 5px; min-width: 0; }
/* La nota: grande y en oro sobre el negro, discreta y en gris cuando no hay giro. */
.dc-f-nota { font-family: var(--f-display); font-weight: 700; font-size: clamp(26px, 2.8vw, 36px); line-height: 1; letter-spacing: -.02em; white-space: nowrap; }
.dc-f-nota small { font-family: var(--f-sans); font-size: 13px; letter-spacing: .14em; font-weight: 600; margin-left: 3px; }
/* Tras el giro lo que manda es la nota: es lo que se rankea. El campo de
   referencia es la prueba que la sostiene, no el titular. */
.dc-back .dc-f-nota { color: var(--oro-1); }
.dc-front .dc-f-nota { justify-self: end; }
.dc-back .dc-f-nota small { color: rgba(255,255,255,.5); }
.dc-front .dc-f-nota { color: var(--text); }
.dc-front .dc-f-nota small { color: var(--text-mute); }
.dc-f-label { font-size: 10px; letter-spacing: .3em; text-transform: uppercase; font-weight: 700; color: var(--oro-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc-f-prueba { font-family: var(--f-sans); font-weight: 600; font-size: clamp(15px, 1.5vw, 18px); line-height: 1.4; letter-spacing: .01em; color: rgba(255,255,255,.82); }
.dc-f-loc { font-size: 16px; color: var(--greige); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc-f-plus { position: absolute; right: 44px; top: 50%; transform: translateY(-50%); z-index: 3; font-family: var(--f-display); font-weight: 700; font-size: 30px; line-height: 1; color: var(--text); pointer-events: none; transition: color .3s var(--ease), opacity .3s var(--ease); }
/* El giro solo con puntero fino y sin preferencia de movimiento reducido. Táctil y teclado ven la cara frontal completa. */
@media (pointer: fine) and (prefers-reduced-motion: no-preference) {
  details.promo:not([open]) > summary:hover .dc-flip-inner,
  details.promo:not([open]) > summary:focus-visible .dc-flip-inner { transform: rotateX(180deg); }
  /* Con giro, la nota y el «+» pertenecen al reverso. */
  .dc-front .dc-f-nota { display: none; }
  .dc-f-plus { opacity: 0; }
  details.promo:not([open]) > summary:hover .dc-f-plus,
  details.promo:not([open]) > summary:focus-visible .dc-f-plus { opacity: 1; color: #FFFFFF; }
}
@media (max-width: 640px) {
  .dc-flip-inner { min-height: 92px; }
  .dc-face { padding: 0 64px 0 20px; }
  /* En movil el nombre ocupa dos lineas y la ubicacion se salia de la caja fija.
     La cara frontal vuelve al flujo para que la tarjeta crezca lo que haga falta;
     la de evidencia sigue absoluta y se ajusta a esa altura. */
  .dc-front { gap: 16px; position: relative; inset: auto; padding-top: 16px; padding-bottom: 16px; }
  /* Aquí no cabe todo en una fila: el nombre se pliega y las estrellas fluyen
     detrás del texto, en vez de recortarlo. */
  .dc-f-name { font-size: 23px; }
  .dc-front .dc-f-label { font-size: 23px; }
  .dc-f-estrellas { font-size: 17px; white-space: nowrap; }
  .dc-f-linea { gap: 2px 10px; }
  .dc-f-loc { font-size: 14px; }
  .dc-f-nota { font-size: 23px; }
  .dc-f-plus { right: 20px; }
}

/* Cards de campos (sustituyen a galería + tabla) */
.campos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 24px; margin-top: 26px; }
.cc {
  display: flex; flex-direction: column; border: 1px solid var(--line); background: var(--bg-1);
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease);
}
.cc:hover { border-color: var(--verde-line); box-shadow: 0 14px 44px rgba(30,58,95,.10); transform: translateY(-2px); }
.cc-img { position: relative; aspect-ratio: 3/2; overflow: hidden; background: var(--bg-3); border-bottom: 1px solid var(--line); }
.cc-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--ease); }
.cc:hover .cc-img img { transform: scale(1.035); }
.cc-sin {
  height: 100%; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; padding: 18px 20px;
  background: linear-gradient(160deg, #E8ECE3 0%, #D5DDCB 100%);
}
.cc-sin b { font-family: var(--f-display); font-weight: 700; text-transform: uppercase; font-size: 22px; line-height: 1; color: var(--verde-2); opacity: .75; }
.cc-sin span { font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; color: var(--text-mute); }
.cc-tag, .cc-cat {
  position: absolute; top: 10px; font-size: 9px; letter-spacing: .18em; text-transform: uppercase; font-weight: 700;
  padding: 4px 8px; background: rgba(26,26,26,.78); color: #FFFFFF;
}
.cc-tag { left: 10px; }
.cc-cat { right: 10px; background: var(--verde-2); }
.cc-1 .cc-cat, .cc-2 .cc-cat { background: rgba(26,26,26,.62); }
.cc-body { display: flex; flex-direction: column; gap: 6px; padding: 16px 20px 18px; flex: 1; }
.cc-stars { color: var(--amarillo); letter-spacing: 2px; font-size: 15px; line-height: 1; }
.cc-name { font-family: var(--f-display); font-weight: 700; text-transform: uppercase; font-size: 22px; line-height: 1.02; margin: 4px 0 0; letter-spacing: -.005em; }
.cc-meta { font-size: 12px; color: var(--text-mute); letter-spacing: .02em; }
.cc-datos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; margin: 10px 0 0; padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.cc-datos .cc-acceso { grid-column: 1 / -1; }
.cc-datos dt { font-size: 9px; letter-spacing: .22em; text-transform: uppercase; font-weight: 700; color: var(--text-mute); margin-bottom: 2px; }
.cc-datos dd { margin: 0; font-size: 14px; font-weight: 600; color: var(--text); }
.cc-datos .mem { margin: 2px 0 0; }
.cc-palmares { margin: 2px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--text-mid); flex: 1; }
.cc-cred { font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-mute); margin-top: 6px; }
.cc-cred a { color: var(--verde-2); text-decoration: none; border-bottom: 1px solid var(--verde-line); }
.campos-nota { margin: 22px 0 0; }
@media (max-width: 640px) { .campos-grid { grid-template-columns: 1fr; gap: 18px; } }

/* Notas al método: desplegables sobrios (solo el «+»), separados por líneas */
.notas-lista { border-top: 0; }
.nota-item { border-bottom: 1px solid var(--line); }
.nota-item:last-child { border-bottom: 0; }
.nota-item > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr 28px; gap: 12px; align-items: center; padding: 22px 0; }
.nota-item > summary::-webkit-details-marker { display: none; }
.ni-titulo { font-family: var(--f-display); font-weight: 700; text-transform: uppercase; font-size: 22px; line-height: 1; letter-spacing: -.005em; color: var(--text); }
.ni-detalle { padding: 0 40px 24px 0; box-sizing: border-box; }
.ni-detalle .puntos { margin: 0; }

/* Card única que agrupa las cuatro notas del método */
.notas-card { border: 0; background: transparent; padding: 0; margin-top: 80px; }   /* sin card: el bloque va directamente sobre la página */
.notas-card .sec-eyebrow { margin-bottom: 6px; font-size: clamp(26px, 3.2vw, 42px); }   /* mismo cuerpo que «Cómo funciona el algoritmo» */
.notas-card .notas-grid { gap: 0; margin-top: 0; }
.notas-card .nota-bloque { border: 0; background: transparent; padding: 26px 0 20px; }
.notas-card .nota-bloque:nth-child(even) { border-left: 1px solid var(--line); padding-left: 40px; }
.notas-card .nota-bloque:nth-child(odd) { padding-right: 40px; }
.notas-card .nota-bloque:nth-child(n+3) { border-top: 1px solid var(--line); }

/* Claves dentro de la ficha */
.claves { list-style: none; margin: 0 0 26px; padding: 0 0 24px; border-bottom: 1px solid var(--line);
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px 32px; }
.claves li { position: relative; padding-left: 20px; font-size: 14.5px; line-height: 1.45; color: var(--text-mid); }
.claves li::before { content: ''; position: absolute; left: 0; top: .68em; width: 11px; height: 1.5px; background: var(--oro-2); }
.claves li strong { color: var(--text); font-weight: 700; }

/* Acordeón del ranking */
.detail-grid.acordeon { gap: 12px; }
details.promo { display: block; }
details.promo > summary { list-style: none; cursor: pointer; display: block; }
details.promo > summary::-webkit-details-marker { display: none; }
details.promo > summary .dc-head { min-height: 136px; padding: 24px 44px 22px; transition: min-height .4s var(--ease), padding .4s var(--ease); }
details.promo[open] > summary .dc-head { min-height: 420px; padding: 48px 44px 40px; }
details.promo > summary .dc-title { font-size: clamp(24px, 2.6vw, 34px); margin-bottom: 4px; }
details.promo[open] > summary .dc-title { font-size: clamp(38px, 4.4vw, 62px); margin-bottom: 12px; }
details.promo > summary .dc-eyebrow, details.promo > summary .dc-img-pie { display: none; }
details.promo[open] > summary .dc-eyebrow, details.promo[open] > summary .dc-img-pie { display: block; }
details.promo > summary .dc-score-overlay { font-size: 44px; bottom: 22px; }
details.promo[open] > summary .dc-score-overlay { font-size: 76px; bottom: 40px; }
details.promo > summary .detail-card-placeholder-tag { right: 84px; }
details.promo > summary .dc-head::before {
  content: '+'; position: absolute; right: 44px; top: 20px; z-index: 3;
  font-family: var(--f-display); font-weight: 700; font-size: 30px; line-height: 1; color: #FFFFFF;
  text-shadow: 0 1px 8px rgba(15,23,38,.7);
}
/* Abierta, el indicador es una X de cierre: grande y de trazo fino, porque el
   signo menos de 30 px sobre una fotografia no se veia. */
details.promo[open] > summary .dc-head::before {
  content: '\00D7'; font-family: var(--f-sans); font-weight: 300; font-size: 46px; line-height: .78;
}
details.promo > summary:focus-visible .dc-head { outline: 3px solid var(--oro-1); outline-offset: -3px; }
/* Estado cerrado: una línea de título, solo el municipio, sitio para el score y sin rótulo © */
details.promo:not([open]) > summary .dc-head-inner { max-width: none; padding-right: 130px; }
details.promo:not([open]) > summary .dc-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
details.promo:not([open]) > summary .dc-loc-extra { display: none; }
details.promo:not([open]) > summary .detail-card-placeholder-tag { display: none; }

/* Enlace "siguiente" al pie de cada página */
.siguiente { display: flex; justify-content: flex-end; margin-top: 72px; }
.siguiente a {
  text-decoration: none; color: var(--text); border: 1px solid var(--line-strong); padding: 18px 26px;
  display: flex; flex-direction: column; gap: 6px; min-width: 260px;
  transition: background .25s, color .25s, border-color .25s;
}
.siguiente a small { font-size: 9.5px; letter-spacing: .3em; text-transform: uppercase; color: var(--text-mute); font-weight: 700; }
.siguiente a b { font-family: var(--f-display); font-weight: 700; text-transform: uppercase; font-size: 24px; letter-spacing: -.005em; }
.siguiente a:hover { background: var(--text); color: #FFFFFF; border-color: var(--text); }
.siguiente a:hover small { color: var(--oro-1); }

@media (max-width: 900px) { .pasos { grid-template-columns: 1fr; } .notas-grid { grid-template-columns: 1fr; }
  .notas-card { padding: 0; }
  .notas-card .nota-bloque { padding: 22px 0 18px !important; border-left: 0 !important; }
  .notas-card .nota-bloque:nth-child(n+2) { border-top: 1px solid var(--line); } }
@media (max-width: 760px) {
  .topnav { height: auto; min-height: 64px; padding: 10px var(--px); }
  .topnav-links { overflow-x: auto; margin: 0 calc(-1 * var(--px)); padding: 0 var(--px); scrollbar-width: none; }
  .topnav-links::-webkit-scrollbar { display: none; }
  .topnav-links a { padding: 12px 10px 12px; font-size: 10px; letter-spacing: .16em; }
  .claves { grid-template-columns: 1fr; }
  details.promo > summary .dc-head { min-height: 124px; padding: 16px 20px 14px; }
  details.promo:not([open]) > summary .dc-head-inner { padding-right: 84px; }
  details.promo:not([open]) > summary .dc-title { font-size: 22px; }
  details.promo:not([open]) > summary .dc-loc { font-size: 12px; }
  details.promo:not([open]) > summary .dc-t-rank, details.promo:not([open]) > summary .dc-t-loc { display: none; }
  details.promo > summary .dc-head::before { right: 20px; top: 14px; font-size: 24px; }
  details.promo[open] > summary .dc-head::before { font-size: 36px; }
  details.promo > summary .detail-card-placeholder-tag { right: 54px; top: 14px; }
  details.promo > summary .dc-score-overlay { font-size: 34px; bottom: 16px; right: 20px; }
  details.promo[open] > summary .dc-head { min-height: 320px; padding: 36px 26px 30px; }
  details.promo[open] > summary .dc-score-overlay { font-size: 52px; bottom: 28px; right: 26px; }
  /* Con la ficha abierta el nombre y la zona pasaban por debajo de la nota: en
     «EPIC Marbella by Fendi» el 55 tapaba «Marbella» y el /100, la zona. */
  details.promo[open] > summary .dc-head-inner { padding-right: 78px; }
  details.promo[open] > summary .dc-title { font-size: 32px; }
  .siguiente a { min-width: 0; width: 100%; }
}

/* ── Clases que sustituyen a los estilos inline (norma: nada de style="") ── */
/* Estrella vacia: el mismo amarillo, solo el contorno. Relleno transparente y
   trazo en em, asi la silueta es la del glifo lleno y el grosor acompana al
   cuerpo, de los 15 px del mapa a los 36 px de la tarjeta. */
.star-off, .star-off .star, .ap-off, .ap-off .star { opacity: 1; color: rgba(242,187,22,.3); }
@supports (-webkit-text-stroke: 1px red) {
  .star-off, .star-off .star, .ap-off, .ap-off .star { color: transparent; -webkit-text-stroke: .06em var(--amarillo); }
}
.mute { color: var(--text-mute); }
.dc-stat-val.texto { font-size: 14px; text-transform: none; font-weight: 600; letter-spacing: 0; line-height: 1.3; }
.dc-stat-val.fecha { font-size: 18px; }
.dc-stat-src { display: block; font-family: var(--f-sans); font-weight: 400; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-mute); margin-top: 3px; }
.golf-td { font-size: 12px; color: var(--text-mid); line-height: 1.4; }
.golf-td-sub { color: var(--text-mute); font-size: 11px; }
.golf-td-gf { font-weight: 600; }
.golf-td-palmares { font-size: 11px; color: var(--text-mute); line-height: 1.45; font-style: italic; }
.map-noscript { padding: 60px; text-align: center; color: var(--text-mute); }
.puntos.ancha { max-width: 820px; }
.enlace-3d { margin: -8px 0 26px; }
.btn-linea { display: inline-block; border: 1px solid var(--line-strong); padding: 10px 18px; font-size: 11px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--y-1); text-decoration: none; }
.btn-linea:hover { background: var(--text); color: #FFFFFF; border-color: var(--text); }
.th-derecha { text-align: right; }
.fuentes-nota { display: block; font-size: 12px; line-height: 1.5; color: var(--text-mute); margin: 2px 0 10px; }
/* ── Atlas de relaciones (ranking). Lienzo propio, sin teselas. ── */
.atlas { border: 1px solid var(--line-strong); background: var(--bg-3); }
.atlas-lienzo { position: relative; min-width: 0; }
.atlas-svg { display: block; width: 100%; height: auto; touch-action: none; }
.atlas-svg.at-arrastrando { cursor: grabbing; }
/* El mar es el fondo del lienzo; la tierra, un gris más claro encima. */
.at-tierra polygon { fill: var(--bg-1); }
.at-rejilla line { stroke: rgba(30,58,95,.09); stroke-width: 1; vector-effect: non-scaling-stroke; }
.at-costa polyline { fill: none; stroke: rgba(30,58,95,.38); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.at-nucleo-m { fill: var(--text-mute); }
.at-nucleo-may .at-nucleo-m { fill: var(--text); }
.at-nucleo-may .at-sitio { fill: var(--text-mid); letter-spacing: .22em; }
.atlas-zoom { position: absolute; top: 12px; right: 12px; display: flex; flex-direction: column; gap: 6px; }
/* Solo aparece con una ficha fijada: es la salida del zoom. */
.atlas-volver {
  position: absolute; top: 12px; left: 12px; display: flex; align-items: center; gap: 8px;
  padding: 9px 14px; background: var(--text); border: 1px solid var(--text); color: #FFFFFF;
  font-family: var(--f-sans); font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  cursor: pointer; transition: background-color .2s, color .2s;
}
.atlas-volver[hidden] { display: none; }
.atlas-volver span { font-size: 13px; line-height: 1; }
.atlas-volver:hover { background: var(--oro-3); border-color: var(--oro-3); }
.atlas-volver:focus-visible { outline: 2px solid var(--oro-1); outline-offset: 2px; }
.atlas-zoom button {
  width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.92); border: 1px solid var(--line-strong); color: var(--text);
  font-family: var(--f-sans); font-size: 15px; line-height: 1; cursor: pointer;
  transition: background-color .2s, color .2s, opacity .2s;
}
.atlas-zoom button:hover:not(:disabled) { background: var(--text); color: #FFFFFF; }
.atlas-zoom button:disabled { opacity: .35; cursor: default; }
.atlas-zoom button:focus-visible { outline: 2px solid var(--oro-3); outline-offset: 2px; }
.at-sitio { fill: var(--text-mute); font-family: var(--f-sans); font-size: 11px; font-weight: 600; letter-spacing: .18em; text-anchor: middle; }
.at-mar { fill: rgba(30,58,95,.14); font-family: var(--f-display); font-size: 26px; letter-spacing: .34em; text-anchor: middle; }
/* Las lineas no estan en reposo ni al senalar: solo al fijar una promocion, y
   solo las suyas. En reposo el mapa es una constelacion de puntos; la red
   aparece cuando se pregunta por una promocion concreta. */
.at-linea { stroke: var(--verde-2); opacity: 0; transition: opacity .3s, stroke .25s; vector-effect: non-scaling-stroke; }
.at-guia { stroke: rgba(30,58,95,.42); stroke-width: 1; vector-effect: non-scaling-stroke; }
.at-ancla { fill: var(--text-mid); }
.at-linea.at-fuera { stroke-dasharray: 3 5; }
/* Con un nodo senalado, todo lo que flota sin vinculo con el baja a una
   transparencia del 80 %. La cartografia —rejilla, costa, tierra y mar— no se
   toca: es el sustrato, no un elemento de la red. */
.atlas-svg.at-fijado .at-linea.at-on { opacity: .85; }

.atlas-svg.at-fijado .at-linea.at-on.at-fuera { opacity: .5; stroke: var(--text-mute); }
.at-campo-p { transition: opacity .25s, r .2s; }
.at-campo-t {
  opacity: 0; pointer-events: none; text-anchor: middle; transition: opacity .3s;
  fill: var(--text); font-family: var(--f-sans); font-size: 9.5px; font-weight: 700; letter-spacing: .04em;
  paint-order: stroke; stroke: var(--bg-0); stroke-width: 2.6px; stroke-linejoin: round;
}
/* El nombre sale al pasar por encima de su punto, no todos a la vez: con
   quince campos en el racimo de Quercus los rotulos se pisaban. */
.atlas-svg .at-campo:hover .at-campo-t { opacity: 1; }
.at-golpe { fill: transparent; }
/* En fondo claro manda el tono oscuro: a más estrellas, más peso visual. */
.at-s4 .at-campo-p { fill: #2F4A16; }
.at-s3 .at-campo-p { fill: #4A6B22; }
.at-s2 .at-campo-p { fill: #6E9130; }
.at-s1 .at-campo-p { fill: #9CB865; }
/* El campo que no se puede reservar va en rojo macizo, el mismo de la etiqueta
   «estrictamente privado». El tamano sigue diciendo la categoria, asi que no se
   pierde informacion: el cuerpo son las estrellas y el color, el acceso. */
.at-cerrado .at-campo-p { fill: #C0392B; stroke: none; }
.atlas-svg.at-activo .at-campo .at-campo-p { opacity: .2; }
.atlas-svg .at-campo.at-on .at-campo-p { opacity: 1; }
.at-campo, .at-promo { cursor: pointer; outline: none; }
.at-campo:focus-visible .at-golpe, .at-promo:focus-visible .at-promo-p { stroke: var(--oro-3); stroke-width: 2; vector-effect: non-scaling-stroke; }
/* Sin non-scaling-stroke el contorno engordaba con el zoom: el radio se
   contraescala pero el trazo no, y a ocho aumentos el circulo se veia macizo. */
.at-promo-p { fill: var(--bg-0); stroke: var(--text); stroke-width: 1.6; vector-effect: non-scaling-stroke; transition: opacity .25s, fill .25s, stroke .25s; }
.at-promo-n { fill: var(--text); font-family: var(--f-display); font-size: 13px; font-weight: 700; text-anchor: middle; transition: opacity .25s, fill .25s; }
/* Los demas numeros no se apagan: son la referencia que permite situar al
   senalado dentro del ranking. Los nucleos de poblacion si, porque ahi son
   rotulo y compiten con la red. */
.atlas-svg.at-activo .at-sitios { opacity: .2; }
/* El nodo senalado se llena con el oro de la casa. Se usa oro-3 y no oro-2
   porque el numero va dentro en blanco: con el claro se quedaba en 3,1:1. */
/* Fijada: oro macizo con el numero en blanco. Al pasar por encima de otra:
   aro de oro y numero en oro, que avisa de que es pulsable sin confundirse
   con la que esta fijada. */
.atlas-svg .at-promo.at-on .at-promo-p { opacity: 1; fill: var(--oro-3); stroke: var(--oro-3); }
.atlas-svg .at-promo:hover .at-promo-p { opacity: 1; stroke: var(--oro-3); stroke-width: 2.6; }
.atlas-svg .at-promo:hover .at-promo-n { opacity: 1; fill: var(--oro-3); }
.atlas-svg .at-promo.at-on:hover .at-promo-p { stroke-width: 1.6; }
.atlas-svg .at-promo.at-on:hover .at-promo-n { fill: var(--bg-0); }
.atlas-svg .at-promo.at-on .at-promo-n { opacity: 1; fill: var(--bg-0); }
/* Franja bajo el mapa. La altura está reservada de antemano: la ficha de campo
   crece o mengua según cuántas promociones lo citen, y sin esto el contenido de
   la página daría un salto en cada hover. */
.atlas-panel { border-top: 1px solid var(--line-strong); padding: 18px 22px; background: var(--bg-0); color: var(--text); min-height: 142px; display: flex; align-items: center; }
.ap-cols { display: grid; grid-template-columns: minmax(0,1.15fr) auto minmax(0,1.5fr) auto; gap: 30px; align-items: center; width: 100%; }
.ap-cols-campo { grid-template-columns: minmax(0,.85fr) minmax(0,.75fr) minmax(0,2.4fr); }
.ap-cols-reposo { grid-template-columns: minmax(0,1.5fr) minmax(0,1.2fr) auto; }
.ap-bloque { min-width: 0; }
.ap-marcador { display: flex; flex-direction: column; justify-content: center; }
.ap-accion { justify-self: end; }
.ap-tag { font-size: 10px; letter-spacing: .26em; text-transform: uppercase; color: var(--text-mute); font-weight: 700; }
.ap-intro { font-size: 12.5px; line-height: 1.5; color: var(--text-mid); margin: 8px 0 0; }
.ap-intro strong { color: var(--text); font-weight: 600; }
.ap-cifras { display: grid; grid-template-columns: repeat(3,auto); gap: 26px; margin: 0; padding: 0 0 0 30px; border-left: 1px solid var(--line-strong); }
.ap-cifras dt { font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: var(--text-mute); }
.ap-cifras dd { margin: 4px 0 0; font-family: var(--f-display); font-size: 26px; line-height: 1; color: var(--text); }
.ap-nombre { font-family: var(--f-display); font-size: 24px; line-height: 1.04; text-transform: uppercase; margin: 6px 0 0; color: var(--text); }
.ap-nota { display: flex; align-items: baseline; gap: 8px; margin: 0; }
.ap-nota strong { font-family: var(--f-display); font-size: 46px; line-height: .9; color: var(--text); }
.ap-nota span { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-mute); }
.ap-split { font-size: 12px; color: var(--text-mid); margin: 6px 0 0; }
.ap-hechos { list-style: none; margin: 0; padding: 0 0 0 30px; border-left: 1px solid var(--line-strong); display: grid; gap: 7px; font-size: 12.5px; line-height: 1.45; color: var(--text-mid); }
.ap-hechos strong { color: var(--text); }
.ap-hechos .ap-fuera { color: var(--text-mute); }
.ap-estrellas { margin: 8px 0 0; font-size: 14px; color: var(--amarillo); letter-spacing: .06em; }

.ap-acceso { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-mute); margin-left: 8px; }
.ap-citas { font-size: 11.5px; color: var(--text-mute); margin: 0; }
/* Tres columnas fijas: con seis citas, el máximo de la base, nunca pasa de dos filas. */
.ap-quien { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 5px 18px; font-size: 11.5px; color: var(--text); }
.ap-quien li { display: grid; grid-template-columns: 20px minmax(0,1fr) auto; gap: 6px; align-items: baseline; }
.ap-quien li b { font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-quien span { font-family: var(--f-display); color: var(--oro-3); }
.ap-quien em { font-style: normal; font-size: 11px; color: var(--text-mute); }
.ap-cta { margin: 0; white-space: nowrap; background: transparent; border: 1px solid var(--line-strong); color: var(--text); font-family: var(--f-sans); font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; padding: 12px 14px; cursor: pointer; transition: background-color .2s, color .2s; }
.ap-cta:hover { background: var(--text); color: #FFFFFF; }
.atlas-pie { font-size: 11px; color: var(--text-mute); margin: 10px 0 0; letter-spacing: .04em; }
.atlas-pie a { color: var(--text-mid); }
/* La leyenda del atlas usa su propia rampa: aquí a más estrellas, más oscuro.
   La de Campos sigue con la de Leaflet, que va al revés sobre las teselas. */
/* En la leyenda del atlas los puntos son todos del mismo tamaño y sin anillo:
   el anillo blanco de la leyenda de Leaflet leía como «élite hueco», y el rojo
   de «solo socios» salía al tamaño base (16 px) frente a los verdes decrecientes. */
.map-legend-atlas .legend-dot { width: 12px; height: 12px; border: 0; box-shadow: none; }
.map-legend-atlas .legend-dot.g4 { background: #2F4A16; }
.map-legend-atlas .legend-dot.g3 { background: #4A6B22; }
.map-legend-atlas .legend-dot.g2 { background: #6E9130; }
.map-legend-atlas .legend-dot.g1 { background: #9CB865; }
.legend-dot.hueco { background: #C0392B; border-color: #C0392B; }
.map-legend-atlas .legend-dot.hueco { width: 12px; height: 12px; }
.legend-linea { display: inline-block; width: 22px; height: 0; border-top: 1.5px solid var(--verde-2); vertical-align: middle; }
.legend-linea.punteada { border-top-style: dashed; }
@media (max-width: 900px) {
  .atlas-panel { min-height: 0; display: block; padding: 18px; }
  .ap-cols, .ap-cols-campo, .ap-cols-reposo { grid-template-columns: 1fr; gap: 16px; }
  .ap-cifras, .ap-hechos { padding-left: 0; border-left: 0; padding-top: 14px; border-top: 1px solid var(--line-strong); }
  .ap-accion { justify-self: stretch; }
  .ap-cta { width: 100%; }
  /* Aquí no hay altura reservada que respetar, así que el nombre se lee entero. */
  .ap-quien { grid-template-columns: 1fr; font-size: 12.5px; }
  .atlas-zoom button { width: 42px; height: 42px; font-size: 18px; }
}
/* ── Atlas con panel lateral ─────────────────────────────────
   Prueba: la ficha del punto va a la derecha del lienzo, a la altura del
   mapa, en vez de debajo. Se pierde ancho de mapa y se gana que la
   información se vea sin desplazar la página. Reversible quitando la
   clase atlas--lateral en el marcado. Por debajo de 900 px vuelve a
   apilarse, que es lo que cabe en un móvil. */
@media (min-width: 901px) {
  .atlas.atlas--lateral { display: grid; grid-template-columns: minmax(0,1fr) 300px; align-items: stretch; }
  .atlas--lateral .atlas-lienzo { min-width: 0; }
  .atlas--lateral .atlas-svg { height: auto; }
  /* contain: size hace que el panel no aporte altura a la fila: la fila la
     fija el mapa y, si la ficha es más alta, el panel desplaza por dentro en
     vez de estirar el lienzo y descubrir el fondo bajo el mapa. */
  .atlas--lateral .atlas-panel {
    border-top: 0; border-left: 1px solid var(--line-strong); min-height: 0; height: 100%;
    padding: 22px 22px 20px; display: block; overflow-y: auto; overscroll-behavior: contain;
    contain: size; box-sizing: border-box; scrollbar-width: thin;
  }
  /* Degradado al pie mientras queda contenido por debajo (clase que pone engine.js). */
  .atlas--lateral .atlas-panel::after {
    content: ''; display: block; position: sticky; bottom: -20px; height: 28px; margin: -28px 0 0;
    background: linear-gradient(to bottom, rgba(255,255,255,0), var(--bg-0) 85%);
    pointer-events: none; opacity: 0; transition: opacity .2s;
  }
  .atlas--lateral .atlas-panel.ap-desborda::after { opacity: 1; }
  .atlas--lateral .ap-cols, .atlas--lateral .ap-cols-campo, .atlas--lateral .ap-cols-reposo { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; }
  .atlas--lateral .ap-cifras { grid-template-columns: repeat(3, auto); gap: 18px; padding: 14px 0 0; border-left: 0; border-top: 1px solid var(--line-strong); }
  .atlas--lateral .ap-cifras dd { font-size: 22px; }
  .atlas--lateral .ap-hechos { padding: 14px 0 0; border-left: 0; border-top: 1px solid var(--line-strong); }
  .atlas--lateral .ap-marcador { flex-direction: row; align-items: baseline; gap: 14px; flex-wrap: wrap; }
  .atlas--lateral .ap-nota strong { font-size: 40px; }
  .atlas--lateral .ap-nombre { font-size: 22px; }
  .atlas--lateral .ap-intro { font-size: 12px; }
  .atlas--lateral .ap-accion { justify-self: stretch; }
  .atlas--lateral .ap-cta { width: 100%; white-space: normal; text-align: left; }
  .atlas--lateral .ap-quien { grid-template-columns: 1fr; gap: 6px; }
  .atlas--lateral .ap-quien li b { white-space: normal; }
  .atlas--lateral .atlas-zoom { right: 12px; }
}
/* Entradilla en redonda: para el texto de presentación de PRIMEandGOLF, que
   es declaración y no comentario. */
.sec-lede--recta { font-style: normal; }
.sec-lede strong { color: var(--text); font-weight: 600; }
/* ── Respaldo del estudio (contacto) ─────────────────────────────
   PRIMEandGOLF habla en primera persona; Malashpina aparece como garantía,
   a un escalón por debajo: filete arriba, dos columnas, cuerpo pequeño. */
.respaldo { margin-top: 88px; padding-top: 44px; border-top: 1px solid var(--line-strong); display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 24px 72px; align-items: start; max-width: 1040px; }
.respaldo .gana-rot { margin-bottom: 12px; }
.respaldo-firma { margin: 0; font-family: var(--f-display); font-weight: 700; text-transform: uppercase; font-size: 22px; line-height: 1; letter-spacing: -.005em; color: var(--text); }
.respaldo-enlaces { margin: 16px 0 0; font-size: 13px; color: var(--text-mute); }
.respaldo-enlaces a { color: var(--text-mid); text-decoration: none; border-bottom: 1px solid var(--sec-line); }
.respaldo-enlaces a:hover { color: var(--sec-text); }
.respaldo-texto p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--text-mid); }
.respaldo-texto strong { color: var(--text); font-weight: 600; }
.respaldo-conflicto { margin-top: 20px !important; font-size: 13px !important; color: var(--text-mute) !important; }
@media (max-width: 900px) { .respaldo { grid-template-columns: 1fr; gap: 20px; margin-top: 56px; padding-top: 32px; } }
/* El pie ya cambia de fondo: el filete superior sobra. */
footer { border-top: 0; }
/* La marca: «and» siempre en el peso más fino de la familia, esté donde esté. */
em.and { font-style: normal; font-weight: 300; color: var(--text-mute); }
/* Sobre fondo oscuro o imagen, el «and» baja a blanco al 72 %, como en la barra. */
.gana-editorial em.and { color: rgba(255,255,255,.72); }
/* El logotipo en la cabecera: algo mas alto que la altura de mayuscula de la
   linea, porque va entre versales muy espaciadas y si se iguala se pierde. */
.marca-logo { height: 12px; width: auto; display: inline-block; vertical-align: -1px; margin-right: .16em; }
/* Dos formularios, dos grises: el general un punto más claro que el de
   promotoras, para que se lean como dos piezas sin recurrir al color. */
#formLead { background: var(--bg-1); }
#formPro { background: var(--bg-3); }
/* Marcadores del mapa Leaflet */
.pin-promo { background: none; border: none; }
.pin-promo-num { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, #2C5384, #7FA3C9); border: 2.5px solid #FFFFFF; box-shadow: 0 2px 10px rgba(15,23,38,.42); display: flex; align-items: center; justify-content: center; font-family: var(--f-display); font-size: 14px; font-weight: 700; color: #FFFFFF; }
.pin-campo { border-radius: 50%; box-shadow: 0 1px 4px rgba(15,23,38,.35); border: 2px solid #FFFFFF; }
.pin-campo-4 { background: #88A53C; border-color: #0F1726; }
.pin-campo-3 { background: #6E9130; border-color: #0F1726; }
.pin-campo-2 { background: #558025; }
.pin-campo-1 { background: #3E5F1C; }
.pop-sub { color: var(--text-mid); }
.pop-score { color: var(--y-1); font-size: 11px; font-weight: 700; letter-spacing: .04em; }
.pop-stars { color: var(--amarillo); font-weight: 700; }

/* ── Puntualizaciones ─────────────────────────────────────────────────────
   Las notas al pie de la guia —las que matizan un dato sin ser el dato— se
   marcan igual en todas partes: asterisco delante y cursiva. Asi se distinguen
   de un pie de foto o de un rotulo sin depender del contexto. */
.account-footnote, .atlas-pie, .galeria-nota { font-style: italic; }
.account-footnote::before, .atlas-pie::before, .galeria-nota::before { content: '*'; margin-right: .45em; font-style: normal; }

/* ── Hero de pagina interior ──────────────────────────────────────────────
   Banda corta, del ancho completo, con el mismo lenguaje que la portada pero
   a media altura: la portada ocupa 92vh, esto se queda en torno al 40 %. Cada
   pagina trae su plano —el suyo, no uno generico— y el numero de capitulo en
   oro. Aqui vive el unico <h1> de las interiores, que antes no tenian ninguno.
   El velo es mas denso que en la portada porque hay planos muy claros (el
   cenital del green, el cesped a contraluz) sobre los que el blanco se perdia. */
.hero-pagina { min-height: clamp(280px, 40vh, 420px); padding: 44px var(--px) 44px; justify-content: flex-end; }
/* Las bandas interiores tenian velo propio y la portada el suyo. Ahora hay uno
   solo, en .hero::after (onepage.html), a medio camino de los dos. No reponer el
   override aqui: cualquier ajuste del velo se hace en ese unico sitio. */
.hero-pagina .hero-center { max-width: 760px; }
.hero-pagina .hero-kicker { font-size: 11px; letter-spacing: .36em; margin-bottom: 16px; color: #CFC8BE; text-shadow: 0 1px 14px rgba(15,23,38,.8); }
.hero-pagina .hero-title { font-size: clamp(32px, 4.8vw, 64px); opacity: .92; margin-bottom: 16px; }
.hero-pagina .hero-title b { color: var(--oro-1); font-weight: inherit; }
.hero-pagina .hero-lede { font-size: 17px; max-width: 580px; color: #FFFFFF; text-shadow: 0 1px 16px rgba(15,23,38,.8); }
.hero-m::before  { background-image: url('../images/hero/pag-metodo.jpg?v=c86557f1'); }
.hero-c::before  { background-image: url('../images/hero/pag-campos.jpg?v=013782ec'); }
.hero-r::before  { background-image: url('../images/hero/pag-ranking.jpg?v=b06dd683'); }
.hero-f::before  { background-image: url('../images/hero/pag-fuentes.jpg?v=41c4923c'); }
.hero-k::before  { background-image: url('../images/hero/pag-contacto.jpg?v=df7ddd48'); }
.hero-pagina::before { background-position: 50% 50%; }
@media (max-width: 640px) {
  .hero-pagina { min-height: 240px; padding: 32px var(--px) 32px; }
  .hero-pagina .hero-lede { font-size: 15px; }
  .hero-pagina .hero-kicker { margin-bottom: 12px; }
}

/* ── El menu vuela sobre el hero ────────────────────────────────
   En sticky ocupaba su franja en el flujo: la pagina abria con una banda
   negra de 64 px y la imagen empezaba debajo, y solo al hacer scroll se
   montaba encima. Fijandolo, el hero arranca en el borde superior y el
   menu se apoya sobre la imagen desde el primer fotograma.
   El hero de portada compensa con el aire que tenia (el credito sigue a
   la misma altura de siempre) y las bandas interiores crecen lo que mide
   el menu: no se les come imagen, se les da marco. */
:root { --nav-h: 64px; }
.topnav { position: fixed; top: 0; left: 0; right: 0; }
/* Y como ahora flota, los saltos a un ancla dejan su hueco debajo. */
html { scroll-padding-top: calc(var(--nav-h) + 18px); }
/* Media altura de menú en vez de una entera: el lede ha crecido y el aire de
   cabecera es lo que menos se echa de menos. Aún quedan 40 px libres bajo la
   barra, que es más de lo que separa al titular del crédito. */
.hero .hero-top { padding-top: calc(var(--nav-h) / 2); }
/* El lede de portada creció a tres líneas y la franja de datos se quedaba a
   cuatro píxeles del borde inferior: el pie del hero cede lo justo para que
   los cuatro indicadores sigan entrando en la primera pantalla. */
.hero:not(.hero-pagina) { padding-bottom: 52px; }
.hero-lede-tit {
  display: block; margin-bottom: 10px; font-weight: 600; font-style: normal;
  letter-spacing: .01em; color: #FFFFFF;
}
.hero:not(.hero-pagina) .hero-lede { font-size: 18px; line-height: 1.5; max-width: 720px; }
.hero-pagina { min-height: calc(clamp(280px, 40vh, 420px) + var(--nav-h)); }
@media (max-width: 640px) { .hero-pagina { min-height: calc(240px + var(--nav-h)); } }

/* La direccion de cada fuente, ya sin enlace: texto de apoyo, no accion. */
.fuente-url { font-style: italic; font-size: .84em; color: var(--text-mute); word-break: break-word; }
/* Al ganar cada fuente una linea de direccion, las tres columnas se
   reequilibran y un rotulo se quedaba solo al pie. */
.sources-grid strong { break-after: avoid-column; }

/* ── El veredicto y la lista son el mismo relato ───────────────────────
   Entre dos secciones normales hay 240 px y un filete, que es lo que separa
   un capítulo del siguiente. Aquí la lista no abre nada: continúa la pieza
   de la ganadora y empieza en el puesto que ella deja libre. Se le quita el
   filete y la calle baja a un tercio, para que se lea como "y detrás" y no
   como un bloque aparte. */
#veredicto { padding-bottom: 0; border-bottom: 0; }
/* Sin cabecera intermedia (prueba 24/09): la 02 sigue a la 01 con la misma
   calle que separa dos fichas de la lista. La numeración lleva la continuidad. */
#fichas { padding-top: 12px; }
@media (max-width: 900px) { #veredicto { padding-bottom: 0; } #fichas { padding-top: 12px; } }

/* ── Página legal ──────────────────────────────────────────────
   Columna estrecha y jerarquía simple: aquí se viene a leer, no a mirar. */
.legal { max-width: 820px; }
.legal h3 {
  margin: 42px 0 12px; font-family: var(--f-display); font-weight: 700; text-transform: uppercase;
  font-size: 20px; line-height: 1.1; letter-spacing: -.005em; color: var(--text);
}
.legal p { margin: 0 0 14px; font-size: 15.5px; line-height: 1.65; color: var(--text-mid); }
.legal p strong { color: var(--text); font-weight: 700; }
.legal a { color: var(--text); border-bottom: 1px solid var(--oro-3); text-decoration: none; }
.legal a:hover { color: var(--oro-3); }
.legal .puntos { margin: 0 0 14px; }
.legal .puntos li em { color: var(--text-mute); }
.legal-datos { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 8px 18px; margin: 0 0 14px; }
.legal-datos > div { display: contents; }
.legal-datos dt {
  font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--text-mute); padding-top: 3px;
}
.legal-datos dd { margin: 0; font-size: 15px; line-height: 1.5; color: var(--text); }
.legal-fecha {
  margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--line-strong);
  font-size: 12.5px; font-style: italic; color: var(--text-mute);
}
@media (max-width: 640px) { .legal-datos { grid-template-columns: 1fr; gap: 2px 0; }
  .legal-datos dd { margin-bottom: 10px; } }

/* El nombre de la marca lleva su caja: la versalita del kicker la borraba. */

/* ── Pie de navegación en dos direcciones ────────────────────
   Volver a la izquierda y seguir a la derecha, como se leen. Los dos con la
   misma caja: se repiten al pie de todas las páginas, y un par que aparece
   tanto se reconoce antes si es siempre la misma pieza. Lo único que cambia
   es hacia dónde apunta la flecha. */
.siguiente.doble { justify-content: space-between; align-items: center; gap: 20px; }
@media (max-width: 640px) {
  .siguiente.doble { flex-direction: column-reverse; align-items: stretch; gap: 12px; }
}

/* ── Matriz criterio a criterio ──────────────────────────────────
   Cada fila gana el código a la izquierda y una línea de explicación bajo la
   escala: qué mide y de dónde sale el dato. Los bloques abren con una entrada
   y cierran con la salvedad que toca. */
.method-row { grid-template-columns: 32px minmax(0, 1fr) auto; align-items: start; }
.mr-cod {
  font: 700 11px/1.5 var(--f-sans); letter-spacing: .12em; color: var(--text-mute); padding-top: 2px;
}
.mr-copy {
  margin: 7px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--text-mid); max-width: 46ch;
}
.mr-copy b { color: var(--text); font-weight: 700; }
.method-intro {
  margin: 0 0 6px; font-size: 14px; line-height: 1.6; color: var(--text-mid);
}
.method-nota {
  margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--line-strong);
  font-size: 12.5px; line-height: 1.55; font-style: italic; color: var(--text-mute);
}
.method-nota::before { content: '*'; margin-right: .45em; font-style: normal; }
.method-nota a { color: var(--text); border-bottom: 1px solid var(--oro-3); text-decoration: none; }
.method-nota em { font-style: normal; font-weight: 700; color: var(--text); }
/* En pantalla estrecha el código deja de ser columna y pasa a linea propia:
   robaba treinta píxeles al texto y partía los rótulos en tres renglones. */
@media (max-width: 640px) {
  .method-row { grid-template-columns: minmax(0, 1fr) auto; }
  .mr-cod { grid-column: 1 / -1; padding: 0 0 5px; }
  .mr-copy { max-width: none; }
}

/* ── Estado de la edición ─────────────────────────
   Cierra el capítulo diciendo de dónde sale el censo, qué se ha quedado
   fuera y cuándo se vuelve a mirar. Todo en un panel único de tres columnas:
   arriba el embudo en cifras grandes, debajo lo que entró y lo que espera.
   El filete que separa las dos listas cae sobre el mismo eje que el de las
   cifras, así que las dos filas se leen como una sola retícula aunque las
   celdas de abajo no midan lo mismo. */
.ed-panel {
  border: 1px solid var(--line-strong); background: var(--bg-2); margin-top: 38px;
}
.ed-embudo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 0; }
.ed-paso { padding: 26px 28px 24px; }
.ed-paso + .ed-paso { border-left: 1px solid var(--line-strong); }
.ed-paso dt {
  font-size: 10px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  color: var(--text-mute); margin-bottom: 10px;
}
.ed-paso dd { margin: 0; font: 700 clamp(34px, 4.2vw, 52px)/1 var(--f-display); color: var(--text); }
.ed-paso dd small {
  display: block; margin-top: 8px; font: 400 12.5px/1.45 var(--f-sans); color: var(--text-mid);
}
.ed-paso:last-child dd { color: var(--oro-2); }

.ed-columnas {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  border-top: 1px solid var(--line-strong);
}
.ed-bloque { padding: 26px 28px 24px; }
.ed-bloque + .ed-bloque { border-left: 1px solid var(--line-strong); }
/* Las incorporadas ocupan dos tercios, y su lista se parte en dos dentro de
   la celda: así cada línea mide lo mismo que las de la columna vecina en vez
   de dejar medio panel en blanco. */
.ed-ancho { grid-column: span 2; }
.ed-ancho .ed-lista { display: grid; grid-template-columns: 1fr 1fr; column-gap: 34px; }
.ed-ancho .ed-lista li:nth-child(-n+2) { border-top: 0; padding-top: 0; }
.ed-bloque h3 {
  margin: 0 0 14px; font-size: 10px; font-weight: 700; letter-spacing: .22em;
  text-transform: uppercase; color: var(--text-mute);
}
.ed-lista { list-style: none; margin: 0; padding: 0; }
.ed-lista li { padding: 11px 0; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.5; }
.ed-lista li:first-child { border-top: 0; padding-top: 0; }
.ed-lista b { font-weight: 700; color: var(--text); }
.ed-lista span { color: var(--text-mute); }
.ed-lista em { display: block; margin-top: 3px; font-size: 12.5px; color: var(--text-mid); }
.ed-cierre {
  margin: 34px 0 0; padding-top: 18px; border-top: 1px solid var(--line-strong);
  font-size: 13px; line-height: 1.55; color: var(--text-mute);
}
.ed-cierre b { color: var(--text); font-weight: 700; }
@media (max-width: 900px) {
  .ed-embudo { grid-template-columns: 1fr; }
  .ed-paso + .ed-paso { border-left: 0; border-top: 1px solid var(--line-strong); }
  .ed-columnas { grid-template-columns: 1fr; }
  .ed-bloque + .ed-bloque { border-left: 0; border-top: 1px solid var(--line-strong); }
  .ed-ancho { grid-column: auto; }
  .ed-ancho .ed-lista { grid-template-columns: 1fr; column-gap: 0; }
  .ed-ancho .ed-lista li:nth-child(2) { border-top: 1px solid var(--line); padding-top: 11px; }
}


/* ── Formularios de contacto ─────────────────────────────────────
   Dos bloques en paralelo: comprador y promotora. Mismo tratamiento de caja
   que la ficha —filete fuerte sobre bg-2— para que los campos blancos se
   lean igual que las celdas de datos. */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 40px; }
.form-bloque {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; align-content: start;
  padding: 32px 30px 30px; border: 1px solid var(--line-strong); background: var(--bg-2);
}
.form-bloque > .gana-rot, .form-tit, .form-intro, .campo-ancho, .campo-check,
.form-nota, .form-enviar, .form-estado { grid-column: 1 / -1; }
.form-bloque > .gana-rot { margin-bottom: 0; }
.form-tit {
  margin: 0; font-family: var(--f-display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(22px, 2.2vw, 30px); line-height: 1.04; letter-spacing: -.005em; color: var(--text);
}
.form-intro { margin: 0 0 6px; font-size: 14px; line-height: 1.55; color: var(--text-mid); }

.campo { display: grid; gap: 6px; min-width: 0; }
.campo > span {
  font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--text-mute);
}
.campo > span i { font-style: normal; color: var(--oro-3); }
.campo input, .campo select, .campo textarea {
  width: 100%; padding: 11px 12px; border: 1px solid var(--line-strong); background: var(--bg-0);
  font: 400 14px/1.4 var(--f-sans); color: var(--text); border-radius: 0; -webkit-appearance: none; appearance: none;
  transition: border-color .2s var(--ease);
}
.campo textarea { resize: vertical; min-height: 92px; }
.campo select { background-image: none; cursor: pointer; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--oro-3); }
/* El navegador marca lo obligatorio solo cuando ya se ha intentado enviar. */
.form-bloque.tocado :invalid { border-color: #B23A2E; }

.campo-check { display: flex; gap: 10px; align-items: flex-start; margin-top: 4px; cursor: pointer; }
.campo-check input { flex: none; width: 16px; height: 16px; margin-top: 2px; accent-color: var(--oro-3); }
.campo-check span { font-size: 12.5px; line-height: 1.5; color: var(--text-mid); }
.campo-check span i { font-style: normal; color: var(--oro-3); }

.form-nota { margin: 0; font-size: 11.5px; line-height: 1.5; font-style: italic; color: var(--text-mute); }
.form-nota::before { content: '*'; margin-right: .45em; font-style: normal; }

.form-enviar {
  margin-top: 8px; display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 17px 22px; border: 1px solid var(--marengo); background: var(--marengo); color: #FFFFFF;
  font-family: var(--f-display); font-weight: 700; text-transform: uppercase; font-size: 19px;
  letter-spacing: -.005em; cursor: pointer; transition: background-color .3s var(--ease), color .3s var(--ease);
}
.form-enviar:hover { background: transparent; color: var(--text); }
.form-enviar span { color: var(--oro-1); font-size: 15px; }
.form-enviar[disabled] { opacity: .55; cursor: default; }
/* suscripcion.html: todos los estados vienen escritos y el JS elige uno. */
.sus-estados [data-estado][hidden] { display: none; }
.sus-estados .form-enviar { display: inline-flex; min-width: 300px; margin: 10px 0 0; }
.sus-estados .form-estado { margin-top: 14px; }
.sus-estados .sec-title:focus { outline: none; }
@media (max-width: 560px) { .sus-estados .form-enviar { display: flex; width: 100%; min-width: 0; } }

.form-estado { margin: 0; font-size: 13px; line-height: 1.5; min-height: 1px; }
.form-estado.ok { color: var(--verde-2); font-weight: 600; }
.form-estado.mal { color: #B23A2E; font-weight: 600; }
/* Campo trampa contra robots: una persona no lo ve ni llega a el con el tabulador,
   asi que si viene relleno lo ha rellenado un programa. No va con display:none
   porque algunos robots se saltan justo esos campos. */
.campo-trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 900px) {
  .form-grid { grid-template-columns: 1fr; gap: 18px; }
  .form-bloque { grid-template-columns: 1fr; padding: 24px 22px 22px; }
}

/* ── La ganadora, con pieza propia ─────────────────────────────
   El primer puesto abre el capítulo con su propio escenario y la lista
   arranca en el segundo. La monta el motor desde PROMOS.
   ──────────────────────────────────────────────────────── */
.gana {
  margin-top: 44px; padding: 32px 40px 36px;
  border: 1px solid var(--line-strong); background: var(--bg-2);
}

/* Rótulo de bloque: mismo papel que el sec-eyebrow de sección, pero un
   escalón por debajo, porque aquí ya estamos dentro de una pieza. */
.gana-rot {
  display: block; font-size: 10px; font-weight: 700; letter-spacing: .28em;
  text-transform: uppercase; color: var(--text-mute); margin-bottom: 16px;
}

/* ── El editorial de cabecera ────────────────────────────────
   Dos alturas de voz en la misma fila: la afirmación en display y su
   respaldo en cuerpo. La columna del titular va más estrecha a propósito
   —la frase es corta y quiere partirse en dos líneas— y así las dos
   columnas acaban pesando parecido aunque una tenga cinco veces menos
   texto. El filete superior las cose al lede. */
.ver-intro {
  display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 700px);
  gap: 20px 52px; align-items: start;
}
.ver-intro-sola { grid-template-columns: 1fr; }
.ver-titular {
  margin: 0; font-family: var(--f-display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(30px, 3.4vw, 46px); line-height: 1.14; letter-spacing: -.008em; color: var(--text);
  /* El titular sale de los datos, así que no puedo elegir dónde parte:
     que el navegador reparta las líneas y no deje una palabra suelta. */
  text-wrap: balance;
}
.ver-cuerpo { margin: 0; font-size: 17px; line-height: 1.62; color: var(--text-mid); }
.ver-cuerpo strong { color: var(--text); font-weight: 700; }
.ver-cuerpo .star { color: var(--amarillo); }

/* ── La banda ──────────────────────────────────────────────────────────
   Dentro de la caja de la sección, no a sangre. El hero de la página sí
   llega a los bordes, y si esta banda hiciera lo mismo competirían al
   mismo nivel: los márgenes son lo que la deja un escalón por debajo del
   titular del capítulo. */
.gana-banda {
  position: relative; overflow: hidden;
  min-height: clamp(380px, 50vh, 520px);
  margin: -32px -40px 0;
  display: flex; flex-direction: column; justify-content: space-between; gap: 28px;
  padding: 32px 40px 30px;
  background: #0F1726; color: #FFFFFF;
}
.gana-banda img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.2s var(--ease);
}
.gana:hover .gana-banda img { transform: scale(1.02); }
.gana-banda::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  /* Más cuerpo en la mitad baja: el render tiene cielo y piscina claros
     justo donde caen el rótulo y la cifra. */
  background: linear-gradient(180deg, rgba(15,23,38,.78) 0%, rgba(15,23,38,.50) 34%, rgba(15,23,38,.68) 66%, rgba(15,23,38,.95) 100%);
}

/* ── El editorial, dentro de la banda ────────────────────────────
   Columna a la derecha, en blanco sobre el velo. El rótulo de edición sube
   con él; abajo quedan el nombre y el marcador. */
.gana-editorial {
  position: relative; z-index: 1; max-width: 520px; color: #FFFFFF;
}
.gana-editorial .gana-lbl { margin-bottom: 10px; }
.gana-editorial .ver-titular {
  color: #FFFFFF; font-size: clamp(24px, 2.4vw, 34px); line-height: 1.06; margin: 0 0 12px;
  text-shadow: 0 2px 24px rgba(15,23,38,.7);
}
.gana-editorial .ver-cuerpo {
  color: rgba(255,255,255,.88); font-size: 15px; line-height: 1.55;
  text-shadow: 0 1px 14px rgba(15,23,38,.85);
}
.gana-editorial .ver-cuerpo strong { color: #FFFFFF; }
.gana-cuerpo {
  position: relative; z-index: 1; width: 100%;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 40px; align-items: end;
}
.gana-lbl {
  display: block; font-size: 10px; font-weight: 700; letter-spacing: .34em;
  text-transform: uppercase; color: var(--oro-1); margin-bottom: 18px;
  text-shadow: 0 1px 14px rgba(15,23,38,.9);
}
.gana-nombre {
  margin: 0; font-family: var(--f-display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(42px, 6.2vw, 96px); line-height: .94; letter-spacing: -.01em;
  text-shadow: 0 2px 30px rgba(15,23,38,.55);
}
.gana-nombre .gana-puesto { color: var(--oro-1); }
.gana-loc {
  display: block; margin-top: 14px; font-size: 14px; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(255,255,255,.86);
  text-shadow: 0 1px 14px rgba(15,23,38,.9);
}
/* La cifra: es el veredicto, así que va al tamaño del nombre. */
.gana-marcador {
  font-family: var(--f-display); font-weight: 700; line-height: .84;
  font-size: clamp(64px, 8.4vw, 132px); text-align: right; white-space: nowrap;
  text-shadow: 0 2px 30px rgba(15,23,38,.6);
}
.gana-marcador small {
  font-size: .3em; font-weight: 300; letter-spacing: -.01em;
  color: rgba(255,255,255,.72); margin-left: 2px;
}

/* ── La presentación y la primera gráfica ─────────────────────────────
   El texto manda en la columna ancha; la descomposición de la nota va al
   lado porque es justo lo que el texto está contando. */
/* Sin el párrafo de «por qué puntúa así» (24/09): la descomposición de la
   nota ocupa el ancho entero, con las dos barras en paralelo. */
.gana-intro { display: block; margin-top: 28px; }
.gana-razon { font-size: 16.5px; line-height: 1.6; color: var(--text-mid); margin: 0; }
.gana-razon strong { color: var(--text); font-weight: 700; }
.gana-razon .star { color: var(--amarillo); }

/* ── Gráficas ──────────────────────────────────────────────────────────
   Barras planas, sin ejes ni rejilla: el dato va escrito al lado, y la
   barra solo sirve para comparar de un vistazo. */
.gfx { margin: 0; }
.gfx-pie {
  margin: 10px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--text-mute); font-style: italic;
}
.gfx-pie::before { content: '*'; margin-right: .45em; font-style: normal; }

.gfx-mitades { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 48px; }
.gfx-fila { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; align-items: baseline; }
.gfx-lbl { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--text); }
.gfx-cifra { font: 700 26px/1 var(--f-display); color: var(--text); }
.gfx-cifra small { font: 300 .62em/1 var(--f-display); color: var(--text-mute); margin-left: 1px; }
.gfx-track { grid-column: 1 / -1; height: 6px; background: var(--line-strong); }
.gfx-fill { display: block; height: 100%; }
.gfx-golf { background: var(--verde-2); }
.gfx-proy { background: var(--oro-2); }

/* ── La ficha en corto ─────────────────────────────────────────────────
   Reutiliza la rejilla de datos de la ficha del proyecto —etiqueta encima,
   dato debajo, inversión al pasar por encima— en lugar de la línea de
   datos seguidos que había antes, que no decía qué era cada cosa. */
.gana-proyecto { margin-top: 32px; }
.gana-proyecto .project-data dd .star { color: var(--amarillo); font-size: 16px; }
.gana-proyecto .project-data dd .star-off .star { color: transparent; -webkit-text-stroke: 1px var(--amarillo); }

/* ── La llamada ────────────────────────────────────────────────────────
   Una sola, ancha y sin competencia: desde aquí solo se puede hacer una
   cosa, que es abrir la ficha. Bajar al 02 ya lo hace el scroll. */
.gana-acciones { margin-top: 28px; }
.gana-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  width: 100%; padding: 20px 30px; text-decoration: none;
  background: var(--marengo); color: #FFFFFF; border: 1px solid var(--marengo);
  transition: background-color .3s var(--ease), color .3s var(--ease);
}
.gana-cta:hover { background: transparent; color: var(--text); }
.gana-cta b {
  font-family: var(--f-display); font-weight: 700; text-transform: uppercase;
  font-size: 26px; line-height: 1; letter-spacing: -.005em;
}
.gana-cta span {
  font-size: 11px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase;
  color: var(--oro-1); white-space: nowrap;
}

/* ── La lista arranca en el 02 ─────────────────────────────────────────
   La tarjeta del 01 no se borra: se esconde solo mientras está cerrada,
   porque abierta sigue siendo la capa a pantalla completa de siempre y la
   llamada de arriba la necesita entera en el DOM. */
.detail-grid details.promo.gana-fuera:not([open]) { display: none; }

@media (max-width: 900px) {
  .gana { padding: 24px; }
  .gana-banda { min-height: 0; margin: -24px -24px 0; padding: 26px 22px 24px; gap: 22px; }
  .gana-editorial { margin-left: 0; max-width: none; }
  .gana-editorial .ver-cuerpo { font-size: 14.5px; }
  /* El rótulo ocupa más alto al partirse el nombre, así que el velo tiene
     que empezar a cerrar antes. */
  .gana-banda::after {
    background: linear-gradient(180deg, rgba(15,23,38,.30) 0%, rgba(15,23,38,.16) 18%, rgba(15,23,38,.74) 56%, rgba(15,23,38,.95) 100%);
  }
  .gana-cuerpo { grid-template-columns: 1fr; gap: 18px; }
  .gana-marcador { text-align: left; font-size: clamp(56px, 18vw, 96px); }
  .ver-intro { grid-template-columns: 1fr; gap: 14px; }
  .ver-cuerpo { font-size: 15.5px; }
  .gana-intro { margin-top: 26px; }
  .gfx-mitades { grid-template-columns: 1fr; }
  .gana-proyecto { margin-top: 34px; }
  .gana-cta { flex-direction: column; align-items: flex-start; gap: 14px; padding: 22px 22px; }
  .gana-cta b { font-size: 21px; }
  .gana-cta span { white-space: normal; }
}

/* ═══════════════════════════════════════════════
   VUELTA AL INICIO
   Boton flotante en la esquina inferior derecha. Comparte caja y color con la
   pestana de suscripcion —misma familia de elementos flotantes— y se quita de
   en medio mientras el modal esta abierto.
═══════════════════════════════════════════════ */
.ir-arriba {
  position: fixed; right: 26px; bottom: 26px; z-index: 55;
  width: 46px; height: 46px;
  background: var(--marengo); border: 1px solid var(--marengo);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .3s var(--ease), transform .3s var(--ease),
              visibility .3s var(--ease), background-color .3s var(--ease);
}
.ir-arriba.ver { opacity: 1; visibility: visible; transform: none; }
.ir-arriba:hover { background: var(--oro-3); border-color: var(--oro-3); }
.ir-arriba:focus-visible { outline: 3px solid var(--oro-1); outline-offset: 3px; }
/* La punta de flecha, dibujada con dos filetes: un glifo cambia de forma y de
   peso segun la fuente, y aqui tiene que casar con el aspa del modal. */
.ir-arriba::before {
  content: ''; position: absolute; left: 50%; top: 54%;
  width: 11px; height: 11px;
  border-left: 2px solid #FFFFFF; border-top: 2px solid #FFFFFF;
  transform: translate(-50%, -50%) rotate(45deg);
}
/* Con el modal abierto no pinta nada: la pagina de debajo esta bloqueada. */
html.panel-abierto .ir-arriba { opacity: 0; visibility: hidden; }

@media (max-width: 880px) {
  /* La pestana de suscripcion baja al centro inferior; el boton se queda a la
     derecha y sube lo justo para no compartir linea con ella. */
  .ir-arriba { right: 16px; bottom: 60px; width: 42px; height: 42px; }
}
@media (prefers-reduced-motion: reduce) {
  .ir-arriba { transition: none; }
}

/* ═══════════════════════════════════════════════
   PANEL DE SUSCRIPCION
   Pestana fija en el borde derecho que abre un modal flotante centrado, a dos
   columnas: imagen y formulario. Es un modal de verdad, asi que atenua la
   pagina, bloquea el scroll y atrapa el foco.
   Reutiliza el sistema de formulario ya existente (.campo, .campo-check,
   .form-enviar, .form-estado) para que no parezca una pieza de otra web.
═══════════════════════════════════════════════ */

/* Bloquear el scroll quita la barra y la pagina se desplaza de lado. El ancho
   se mide en JS antes de bloquear y vuelve como relleno: es el mismo remedio
   que ya usan las fichas, porque scrollbar-gutter no sirve con overflow hidden. */
html.panel-abierto { overflow: hidden; padding-right: var(--barra-pnl, 0px); }

.pnl { position: fixed; top: 0; left: 0; width: 0; height: 0; z-index: 80; }

/* La pestana: texto vertical pegado al borde, a la altura de la mirada.
   writing-mode y no rotate: con la rotacion, el translate opera sobre el ancho
   sin girar y la pestana se sale del viewport por la derecha. Asi el navegador
   calcula la caja ya vertical y no hay medida magica que mantener cuando el
   rotulo cambie de idioma. */
.pnl-pestana {
  position: fixed; right: 0; top: 50%; transform: translateY(-50%);
  writing-mode: vertical-rl; white-space: nowrap;
  padding: 20px 11px 20px 12px;
  background: var(--marengo); color: #FFFFFF;
  font-family: var(--f-display); font-weight: 700; text-transform: uppercase;
  font-size: 14px; letter-spacing: .12em;
  border: 1px solid var(--marengo); border-right: none;
  transition: background-color .3s var(--ease), color .3s var(--ease);
}
.pnl-pestana:hover { background: var(--oro-3); border-color: var(--oro-3); }
.pnl-pestana:focus-visible { outline: 3px solid var(--oro-1); outline-offset: 3px; }
.pnl.abierto .pnl-pestana { opacity: 0; pointer-events: none; }

.pnl-fondo {
  position: fixed; inset: 0; z-index: 1;
  background: rgba(10,10,10,.62);
  animation: pnl-fundido .3s var(--ease) both;
}
.pnl-fondo[hidden] { display: none; }
@keyframes pnl-fundido { from { opacity: 0; } to { opacity: 1; } }

.pnl-caja {
  position: fixed; z-index: 2;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(1040px, calc(100vw - 48px));
  /* Altura flexible: el paso 1 es corto y el 2 con la rama de compra es alto.
     Con una altura fija, el segundo sacaba barra de scroll en una pantalla que
     tenia sitio de sobra. El minimo evita que el paso 1 quede achatado. */
  height: auto;
  min-height: min(560px, calc(100vh - 48px));
  max-height: calc(100vh - 48px);
  display: grid; grid-template-columns: 1fr 1.12fr;
  background: var(--bg-0);
  box-shadow: 0 30px 90px rgba(10,10,10,.30);
  overflow: hidden;
  animation: pnl-entra .36s var(--ease) both;
}
/* El atributo hidden lo pone la UA como display:none, y cualquier display del
   autor lo gana. Sin esta linea el modal nace abierto. */
.pnl-caja[hidden] { display: none; }
@keyframes pnl-entra {
  from { opacity: 0; transform: translate(-50%, -47%) scale(.985); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* El filete separa las dos mitades: el mock de la guia va sobre fondo claro y
   sin el se funde con la columna blanca del formulario. */
.pnl-imagen { margin: 0; overflow: hidden; background: var(--marengo); border-right: 1px solid var(--line-strong); }
.pnl-imagen img { width: 100%; height: 100%; object-fit: cover; display: block; }

.pnl-cara {
  position: relative; padding: 44px 50px 38px; overflow-y: auto;
  display: flex; flex-direction: column; justify-content: center;
}

/* Aspa de cierre dibujada con dos filetes: un glifo tipografico no casa de
   tamano con el resto de la interfaz y cambia de forma segun la fuente. */
.pnl-cerrar {
  position: absolute; top: 14px; right: 16px; width: 34px; height: 34px; z-index: 3;
}
.pnl-cerrar::before, .pnl-cerrar::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 15px; height: 1.5px;
  background: var(--text-mid); transition: background-color .25s var(--ease);
}
.pnl-cerrar::before { transform: translate(-50%,-50%) rotate(45deg); }
.pnl-cerrar::after  { transform: translate(-50%,-50%) rotate(-45deg); }
.pnl-cerrar:hover::before, .pnl-cerrar:hover::after { background: var(--oro-3); }

.pnl-aviso {
  margin: 0 0 20px; padding: 11px 14px;
  background: var(--oro-soft); border: 1px solid var(--oro-line);
  font-size: 12px; line-height: 1.5; color: var(--oro-3); text-align: center;
}
.pnl-paso { display: flex; flex-direction: column; gap: 14px; }
.pnl-paso[hidden] { display: none; }
/* La cabecera va centrada y los campos alineados a la izquierda: centrar una
   etiqueta sobre su campo obliga a buscar donde empieza cada linea. */
.pnl-paso .gana-rot, .pnl-paso .form-tit, .pnl-paso .form-intro { text-align: center; }
.pnl-paso .gana-rot { margin-bottom: 0; }
.pnl-paso .form-tit { font-size: clamp(27px, 2.5vw, 36px); }
.pnl-paso .form-intro { margin: 0 auto; max-width: 42ch; }
.pnl-paso .form-enviar { margin-top: 6px; }
.pnl-paso.tocado :invalid { border-color: #B23A2E; }

.pnl-legal { margin: 0; font-size: 11.5px; line-height: 1.55; color: var(--text-mute); text-align: center; }
.pnl-legal a { color: var(--oro-3); text-decoration: underline; text-underline-offset: 2px; }

.pnl-grupo { border: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.pnl-grupo legend {
  padding: 0; margin-bottom: 4px;
  font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--text-mute);
}
.pnl-op { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.pnl-op input { flex: none; width: 16px; height: 16px; margin-top: 2px; accent-color: var(--oro-3); }
.pnl-op span { font-size: 13.5px; line-height: 1.45; color: var(--text-mid); }
.pnl-op:hover span { color: var(--text); }

.pnl-rama { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; padding: 18px; background: var(--bg-2); border: 1px solid var(--line); }
.pnl-rama[hidden] { display: none; }
.pnl-rama .campo-check { grid-column: 1 / -1; }

.pnl-saltar {
  align-self: center; padding: 4px 2px; font-size: 12.5px; color: var(--text-mute);
  text-decoration: underline; text-underline-offset: 3px;
  transition: color .25s var(--ease);
}
.pnl-saltar:hover { color: var(--text); }

@media (max-width: 880px) {
  /* La imagen pasa a ser una banda superior: en vertical, una columna de foto
     se come el ancho que necesita el formulario. */
  .pnl-caja {
    grid-template-columns: 1fr; grid-template-rows: 124px 1fr;
    width: calc(100vw - 24px); height: auto;
    /* Sin minimo: en vertical el modal debe medir lo que mida su contenido, o
       el paso 1 arrastra un hueco muerto debajo. */
    min-height: 0; max-height: calc(100vh - 24px);
  }
  /* La banda es una franja muy apaisada de una foto 4:3: centrada cae en la
     mitad del libro y no se reconoce. Subiendo el encuadre entra el titulo. */
  .pnl-imagen { border-right: none; border-bottom: 1px solid var(--line-strong); }
  .pnl-imagen img { object-position: 50% 30%; }
  .pnl-cara { padding: 30px 26px 26px; }
  /* Con el aviso de vista previa el aspa le caia encima: aqui el padding es la
     mitad que en escritorio y ya no le queda sitio propio. */
  .pnl.vista-previa .pnl-cara { padding-top: 52px; }
  .pnl-rama { grid-template-columns: 1fr; }
  .pnl-pestana {
    top: auto; bottom: 0; right: 50%;
    transform: translateX(50%);
    writing-mode: horizontal-tb; padding: 12px 22px 13px;
    border: 1px solid var(--marengo); border-bottom: none;
  }
}
@media (max-width: 560px) {
  .pnl-caja { grid-template-rows: 96px 1fr; width: calc(100vw - 16px); }
  .pnl-cara { padding: 26px 20px 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .pnl-caja, .pnl-fondo { animation: none; }
}