/* Lo único que comparten todas las pestañas: colores, letra, menú e idioma.
   Cada pestaña tiene además su propio estilo.css; cambiar uno no afecta a las demás. */

:root {
  --fondo: #f3f1ec;
  --superficie: #fbfaf7;
  --superficie-2: #e9e6df;
  --texto: #15140f;
  --texto-suave: #5f5b52;
  --borde: #d6d2c8;
  --acento: #c2410c;
  --acento-suave: #f6e3d6;
  --bien: #2f7d4f;
  --mal: #b42318;
  --ancho: 1040px;
  --letra: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --letra-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fondo: #121210;
    --superficie: #1a1a17;
    --superficie-2: #24231f;
    --texto: #ecebe6;
    --texto-suave: #a19d93;
    --borde: #34332d;
    --acento: #f08a4b;
    --acento-suave: #3a2418;
    --bien: #5fbf85;
    --mal: #f07a6a;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --fondo: #121210;
  --superficie: #1a1a17;
  --superficie-2: #24231f;
  --texto: #ecebe6;
  --texto-suave: #a19d93;
  --borde: #34332d;
  --acento: #f08a4b;
  --acento-suave: #3a2418;
  --bien: #5fbf85;
  --mal: #f07a6a;
  color-scheme: dark;
}

/* Idioma: cada texto va dos veces, con class="es" y class="en"; se ve solo el del idioma elegido */
html[data-lang="en"] .es, html:not([data-lang="en"]) .en { display: none !important; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--letra);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration-color: var(--acento); text-underline-offset: 3px; }
a:hover { color: var(--acento); }
h1, h2, h3, h4 { line-height: 1.15; letter-spacing: -0.015em; font-weight: 600; }
::selection { background: var(--acento); color: #fff; }

.contenedor { max-width: var(--ancho); margin: 0 auto; padding: 0 16px; }
@media (min-width: 720px) { .contenedor { padding: 0 32px; } }

/* Etiqueta pequeña en mono: «01 — Experiencia» */
.marca { font-family: var(--letra-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-suave); }

/* ---- Menú (lo pinta comun/menu.js) ---- */
.menu { border-bottom: 1px solid var(--borde); background: var(--fondo); position: sticky; top: 0; z-index: 50; }
.menu-dentro {
  max-width: 1280px; margin: 0 auto; padding: 0 16px;
  display: flex; align-items: center; gap: 24px; min-height: 56px;
}
@media (min-width: 720px) { .menu-dentro { padding: 0 32px; } }
.menu-marca { font-weight: 600; text-decoration: none; white-space: nowrap; }
.menu-pestanas { display: flex; gap: 18px; overflow-x: auto; scrollbar-width: none; }
.menu-pestanas::-webkit-scrollbar { display: none; }
.menu-pestanas a {
  white-space: nowrap; text-decoration: none; color: var(--texto-suave); font-size: 14px;
  padding: 17px 0 15px; border-bottom: 2px solid transparent;
}
.menu-pestanas a:hover { color: var(--texto); }
.menu-pestanas a[aria-current="page"] { color: var(--texto); border-bottom-color: var(--acento); }
.menu-pestanas sup { font-family: var(--letra-mono); font-size: 9px; color: var(--texto-suave); margin-left: 2px; }
.menu-ajustes { margin-left: auto; display: flex; gap: 14px; align-items: center; font-family: var(--letra-mono); font-size: 12px; }
.menu-ajustes button {
  font: inherit; background: none; border: 0; padding: 4px 0; cursor: pointer; color: var(--texto-suave);
}
.menu-ajustes button:hover, .menu-ajustes button[aria-pressed="true"] { color: var(--texto); }
.menu-ajustes .sep { color: var(--borde); }

@media (max-width: 1100px) {
  .menu-dentro { flex-wrap: wrap; gap: 0 16px; padding-top: 10px; }
  .menu-pestanas { order: 3; width: 100%; }
  .menu-pestanas a { padding: 10px 0 8px; }
}

.pie { border-top: 1px solid var(--borde); margin-top: 96px; padding: 24px 0 32px; color: var(--texto-suave); font-size: 13px; }
.pie .contenedor { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }