/* ===============================
      TEMAS (apenas variáveis)
================================*/
.icone {
  fill: red; /* Muda a cor do interior */
  stroke: blue; /* Muda a cor da linha/borda */
  stroke-width: 2px;
}
:root {
  /* Tema padrão (WhatsApp) */
  --f: url(Imagens/image.png);
  --bg: rgb(0, 198, 43);
  --header-bg: rgb(53, 143, 65);
  --img: brightness(0);
  --bg1: color-mix(in srgb, var(--bg) 70%, white 30%);
  --cell-bg: rgb(62, 184, 79);
  --cell-dark-bg: rgb(5, 80, 32);
  --text: #000;
  --text-light: aliceblue;
  --border-color: #00267e;
  --tutorial-bg: #cdffdb70;
  --button-bg: #003470;
  /* Dark */
  --gr2-dark: #0d0238;
  --header-gr2-dark: #018534c5;
  --cell-dark-bg: rgb(5, 80, 32);
  --text-dark: #fff;
  --bg--dark-image: url(Imagens/image2.png);
  --gr1-dark: rgb(62, 184, 79);
  --bg1: color-mix(in srgb, var(--bg) 70%, white 30%);
  --bg2: color-mix(in srgb, var(--bg) 70%, rgb(0, 0, 0) 30%);
}

/* Tema Facebook */
.theme-facebook {
  --f: url(Imagens/fundo1-2.png);
  --bg1: color-mix(in srgb, var(--bg) 70%, white 30%);
  --bg2: color-mix(in srgb, var(--bg) 70%, rgb(0, 0, 0) 30%);
  --bg: #1877f2;
  --header-bg: #145dbf;
  --cell-bg: #3b76e3;
  --cell-dark-bg: #0d2a67;
  --text: #000;
  --text-light: #fff;
  --border-color: #0a1c47;
  --tutorial-bg: #aec9ff70;
  --button-bg: #0d2a67;
  /* Dark */
  --gr2-dark: #0c152f;
  --header-gr2-dark: #0a1a44;
  --cell-dark-bg: #101c46;
  --text-dark: #fff;
  --bg--dark-image: url(Imagens/fundo2-2.png);
  --gr1-dark: #3b76e3;
}

.theme-pix {
  --f: url(Imagens/image.png);
  --bf: hue-rotate(60deg) grayscale(0.2) brightness(1);
  --bg1: color-mix(in srgb, var(--bg) 70%, white 30%);
  --bg2: color-mix(in srgb, var(--bg) 70%, rgb(0, 0, 0) 30%);
  --bg: #18f2ad;
  --header-bg: #14bf97;
  --cell-bg: #3be3c4;
  --cell-dark-bg: #0d674c;
  --text: #000;
  --text-light: #fff;
  --border-color: #0a473e;
  --tutorial-bg: #aeffe970;
  --button-bg: #0d675b;

  /* Dark */
  --gr2-dark: #0c2f27;
  --darkbf: brightness(0.3) grayscale(0.5) hue-rotate(-20deg);
  --header-gr2-dark: #168a71;
  --cell-dark-bg: #104640;
  --text-dark: #fff;
  --bg--dark-image: url(Imagens/fundo1-2.png);
  --gr1-dark: #3be3c4;
}

/* Tema Uber */
.theme-uber {
  --f: url(Imagens/image.png);
  --bf: grayscale(1) brightness(1);
  --bg: #000;
  --bg1: color-mix(in srgb, var(--cell-bg) 70%, white 30%);
  --bg2: color-mix(in srgb, var(--cell-bg) 70%, rgb(0, 0, 0) 30%);
  --header-bg: #c1c1c1;
  --cell-bg: #8e8e8e;
  --text: #000;
  --text-light: #fff;
  --border-color: #333333;
  --tutorial-bg: #ffffff20;
  --button-bg: #444;
  /* Dark */
  --gr1-dark: #2a2a2a;
  --gr2-dark: #000;
  --header-gr2-dark: #222222;
  --cell-dark-bg: #000000;
  --text-dark: #fff;
  --darkbf: grayscale(1);
  --bg--dark-image: url(Imagens/image2.png);
}
.theme-internet {
  --bg1: color-mix(in srgb, var(--bg) 70%, white 30%);
  --bg2: color-mix(in srgb, var(--bg) 70%, rgb(0, 0, 0) 30%);
  --f: url(Imagens/fundo1-4.png);
  --cell-dark-bg: #104616;
  --bg: #f21818;
  --header-bg: #bf1414;
  --cell-bg: #ca0e0e;
  --cell-dark-bg: #670d0d;
  --text: #000;
  --text-light: #fff;
  --border-color: #470a0a;
  --tutorial-bg: #ffaeae70;
  --button-bg: #670d0d;
  /* Dark */
  --gr1-dark: #670d0d;
  --gr2-dark: #2f0c0c;
  --header-gr2-dark: #440a0a;
  --cell-dark-bg: #461010;
  --text-dark: #fff;
  --bg--dark-image: url(Imagens/fundo2-4.png);
}

/* ============================================
     SEU CSS ORIGINAL — Agora usando variáveis
============================================ */

body {
  margin: 0;
  display: flex;
  background-color: var(--bg);
  font-weight: bolder;
  align-content: center;
  justify-content: center;
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
}

li img {
  width: 70%;
  height: 80%;
  border-radius: 5vw;
  border: var(--border-color) solid 15px;
}

.conteudo {
  width: 100%;
  height: 10%;
  grid-template-columns: repeat(1, 1fr);
  align-items: center;
  justify-content: center;
  justify-items: center;
  align-content: center;
  display: grid;
  margin-inline: 10vw;
  gap: 10vw;
  margin-top: 100px;
  border-radius: 4vw;
  background-color: #00000044;
  padding: 4vw;
}

.cell div {
  width: 50%;
  font-size: calc(8px + 2vw);
  text-align: center;
  align-content: center;
  justify-content: center;
}

.cell img {
  width: 20%;
  min-width: 100px;
  filter: var(--img);
  transition: 0.3s;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-drag: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.cell a {
  text-decoration: none;
  color: var(--text-light);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2vw;
  width: 100%;
  height: 100%;
  text-align: center;
  justify-items: center;
  align-content: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-drag: none;
  cursor: pointer;
  user-select: none;
}

.cell {
  text-align: center;
  justify-items: center;
  align-content: center;
  justify-content: center;
  column-gap: 5vw;

  transition: 0.3s;
  outline: #000 solid 4px;
  border: solid 5px;
  border-color: var(--bg1) var(--bg2) var(--bg2) var(--bg1);
  background: linear-gradient(225deg, rgba(255, 255, 255, 0.5), #00000000);
  background-color: var(--cell-bg);
  display: flex;
  overflow: hidden;
  width: 60vw;
  height: 30vw;
  min-width: 80%;
  max-height: 12vmax;
  border-radius: 3vw;
  user-select: none;
  cursor: pointer;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

header img {
  -webkit-tap-highlight-color: transparent;
  -webkit-user-drag: none;

  height: 5vw;
  min-height: 50px;
  background-color: #00000000;
  filter: contrast(1.3);
  user-select: none;
}

.logo {
  background-color: rgba(255, 255, 255, 0.662);
  border-radius: 8px;
  height: 100%;
  padding-inline: 3vw;
  align-items: center;
  align-content: center;
}
.org {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 10%;
}
.org a {
  user-select: none;
  cursor: pointer;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  align-items: center;
  justify-items: center;
  align-content: center;
  justify-content: center;
  color: var(--text);
  font-size: 2vmax;
  transition: 0.3s;
  text-decoration: none;
}
header {
  filter: contrast(1.3);
  align-items: center;
  justify-items: center;
  align-content: center;
  justify-content: center;
  width: 100%;
  height: 7vmax;
  padding-left: 5vw;
  background-color: var(--header-bg);
  position: fixed;
  z-index: 100000;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 0%;
}

#toggle {
  display: none;
}

.button {
  display: inline-block;
  width: 90px;
  height: 35px;
  background-color: white;
  border-radius: 90px;
  position: relative;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* Botões de modo noturno — ficam iguais */
.button::after,
.button::before {
  content: "";
  background-image: url(Imagens/sol.png);
  background-size: 90%;
  background-position: center;
  background-repeat: no-repeat;
  width: 30px;
  height: 30px;
  top: 3px;
  left: 4px;
  position: absolute;
  border-radius: 30px;
  background-color: #000000;
  transition: opacity 0.6s ease, transform 0.5s ease-out, background-color 1.5s;
}

.button::after {
  background-image: url(Imagens/sol.png);
  background-color: rgb(253, 97, 0);
  opacity: 1;
}

.button::before {
  background-image: url(Imagens/lua.png);
  background-color: #5d48bb;
  opacity: 0;
}

#toggle:checked + .button::after {
  opacity: 0;
  transform: translateX(175%);
  background-color: #5d48bb;
}

#toggle:checked + .button::before {
  opacity: 1;
  transform: translateX(175%);
}
#fundo {
  position: fixed;
  z-index: -1;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transition: 1s;
}

/* Imagem clara */
#fundo::before,
#fundo::after {
  content: "";
  position: absolute;

  background-size: cover;
  background-position: center;
  transition: 1s;
  filter: var(--bf);
}

/* Imagem padrão (modo claro) */
#fundo::before {
  background-image: var(--f);
  opacity: 1;
  width: 100%;
  height: 100vh;
}

/* Imagem do modo escuro */
#fundo::after {
  background-image: var(--bg--dark-image);
  filter: var(--darkbf);
  opacity: 0;
  width: 100%;
  height: 100vh;
}

/* Quando ativar o dark, a de cima aparece */
body.dark #fundo::after {
  opacity: 1;
}
#fundo img {
  width: 100%;
  min-width: 996px;
}

body.dark header {
  background-color: var(--header-gr2-dark);
}

body.dark {
  background-color: var(--gr2-dark);
}

body.dark .conteudo {
  color: var(--text-dark);
  display: grid;
}

body.dark .cell img {
  filter: brightness(1);
}

body.dark .cell {
  background: linear-gradient(45deg, var(--gr1-dark), #0000);
  background-color: var(--cell-dark-bg);
}

body.dark #tutorial {
  color: var(--text-dark);
}

body.dark .org a {
  color: var(--text-dark);
}
/* =============================
      TUTORIAL
============================= */

#tutorial {
  display: flex;
  color: var(--text);
  background-color: var(--tutorial-bg);
  width: 70%;
  margin-top: 10vh;
  padding-top: 5vh;
  padding-bottom: 5vh;
  padding-inline: 9vw;
  border-radius: 30px;
}

#tutorial button {
  background-color: var(--button-bg);
  color: white;
  border: none;
  padding: 15px 30px;
  border-radius: 10px;
  font-size: 1em;
  cursor: pointer;
  margin-top: 30px;
}

#tutorial h2,
li {
  font-weight: 10000;
  margin-bottom: 20px;
}

#tutorial h2 {
  font-size: 4vmax;
}

#tutorial li {
  font-size: 3vmax;
  display: grid;
  flex-direction: column;
}

.org a:hover {
  color: color-mix(in srgb, rgb(255, 255, 255) 60%, var(--cell-bg) 40%);
}
.org a:active {
  color: white;
}

body.dark .org a:hover {
  color: var(--cell-bg);
}

.cell:hover,
body.dark .cell:hover {
  background-color: color-mix(
    in srgb,
    rgb(255, 255, 255) 50%,
    var(--cell-bg) 50%
  );
  scale: 1.02;
}

.cell:active {
  transition: none;
  background-color: white;
  scale: 1.05;
}
body.dark .cell:active {
  background: rgba(255, 255, 255, 0.467);
  transition: none;
  background-color: color-mix(
    in srgb,
    rgb(255, 255, 255) 70%,
    var(--cell-bg) 30%
  );
  scale: 1.05;
}