@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;0,400;0,500;1,200;1,300;1,400;1,500&display=swap');
@font-face {
  font-family: 'Deeppixel';
  src: url('../fonts/Deep\ pixel.otf') format('truetype');
}
@font-face {
  font-family: 'Cabinetgrotesk';
  src: url('../fonts/CabinetGrotesk-Medium.otf') format('truetype');
}

/* VARIANTES PARA LOS CSS */
:root {
  --font-w-exrtalight: 200;
  --font-w-light: 300;
  --font-w-regular: 400;
  --font-w-medium: 500;
  --font-f-letrabase: 'Poppins', sans-serif;
  --font-f-title: 'Cabinetgrotesk';
  --font-f-letrapixel: 'Deeppixel', sans-serif;
  --font-s-atajos: 1.75rem;
  --font-s-datosfooter: 12px;
  --font-s-body-mobile: 0.75rem;
  --font-s-body: 1.1em;
  --font-s-works: 2.75em;
  --font-s-about: 3em;
  --font-s-subtitle: 7vw;
  --font-s-title-mobile: 14vw;
  --font-s-title: 7vw;
  --font-s-titlepixel: 19vw;

  --padding-mayor: 7rem 11rem;
  --padding-website: 7rem 5rem 0rem 5rem;
  --padding-mobile: 7rem 1.5rem 0rem 1.5rem;
  --padding-grids-home: 0.5em 0;
  --padding-grids-mobile: 2rem 0;


  --col-base-background: #0a0a0a;
  --col-font-background: white;

  --animation-timing: 200ms ease-in-out;
}





/* DESAPARECER EL CURSOR ORIGINAL */
body {
  cursor: none; /* Oculta el cursor predeterminado */
}

a {
  cursor: none; /* Oculta el cursor predeterminado */
}

/* VALORES DEL CURSOR */
.cursor {
  position: fixed;
  width: 20px; /* Ajusta el tamaño según tus necesidades */
  height: 20px; /* Ajusta el tamaño según tus necesidades */
  background-image: url(../img/00-mouse/Cuadrado-mouse.svg);
  background-size: cover;
  pointer-events: none;
  transition: transform 0.3s ease;
  z-index: 1000;
  mix-blend-mode: difference; /* Invertir colores debajo del cursor */
}

/* EL SVG DEL CURSOR ROTA AL ESTAR EN HOVER */
.cursor.hover {
  transform: rotate(45deg);
}






/* ESTABLECEMOS EL ANCHO DE LA BARRA DE SCROLL */
body::-webkit-scrollbar {
  width: 12px;
}

/* DEJAMOS EL COLOR DEL FONDO DE LA SCROLLBAR DE COLOR NEGRO */
body::-webkit-scrollbar-track {
  background: var(--col-base-background);
}

/* EL THUMB DEL SCROLLBAR LO DEJAMOS BLANCO CON ESQUINAS REDONDAS */
body::-webkit-scrollbar-thumb {
  background-color: var(--col-font-background);
  /* border-radius: 6px; */
}






/* PADDING GENÉRICO EN LAS PÁGINAS DE LA WEBSITE (PARA LOS MONITORES DE TORRE MAYORES A UN PORTÁTIL)*/
.padding {
  padding: var(--padding-mayor);
}

/* GARANTIZAMOS CON EL Z INDEX QUE NINGUN ELEMENTO ESTE POR ENCIMA DEL FOOTER */
.header {
  z-index: 10;
}


/* TÍTULO DEL DOCUMENTO */
h1 {
  font-family: var(--font-f-title);
  font-size: 9vw;
  color: var(--col-font-background);
  margin-top: 2rem;
}

h2 {
  font-family: var(--font-f-letrabase);
  font-size: var(--font-s-subtitle);
  color: var(--col-font-background);
  margin-top: 2rem;
}

/* Cambia el color de fondo de la selección */
::selection {
  background-color: white;
  color:black;
}