@import 'wide_vars';
@import 'wide/header';
@import 'wide/descripcion';
@import 'wide/ventajas';
@import 'wide/dimensiones';
@import 'wide/construidos';
@import 'wide/corporativos';
@import 'wide/testimonios';
@import 'wide/contacto';

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

section .titulo {
  font-size: font_size(22);
  padding-top: rem(54);
  padding-bottom: rem(25);
}

body {
  color: $gris_standard;
}

#content {
  max-width: rem($full_width) !important;
  height: ($content_height)+rem;

  position: relative;
  top: (-$content_height)+rem;

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

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

    &::after {
      clear: both;
    }
  }
  &>.column1 {
    width: percentage($column1/100);
  }
  &>.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%;
        }
      }
    }
  }

  #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);
  }
}