@import 'phone_vars';

@import 'phone/header';
@import 'phone/descripcion';
@import 'phone/ventajas';
@import 'phone/dimensiones';

.left.column {
  width: 75%;
  padding-left: rem(5) !important;
}

#backgrounds {
  .cabezal {
    height: (map.get($heights, 'cabezal'))+rem;

    background-image: $fondo_cabezal;
    background-repeat: no-repeat;
    background-size: 160%;
    background-position: bottom rem(-10) center;
    background-color: rgba(0, 0, 0, .4);
    background-blend-mode: multiply;
  }
  .seccion1 {
    height: (map.get($heights, "seccion1"))+rem;

    background-image: linear-gradient($gris, $gris);
    background-position: left rem(112);
    background-size: 100% rem(128);
    background-repeat: no-repeat;
  }
  .seccion2 {
    height: (map.get($heights, "seccion2"))+rem;

    background-image: $fondo_ventajas_dimensiones;

    .diagonal {
      border-bottom: (map.get($heights, 'seccion2'))+rem solid rgba($gris, .5);
      border-right: rem(1900) solid transparent;
    }
  }
  .dimensiones {
    height: (map.get($heights, "dimensiones"))+rem;

    background-image: $fondo_ventajas_dimensiones;
    .fondo-gris {
      width: 100%;
      height: 100%;
      background-color: rgba($gris, .5);
    }
  }
  .construido {
    height: (map.get($heights, "construido"))+rem;

    background-image: $fondo_construido;
  }
  .corporativos {
    height: (map.get($heights, "corporativos"))+rem;

    background-image: $fondo_corporativo;
  }
  .testimonios {
    height: (map.get($heights, "felices"))+rem;

    background-image: linear-gradient($gris, $gris);
    background-position: left rem(115);
    background-size: 100% rem(118);
    background-repeat: no-repeat;
  }
  .formulario {
    height: (map.get($heights, "formulario"))+rem;
    background-color: $gris;
    clip-path: polygon(50% 0, 100% 0%, 100% 100%, 0% 100%);
  }
}

html {
  font-size: $html-font-size+px;
  width: 100%;
  overflow-x: hidden;
}

body {
  height: ($content_height)+rem;
  font-family: Roboto, sans;
  color: $gris_standard;
}

#content {
  width: 100% !important;
  height: ($content_height)+rem;
  margin: 0 !important;
  position: relative;
  top: (-$content_height)+rem;

  #header {
    color: rgb(255, 255, 255);

    width: 100%;
    height: (map.get($heights, 'cabezal'))+rem;

    .ui.menu {
      border: none !important;
      background: none !important;
      //background-color: rgba(100, 100, 100, .3) !important;
      box-shadow: none !important;
      margin: 0 !important;
      color: rgb(0, 0, 0);

      .dropdown .menu {
        /*background: none !important;
        border: none !important;
        box-shadow: none !important;*/
        color: rgb(0, 0, 0);
        font-size: 1rem;
        .item {
          padding: 1rem !important;
        }
      }

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

        .shopping.cart div {
          position: relative;
          color: rgb(0, 0, 0);
          display: inline-block;
          top: -1.3rem;
          left: 0.1rem;
          font-size: .5rem;
          font-family: Roboto, sans;
        }
      }
    }

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

      img {
        width: 50%;
        max-width: rem($full_width);
      }
      .frase1 {
        width: 75%;
        margin: auto;
        font-size: 1rem;
      }
      .frase2 {
        font-size: .7rem;
      }
    }
  }

  &>.column {
    display: inline-block;
    float: left;

    padding-left: 1rem !important;
    padding-right: 1rem !important;

    &::after {
      clear: both;
    }
  }
  &>.column1 {
    width: percentage($column1/100);


    #seccion1 {
      height: (map.get($heights, "seccion1"))+rem;
      width: 100%;

      .image-container {
        display: flex;
        justify-content: space-between;
        height: rem(112+128);

        img {
          width: percentage(50/100);
          margin-top: rem(85);
        }
      }
      .paragraph {
        padding-top: rem(28);
        line-height: rem(14);
        text-align: justify;

        .header {
          margin-bottom: 1rem;
          font-size: rem(22);
        }
      }
    }

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

      &>.column {
        display: inline-block;
        float: left;
        width: 50%;

        &::after {
          clear: both;
        }
      }
      .column1 {
        margin-top: rem(80);
        img {
          width: rem(317);
          height: rem(317);
        }
      }
      .column2 {
        margin-top: rem(114);
        .row:first-child {
          background-color: #00427b;
          color: rgb(256, 256, 256);
          height: rem(180);
          width: rem(380);
          padding: 2rem;
          margin-left: -3rem;
          overflow: hidden;

          .header {
            font-weight: bold;
            font-size: rem(16);
            margin-bottom: 1rem;
          }

          ul {
            list-style: disc inside;
            font-size: font-size(10);
          }
        }
        .row:last-child {
          margin-top: rem(18);

          display: flex;
          justify-content: space-between;

          img {
            width: rem(70);
            height: rem(85);
          }
        }
      }
    }

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

      .header {
        padding: rem(37) 0 !important;
        .bigger {
          font-size: rem(16);
        }
      }

      .images {
        display: flex;

        .column {
          float: left;

          &>img {
            width: rem(313);
            height: rem(235);
          }

          div {
            width: rem(313);
            margin-top: rem(25);
          }
        }
      }
    }

    #construido {
      height: (map.get($heights, "construido"))+rem;
      padding-top: rem(23) !important;

      .header {
        font-size: font_size(22);
        padding: rem(10) rem(43);
        background-color: rgba(255, 255, 255, .6);
      }
    }
  }
  &>.column2 {
    width: percentage($column2/100);
    height: ($column_height1)+rem;

    .sticky {
      height: rem(265);
      width: rem(310);
      margin: auto;

      .row:first-child {
        height: rem(170);
        margin-top: rem(80);

        .column {
          display: inline-block;
          float: left;

          &::after {
            clear: both;
          }
        }
        .column1 {
          vertical-align: bottom;
          padding-top: rem(20);
          width: rem(310*2/3);

          .linea {
            margin-bottom: rem(10);
          }

          .titulo {
            font-size: font_size(25);
          }
          .precio {
            font-size: font_size(16);
          }
          font-size: font_size(14);

          @include colors;
          .input {
            width: 4.5rem;
            border: thin solid rgb(0, 0, 0);
            text-align: center;
            padding: .5rem 0.05rem;
            font-size: font_size(10);

            button {
              background: none;
              border: none;
              width: 1rem;
              margin: 0;
              padding: 0;
              cursor: pointer;
              font-weight: bold;
            }
            input {
              width: 2rem;
              background: none;
              margin: 0;
              border: 0;
              padding: 0;
              text-align: center;
            }
          }
        }
        .column2 {
          width: rem(310/3);

          img {
            width: rem(110);
            height: rem(160);
          }
        }
      }
      .row:last-child {
        .button {
          border-radius: 0 !important;
          width: 100%;
        }
      }
    }
  }

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

    margin-top: ($column_height1)+rem !important;

    &>.column {
      display: inline-block;
      float: left;

      padding-left: 1rem !important;
      padding-right: 1rem !important;

      &::after {
        clear: both;
      }
    }
    .column1 {
      width: percentage(67/100);

      &>.header {
        margin-top: rem(67);
        margin-bottom: rem(37);
        .bigger {
          font-size: rem(26);
        }
      }
      .opciones {
        display: flex;
        justify-content: space-around;

        .opcion {
          display: inline-block;

          .img-grande {
            display: inline-block;
            padding-right: rem(12);
            img {
              width: rem(135);
              height: rem(200);
            }
          }
          .descripcion {
            display: inline-block;
            vertical-align: top;
            height: rem(200);
            padding-top: rem(20);

            .content {
              display: block;
              .header {
                font-size: font_size(14);
                margin-bottom: rem(10);
              }

              ul {
                list-style: disc inside;
              }
            }
            .images {
              margin-top: rem(34);
              img {
                width: rem(70);
                height: rem(85);
              }
            }
          }
        }
      }
    }
    .column2 {
      width: percentage(33/100);
      height: 100%;

      .header {
        margin-top: rem(46);
        margin-bottom: rem(24);
        font-size: rem(26);
      }

      form {
        @include colors;

        .row {
          margin-bottom: rem(9);
        }
        .colores.linea {
          margin-bottom: rem(25-9);
        }
        .input.cantidad {
          width: 4.5rem;
          border: thin solid rgb(0, 0, 0);
          text-align: center;
          padding: .5rem 0.05rem;
          font-size: font_size(10);

          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: center;
          }
        }
        .input [type="file"] {
          display: none;
        }
        .input .file {
          display: inline-block;
          height: rem(20*12/10);
          width: rem(150);
          padding-top: rem(3);
          background-color: #cccccb;
          border: thin solid #333;
          font-size: font_size(10);
          text-align: center;
          cursor: pointer;
        }
        .input [type="text"] {
          height: rem(18);
          background-color: rgba(255, 255, 255);
          border: none !important;
          border-radius: 0 !important;
        }
        textarea {
          height: rem(72);
          background-color: rgba(255, 255, 255);
          border: none !important;
          border-radius: 0 !important;
          margin-bottom: rem(25-9);
        }
        .button {
          width: 100%;
          background-color: #666667;
          color: white;
          border: none !important;
          border-radius: 0 !important;
        }
      }
    }
  }

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

    padding: 0 1rem !important;
    padding-top: rem(60) !important;

    .header {
      //margin-top: rem(60);
      font-size: font_size(22);
    }
    .testimonios {
      margin-top: rem(25);
      display: flex;
      justify-content: space-between;
      text-align: center;

      .testimonio {
        height: rem(80);
        color: #666667;
        margin-top: rem(20);
        width: percentage(30/100);
        text-align: center;
      }
    }
    .nav {
      display: block;
      text-align: center;
      color: #666667;
    }
  }

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

    padding: 0 1rem !important;

    .whatsapp-link {
      color: inherit;
    }
    &>.column {
      float: left;

      padding-left: 1rem !important;
      padding-right: 1rem !important;

      &::after {
        clear: both;
      }
    }
    &>.flotante {
      position: absolute;
      top: rem(183);
      margin: auto;
      left: 40%;
      width: rem($full_width/5);
      text-align: center;

      &>.content {
        width: rem(130);
        margin: auto;
        left: -50%;

        .item {
          display: block;
          padding: rem(5) 0;
        }
        div.whatsapp {
          height: rem(30);
          background-color: #1a9947;
          color: #fff;
          font-size: rem(10);

          &>i {
            position: relative;
            font-size: font_size(16);
            top: rem(3);
          }
        }
        .rrss {
          display: flex;
          justify-content: space-around;
          font-size: rem(20);

          i.inverted.grey {
            color: white !important;
          }
        }
      }
    }
    &>.column1 {
      width: percentage($column1/100);
      margin-top: rem(27);

      &>img {
        width: rem(540);
        height: rem(350);
        float: left;
      }
    }
    &>.column2 {
      width: percentage($column2/100);

      .header {
        margin-top: rem(20);
        text-align: center;
        font-size: font_size(22);

        .whatsapp-link {
          display: inline-block;
          width: rem(25);
          height: rem(25);
          font-size: font_size(25);
        }
      }

      .paragraph {
        padding-top: 1rem;
        padding-bottom: rem(25);
        justify-content: center;
      }

      form {
        input {
          border-radius: 0 !important;
          height: rem(18);
          margin-bottom: rem(9);
          background-color: rgba(255, 255, 255, .5);
          font-size: font_size(10);
          &::placeholder {
            color: $gris_standard;
          }
        }
        textarea {
          border-radius: 0 !important;
          height: rem(72);
          margin-bottom: rem(25);
          background-color: rgba(255, 255, 255, .5);
          font-size: font_size(10);
          &::placeholder {
            color: $gris_standard;
          }
        }
        .button {
          width: 100%;
          border-radius: 0 !important;
          background-color: white;
          color: $gris_standard;
        }
      }
    }
  }

  section {
    background: none;

    &.segment>.container {
      height: 100%;

      &>.column1 {
        display: inline-block;
        width: ($column1)+rem;
      }
      &>.column2 {
        display: inline-block;
        width: ($column2)+rem;
      }
    }
  }
  .simple.segment {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;

    &>.ui.grid {
      height: 100%;
    }
  }
  .fondo-blanco {
    background-color: rgba(255, 255, 255, .5);
  }
}