@charset "utf-8";
/* CSS Document */

:root {
  /*...............................font*/
  --fon: "Roboto", serif;
  --fon-lig: 300;
  --fon-reg: 400;
  --fon-med: 500;
  --fon-bol: 600;
  /*...............................colores*/
  --col-lig-hex: #ffffff;
  --col-lig-rgb: 255, 255, 255;
  --col-lig: rgba(var(--col-lig-rgb), 1);
  --col-lig-50: rgba(var(--col-lig-rgb), 0.5);
  --col-lig-20: rgba(var(--col-lig-rgb), 0.2);

  --col-dar-hex: #000000;
  --col-dar-rgb: 0, 0, 0;
  --col-dar: rgba(var(--col-dar-rgb), 1);
  --col-dar-60: rgba(var(--col-dar-rgb), 0.6);
  --col-dar-50: rgba(var(--col-dar-rgb), 0.5);
  --col-dar-40: rgba(var(--col-dar-rgb), 0.4);
  --col-dar-30: rgba(var(--col-dar-rgb), 0.3);
  --col-dar-10: rgba(var(--col-dar-rgb), 0.1);

  --col-pri-hex: #a354e3;
  --col-pri-rgb: 163, 84, 227;
  --col-pri: rgba(var(--col-pri-rgb), 1);
  --col-pri-80: rgba(var(--col-pri-rgb), 0.8);
  --col-pri-60: rgba(var(--col-pri-rgb), 0.6);
  --col-pri-40: rgba(var(--col-pri-rgb), 0.4);
  --col-pri-30: rgba(var(--col-pri-rgb), 0.3);
  --col-pri-60-por: #c898ee;
  --col-pri-50-por: rgb(211, 172, 241);
  --col-pri-30-por: rgb(225, 200, 245);
  --col-pri-10-por: #f6eefc;

  --col-sec-hex: #ff7f00;
  --col-sec-rgb: 255, 127, 0;
  --col-sec: rgba(var(--col-sec-rgb), 1);
  --col-sec-75: rgba(var(--col-sec-rgb), 0.75);
  --col-sec-50: rgba(var(--col-sec-rgb), 0.5);
  --col-sec-30: rgba(var(--col-sec-rgb), 0.3);
  --col-sec-10: rgba(var(--col-sec-rgb), 0.1);
  --col-sec-05: rgba(var(--col-sec-rgb), 0.05);
  --col-sec-60-por: #ffbe7c;
  --col-sec-25-por: #f8dfc5;

  --deg: linear-gradient(180deg, var(--col-sec-30) 0%, var(--col-pri) 60%);
  --deg-pri: linear-gradient(180deg, var(--col-pri-30-por) 0%, var(--col-lig) 100%);
  --deg-pri-dark: linear-gradient(180deg,
      var(--col-pri-60) 0%,
      var(--col-pri) 100%);
  --deg-pri-light: linear-gradient(180deg,
      var(--col-pri-60-por) 0%,
      var(--col-pri) 100%);
  --deg-pri-light-50: linear-gradient(180deg,
      var(--col-pri-30-por) 0%,
      var(--col-pri-50-por) 100%);

  --deg-sec: linear-gradient(180deg,
      var(--col-sec-25-por) 0%,
      var(--col-sec) 100%);
  --deg-sec-hor: linear-gradient(90deg, var(--col-sec-30) 20%, var(--col-sec) 100%);
  --deg-pri-sec: linear-gradient(90deg,
      var(--col-pri-40) 0%,
      var(--col-sec-60-por) 100%);
  --deg-sec-bac: linear-gradient(180deg,
      var(--col-sec-50) 0%,
      var(--col-bac) 80%);
  --deg-sha: linear-gradient(to bottom,
      rgba(0, 0, 0, 0.2),
      rgba(0, 0, 0, 0));
  /* Gradiente para la sombra */

  /*true*/
  --col-tru-hex: #59b200;
  --col-tru-rgb: 89, 178, 0;
  --col-tru: rgba(var(--col-tru-rgb), 1);
  --col-tru-50: rgba(var(--col-tru-rgb), 0.5);
  --col-tru-75: rgba(var(--col-tru-rgb), 0.75);
  /*false*/
  --col-fal-hex: #fd1b50;
  --col-fal-rgb: 253, 27, 80;
  --col-fal: rgba(var(--col-fal-rgb), 1);
  --col-fal-50: rgba(var(--col-fal-rgb), 0.5);
  --col-fal-75: rgba(var(--col-fal-rgb), 0.75);

  --col-bac: var(--col-lig);
  /*background*/
  --col-fon: var(--col-dar);
  /*fonts*/

  /*...............................espacios*/
  --gap: 0.5rem;
  --pad: 0.5rem;

  /*...............................variables adicionales para footer y componentes*/
  --col-dar-80-por: rgba(var(--col-dar-rgb), 0.8);
  --transition: all 0.3s ease;
  --border-radius: 8px;
  --box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

  /*--hei-mod: 1vh;*/
}