Search code examples
htmlcssmedia-queries

Disable mediaquerie upscale


/* Begin modo oscuro */

@media (prefers-color-scheme: dark){

  html {
    scroll-behavior: smooth;
  }
  
  body{
      font-family: 'Fredoka', sans-serif;
      background-color: #121212;
      width: 100%;
      height: 100%;
  }

  a {
    color: #dad7d7;
    text-decoration: none;
    transition: 0.3s;
  }

  nav {
    position: fixed;
    top: 0;
    z-index: 1;
    width: 100%;
    background-color: rgb(35, 35, 35, 0.99);
    backdrop-filter: saturate(180%,) blur(20px);
    padding: 0 15px;
  }

  footer {
    background-color: #232323 !important;
    width: 100%;
    bottom: 0 !important;
  }

  .botoncopyright {
    color: #ccd1d1;
    text-decoration: none;
    cursor: default;
  }
  
  .botoncopyright:hover {
    color: #ccd1d1;
    text-decoration: none;
    cursor: default;
  }

/* Begin cookie banner */
  
  .cookie-container {
    position: fixed;
    bottom: -700;
    left: 0;
    right: 0;
    z-index: 1;
    background-color: #232323;
    color: #dad7d7;
    text-align: center;
    padding: 10px 32px;
    transition: 400ms;
  }
  
  .cookie-container.active {
    bottom: 0;
  }
  
  .cookie-container p{
    padding-top: 10px;
  }
  
  .cookie-container a{
    text-decoration: none !important;
    color: #dad7d7;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .cookie-container a:hover{
    text-decoration: none !important;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .cookie-btn {
    background-color: #add8e6;
    border: none;
    margin-top: 20px;
    color: #232323 !important;
    transition: 0.3s;
    cursor: pointer;
    border-radius: 4px 4px 4px 4px;
    margin-bottom: 10px;
  }
  
  .cookie-btn:hover {
    background-color: #87c9de;
    border: none;
    color: #232323 !important;
    transition: 0.3s;
  }

/* End cookie banner */

/* Begin Social media */

  .rsyoutube {
    fill: #8b8d90;
    transition: 0.3s;
  }
  
  .rsyoutube:hover {
    fill: #ff0000;
    transition: 0.3s;
  }
  
  .rstwitter {
    fill: #8b8d90;
    transition: 0.3s;
  }
  
  .rstwitter:hover {
    fill: #00acee;
    transition: 0.3s;
  }
  
  .rsinstagram {
    fill: #8b8d90;
    transition: 0.3s;
  }
  
  .rsinstagram:hover {
    fill: #de1b85;
    transition: 0.3s;
  }
  
  .rstelegram {
    fill: #8b8d90;
    transition: 0.3s;
  }
  
  .rstelegram:hover {
    fill: #229ed9;
    transition: 0.3s;
  }
  
  .rsdiscord {
    fill: #8b8d90;
    transition: 0.3s;
  }
  
  .rsdiscord:hover {
    fill: #5865f2;
    transition: 0.3s;
  }

/* End Social media */

/* Begin Dialogflow */
  
  df-messenger {
    --df-messenger-bot-message: #e1f2f7;
    --df-messenger-button-titlebar-color: #add8e6;
    --df-messenger-button-titlebar-font-color: #4b4b4b;
    --df-messenger-chat-background-color: #232323;
    --df-messenger-font-color: #232323;
    --df-messenger-send-icon: #add8e6;
    --df-messenger-user-message: #add8e6;
  }
  
  df-messenger:hover {
    --df-messenger-button-titlebar-color: #87c9de;
  }

/* End Dialogflow */

/* Begin dispositivos moviles (móviles y tablets) */

  .content {
    max-width: 3200px;
    width: 100%;
    height: 100%;
  }

  .cookie-wrapper {
    padding-top: 120px;
    background: #363636;
  }

  .cookie-wrapper h1 {
    margin: 0 38px 47px 38px;
    font-size: 20px;
    padding-top: 1.8em;
    text-align: center;
    font-weight: 400;
    text-transform: uppercase;
    color: #d2d2d2;
    letter-spacing: 0.2em;
  }

  .cookie-wrapper h2 {
    margin: 0 38px 47px 38px;
    font-size: 18px;
    padding-top: 1.8em;
    text-align: left;
    font-weight: 400;
    text-transform: uppercase;
    color: #d2d2d2;
    letter-spacing: 0.2em;
  }

  .cookie-wrapper p{
    margin-right: 38px;
    margin-left: 38px;
    color: #d2d2d2;
    text-align: justify;
  }

  .cookie-wrapper .actualizacion {
    color: #d2d2d2;
    margin-right: 38px;
    margin-left: 38px;
    text-align: right;
    padding-top: 1.5em;
    padding-bottom: 2em;
  }

  .btn:focus {
    outline: none !important;
    box-shadow: none !important;
  }
  
  .toggle a {
    color: #dad7d7;
  }

  .toggle a:hover {
    color: #ffffff;
  }

  .menu,
  .submenu {
    list-style-type: none;
  }
  
  .logo {
    padding: 7.5px 0 7.5px 0;
  }

  .botonlogo {
    max-width: 56px;
  }
  
  .item{
    padding: 10px;
  }
  
  .item.button {
    padding: 9px 5px;
  }
  
  .item:not(.button) a:hover,
  .item a:hover::after {
    color: #ffffff;
    transition: 0.3s;
  }
  
  .menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    width: 100%;
  }
  
  .menu li a {
    display: block;
    padding: 15px 5px;
  }
  
  .menu li.subitem a {
    padding-right: -15px;
    padding-left: 15px;
    padding-top: 35px;
    width: 100%;
  }
  
  .toggle {
    order: 1;
    font-size: 20px;
  }
  
  .item.button {
    order: 2;
  }
  
  .item {
    order: 3;
    width: 100%;
    text-align: center;
    display: none;
  }
  
  .active .item {
    display: block;
  }
  
  .button.secondary {
    border-bottom: 1px solid #dad7d7;
  }
  
  /* Begin submenus */
  
  .submenu {
    display: none; 
  }
  
  .submenu-active .submenu {
    display: block;
  }

  .has-submenu > a::after {
    font-family: "Font Awesome 5 Free";
    font-size: 16px;
    line-height: 16px;
    content: "\f024";
    color: #dad7d7;
    padding-left: 11px;
  }

  .subitem a {
    padding: 10px 15px;
  }

  .submenu-active {
    border-radius: 0;
    background-color: #363636;
    width: 100%;
    border-radius: 5px 5px 0px 0px;
  }
  
  li.has-submenu a{
    color: #dad7d7 !important;
    transition: 0.3s;
    padding-bottom: 12px;
    cursor: pointer;
  }
  
  li.has-submenu a:hover{
    color: #ffffff !important;
    transition: 0.3s;
    cursor: pointer;
  }
  
  li.subitem a {
    padding-left: 0%;
    padding-right: 33px !important;
    width: 100%;
  }

/* End submenús */
  
  @media all and (min-width: 700px) {
  
    .menu {
      justify-content: center;
      width: 100%;
    }
  
    .logo {
      flex: 1;
    }
  
    .item.button {
      width: auto;
      order: 1;
      display: block;
    }
  
    .toggle {
      flex: 1;
      text-align: right;
      order: 2;
    }
  
    .menu li.button a {
      padding: 10px 15px;
      margin: 5px 0;
    }
  
    .button a {
      background-color: #add8e6;
      color: #000000;
      border: 1.5px solid #add8e6;
      border-radius: 4px 4px 4px 4px;
      transition: 0.8s;
    }

    .button.secondary {
      border: 0;
    }
  
    .button.secondary a {
      background-color: #add8e6;
      border: 1.5px solid #add8e6;
      transition: 0.8s;
    }
  
    .button a:hover {
      background-color: #87c9de;
      text-decoration: none;
      color: #474747;
      transition: 0.8s;
    }
  
    .button:not(.secondary) a:hover {
      border: 1.5px solid #87c9de;
      transition: 0.8s;
    }
  
  }

/* End dispositivos moviles (moviles y tablets) */
  
/* Begin dispositivos escritorio */

  /* Begin min Hres 960px */
  
  @media all and (min-width:960px) {

    nav {
      position: fixed;
      top: 0;
      z-index: 1;
      width: 100%;
      background-color: rgb(35, 35, 35, 0.99);
      backdrop-filter: saturate(180%,) blur(20px);
      padding: 0 15px;
    }

    footer {
      width: 100%;
      height: 160px;
      background-color: #232323 !important;
      bottom: 0 !important;
    }

    .content {
      width: 100%;
      height: 100vh;
      margin-top: 140px;
      margin-bottom: 300px;
    }
  
    .cookie-wrapper {
      max-width: 3300px;
      width: 96%;
      margin-left: auto;
      margin-right: auto;
      background: 
      linear-gradient(225deg, transparent 45px, #292929 0) top left,
      linear-gradient(-315deg, transparent 45px, #292929 0) bottom left;
      background-size: 100% 50%;
      background-repeat: no-repeat;
    }
  
    .cookie-wrapper h1 {
      margin: 0 38px 47px 38px;
      font-size: 20px;
      text-align: center;
      font-weight: 400;
      text-transform: uppercase;
      color: #d2d2d2;
      letter-spacing: 0.2em;
    }
  
    .cookie-wrapper h2 {
      margin: 0 38px 47px 38px;
      font-size: 18px;
      text-align: left;
      font-weight: 400;
      text-transform: uppercase;
      color: #d2d2d2;
      letter-spacing: 0.2em;
    }
  
    .cookie-wrapper p{
      margin-right: 38px;
      margin-left: 38px;
      color: #d2d2d2;
      line-height: 25px;
      text-align: justify;
    }
  
    .cookie-wrapper .actualizacion {
      color: #d2d2d2;
      margin-right: 38px;
      margin-left: 38px;
      text-align: right;
      padding-top: 1.5em;
      padding-bottom: 2em;
    }
  
    .item {
      order: 1;
      position: relative;
      display: block;
      width: auto;
    }
  
    .button {
      order: 2;
    }
  
    .submenu-active .submenu {
      display: block;
      position: absolute;
      left: 0;
      top: 68px;
      background-color: #363636;
      border-radius: 0px 0px 5px 5px;
    }
  
    .toggle {
      display: none;
    }
  
  .boton {
    background-color: #add8e6;
    border: none;
    color: #585858 !important;
  }
  
  .boton:hover {
    background-color: #87c9de;
    border: none;
    color: #585858 !important;
  }

}

  /* End min Hres 960px */

}

/* End modo oscuro */
<!DOCTYPE html>

<html lang="es">

  <head>
   
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width-device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="img/favicon.ico" /><title>Cookies - Mixi</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
    <script src="https://www.gstatic.com/dialogflow-console/fast/messenger/bootstrap.js?v=1"></script>
    <df-messenger chat-title="Mixi" agent-id="41fe496c-6e3a-4316-aa5a-05dae8cd911d" language-code="es"></df-messenger>
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-229317979-1"></script>
    <script>window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-229317979-1');</script>
    <script src="https://kit.fontawesome.com/d48f664aec.js" crossorigin="anonymous"></script>
    <script src="js/main.js"></script>
    <link rel="preload" href="css/cookies.css" as="style">
    <link rel="stylesheet" type="text/css" href="css/cookies.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@300&display=swap" rel="stylesheet">

  </head>

  <body>
      
    <nav>

      <ul class="menu">

        <li class="logo"><a class="botonlogo" href="https://www.mixi.es"><svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"width="50px" height="50px" viewBox="0 0 99 99" enable-background="new 0 0 99 99" xml:space="preserve"><path fill="#ACD7E4" d="M85.95,98.88H12.37c-6.78,0-12.28-5.5-12.28-12.28V13.02c0-6.78,5.5-12.28,12.28-12.28h73.58c6.78,0,12.28,5.5,12.28,12.28V86.6C98.23,93.38,92.73,98.88,85.95,98.88z"/><g><g><g><path fill="#1D1D1B" d="M7.96,66.3c-0.68,0-1.17-0.11-1.49-0.32s-0.53-0.5-0.64-0.85c-0.11-0.35-0.16-0.78-0.16-1.28v-21.1c0-0.46,0.05-0.86,0.16-1.2c0.11-0.34,0.33-0.59,0.67-0.77s0.84-0.27,1.52-0.27c0.78,0,1.34,0.15,1.68,0.45c0.34,0.3,0.51,0.83,0.51,1.57l-0.21,2.29c0.25-0.53,0.62-1.07,1.12-1.6c0.5-0.53,1.09-1.01,1.79-1.44c0.69-0.43,1.43-0.76,2.21-1.01c0.78-0.25,1.58-0.37,2.4-0.37c1.24,0,2.35,0.22,3.33,0.67c0.98,0.44,1.86,1.07,2.64,1.89c0.78,0.82,1.44,1.83,1.97,3.04c0.71-1.17,1.46-2.17,2.26-3.01c0.8-0.83,1.71-1.47,2.72-1.92c1.01-0.44,2.16-0.67,3.44-0.67c2.06,0,3.77,0.51,5.14,1.52c1.37,1.01,2.4,2.43,3.09,4.26c0.69,1.83,1.04,4.02,1.04,6.58v11.13c0,0.5-0.05,0.92-0.16,1.28c-0.11,0.36-0.32,0.63-0.64,0.83s-0.83,0.29-1.54,0.29c-0.67,0-1.19-0.11-1.54-0.32c-0.36-0.21-0.58-0.5-0.67-0.85c-0.09-0.35-0.13-0.78-0.13-1.28V52.72c0-1.56-0.2-2.93-0.59-4.1c-0.39-1.17-0.96-2.08-1.71-2.72c-0.75-0.64-1.72-0.96-2.93-0.96c-1.28,0-2.41,0.32-3.38,0.96c-0.98,0.64-1.73,1.54-2.26,2.69s-0.8,2.53-0.8,4.13v11.24c0,0.53-0.11,1-0.32,1.39c-0.21,0.39-0.53,0.67-0.96,0.83c-0.43,0.16-0.96,0.19-1.6,0.08c-0.53-0.04-0.94-0.17-1.23-0.4s-0.46-0.51-0.53-0.85c-0.07-0.34-0.11-0.72-0.11-1.15V52.72c0-1.56-0.19-2.93-0.56-4.1s-0.94-2.08-1.71-2.72c-0.76-0.64-1.75-0.96-2.96-0.96c-1.28,0-2.41,0.33-3.38,0.99c-0.98,0.66-1.73,1.57-2.26,2.74c-0.53,1.17-0.8,2.52-0.8,4.05v11.19c0,0.5-0.05,0.92-0.16,1.28c-0.11,0.36-0.33,0.63-0.67,0.83C9.2,66.2,8.67,66.3,7.96,66.3z"/><path fill="#1D1D1B" d="M52.23,34.12c-0.78,0-1.37-0.12-1.76-0.35c-0.39-0.23-0.65-0.56-0.77-0.99c-0.12-0.43-0.19-0.92-0.19-1.49c0-0.57,0.06-1.06,0.19-1.46c0.12-0.41,0.39-0.71,0.8-0.91c0.41-0.2,1-0.29,1.78-0.29c0.75,0,1.31,0.11,1.71,0.32s0.65,0.53,0.77,0.96c0.12,0.43,0.19,0.94,0.19,1.54c0,0.53-0.06,1-0.19,1.41c-0.12,0.41-0.38,0.72-0.77,0.93C53.6,34.02,53.01,34.12,52.23,34.12z M52.23,66.3c-0.67,0-1.19-0.1-1.54-0.29c-0.36-0.2-0.58-0.47-0.67-0.83c-0.09-0.35-0.13-0.78-0.13-1.28V42.86c0-0.46,0.05-0.88,0.16-1.25s0.33-0.65,0.67-0.83c0.34-0.18,0.86-0.27,1.57-0.27c0.67,0,1.17,0.1,1.49,0.29c0.32,0.2,0.53,0.48,0.64,0.85c0.11,0.37,0.16,0.81,0.16,1.3v20.99c0,0.5-0.05,0.92-0.16,1.28c-0.11,0.36-0.33,0.62-0.67,0.8C53.42,66.21,52.91,66.3,52.23,66.3z"/></g></g><g><path fill="#1D1D1B" d="M65.03,57.61l-4.59,5c-0.52,0.57-0.88,1.05-1.08,1.43c-0.2,0.39-0.2,0.75,0,1.09c0.2,0.34,0.56,0.7,1.08,1.09c0.52,0.35,0.97,0.59,1.35,0.72c0.38,0.12,0.77,0.08,1.17-0.13c0.4-0.21,0.86-0.58,1.38-1.12l7.42-8.08H65.03z"/><path fill="#1D1D1B" d="M84.36,64.04c-0.18-0.39-0.55-0.87-1.11-1.43l-8.04-8.76l8.1-8.83c0.56-0.57,0.92-1.05,1.08-1.43c0.16-0.39,0.14-0.75-0.06-1.09c-0.2-0.34-0.58-0.72-1.14-1.14c-0.76-0.57-1.38-0.81-1.86-0.72c-0.48,0.09-1.12,0.52-1.92,1.3l-7.56,8.24l-7.56-8.24c-0.48-0.53-0.9-0.9-1.26-1.12c-0.36-0.21-0.73-0.27-1.11-0.16c-0.38,0.11-0.83,0.34-1.35,0.69c-0.6,0.39-1,0.75-1.2,1.09c-0.2,0.34-0.21,0.71-0.03,1.12c0.18,0.41,0.53,0.89,1.05,1.46l8.1,8.83l-0.01,0.01l3.37,3.67l0.01-0.01l7.5,8.18c0.56,0.53,1.04,0.9,1.44,1.12c0.4,0.21,0.79,0.26,1.17,0.13c0.38-0.12,0.81-0.36,1.29-0.72c0.56-0.39,0.93-0.75,1.11-1.09C84.54,64.79,84.54,64.43,84.36,64.04z"/></g><g><g><path fill="#1D1D1B" d="M90.03,34.55c-0.78,0-1.37-0.11-1.76-0.35c-0.39-0.23-0.65-0.56-0.77-0.99c-0.12-0.43-0.19-0.92-0.19-1.49c0-0.57,0.06-1.06,0.19-1.47c0.12-0.41,0.39-0.71,0.8-0.91c0.41-0.19,1-0.29,1.79-0.29c0.75,0,1.31,0.11,1.7,0.32c0.39,0.21,0.65,0.53,0.77,0.96s0.19,0.94,0.19,1.54c0,0.53-0.06,1-0.19,1.41c-0.12,0.41-0.38,0.72-0.77,0.93C91.4,34.44,90.81,34.55,90.03,34.55z M90.03,66.72c-0.67,0-1.19-0.1-1.54-0.29c-0.36-0.2-0.58-0.47-0.67-0.83c-0.09-0.35-0.13-0.78-0.13-1.28V43.28c0-0.46,0.05-0.88,0.16-1.25c0.11-0.37,0.33-0.65,0.67-0.83s0.86-0.27,1.57-0.27c0.67,0,1.17,0.1,1.49,0.29c0.32,0.2,0.53,0.48,0.64,0.85s0.16,0.81,0.16,1.31v20.99c0,0.5-0.05,0.92-0.16,1.28c-0.11,0.36-0.33,0.62-0.67,0.8C91.21,66.63,90.71,66.72,90.03,66.72z"/></g></g></g></svg></a></li>

        <li class="item"><a href="tienda">Tienda</a></li>

        <li class="item"><a href="calculadora">Calculadora</a></li>
        
        <li class="item"><a href="noticias">Noticias</a></li>

        <li class="item"><a href="contacto">Contacto</a></li>

        <li class="item has-submenu">

          <a tabindex="0">Idioma: ES</a>

          <ul class="submenu">

            <li class="subitem"><a href="en/cookies">English</a></li>

          </ul>

        </li>

        <li class="toggle"><a href="#"><i class="fas fa-bars"></i></a></li>

        <script src="js/toggle.js"></script>

      </ul>

    </nav>

    <div class="content">

      <div class="cookie-wrapper">

        <br>
      
        <h1>Política de cookies y privacidad - Mixi</h1>

        <h2>¿Qué son las cookies?</h2>

          <p>En primer lugar, las cookies son pequeñas cantidades de información almacenadas en el navegador web para cada usuario que utilice una página web que cuente con cookies, haciendo de los sitios web elementos fáciles de utilizar y que en ningún momento dañará el dispositivo donde se guarden.</p>

          <p>La información guardada como cookies podrán ser elementos como la hora y tiempo de visita a la página, pero nunca permitiendo por cuestiones de seguridad la transferencia física de esta información a otro dispositivo que no sea en el que aceptaron originalmente dichas cookies.</p>

          <p>Las cookies que permiten identificar a una persona, se consideran datos personales de la misma, por lo que deberán ser aceptadas por el usuario para que el sitio web pueda tratarlas.</p>

        <h2>Cookies de terceros</h2>

          <p>Las cookies de terceros, son utilizadas y gestionadas por entidades externas que proporcionan a la plataforma servicios determinados para mejorar el sitio web y la experiencia final del usuario que lo utilice. Los objetivos de este tipo de cookies son la obtención de estadísticas de accesos y comprobar la interacción del usuario con la web.</p>

          <p>La información obtenida, se refiere al número de páginas visitadas, el idioma, el lugar a la que pertenece la dirección IP desde la que visita el usuario el sitio, el número de usuarios que acceden y con qué frecuencia lo hacen, el tiempo de visita, navegador utilizado y el tipo de dispositivo desde el que realizan la visita. Esta información es posteriormente enviada exclusivamente a la plataforma para contrastarla y poder así mejorar la experiencia futura del usuario incorporando o retirando características que harán de esta página un sitio web mejor y adaptado para la mayoría de usuarios una vez adaptadas estas métricas.</p>

        <h2>Cookies orientadas a redes sociales</h2>

          <p>A lo largo de la página se incorporan accesos a redes sociales. Por esta razón, las cookies de redes sociales pueden almacenarse en el navegador en conjunto con las cookies de esta web (una vez aceptadas ambas ellas). Cada red social dispone de sus propias políticas de protección de datos y cookies, siendo ellos mismos responsables de sus propias prácticas de privacidad y cookies. El usuario debe referirse a las mismas para informarse acerca de dichas cookies y, en su caso, del tratamiento de sus datos personales que conllevan.</p>

        <h2>Deshabilitar, rechazar y eliminar cookies almacenadas</h2>

          <p>El usuario que use esta plataforma tiene siempre la opción de deshabilitar y eliminar las cookies instaladas en su dispositivo mediante la configuración de su navegador (con la pérdida de algunos servicios al hacerlo). En este sentido, los procedimientos para eliminar las cookies pueden diferir de un navegador a otro, por lo que el usuario debe acudir a las instrucciones facilitadas por el propio navegador que esté utilizando para esta tarea.</p>

          <p class="actualizacion">Políticas creadas y actualizadas por MIXI - Julio de 2022.</p>

          <br>

      </div>

    </div>

    <div class="cookie-container">
      
      <p>Este sitio usa cookies para el funcionamiento de servicios proporcionados y analiza el tráfico de la web para mejorar.</p></span><a class="d-flex align-items-center" href="https://www.mixi.es/cookies">Más información<i class="fa fa-angle-right ml-2"></i></a>
      
      <button class="cookie-btn">Aceptar</button>
      
    </div>

    <script src="js/utilidades.js"></script>

    <footer class="text-center text-white">

      <div class="container pt-4">

        <section class="mb-4">

          <a class="btn btn-link btn-floating btn-lg text-dark m-1" href="https://www.youtube.com/channel/UCsJSqbYBZ48kx71kCdR1lfQ" target="_blank" role="button" data-mdb-ripple-color="dark"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="rsyoutube" viewBox="0 0 24 24"><path d="M19.615 3.184c-3.604-.246-11.631-.245-15.23 0-3.897.266-4.356 2.62-4.385 8.816.029 6.185.484 8.549 4.385 8.816 3.6.245 11.626.246 15.23 0 3.897-.266 4.356-2.62 4.385-8.816-.029-6.185-.484-8.549-4.385-8.816zm-10.615 12.816v-8l8 3.993-8 4.007z"/></svg></a>

          <a class="btn btn-link btn-floating btn-lg text-dark m-1" href="https://twitter.com/mixi_esp" target="_blank" role="button" data-mdb-ripple-color="dark"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="rstwitter bi bi-twitter" viewBox="0 0 16 16"><path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z"/></svg></a>

          <a class="btn btn-link btn-floating btn-lg text-dark m-1"href="https://www.instagram.com/mixi_esp/" target="_blank" role="button"data-mdb-ripple-color="dark"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="rsinstagram bi bi-instagram" viewBox="0 0 16 16"><path d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.917 3.917 0 0 0-1.417.923A3.927 3.927 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.916 3.916 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.926 3.926 0 0 0-.923-1.417A3.911 3.911 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0h.003zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599.28.28.453.546.598.92.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.47 2.47 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.478 2.478 0 0 1-.92-.598 2.48 2.48 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233 0-2.136.008-2.388.046-3.231.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92.28-.28.546-.453.92-.598.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045v.002zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92zm-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217zm0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334z"/></svg></a>

          <a class="btn btn-link btn-floating btn-lg text-dark m-1" href="https://t.me/mixiesp" target="_blank" role="button" data-mdb-ripple-color="dark"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="rstelegram bi bi-telegram" viewBox="0 0 16 16"><path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8.287 5.906c-.778.324-2.334.994-4.666 2.01-.378.15-.577.298-.595.442-.03.243.275.339.69.47l.175.055c.408.133.958.288 1.243.294.26.006.549-.1.868-.32 2.179-1.471 3.304-2.214 3.374-2.23.05-.012.12-.026.166.016.047.041.042.12.037.141-.03.129-1.227 1.241-1.846 1.817-.193.18-.33.307-.358.336a8.154 8.154 0 0 1-.188.186c-.38.366-.664.64.015 1.088.327.216.589.393.85.571.284.194.568.387.936.629.093.06.183.125.27.187.331.236.63.448.997.414.214-.02.435-.22.547-.82.265-1.417.786-4.486.906-5.751a1.426 1.426 0 0 0-.013-.315.337.337 0 0 0-.114-.217.526.526 0 0 0-.31-.093c-.3.005-.763.166-2.984 1.09z"/></svg></a>

          <a class="btn btn-link btn-floating btn-lg text-dark m-1" href="https://discord.gg/UZc4JHhvZu" target="_blank" role="button" data-mdb-ripple-color="dark" ><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="rsdiscord bi bi-discord" viewBox="0 0 16 16"><path d="M13.545 2.907a13.227 13.227 0 0 0-3.257-1.011.05.05 0 0 0-.052.025c-.141.25-.297.577-.406.833a12.19 12.19 0 0 0-3.658 0 8.258 8.258 0 0 0-.412-.833.051.051 0 0 0-.052-.025c-1.125.194-2.22.534-3.257 1.011a.041.041 0 0 0-.021.018C.356 6.024-.213 9.047.066 12.032c.001.014.01.028.021.037a13.276 13.276 0 0 0 3.995 2.02.05.05 0 0 0 .056-.019c.308-.42.582-.863.818-1.329a.05.05 0 0 0-.01-.059.051.051 0 0 0-.018-.011 8.875 8.875 0 0 1-1.248-.595.05.05 0 0 1-.02-.066.051.051 0 0 1 .015-.019c.084-.063.168-.129.248-.195a.05.05 0 0 1 .051-.007c2.619 1.196 5.454 1.196 8.041 0a.052.052 0 0 1 .053.007c.08.066.164.132.248.195a.051.051 0 0 1-.004.085 8.254 8.254 0 0 1-1.249.594.05.05 0 0 0-.03.03.052.052 0 0 0 .003.041c.24.465.515.909.817 1.329a.05.05 0 0 0 .056.019 13.235 13.235 0 0 0 4.001-2.02.049.049 0 0 0 .021-.037c.334-3.451-.559-6.449-2.366-9.106a.034.034 0 0 0-.02-.019Zm-8.198 7.307c-.789 0-1.438-.724-1.438-1.612 0-.889.637-1.613 1.438-1.613.807 0 1.45.73 1.438 1.613 0 .888-.637 1.612-1.438 1.612Zm5.316 0c-.788 0-1.438-.724-1.438-1.612 0-.889.637-1.613 1.438-1.613.807 0 1.451.73 1.438 1.613 0 .888-.631 1.612-1.438 1.612Z"/></svg></a>
            
        </section>

      </div>

      <div class="text-center text-dark p-3" style="background-color: rgba(0, 0, 0, 0.2);"> 
        <a class="botoncopyright">Mixi &copy; | 2022</a>
      </div>

    </footer>
      
  </body>

</html> 

I´m developing a website using mediaqueries for making it responsive. This way I can apply a minimum width of x pixels and apply styles for this specific resolution. I want it to be compatible with 1080, 1440 and 2160p (and all of resolutions in between when splitting the screen into half, third or quarter) but when I load the webpage using a 1080p resolution, the result varies depending on the scale being used in Windows, being different in 1080p at 100% than 1080p at 125% scales. Is there a way of locking the aspect of the page to one certain scale in order to show the same results and not depending on the clients scale?

Thanks in advance.


Solution

  • /* Begin modo oscuro */
    
    html {
      scroll-behavior: smooth;
    }
    
    body {
      font-family: 'Fredoka', sans-serif;
    }
    
    main {
      min-height: 100vh;
      display: grid;
      grid-template-rows: auto 1fr auto;
      gap: 2vw;
    }
    
    a {
      color: #232323;
      text-decoration: none;
      transition: 0.3s;
    }
    
    nav {
      z-index: 1;
      background-color: rgb(235, 235, 235, 0.99);
      backdrop-filter: saturate(180%) blur(20px);
      padding: 0 15px;
      position: sticky;
      top: 0;
    }
    
    .botoncopyright,
    .botoncopyright:hover {
      color: #515252;
      text-decoration: none;
      cursor: default;
    }
    
    footer {
      background-color: #dad7d7;
    }
    
    
    /* Begin cookie banner */
    
    .cookie-container {
      position: fixed;
      top: auto;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 2;
      background-color: #dad7d7;
      color: #232323;
      text-align: center;
      padding: 10px 32px;
      transform: translateY(100%);
      transition: transform 400ms ease-in-out;
    }
    
    .cookie-container.active {
      transform: translateY(0);
    }
    
    .cookie-container p {
      padding-top: 10px;
    }
    
    .cookie-container a {
      text-decoration: none !important;
      color: #232323;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    
    .cookie-container a:hover {
      color: #515252;
    }
    
    .cookie-btn {
      background-color: #23b8e9;
      border: none;
      margin-top: 20px;
      color: #232323 !important;
      transition: 0.3s;
      cursor: pointer;
      border-radius: 4px 4px 4px 4px;
      margin-bottom: 10px;
    }
    
    .cookie-btn:hover {
      background-color: #098fb8;
    }
    
    
    /* End cookie banner */
    
    
    /* Begin Social media */
    
    footer .btn svg {
      transition: 0.3s;
    }
    
    .rsyoutube {
      fill: #8b8d90;
    }
    
    .rsyoutube:hover {
      fill: #ff0000;
    }
    
    .rstwitter {
      fill: #8b8d90;
    }
    
    .rstwitter:hover {
      fill: #00acee;
    }
    
    .rsinstagram {
      fill: #8b8d90;
    }
    
    .rsinstagram:hover {
      fill: #de1b85;
    }
    
    .rstelegram {
      fill: #8b8d90;
    }
    
    .rstelegram:hover {
      fill: #229ed9;
    }
    
    .rsdiscord {
      fill: #8b8d90;
    }
    
    .rsdiscord:hover {
      fill: #5865f2;
    }
    
    
    /* End Social media */
    
    
    /* Begin Dialogflow */
    
    df-messenger {
      --df-messenger-bot-message: #e1f2f7;
      --df-messenger-button-titlebar-color: #add8e6;
      --df-messenger-button-titlebar-font-color: #4b4b4b;
      --df-messenger-chat-background-color: #232323;
      --df-messenger-font-color: #232323;
      --df-messenger-send-icon: #add8e6;
      --df-messenger-user-message: #add8e6;
    }
    
    df-messenger:hover {
      --df-messenger-button-titlebar-color: #87c9de;
    }
    
    
    /* End Dialogflow */
    
    
    /* Begin dispositivos moviles (móviles y tablets) */
    
    .content {
      margin: auto;
      max-width: 3200px;
      width: 96vw;
    }
    
    .cookie-wrapper {
      background: #363636;
      padding: 38px;
    }
    
    .cookie-wrapper h1,
    .cookie-wrapper h2 {
      margin: 1.8em 0 47px 0;
      font-weight: 400;
      text-transform: uppercase;
      color: #d2d2d2;
      letter-spacing: 0.2em;
    }
    
    .cookie-wrapper h1 {
      font-size: 20px;
      text-align: center;
    }
    
    .cookie-wrapper h2 {
      font-size: 18px;
      text-align: left;
    }
    
    .cookie-wrapper p {
      color: #d2d2d2;
      text-align: justify;
    }
    
    .cookie-wrapper .actualizacion {
      color: #d2d2d2;
      text-align: right;
      margin: 1.5em 0 2em;
    }
    
    .btn:focus {
      outline: none !important;
      box-shadow: none !important;
    }
    
    .toggle a {
      color: #dad7d7;
    }
    
    .toggle a:hover {
      color: #ffffff;
    }
    
    .menu,
    .submenu {
      list-style-type: none;
    }
    
    .logo {
      padding: 7.5px 0 7.5px 0;
    }
    
    .botonlogo {
      max-width: 56px;
    }
    
    .item {
      padding: 10px;
    }
    
    .item.button {
      padding: 9px 5px;
    }
    
    .item:not(.button) a:hover,
    .item a:hover::after {
      color: #ffffff;
      transition: 0.3s;
    }
    
    .menu {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
      width: 100%;
    }
    
    .menu li a {
      display: block;
      padding: 15px 5px;
    }
    
    .menu li.subitem a {
      padding-right: -15px;
      padding-left: 15px;
      padding-top: 35px;
      width: 100%;
    }
    
    .toggle {
      order: 1;
      font-size: 20px;
    }
    
    .item.button {
      order: 2;
    }
    
    .item {
      order: 3;
      width: 100%;
      text-align: center;
      display: none;
    }
    
    .active .item {
      display: block;
    }
    
    .button.secondary {
      border-bottom: 1px solid #dad7d7;
    }
    
    
    /* Begin submenus */
    
    .submenu {
      display: none;
    }
    
    .submenu-active .submenu {
      display: block;
    }
    
    .has-submenu>a::after {
      font-family: 'Font Awesome 5 Free';
      font-size: 16px;
      line-height: 16px;
      content: '\f024';
      color: #dad7d7;
      padding-left: 11px;
    }
    
    .subitem a {
      padding: 10px 15px;
    }
    
    .submenu-active {
      border-radius: 0;
      background-color: #363636;
      width: 100%;
      border-radius: 5px 5px 0px 0px;
    }
    
    li.has-submenu a {
      color: #dad7d7 !important;
      transition: 0.3s;
      padding-bottom: 12px;
      cursor: pointer;
    }
    
    li.has-submenu a:hover {
      color: #ffffff !important;
      transition: 0.3s;
      cursor: pointer;
    }
    
    li.subitem a {
      padding-left: 0%;
      padding-right: 33px !important;
      width: 100%;
    }
    
    
    /* End submenús */
    
    @media all and (min-width: 700px) {
      .menu {
        justify-content: center;
        width: 100%;
      }
      .logo {
        flex: 1;
      }
      .item.button {
        width: auto;
        order: 1;
        display: block;
      }
      .toggle {
        flex: 1;
        text-align: right;
        order: 2;
      }
      .menu li.button a {
        padding: 10px 15px;
        margin: 5px 0;
      }
      .button a {
        background-color: #add8e6;
        color: #000000;
        border: 1.5px solid #add8e6;
        border-radius: 4px 4px 4px 4px;
        transition: 0.8s;
      }
      .button.secondary {
        border: 0;
      }
      .button.secondary a {
        background-color: #add8e6;
        border: 1.5px solid #add8e6;
        transition: 0.8s;
      }
      .button a:hover {
        background-color: #87c9de;
        text-decoration: none;
        color: #474747;
        transition: 0.8s;
      }
      .button:not(.secondary) a:hover {
        border: 1.5px solid #87c9de;
        transition: 0.8s;
      }
    }
    
    
    /* End dispositivos moviles (moviles y tablets) */
    
    
    /* Begin dispositivos escritorio */
    
    
    /* Begin min Hres 960px */
    
    @media all and (min-width: 960px) {
      .cookie-wrapper {
        background: linear-gradient(225deg, transparent 45px, #292929 0) top left, linear-gradient(-315deg, transparent 45px, #292929 0) bottom left;
        background-size: 100% 50%;
        background-repeat: no-repeat;
      }
      .item {
        order: 1;
        position: relative;
        display: block;
        width: auto;
      }
      .button {
        order: 2;
      }
      .submenu-active .submenu {
        display: block;
        position: absolute;
        left: 0;
        top: 68px;
        background-color: #363636;
        border-radius: 0px 0px 5px 5px;
      }
      .toggle {
        display: none;
      }
      .boton {
        background-color: #add8e6;
        border: none;
        color: #585858 !important;
      }
      .boton:hover {
        background-color: #87c9de;
        border: none;
        color: #585858 !important;
      }
    }
    
    
    /* End min Hres 960px */
    
    
    /* OVERRIDE COLOURS FOR DARK MODE IN HERE ONLY */
    
    @media (prefers-color-scheme: dark) {
      body {
        background-color: #121212 !important;
      }
      a {
        color: #dad7d7;
      }
      nav {
        background-color: rgb(35, 35, 35, 0.99);
      }
      .botoncopyright,
      .botoncopyright:hover {
        color: #ccd1d1;
      }
      footer {
        background-color: #232323;
      }
      /* Begin cookie banner */
      .cookie-container {
        background-color: #232323;
        color: #dad7d7;
      }
      .cookie-container a {
        color: #dad7d7;
      }
      .cookie-container a:hover {
        color: #ffffff;
      }
      .cookie-btn {
        background-color: #add8e6;
        color: #232323 !important;
      }
      .cookie-btn:hover {
        background-color: #87c9de;
      }
      /* End cookie banner */
    }
    
    
    /* End modo oscuro */
    <!DOCTYPE html>
    <html lang="es">
    
    <head>
      <meta charset="UTF-8" />
      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      <meta name="viewport" content="width-device-width, initial-scale=1" />
    
      <link rel="preload" href="css/cookies.css" as="style" />
      <link rel="preconnect" href="https://fonts.googleapis.com" />
      <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    
      <link rel="icon" type="image/x-icon" href="img/favicon.ico" />
    
      <title>Cookies - Mixi</title>
    
      <link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@300&display=swap" rel="stylesheet" />
      <script src="https://kit.fontawesome.com/d48f664aec.js" crossorigin="anonymous"></script>
    
      <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />
    
      <link rel="stylesheet" type="text/css" href="css/cookies.css" />
    </head>
    
    <body>
      <main>
        <nav>
          <ul class="menu">
            <li class="logo">
              <a class="botonlogo" href="https://www.mixi.es"><svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="50px" height="50px" viewBox="0 0 99 99" enable-background="new 0 0 99 99" xml:space="preserve">
                    <path fill="#ACD7E4" d="M85.95,98.88H12.37c-6.78,0-12.28-5.5-12.28-12.28V13.02c0-6.78,5.5-12.28,12.28-12.28h73.58c6.78,0,12.28,5.5,12.28,12.28V86.6C98.23,93.38,92.73,98.88,85.95,98.88z" />
                    <g>
                      <g>
                        <g>
                          <path fill="#1D1D1B" d="M7.96,66.3c-0.68,0-1.17-0.11-1.49-0.32s-0.53-0.5-0.64-0.85c-0.11-0.35-0.16-0.78-0.16-1.28v-21.1c0-0.46,0.05-0.86,0.16-1.2c0.11-0.34,0.33-0.59,0.67-0.77s0.84-0.27,1.52-0.27c0.78,0,1.34,0.15,1.68,0.45c0.34,0.3,0.51,0.83,0.51,1.57l-0.21,2.29c0.25-0.53,0.62-1.07,1.12-1.6c0.5-0.53,1.09-1.01,1.79-1.44c0.69-0.43,1.43-0.76,2.21-1.01c0.78-0.25,1.58-0.37,2.4-0.37c1.24,0,2.35,0.22,3.33,0.67c0.98,0.44,1.86,1.07,2.64,1.89c0.78,0.82,1.44,1.83,1.97,3.04c0.71-1.17,1.46-2.17,2.26-3.01c0.8-0.83,1.71-1.47,2.72-1.92c1.01-0.44,2.16-0.67,3.44-0.67c2.06,0,3.77,0.51,5.14,1.52c1.37,1.01,2.4,2.43,3.09,4.26c0.69,1.83,1.04,4.02,1.04,6.58v11.13c0,0.5-0.05,0.92-0.16,1.28c-0.11,0.36-0.32,0.63-0.64,0.83s-0.83,0.29-1.54,0.29c-0.67,0-1.19-0.11-1.54-0.32c-0.36-0.21-0.58-0.5-0.67-0.85c-0.09-0.35-0.13-0.78-0.13-1.28V52.72c0-1.56-0.2-2.93-0.59-4.1c-0.39-1.17-0.96-2.08-1.71-2.72c-0.75-0.64-1.72-0.96-2.93-0.96c-1.28,0-2.41,0.32-3.38,0.96c-0.98,0.64-1.73,1.54-2.26,2.69s-0.8,2.53-0.8,4.13v11.24c0,0.53-0.11,1-0.32,1.39c-0.21,0.39-0.53,0.67-0.96,0.83c-0.43,0.16-0.96,0.19-1.6,0.08c-0.53-0.04-0.94-0.17-1.23-0.4s-0.46-0.51-0.53-0.85c-0.07-0.34-0.11-0.72-0.11-1.15V52.72c0-1.56-0.19-2.93-0.56-4.1s-0.94-2.08-1.71-2.72c-0.76-0.64-1.75-0.96-2.96-0.96c-1.28,0-2.41,0.33-3.38,0.99c-0.98,0.66-1.73,1.57-2.26,2.74c-0.53,1.17-0.8,2.52-0.8,4.05v11.19c0,0.5-0.05,0.92-0.16,1.28c-0.11,0.36-0.33,0.63-0.67,0.83C9.2,66.2,8.67,66.3,7.96,66.3z" />
                          <path fill="#1D1D1B" d="M52.23,34.12c-0.78,0-1.37-0.12-1.76-0.35c-0.39-0.23-0.65-0.56-0.77-0.99c-0.12-0.43-0.19-0.92-0.19-1.49c0-0.57,0.06-1.06,0.19-1.46c0.12-0.41,0.39-0.71,0.8-0.91c0.41-0.2,1-0.29,1.78-0.29c0.75,0,1.31,0.11,1.71,0.32s0.65,0.53,0.77,0.96c0.12,0.43,0.19,0.94,0.19,1.54c0,0.53-0.06,1-0.19,1.41c-0.12,0.41-0.38,0.72-0.77,0.93C53.6,34.02,53.01,34.12,52.23,34.12z M52.23,66.3c-0.67,0-1.19-0.1-1.54-0.29c-0.36-0.2-0.58-0.47-0.67-0.83c-0.09-0.35-0.13-0.78-0.13-1.28V42.86c0-0.46,0.05-0.88,0.16-1.25s0.33-0.65,0.67-0.83c0.34-0.18,0.86-0.27,1.57-0.27c0.67,0,1.17,0.1,1.49,0.29c0.32,0.2,0.53,0.48,0.64,0.85c0.11,0.37,0.16,0.81,0.16,1.3v20.99c0,0.5-0.05,0.92-0.16,1.28c-0.11,0.36-0.33,0.62-0.67,0.8C53.42,66.21,52.91,66.3,52.23,66.3z" />
                        </g>
                      </g>
                      <g>
                        <path fill="#1D1D1B" d="M65.03,57.61l-4.59,5c-0.52,0.57-0.88,1.05-1.08,1.43c-0.2,0.39-0.2,0.75,0,1.09c0.2,0.34,0.56,0.7,1.08,1.09c0.52,0.35,0.97,0.59,1.35,0.72c0.38,0.12,0.77,0.08,1.17-0.13c0.4-0.21,0.86-0.58,1.38-1.12l7.42-8.08H65.03z" />
                        <path fill="#1D1D1B" d="M84.36,64.04c-0.18-0.39-0.55-0.87-1.11-1.43l-8.04-8.76l8.1-8.83c0.56-0.57,0.92-1.05,1.08-1.43c0.16-0.39,0.14-0.75-0.06-1.09c-0.2-0.34-0.58-0.72-1.14-1.14c-0.76-0.57-1.38-0.81-1.86-0.72c-0.48,0.09-1.12,0.52-1.92,1.3l-7.56,8.24l-7.56-8.24c-0.48-0.53-0.9-0.9-1.26-1.12c-0.36-0.21-0.73-0.27-1.11-0.16c-0.38,0.11-0.83,0.34-1.35,0.69c-0.6,0.39-1,0.75-1.2,1.09c-0.2,0.34-0.21,0.71-0.03,1.12c0.18,0.41,0.53,0.89,1.05,1.46l8.1,8.83l-0.01,0.01l3.37,3.67l0.01-0.01l7.5,8.18c0.56,0.53,1.04,0.9,1.44,1.12c0.4,0.21,0.79,0.26,1.17,0.13c0.38-0.12,0.81-0.36,1.29-0.72c0.56-0.39,0.93-0.75,1.11-1.09C84.54,64.79,84.54,64.43,84.36,64.04z" />
                      </g>
                      <g>
                        <g><path fill="#1D1D1B" d="M90.03,34.55c-0.78,0-1.37-0.11-1.76-0.35c-0.39-0.23-0.65-0.56-0.77-0.99c-0.12-0.43-0.19-0.92-0.19-1.49c0-0.57,0.06-1.06,0.19-1.47c0.12-0.41,0.39-0.71,0.8-0.91c0.41-0.19,1-0.29,1.79-0.29c0.75,0,1.31,0.11,1.7,0.32c0.39,0.21,0.65,0.53,0.77,0.96s0.19,0.94,0.19,1.54c0,0.53-0.06,1-0.19,1.41c-0.12,0.41-0.38,0.72-0.77,0.93C91.4,34.44,90.81,34.55,90.03,34.55z M90.03,66.72c-0.67,0-1.19-0.1-1.54-0.29c-0.36-0.2-0.58-0.47-0.67-0.83c-0.09-0.35-0.13-0.78-0.13-1.28V43.28c0-0.46,0.05-0.88,0.16-1.25c0.11-0.37,0.33-0.65,0.67-0.83s0.86-0.27,1.57-0.27c0.67,0,1.17,0.1,1.49,0.29c0.32,0.2,0.53,0.48,0.64,0.85s0.16,0.81,0.16,1.31v20.99c0,0.5-0.05,0.92-0.16,1.28c-0.11,0.36-0.33,0.62-0.67,0.8C91.21,66.63,90.71,66.72,90.03,66.72z" /></g>
                      </g>
                    </g></svg
                ></a>
            </li>
    
            <li class="item"><a href="tienda">Tienda</a></li>
    
            <li class="item"><a href="calculadora">Calculadora</a></li>
    
            <li class="item"><a href="noticias">Noticias</a></li>
    
            <li class="item"><a href="contacto">Contacto</a></li>
    
            <li class="item has-submenu">
              <a tabindex="0">Idioma: ES</a>
    
              <ul class="submenu">
                <li class="subitem"><a href="en/cookies">English</a></li>
              </ul>
            </li>
    
            <li class="toggle">
              <a href="#"><i class="fas fa-bars"></i></a>
            </li>
    
            <script src="js/toggle.js"></script>
          </ul>
        </nav>
    
        <div class="content">
          <div class="cookie-wrapper">
            <br />
    
            <h1>Política de cookies y privacidad - Mixi</h1>
    
            <h2>¿Qué son las cookies?</h2>
    
            <p>En primer lugar, las cookies son pequeñas cantidades de información almacenadas en el navegador web para cada usuario que utilice una página web que cuente con cookies, haciendo de los sitios web elementos fáciles de utilizar y que en ningún momento
              dañará el dispositivo donde se guarden.</p>
    
            <p>La información guardada como cookies podrán ser elementos como la hora y tiempo de visita a la página, pero nunca permitiendo por cuestiones de seguridad la transferencia física de esta información a otro dispositivo que no sea en el que aceptaron
              originalmente dichas cookies.</p>
    
            <p>Las cookies que permiten identificar a una persona, se consideran datos personales de la misma, por lo que deberán ser aceptadas por el usuario para que el sitio web pueda tratarlas.</p>
    
            <h2>Cookies de terceros</h2>
    
            <p>Las cookies de terceros, son utilizadas y gestionadas por entidades externas que proporcionan a la plataforma servicios determinados para mejorar el sitio web y la experiencia final del usuario que lo utilice. Los objetivos de este tipo de cookies
              son la obtención de estadísticas de accesos y comprobar la interacción del usuario con la web.</p>
    
            <p>La información obtenida, se refiere al número de páginas visitadas, el idioma, el lugar a la que pertenece la dirección IP desde la que visita el usuario el sitio, el número de usuarios que acceden y con qué frecuencia lo hacen, el tiempo de visita,
              navegador utilizado y el tipo de dispositivo desde el que realizan la visita. Esta información es posteriormente enviada exclusivamente a la plataforma para contrastarla y poder así mejorar la experiencia futura del usuario incorporando o retirando
              características que harán de esta página un sitio web mejor y adaptado para la mayoría de usuarios una vez adaptadas estas métricas.</p>
    
            <h2>Cookies orientadas a redes sociales</h2>
    
            <p>A lo largo de la página se incorporan accesos a redes sociales. Por esta razón, las cookies de redes sociales pueden almacenarse en el navegador en conjunto con las cookies de esta web (una vez aceptadas ambas ellas). Cada red social dispone de
              sus propias políticas de protección de datos y cookies, siendo ellos mismos responsables de sus propias prácticas de privacidad y cookies. El usuario debe referirse a las mismas para informarse acerca de dichas cookies y, en su caso, del tratamiento
              de sus datos personales que conllevan.</p>
    
            <h2>Deshabilitar, rechazar y eliminar cookies almacenadas</h2>
    
            <p>El usuario que use esta plataforma tiene siempre la opción de deshabilitar y eliminar las cookies instaladas en su dispositivo mediante la configuración de su navegador (con la pérdida de algunos servicios al hacerlo). En este sentido, los procedimientos
              para eliminar las cookies pueden diferir de un navegador a otro, por lo que el usuario debe acudir a las instrucciones facilitadas por el propio navegador que esté utilizando para esta tarea.</p>
    
            <p class="actualizacion">Políticas creadas y actualizadas por MIXI - Julio de 2022.</p>
    
            <br />
          </div>
        </div>
    
        <footer class="text-center text-white">
          <div class="container pt-4">
            <section class="mb-4">
              <a class="btn btn-link btn-floating btn-lg text-dark m-1" href="https://www.youtube.com/channel/UCsJSqbYBZ48kx71kCdR1lfQ" target="_blank" role="button" data-mdb-ripple-color="dark"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="rsyoutube" viewBox="0 0 24 24"><path d="M19.615 3.184c-3.604-.246-11.631-.245-15.23 0-3.897.266-4.356 2.62-4.385 8.816.029 6.185.484 8.549 4.385 8.816 3.6.245 11.626.246 15.23 0 3.897-.266 4.356-2.62 4.385-8.816-.029-6.185-.484-8.549-4.385-8.816zm-10.615 12.816v-8l8 3.993-8 4.007z" /></svg
                ></a>
    
              <a class="btn btn-link btn-floating btn-lg text-dark m-1" href="https://twitter.com/mixi_esp" target="_blank" role="button" data-mdb-ripple-color="dark"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="rstwitter bi bi-twitter" viewBox="0 0 16 16"><path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z" /></svg
                ></a>
    
              <a class="btn btn-link btn-floating btn-lg text-dark m-1" href="https://www.instagram.com/mixi_esp/" target="_blank" role="button" data-mdb-ripple-color="dark"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="rsinstagram bi bi-instagram" viewBox="0 0 16 16"><path d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.917 3.917 0 0 0-1.417.923A3.927 3.927 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.916 3.916 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.926 3.926 0 0 0-.923-1.417A3.911 3.911 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0h.003zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599.28.28.453.546.598.92.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.47 2.47 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.478 2.478 0 0 1-.92-.598 2.48 2.48 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233 0-2.136.008-2.388.046-3.231.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92.28-.28.546-.453.92-.598.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045v.002zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92zm-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217zm0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334z" /></svg
                ></a>
    
              <a class="btn btn-link btn-floating btn-lg text-dark m-1" href="https://t.me/mixiesp" target="_blank" role="button" data-mdb-ripple-color="dark"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="rstelegram bi bi-telegram" viewBox="0 0 16 16"><path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8.287 5.906c-.778.324-2.334.994-4.666 2.01-.378.15-.577.298-.595.442-.03.243.275.339.69.47l.175.055c.408.133.958.288 1.243.294.26.006.549-.1.868-.32 2.179-1.471 3.304-2.214 3.374-2.23.05-.012.12-.026.166.016.047.041.042.12.037.141-.03.129-1.227 1.241-1.846 1.817-.193.18-.33.307-.358.336a8.154 8.154 0 0 1-.188.186c-.38.366-.664.64.015 1.088.327.216.589.393.85.571.284.194.568.387.936.629.093.06.183.125.27.187.331.236.63.448.997.414.214-.02.435-.22.547-.82.265-1.417.786-4.486.906-5.751a1.426 1.426 0 0 0-.013-.315.337.337 0 0 0-.114-.217.526.526 0 0 0-.31-.093c-.3.005-.763.166-2.984 1.09z" /></svg
                ></a>
    
              <a class="btn btn-link btn-floating btn-lg text-dark m-1" href="https://discord.gg/UZc4JHhvZu" target="_blank" role="button" data-mdb-ripple-color="dark"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="rsdiscord bi bi-discord" viewBox="0 0 16 16"><path d="M13.545 2.907a13.227 13.227 0 0 0-3.257-1.011.05.05 0 0 0-.052.025c-.141.25-.297.577-.406.833a12.19 12.19 0 0 0-3.658 0 8.258 8.258 0 0 0-.412-.833.051.051 0 0 0-.052-.025c-1.125.194-2.22.534-3.257 1.011a.041.041 0 0 0-.021.018C.356 6.024-.213 9.047.066 12.032c.001.014.01.028.021.037a13.276 13.276 0 0 0 3.995 2.02.05.05 0 0 0 .056-.019c.308-.42.582-.863.818-1.329a.05.05 0 0 0-.01-.059.051.051 0 0 0-.018-.011 8.875 8.875 0 0 1-1.248-.595.05.05 0 0 1-.02-.066.051.051 0 0 1 .015-.019c.084-.063.168-.129.248-.195a.05.05 0 0 1 .051-.007c2.619 1.196 5.454 1.196 8.041 0a.052.052 0 0 1 .053.007c.08.066.164.132.248.195a.051.051 0 0 1-.004.085 8.254 8.254 0 0 1-1.249.594.05.05 0 0 0-.03.03.052.052 0 0 0 .003.041c.24.465.515.909.817 1.329a.05.05 0 0 0 .056.019 13.235 13.235 0 0 0 4.001-2.02.049.049 0 0 0 .021-.037c.334-3.451-.559-6.449-2.366-9.106a.034.034 0 0 0-.02-.019Zm-8.198 7.307c-.789 0-1.438-.724-1.438-1.612 0-.889.637-1.613 1.438-1.613.807 0 1.45.73 1.438 1.613 0 .888-.637 1.612-1.438 1.612Zm5.316 0c-.788 0-1.438-.724-1.438-1.612 0-.889.637-1.613 1.438-1.613.807 0 1.451.73 1.438 1.613 0 .888-.631 1.612-1.438 1.612Z" /></svg
                ></a>
            </section>
          </div>
    
          <div class="text-center text-dark p-3" style="background-color: rgba(0, 0, 0, 0.2);">
            <a class="botoncopyright">Mixi &copy; | 2022</a>
          </div>
        </footer>
      </main>
    
      <div class="cookie-container">
        <p>Este sitio usa cookies para el funcionamiento de servicios proporcionados y analiza el tráfico de la web para mejorar.</p>
        <!-- </span>  NOT SURE WHAT THIS WAS -->
        <a class="d-flex align-items-center" href="https://www.mixi.es/cookies">Más información<i class="fa fa-angle-right ml-2"></i></a>
    
        <button class="cookie-btn">Aceptar</button>
      </div>
    
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
    
      <script src="https://www.gstatic.com/dialogflow-console/fast/messenger/bootstrap.js?v=1"></script>
      <df-messenger chat-title="Mixi" agent-id="41fe496c-6e3a-4316-aa5a-05dae8cd911d" language-code="es"></df-messenger>
      <script async src="https://www.googletagmanager.com/gtag/js?id=UA-229317979-1"></script>
      <script>
        window.dataLayer = window.dataLayer || [];
    
        function gtag() {
          dataLayer.push(arguments);
        }
        gtag('js', new Date());
        gtag('config', 'UA-229317979-1');
      </script>
    
      <script src="js/main.js"></script>
      <script src="js/utilidades.js"></script>
    </body>
    
    </html>