/* General reset */
* {
    box-sizing: border-box;
  }
  
  html, body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
  }
  
  /* Navegación */
  nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  
  nav li {
    padding: 12px 21px;
  }
  
  nav a {
    color: var(--color1);
  }
  
  nav a:hover {
    color: var(--color2);
  }
  
  /* Estilos móviles (max-width: 768px) */
  @media only screen and (max-width: 768px) {
    .content {
      padding: 12px;
    }
    
    /* Columnas en móviles, ocupan el 100% */
    .wrapper, .col1-7, .col1-6, .col1-5, .col1-4, .col2-7, .col1-3, .col2-5, 
    .col3-7, .col1-2, .col4-7, .col2-3, .col3-5, .col5-7, .col3-4, .col4-5, 
    .col5-6, .col6-7, .col1-1 {
      width: 100%;
    }
    
    .superoption .detalle {
      width: 69%;
      padding: var(--spacer);
    }
    
    /* Mostrar solo en móvil */
    .onlymobil {
      display: block;
    }
    
    .onlydesktop {
      display: none;
    }
    
    /* Navegación */
    nav li {
      float: none;
    }
    
    nav ul, nav li ul {
      display: none;
    }
    
    nav li .fa-plus, nav li .fa-minus {
      float: right;
    }
    
    nav span {
      display: block;
      font-size: 2em;
    }
    
    /* Floatys */
    .floaty > * {
      float: none;
    }
    
    #cookie-banner .fa-cookie, #cookie-banner .fa-cookie-bite {
      font-size: 3em;
      margin: 12px 21px 0 21px;
    }
    
    #cookie-banner button {
      width: 100%;
      margin-bottom: 5px;
    }
    
    #cookie-preferences {
      z-index: 999999;
    }
    
    #cookie-banner .fa-times, #cookie-preferences .fa-times {
      font-size: 1.3em;
    }
  }
  
  /* Estilos para pantallas medianas (min-width: 600px) */
  @media only screen and (min-width: 600px) {
    .content {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }
    
    .wrapper, .col1-1 {
      width: 100%;
    }
    
    .col1-7, .col1-6, .col1-5, .col1-4, .col2-7, .col1-3, .col2-5, .col3-7, 
    .col1-2, .col4-7, .col2-3, .col3-5, .col5-7, .col3-4, .col4-5, .col5-6, 
    .col6-7 {
      width: 50%;
    }
    
    /* Navegación */
    .onlymobil {
      display: none;
    }
    
    .onlydesktop {
      display: block;
    }
    
    nav li {
      float: none;
    }
    
    nav li .fa-plus, nav li .fa-minus {
      float: right;
    }
    
    nav span {
      display: block;
      font-size: 2em;
    }
  }
  
  /* Estilos para pantallas grandes (min-width: 768px) */
  @media only screen and (min-width: 768px) {
    .content {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }
    
    .wrapper {
      width: 1200px;
      margin: auto;
    }
    
    /* Columnas */
    .col1-7 { width: calc(100% / 7); }
    .col1-6 { width: calc(100% / 6); }
    .col1-5 { width: calc(100% / 5); }
    .col1-4 { width: calc(100% / 4); }
    .col2-7 { width: calc(100% / 7 * 2); }
    .col1-3 { width: calc(100% / 3); }
    .col2-5 { width: calc(100% / 5 * 2); }
    .col3-7 { width: calc(100% / 7 * 3); }
    .col1-2 { width: calc(100% / 2); }
    .col4-7 { width: calc(100% / 7 * 4); }
    .col2-3 { width: calc(100% / 3 * 2); }
    .col3-5 { width: calc(100% / 5 * 3); }
    .col5-7 { width: calc(100% / 7 * 5); }
    .col3-4 { width: calc(100% / 4 * 3); }
    .col4-5 { width: calc(100% / 5 * 4); }
    .col5-6 { width: calc(100% / 6 * 5); }
    .col6-7 { width: calc(100% / 7 * 6); }
    .col1-1 { width: 100%; }
    
    /* Navegación */
    nav li {
      float: left;
    }
    
    nav li ul {
      position: absolute;
      display: none;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.35);
      z-index: 99;
    }
    
    nav li:hover ul {
      display: block;
    }
    
    nav li ul li {
      float: none;
      background: var(--white);
    }
    
    nav li ul li:hover {
      background: var(--lightgrey);
    }
    
    nav.navright > ul > li {
      float: right;
    }
    
    nav span {
      display: none;
    }
    
    nav li .fa-plus {
      display: none;
    }
    
    /* Floatys */
    .floatleft > * {
      float: left;
    }
    
    .floatright > * {
      float: right;
    }
  }