@charset "UTF-8";
/*
    Rangos:
        0 ~ 600;        Phone
        600 ~ 900;      Tablet portrait
        900 ~ 1200;     Tablet landscape
        [1200 ~ 1800;]    Normal style
        1800 ~ + ;      Big desktop
*/
/*
    Breackpoint argument choices: 
        - phone
        - tab-port
        - tab-land
        - big-desktop

    Orden de adecuación:
        -> Base & typography -> general layout & grid -> more specific page layout -> components
*/
/* Colors */
/* Font */
/* Width */
@keyframes moveInLeft {
  0% {
    opacity: 0;
    transform: translateX(-10rem); }
  80% {
    transform: translateX(1rem); }
  100% {
    opacity: 1;
    transform: translateX(0); } }

@keyframes moveInRight {
  0% {
    opacity: 0;
    transform: translateX(10rem); }
  80% {
    transform: translateX(-1rem); }
  100% {
    opacity: 1;
    transform: translateX(0); } }

@keyframes moveInBottom {
  0% {
    opacity: 0;
    transform: translateY(3rem); }
  100% {
    opacity: 1;
    transform: translateY(0); } }

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: inherit; }

html {
  font-size: 62.5%;
  /* Las media queries no se ven afectadas por el default de nuestro font-size, por lo que no 
        podemos usar el "truco" de ponerlo a un 62.5% para que cada rem sea 10px, y además se ha 
        comprobado que los rem en media queries no funcionan siempre de forma correcta, por lo que
        es mejor la utilización de em. Teniendo en cuenta que el font-size standar estará en 16px. */
  /* Las media queries no se ven afectadas por el default de nuestro font-size, por lo que no 
        podemos usar el "truco" de ponerlo a un 62.5% para que cada rem sea 10px, y además se ha 
        comprobado que los rem en media queries no funcionan siempre de forma correcta, por lo que
        es mejor la utilización de em. Teniendo en cuenta que el font-size standar estará en 16px. */
  /* Las media queries no se ven afectadas por el default de nuestro font-size, por lo que no 
        podemos usar el "truco" de ponerlo a un 62.5% para que cada rem sea 10px, y además se ha 
        comprobado que los rem en media queries no funcionan siempre de forma correcta, por lo que
        es mejor la utilización de em. Teniendo en cuenta que el font-size standar estará en 16px. */ }
  @media only screen and (min-width: 112.5em) {
    html {
      font-size: 75%; } }
  @media only screen and (max-width: 75em) {
    html {
      font-size: 56.25%; } }
  @media only screen and (max-width: 56.25em) {
    html {
      font-size: 50%; } }

/* Scrollbar container */
::-webkit-scrollbar {
  width: .5rem;
}

/* Track */
/* Scrollbar sub-container  */
::-webkit-scrollbar-track {
  background: transparent;
  /* background-color: #A6A6A6; */
}

/* Scrollbar item */
::-webkit-scrollbar-thumb {
  background: #58595E;
  border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #c1c1c1;
}

body {
  box-sizing: border-box;
  padding: 3rem;
  /* Las media queries no se ven afectadas por el default de nuestro font-size, por lo que no 
        podemos usar el "truco" de ponerlo a un 62.5% para que cada rem sea 10px, y además se ha 
        comprobado que los rem en media queries no funcionan siempre de forma correcta, por lo que
        es mejor la utilización de em. Teniendo en cuenta que el font-size standar estará en 16px. */ }
  @media only screen and (max-width: 56.25em) {
    body {
      padding: 0; } }

::selection {
  background-color: #333;
  color: #fff; }

body {
  font-family: "Lato", sans-serif;
  font-weight: 400;
  line-height: 1.7;
  color: #777; }
  body .heading-primary {
    color: #fff;
    text-transform: uppercase;
    margin-bottom: 6rem; }
    body .heading-primary--main {
      display: block;
      font-size: 6rem;
      font-weight: 400;
      letter-spacing: 2.5rem;
      animation-name: moveInLeft;
      animation-duration: 1s;
      animation-timing-function: ease-out;
      /* Las media queries no se ven afectadas por el default de nuestro font-size, por lo que no 
        podemos usar el "truco" de ponerlo a un 62.5% para que cada rem sea 10px, y además se ha 
        comprobado que los rem en media queries no funcionan siempre de forma correcta, por lo que
        es mejor la utilización de em. Teniendo en cuenta que el font-size standar estará en 16px. */ }
      @media only screen and (max-width: 37.5em) {
        body .heading-primary--main {
          margin-top: 25vh;
          letter-spacing: 1rem;
          font-size: 4rem; } }
    body .heading-primary--sub {
      margin-top: 7rem;
      display: block;
      font-size: 2rem;
      font-weight: 700;
      letter-spacing: 1.75rem;
      animation: moveInRight 1s ease-out;
      /* Las media queries no se ven afectadas por el default de nuestro font-size, por lo que no 
        podemos usar el "truco" de ponerlo a un 62.5% para que cada rem sea 10px, y además se ha 
        comprobado que los rem en media queries no funcionan siempre de forma correcta, por lo que
        es mejor la utilización de em. Teniendo en cuenta que el font-size standar estará en 16px. */ }
      @media only screen and (max-width: 37.5em) {
        body .heading-primary--sub {
          letter-spacing: .5rem; } }
  body .heading-secondary {
    font-size: 3.5rem;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: .2rem;
    display: inline-block;
    background-image: linear-gradient(to right, #999, #000);
    -webkit-background-clip: text;
    color: transparent;
    transition: all .2s;
    /* Las media queries no se ven afectadas por el default de nuestro font-size, por lo que no 
        podemos usar el "truco" de ponerlo a un 62.5% para que cada rem sea 10px, y además se ha 
        comprobado que los rem en media queries no funcionan siempre de forma correcta, por lo que
        es mejor la utilización de em. Teniendo en cuenta que el font-size standar estará en 16px. */
    /* Las media queries no se ven afectadas por el default de nuestro font-size, por lo que no 
        podemos usar el "truco" de ponerlo a un 62.5% para que cada rem sea 10px, y además se ha 
        comprobado que los rem en media queries no funcionan siempre de forma correcta, por lo que
        es mejor la utilización de em. Teniendo en cuenta que el font-size standar estará en 16px. */ }
    @media only screen and (max-width: 56.25em) {
      body .heading-secondary {
        font-size: 3rem; } }
    @media only screen and (max-width: 37.5em) {
      body .heading-secondary {
        font-size: 2.5rem; } }
    body .heading-secondary:hover {
      transform: skewY(1deg) skewX(15deg) scale(1.1);
      text-shadow: 0.5rem 1rem 2rem rgba(0, 0, 0, 0.2); }
  body .heading-tertiary {
    font-size: 1.6rem;
    font-weight: 700;
    text-transform: uppercase; }
  body .paragraph {
    font-size: 1.6rem; }
    body .paragraph:not(:last-child) {
      margin-bottom: 3rem; }
  body .content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 16rem;
    overflow: hidden; }
    body .content__container {
      width: 100%;
      overflow: hidden;
      height: 10rem !important;
      padding: 0 4rem; }
      body .content__container__list {
        margin: 0rem;
        text-align: center;
        list-style: none;
        -webkit-animation-name: change;
        -webkit-animation-duration: 15s;
        -webkit-animation-iteration-count: infinite;
        animation-name: change;
        animation-duration: 15s;
        animation-iteration-count: infinite; }
        body .content__container__list__item {
          margin: 0;
          color: #fff;
          text-transform: uppercase;
          display: block;
          font-size: 6rem;
          font-weight: 400;
          letter-spacing: 3.5rem;
          /* Las media queries no se ven afectadas por el default de nuestro font-size, por lo que no 
        podemos usar el "truco" de ponerlo a un 62.5% para que cada rem sea 10px, y además se ha 
        comprobado que los rem en media queries no funcionan siempre de forma correcta, por lo que
        es mejor la utilización de em. Teniendo en cuenta que el font-size standar estará en 16px. */ }
          @media only screen and (max-width: 37.5em) {
            body .content__container__list__item {
              letter-spacing: 1rem;
              font-size: 5rem; } }
          body .content__container__list__item-1 {
            color: white !important; }
          body .content__container__list__item-2 {
            color: white !important; }
          body .content__container__list__item-3 {
            color: white !important; }
          body .content__container__list__item-4 {
            color: white !important; }

@-webkit-keyframes opacity {
  0%, 100% {
    opacity: 0; }
  50% {
    opacity: 1; } }

@-webkit-keyframes change {
  0%, 12.66%, 100% {
    transform: translate3d(0, 0, 0); }
  16.66%, 29.32% {
    transform: translate3d(0, -16.6%, 0); }
  33.32%, 45.98% {
    transform: translate3d(0, -33.2%, 0); }
  49.98%, 62.64% {
    transform: translate3d(0, -49.8%, 0); }
  66.64%, 79.3% {
    transform: translate3d(0, -66.5%, 0); }
  83.3%, 95.96% {
    transform: translate3d(0, -83.1%, 0); } }

@-o-keyframes opacity {
  0%, 100% {
    opacity: 0; }
  50% {
    opacity: 1; } }

@-o-keyframes change {
  0%, 12.66%, 100% {
    transform: translate3d(0, 0, 0); }
  16.66%, 29.32% {
    transform: translate3d(0, -16.6%, 0); }
  33.32%, 45.98% {
    transform: translate3d(0, -33.2%, 0); }
  49.98%, 62.64% {
    transform: translate3d(0, -49.8%, 0); }
  66.64%, 79.3% {
    transform: translate3d(0, -66.5%, 0); }
  83.3%, 95.96% {
    transform: translate3d(0, -83.1%, 0); } }

@-moz-keyframes opacity {
  0%, 100% {
    opacity: 0; }
  50% {
    opacity: 1; } }

@-moz-keyframes change {
  0%, 12.66%, 100% {
    transform: translate3d(0, 0, 0); }
  16.66%, 29.32% {
    transform: translate3d(0, -16.6%, 0); }
  33.32%, 45.98% {
    transform: translate3d(0, -33.2%, 0); }
  49.98%, 62.64% {
    transform: translate3d(0, -49.8%, 0); }
  66.64%, 79.3% {
    transform: translate3d(0, -66.5%, 0); }
  83.3%, 95.96% {
    transform: translate3d(0, -83.1%, 0); } }

@keyframes opacity {
  0%, 100% {
    opacity: 0; }
  50% {
    opacity: 1; } }

@keyframes change {
  0%, 12.66%, 100% {
    transform: translate3d(0, 0, 0); }
  16.66%, 29.32% {
    transform: translate3d(0, -16.6%, 0); }
  33.32%, 45.98% {
    transform: translate3d(0, -33.2%, 0); }
  49.98%, 62.64% {
    transform: translate3d(0, -49.8%, 0); }
  66.64%, 79.3% {
    transform: translate3d(0, -66.5%, 0); }
  83.3%, 95.96% {
    transform: translate3d(0, -83.1%, 0); } }

/* HASTA AQUI */
.u-center-text {
  text-align: center !important; }

.u-margin-bottom-big {
  margin-bottom: 8rem !important; }

.u-margin-bottom-medium {
  margin-bottom: 4rem !important;
  /* Las media queries no se ven afectadas por el default de nuestro font-size, por lo que no 
        podemos usar el "truco" de ponerlo a un 62.5% para que cada rem sea 10px, y además se ha 
        comprobado que los rem en media queries no funcionan siempre de forma correcta, por lo que
        es mejor la utilización de em. Teniendo en cuenta que el font-size standar estará en 16px. */ }
  @media only screen and (max-width: 56.25em) {
    .u-margin-bottom-medium {
      margin-bottom: 3rem !important; } }

.u-margin-bottom-small {
  margin-bottom: 1.5rem !important; }

.u-margin-top-big {
  margin-top: 8rem !important;
  /* Las media queries no se ven afectadas por el default de nuestro font-size, por lo que no 
        podemos usar el "truco" de ponerlo a un 62.5% para que cada rem sea 10px, y además se ha 
        comprobado que los rem en media queries no funcionan siempre de forma correcta, por lo que
        es mejor la utilización de em. Teniendo en cuenta que el font-size standar estará en 16px. */ }
  @media only screen and (max-width: 56.25em) {
    .u-margin-top-big {
      margin-bottom: 5rem !important; } }

.u-margin-top-huge {
  margin-top: 10rem !important; }

.btn, .btn:link, .btn:visited {
  text-transform: uppercase;
  text-decoration: none;
  padding: 1.5rem 4rem;
  display: inline-block;
  border-radius: 10rem;
  transition: all .2s;
  position: relative;
  font-size: 1.6rem;
  border: none;
  cursor: pointer; }

.btn:hover {
  transform: translateY(-0.3rem);
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.2); }
  .btn:hover::after {
    transform: scaleX(1.4) scaleY(1.6);
    opacity: 0; }

.btn:active, .btn:focus {
  outline: none;
  transform: translateY(-0.1rem);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2); }

.btn--white {
  background-color: #fff;
  color: #777; }
  .btn--white::after {
    background-color: #fff; }

.btn--green {
  background-color: #333;
  color: #fff; }
  .btn--green::after {
    background-color: #333; }

.btn::after {
  content: "";
  display: inline-block;
  height: 100%;
  width: 100%;
  border-radius: 10rem;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  transition: all .4s; }

.btn--animated {
  animation: moveInBottom .5s ease-out;
  animation-delay: .75s;
  animation-fill-mode: backwards; }

.btn-text:link, .btn-text:visited {
  font-size: 1.6rem;
  color: #333;
  display: inline-block;
  text-decoration: none;
  border-bottom: 0.1rem solid #333;
  padding: .3rem;
  transition: .2s; }

.btn-text:hover {
  background-color: #333;
  color: #fff;
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.2);
  transform: translateY(-0.2rem); }

.btn-text:active {
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
  transform: translateY(0); }

.composition {
  position: relative;
  /* Para actuar sobre las imágenes que no están en hover */ }
  .composition__photo {
    /* Siempre definir el width de las imágenes con % de ser posible, ya que de esta manera, 
            se ajustará a diferentes pantallas en base al viewport.*/
    width: 55%;
    box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.4);
    border-radius: .2rem;
    position: absolute;
    z-index: 10;
    transition: all .2s;
    outline-offset: 1rem;
    /* Las media queries no se ven afectadas por el default de nuestro font-size, por lo que no 
        podemos usar el "truco" de ponerlo a un 62.5% para que cada rem sea 10px, y además se ha 
        comprobado que los rem en media queries no funcionan siempre de forma correcta, por lo que
        es mejor la utilización de em. Teniendo en cuenta que el font-size standar estará en 16px. */ }
    @media only screen and (max-width: 56.25em) {
      .composition__photo {
        float: left;
        position: relative;
        width: 33.33333333%;
        box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.2); } }
    .composition__photo--p1 {
      left: 0;
      top: -2rem;
      /* Las media queries no se ven afectadas por el default de nuestro font-size, por lo que no 
        podemos usar el "truco" de ponerlo a un 62.5% para que cada rem sea 10px, y además se ha 
        comprobado que los rem en media queries no funcionan siempre de forma correcta, por lo que
        es mejor la utilización de em. Teniendo en cuenta que el font-size standar estará en 16px. */ }
      @media only screen and (max-width: 56.25em) {
        .composition__photo--p1 {
          top: 0; } }
    .composition__photo--p2 {
      right: 0;
      top: 2rem;
      /* Las media queries no se ven afectadas por el default de nuestro font-size, por lo que no 
        podemos usar el "truco" de ponerlo a un 62.5% para que cada rem sea 10px, y además se ha 
        comprobado que los rem en media queries no funcionan siempre de forma correcta, por lo que
        es mejor la utilización de em. Teniendo en cuenta que el font-size standar estará en 16px. */ }
      @media only screen and (max-width: 56.25em) {
        .composition__photo--p2 {
          top: 0;
          transform: scale(1.3);
          z-index: 12; } }
    .composition__photo--p3 {
      left: 20%;
      top: 10rem;
      /* Las media queries no se ven afectadas por el default de nuestro font-size, por lo que no 
        podemos usar el "truco" de ponerlo a un 62.5% para que cada rem sea 10px, y además se ha 
        comprobado que los rem en media queries no funcionan siempre de forma correcta, por lo que
        es mejor la utilización de em. Teniendo en cuenta que el font-size standar estará en 16px. */ }
      @media only screen and (max-width: 56.25em) {
        .composition__photo--p3 {
          top: 0;
          left: 0; } }
    .composition__photo:hover {
      outline: 0.5rem solid #333;
      transform: scale(1.1) translateY(-0.5rem);
      box-shadow: 0 2.5rem 4rem rgba(0, 0, 0, 0.6);
      z-index: 20; }
  .composition:hover .composition__photo:not(:hover) {
    transform: scale(0.9); }

.feature-box {
  background-color: rgba(255, 255, 255, 0.8);
  font-size: 1.5rem;
  padding: 2.5rem;
  text-align: center;
  border-radius: .3rem;
  box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.15);
  transition: transform .3s;
  /* Las media queries no se ven afectadas por el default de nuestro font-size, por lo que no 
        podemos usar el "truco" de ponerlo a un 62.5% para que cada rem sea 10px, y además se ha 
        comprobado que los rem en media queries no funcionan siempre de forma correcta, por lo que
        es mejor la utilización de em. Teniendo en cuenta que el font-size standar estará en 16px. */ }
  @media only screen and (max-width: 56.25em) {
    .feature-box {
      padding: 2rem; } }
  .feature-box__icon {
    font-size: 6rem;
    margin-bottom: .5rem;
    display: inline-block;
    background-image: linear-gradient(to right, #999, #000);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    /* Las media queries no se ven afectadas por el default de nuestro font-size, por lo que no 
        podemos usar el "truco" de ponerlo a un 62.5% para que cada rem sea 10px, y además se ha 
        comprobado que los rem en media queries no funcionan siempre de forma correcta, por lo que
        es mejor la utilización de em. Teniendo en cuenta que el font-size standar estará en 16px. */ }
    @media only screen and (max-width: 56.25em) {
      .feature-box__icon {
        margin-bottom: 0; } }
  .feature-box:hover {
    transform: translateY(-1.5rem) scale(1.05); }

.card {
  perspective: 150rem;
  -moz-perspective: 150rem;
  height: 52rem;
  position: relative;
  /* Cuando hacemos hover en la card, la card__side se transforma */
  /* Removemos el respond y llamamos directamente al media query como tal
            porque en este caso queremos utilizar otra directiva que nos permita saber
            si el dispositivo puede o no hacer hover, es decir, si se trata de un dispositivo 
            touch o no, en cuyo caso no se debería voltear la tarjeta sino que se debería 
            presentar directamente la tarjeta con precio */ }
  .card__side {
    height: 52rem;
    transition: all .8s ease;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    backface-visibility: hidden;
    border-radius: .3rem;
    box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.15); }
    .card__side--front {
      background-color: #fff; }
    .card__side--back {
      transform: rotateY(180deg); }
      .card__side--back-1 {
        background-image: linear-gradient(to right bottom, #ffb900, #ff7730); }
      .card__side--back-2 {
        background-image: linear-gradient(to right bottom, #999, #000); }
      .card__side--back-3 {
        background-image: linear-gradient(to right bottom, #2998ff, #5643fa); }
  .card:hover .card__side--front {
    transform: rotateY(-180deg); }
  .card:hover .card__side--back {
    transform: rotateY(0deg); }
  .card__picture {
    background-size: cover;
    height: 25rem;
    background-blend-mode: screen;
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
    clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
    border-top-left-radius: .3rem;
    border-top-right-radius: .3rem; }
    .card__picture--1 {
      background-image: linear-gradient(to right bottom, #ffb900, #ff7730), url(../img/nat-5.jpg); }
    .card__picture--2 {
      background-image: linear-gradient(to right bottom, #999, #000), url(../img/nat-6.jpg); }
    .card__picture--3 {
      background-image: linear-gradient(to right bottom, #2998ff, #5643fa), url(../img/nat-7.jpg); }
  .card__heading {
    font-size: 2.8rem;
    font-weight: 300;
    text-transform: uppercase;
    text-align: right;
    color: #fff;
    position: absolute;
    top: 15rem;
    right: 2rem;
    width: 75%; }
  .card__heading-span {
    padding: 1rem 1.5rem;
    /* Como el elemento, sus dos líneas, se tratan como una sola línea de texto, con este decoration-break,
            conseguimos que el estilo se clone a la segunda o demás líneas cuando la línea se rompa tratándolas como 
            elementos diferentes. Recordar también que para que funcione en chrome, como algunas otras propiedades, 
            es necesario el -webkit- prefix.*/
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone; }
    .card__heading-span--1 {
      background-image: linear-gradient(to right bottom, rgba(255, 185, 0, 0.85), rgba(255, 119, 48, 0.85)); }
    .card__heading-span--2 {
      background-image: linear-gradient(to right bottom, rgba(153, 153, 153, 0.85), rgba(0, 0, 0, 0.85)); }
    .card__heading-span--3 {
      background-image: linear-gradient(to right bottom, rgba(41, 152, 255, 0.85), rgba(86, 67, 250, 0.85)); }
  .card__details {
    padding: 3rem;
    padding-top: 5rem; }
    .card__details ul {
      margin: 0 auto;
      list-style: none;
      width: 80%; }
      .card__details ul li {
        text-align: center;
        font-size: 1.5rem;
        padding: 1rem; }
        .card__details ul li:not(:last-child) {
          border-bottom: 0.1rem solid #eee; }
  .card__cta {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    text-align: center; }
  .card__price-box {
    text-align: center;
    margin-bottom: 8rem;
    color: #fff; }
  .card__price-only {
    font-size: 1.4rem;
    text-transform: uppercase; }
  .card__price-value {
    font-size: 6rem;
    font-weight: 100; }
  @media only screen and (max-width: 56.25em), only screen and (hover: none) {
    .card {
      /* Lo contrario a hover: none sería hover: hover */
      height: auto;
      border-radius: .3rem;
      background-color: #fff;
      box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.15);
      /* Cuando hacemos hover en la card, la card__side se transforma */ }
      .card__side {
        height: auto;
        position: relative;
        box-shadow: none; }
        .card__side--back {
          transform: rotateY(0);
          clip-path: polygon(0 15%, 100% 0, 100% 100%, 0 100%); }
      .card:hover .card__side--front {
        transform: rotateY(0); }
      .card__details {
        padding: 1rem 3rem; }
      .card__cta {
        position: relative;
        top: 0%;
        left: 0%;
        transform: translate(0);
        width: 100%;
        padding: 7rem 4rem 4rem 4rem; }
      .card__price-box {
        margin-bottom: 3rem; }
      .card__price-value {
        font-size: 4rem; } }

.story {
  width: 75%;
  margin: 0 auto;
  box-shadow: 0 3rem 6rem rgba(0, 0, 0, 0.2);
  background-color: rgba(255, 255, 255, 0.6);
  border-radius: .3rem;
  padding: 6rem;
  padding-left: 9rem;
  font-size: 1.6rem;
  transform: skewX(-12deg);
  /* Las media queries no se ven afectadas por el default de nuestro font-size, por lo que no 
        podemos usar el "truco" de ponerlo a un 62.5% para que cada rem sea 10px, y además se ha 
        comprobado que los rem en media queries no funcionan siempre de forma correcta, por lo que
        es mejor la utilización de em. Teniendo en cuenta que el font-size standar estará en 16px. */
  /* Las media queries no se ven afectadas por el default de nuestro font-size, por lo que no 
        podemos usar el "truco" de ponerlo a un 62.5% para que cada rem sea 10px, y además se ha 
        comprobado que los rem en media queries no funcionan siempre de forma correcta, por lo que
        es mejor la utilización de em. Teniendo en cuenta que el font-size standar estará en 16px. */ }
  @media only screen and (max-width: 56.25em) {
    .story {
      width: 100%;
      padding: 4rem;
      padding-left: 7rem; } }
  @media only screen and (max-width: 37.5em) {
    .story {
      transform: skewX(0); } }
  .story__shape {
    width: 15rem;
    height: 15rem;
    float: left;
    /* shape-outside solo dice cómo o para que forma se debe 
            ajustar el texto que rodeará, con clip, hacemos realmente la forma*/
    -webkit-shape-outside: circle(50% at 50% 50%);
    shape-outside: circle(50% at 50% 50%);
    -webkit-clip-path: circle(50% at 50% 50%);
    clip-path: circle(50% at 50% 50%);
    transform: translateX(-3rem) skewX(12deg);
    position: relative;
    /* Las media queries no se ven afectadas por el default de nuestro font-size, por lo que no 
        podemos usar el "truco" de ponerlo a un 62.5% para que cada rem sea 10px, y además se ha 
        comprobado que los rem en media queries no funcionan siempre de forma correcta, por lo que
        es mejor la utilización de em. Teniendo en cuenta que el font-size standar estará en 16px. */ }
    @media only screen and (max-width: 37.5em) {
      .story__shape {
        transform: translateX(-3rem) skewX(0); } }
  .story__img {
    height: 100%;
    transform: translateX(-4rem) scale(1.4);
    /* Para arreglar ciertos problemas raros, como shake en la transición al final, o, en este caso, 
            la imagen se veía en blanco por un momento. */
    backface-visibility: hidden;
    transition: all .5s; }
  .story__text {
    transform: skewX(12deg);
    /* Las media queries no se ven afectadas por el default de nuestro font-size, por lo que no 
        podemos usar el "truco" de ponerlo a un 62.5% para que cada rem sea 10px, y además se ha 
        comprobado que los rem en media queries no funcionan siempre de forma correcta, por lo que
        es mejor la utilización de em. Teniendo en cuenta que el font-size standar estará en 16px. */ }
    @media only screen and (max-width: 37.5em) {
      .story__text {
        transform: skewX(0); } }
  .story__caption {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 20%);
    color: #fff;
    text-transform: uppercase;
    font-size: 1.7rem;
    text-align: center;
    opacity: 0;
    transition: all .5s; }
  .story:hover .story__caption {
    opacity: 1;
    transform: translate(-50%, -50%); }
  .story:hover .story__img {
    transform: translateX(-4rem) scale(1);
    filter: blur(0.3rem) brightness(80%); }

.bg-video {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: -1;
  opacity: .15;
  overflow: hidden; }
  .bg-video__content {
    height: 100%;
    width: 100%;
    /* Es como el que usamos para el cover de las imagenes, para que se ajusten 
            pero en este caso nos sirve para otro tipo de objetos, como vídeo en este caso. 
            Aunque también debería funcionar con imágenes, sin embargo para imágenes mejor utilizar el otro*/
    object-fit: cover; }

.form {
  /* El + es un siblin selector, con lo que teníamos hasta ahora seleccionábamos 
        por ejemplo a los hijos directos o lo que sea, este, nos permite seleccionar a 
        los hermanos gemelos, es decir, aquellos que suceden justo DESPUÉS del elemento, 
        pero al mismo nivel. En este caso lfunciona puesto que el label se encuentra justo después
        del input, en caso de haber algo por el medio, esto ya no funcionaría, porque este selector 
        selecciona los gemelos (justo después y al mismo nivel en el html). Para el caso en que esto 
        suceda, el caso en que solamente queramos seleccionar hermanos, es decir, elementos que se encuentran 
        al mismo nivel, incluso aunque haya otros elementos de por medio, entonces deberíamos utilizar otro
        selector para hermanos, que es: ~ .*/
  /* En el momento en que se selecciona el input de verdad, queda con la clase checked, entonces, 
        cuando ese elemento tenga esa clase (esté seleccionado), entonces cambiamos la opacidad de nuestro
        pequeño círculo definido como pseudoclase after de radio-button, y lo hacemos seleccionando primero
        radio-label, y después su hijo y en este la pseudoclase after.*/ }
  .form__group:not(:last-child) {
    margin-bottom: 2rem; }
  .form__input {
    font-size: 1.5rem;
    font-family: inherit;
    color: inherit;
    padding: 1.5rem 2rem;
    border-radius: .2rem;
    background-color: rgba(255, 255, 255, 0.5);
    border: none;
    border-bottom: .3rem solid transparent;
    width: 90%;
    display: block;
    transition: all .3s;
    /* Las media queries no se ven afectadas por el default de nuestro font-size, por lo que no 
        podemos usar el "truco" de ponerlo a un 62.5% para que cada rem sea 10px, y además se ha 
        comprobado que los rem en media queries no funcionan siempre de forma correcta, por lo que
        es mejor la utilización de em. Teniendo en cuenta que el font-size standar estará en 16px. */ }
    @media only screen and (max-width: 56.25em) {
      .form__input {
        width: 100%; } }
    .form__input:focus {
      outline: none;
      box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.1);
      border-bottom: 0.3rem solid #333; }
    .form__input:focus:invalid {
      border-bottom: 0.3rem solid #ff7730; }
    .form__input::-webkit-input-placeholder {
      color: #999; }
  .form__label {
    font-size: 1.2rem;
    font-weight: 700;
    margin-left: 2rem;
    margin-top: .7rem;
    display: block;
    transition: all .3s; }
  .form__input:placeholder-shown + .form__label {
    opacity: 0;
    /* Solamente utilizando opacity, simplemente no se vería pero sigue ahí, sin embargo, utilizando 
            también visibility, simplemente es como si no estuviera, que es lo que queremos en este caso. Y 
            utilizamos las dos, porque en este caso queremos animar cuando el elemento "entre", y visibility 
            no se puede animar, por lo que "tiramos" de opacity para el efecto. */
    visibility: hidden;
    transform: translateY(-4rem); }
  .form__radio-group {
    width: 49%;
    display: inline-block;
    /* Las media queries no se ven afectadas por el default de nuestro font-size, por lo que no 
        podemos usar el "truco" de ponerlo a un 62.5% para que cada rem sea 10px, y además se ha 
        comprobado que los rem en media queries no funcionan siempre de forma correcta, por lo que
        es mejor la utilización de em. Teniendo en cuenta que el font-size standar estará en 16px. */ }
    @media only screen and (max-width: 56.25em) {
      .form__radio-group {
        width: 100%;
        margin-bottom: 2rem; } }
  .form__radio-input {
    display: none; }
  .form__radio-label {
    font-size: 1.6rem;
    cursor: pointer;
    position: relative;
    padding-left: 5rem; }
  .form__radio-button {
    top: -.4rem;
    left: 0;
    height: 3rem;
    width: 3rem;
    border: 0.5rem solid #333;
    border-radius: 50%;
    display: inline-block;
    position: absolute; }
    .form__radio-button::after {
      background-color: #333;
      content: "";
      display: block;
      height: 1.3rem;
      width: 1.3rem;
      border-radius: 50%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      opacity: 0;
      transition: opacity .3s; }
  .form__radio-input:checked ~ .form__radio-label .form__radio-button::after {
    opacity: 1; }

.popup {
  height: 100vh;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 4000;
  opacity: 0;
  visibility: hidden;
  transition: all .3s; }
  @supports (-webkit-backdrop-filter: blur(0.1rem)) or (backdrop-filter: 0.1rem) {
    .popup {
      -webkit-backdrop-filter: blur(0.1rem);
      backdrop-filter: blur(0.1rem);
      background-color: rgba(0, 0, 0, 0.3); } }
  .popup__content {
    background-color: #fff;
    width: 75%;
    box-shadow: 0 2rem 4rem rgba(0, 0, 0, 0.8);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.25);
    border-radius: .3rem;
    display: table;
    overflow: hidden;
    opacity: 0;
    transition: all .5s .2s; }
  .popup__left {
    width: 33.33333333%;
    display: table-cell; }
  .popup__right {
    width: 66.66666666%;
    display: table-cell;
    /* Podemos ahora usar propiedad de celda de tabla para alinear el contenido */
    vertical-align: middle;
    padding: 3rem 5rem; }
  .popup__img {
    display: block;
    width: 100%; }
  .popup__text {
    font-size: 1.4rem;
    margin-bottom: 4rem;
    column-count: 2;
    column-gap: 4rem;
    column-rule: 0.1rem solid #eee;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto; }
  .popup:target {
    opacity: 1;
    visibility: visible; }
  .popup:target .popup__content {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    border: 0.3rem solid #333; }
  .popup__close:link, .popup__close:visited {
    color: #777;
    position: absolute;
    top: 2.5rem;
    right: 2.5rem;
    font-size: 3rem;
    text-decoration: none;
    display: inline-block;
    transition: all .2s;
    line-height: 1; }
  .popup__close:hover {
    color: #333; }

.header {
  height: 95vh;
  background-image: linear-gradient(to right bottom, rgba(153, 153, 153, 0.8), rgba(0, 0, 0, 0.8)), url(../img/hero-small.jpg);
  position: relative;
  background-size: cover;
  background-position: top;
  -web-clip-path: polygon(0 0, 100% 0, 100% 75vh, 50% 100%, 0 75vh);
  clip-path: polygon(0 0, 100% 0, 100% 75vh, 50% 100%, 0 75vh);
  /* Las media queries no se ven afectadas por el default de nuestro font-size, por lo que no 
        podemos usar el "truco" de ponerlo a un 62.5% para que cada rem sea 10px, y además se ha 
        comprobado que los rem en media queries no funcionan siempre de forma correcta, por lo que
        es mejor la utilización de em. Teniendo en cuenta que el font-size standar estará en 16px. */ }
  @media only screen and (min-resolution: 192dpi) and (min-width: 37.5em), only screen and (min-width: 125em) {
    .header {
      background-image: linear-gradient(to right bottom, rgba(153, 153, 153, 0.8), rgba(0, 0, 0, 0.8)), url(../img/hero.jpg); } }
  @media only screen and (max-width: 37.5em) {
    .header {
      -web-clip-path: polygon(0 0, 100% 0, 100% 90vh, 50% 100%, 0 90vh);
      clip-path: polygon(0 0, 100% 0, 100% 90vh, 50% 100%, 0 90vh); } }
  .header__logo-box {
    position: absolute;
    top: 4rem;
    left: 4rem; }
  .header__logo {
    height: 3.5rem; }
  .header__text-box {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center; }

.footer {
  background-color: #333;
  padding: 10rem 0;
  font-size: 1.4rem;
  /* Las media queries no se ven afectadas por el default de nuestro font-size, por lo que no 
        podemos usar el "truco" de ponerlo a un 62.5% para que cada rem sea 10px, y además se ha 
        comprobado que los rem en media queries no funcionan siempre de forma correcta, por lo que
        es mejor la utilización de em. Teniendo en cuenta que el font-size standar estará en 16px. */ }
  @media only screen and (max-width: 56.25em) {
    .footer {
      padding: 8rem 0; } }
  .footer__logo-box {
    /* Inline elements se tratan como texto por lo que es posible alinearlos como tal, las imágenes son 
            un ejemplo de inline element. */
    text-align: center;
    margin-bottom: 8rem;
    /* Las media queries no se ven afectadas por el default de nuestro font-size, por lo que no 
        podemos usar el "truco" de ponerlo a un 62.5% para que cada rem sea 10px, y además se ha 
        comprobado que los rem en media queries no funcionan siempre de forma correcta, por lo que
        es mejor la utilización de em. Teniendo en cuenta que el font-size standar estará en 16px. */ }
    @media only screen and (max-width: 56.25em) {
      .footer__logo-box {
        margin-bottom: 4rem; } }
  .footer__logo {
    width: 15rem;
    height: auto; }
  .footer__navigation {
    border-top: 0.1rem solid #777;
    padding-top: 2rem;
    display: inline-block;
    /* Las media queries no se ven afectadas por el default de nuestro font-size, por lo que no 
        podemos usar el "truco" de ponerlo a un 62.5% para que cada rem sea 10px, y además se ha 
        comprobado que los rem en media queries no funcionan siempre de forma correcta, por lo que
        es mejor la utilización de em. Teniendo en cuenta que el font-size standar estará en 16px. */ }
    @media only screen and (max-width: 56.25em) {
      .footer__navigation {
        width: 100%;
        text-align: center; } }
  .footer__list {
    list-style: none; }
  .footer__item {
    display: inline-block; }
    .footer__item:not(:last-child) {
      margin-right: 1.5rem; }
  .footer__link:link, .footer__link:visited {
    text-decoration: none;
    color: #f7f7f7;
    background-color: #333;
    text-transform: uppercase;
    display: inline-block;
    transition: all .2s; }
  .footer__link:hover, .footer__link:active {
    color: white;
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.4);
    transform: rotate(5deg) scale(1.3); }
  .footer__copyright {
    border-top: 0.1rem solid #777;
    padding-top: 2rem;
    color: #f7f7f7;
    width: 85%;
    float: right;
    text-align: center;
    /* Las media queries no se ven afectadas por el default de nuestro font-size, por lo que no 
        podemos usar el "truco" de ponerlo a un 62.5% para que cada rem sea 10px, y además se ha 
        comprobado que los rem en media queries no funcionan siempre de forma correcta, por lo que
        es mejor la utilización de em. Teniendo en cuenta que el font-size standar estará en 16px. */ }
    @media only screen and (max-width: 56.25em) {
      .footer__copyright {
        width: 100%;
        float: none; } }

/*
    Existe una propiedad llamada transform-origin que nos permite valores como left y right y nos sirve 
    para definir el origen de la transición. POR DEFECTO las transiciones toman como punto de origen un 
    punto intermedio, el centro del objeto, en cambio con esta propiedad podemos cambiar eso, lo que puede
    ser de gran utilidad y tiene 10000 posibilidades a la hora de crear ciertos efectos.
*/
.navigation__checkbox {
  display: none; }

.navigation__button {
  background-color: #fff;
  height: 7rem;
  width: 7rem;
  border-radius: 50%;
  position: fixed;
  top: 6rem;
  right: 6rem;
  z-index: 2000;
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.1);
  text-align: center;
  cursor: pointer;
  /* Las media queries no se ven afectadas por el default de nuestro font-size, por lo que no 
        podemos usar el "truco" de ponerlo a un 62.5% para que cada rem sea 10px, y además se ha 
        comprobado que los rem en media queries no funcionan siempre de forma correcta, por lo que
        es mejor la utilización de em. Teniendo en cuenta que el font-size standar estará en 16px. */
  /* Las media queries no se ven afectadas por el default de nuestro font-size, por lo que no 
        podemos usar el "truco" de ponerlo a un 62.5% para que cada rem sea 10px, y además se ha 
        comprobado que los rem en media queries no funcionan siempre de forma correcta, por lo que
        es mejor la utilización de em. Teniendo en cuenta que el font-size standar estará en 16px. */ }
  @media only screen and (max-width: 56.25em) {
    .navigation__button {
      top: 4rem;
      right: 4rem; } }
  @media only screen and (max-width: 37.5em) {
    .navigation__button {
      top: 3rem;
      right: 3rem; } }

.navigation__background {
  height: 6rem;
  width: 6rem;
  border-radius: 50%;
  position: fixed;
  top: 6.5rem;
  right: 6.5rem;
  background-image: radial-gradient(#999, #000);
  z-index: 1000;
  transition: transform .8s;
  /* Las media queries no se ven afectadas por el default de nuestro font-size, por lo que no 
        podemos usar el "truco" de ponerlo a un 62.5% para que cada rem sea 10px, y además se ha 
        comprobado que los rem en media queries no funcionan siempre de forma correcta, por lo que
        es mejor la utilización de em. Teniendo en cuenta que el font-size standar estará en 16px. */
  /* Las media queries no se ven afectadas por el default de nuestro font-size, por lo que no 
        podemos usar el "truco" de ponerlo a un 62.5% para que cada rem sea 10px, y además se ha 
        comprobado que los rem en media queries no funcionan siempre de forma correcta, por lo que
        es mejor la utilización de em. Teniendo en cuenta que el font-size standar estará en 16px. */ }
  @media only screen and (max-width: 56.25em) {
    .navigation__background {
      top: 4.5rem;
      right: 4.5rem; } }
  @media only screen and (max-width: 37.5em) {
    .navigation__background {
      top: 3.5rem;
      right: 3.5rem; } }

.navigation__nav {
  height: 100vh;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 1500;
  opacity: 0;
  width: 0;
  transition: all 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55); }

.navigation__list {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  list-style: none;
  text-align: center;
  width: 100%; }

.navigation__item {
  margin: 1rem; }

.navigation__link:link, .navigation__link:visited {
  display: inline-block;
  text-decoration: none;
  font-size: 3rem;
  padding: 1rem 2rem;
  font-weight: 300;
  color: #fff;
  text-transform: uppercase;
  background-image: linear-gradient(120deg, transparent 0%, transparent 50%, #fff 50%);
  background-size: 227%;
  transition: all .4s; }

.navigation__link:hover, .navigation__link:active {
  background-position: 100%;
  color: #333;
  transform: translateX(1rem); }

.navigation__checkbox:checked ~ .navigation__background {
  transform: scale(80); }

.navigation__checkbox:checked ~ .navigation__nav {
  width: 100%;
  opacity: 1; }

.navigation__icon {
  position: relative;
  margin-top: 3.4rem; }
  .navigation__icon, .navigation__icon::before, .navigation__icon::after {
    width: 3rem;
    height: 2px;
    background-color: #333;
    display: inline-block; }
  .navigation__icon::before, .navigation__icon::after {
    content: "";
    position: absolute;
    left: 0;
    transition: all .2s; }
  .navigation__icon::before {
    top: -.8rem; }
  .navigation__icon::after {
    top: .8rem; }

.navigation__button:hover .navigation__icon::before {
  top: -1rem; }

.navigation__button:hover .navigation__icon::after {
  top: 1rem; }

.navigation__checkbox:checked + .navigation__button .navigation__icon {
  background-color: transparent; }

.navigation__checkbox:checked + .navigation__button .navigation__icon::before {
  top: 0;
  transform: rotate(135deg); }

.navigation__checkbox:checked + .navigation__button .navigation__icon::after {
  top: 0;
  transform: rotate(-135deg); }

.section-about {
  background-color: #f7f7f7;
  padding: 25rem 0;
  margin-top: -20vh;
  /* Las media queries no se ven afectadas por el default de nuestro font-size, por lo que no 
        podemos usar el "truco" de ponerlo a un 62.5% para que cada rem sea 10px, y además se ha 
        comprobado que los rem en media queries no funcionan siempre de forma correcta, por lo que
        es mejor la utilización de em. Teniendo en cuenta que el font-size standar estará en 16px. */
  /* Las media queries no se ven afectadas por el default de nuestro font-size, por lo que no 
        podemos usar el "truco" de ponerlo a un 62.5% para que cada rem sea 10px, y además se ha 
        comprobado que los rem en media queries no funcionan siempre de forma correcta, por lo que
        es mejor la utilización de em. Teniendo en cuenta que el font-size standar estará en 16px. */ }
  @media only screen and (max-width: 56.25em) {
    .section-about {
      padding: 20rem 0; } }
  @media only screen and (max-width: 37.5em) {
    .section-about {
      padding-top: 28rem !important;
      margin-top: -22.5vh; } }

.section-features {
  padding: 20rem 0;
  background-image: linear-gradient(to right bottom, rgba(153, 153, 153, 0.8), rgba(0, 0, 0, 0.8)), url(../img/nat-4.jpg);
  background-size: cover;
  /* Para el tema de la forma estaría OK utilizar de nuevo el tema de clip como 
        hicimos en la primera sección, sin embargo, vamos a hacerlo diferente.*/
  -web-clip-path: polygon(0 0, 50% 25vh, 100% 0, 100% 100%, 0 100%);
  clip-path: polygon(0 0, 50% 25vh, 100% 0, 100% 100%, 0 100%);
  margin-top: -26.5rem;
  /* El ampersand selecciona el path, el mayor los hijos directos(SOLO LOS DIRECTOS), y el asterisco dice que todos (dentro de los hijos directos de ese path en este caso)*/
  /* Las media queries no se ven afectadas por el default de nuestro font-size, por lo que no 
        podemos usar el "truco" de ponerlo a un 62.5% para que cada rem sea 10px, y además se ha 
        comprobado que los rem en media queries no funcionan siempre de forma correcta, por lo que
        es mejor la utilización de em. Teniendo en cuenta que el font-size standar estará en 16px. */
  /* Las media queries no se ven afectadas por el default de nuestro font-size, por lo que no 
        podemos usar el "truco" de ponerlo a un 62.5% para que cada rem sea 10px, y además se ha 
        comprobado que los rem en media queries no funcionan siempre de forma correcta, por lo que
        es mejor la utilización de em. Teniendo en cuenta que el font-size standar estará en 16px. */ }
  .section-features > * {
    padding-top: 11.5vh;
    margin-top: 11.5rem !important; }
  @media only screen and (max-width: 56.25em) {
    .section-features {
      padding: 10rem 0; } }
  @media only screen and (max-width: 37.5em) {
    .section-features {
      margin-top: -11.5rem;
      -web-clip-path: polygon(0 0, 50% 10vh, 100% 0, 100% 100%, 0 100%);
      clip-path: polygon(0 0, 50% 10vh, 100% 0, 100% 100%, 0 100%); } }

.section-tours {
  background-color: #f7f7f7;
  padding: 25rem 0 15rem 0;
  margin-top: -11.5rem;
  /* Las media queries no se ven afectadas por el default de nuestro font-size, por lo que no 
        podemos usar el "truco" de ponerlo a un 62.5% para que cada rem sea 10px, y además se ha 
        comprobado que los rem en media queries no funcionan siempre de forma correcta, por lo que
        es mejor la utilización de em. Teniendo en cuenta que el font-size standar estará en 16px. */ }
  @media only screen and (max-width: 56.25em) {
    .section-tours {
      padding: 20rem 0 10rem 0; } }

.section-stories {
  position: relative;
  padding: 15rem 0;
  /* Las media queries no se ven afectadas por el default de nuestro font-size, por lo que no 
        podemos usar el "truco" de ponerlo a un 62.5% para que cada rem sea 10px, y además se ha 
        comprobado que los rem en media queries no funcionan siempre de forma correcta, por lo que
        es mejor la utilización de em. Teniendo en cuenta que el font-size standar estará en 16px. */ }
  @media only screen and (max-width: 56.25em) {
    .section-stories {
      padding: 10rem 0; } }

.section-book {
  padding: 15rem 0;
  background-image: linear-gradient(to right bottom, #999, #000);
  /* Las media queries no se ven afectadas por el default de nuestro font-size, por lo que no 
        podemos usar el "truco" de ponerlo a un 62.5% para que cada rem sea 10px, y además se ha 
        comprobado que los rem en media queries no funcionan siempre de forma correcta, por lo que
        es mejor la utilización de em. Teniendo en cuenta que el font-size standar estará en 16px. */ }
  @media only screen and (max-width: 56.25em) {
    .section-book {
      padding: 10rem 0; } }

.book {
  background-image: linear-gradient(105deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.9) 50%, transparent 50%), url(../img/nat-10.jpg);
  background-size: 100%;
  border-radius: .3rem;
  box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.25);
  /* Esta parte podríamos hacerla con el clip-path como normalmente hacemos, 
        sin embargo, con el fin de profundizar en los gradientes, lo haremos 
        utilizando esa técnica, basándonos en la opacidad en ambos lados de la imagen.
        Hacemos uso de un nuevo "punto" en la punción linear-gradient que nos permite decir,
        en el 0% tenemos blanco, en el 50% blanco pero también transparente, por lo que el cambio
        se hace sin gradiente, no le damos espacio, por eso el resultado es igual al clip-path. De
        igual manera, se ve otro argumento, y es que podemos especificar, no solo en la forma: to right bottom, 
        sino, especificar el grado de desviación. */
  /* Las media queries no se ven afectadas por el default de nuestro font-size, por lo que no 
        podemos usar el "truco" de ponerlo a un 62.5% para que cada rem sea 10px, y además se ha 
        comprobado que los rem en media queries no funcionan siempre de forma correcta, por lo que
        es mejor la utilización de em. Teniendo en cuenta que el font-size standar estará en 16px. */
  /* Las media queries no se ven afectadas por el default de nuestro font-size, por lo que no 
        podemos usar el "truco" de ponerlo a un 62.5% para que cada rem sea 10px, y además se ha 
        comprobado que los rem en media queries no funcionan siempre de forma correcta, por lo que
        es mejor la utilización de em. Teniendo en cuenta que el font-size standar estará en 16px. */ }
  @media only screen and (max-width: 75em) {
    .book {
      background-image: linear-gradient(105deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.9) 65%, transparent 65%), url(../img/nat-10.jpg);
      background-size: cover; } }
  @media only screen and (max-width: 56.25em) {
    .book {
      background-image: linear-gradient(to right, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.9) 100%), url(../img/nat-10.jpg); } }
  .book__form {
    width: 50%;
    padding: 6rem;
    /* Las media queries no se ven afectadas por el default de nuestro font-size, por lo que no 
        podemos usar el "truco" de ponerlo a un 62.5% para que cada rem sea 10px, y además se ha 
        comprobado que los rem en media queries no funcionan siempre de forma correcta, por lo que
        es mejor la utilización de em. Teniendo en cuenta que el font-size standar estará en 16px. */
    /* Las media queries no se ven afectadas por el default de nuestro font-size, por lo que no 
        podemos usar el "truco" de ponerlo a un 62.5% para que cada rem sea 10px, y además se ha 
        comprobado que los rem en media queries no funcionan siempre de forma correcta, por lo que
        es mejor la utilización de em. Teniendo en cuenta que el font-size standar estará en 16px. */ }
    @media only screen and (max-width: 75em) {
      .book__form {
        width: 65%; } }
    @media only screen and (max-width: 56.25em) {
      .book__form {
        width: 100%; } }

.row {
  max-width: 114rem;
  margin: 0 auto;
  /* Aquí estamos seleccionando TODO menos (not) el last-child, ya que no queremos que este último 
        elemento tenga un margen vertical. */
  /* Las media queries no se ven afectadas por el default de nuestro font-size, por lo que no 
        podemos usar el "truco" de ponerlo a un 62.5% para que cada rem sea 10px, y además se ha 
        comprobado que los rem en media queries no funcionan siempre de forma correcta, por lo que
        es mejor la utilización de em. Teniendo en cuenta que el font-size standar estará en 16px. */
  /* Selector de atributo. Ahora seleccionamos todos los elementos que comiencen (^) con col- , de esta 
        manera podemos dar un estilo general a todas las columnas sin añadir otra clase col y añadir dicha clase
        a cada una de ellas. */ }
  .row:not(:last-child) {
    margin-bottom: 8rem;
    /* Las media queries no se ven afectadas por el default de nuestro font-size, por lo que no 
        podemos usar el "truco" de ponerlo a un 62.5% para que cada rem sea 10px, y además se ha 
        comprobado que los rem en media queries no funcionan siempre de forma correcta, por lo que
        es mejor la utilización de em. Teniendo en cuenta que el font-size standar estará en 16px. */ }
    @media only screen and (max-width: 56.25em) {
      .row:not(:last-child) {
        margin-bottom: 6rem; } }
  @media only screen and (max-width: 56.25em) {
    .row {
      max-width: 50rem;
      padding: 0 3rem; } }
  .row::after {
    content: "";
    display: table;
    clear: both; }
  .row [class^="col-"] {
    float: left;
    /* Las media queries no se ven afectadas por el default de nuestro font-size, por lo que no 
        podemos usar el "truco" de ponerlo a un 62.5% para que cada rem sea 10px, y además se ha 
        comprobado que los rem en media queries no funcionan siempre de forma correcta, por lo que
        es mejor la utilización de em. Teniendo en cuenta que el font-size standar estará en 16px. */ }
    .row [class^="col-"]:not(:last-child) {
      margin-right: 6rem;
      /* Las media queries no se ven afectadas por el default de nuestro font-size, por lo que no 
        podemos usar el "truco" de ponerlo a un 62.5% para que cada rem sea 10px, y además se ha 
        comprobado que los rem en media queries no funcionan siempre de forma correcta, por lo que
        es mejor la utilización de em. Teniendo en cuenta que el font-size standar estará en 16px. */ }
      @media only screen and (max-width: 56.25em) {
        .row [class^="col-"]:not(:last-child) {
          margin-right: 0;
          margin-bottom: 6rem; } }
    @media only screen and (max-width: 56.25em) {
      .row [class^="col-"] {
        width: 100% !important; } }
  .row .col-1-of-2 {
    /* Calc nos permite hacer cálculos incluso mezclando unidades o medidas. calc es una función propia de css,
            y si queremos utilizar variables sass en ella, debemos utilizarlas dentro de #parentesis y cuidado con ponerlo dentro
            de los comentarios porque da error, es como si lo intentara interpolar aun estando dentro de un comentario */
    width: calc((100% - 6rem) / 2); }
  .row .col-1-of-3 {
    width: calc((100% - 2 * 6rem) / 3); }
  .row .col-2-of-3 {
    width: calc(2 * ((100% - 2 * 6rem) / 3) + 6rem); }
  .row .col-1-of-4 {
    width: calc((100% - 3 * 6rem) / 4); }
  .row .col-2-of-4 {
    width: calc( 2 * ((100% - 3 * 6rem) / 4) + 6rem); }
  .row .col-3-of-4 {
    width: calc( 3 * ((100% - 3 * 6rem) / 4) + 2 * 6rem); }