@use "sass:map";
@import 'reset';

body {
  font-family: Roboto, sans;
}

.ui.container {
  max-width: 1030px;
}
section>.container {
  height: 100%;
  &>.column1 {
    width: (1030*2/3/16)+rem;
  }
  &>.column2 {
    width: (1030/3/16)+rem;
  }
}

#header {
  background-image: url('../images/header.png');
  background-repeat: no-repeat;
  background-size: auto;
  $header-background: rgba(100, 100, 0, .3);
  background-color: $header-background;
  color: rgb(255, 255, 255);

  width: 100%;
  &>.container {
    height: 400px;
  }

  .ui.menu {
    border: none !important;
    background: none !important;
    box-shadow: none !important;
    margin: 0 !important;

    .dropdown .menu {
      background: none !important;
      border: none !important;
      box-shadow: none !important;
    }

    .item {
      color: inherit !important;
      font-size: 2rem;

      .shopping.cart div {
        position: relative;
        color: black;
        display: inline-block;
        top: -2.6rem;
        left: 0.2rem;
        font-size: 1rem;
        font-family: Roboto, sans;
      }
    }
  }

  .logo {
    padding: 0 !important;
    margin: 0 !important;

    img {
      width: 50%;
    }
    .frase1 {
      font-size: 1.5rem;
    }
    .frase2 {
      font-size: 1rem;
    }
  }
}

.simple.segment {
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;

  &>.ui.grid {
    height: 100%;
  }
}

$heights: (
  "seccion1": 25,
  "seccion2": 27.5,
  "dimensiones": 27.5,
  "construido": 21.875,
  "corporativos": 25,
  "felices": 21.875,
  "formulario": 30
);

#seccion1 {
  background-image: linear-gradient(rgb(200, 200, 200), rgb(200, 200, 200));
  background-position: left 6.3rem;
  background-size: 100% (134/16)+rem;
  background-repeat: no-repeat;

  height: (map.get($heights, "seccion1"))+rem;
  margin-bottom: 2rem !important;

  .column1 {
    width: (1030*2/3/16)+rem;

    .image-container {
      display: flex;
      justify-content: space-between;

      img {
        height: 9.6875rem;
        margin-top: 5rem;
      }
    }
  }

  .ui.simple.segment {
    background: none !important;

    margin-top: 2rem !important;

    font-size: 1.1667rem;

    .header {
      font-size: 1.833rem;

      margin-bottom: 1rem;
    }

  }

  .grid .column {
    &, & .column {
      padding-top: 0;
    }
  }

  img {
    height: 9.6875rem;

    margin-top: 5rem;
  }
}

#seccion2 {
  height: (map.get($heights, "seccion2"))+rem;

  background-image: url('../images/fondo23.png');
  background-color: rgb(240, 240, 240);


}

#dimensiones {
  height: (map.get($heights, "dimensiones"))+rem;

  background-image: url('../images/fondo23.png');
}

#construido {
  height: (map.get($heights, "construido"))+rem;

  background-image: url('../images/fondo4.png');
  background-color: rgb(100, 200, 255);
}

#corporativos {
  height: (map.get($heights, "corporativos"))+rem;

  background-image: url('../images/fondo5.png');
}

#felices {
  background-image: linear-gradient(rgb(200, 200, 200), rgb(200, 200, 200));
  background-position: left 3rem;
  background-size: 100% 5rem;
  background-repeat: no-repeat;

  height: (map.get($heights, "felices"))+rem;
}

#formulario {
  height: (map.get($heights, "formulario"))+rem;

  .whatsapp-link {
    color: inherit;
  }
}

$column1: 0;
$sticky: 0;
@each $name, $val in $heights {
  $sticky: $sticky + $val;
  @if $name != 'corporativos' and $name != 'felices' and $name != 'formulario' {
    $column1: $column1 + $val;
  }
}
#sticky_container {
  position: relative;
  height: ($column1)+rem;
  top: -($sticky)+rem;

  #column {
    position: absolute;
    width: (1030*2/3/16)+rem;
    height: ($column1)+rem;
    top: 0;
    left: 0;
    padding: 0;
  }
  .sticky {
    float: right;
    height: (265/16)+rem;
    width: (310/16)+rem;
    padding-top: ((265-170-35-16)/16)+rem;

    .row:first-child {
      height: (170/16)+rem;

      .column1 {
        display: inline-block;

        .titulo {
          font-size: (25/12)+rem;
        }
        .precio {
          font-size: (16/12)+rem;
        }
        font-size: (14/12)+rem;

        .colores {
          vertical-align: center;

          .white {
            border: thin solid rgb(0, 0, 0);
            background-color: rgb(255, 255, 255);
          }
          .black {
            background-color: rgb(0, 0, 0);
          }
          .blue {
            background-color: rgb(0, 0, 255);
          }
          .green {
            background-color: rgb(0, 255, 0);
          }
          .yellow {
            background-color: rgb(255, 255, 0);
          }
          .orange {
            background-color: rgb(255, 130, 0);
          }
          .red {
            background-color: rgb(255, 0, 0);
          }
          .circle {
            display: inline-block;
            width: 1rem;
            height: 1rem;
            border-radius: 8000px;
          }
        }
        .input {
          width: 4.5rem;
          border: thin solid rgb(0, 0, 0);
          text-align: center;
          padding: .5rem 0.05rem;

          button {
            background: none;
            border: none;
            width: 1rem;
            margin: 0;
            padding: 0;
            cursor: pointer;
          }
          input {
            width: 2rem;
            background: none;
            margin: 0;
            border: 0;
            padding: 0;
            text-align: right;
          }
        }
      }
      .column2 {
        display: inline-block;
        width: (170/16)+rem;
      }
    }
    .row:last-child {
      .button {
        border-radius: 0 !important;
        width: 100%;
      }
    }
  }
}

.fondo-blanco {
  background-color: rgba(255, 255, 255, .5);
}