style.scss

/*Reglas generales para toda la página*/

* {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
   scroll-behavior: smooth;
   transition: all 200ms ease-out;
}

body {
   min-width: 320px;
}

body::after {
   display: none;
   content: url(resources/img/boton-app.gif) url(resources/img/dollar.gif) url(resources/img/euro.gif)
      url(resources/img/modal-btn-hover.gif) url(resources/img/modal-head-app.gif)
      url(resources/img/modal-head-right.gif) url(resources/img/modal-head-wrong.gif) url(resources/img/modal-head.gif)
      url(resources/img/pound.gif) url(resources/img/select-selected.gif);
}

/*variables font-weight*/

$light: 300;
$normal: 400;
$special: 600;
$bold: 700;
$ultrabold: 800;

/*mixin para pricing*/

@mixin precio($color: #fb3b64) {
   color: $color;
   font-family: "Open Sans";
   font-size: 2.875rem;
   font-weight: $light;
   text-align: center;
}

@mixin cuadroext($color: rgba(251, 59, 100, 0.29)) {
   position: relative;
   text-align: center;
   display: inline-block;
   width: 18.313rem;
   height: 17.188rem;
   margin-bottom: 2.688rem;
   transition: transform 300ms ease-out;
   pointer-events: auto;

   :hover {
      box-shadow: 5px 10px 27px 0px $color;
   }
}

@mixin cuadro($color: #fb3b64) {
   width: 100%;
   height: 15.688rem;
   border-radius: 1.125rem;
   border: 1px solid $color;
   background: #fff;
}

@mixin boton($color: #eb476e) {
   position: relative;
   border-radius: 1.438rem;
   background: $color;
   color: #fff;
   font-family: "Open Sans";
   font-size: 0.813rem;
   font-weight: $bold;
   width: 9.375rem;
   height: 3.125rem;
   transform: translateY(-50%);
   border: none;
   cursor: pointer;
}

/*mixin para iconos de media*/

@mixin icono($icono: url(./resources/svg/twitter.svg)) {
   display: inline-block;
   width: 1.5rem;
   height: 1.5rem;
   background-image: $icono;
   background-size: cover;
   position: relative;
   transition: all 300ms ease-out;
}

/* Styling de todo el header*/

#pgr-bar {
   width: 1%;
   height: 0.375rem;
   position: fixed;
   top: 0%;
   z-index: 101;
}

#header {
   background: #fff;
   box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.29);
   display: inline-block;
   height: 4.375rem;
   width: 100%;
   position: fixed;
   z-index: 100;
   top: 0;
}

/*Styling del logo*/

#header__logo {
   text-decoration: none;
   h1 {
      color: #08a6e4;
      font-family: "Raleway", sans-serif;
      font-size: 2rem;
      font-style: normal;
      font-weight: $light;
      display: inline-block;
      padding-top: 1.063rem;
      width: 85%;
      margin-left: 5%;
   }
}

/*Styling del nav*/

.header__nav {
   display: block;
   float: left;
   background: #fff;
   width: 100%;
   height: 10.978rem;
   margin-top: 0.938rem;
   color: #000;
   align-items: center;
   box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.29);

   h6 {
      color: #a5a5a5;
      text-align: left;
      padding-top: 0.875rem;
      padding-left: 1.563rem;
      font-family: "Open Sans";
      font-size: 0.688rem;
      font-style: normal;
      font-weight: $bold;
      letter-spacing: 0.205rem;
      text-transform: uppercase;
      padding-bottom: 0.875rem;
      display: block;
   }

   h6:hover {
      color: #000;
      cursor: pointer;
   }

   a {
      text-decoration: none;
   }
}

.header__menu {
   display: inline-block;
   position: relative;
   cursor: pointer;
   margin-bottom: 0.188rem;
   width: 1.25rem;
   height: 0.75rem;
}

/*styling pt1*/

#pt1 {
   margin-bottom: 3.125rem;
   h2 {
      text-align: center;
      font-family: "Raleway";
      font-size: 1.875rem;
      font-weight: $light;
      margin: 0.81rem auto 1.56rem;
   }

   #figure {
      height: 16.69rem;
      overflow: hidden;
      position: relative;
   }
}

/*Styling de la imagen de fondo*/

.imgbg {
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
   width: 48.688rem;
   height: 16.688rem;
}

/*Styling de la intro de pt1*/

#pt1__intro {
   display: block;
   margin: 6.25rem auto;
   text-align: center;
   width: 19.375rem;
   height: 13.31rem;

   h1 {
      color: #000;
      text-align: center;
      font-family: "Raleway";
      font-size: 2.188rem;
      font-weight: $normal;
      margin-bottom: 1.25rem;
   }

   button {
      border-radius: 2.5rem;
      background: #08a6e4;
      width: 100%;
      height: 31.45%;
      color: #fff;
      text-align: center;
      font-family: "Open Sans";
      font-size: 1rem;
      font-weight: $bold;
      border: none;
      cursor: pointer;
      transition: all 250ms ease-out;
   }

   button:hover {
      box-shadow: 5px 10px 14px 0px rgba(7, 172, 230, 0.29);
      transform: scale(1.2);
   }
}

.title {
   text-align: center;
   font-family: "Open Sans";
   font-size: 1rem;
   font-weight: $normal;
   margin-bottom: 1.75rem;
}

/*Styling de las figuras dentro de pt1*/

#pt1__figs {
   text-align: center;

   h3 {
      font-family: "Raleway";
      font-size: 1.25rem;
      font-weight: $ultrabold;
      letter-spacing: 0.373rem;
   }

   h4 {
      color: #a5a5a5;
      font-family: "Raleway";
      font-size: 1.063rem;
      font-weight: $normal;
      margin-top: 1.188rem;
      margin-bottom: 1.563rem;
      width: 8.125rem;
      display: inline-block;
   }
}

#fig1,
#fig2,
#fig3 {
   display: block;
   margin: auto;
}

.moveimg {
   position: absolute;
}

.img1 {
   transform: translateX(-78%);
}

.img2 {
   transform: translateX(-65%) translateY(30%);
}

.img3 {
   transform: translateX(-65%) translateY(10%);
}

/*styling pt2*/

#pt2 {
   text-align: center;
   background: #f7f7f7;
   padding: 2.5rem 1.875rem;

   /*Styling general para las celdas 1 y 2*/

   #pt2__c1,
   #pt2__c2 {
      background: #fff;
      height: auto;
      display: block;
      margin: 2.5rem auto;
      padding: 2.31rem 1.375rem 1.875rem;
      position: relative;
      z-index: 0;
      border-radius: 0.313rem;
      border: 1px solid #e8e9ed;
   }

   .c1__imgs {
      position: relative;
   }

   h2 {
      font-family: "Raleway";
      font-size: 1.875rem;
      font-weight: $normal;
      text-align: left;
      margin-top: 1.685rem;
      padding-bottom: 2.625rem;
      max-width: 15.625rem;
   }
}

.t1,
.t1_1 {
   color: #000;
   font-family: "Open Sans";
   font-size: 0.875rem;
   font-weight: $normal;
   text-align: left;
   margin: 0.625rem auto 0;
}

.t2 {
   color: #000;
   font-family: "Open Sans";
   font-size: 0.875rem;
   font-weight: $normal;
   text-align: left;
   margin: 0.625rem auto 1.04rem;
   padding: 1.25rem;
}

/*Styling para las imágenes de las celdas*/

.topimg {
   position: relative;
   z-index: 2;
}

#topimg1 {
   width: 193px;
   height: 110px;
}

#topimg2 {
   width: 175px;
   height: 135px;
}

.img4 {
   width: 5.633rem;
   height: 5.633rem;
   background: #fb3b64;
   border-radius: 2.563rem;
   display: inline-block;
   transform: rotate(-45deg) translateX(-100%) translateY(-60%);
   transform-origin: 0 0;
}

.img5 {
   transform: translateX(-135%) translateY(-5%);
}

/*styling de celda 3*/

#pt2__c3 {
   text-align: center;
   background: #fff;
   height: auto;
   display: block;
   margin: 2.5rem auto;
   padding: 2.31rem 0 0;
   position: relative;
   z-index: 0;
   border-radius: 5px;
   border: 1px solid #e8e9ed;
}

#c3__text {
   h2 {
      padding-left: 1.25rem;
   }
}

#c3__img {
   padding-left: 0%;
   border-radius: 5px;
   border: 1px solid #e8e9ed;
   background: #55dfb4;
   width: auto;
   height: 195px;

   img {
      transform: translateX(-58%) translateY(10%);
   }
}

/*styling pt3*/

#pt3 {
   display: block;
   text-align: center;

   h2 {
      text-align: center;
      font-family: "Raleway";
      font-size: 2.25rem;
      font-weight: $normal;
      margin-top: 3.334rem;
      margin-bottom: 0.875rem;
   }
}

#pt3__pricing {
   display: inline-block;
}

/*pricing nº1*/

.pr1 {
   @include cuadroext;
   z-index: 1;
   margin: 0.625rem;

   button {
      @include boton;
   }
}

#pr__red {
   @include cuadro;

   .pr__title {
      bottom: 2rem;
   }
}

/*pricing nº2*/

.pr2 {
   @include cuadroext($color: rgba(7, 172, 230, 0.29));
   margin: 0.625rem;

   button {
      @include boton($color: #07ace6);
   }
}

#pr__blue {
   @include cuadro($color: #07ace6);
}

/*pricing nº3*/

.pr3 {
   @include cuadroext($color: rgba(85, 223, 180, 0.29));
   margin: 0.625rem;

   button {
      @include boton($color: #55dfb4);
   }
}

#pr__green {
   @include cuadro($color: #55dfb4);
}

/*styling de los precios de cada oferta*/

#price1 {
   @include precio;
}

#price2 {
   @include precio($color: #07ace6);
}

#price3 {
   @include precio($color: #55dfb4);
}

.symbol {
   margin-right: -0.625rem;
}

/*animación de escala de precios con hover*/

.pr1:hover,
.pr2:hover,
.pr3:hover {
   transform: scale(1.2);
   z-index: 10;
}

/*posicionamiento general de los elementos de cada pricing*/

.pr__title {
   display: inline-block;
   width: 8.5rem;
   position: relative;
   pointer-events: none;
   h3 {
      color: #13253b;
      font-family: "Raleway";
      font-size: 1.25rem;
      font-weight: $bold;
   }
}

.offer {
   color: #13253b;
   font-family: "Raleway";
   font-size: 0.75rem;
   font-weight: $bold;
}

.pr__list {
   display: inline-block;
   position: relative;
   text-align: left;
   top: 1.25rem;
   pointer-events: none;

   ul {
      list-style: none;
   }

   h5 {
      display: inline-block;
      margin-left: 0.625rem;
      margin-bottom: 1.25rem;
      color: #000;
      text-align: left;
      font-family: "Open Sans";
      font-size: 0.875rem;
      font-weight: $normal;
   }
}

/*Styling del contact*/

#pt3__contact {
   display: inline-block;
   text-align: center;
}

.title2 {
   color: #000;
   text-align: left;
   font-family: "Open Sans";
   font-size: 1rem;
   font-weight: $normal;
   margin-bottom: 2.375rem;
}

#contact__qts {
   position: relative;
   text-align: left;
   margin-bottom: 3.313rem;

   div {
      position: relative;
      margin-bottom: 0.625rem;
      cursor: pointer;
   }

   p:hover {
      color: #000;
   }

   p {
      display: inline-block;
      color: #a5a5a5;
      font-family: "Open Sans";
      font-size: 1rem;
      font-weight: $special;
      position: relative;
      bottom: 0.625rem;
   }
}

/*Styling del formulario*/

#formu {
   color: #000;
   text-align: left;
   font-family: "Raleway";
   font-size: 2.5rem;
   font-weight: $normal;
   margin-bottom: 0.313rem;
}

#contact__inputs {
   width: 19.5rem;
   text-align: left;
   height: 23rem;
}

.input__title {
   text-align: left;
   display: block;
   color: #08a6e4;
   font-family: "Open Sans";
   font-size: 0.688rem;
   font-weight: $special;
   letter-spacing: 3.28px;

   :focus {
      outline: none;
   }
}

#name,
#email {
   height: 2.624rem;
   width: 19.5rem;
   margin-bottom: 2.624rem;
   border: none;
   border-bottom: 1px solid #95989a;
}

.check {
   width: 1.5rem;
   height: 1.5rem;
   margin-right: 0.625rem;
   display: inline-block;
   cursor: pointer;
   border-radius: 0.25rem;
   border: 1px solid #95989a;
}

.check:active {
   background-color: red;
   color: #08a6e4;
}

.checkbox__text {
   width: 17.313rem;
   display: inline-block;
   position: relative;
   color: #707070;
   font-family: "Open Sans";
   font-size: 0.75rem;
   font-weight: $normal;
   letter-spacing: normal;
   text-align: left;
   bottom: 1.875rem;
   left: 2.25rem;
   margin-bottom: 2.063rem;
}

/*Styling y animacion extra del botón*/

.f-btn {
   position: relative;
   left: 2.594rem;
   border-radius: 2.188rem;
   background: #08a6e4;
   color: #fff;
   font-family: "Open Sans";
   font-size: 0.813rem;
   font-weight: $bold;
   width: 14.125rem;
   height: 3.563rem;
   margin-bottom: 2.75rem;
   border: none;
   transition: all 300ms ease-out;
   cursor: pointer;
   pointer-events: auto;
}

.f-btn:hover {
   transform: scale(1.2);
   box-shadow: 5px 10px 14px 0px rgba(7, 172, 230, 0.29);
}

/*Styling del footer*/

#footer {
   height: 5.563rem;
   background: #f7f7f7;
   box-shadow: 0px -5px 40px 0px rgba(0, 0, 0, 0.2);
   overflow: hidden;
}

#footer__text {
   float: left;
   width: 60vw;
   text-align: left;
}

#footer__media {
   float: right;
   width: 7.375rem;

   a {
      vertical-align: middle;
      margin: 0.625rem;
      position: relative;
      margin-top: 2.063rem;
   }
}
.twitter {
   @include icono;
}

.twitter:hover {
   background-image: url(./resources/svg/twitter-x.svg);
}

.facebook {
   @include icono($icono: url(./resources/svg/facebook.svg));
}

.facebook:hover {
   background-image: url(./resources/svg/facebook-meta.svg);
}

.footer__logo {
   position: relative;
   display: inline-block;
   text-align: left;
   margin: 1.405rem 0 0 1.063rem;
   color: #08a6e4;
   font-family: "Raleway";
   font-size: 1.625rem;
   font-weight: $light;
   text-decoration: none;
}

.footer__right {
   color: #a5a5a5;
   text-align: left;
   font-family: "Open Sans";
   font-size: 0.688rem;
   font-weight: $normal;
   margin-left: 1.063rem;
}

/*Clase para botón return creado en JavaScript*/

.return {
   display: block;
   position: relative;
   left: 0px;
   bottom: 45px;
   z-index: 300;
   margin-left: 5%;
   border-radius: 2.188rem;
   background-image: url("resources/img/boton-app.gif");
   background-size: cover;
   opacity: 80%;
   color: #fff;
   font-family: "Open Sans";
   font-size: 0;
   font-weight: $bold;
   width: 50px;
   height: 50px;
   border: none;
   transition: all 300ms ease-out;
   cursor: pointer;
   pointer-events: auto;
}

.return:hover {
   width: 50px;
   height: 50px;
   transform: scale(1.2);
   box-shadow: 5px 10px 14px 0px rgba(7, 172, 230, 0.29);

   font-size: 0px;
}

/*Styling del modal*/

#modal {
   width: 250px;
   height: 120px;
   display: none;
   flex-direction: column;
   border: 2px black solid;
   border-radius: 20px;
   position: fixed;
   z-index: 999;
   right: 4%;
   background: #22b8f3;
   overflow: hidden;
   opacity: 0.6;

   #modal-imgs {
      display: flex;
      flex-direction: row-reverse;
      background-image: url(resources/img/modal-head-app.gif);
      background-position: right;
      background-size: cover;
      background-repeat: no-repeat;
      height: 40px;
      align-items: center;

      img {
         margin-right: 10px;
         cursor: pointer;
      }
   }
}

#modal:hover {
   opacity: 1;
   transform: scale(1.1);
   box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.49);
}

#modal-form {
   display: flex;
   flex-direction: row;
   margin-top: 15px;
   justify-content: space-between;
   padding: 5px 10px 0 10px;
   height: 40px;
   align-items: center;
}

#modal-email {
   position: relative;
   width: 90%;
   height: 40px;
   border-radius: 45px;
   text-align: left;
}

#modal-email::placeholder {
   text-align: center;
   font-family: "Open Sans";
   font-size: 0.7rem;
   font-weight: $ultrabold;
   letter-spacing: 3.28px;
}

#modal-email:focus::placeholder {
   color: transparent;
}

#modal-btn {
   border-radius: 2.5rem;
   margin-left: 3px;
   background: #fb3b64;
   color: #fff;
   text-align: center;
   font-family: "Open Sans";
   font-size: 0.75rem;
   padding: 1px;
   font-weight: $normal;
   width: 100px;
   height: 50px;
   border: 2px solid black;
}

.hidemodal {
   display: none !important;
}

/*Styling del elemento select*/

#select {
   padding: 10px;
   border: 1px solid #ccc;
   border-radius: 5px;
   font-family: "Open Sans";
   font-size: 1rem;
   width: 200px;
}

#select option {
   color: black;
   font-weight: 600;
   text-align: center;
}

#select:focus {
   background: url(resources/img/select-selected.gif);
   color: transparent;
}

/*Styling del carrusel de fotos (slider)*/

#slider {
   display: inline-block;
   position: relative;
   width: 100%;
   height: auto;
   margin: 2% 0;

   img {
      display: none;
   }

   img.show {
      display: inline-block;
      width: 80%;
      margin: 2px 10%;
      animation: show 0.6s cubic-bezier(0.39, 0.575, 0.565, 1) both;
   }

   div {
      display: inline-block;
      width: 60%;
      height: 24px;
      -webkit-user-select: none;
      user-select: none;
   }
}

.material-symbols-outlined {
   font-variation-settings:
      "FILL" 0,
      "wght" 400,
      "GRAD" 200,
      "opsz" 48;
   color: #08a6e4;
   display: inline-block;
   margin: 0 2px 0 2px;
   cursor: pointer;
   transition: all 0.5s;
   -webkit-user-select: none;
   user-select: none;
}

.dot {
   display: inline-block;
   width: 24px;
   height: 24px;
   margin: 0 3%;
   background-image: url(resources/svg/dot-unchecked.svg);
   background-size: cover;
   color: #08a6e4;
   cursor: pointer;
   -webkit-user-select: none;
   user-select: none;
}

.checked {
   display: inline-block;
   width: 24px;
   height: 24px;
   margin: 0 3%;
   background-image: url(resources/svg/dot-checked.svg);
   background-size: cover;
   color: #08a6e4;
   cursor: pointer;
   animation: bounce 0.6s both;
   -webkit-user-select: none;
   user-select: none;
}

/*Clase hidden condicional al ancho de pantalla */

@media only screen and (max-width: 1000px) {
   .hidden {
      display: none;
   }
}

/*Media query intermedia para controlar el ancho del pricing */

@media only screen and (min-width: 1000px) and (max-width: 1265px) {
   /*Styling pricing pt3*/

   .pr1,
   .pr2,
   .pr3 {
      width: 15rem !important;
      height: 10rem !important;
      margin: 0 0 27.969rem 0;
   }

   #pt3__pricing {
      height: 580px;
   }
}

/*styling de la versión escritorio*/

@media only screen and (min-width: 1000px) {
   .ocult {
      display: none;
   }

   /*Clase para botón return creado en JavaScript (web)*/

   .return {
      display: block;
      position: relative;
      left: -250px;
      bottom: 115px;
      margin-left: 0;
      z-index: 300;
      border-radius: 2.188rem;
      background-image: url("resources/img/boton-0.png");
      opacity: 70%;
      color: #fff;
      font-family: "Open Sans";
      font-size: 0.813rem;
      font-weight: $bold;
      width: 14.125rem;
      height: 3.563rem;
      border: none;
      transition: all 300ms ease-out;
      cursor: pointer;
      pointer-events: auto;
   }

   .return:hover {
      width: 14.125rem;
      height: 3.563rem;
      transform: scale(1.2);
      box-shadow: 5px 10px 14px 0px rgba(7, 172, 230, 0.29);
      background-image: url("resources/img/boton.gif");
      background-size: cover;
      font-size: 0px;
      border: 2px solid black;
   }

   /*Styling del header (web)*/

   #header {
      background: #fff;
      box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.29);
      display: grid;
      height: 70px;
      width: 100%;
      padding-top: 0;
      position: fixed;
      grid-template-columns: 50% 50%;
      top: 0;
   }

   #header__logo {
      color: #08a6e4;
      font-family: "Raleway", sans-serif;
      padding-top: 0rem;
      font-size: 2rem;
      font-style: normal;
      font-weight: $light;
      display: inline-block;
      width: 50%;
      margin-left: 8.5rem;
      text-decoration: none !important;
   }

   .header__nav {
      position: relative;
      display: grid;
      grid-template-columns: 25% 25% 25% 25%;
      background: none;
      width: 100%;
      height: 4.375rem;
      margin: 0;
      color: #000;
      align-items: center;
      justify-items: center;
      box-shadow: none;

      h6 {
         color: #a5a5a5;
         margin: 0;
         padding: 0;
         text-align: center;
         font-family: "Open Sans";
         font-size: 0.688rem;
         font-style: normal;
         font-weight: $bold;
         letter-spacing: 3.28px;
         text-transform: uppercase;
         display: flex;
         align-items: center;
         justify-items: center;
         height: 4.375rem;
         transition: border-bottom 150ms ease-out;
      }

      h6:hover {
         border-bottom: 0.25rem solid #08a6e4;
      }

      a {
         text-decoration: none;
      }
   }

   /*styling pt1 (web)*/

   #pt1 {
      display: grid;
      height: 85.875rem;
      margin-top: 8.125rem;

      #figure {
         height: 37.125rem;
         position: relative;
      }

      h2 {
         font-size: 2.25rem;
         font-weight: $normal;
         margin-bottom: 6.25rem;
      }
   }

   #pt1__intro {
      display: flex;
      flex-direction: column;
      width: 25rem;
      justify-content: center;
      align-items: center;
      margin-top: 0%;
      margin-bottom: 0%;

      h1 {
         font-size: 3.063rem;
      }

      button {
         width: 27.5rem;
         position: relative;
         margin-bottom: 0%;
      }
   }

   .title {
      margin-bottom: 2.375rem;
   }

   /*Styling de la imagen de fondo (web)*/

   .imgbg {
      width: 108.438rem;
      height: 37.125rem;
   }

   /*Styling de las figuras de pt1 (web)*/

   #pt1__figs {
      display: flex;
      flex-direction: row;
      justify-content: space-evenly;
   }

   #fig1,
   #fig2,
   #fig3 {
      margin: 0;
   }

   /*styling pt2 (web)*/

   #pt2 {
      display: flex;
      flex-direction: column;
      align-items: center;
      background: #f7f7f7;
      padding: 0 1.875rem;
      height: 87.188rem;
      justify-content: center;
      gap: 2.313rem;

      /*styling celda 1 (web)*/

      #pt2__c1 {
         width: 69%;
         height: 23.125rem;
         display: flex;
         flex-direction: row-reverse;
         margin: 0;
         padding: 0;
         justify-content: center;
         align-items: center;

         h2 {
            font-size: 2.25rem;
            margin-left: 2.25rem;
            margin-top: 0;
            padding: 0;
         }
      }

      .t1 {
         margin-left: 2.25rem;
         margin-top: 1.875rem;
         font-size: 1rem;
         width: 80%;
      }

      #svg1 {
         margin-top: 3.125rem;
         margin-left: 2.25rem;
      }

      .c1__text {
         display: flex;
         flex-direction: column;
      }

      .c1__imgs,
      .c1__text {
         flex-basis: 50%;
      }

      .c1__imgs {
         height: 100%;
         width: 100%;
         position: relative;
         text-align: center;
      }

      #topimg1 {
         width: 386.44px;
         height: 219px;
         transform: translateX(-0%) translateY(50%);
      }

      .img4 {
         width: 180px;
         height: 180px;
         position: absolute;
         transform: rotate(-45deg) translateX(-145%) translateY(-20%);
         transform-origin: 0 0;
         background: #fb3b64;
         border-radius: 2.563rem;
      }

      /*styling celda 2 (web)*/

      #pt2__c2 {
         width: 69%;
         height: 23.125rem;
         display: flex;
         margin: 0;
         padding: 0;
         justify-content: end;
         align-items: center;

         h2 {
            font-size: 2.25rem;
            margin-right: 0;
            margin-top: 0;
            padding: 0;
            width: 80%;
         }
      }

      .t1_1 {
         display: flex;
         margin: 1.875rem 0 0 0;
         font-size: 1rem;
         width: 70%;
      }

      #svg2 {
         margin-top: 3.125rem;
      }

      .c2__imgs,
      .c2__text {
         flex-basis: 50%;
      }

      .c2__imgs {
         height: 100%;
         width: 100%;
      }

      .c2__text {
         display: flex;
         flex-direction: column;
         align-items: flex-start;
      }

      #topimg2 {
         width: 426px;
         height: 328px;
         transform: translateX(0%) translateY(10%);
      }

      #backimg2 {
         width: 20rem;
         height: 20rem;
         transform: translateX(-135%) translateY(5%);
      }

      /*styling celda 3 (web)*/

      #pt2__c3 {
         width: 69%;
         height: 23.125rem;
         display: flex;
         margin: 0;
         padding: 0;
         justify-content: space-between;
         align-items: center;
         gap: 3.81rem;
         background: none;
      }

      #c3__text {
         flex-basis: 60%;
         background: #fff;
         height: 100%;
         width: 100%;
         display: flex;
         flex-direction: column;
         justify-content: center;
         align-items: flex-start;

         h2 {
            width: 60%;
            font-size: 2.25rem;
            margin-left: 2.25rem;
            margin-top: 0;
            padding: 0;
         }
      }

      .t2 {
         text-align: left;
         margin: 0;
         padding: 0;
         margin-left: 2.25rem;
         margin-top: 1.875rem;
         font-size: 1rem;
         width: 70%;
      }
      #svg3 {
         margin-top: 3.125rem;
         margin-left: 2.25rem;
      }

      #c3__img {
         flex-basis: 40%;
         display: flex;
         align-items: center;
         justify-content: center;
         width: 440px;
         height: 370px;
         border-radius: 0.313rem;
         border: 1px solid #e8e9ed;
         background: #55dfb4;

         img {
            transform: translateX(-10%) translateY(10%);
         }
      }
   }

   /*Styling pt3 (web)*/

   #pt3 {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      h2 {
         display: flex;
         align-items: center;
         justify-content: center;
         margin-bottom: 4.438rem;
         margin-top: 7.969rem;
      }
   }

   /*styling pricing (web)*/

   #pt3__pricing {
      display: flex;
      gap: 4.688rem;
      justify-content: center;
   }

   .pr1,
   .pr2,
   .pr3 {
      width: 23.25rem;
      height: 30.313rem;
      margin: 0 0 7.969rem 0;
   }

   #pr__red,
   #pr__blue,
   #pr__green {
      height: 461px;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      align-items: center;
   }

   #pr__red {
      .pr__title {
         position: relative;
         top: 1rem;
      }
   }

   .pr__title {
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
   }

   .pr__list {
      display: flex;
      text-align: center;
   }

   /*styling formulario (web)*/

   #pt3__contact {
      display: flex;
      justify-content: flex-end;
      width: 56rem;
      height: 27.188rem;
      margin: 0%;
      gap: 7.063rem;
      flex-wrap: wrap;
   }

   #form__flex {
      display: flex;
      flex-direction: row-reverse;
      justify-content: space-between;
   }

   #formu {
      margin-bottom: 1.375rem;
      font-size: 3.063rem;
   }

   .title2 {
      margin-bottom: 2.5rem;
   }

   #contact__form {
      justify-content: end;
      align-content: center;
   }

   #contact__qts {
      display: flex;
      justify-content: space-between;
   }

   #contact__inputs {
      width: 27.5rem;
   }

   #name,
   #email {
      width: 25.313rem;
   }

   #email {
      margin: 0%;
   }

   .check {
      width: 1.5rem;
      height: 1.5rem;
      margin-right: 0.625rem;
      display: flex;
      margin-top: 2.125rem;
      cursor: pointer;
      border-radius: 0.25rem;
      border: 1px solid #95989a;
   }

   .check:active {
      background-color: red;
      color: #08a6e4;
   }

   .checkbox__text {
      width: 25.313rem;
      display: flex;
      position: relative;
      color: #707070;
      font-family: "Open Sans";
      font-size: 0.75rem;
      font-weight: $normal;
      text-align: justify;
      bottom: 1.875rem;
      left: 2.25rem;
      margin-bottom: 0;
   }

   .f-btn {
      position: relative;
      bottom: 10rem;
      border-radius: 2.188rem;
      background: #08a6e4;
      color: #fff;
      font-family: "Open Sans";
      font-size: 0.813rem;
      font-weight: $bold;
      width: 14.125rem;
      height: 3.563rem;
      margin-bottom: 0;
      border: none;
      transition: all 300ms ease-out;
      cursor: pointer;
      pointer-events: auto;
   }

   /*styling del footer (web)*/

   #footer__text {
      float: left;
      width: 60vw;
      text-align: left;
      position: relative;
      margin-left: 8.563rem;
   }

   #footer__media {
      float: right;
      width: 7.375rem;
      margin-right: 8.563rem;

      a {
         vertical-align: middle;
         margin: 0.625rem;
         position: relative;
         margin-top: 2.063rem;
      }
   }

   /*Styling del modal (web)*/

   #modal {
      width: 300px;
      height: 150px;

      #modal-imgs {
         background-image: url(resources/img/modal-head.gif);
         background-position: center;
         height: 60px;
      }
   }

   #modal-form {
      flex-direction: column;
      padding: 10px 10px 0 10px;
      height: 80px;
      margin-top: 0;
   }

   #modal-email {
      text-align: center;
      height: 30px;
   }

   #modal-email:hover {
      transform: scale(1.15);
   }

   #modal-btn {
      margin-top: 3px;
      margin-left: 0;
      font-size: 1rem;
      padding: 2px;
      font-weight: $normal;
      width: 180px;
      height: 30px;
      border: 2px solid black;
   }

   #modal-btn:hover {
      background: url(resources/img/modal-btn-hover.gif);
      background-size: cover;
      transform: scale(1.1);
      cursor: pointer;
   }

   /*Styling del carrusel de fotos (web)*/

   #slider {
      display: inline-block;
      position: relative;
      width: 100%;
      height: auto;
      margin: 2% 0;

      img {
         display: none;
      }

      img.show {
         display: inline-block;
         width: 50%;
         margin: 2px 25%;
      }

      div {
         display: inline-block;
         width: 40%;
         height: 24px;
      }
   }
}

/*Apartado de animaciones*/

@keyframes slide-in-blurred-right {
   0% {
      transform: translateX(1000px) scaleX(2.5) scaleY(0.2);
      transform-origin: 0 50%;
      filter: blur(40px);
      opacity: 0;
   }
   100% {
      transform: translateX(0) scaleY(1) scaleX(1);
      transform-origin: 50% 50%;
      filter: blur(0);
      opacity: 1;
   }
}

.slide-in-blurred-right {
   animation: slide-in-blurred-right 0.8s cubic-bezier(0.23, 1, 0.32, 1) both;
}

@keyframes show {
   0% {
      transform: translateZ(-80px);
      opacity: 0;
   }
   100% {
      transform: translateZ(0);
      opacity: 1;
   }
}

@keyframes bounce {
   0% {
      transform: scale(0);
      animation-timing-function: ease-in;
      opacity: 0;
   }
   38% {
      transform: scale(1);
      animation-timing-function: ease-out;
      opacity: 1;
   }
   55% {
      transform: scale(0.7);
      animation-timing-function: ease-in;
   }
   72% {
      transform: scale(1);
      animation-timing-function: ease-out;
   }
   81% {
      transform: scale(0.84);
      animation-timing-function: ease-in;
   }
   89% {
      transform: scale(1);
      animation-timing-function: ease-out;
   }
   95% {
      transform: scale(0.95);
      animation-timing-function: ease-in;
   }
   100% {
      transform: scale(1);
      animation-timing-function: ease-out;
   }
}