@tailwind base;
@tailwind components;
@tailwind utilities;


@layer base {
  html, body {
    font-family: 'Roboto', 'sans-serif';
  }
}


@layer components {
  .wrapper-website {
    @apply max-w-[2040px] min-w-[300px] mx-auto;
  }

  .container {
    @apply max-w-[1770px] mx-auto w-11/12;
  }

  .visually__hidden {
    @apply border-0 h-[1px] -m-1 overflow-hidden p-0 absolute w-1;
  }

  .navbar {
    @apply w-full z-40 p-8 grid grid-rows-[50px_1fr_90px] fixed top-0 bottom-0 overflow-y-auto -right-full lg:static lg:flex lg:items-center lg:w-auto bg-white lg:bg-transparent text-quattrocom-dark-600 transition-all ease-in;
  }

  .input__hide {
    @apply inline-block border-0 outline-none h-[0.5px] mx-auto overflow-hidden p-0 w-1;
  }

  /** Define los estilos para las listas desordenadas en los artículos **/
  .prose-ul-bullet ul {
      list-style-image: url("../images/blog/bullet.svg");
  }

}


@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/Roboto-Regular.woff2') format('woff2'),
  url('../fonts/Roboto-Regular.ttf') format(truetype);
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/Roboto-Medium.woff2') format('woff2'),
  url('../fonts/Roboto-Medium.ttf') format(truetype);
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/Roboto-Bold.woff2') format('woff2'),
  url('../fonts/Roboto-Bold.ttf') format(truetype);
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('../fonts/Roboto-Black.woff2') format('woff2'),
  url('../fonts/Roboto-Black.ttf') format(truetype);
}