/* Public content pages. Shared across every generated page so a reader
   clicking comarca → espècie pays for this once. */
* { box-sizing: border-box; margin: 0; padding: 0; }
:root { --bg:#0b1120; --panel:#131d35; --panel2:#16294f; --ink:#e8ecf3;
        --dim:#9aa6ba; --blue:#90caf9; --green:#61d47a; --line:#24345c; }
body { background:var(--bg); color:var(--ink); line-height:1.65;
       font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
       -webkit-text-size-adjust:100%; }
a { color:var(--blue); }

.topbar { position:sticky; top:0; z-index:10; background:rgba(19,29,53,.96);
          border-bottom:1px solid var(--line); backdrop-filter:blur(6px); }
.topbar .inner { max-width:860px; margin:0 auto; padding:10px 20px;
                 display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.brand { color:#fff; text-decoration:none; font-weight:700; font-size:.95rem;
         white-space:nowrap; }
.topbar nav { display:flex; gap:6px; margin-left:auto; flex-wrap:wrap; }
.topbar nav a { color:var(--dim); text-decoration:none; font-size:.85rem;
                padding:5px 10px; border-radius:6px; white-space:nowrap; }
.topbar nav a:hover { background:var(--panel2); color:#fff; }
.topbar nav a.cta-sm { background:#2e7d32; color:#fff; font-weight:700; }
.topbar nav a.cta-sm:hover { background:#388e3c; }

main { max-width:860px; margin:0 auto; padding:26px 20px 60px; }
.crumbs { font-size:.8rem; color:var(--dim); margin-bottom:16px; }
.crumbs a { text-decoration:none; }
.kicker { display:inline-block; font-size:.72rem; letter-spacing:.13em;
          text-transform:uppercase; color:var(--green); font-weight:700;
          margin-bottom:12px; }
h1 { font-size:2rem; line-height:1.16; color:#fff; margin-bottom:14px;
     letter-spacing:-.02em; }
h2 { font-size:1.32rem; color:#fff; margin:46px 0 14px; letter-spacing:-.015em; }
h2::after { content:''; display:block; width:44px; height:3px; margin-top:9px;
            border-radius:2px;
            background:linear-gradient(90deg,var(--green),#fdd835); }
h3 { font-size:1rem; color:#fff; margin:22px 0 8px; }
p { margin-bottom:14px; }
.lede { font-size:1.1rem; color:var(--dim); margin-bottom:20px; }
.answer { font-size:1.02rem; }
.answer strong { color:#fff; }

.card { background:var(--panel); border:1px solid var(--line); border-radius:12px;
        padding:16px 18px; margin:18px 0; }
.card.accent { border-left:3px solid var(--green); }
.card.warn { border-left:3px solid #ef5350; background:rgba(239,83,80,.07); }
.card p:last-child { margin-bottom:0; }

.stats { display:flex; flex-wrap:wrap; gap:10px; margin:18px 0; }
.stat { background:var(--panel); border:1px solid var(--line); border-radius:10px;
        padding:10px 14px; min-width:110px; }
.stat b { display:block; color:#fff; font-size:1.25rem; line-height:1.2; }
.stat span { font-size:.74rem; color:var(--dim); }

.months { margin:14px 0 4px; }
.mrow { display:flex; align-items:center; gap:9px; font-size:.8rem;
        margin-bottom:3px; }
.mlab { width:34px; color:var(--dim); text-transform:capitalize; }
.mbar { flex:1; background:rgba(255,255,255,.05); border-radius:4px; height:13px;
        overflow:hidden; }
.mbar i { display:block; height:100%; background:linear-gradient(90deg,#2e7d32,#61d47a);
          border-radius:4px; }
.mrow.peak .mbar i { background:linear-gradient(90deg,#f9a825,#fdd835); }
.mval { width:44px; text-align:right; color:var(--dim); font-variant-numeric:tabular-nums; }

.chips { display:flex; flex-wrap:wrap; gap:8px; margin:14px 0; }
.chip { background:var(--panel); border:1px solid var(--line); border-radius:999px;
        padding:6px 13px; font-size:.83rem; color:#cdd6e4; text-decoration:none; }
a.chip:hover { background:var(--panel2); color:#fff; }
.chip b { color:var(--green); }

.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
        gap:10px; margin:16px 0; }
.tile { position:relative; background:linear-gradient(180deg,#15213e,#101a30);
        border:1px solid var(--line); border-radius:12px;
        padding:13px 32px 13px 15px; text-decoration:none; color:var(--ink);
        display:block; }
.tile::after { content:'→'; position:absolute; top:12px; right:13px;
               color:var(--green); opacity:0; transform:translateX(-5px);
               transition:opacity .18s ease, transform .18s ease; }
.tile:hover { border-color:var(--green);
              background:linear-gradient(180deg,#19294c,#122039);
              box-shadow:0 10px 26px rgba(0,0,0,.35); }
.tile:hover::after { opacity:1; transform:none; }
.tile b { display:block; color:#fff; margin-bottom:2px; }
.tile span { font-size:.78rem; color:var(--dim); }
.tile.mute { opacity:.55; }

table { width:100%; border-collapse:collapse; margin:14px 0; font-size:.9rem; }
th, td { text-align:left; padding:7px 10px; border-bottom:1px solid var(--line); }
th { color:var(--dim); font-size:.76rem; text-transform:uppercase;
     letter-spacing:.06em; font-weight:600; }
td b { color:#fff; }
.tablewrap { overflow-x:auto; }

/* Guide lists — same green tick the info page uses. */
ul.plain { list-style:none; margin:4px 0 18px; }
ul.plain li { position:relative; padding-left:22px; margin-bottom:10px; }
ul.plain li::before { content:"▸"; position:absolute; left:2px; top:0;
                      color:var(--green); font-weight:700; line-height:1.65; }
ul.plain li strong, ul.plain li b { color:#fff; }

.cta-wrap { text-align:center; margin:34px 0 8px; }
.cta { display:inline-block; background:linear-gradient(180deg,#38984d,#2e7d32);
       color:#fff; text-decoration:none; font-size:1.03rem; font-weight:700;
       padding:13px 28px; border-radius:999px;
       box-shadow:0 3px 14px rgba(46,125,50,.4), inset 0 1px 0 rgba(255,255,255,.14); }
.cta:hover { background:linear-gradient(180deg,#3da654,#358c3b); }
.cta.ghost { background:none; border:1px solid var(--line); color:var(--blue);
             box-shadow:none; }
.cta.ghost:hover { background:rgba(144,202,249,.08); border-color:var(--blue); }
.cta-sub { display:block; margin-top:10px; font-size:.82rem; color:var(--dim); }

footer { border-top:1px solid var(--line); margin-top:44px; padding:22px 20px 40px; }
footer p { max-width:860px; margin:0 auto 10px; font-size:.78rem; color:var(--dim);
           line-height:1.55; }

/* ── Locator map ─────────────────────────────────────────────────────────── */
.locator { background:var(--panel); border:1px solid var(--line); border-radius:12px;
           padding:14px 14px 10px; margin:18px 0; }
.locator svg { display:block; width:100%; max-width:330px; height:auto; margin:0 auto; }
.locator figcaption { text-align:center; font-size:.78rem; color:var(--dim);
                      margin-top:6px; }
.loc-land { fill:rgba(97,212,122,.09); stroke:#3a4d7a; stroke-width:1.1;
            stroke-linejoin:round; }
.loc-dot circle { fill:var(--green); opacity:.6; }
.loc-dot.focus circle { fill:#fdd835; opacity:1; }
.loc-halo { fill:#fdd835; opacity:.45; transform-box:fill-box; transform-origin:center;
            animation:locPulse 2.6s ease-out infinite; }
@keyframes locPulse {
  0%   { transform:scale(1);   opacity:.45; }
  70%  { transform:scale(3.4); opacity:0; }
  100% { transform:scale(3.4); opacity:0; }
}

/* ── Hero glow, for continuity with the map pages ────────────────────────── */
body::before { content:''; position:fixed; inset:-30vh -30vw auto -30vw; height:80vh;
               z-index:-1; pointer-events:none;
               background:
                 radial-gradient(34% 40% at 24% 22%, rgba(46,125,50,.28), transparent 70%),
                 radial-gradient(28% 34% at 76% 16%, rgba(21,101,192,.20), transparent 70%),
                 radial-gradient(30% 32% at 62% 60%, rgba(97,212,122,.12), transparent 70%);
               filter:blur(30px); }

/* ── Scroll reveal ───────────────────────────────────────────────────────── */
[data-reveal] { opacity:0; transform:translateY(14px);
                transition:opacity .55s ease, transform .55s cubic-bezier(.2,.9,.3,1); }
[data-reveal].in { opacity:1; transform:none; }

/* Bars are correct with no JS at all; a block JS marked for reveal starts
   collapsed and grows when it scrolls into view. */
.mbar i { width:var(--w); transition:width .9s cubic-bezier(.2,.9,.3,1); }
.months[data-reveal] .mbar i { width:0; }
.months[data-reveal].in .mbar i { width:var(--w); }

/* ── Season strip (species pages) ────────────────────────────────────────── */
.strip { display:flex; gap:3px; margin:12px 0 6px; }
.strip div { flex:1; text-align:center; border-radius:6px; padding:9px 0 7px;
             font-size:.68rem; color:var(--dim); background:rgba(255,255,255,.04);
             border:1px solid transparent; text-transform:capitalize;
             transition:transform .18s ease; }
.strip div.on { background:linear-gradient(180deg,#2e7d32,#1b5e20); color:#fff;
                font-weight:700; border-color:#61d47a; }
.strip div.peak { background:linear-gradient(180deg,#f9a825,#f57f17); color:#3a2600;
                  font-weight:700; border-color:#fdd835; }
.strip div:hover { transform:translateY(-2px); }

/* ── Altitude band ───────────────────────────────────────────────────────── */
.band { position:relative; height:34px; border-radius:8px; margin:14px 0 34px;
        background:linear-gradient(90deg,#12341f,#1d4f2e,#2e7d32,#7cb342,#c0ca33);
        border:1px solid var(--line); }
.band .fill { position:absolute; top:0; bottom:0; background:rgba(255,255,255,.16);
              border-left:2px solid #fdd835; border-right:2px solid #fdd835; }
.band .tick { position:absolute; top:100%; font-size:.7rem; color:var(--dim);
              transform:translateX(-50%); margin-top:5px; white-space:nowrap; }

.tile { transition:transform .18s ease, border-color .18s ease, background .18s ease; }
.tile:hover { transform:translateY(-3px); }
.chip { transition:transform .16s ease, background .16s ease, border-color .16s ease; }
a.chip:hover { transform:translateY(-2px); border-color:var(--green); }
.cta { transition:transform .16s ease, background .16s ease, box-shadow .16s ease; }
.cta:hover { transform:translateY(-2px); box-shadow:0 6px 22px rgba(46,125,50,.5); }
.stat { transition:transform .18s ease, border-color .18s ease; }
.stat:hover { transform:translateY(-2px); border-color:#3a4d7a; }

/* ── Homepage hero ───────────────────────────────────────────────────────── */
.hero { position:relative; text-align:center; padding:30px 0 6px; }
.hero .spore { position:absolute; opacity:.15; pointer-events:none;
               animation:floaty 9s ease-in-out infinite; }
.hero .s1 { top:6%;  left:2%;  font-size:2rem; }
.hero .s2 { top:66%; left:5%;  font-size:1.3rem; animation-delay:-3s; }
.hero .s3 { top:10%; right:3%; font-size:1.5rem; animation-delay:-5s; }
.hero .s4 { top:72%; right:5%; font-size:2.1rem; animation-delay:-7s; }
@keyframes floaty { 0%,100% { transform:translateY(0) rotate(-6deg); }
                    50%     { transform:translateY(-22px) rotate(8deg); } }

.kicker.pill { display:inline-flex; align-items:center; gap:8px;
               border:1px solid rgba(97,212,122,.35); border-radius:999px;
               padding:7px 15px; background:rgba(97,212,122,.07);
               margin-bottom:20px; }
.kicker .dot { width:7px; height:7px; border-radius:50%; background:var(--green);
               animation:blink 1.8s ease-in-out infinite; }
@keyframes blink { 0%,100% { opacity:1; } 50% { opacity:.25; } }

.hero h1 { font-size:clamp(2.2rem,5.6vw,3.1rem); line-height:1.12;
           letter-spacing:-.025em; max-width:640px; margin:0 auto 16px; }
.shine { background:linear-gradient(92deg,#7ee68f 10%,#c6f27a 45%,#7ee68f 80%);
         background-size:200% 100%; -webkit-background-clip:text;
         background-clip:text; -webkit-text-fill-color:transparent;
         color:transparent; animation:shine 5s linear infinite; }
@keyframes shine { to { background-position:-200% 0; } }

.hero .lede { max-width:520px; margin:0 auto 26px; }
.cta-row { display:flex; justify-content:center; align-items:center; gap:12px;
           flex-wrap:wrap; margin-bottom:13px; }
.hero .cta-sub { display:block; max-width:540px; margin:0 auto;
                 font-size:.82rem; color:var(--dim); line-height:1.6; }

.hero-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:10px;
              margin:32px 0 6px; text-align:center; }
.hero-stats .stat { min-width:0; padding:14px 8px 12px;
                    background:linear-gradient(180deg,#15213e,#111a30);
                    border-top:2px solid rgba(97,212,122,.5); }
.hero-stats .stat b { font-size:1.55rem; font-variant-numeric:tabular-nums; }

/* ── "See all" ghost pills ───────────────────────────────────────────────── */
.more-wrap { margin:4px 0 10px; }
.more-link { display:inline-block; border:1px solid var(--line);
             border-radius:999px; padding:8px 17px; font-size:.88rem;
             font-weight:600; color:var(--blue); text-decoration:none;
             transition:border-color .16s ease, background .16s ease,
                        transform .16s ease; }
.more-link:hover { border-color:var(--blue); background:rgba(144,202,249,.08);
                   transform:translateY(-2px); }

/* ── Invitation feature card ─────────────────────────────────────────────── */
.invite-card { position:relative; overflow:hidden; margin:52px 0 18px;
               padding:26px 28px 22px; border-radius:16px;
               border:1px solid rgba(97,212,122,.3);
               background:linear-gradient(160deg,#152743 0%,#11203a 55%,#0f1a2f 100%);
               box-shadow:0 18px 50px rgba(0,0,0,.35); }
.invite-card h2 { margin-top:0; }
.invite-card::before { content:'🧹'; position:absolute; right:-4px; bottom:-22px;
                       font-size:7.5rem; opacity:.07; transform:rotate(-12deg);
                       pointer-events:none; }
.invite-card .cta-wrap { margin:22px 0 4px; }

@media (max-width:560px) {
  h1 { font-size:1.6rem; }
  .topbar nav a { padding:4px 8px; font-size:.8rem; }
  main { padding:20px 16px 48px; }
  .strip div { font-size:.6rem; padding:7px 0 5px; }
  .hero { padding-top:20px; }
  /* no room for decorative floaters next to 2-col stats — they collide */
  .hero .spore { display:none; }
  .hero-stats { grid-template-columns:repeat(2,1fr); }
  .invite-card { padding:20px 18px 18px; }
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity:1 !important; transform:none !important; transition:none; }
  .mbar i { transition:none; }
  .loc-halo, .hero .spore, .kicker .dot, .shine { animation:none; }
  .tile:hover, .chip:hover, .cta:hover, .stat:hover, .strip div:hover,
  .more-link:hover { transform:none; }
}