/* ======================================== Generales ======================================== */

:root {
  --clr-neutral-100: #fcfcfc;
  --clr-neutral-200: #e7eaec;
  --clr-primary-400: #2222ea;
  --clr-primary-900: #302d38;

  --ff-primary: "Montserrat", sans-serif;

  --w-maxWidth: 1920px;
  --w-regularWidth: 93rem;
}

* {
  box-sizing: border-box;
}

a {
  color: inherit;
  text-decoration: none;
}

li {
  list-style-type: none;
}

img {
  max-width: 100%;
  display: block;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  background-color: var(--clr-neutral-200);
  color: var(--clr-primary-900);
  font-family: var(--ff-primary);
}

h1,
h2,
h3,
h4,
h5,
p,
ul,
a {
  padding: 0;
  margin: 0;
}

h1 {
  font-weight: 800;
  font-size: clamp(2rem, 1.1rem + 3.25vw, 5rem);
  line-height: 1.4;
}

h2 {
  font-weight: 200;
  /* font-size: clamp(1.6rem, 1rem + 2vw, 3.5rem); */
  font-size: clamp(1.6rem, 1rem + 1.8vw, 3.5rem);
  line-height: 1.4;
}

h3 {
  font-weight: 800;
  font-size: clamp(1rem, 1rem + 1vw, 2rem);
  line-height: 1.2;
}

h4 {
  font-weight: 600;
  font-size: clamp(1rem, 0.4rem + 1.5vw, 1.5rem);
  line-height: 1.2;
}

h5 {
  font-weight: 200;
  font-size: clamp(1rem, 0.4rem + 1.5vw, 1.5rem);
  line-height: 1.2;
}

h5 span {
  font-weight: 600;
}

p,
ul {
  font-size: 1.215rem;
  font-weight: 300;
  line-height: 1.5em;
}
@media (max-width: 1200px) {
  p,
  ul {
    font-size: 1rem;
  }
}

@media (max-width: 600px) {
  p,
  ul {
    font-size: 0.875rem;
  }
}

/* ===== Container Flexbox ===== */
.flex-space {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ===== Container Cental ===== */
.container {
  max-width: var(--w-maxWidth);
  width: 93.3%;
  margin: 0 auto;
  padding: 0 8%;
}
@media (max-width: 1200px) {
  .container__nopadding {
    padding: 0;
  }
}

@media (max-width: 600px) {
  .container {
    padding: 0;
  }
}
/* ===== Container No margin left ===== */
.containerMargin {
  max-width: var(--w-maxWidth);
  margin: 0 auto;
  width: 100%;
  padding: 0 0 0 11.35%;
}

@media (max-width: 600px) {
  .containerMargin {
    width: 93.3%;
    padding: 0;
  }
}
/* ===== Container Cabecera/Footer ===== */
.headerContainer,
.footerContainer {
  align-items: flex-start;
  padding: 0 8% 0 0;
}

/* ===== Botones===== */
.btn {
  /* display: inline-block; */
  font-weight: 500;
  font-size: clamp(1rem, 0.4rem + 1vw, 1.5rem);
  white-space: nowrap;
  line-height: 1.2;
  background-color: var(--clr-neutral-100);

  border: 2px solid var(--clr-primary-900);
  padding: 1em 2.5em;
  border-radius: 1px;
  margin-left: auto;
  transition: border-radius 0.5s;
  cursor: pointer;
}
.btn--lineBlue {
  border: 2px solid var(--clr-primary-400);
  color: var(--clr-primary-400);
}
.btn:hover {
  border-radius: 50px;
}

.btn--buy,
.btn--send {
  background-color: var(--clr-primary-400);
  border: 2px solid var(--clr-primary-400);
  color: var(--clr-neutral-100);
}

.btn--cancel {
  background-color: rgb(241, 42, 42);
  border: 2px solid rgb(241, 42, 42);
  color: var(--clr-neutral-100);
}

.btn--buy span {
  text-decoration: underline;
}
.btn--black {
  color: var(--clr-primary-900);
  border: 2px solid var(--clr-primary-100);
}

.toggle__price__wrapper {
  position: relative;
  display: inline-flex;
  border-radius: 999px;
  background-color: var(--clr-neutral-100);
  border: 1px solid var(--clr-neutral-200);
  overflow: hidden;
  font-family: var(--ff-primary);
  padding: 4px;
  width: 200px;
  height: 48px;
  margin-bottom: 0.25rem;
}

.toggle__price__bg {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: 48%;
  background-color: #e0e0e0;
  border-radius: 999px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: left 0.3s ease;
}

.toggle__price__btn {
  position: relative;
  flex: 1;
  padding: 0.5rem 1.5rem;
  font-size: 1rem;
  font-weight: 500;
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.3s ease;
  z-index: 1;
}

.toggle__price__btn--active {
  color: var(--clr-primary-900);
}

.toggle__price__btn--inactive {
  color: #aaa;
}

.toggle__price__btn--fade-out,
.template__priceNote--fade-out {
  opacity: 0;
  transition: opacity 0.3s ease;
}

@media (max-width: 600px) {
  .btn--form {
    padding: 1em;
  }
}

/* ======================================== Cabecera ======================================== */

.container-header {
  width: 100%;
  padding-top: 2.5rem;
}
.header-home {
  position: absolute;
}
.header__claim {
  text-align: right;
}

@media (max-width: 600px) {
  .header__claim {
    display: none;
    opacity: 0;
  }
}

/* ======================================== Footer ======================================== */

.container-footer {
  padding-top: 15vh;
  padding-bottom: 5vh;
}

@media (max-width: 1200px) {
  .container-footer {
    padding-top: 5vh;
    padding-bottom: 5vh;
  }
}
.footer {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

/* .footer__logo {
    flex-basis: 25%;
} */

.footer__menu {
  flex-basis: 75%;
  max-width: 600px;
  display: flex;
  justify-content: space-between;
  text-align: right;
  padding-top: 1em;
  padding-bottom: 5vh;
  flex-wrap: wrap;
}

.footer__menu__column {
  flex-basis: 50%;
}

.footer__menu__elemento {
  display: inline-block;
  padding-bottom: 1em;
  font-weight: 200;
  font-size: 1rem;
  line-height: 1.2;
}

@media (max-width: 600px) {
  .footer__menu {
    flex-basis: 100%;
    text-align: left;
    padding-top: 3rem;
  }
  .footer__menu__elemento {
    font-size: 0.8rem;
  }
}

.footer__menu__elemento:hover {
  text-decoration: underline;
}

.footer__legal {
  border-top: 1px solid lightgray;
  padding: 2vh 0;
  width: 100%;
  display: flex;
  justify-content: flex-end;
}

.footer__legal > * {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}

.footer__legal__elemento {
  padding-left: 4em;
  opacity: 0.5;
  transition: all 0.1s ease-in;
  font-size: 0.8rem;
}

.footer__legal__elemento:hover {
  opacity: 0.7;
}

@media (max-width: 600px) {
  .footer__legal > * {
    justify-content: space-between;
  }
  .footer__legal__elemento {
    padding-left: 0;
    font-size: 0.6rem;
  }
}

.footer__legal__terminos {
  width: 100%;
  opacity: 0.5;
  text-align: right;
  padding-top: 1vh;
  padding-bottom: 3vh;
  font-size: 1rem;
  font-weight: 200;
}

@media (max-width: 600px) {
  .footer__legal__terminos {
    text-align: left;
    font-size: 0.6rem;
    padding-top: 3vh;
  }
}
/* ======================================== Home ======================================== */

/* ==================== Home - 1-Hero ==================== */

.container-hero {
  height: 100vh;
  width: 100%;
  overflow: hidden;
}

.heroContainer {
  max-width: var(--w-maxWidth);
  height: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  overflow: hidden;
}

@media (max-width: 600px) {
  .container-hero {
    /* Dar espacio para que quepa el botón de modelos */
    height: 110vh;
  }

  .heroContainer {
    width: 100%;
    /* width: 93.3%; */
    padding: 0;
    flex-direction: column;
    align-items: center;
  }
}

.hero__texts {
  padding-top: 20vh;
  flex-basis: 50%;
}

@media (max-width: 600px) {
  .hero__texts {
    padding-top: 4vh;
    flex-basis: 100%;
  }
}
.hero__title {
  text-align: right;
  margin-bottom: 1em;
}

@media (max-width: 600px) {
  .hero__title {
    text-align: center;
  }
}
.hero__img__smallScreen {
  visibility: hidden;
  opacity: 0;
  display: none;
}

@media (max-width: 600px) {
  .hero__img__smallScreen {
    visibility: visible;
    opacity: 1;
    order: -1;
    display: block;
    width: 100%;
  }
}

.hero__subtitle {
  width: 80%;
  margin-left: auto;
  text-align: right;
  margin-bottom: 5em;

  font-size: clamp(1rem, 0.4rem + 1.5vw, 1.25rem);
  font-weight: 400;
  line-height: 1.35em;
}

@media (max-width: 600px) {
  .hero__subtitle {
    text-align: center;
    width: 100%;
    margin-bottom: 4em;
  }
}

.hero__btn {
  text-align: right;
}

@media (max-width: 600px) {
  .hero__btn {
    text-align: center;
    /* padding-bottom: 5vh; */
  }
}

.hero__imagens {
  margin-left: 3vw;
  flex-basis: 48%;
  display: flex;
}

@media (max-width: 1200px) {
  .hero__imagens {
    margin-left: 2vw;
    flex-basis: 48%;
    display: flex;
  }
}

@media (max-width: 600px) {
  .hero__imagens {
    visibility: hidden;
    opacity: 0;
    display: none;
  }
}

.hero__imagens > * {
  position: relative;
  height: auto;
  margin-left: 3vw;
}

/* Animaciones dispositivos-hero */

.hero__phone {
  top: 0px;
  align-self: flex-end;
  animation-name: phoneAnimation;
  animation-duration: 110s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes phoneAnimation {
  0% {
    top: 0px;
  }

  100% {
    top: calc(2264px - 100vh);
  }
}
.hero__tablet {
  bottom: 0px;
  align-self: flex-start;
  animation-name: tabletAnimation;
  animation-duration: 130s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
@keyframes tabletAnimation {
  0% {
    bottom: 0px;
  }

  100% {
    bottom: calc(2088px - 100vh);
  }
}

.hero__desktop {
  margin-left: 0vw;
  top: 0px;
  align-self: flex-end;
  animation-name: desktopAnimation;
  animation-duration: 80s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes desktopAnimation {
  0% {
    top: 0px;
  }

  100% {
    top: calc(2253px - 100vh);
  }
}

/* ==================== Home - 2-Explicación ==================== */

.container-explication,
.container-subdominio,
.container-dolor,
.container-tutoriales {
  background-color: var(--clr-neutral-100);
  padding: 15vh 0;
}

.explication__btn,
.subdominio__btn,
.modelos__btn,
.black__btn {
  padding-top: 15vh;
  text-align: right;
}

/* ==================== Home - 3-Animación scroll ==================== */
.container-scroll {
  padding-bottom: 5vh;
}
.container-scroll-info {
  padding-top: 15vh;
  padding-bottom: 5vh;
}

.container-scroll-info > * {
  flex-basis: 45%;
}
.scroll__text__group {
  padding-bottom: 7vh;
}
@media (max-width: 1200px) {
  .container-scroll-info {
    padding-right: 0%;
  }
  .container-scroll-info > * {
    flex-basis: 47%;
  }
}
@media (max-width: 600px) {
  .container-scroll-info {
    flex-direction: column;
    padding-top: 10vh;
  }
  .scroll__text__group {
    padding-bottom: 5vh;
    width: 75%;
  }
  .group1 {
    text-align: right;
    margin-left: auto;
  }
  .scroll__imagens {
    /* order:-1 */
  }
}

.scroll__text__title {
  margin-bottom: 0.5em;
}

.scroll__imagens {
  position: relative;
}
/* Oculto la plantilla de cv debajo de la de proyecto para animarla con Js */
.scroll__imagens__cv,
.scroll__imagens__foto {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  /* opacity: 0; */
}

.scroll__title {
  text-align: center;
  font-weight: 800;
  font-size: clamp(2rem, 1.1rem + 3.25vw, 5rem);
  line-height: 1.4;
  padding-bottom: 1em;
}

/* ==================== Home - 4-Texto dolor ==================== */

.dolor__title {
  margin-bottom: 3em;
}
.dolor__text {
  display: flex;
  justify-content: space-between;
  text-align: left;
  margin-left: auto;
  width: 80%;
  max-width: 60rem;
}
@media (max-width: 1200px) {
  .dolor__text {
    width: 100%;
  }
}

@media (max-width: 600px) {
  .dolor__text {
    flex-direction: column;
  }
  .dolor__text__element {
    margin-bottom: 1.5em;
  }

  .container-dolor {
    padding-bottom: 5vh;
  }
}

.dolor__text__element {
  flex-basis: 47%;
}

/* ==================== Home - 5-ventajas alternando ==================== */

.container-ventajas {
  background-color: var(--clr-neutral-100);
  padding: 15vh 0;
  overflow: hidden;
}
.ventaja {
  display: flex;
  gap: 2vw;
  align-items: center;
}
.ventaja > * {
  flex-basis: 50%;
}
.ventaja__text {
  width: 75%;
}
@media (max-width: 1200px) {
  .ventaja__text {
    width: 95%;
    padding: 2vw;
    margin: 5vw 0;
  }
}

.ventaja__text-dcha {
  text-align: right;
  margin-left: auto;
}

.ventaja__text__title {
  margin-bottom: 0.5em;
}
.ventaja__imagen {
  background-color: var(--clr-neutral-200);
  /* height: 55vh; */
}

.ventaja__imagen__desktop {
  padding: 3vw;
}

/* .ventaja__imagen__tablet {
  padding: 6vw 11vw;
}
.ventaja__imagen__mobile {
  padding: 6vw 15vw;
} */

@media (max-width: 600px) {
  .ventaja {
    padding: 5vw;
    flex-direction: column;
    background-color: var(--clr-neutral-200);
    align-items: center;
    margin-bottom: 5vw;
  }
  .ventaja__imagen__desktop {
    padding: 0vw;
  }
  /* .ventaja__imagen__tablet {
    padding: 0 20vw;
    order: 2;
  }

  .ventaja__imagen__mobile {
    padding: 0vw 25vw;
  } */

  .ventaja__text {
    width: 100%;
    margin-bottom: 10vw;
    text-align: center;
  }
}

/* ==================== Home - 6-Container modelos ==================== */
.container-modelos {
  padding-bottom: 5vw;
}
.modelos {
  position: relative;
}

.modelo2,
.modelo3 {
  /* Ocultar las letras del título */
  background-color: var(--clr-neutral-200);
  position: absolute;
  top: 0;
  left: 0;
}

.modelos__title {
  padding: 1em 0;
}
.modelos__preview {
  display: grid;
  grid-template-columns: 0.6fr 0.9fr 1.5fr;
  gap: 2vw;
}
@media (max-width: 600px) {
  .modelos__preview {
    grid-template-columns: 0.6fr 0.9fr;
    grid-template-rows: 1fr 1fr;
  }
  .container__desktop {
    grid-column: 1/-1;
  }
  .modelos__btn {
    text-align: center;
  }
  .container-modelos {
    padding-bottom: 15vw;
  }
}

.modelos__preview > * {
  background-color: var(--clr-neutral-100);
  padding: 4vw;
}

@media (max-width: 600px) {
  .header__claim--view {
    display: block;
    opacity: 1;
    text-align: right;
  }
  .modelos__preview > * {
    padding: 10vw;
  }
  .modelos__btn {
    padding-top: 10vh;
  }
}
/* ==================== Home - 7-Container subdominio ==================== */
.subdominio-text {
  padding-bottom: 3vw;
}

.subdominio__btn {
  padding-top: 18vh;
  text-align: left;
}

.subdomino-img img {
  margin-left: auto;
}
/* ==================== Home - 8-Container pasos a seguir ==================== */
.container-pasos {
  padding: 15vh 0;
  overflow: hidden;
}

.pasos__info {
  margin-top: 10vw;
  align-items: center;
}

.pasos__info__text {
  min-width: 40vw;
  margin-right: 10vw;
}

.pasos__paso {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  margin-bottom: 3rem;
}

.paso__number {
  margin-right: 1.5rem;
  font-weight: 800;
  font-size: clamp(1.2rem, 1rem + 2vw, 5rem);
  line-height: 0.8;
}

.paso__text h3 {
  margin-bottom: 0.5em;
  font-weight: 800;
  font-size: clamp(0.5rem, 0.7rem + 1vw, 2rem);
  line-height: 1.2;
}

@media (max-width: 600px) {
  .paso__text p {
    display: none;
    opacity: 0;
  }

  .pasos__paso {
    margin-bottom: 1rem;
  }

  .pasos__info {
    margin-top: 15vw;
  }

  .pasos__info__text {
    min-width: 50vw;
    margin-right: 5vw;
  }
}

/* ==================== Home - 9-Container opiniones ==================== */
.tutorial-text {
  padding-bottom: 3vw;
}

.tutorial-img {
  display: flex;
  justify-content: flex-end;
}
.tutorial-img a {
  display: inline-block;
}
.tutoriales__btn {
  padding-top: 18vh;
  text-align: left;
}

/* ==================== Home - 10-Container 7 días free ==================== */

.container-freeTrial {
  background-color: var(--clr-primary-400);
  padding: 15vh 0;
  color: var(--clr-neutral-200);
}
.freeTrial-text {
  text-align: center;
}
.freeTrial-text span {
  font-weight: 800;
  font-size: clamp(2rem, 1.1rem + 3.25vw, 5.5rem);
  line-height: 1.4;
}

/* ==================== Home - 11-Container opiniones ==================== */

/* ==================== Home - 12-Container preguntas frecuentes ==================== */
.container-preguntas {
  padding: 15vh 0;
}
.preguntas__grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 3vw;
}

@media (max-width: 1200px) {
  .preguntas__grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 600px) {
  .preguntas__grid {
    grid-template-columns: 1fr;
  }
}

.preguntas__grid__cell {
  background-color: var(--clr-neutral-100);
  text-align: center;
  padding: 10%;
}

.preguntas__grid__cell span {
  display: block;
  margin-top: 0.3em;
  font-weight: 800;
  font-size: clamp(2rem, 1.1rem + 3.25vw, 5rem);
  line-height: 1.4;
}

/* ==================== Home - 13-Container tabla precios ==================== */
.container-price {
  padding: 15vh 0;
  background-color: var(--clr-neutral-100);
}
.price__title {
  margin-bottom: 3rem;
}

/* ==================== Home - 14-Container llamada a la accion oscura ==================== */
.container-blackClaim {
  background-color: var(--clr-primary-900);
  padding: 15vh 0;
  color: var(--clr-neutral-200);
}

@media (max-width: 600px) {
  .blackClaim-text {
    text-align: center;
  }
  .black__btn {
    text-align: center;
  }
}

/* ==================== Home - 15-Container prefooter ==================== */

/* ==================== Home - 16-Container Cookies ==================== */
.aviso-cookies {
  display: none;
  z-index: 100;
  width: 100%;
  padding: 1rem;
  background-color: var(--clr-primary-400);
  color: var(--clr-neutral-200);
  position: fixed;
  bottom: 0px;
}

.aviso-cookies.activo {
  display: block;
}
.cookies__botones {
  width: 20%;
  min-width: 250px;
  margin-left: 1.5rem;
}
@media (max-width: 600px) {
  .container-aviso-cookies {
    flex-wrap: wrap;
  }
  .cookies__botones {
    margin: 1rem 0 0 0;
    width: 80%;
  }
}
.cookies__enlace {
  white-space: nowrap;
  text-decoration: underline;
}

.cookies__boton {
  background-color: var(--clr-neutral-200);
  color: var(--clr-primary-400);
  padding: 0.5rem 1.8rem;
  border: none;
  cursor: pointer;
  font-weight: 800;
  margin-right: 2rem;
  border-radius: 100px;
}

.btn-cancelar-cookies {
  position: absolute;
  top: 10px;
  left: 10px;
  display: block;
  box-sizing: border-box;
  width: 15px;
  height: 15px;
  background: -webkit-linear-gradient(
      -45deg,
      transparent 0%,
      transparent 46%,
      white 16%,
      white 26%,
      transparent 56%,
      transparent 60%
    ),
    -webkit-linear-gradient(45deg, transparent 0%, transparent 46%, white 16%, white
          26%, transparent 56%, transparent 60%);
  opacity: 0.3;
}

/* ======================================== Contacto ======================================== */

.container-contact {
  padding-top: 15vh;
  min-height: 100vh;
  width: 100%;
}

.contact__texto {
  width: 65%;
}

@media (max-width: 600px) {
  .contact__texto {
    width: 100%;
  }
}

.contact__email {
  padding-top: 3.5em;
  text-align: right;
  padding-right: 15%;
}
@media (max-width: 600px) {
  .contact__email {
    text-align: left;
  }
}

/* ======================================== Nosotros ======================================== */
.bold {
  font-weight: 600;
}

.container-team {
  padding-top: 15vh;
  padding-bottom: 15vh;
  min-height: 100vh;
}

.team__element {
  padding-bottom: 6vh;
}

.team__btn {
  text-align: right;
}
@media (max-width: 600px) {
  .team__btn {
    padding-top: 3rem;
    text-align: center;
  }
}

/* ======================================== Modelos ======================================== */

.container-claim {
  padding-top: 15vh;
}

.claim__text {
  padding-bottom: 6vh;
}

.container-themes {
  padding-top: 25vh;
  padding-bottom: 15vh;
}
@media (max-width: 1200px) {
  .container-themes {
    padding-top: 10vh;
    padding-left: 7vw;
    padding-right: 5vw;
  }
}

.themes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12vw;
}
@media (max-width: 1200px) {
  .themes {
    grid-template-columns: 1fr;
    gap: 18vw;
  }
}

.theme__imagen {
  position: relative;
  display: block;
}
.theme__imagen:hover .theme__mobile {
  transform: translate(-75%, -50%);
}

/* .theme__desk {
  border-radius: 5%;
} */

.theme__mobile {
  height: 60%;
  /* border-radius: 10%; */
  /* box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.109); */
  position: absolute;
  top: 50%;
  left: 6%;
  transform: translate(-50%, -50%);
  transition: all 0.5s ease-in-out;
}

.theme__desk {
  filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.109));
}

.theme__texts {
  padding-top: 1em;
  display: flex;
  justify-content: space-between;
}

.theme__preview {
  font-weight: 200;
  font-size: 2.25vmin;
  line-height: 1.2;

  opacity: 0.7;
  text-decoration: underline;
  transition: all 0.1s ease-in;
}

.theme__preview:hover {
  opacity: 1;
}

@media (max-width: 600px) {
  .theme__preview {
    font-size: 4vmin;
  }
}

/* ======================================== Modelo ======================================== */

.container-template {
  padding-top: 15vh;
}

.template {
  align-items: flex-start;
}

@media (max-width: 600px) {
  .container-template {
    padding-top: 5vh;
  }
  .template {
    flex-direction: column;
  }
  .template__info {
    padding-top: 5vh;
    order: 1;
  }
}

.template > * {
  flex-basis: 48%;
}

/* ==================== Modelo - Info ==================== */

.template__title {
  margin-bottom: 1em;
}

.template__description {
  width: 85%;
  margin-bottom: 3.125em;
}

@media (max-width: 600px) {
  .template__title {
    margin-bottom: 0.6em;
  }
  .template__description {
    width: 100%;
  }
}

.template__price__container {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  margin-bottom: 2em;
}

.template__price__title {
  font-weight: 400;
  transition: opacity 0.3s ease;
}
.template__price__container span {
  display: block;
  font-size: 12px;
}

/* .template__price__title span {
  font-weight: 200;
  font-size: 0.6em;
} */

.template__priceNote {
  font-weight: 200;
  font-size: 0.8rem;
  margin-top: 0.4em;
  margin-bottom: 4em;
}

.template__priceNote span {
  color: var(--clr-primary-400);
  font-weight: 600;
  text-decoration: underline;
}

@media (max-width: 600px) {
  .template__title,
  .template__price__title,
  .template__priceNote {
    text-align: center;
  }
  .template__priceNote {
    font-size: 0.8rem;
    margin-bottom: 3em;
  }
}
.template__btn {
  margin: 3em 0;
}
@media (max-width: 600px) {
  .template__btn {
    text-align: center;
    margin: 2rem auto;
  }
}

.template__preview {
  margin-bottom: 12vh;
  font-weight: 200;
  font-size: 1.5rem;
  line-height: 1.2;
  display: block;
  opacity: 0.7;
  text-decoration: underline;
  transition: all 0.1s ease-in;
}

.template__preview:hover {
  opacity: 1;
}

@media (max-width: 600px) {
  .template__preview {
    font-size: 1rem;
    text-align: center;
  }
}

.template__return {
  opacity: 0.7;
  transition: all 0.1s ease-in;
  font-weight: 600;
  font-size: clamp(1rem, 0.6rem + 1.5vw, 1.5rem);
  line-height: 1.2;
  text-decoration: underline;
}
.template__return:hover {
  opacity: 1;
}
/* ==================== Modelo - Imágenes ====================*/

.template__images {
  display: grid;
  gap: 2vw;
  grid-template-columns: 1fr 1.5fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas:
    "mobile tablet"
    "desktop desktop";
}

.template__images > * {
  background-color: var(--clr-neutral-100);
}

.imagenDesktop-back {
  grid-area: desktop;
}

.imagenMobile-back {
  padding: 10% 25%;
}

.imagenTablet-back {
  padding: 10% 20%;
}

.imagenDesktop-back {
  padding: 5% 10%;
}

.imagenDesktop-back > * {
  max-width: 100%;
}

.shadowImage {
  /* box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.109); */
  filter: drop-shadow(15px 15px 20px rgba(0, 0, 0, 0.109));
  /* box-shadow: 15px 15px 20px rgba(0, 0, 0, 0.109); */
}

/* ==================== Modelo-Features ====================*/
.container-features {
  padding-top: 15vh;
  padding-bottom: 15vh;
}

@media (max-width: 600px) {
  .contenedor-features {
    padding-top: 10vh;
    padding-bottom: 5vh;
  }
}

.features__title {
  opacity: 0.7;
  margin-bottom: 3em;
}

.features__info {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.features__element {
  flex-basis: 30%;
  margin-bottom: 4rem;
}

@media (max-width: 1200px) {
  .features__element {
    flex-basis: 45%;
  }
}

@media (max-width: 600px) {
  .features__element {
    flex-basis: 100%;
  }
}
.features__element__title {
  margin-bottom: 1em;
}

/* ==================== Modelo-Opinion ====================*/

.container-opinion {
  padding-top: 15vh;
  padding-bottom: 15vh;
  background-color: var(--clr-neutral-100);
}

@media (max-width: 600px) {
  .container-opinion {
    padding-top: 5vh;
    padding-bottom: 10vh;
  }
}

.opinion__title,
.opinion__subtitle {
  text-align: right;
}

.opinion__subtitle {
  margin-bottom: 10rem;
}

.opinion__animation {
  position: relative;
}
/* Posiciono y oculto las opiniones 2-3 debajo de la opinión 1 */
.opinion2,
.opinion3 {
  position: absolute;
  top: 0;
}

.opinion__info {
  background-color: var(--clr-neutral-100);
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
  max-width: 65rem;
}

.opinion__info__img {
  flex-basis: 35%;
}

.opinion__info__text {
  flex-basis: 50%;
}

@media (max-width: 600px) {
  .opinion__info > * {
    flex-basis: 100%;
  }
  .opinion__img {
    padding-bottom: 3rem;
  }
}
.opinion__img {
  width: 100%;
}

/* Animaciones opiniones */

.opinion1 {
  z-index: 5;
  animation-name: opinion1;
  animation-duration: 21s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-delay: 0s;
  animation-play-state: running;
}

@keyframes opinion1 {
  0% {
    opacity: 1;
  }
  10% {
    opacity: 1;
  }
  30% {
    opacity: 1;
  }
  33% {
    opacity: 0;
  }
  95% {
    opacity: 0;
  }
}

.opinion2 {
  z-index: 4;
  animation-name: opinion2;
  animation-duration: 21s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-delay: 7s;
  animation-play-state: running;
}

@keyframes opinion2 {
  0% {
    opacity: 1;
  }
  10% {
    opacity: 1;
  }
  30% {
    opacity: 1;
  }
  33% {
    opacity: 0;
  }
  95% {
    opacity: 0;
  }
}

.opinion3 {
  z-index: 3;
  animation-name: opinion3;
  animation-duration: 21s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-delay: 14s;
  animation-play-state: running;
}

@keyframes opinion3 {
  0% {
    opacity: 1;
  }
  10% {
    opacity: 1;
  }
  30% {
    opacity: 1;
  }
  33% {
    opacity: 0;
  }
  95% {
    opacity: 0;
  }
}

/* ======================================== Gracias ======================================== */

.container-gracias {
  padding-top: 15vh;
  min-height: 100vh;
  width: 100%;
}

.gracias__texto {
  width: 75%;
}

@media (max-width: 600px) {
  .gracias__texto {
    width: 100%;
  }
}

.gracias__title {
  padding-bottom: 2em;
}
.gracias__list {
  padding-left: 2em;
  padding-bottom: 2em;
}
.gracias__paragraph {
  padding: 1.5rem 0;
}
.gracias__flex {
  align-items: flex-start;
}
@media (max-width: 600px) {
  .gracias__flex {
    align-items: flex-start;
    flex-direction: column;
  }
}

.gracias__textos {
  flex-basis: 50%;
}
.gracias__gif {
  /* padding-top: 1rem; */
  width: 40%;
  max-width: 400px;
}

@media (max-width: 600px) {
  .gracias__gif {
    margin: 0 auto;
    width: 60%;
    order: -1;
    padding-bottom: 2rem;
  }
}

/* ======================================== Gracias-Paso 1_Formulario ======================================== */

.container-form {
  padding-top: 15vh;
  min-height: 100vh;
  width: 100%;
}

.form__title {
  padding-bottom: 1.5em;
}

input[type="text"],
input[type="email"],
input[type="url"] {
  text-transform: lowercase;
  display: block;
  width: 50%;
  min-width: 500px;
  padding: 0.5rem;
  font-size: 1rem;
  margin: 2rem 0;
  border: none;
  border-bottom: 2px solid lightgray;
  background-color: var(--clr-neutral-200);
}

.form__preview__title {
  display: block;
  padding-top: 3rem;
  padding-bottom: 0.5rem;
}

.form__preview__box {
  width: 50%;
  min-width: 500px;
  background-color: var(--clr-neutral-100);
  padding: 1rem;
  text-align: center;
  overflow: hidden;
}

@media (max-width: 600px) {
  input[type="text"],
  input[type="email"],
  input[type="url"] .form__preview__box {
    min-width: 0px;
    width: 100%;
  }
}

.form__web {
  font-family: var(--ff-primary);
  font-weight: 600;
  font-size: clamp(1rem, 0.4rem + 1.5vw, 1.5rem);
  line-height: 1.2;
  color: rgb(173, 173, 173);
}
.form__web__name {
  color: var(--clr-primary-900);
}

.form__btns {
  padding-top: 5rem;
  padding-bottom: 3rem;
  width: 100%;
  text-align: right;
}

button[type="submit"] {
  margin-left: 3rem;
}

@media (max-width: 600px) {
  .form__btns {
    text-align: right;
    width: 100%;
  }
  button[type="submit"] {
    margin-left: 1rem;
  }
}

/* ======================================== Tutoriales - Alvar Aalto | Louis Kahn | LeCorbusier ======================================== */
.container-tutorial {
  padding-top: 15vh;
  min-height: 100vh;
  width: 100%;
}

.tutorial__titulo {
  width: 85%;
}
.tutorial__subtitulo {
  padding-top: 4em;
  padding-bottom: 1em;
}

.tutorial__video {
  height: 0;
  overflow: hidden;
  padding-bottom: 56.25%;
  padding-top: 30px;
  position: relative;
}
.tutorial__video iframe,
.tutorial__video object,
.tutorial__video embed {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

/* ======================================== Páginas Secundarias ======================================== */

.container-legal,
.container-privacidad,
.container-condiciones,
.container-cookies {
  padding-top: 15vh;
  padding-bottom: 15vh;
}

.legal__title,
.legal__text,
.privacidad__title,
.privacidad__text,
.condiciones__title,
.condiciones__text,
.cookies__title,
.cookies__text {
  margin: 1em 0;
}

.legal__text,
.privacidad__text,
.condiciones__text,
.cookies__text {
  font-size: 0.8rem;
}