/* ============================================================
   Paletas alternativas
   ------------------------------------------------------------
   La paleta que ve todo el mundo es la de `:root` en styles.css
   (grafito y latón). Este archivo solo agrega las otras seis, que
   se activan poniendo data-paleta="..." en <html>.

   El selector se ve en toda la página mientras esta versión sea la
   de revisión. Ojo: la elección se guarda en el navegador de quien
   la hizo, no en el sitio. Para cambiar el color para TODOS hay que
   mover los tokens de :root en styles.css.
   ============================================================ */

html[data-paleta="grafito"]{
  --petrol-900:#131211; --petrol-800:#1C1A18; --petrol-700:#272320;
  --bone:#F4F1EA; --bone-200:#E3DDD0;
  --gold:#C9A227; --gold-bright:#E0B93E; --ember:#7A5F11;
  --on-accent:#131211;
  --on-dark:#F4F2EC; --on-dark-muted:rgba(244,242,236,.64); --on-dark-faint:rgba(244,242,236,.40);
  --on-light:#1C1A18; --on-light-muted:rgba(28,26,24,.68);
  --line-dark:rgba(244,242,236,.13); --line-light:rgba(28,26,24,.15);
}

html[data-paleta="cobre"]{
  --petrol-900:#141110; --petrol-800:#1E1A17; --petrol-700:#2A2420;
  --bone:#F5F1EA; --bone-200:#E4DCCF;
  --gold:#C0703A; --gold-bright:#D6874F; --ember:#8A4A1C;
  --on-accent:#FBF7F1;
  --on-dark:#F5F2EC; --on-dark-muted:rgba(245,242,236,.64); --on-dark-faint:rgba(245,242,236,.40);
  --on-light:#1E1A17; --on-light-muted:rgba(30,26,23,.68);
  --line-dark:rgba(245,242,236,.13); --line-light:rgba(30,26,23,.15);
}

html[data-paleta="marino"]{
  --petrol-900:#0C1420; --petrol-800:#141F2E; --petrol-700:#1D2C3F;
  --bone:#F1F0EC; --bone-200:#DFDCD3;
  --gold:#B08549; --gold-bright:#C99C5E; --ember:#6E4F1E;
  --on-accent:#FAF8F4;
  --on-dark:#F1F2F3; --on-dark-muted:rgba(241,242,243,.64); --on-dark-faint:rgba(241,242,243,.42);
  --on-light:#141F2E; --on-light-muted:rgba(20,31,46,.70);
  --line-dark:rgba(241,242,243,.13); --line-light:rgba(20,31,46,.15);
}

html[data-paleta="petroleo"]{
  --petrol-900:#040E13; --petrol-800:#081820; --petrol-700:#0C2431;
  --bone:#F2EFE7; --bone-200:#E7E2D6;
  --gold:#E4B400; --gold-bright:#F7CB25; --ember:#8A6A00;
  --on-accent:#040E13;
  --on-dark:#F4F2ED; --on-dark-muted:rgba(244,242,237,.64); --on-dark-faint:rgba(244,242,237,.40);
  --on-light:#081820; --on-light-muted:rgba(8,24,32,.68);
  --line-dark:rgba(244,242,237,.13); --line-light:rgba(8,24,32,.14);
}

html[data-paleta="pizarra"]{
  --petrol-900:#0B1A22; --petrol-800:#13303D; --petrol-700:#1C3F50;
  --bone:#F1EFEA; --bone-200:#E2DDD2;
  --gold:#F0A825; --gold-bright:#FFBE4D; --ember:#94590A;
  --on-accent:#0B1A22;
  --on-dark:#F3F1EC; --on-dark-muted:rgba(243,241,236,.66); --on-dark-faint:rgba(243,241,236,.42);
  --on-light:#13303D; --on-light-muted:rgba(19,48,61,.70);
  --line-dark:rgba(243,241,236,.14); --line-light:rgba(19,48,61,.15);
}

html[data-paleta="acero"]{
  --petrol-900:#0E1F2C; --petrol-800:#16303F; --petrol-700:#204254;
  --bone:#EEF0F0; --bone-200:#DBE0E1;
  --gold:#D8C171; --gold-bright:#EAD590; --ember:#6B571A;
  --on-accent:#0E1F2C;
  --on-dark:#F1F3F3; --on-dark-muted:rgba(241,243,243,.66); --on-dark-faint:rgba(241,243,243,.42);
  --on-light:#16303F; --on-light-muted:rgba(22,48,63,.70);
  --line-dark:rgba(241,243,243,.14); --line-light:rgba(22,48,63,.15);
}

html[data-paleta="arena"]{
  --petrol-900:#E7E0D1; --petrol-800:#F6F2E9; --petrol-700:#F0EBDE;
  --bone:#FCFAF5; --bone-200:#E4DCCB;
  --gold:#915E1C; --gold-bright:#A9742A; --ember:#7A4E14;
  --on-accent:#FCFAF5;
  --on-dark:#241F17; --on-dark-muted:rgba(36,31,23,.70); --on-dark-faint:rgba(36,31,23,.48);
  --on-light:#241F17; --on-light-muted:rgba(36,31,23,.72);
  --line-dark:rgba(36,31,23,.16); --line-light:rgba(36,31,23,.15);
}

/* ---------- El selector ---------- */
.paletas{
  position:fixed; left:14px; bottom:14px; z-index:400;
  font-family:var(--body);
}
.paletas__toggle{
  font-family:var(--ui); font-weight:600;
  text-transform:uppercase; letter-spacing:.14em; font-size:.72rem;
  background:#111; color:#fff; border:1px solid rgba(255,255,255,.35);
  padding:11px 18px; cursor:pointer; border-radius:3px;
  box-shadow:0 8px 26px rgba(0,0,0,.45);
}
.paletas__lista{
  position:absolute; left:0; bottom:calc(100% + 10px); width:min(80vw, 306px);
  background:#111; color:#fff; border:1px solid rgba(255,255,255,.2);
  border-radius:4px; padding:8px; display:grid; gap:2px;
  box-shadow:0 20px 50px rgba(0,0,0,.6); max-height:70svh; overflow:auto;
}
.paletas__lista[hidden]{ display:none; }
.paletas__ayuda{
  margin:4px 8px 8px; font-size:.72rem; line-height:1.45; color:rgba(255,255,255,.58);
}
.paletas__lista button{
  display:flex; align-items:center; gap:11px; text-align:left; width:100%;
  background:none; border:0; color:#fff; cursor:pointer;
  padding:9px 10px; border-radius:3px; font:inherit;
}
.paletas__lista button:hover{ background:rgba(255,255,255,.09); }
.paletas__lista button[aria-current="true"]{ background:rgba(255,255,255,.17); }
.paletas__lista i{
  flex:0 0 auto; width:26px; height:26px; border-radius:3px;
  background:linear-gradient(135deg, var(--a) 0 50%, var(--b) 50% 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);
}
.paletas__lista b{
  display:block; font-family:var(--ui); font-weight:600;
  text-transform:uppercase; letter-spacing:.07em; font-size:.8rem;
}
.paletas__lista em{
  display:block; font-style:normal; font-size:.72rem;
  color:rgba(255,255,255,.6); line-height:1.4;
}

/* La paleta "arena" es página clara: ahí el logo va con las letras oscuras.
   Solo aplica en la versión de revisión, con el selector activo. */
html[data-paleta="arena"] .nav__mark,
html[data-paleta="arena"] .footer__logo,
html[data-paleta="arena"] .contact__watermark{
  content: url("../img/logo-dac-mark.png");
}