/* ¿Dónde hay sombra? Shared brand for intro.html and index.html. */

:root {
  /* Color */
  --navy: #2a2f55;        /* text and "selected" */
  --sol: #f4f1bb;         /* main action; text on it is always navy */
  --sol-hover: #fffbd8;
  --bg: #f7f6ef;          /* the only page background */
  --surface: #ffffff;     /* cards and panels on top of the background */
  --line: #dcdcd2;
  --muted: #5d6185;
  --tree: #2f6b45;        /* data: trees */
  --calor: #c4483a;       /* data: heat */
  --focus: #5dc9f0;

  /* Type scale: nothing outside these six sizes */
  --t-13: 13px;
  --t-15: 15px;
  --t-18: 18px;
  --t-24: 24px;
  --t-36: 36px;
  --t-56: 56px;

  /* Radius */
  --r-pill: 999px;        /* buttons, filters, tabs, nav */
  --r-in: 12px;           /* inner elements: inputs, list rows, notes */
  --r-card: 24px;         /* cards and panels */
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; font-family: 'Figtree', system-ui, -apple-system, sans-serif; color: var(--navy); background: var(--bg); }
button, input, select, textarea { font-family: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

/* ---- One nav for both pages ---- */
/* 64px bar; each page sets its width to match its own content. */
.site-nav { position: relative; display: flex; align-items: center; gap: 4px; height: 64px; padding: 0 10px 0 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-pill); box-shadow: 0 6px 24px rgba(27, 29, 51, .08); }
/* The sello is the logo. Desktop: an 88px sticker hanging below the bar. */
.site-nav .brand { position: relative; display: block; width: 88px; height: 100%; margin-right: auto; line-height: 0; }
.site-nav .brand img { position: absolute; left: 0; top: 4px; width: 88px; height: 88px; object-fit: contain; transform: rotate(-6deg); filter: drop-shadow(0 6px 10px rgba(27, 29, 51, .22)); }
.site-nav a.link { font-size: var(--t-15); font-weight: 600; color: var(--navy); text-decoration: none; padding: 10px 16px; border-radius: var(--r-pill); white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { .site-nav a.link:not(.on):hover, .nav-abajo a:not(.on):hover { background: var(--bg); } }
/* Language switch: outlined so it reads as a setting, not a page. Stays in the top bar on phones. */
.site-nav .lang { font: inherit; font-size: var(--t-15); font-weight: 600; color: var(--navy); background: transparent; border: 1px solid var(--line); border-radius: var(--r-pill); padding: 9px 14px; margin-left: 6px; min-height: 44px; cursor: pointer; white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { .site-nav .lang:hover { background: var(--bg); } }
/* How far the sticker hangs below the bar; the first panel under the bar leaves this much room. */
:root { --sello-sobra: 0px; }
@media (min-width: 1024px) { :root { --sello-sobra: 36px; } }
/* Tablet: 64px, inside the bar. */
@media (min-width: 640px) and (max-width: 1023px) {
  .site-nav .brand { width: 64px; }
  .site-nav .brand img { top: 0; width: 64px; height: 64px; transform: none; filter: none; }
}
/* Phone: 48px sello in the top bar; the links move to a fixed bar at the bottom. */
@media (max-width: 639px) {
  .site-nav { padding: 0 12px; }
  .site-nav .brand { width: 48px; }
  .site-nav .brand img { top: 7px; width: 48px; height: 48px; transform: none; filter: none; }
  .site-nav a.link { display: none; }
}
.nav-abajo { display: none; }
@media (max-width: 639px) {
  .nav-abajo { position: fixed; z-index: 1600; left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); display: flex; gap: 4px; padding: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-pill); box-shadow: 0 6px 24px rgba(27, 29, 51, .14); }
  .nav-abajo a { flex: 1; min-height: 44px; display: flex; align-items: center; justify-content: center; font-size: var(--t-15); font-weight: 600; color: var(--navy); text-decoration: none; border-radius: var(--r-pill); }
  /* Room so the fixed bar never covers the end of the page. */
  body { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
}

/* ---- The one "selected" style: navy pill, white text ---- */
.site-nav a.on, .nav-abajo a.on, .chip.on, .layer-bar button.on, .tabs button.on { background: var(--navy); color: #fff; border-color: var(--navy); }

/* ---- Card ---- */
.tarjeta { background: var(--surface); color: var(--navy); border: 1px solid var(--line); border-radius: var(--r-card); padding: 20px; font-size: var(--t-15); line-height: 1.5; }
.tarjeta h3 { font-size: var(--t-18); font-weight: 600; margin: 0 0 10px; }

/* ---- Buttons ---- */
.btn { display: inline-block; font: inherit; font-size: var(--t-15); font-weight: 600; line-height: 1.2; padding: 14px 24px; border-radius: var(--r-pill); text-decoration: none; text-align: center; cursor: pointer; transition: transform .16s ease-out, background-color .2s ease-out; }
.btn:active { transform: scale(0.97); }
.btn-sun { background: var(--sol); color: var(--navy); border: 1px solid rgba(42, 47, 85, .18); }
.btn-line { background: var(--surface); color: var(--navy); border: 1px solid var(--line); }
@media (hover: hover) and (pointer: fine) { .btn-sun:hover { background: var(--sol-hover); } .btn-line:hover { background: var(--bg); } }

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
}