/* Surf Tenerife
   Concepto: tabla de mareas y pizarrón de campeonato sobre la isla volcánica.
   Lo memorable son las alturas de ola en Barlow Condensed grande; todo lo demás, sobrio. */

:root {
  --atlantico: #0e2a47;
  --atlantico-2: #17406a;
  --espuma: #f3f7f9;
  --basalto: #2b3138;
  --gris: #66727f;
  --linea: #dfe6ec;
  --agua: #1c8c9e;
  --agua-claro: #e3f3f5;
  --teide: #e9b949;
  --blanco: #ffffff;

  --display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --text: 'Barlow', system-ui, sans-serif;

  --top: 64px;
  --r-lg: 22px;
  --r-md: 14px;
  --r-sm: 10px;
  --float: 0 24px 60px -20px rgba(14, 42, 71, .45), 0 2px 6px rgba(14, 42, 71, .08);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--text);
  font-size: 16px;
  line-height: 1.5;
  color: var(--basalto);
  background: var(--espuma);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--agua); outline-offset: 2px; border-radius: 6px; }
.ico { width: 20px; height: 20px; flex-shrink: 0; }
.muted { color: var(--gris); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ── Cabecera ─────────────────────────────────────────────────────────────── */
.topbar {
  position: sticky; top: 0; z-index: 1000;
  height: var(--top);
  display: flex; align-items: center; gap: 32px;
  padding: 0 28px;
  background: var(--blanco);
  border-bottom: 1px solid var(--linea);
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark { width: 36px; height: 36px; border-radius: 11px; background: var(--atlantico); display: grid; place-items: center; }
.brand-mark svg { width: 28px; height: 28px; }
.brand-name { font-family: var(--display); font-weight: 700; font-size: 1.45rem; letter-spacing: .01em; color: var(--atlantico); }
.nav { display: flex; gap: 4px; flex: 1; }
.nav a { padding: 8px 14px; border-radius: 999px; font-weight: 500; color: var(--gris); transition: color .15s, background .15s; }
.nav a:hover { color: var(--atlantico); }
.nav a.active { color: var(--atlantico); background: var(--agua-claro); }
.topbar-actions { display: flex; align-items: center; gap: 8px; }
.lang { display: flex; padding: 3px; border-radius: 999px; background: var(--espuma); border: 1px solid var(--linea); }
.lang button { padding: 4px 11px; border-radius: 999px; font-size: .82rem; font-weight: 600; color: var(--gris); }
.lang button.active { background: var(--atlantico); color: var(--blanco); }
.icon-btn { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 999px; color: var(--atlantico); }
.icon-btn .ico { width: 22px; height: 22px; }
.menu-btn { display: none; }

/* ── Botones y píldoras ───────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 20px; border-radius: 999px;
  font-weight: 600; font-size: .95rem;
  background: var(--atlantico); color: var(--blanco);
  transition: background .15s;
}
.btn:hover { background: var(--atlantico-2); }
.btn-ghost { background: transparent; color: var(--atlantico); box-shadow: inset 0 0 0 1.5px var(--linea); }
.btn-ghost:hover { background: var(--blanco); }
.btn-quiet { padding: 7px 14px; font-size: .88rem; background: var(--espuma); color: var(--atlantico); box-shadow: inset 0 0 0 1px var(--linea); }
.btn-quiet:hover { background: var(--agua-claro); }
.pill {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 3px 10px; border-radius: 999px;
  font-size: .8rem; font-weight: 600; line-height: 1.4;
  color: color-mix(in srgb, var(--c) 72%, #0b1620);
  background: color-mix(in srgb, var(--c) 16%, white);
}
.pill::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.pill-lg { font-size: .95rem; padding: 5px 14px; }

.skeleton { background: linear-gradient(90deg, #e8eef3 0%, #f4f7f9 50%, #e8eef3 100%); background-size: 200% 100%; animation: shimmer 1.3s infinite linear; border-radius: var(--r-sm); }
@keyframes shimmer { to { background-position: -200% 0; } }

/* ── Portada ──────────────────────────────────────────────────────────────── */
.view-map { position: relative; height: calc(100vh - var(--top)); height: calc(100dvh - var(--top)); }
.map-wrap { position: absolute; inset: 0; }
#map { position: absolute; inset: 0; background: #07182b; }
.leaflet-container { font-family: var(--text); }
.leaflet-control-attribution { font-size: 10px; background: rgba(255, 255, 255, .7) !important; }
.leaflet-bar { border: 0 !important; box-shadow: var(--float) !important; border-radius: var(--r-sm) !important; overflow: hidden; }
.leaflet-bar a { width: 36px !important; height: 36px !important; line-height: 36px !important; color: var(--atlantico) !important; }

.panel {
  position: absolute; z-index: 500; top: 20px; left: 20px; bottom: 20px;
  width: 420px; display: flex; flex-direction: column;
  background: var(--blanco); border-radius: var(--r-lg); box-shadow: var(--float);
  overflow-y: auto; overscroll-behavior: contain;
  animation: panel-in .5s cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes panel-in { from { opacity: 0; transform: translateX(-16px); } }
.panel-handle { display: none; }
.hero { padding: 30px 30px 20px; }
.hero h1 {
  font-family: var(--display); font-weight: 700; font-size: 2.6rem; line-height: 1;
  letter-spacing: -.01em; color: var(--atlantico); margin-bottom: 12px;
}
.hero p { color: var(--gris); font-size: 1rem; max-width: 34ch; }

.best {
  display: flex; flex-direction: column; gap: 10px;
  margin: 0 20px; padding: 18px 20px; min-height: 132px; flex-shrink: 0;
  border-radius: var(--r-md);
  background: var(--atlantico); color: var(--blanco);
  position: relative; overflow: hidden;
}
.best::after {
  content: ''; position: absolute; right: -40px; bottom: -60px; width: 220px; height: 160px; pointer-events: none;
  background: repeating-radial-gradient(circle at 100% 100%, transparent 0 14px, rgba(255, 255, 255, .06) 14px 16px);
}
.best-label { font-weight: 600; font-size: .9rem; color: var(--teide); }
.best-row { display: flex; align-items: center; gap: 16px; }
.best-num { font-family: var(--display); font-weight: 700; font-size: 4rem; line-height: .85; letter-spacing: -.02em; }
.best-num small { font-size: 1.4rem; font-weight: 600; margin-left: 2px; color: #a9c1d6; }
.best-info { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.best-name { font-family: var(--display); font-size: 1.6rem; font-weight: 600; line-height: 1.1; }
.best-meta { font-size: .88rem; color: #a9c1d6; }
.best .pill { align-self: flex-start; }
.best-cta { font-weight: 600; font-size: .92rem; color: var(--blanco); text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .35); text-underline-offset: 4px; }
.best:hover .best-cta { text-decoration-color: var(--teide); }

.list-title { font-family: var(--display); font-weight: 600; font-size: 1.3rem; color: var(--atlantico); padding: 26px 30px 6px; }
.coast-title { font-size: .82rem; font-weight: 600; color: var(--gris); padding: 12px 18px 4px; }
.spot-list { display: flex; flex-direction: column; padding: 0 12px; }
.spot-row {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 14px; border-radius: var(--r-md);
  transition: background .15s;
}
.spot-row:hover { background: var(--espuma); }
.sr-badge {
  width: 58px; height: 52px; flex-shrink: 0; display: flex; align-items: baseline; justify-content: center; padding-top: 14px;
  border-radius: 12px; background: color-mix(in srgb, var(--c) 14%, white);
  font-family: var(--display); font-weight: 700; font-size: 1.6rem; line-height: 1;
  color: color-mix(in srgb, var(--c) 70%, #0b1620);
}
.sr-badge small { font-size: .9rem; margin-left: 1px; }
.sr-main { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.sr-main b { font-weight: 600; font-size: 1.05rem; color: var(--atlantico); }
.sr-main small { font-size: .86rem; color: var(--gris); }
.sr-chev { color: #b8c4ce; width: 18px; height: 18px; }
.panel-foot { margin-top: auto; padding: 18px 30px 22px; font-size: .82rem; color: var(--gris); }

.map-legend {
  position: absolute; z-index: 500; right: 20px; top: 20px;
  display: flex; gap: 12px; padding: 8px 14px; border-radius: 999px;
  background: rgba(14, 42, 71, .82); backdrop-filter: blur(8px); color: #dbe7f0; font-size: .8rem;
}
.map-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }

/* Marcadores */
.spot-marker { background: none; border: 0; }
.sm {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 4px 12px 4px 4px; border-radius: 999px;
  background: var(--blanco); box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
  cursor: pointer; transition: transform .15s;
}
.sm-val {
  min-width: 40px; height: 32px; padding: 0 8px; display: grid; grid-auto-flow: column; align-items: baseline; justify-content: center; align-content: center;
  border-radius: 999px; background: var(--c); color: var(--blanco);
  font-family: var(--display); font-weight: 700; font-size: 1.15rem; line-height: 1;
}
.sm-val small { font-size: .75rem; margin-left: 1px; }
.sm-name { font-weight: 600; font-size: .9rem; color: var(--atlantico); }
.spot-marker:hover .sm, .spot-marker.hover .sm { transform: scale(1.08); }
.compact .sm { padding: 3px; }
.compact .sm-name { display: none; }
.compact .spot-marker:hover .sm, .compact .spot-marker.hover .sm { padding-right: 12px; }
.compact .spot-marker:hover .sm-name, .compact .spot-marker.hover .sm-name { display: inline; }
.compact .spot-marker:hover, .compact .spot-marker.hover { z-index: 1000 !important; }

/* ── Spot ─────────────────────────────────────────────────────────────────── */
.spot-hero { position: relative; z-index: 0; isolation: isolate; height: 300px; overflow: hidden; background: var(--atlantico); }
.spot-hero-map { position: absolute; inset: 0; }
.spot-hero-shade { position: absolute; inset: 0; z-index: 400; background: linear-gradient(90deg, rgba(14, 42, 71, .92) 0%, rgba(14, 42, 71, .55) 45%, rgba(14, 42, 71, .1) 100%); }
.spot-hero-content {
  position: relative; z-index: 401; height: 100%;
  max-width: 1240px; margin: 0 auto; padding: 22px 28px 46px;
  display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr; align-items: end; color: var(--blanco);
}
.chip-back {
  grid-column: 1 / -1; justify-self: start; align-self: start;
  display: inline-flex; align-items: center; gap: 4px; padding: 7px 14px 7px 9px; border-radius: 999px;
  background: rgba(255, 255, 255, .14); backdrop-filter: blur(8px); font-weight: 600; font-size: .9rem;
}
.chip-back:hover { background: rgba(255, 255, 255, .24); }
.chip-back .ico { width: 18px; height: 18px; }
.spot-coast { color: #b9cee0; font-size: 1rem; }
.spot-hero-title h1 { font-family: var(--display); font-weight: 700; font-size: clamp(3rem, 7vw, 5.2rem); line-height: .9; letter-spacing: -.01em; }
.spot-hero-now { display: flex; align-items: flex-end; gap: 14px; }
.hero-num { font-family: var(--display); font-weight: 700; font-size: clamp(4.5rem, 11vw, 8rem); line-height: .78; letter-spacing: -.03em; }
.hero-num small { font-size: .32em; font-weight: 600; color: #b9cee0; margin-left: 4px; }
.hero-side { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding-bottom: 6px; font-size: .9rem; color: #b9cee0; }

.spot-body { max-width: 1240px; margin: 0 auto; padding: 0 28px 48px; }
.stats-bar {
  position: relative; z-index: 2; margin-top: -26px;
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: var(--blanco); border-radius: var(--r-md); box-shadow: var(--float);
}
.sk-bar { grid-column: 1 / -1; height: 92px; }
.stat { display: flex; gap: 12px; padding: 18px 20px; }
.stat + .stat { border-left: 1px solid var(--linea); }
.stat-ico { width: 22px; height: 22px; color: var(--agua); margin-top: 2px; }
.stat div { display: flex; flex-direction: column; min-width: 0; }
.stat-label { font-size: .85rem; color: var(--gris); }
.stat-value { font-family: var(--display); font-weight: 700; font-size: 1.9rem; line-height: 1.05; color: var(--atlantico); }
.stat-sub { font-size: .85rem; color: var(--gris); display: flex; align-items: center; gap: 4px; }
.arr { display: inline-block; font-weight: 700; line-height: 1; color: var(--agua); }

.day-tabs { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin: 28px 0 18px; }
.day-tab {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 12px 14px 0; border-radius: var(--r-md); text-align: left; overflow: hidden;
  background: transparent; box-shadow: inset 0 0 0 1px var(--linea); transition: background .15s, box-shadow .15s;
}
.day-tab:hover { background: var(--blanco); }
.day-tab.active { background: var(--atlantico); color: var(--blanco); box-shadow: none; }
.dt-day { font-weight: 600; font-size: .95rem; }
.dt-day small { font-weight: 400; color: var(--gris); }
.day-tab.active .dt-day small { color: #a9c1d6; }
.dt-max { font-family: var(--display); font-weight: 700; font-size: 1.8rem; line-height: 1.1; }
.dt-max small { font-size: .9rem; margin-left: 1px; }
.dt-bar { align-self: stretch; height: 5px; margin: 8px -14px 0; background: var(--c); }

.day-panel { background: var(--blanco); border-radius: var(--r-lg); padding: 28px; min-height: 300px; }
.sk-panel { height: 300px; }
.day-top { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 32px; }
.day-chart-wrap h2 { font-family: var(--display); font-weight: 700; font-size: 2rem; line-height: 1; color: var(--atlantico); }
.day-chart-wrap .muted { font-size: .92rem; margin: 6px 0 14px; }
.day-chart { position: relative; height: 260px; }
.day-facts { display: flex; flex-direction: column; gap: 4px; }
.fact { padding: 16px 0; border-bottom: 1px solid var(--linea); display: flex; flex-direction: column; gap: 4px; }
.fact:last-child { border-bottom: 0; }
.fact-label { display: flex; align-items: center; gap: 6px; font-size: .88rem; color: var(--gris); }
.fact-ico { width: 16px; height: 16px; }
.fact-value { font-family: var(--display); font-weight: 700; font-size: 2.6rem; line-height: 1; color: var(--atlantico); }
.fact-value-sm { font-size: 1.6rem; }
.fact-sub { font-size: .92rem; color: var(--basalto); display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fact-best { border-left: 4px solid var(--c); padding-left: 14px; border-bottom-color: transparent; background: color-mix(in srgb, var(--c) 7%, white); border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.tides { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 14px; font-size: .92rem; }
.tides b { font-weight: 600; color: var(--atlantico); }
.tides span { color: var(--gris); }

.hourly { margin-top: 28px; border-top: 1px solid var(--linea); padding-top: 22px; }
.hourly-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.hourly-head h3 { font-family: var(--display); font-weight: 600; font-size: 1.4rem; color: var(--atlantico); }
.hourly-scroll { overflow-x: auto; scrollbar-width: thin; }
.h-grid { display: flex; min-width: max-content; }
.h-labels, .h-col { display: grid; grid-auto-rows: 38px; align-items: center; }
.h-labels { position: sticky; left: 0; z-index: 1; background: var(--blanco); padding-right: 14px; font-size: .86rem; color: var(--gris); }
.h-labels small { color: #9aa6b2; }
.h-cols { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(38px, 1fr); flex: 1; }
.h-col { justify-items: center; text-align: center; border-radius: var(--r-sm); font-size: .92rem; }
.h-col.now { background: var(--agua-claro); }
.h-time { font-size: .82rem; color: var(--gris); font-weight: 500; }
.h-col.now .h-time { color: var(--agua); font-weight: 700; }
.h-rate { width: 70%; height: 8px; border-radius: 4px; }
.h-wave { display: flex; flex-direction: column; line-height: 1.05; }
.h-wave b { font-family: var(--display); font-weight: 700; font-size: 1.25rem; color: var(--atlantico); }
.h-wave small { font-size: .7rem; color: #9aa6b2; }
.h-per small, .h-gust small, .h-swell small { font-size: .7rem; color: var(--gris); margin-left: 1px; }
.h-wind { display: flex; align-items: center; gap: 3px; }
.h-wind b { font-weight: 600; }
.h-swell { display: flex; flex-direction: column; line-height: 1; gap: 2px; }
.h-kj { font-weight: 600; color: var(--agua); }
.wdot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; }
.wdot-offshore { background: #16a34a; }
.wdot-cross { background: #e0a100; }
.wdot-onshore { background: #e11d48; }
.h-tide-row { display: flex; align-items: center; margin-top: 10px; }
.h-tide-label { width: 80px; flex-shrink: 0; font-size: .86rem; color: var(--gris); }
.h-tide { flex: 1; height: 80px; min-width: 0; }
.h-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 12px; font-size: .82rem; color: var(--gris); }
.h-legend i { margin-right: 6px; }
.updated { margin-top: 18px; font-size: .85rem; color: var(--gris); }

/* ── Páginas ──────────────────────────────────────────────────────────────── */
.view-page { padding: 56px 28px 72px; }
.page { max-width: 1100px; margin: 0 auto; display: flex; flex-direction: column; gap: 28px; }
.page-head { max-width: 760px; }
.kicker { display: none; }
.page-head h1 { font-family: var(--display); font-weight: 700; font-size: clamp(2.6rem, 6vw, 4rem); line-height: .95; color: var(--atlantico); margin-bottom: 16px; }
.lead { font-size: 1.15rem; color: var(--basalto); max-width: 62ch; }
.card { background: var(--blanco); border-radius: var(--r-lg); padding: 28px; min-width: 0; }
.card h2 { font-family: var(--display); font-weight: 600; font-size: 1.6rem; line-height: 1.1; color: var(--atlantico); margin-bottom: 8px; }
.card > p { color: var(--gris); max-width: 70ch; margin-bottom: 18px; }
.card-note { background: transparent; box-shadow: inset 0 0 0 1.5px var(--linea); }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.mt { margin-top: 24px; }

.kpis { display: grid; grid-template-columns: 1.5fr repeat(4, 1fr); border-radius: var(--r-lg); overflow: hidden; background: var(--blanco); }
.kpi { padding: 22px 24px; display: flex; flex-direction: column; gap: 4px; }
.kpi + .kpi { border-left: 1px solid var(--linea); }
.kpi b { font-family: var(--display); font-weight: 700; font-size: 2.6rem; line-height: 1; color: var(--atlantico); }
.kpi span { font-size: .9rem; color: var(--gris); }
.kpi-main { background: var(--atlantico); }
.kpi-main b { font-size: 4rem; color: var(--teide); }
.kpi-main span { color: #b9cee0; }

.chart { position: relative; height: 300px; }
.chart-wide { height: 330px; }
.chart-tall { height: 420px; }

.steps { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 22px; margin-top: 10px; }
.steps li { display: flex; flex-direction: column; gap: 8px; padding-top: 14px; border-top: 3px solid var(--agua); }
.step-n { font-family: var(--display); font-weight: 700; font-size: 1.1rem; color: var(--agua); }
.steps h3 { font-family: var(--display); font-weight: 600; font-size: 1.3rem; color: var(--atlantico); }
.steps p { font-size: .92rem; color: var(--gris); }

.table-wrap { overflow-x: auto; }
.ablation { width: 100%; border-collapse: collapse; font-size: .92rem; font-variant-numeric: tabular-nums; }
.ablation th { text-align: right; font-weight: 600; font-size: .85rem; color: var(--gris); padding: 10px 8px; border-bottom: 2px solid var(--linea); }
.ablation th:first-child, .ablation td:first-child { text-align: left; }
.ablation td { padding: 10px 8px; border-bottom: 1px solid var(--linea); text-align: right; }
.ablation .pos { color: #15803d; }
.ablation .neg { color: #be123c; }
.ablation tr.final td { font-weight: 700; background: color-mix(in srgb, var(--teide) 18%, white); }

.links { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }

.flow { display: flex; align-items: stretch; gap: 12px; margin-top: 12px; overflow-x: auto; padding-bottom: 4px; }
.flow-node { flex: 1; min-width: 140px; padding: 16px; border-radius: var(--r-md); background: var(--espuma); display: flex; flex-direction: column; gap: 4px; }
.flow-node b { font-family: var(--display); font-weight: 600; font-size: 1.2rem; color: var(--atlantico); }
.flow-node span { font-size: .85rem; color: var(--gris); }
.flow-edge { background: var(--atlantico); }
.flow-edge b { color: var(--blanco); }
.flow-edge span { color: #b9cee0; }
.flow-arrow { align-self: center; color: #9aa6b2; font-size: 1.2rem; }
.flow-note { margin-top: 12px; font-size: .9rem; color: var(--gris); }
.flow-live::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #16a34a; margin-right: 8px; }

.tech-group h2 { font-family: var(--display); font-weight: 600; font-size: 1.5rem; color: var(--atlantico); margin-bottom: 12px; }
.tech-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.tech-card { display: flex; gap: 14px; align-items: flex-start; padding: 18px; background: var(--blanco); border-radius: var(--r-md); min-width: 0; overflow-wrap: anywhere; }
a.tech-card:hover { background: var(--espuma); }
.tech-icon { flex-shrink: 0; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; font-weight: 700; font-size: .8rem; }
.tech-card b { font-weight: 600; color: var(--atlantico); }
.tech-card p { font-size: .9rem; color: var(--gris); }

.author { display: flex; gap: 16px; align-items: center; }
.author img { border-radius: 50%; flex-shrink: 0; }
.read-list { list-style: none; display: flex; flex-direction: column; gap: 12px; color: var(--basalto); }
.rating-scale { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }

/* ── Pie ──────────────────────────────────────────────────────────────────── */
.footer { border-top: 1px solid var(--linea); background: var(--blanco); }
.footer-in { max-width: 1240px; margin: 0 auto; padding: 26px 28px; display: flex; flex-wrap: wrap; gap: 10px 28px; align-items: center; font-size: .9rem; color: var(--gris); }
.footer-in a { color: var(--atlantico); font-weight: 600; }
.footer-in a:hover { color: var(--agua); }
.footer-in .grow { flex: 1; }
body[data-view="map"] .footer { display: none; }

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .kpi-main { grid-column: 1 / -1; }
  .kpi + .kpi { border-left: 0; border-top: 1px solid var(--linea); }
  .day-top { grid-template-columns: 1fr; }
  .day-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .fact { border-bottom: 0; }
  .stats-bar { grid-template-columns: repeat(3, 1fr); }
  .stat:nth-child(4) { border-left: 0; }
  .stat:nth-child(n + 4) { border-top: 1px solid var(--linea); }
}

@media (max-width: 860px) {
  :root { --top: 58px; }
  .topbar { padding: 0 16px; gap: 12px; justify-content: space-between; }
  .menu-btn { display: grid; }
  .nav {
    position: fixed; inset: var(--top) 0 auto 0; flex-direction: column; gap: 2px;
    padding: 12px; background: var(--blanco); border-bottom: 1px solid var(--linea); box-shadow: var(--float);
    transform: translateY(-110%); visibility: hidden; transition: transform .22s ease, visibility 0s .22s; z-index: -1;
  }
  .menu-open .nav { transform: none; visibility: visible; transition: transform .22s ease; }
  .nav a { padding: 14px 16px; font-size: 1.05rem; }

  .view-map { height: auto; }
  .map-wrap { position: relative; height: 56vh; }
  .map-legend { top: auto; bottom: 34px; right: 10px; left: 10px; justify-content: center; flex-wrap: wrap; border-radius: var(--r-sm); }
  .panel {
    position: relative; inset: auto; width: auto; margin-top: -22px; border-radius: var(--r-lg) var(--r-lg) 0 0;
    box-shadow: 0 -10px 30px rgba(14, 42, 71, .18); overflow: visible; animation: none;
  }
  .panel-handle { display: block; width: 44px; height: 5px; border-radius: 3px; background: var(--linea); margin: 10px auto 0; }
  .hero { padding: 18px 20px 16px; }
  .hero h1 { font-size: 2.2rem; }
  .best { margin: 0 14px; }
  .list-title { padding: 22px 20px 4px; }
  .coast-title { padding: 10px 14px 2px; }
  .spot-list { padding: 0 6px; }
  .panel-foot { padding: 18px 20px 26px; }

  .spot-hero { height: 270px; }
  .spot-hero-content { padding: 14px 18px 40px; grid-template-columns: 1fr; gap: 8px; }
  .spot-hero-now { justify-self: start; }
  .spot-hero-title h1 { font-size: 2.8rem; }
  .hero-num { font-size: 4.4rem; }
  .spot-body { padding: 0 14px 40px; }
  .stats-bar { grid-template-columns: repeat(2, 1fr); }
  .stat { padding: 14px; }
  .stat:nth-child(odd) { border-left: 0; }
  .stat:nth-child(4) { border-left: 1px solid var(--linea); }
  .stat:nth-child(n + 3) { border-top: 1px solid var(--linea); }
  .stat:last-child { grid-column: 1 / -1; }
  .stat-value { font-size: 1.6rem; }
  .day-tabs { display: flex; overflow-x: auto; margin: 20px -14px 14px; padding: 0 14px; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .day-tab { flex: 0 0 86px; scroll-snap-align: start; }
  .day-panel { padding: 18px 16px; border-radius: var(--r-md); }
  .day-facts { grid-template-columns: 1fr; gap: 0; }
  .fact { border-bottom: 1px solid var(--linea); }
  .day-chart { height: 220px; }
  .h-cols { grid-auto-columns: 44px; }

  .view-page { padding: 32px 16px 56px; }
  .card { padding: 20px 18px; border-radius: var(--r-md); }
  .grid-2 { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .chart { height: 260px; }
  .chart-tall { height: 420px; }
}

@media (max-width: 860px) {
  .leaflet-control-zoom { display: none; }
  .map-legend { gap: 4px 10px; font-size: .74rem; padding: 6px 10px; }
}