/* ================================================================
   SurfSeek — seo.css  (páginas de contenido estáticas /surf/*)
   Reutiliza los tokens de marca de styles.css (:root) con fallbacks.
   ================================================================ */
:root{
  --seo-paper: var(--bg, #faf8f3);
  --seo-ink:   var(--text, #241f19);
  --seo-accent:var(--accent, #b5502f);
  --seo-line:  var(--border, #e7e0d4);
  --seo-muted: var(--text-muted, #6b6355);
  --seo-serif: var(--font-display, "Bebas Neue"), system-ui, sans-serif;
  --seo-body:  var(--font, "Inter"), system-ui, sans-serif;
}
body.seo-page{
  margin:0; background:var(--seo-paper); color:var(--seo-ink);
  font-family:var(--seo-body); line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
.seo-page a{ color:var(--seo-accent); text-decoration:none; }
.seo-page a:hover{ text-decoration:underline; }

/* header */
.seo-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 24px; border-bottom:1px solid var(--seo-line);
  position:sticky; top:0; background:rgba(250,248,243,.92);
  backdrop-filter:blur(8px); z-index:20;
}
.seo-logo{ font-family:var(--seo-serif); font-size:26px; letter-spacing:.5px; color:var(--seo-ink)!important; }
.seo-logo i{ color:var(--seo-accent); }
.seo-nav{ display:flex; gap:18px; align-items:center; font-weight:600; font-size:14px; }
.seo-nav a{ color:var(--seo-ink); }
.seo-cta-sm{ background:var(--seo-accent); color:#fff!important; padding:8px 16px; border-radius:3px; }
.seo-cta-sm:hover{ text-decoration:none; opacity:.92; }

/* breadcrumb */
.seo-crumb{ max-width:820px; margin:18px auto 0; padding:0 24px; font-size:13px; color:var(--seo-muted); }
.seo-crumb a{ color:var(--seo-muted); }
.seo-crumb .sep{ margin:0 6px; opacity:.5; }

/* main */
.seo-main{ max-width:820px; margin:0 auto; padding:8px 24px 40px; }
.seo-eyebrow{ font-family:var(--seo-serif); letter-spacing:2px; text-transform:uppercase;
  color:var(--seo-accent); font-size:14px; margin:24px 0 6px; }
.seo-main h1{ font-family:var(--seo-serif); font-weight:400; font-size:clamp(38px,7vw,64px);
  line-height:1.02; letter-spacing:.5px; margin:0 0 12px; }
.seo-lede{ font-size:20px; color:var(--seo-muted); margin:0 0 24px; max-width:60ch; }
.seo-main h2{ font-family:var(--seo-serif); font-weight:400; font-size:30px; letter-spacing:.5px;
  margin:40px 0 14px; padding-bottom:8px; border-bottom:1px solid var(--seo-line); }
.seo-main h3{ font-size:21px; font-weight:800; margin:26px 0 8px; }
.seo-main p{ margin:0 0 14px; }
.seo-sec{ margin-top:8px; }

/* quick facts */
.seo-facts{ list-style:none; display:flex; flex-wrap:wrap; gap:10px; padding:0; margin:18px 0 24px; }
.seo-facts li{ background:#fff; border:1px solid var(--seo-line); border-radius:4px; padding:10px 16px; min-width:120px; }
.seo-facts span{ display:block; font-size:11px; text-transform:uppercase; letter-spacing:1px; color:var(--seo-muted); }
.seo-facts strong{ font-size:17px; }

/* planner CTA */
.seo-plan-cta{ display:inline-flex; align-items:center; gap:10px; background:var(--seo-accent);
  color:#fff!important; padding:14px 24px; border-radius:3px; font-weight:700; font-size:16px; margin:6px 0 8px; }
.seo-plan-cta:hover{ text-decoration:none; opacity:.93; }

/* waves */
.seo-wave{ border-left:3px solid var(--seo-accent); padding:2px 0 2px 20px; margin:22px 0; }
.seo-chips{ list-style:none; display:flex; flex-wrap:wrap; gap:8px; padding:0; margin:6px 0 12px; }
.seo-chips li{ font-size:12px; font-weight:600; color:var(--seo-muted); background:#fff;
  border:1px solid var(--seo-line); border-radius:20px; padding:4px 12px; }
.seo-chips i{ color:var(--seo-accent); margin-right:4px; }
.seo-cond{ font-size:13px; color:var(--seo-muted); }
.seo-cond i{ color:var(--seo-accent); }

/* lists */
.seo-stay{ padding-left:20px; }
.seo-stay li{ margin:8px 0; }

/* zones on hub */
.seo-zone{ margin:22px 0; }
.seo-arealist{ padding-left:20px; }
.seo-arealist li{ margin:7px 0; }
.seo-arealist a{ font-weight:700; }

/* nearby */
.seo-near{ display:flex; flex-wrap:wrap; gap:8px; }
.seo-near a{ background:#fff; border:1px solid var(--seo-line); border-radius:20px; padding:6px 14px; font-size:14px; font-weight:600; }
.seo-inlink{ font-weight:700; }

/* month table */
.seo-month{ width:100%; border-collapse:collapse; margin:8px 0 14px; font-size:14px; }
.seo-month th{ text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:1px;
  color:var(--seo-muted); border-bottom:1px solid var(--seo-line); padding:8px 10px; }
.seo-month td{ padding:10px; border-bottom:1px solid var(--seo-line); vertical-align:top; }
.seo-month .mo{ font-weight:700; white-space:nowrap; }
.seo-month .vd{ font-weight:700; white-space:nowrap; }
.seo-month tr.v-prime .vd{ color:#1a7f4b; }
.seo-month tr.v-good .vd{ color:#2c7; }
.seo-month tr.v-quiet .vd{ color:var(--seo-muted); }
.seo-month tr.v-switch .vd{ color:#c08a00; }
.seo-month tr.v-avoid .vd{ color:#c0392b; }

/* insurance */
.seo-ins{ display:flex; align-items:center; gap:18px; justify-content:space-between;
  background:#fff; border:1px solid var(--seo-line); border-left:3px solid var(--seo-accent);
  border-radius:4px; padding:18px 20px; margin:32px 0; }
.seo-ins-btn{ background:var(--seo-ink); color:#fff!important; padding:10px 18px; border-radius:3px;
  font-weight:700; white-space:nowrap; }
.seo-ins-btn:hover{ text-decoration:none; opacity:.9; }

/* newsletter */
.seo-nl{ background:var(--seo-ink); color:#fff; border-radius:6px; padding:28px 24px; margin:36px 0; }
.seo-nl h2{ color:#fff; border:none; margin:0 0 8px; }
.seo-nl p{ color:rgba(255,255,255,.8); margin:0 0 14px; }
.seo-nl-form{ display:flex; gap:8px; flex-wrap:wrap; }
.seo-nl-form input{ flex:1; min-width:200px; padding:12px 14px; border:none; border-radius:3px; font-size:15px; font-family:inherit; }
.seo-nl-form button{ background:var(--seo-accent); color:#fff; border:none; padding:12px 22px; border-radius:3px; font-weight:700; cursor:pointer; font-size:15px; }
.seo-nl-msg{ font-size:13px; color:rgba(255,255,255,.85)!important; min-height:16px; margin-top:8px; }

/* guides index */
.seo-country-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; margin:24px 0; }
.seo-country-card{ display:block; background:#fff; border:1px solid var(--seo-line); border-radius:6px; padding:22px; color:var(--seo-ink)!important; }
.seo-country-card:hover{ text-decoration:none; border-color:var(--seo-accent); }
.seo-country-card h2{ margin:0 0 6px; border:none; }
.seo-country-card p{ color:var(--seo-muted); font-size:15px; }
.seo-count{ font-size:12px; text-transform:uppercase; letter-spacing:1px; color:var(--seo-accent); font-weight:700; }

/* footer */
.seo-footer{ border-top:1px solid var(--seo-line); padding:32px 24px; text-align:center; color:var(--seo-muted); margin-top:40px; }
.seo-foot-brand{ font-family:var(--seo-serif); font-size:24px; color:var(--seo-ink); }
.seo-footer p{ margin:6px 0 12px; }
.seo-foot-links{ display:flex; gap:18px; justify-content:center; margin-bottom:12px; font-weight:600; }

@media(max-width:640px){
  .seo-ins{ flex-direction:column; align-items:flex-start; }
  .seo-header{ padding:12px 16px; }
  .seo-main,.seo-crumb{ padding-left:16px; padding-right:16px; }
}