@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Roboto:ital,wght@0,100..900;1,100..900&family=Saira:ital,wght@0,100..900;1,100..900&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
/* $nombre: valor */
/*medidas*/
/* deco texto*/
/*media queries*/
.grid-Area img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
}

.card .frente img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card div {
  transition: 5s;
  width: 100%;
  height: 100%;
}

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

nav {
  font-size: 2rem;
  padding: auto;
  gap: 1rem;
  width: 100%;
}
@media (max-width: 768px) {
  nav {
    font-size: 1rem;
    gap: 0.5rem;
  }
}
nav ul {
  list-style: none; /* sin viñetas en la lista*/
  display: flex;
  justify-content: space-around;
}
@media (max-width: 768px) {
  nav ul {
    flex-direction: column;
  }
}
nav li > a {
  color: black;
  text-decoration: none;
}
nav li > a:hover {
  background-color: rgb(237, 202, 213);
}

.subrayado {
  text-decoration: underline rgb(232, 151, 174) solid;
}

.navbar-nav :hover {
  background-color: rgb(237, 202, 213);
}

header nav.mobile {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  width: 80vw;
  margin: 0.5rem auto;
}

.tipografia1 {
  font-size: 10rem;
  color: rgb(42, 39, 39);
  text-decoration: underline;
  text-align: center;
  font-family: "Montserrat", sans-serif;
  margin: auto;
  padding: 2rem;
  background-image: linear-gradient(-20deg, #ddd6f3 0%, #faaca8 100%, #faaca8 100%);
  font-weight: bold;
}
@media (max-width: 768px) {
  .tipografia1 {
    padding: 0.5rem;
    font-size: 3rem;
  }
}
.tipografia1 .montserrat {
  font-family: "Montserrat", sans-serif;
}

.position {
  position: sticky;
  top: 0;
  z-index: 1000;
}

.flex {
  display: flex;
  justify-content: space-around; /*centro horizontal*/
  align-items: center; /* Alinea todo al centro */
  /*
  display: flex;
  align-items: center;
  justify-content: space-around;*/
}
@media (max-width: 768px) {
  .flex {
    display: flex;
    justify-content: space-around; /*centro horizontal*/
    align-items: center; /* Alinea todo al centro */
    flex-direction: column;
  }
}
@media (max-width: 768px) {
  .flex li {
    display: flex;
    justify-content: center; /*centro horizontal*/
    align-items: center; /* Alinea todo al centro */
  }
}

.logo img {
  margin: 1rem;
  padding: auto;
  height: 15rem; /* El alto debe ser igual al ancho */
  border-radius: 80%; /* Esto crea el efecto de círculo */
}
@media (max-width: 768px) {
  .logo img {
    margin: 0.5rem;
    height: 9rem;
    display: flex;
    justify-content: space-around; /*centro horizontal*/
    align-items: center; /* Alinea todo al centro */
  }
}

.movi-logo {
  animation: swirl-in-fwd 0.8s ease-out both;
}
@keyframes swirl-in-fwd {
  0% {
    transform: rotate(-540deg) scale(0);
    opacity: 0;
  }
  100% {
    transform: rotate(0) scale(1);
    opacity: 1;
  }
}

button {
  font-size: 1.5rem;
  background-color: rgb(239, 167, 167);
  margin: 1.5rem;
  align-items: flex-end;
  border-radius: 0.5rem;
}
button:active {
  background-color: rgb(164, 241, 216);
}

.card {
  width: 20rem;
  height: 20rem;
  position: relative;
  margin: 1rem auto;
  background-image: linear-gradient(to top, lightgrey 0%, lightgrey 1%, #e0e0e0 26%, #efefef 48%, #d9d9d9 75%, #bcbcbc 100%);
}
@media (max-width: 768px) {
  .card {
    width: 12rem;
    height: 12rem;
  }
}
.card div {
  position: absolute;
  backface-visibility: hidden; /* OBLIGATORIO en ambas caras para ocultar el reverso */
  border-radius: 1rem;
  overflow: hidden;
}
.card .frente {
  transform: perspective(600px) rotateY(0deg);
}
.card:hover .frente {
  transform: perspective(600px) rotateY(180deg);
}
.card .detras {
  background-color: #08afbe;
  transform: perspective(600px) rotateY(180deg);
  font-size: 1rem;
  display: flex;
  justify-content: center; /*centro horizontal*/
  align-items: center; /* Alinea todo al centro */
  /*
  display: flex;
  justify-content: center;
  align-items: center;*/
  flex-direction: column;
}
@media (max-width: 768px) {
  .card .detras {
    font-size: 0.5rem;
    background-color: #e77ec5;
  }
}
.card:hover .detras {
  transform: perspective(600px) rotateY(360deg);
}

form {
  display: flex;
  justify-content: center; /*centro horizontal*/
  align-items: center; /* Alinea todo al centro */
  /*
  display: flex;
  justify-content: center;
  align-items: center;*/
  flex-direction: column; /* Pone un campo debajo del otro */
  gap: 0.5rem; /* Separa las celdas equitativamente */
  max-width: 50rem;
  width: 100%;
  margin: auto;
  border: solid rgb(78, 78, 78);
  background-color: rgb(239, 163, 204);
}
@media (max-width: 768px) {
  form {
    margin: auto;
  }
}
form:focus {
  border-color: rgb(164, 241, 216);
  box-shadow: 0.5rem 0.5rem rgb(164, 241, 216); /*usado para dar el efecto 3D*/
}
form input, form textarea, form label {
  font-size: 1.5rem;
  font-family: "Lato", sans-serif;
  display: flex;
  justify-content: center; /*centro horizontal*/
  align-items: center; /* Alinea todo al centro */
}
@media (max-width: 575px) {
  form input, form textarea, form label {
    width: 100%;
  }
}

h3 {
  text-decoration: underline;
}

h4 {
  font-size: 2.5rem;
  text-align: center;
  animation: mover 10s ease-in-out 0s infinite;
  margin: 1.5rem;
}
@media (max-width: 768px) {
  h4 {
    font-size: 1.5rem;
  }
}
@keyframes mover {
  40% {
    color: rgb(231, 42, 212);
  }
  40% {
    color: rgb(148, 11, 227);
  }
  20% {
    color: rgb(239, 11, 102);
  }
}

.bloque-iframe {
  width: 40vw;
  height: 70vh;
  margin: auto;
  margin: 0.5rem;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  border-radius: 10%;
}
@media (max-width: 768px) {
  .bloque-iframe {
    width: 90%;
    max-height: 70vh;
    display: flex;
    align-items: center;
    margin: auto;
    padding: 1rem;
    gap: 0.5rem;
  }
}
@media (max-width: 575px) {
  .bloque-iframe {
    margin: 0.5rem;
  }
}

.contenedor {
  display: flex;
  justify-content: center; /*centro horizontal*/
  align-items: center; /* Alinea todo al centro */
}

.tipografia2 {
  font-size: 2.5rem;
  text-align: center;
  color: rgb(53, 52, 52);
  background-image: linear-gradient(-20deg, #ddd6f3 0%, #faaca8 100%, #faaca8 100%);
  font-family: "Montserrat", sans-serif;
}
@media (max-width: 768px) {
  .tipografia2 {
    font-size: 1.5rem;
    margin: 1rem;
  }
}
.tipografia2 .montserrat {
  font-family: "Montserrat", sans-serif;
}

.tipografia3 {
  font-size: 1.5rem;
  text-align: center;
  color: black;
  font-family: "Lato", sans-serif;
  margin: 0.5rem;
  padding: 0.5rem;
}
.tipografia3 .lato {
  font-family: "Lato", sans-serif;
}

.gridAreaXY {
  display: grid;
  grid-template-columns: 70% 30%;
  grid-template-rows: 90%;
  grid-template-areas: "cajaX cajaY";
  align-items: center;
  gap: 1rem;
  padding: 0.5rem;
}
@media (max-width: 768px) {
  .gridAreaXY {
    display: block;
    align-items: center;
    gap: 0.5rem;
  }
}
.gridAreaXY .cajaX {
  grid-area: cajaX;
  font-size: 1.5rem;
}
@media (max-width: 768px) {
  .gridAreaXY .cajaX {
    font-size: 1rem;
  }
}
.gridAreaXY .cajaY {
  grid-area: cajaY;
  border-radius: 50%;
  border: solid rgb(239, 163, 204);
  margin: auto;
}

.fotomia {
  border-radius: 10%;
}
@media (max-width: 768px) {
  .fotomia {
    display: block;
    align-items: center;
  }
}

.gridInit {
  display: grid;
  grid-template-columns: 60% 40%;
  grid-template-rows: 90%;
  grid-template-areas: "initX initY";
  align-items: center;
  gap: 1rem;
  padding: 0.5rem;
}
@media (max-width: 768px) {
  .gridInit {
    display: block;
    align-items: center;
    gap: 0.5rem;
  }
}
.gridInit .initX {
  grid-area: initX;
  font-size: 1.5rem;
  text-align: center;
}
.gridInit .initY {
  grid-area: initY;
  margin: auto;
}
@media (max-width: 768px) {
  .gridInit .initY {
    align-items: center;
  }
}

.grid-Area {
  display: grid;
  grid-template-columns: 1fr repeat(3, 1fr);
  grid-template-rows: repeat(4, 1fr);
  grid-template-areas: "planta planta mesa mesa" "planta planta  mesa mesa" "gato gato flor edificio" "gato gato flor edificio";
  margin: 0 auto;
  width: 400px;
  height: 400px;
  position: relative;
  background-color: rgb(239, 163, 204);
  gap: 0.5rem;
  padding: 1rem;
}
@media (max-width: 768px) {
  .grid-Area {
    width: 300px;
    height: 300px;
    padding: 0.5rem;
  }
}
.grid-Area .planta {
  grid-area: planta;
  border-radius: 20%;
}
.grid-Area .mesa {
  grid-area: mesa;
  object-fit: fill;
  object-position: center;
  border: 1rem solid rgb(164, 241, 216);
}
.grid-Area .gato {
  grid-area: gato;
}
.grid-Area .flor {
  grid-area: flor;
}
.grid-Area .edificio {
  grid-area: edificio;
}

.secciones {
  display: grid;
  grid-template-columns: 1fr, 1fr;
  grid-template-rows: 1fr, 1fr;
  grid-template-areas: "seccion1 seccion2" "seccion3 seccion4";
  gap: 1rem;
  margin: 1rem;
  padding: 1rem;
  align-items: center;
}
@media (max-width: 768px) {
  .secciones {
    display: block;
    align-items: center;
    gap: 0.5rem;
  }
}
.secciones .seccion1 {
  grid-area: seccion1;
  background-color: #f5d1cf;
  border-radius: 10%;
  -webkit-animation: slide-in-left 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  animation: slide-in-left 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
@keyframes slide-in-left {
  0% {
    -webkit-transform: translateX(-1000px);
    transform: translateX(-1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}
.secciones .seccion2 {
  grid-area: seccion2;
  background-color: rgb(146, 185, 186);
  border-radius: 10%;
  -webkit-animation: slide-in-right 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  animation: slide-in-right 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
@keyframes slide-in-right {
  0% {
    -webkit-transform: translateX(1000px);
    transform: translateX(1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}
.secciones .seccion3 {
  grid-area: seccion3;
  background-color: rgb(241, 233, 165);
  border-radius: 10%;
  -webkit-animation: slide-in-left 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  animation: slide-in-left 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
@keyframes slide-in-left {
  0% {
    -webkit-transform: translateX(-1000px);
    transform: translateX(-1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}
.secciones .seccion4 {
  grid-area: seccion4;
  background-color: #ddd6f3;
  border-radius: 10%;
  -webkit-animation: slide-in-right 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  animation: slide-in-right 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
@keyframes slide-in-right {
  0% {
    -webkit-transform: translateX(1000px);
    transform: translateX(1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}
.secciones .tipografia4 {
  font-size: 1rem;
  font-family: "Montserrat", sans-serif;
  text-align: center;
}
.secciones .tipografia4 .montserrat {
  font-family: "Montserrat", sans-serif;
}
.secciones .negrita {
  font-weight: bold;
  color: rgb(53, 52, 52);
}
.secciones .vigencia {
  font-size: 0.7rem;
  color: #757575; /* Un tono grisáceo profesional */
  font-style: italic; /* Letra cursiva para denotar aclaración */
  margin-top: 0.5rem; /* Separación del resto de los precios */
  line-height: 1.3;
}

.gridBloque {
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: 100%;
  grid-template-areas: "vista1 vista2";
  gap: 1rem;
  margin: 1rem;
  align-items: center;
  justify-items: center;
}
@media (max-width: 768px) {
  .gridBloque {
    display: block;
    align-items: center;
    justify-content: center;
    margin: auto;
  }
}
.gridBloque .vista1 {
  grid-area: vista1;
}
.gridBloque .vista2 {
  grid-area: vista2;
}

.item {
  display: flex;
  justify-content: center; /*centro horizontal*/
  align-items: center; /* Alinea todo al centro */
  /*
  display: flex;
  justify-content: center;
  align-items: center;*/
  padding: 1rem;
  font-size: 2.5rem;
}
@media (max-width: 768px) {
  .item {
    display: flex;
    justify-content: space-evenly;
    font-size: 1.5rem;
    width: 50%;
    margin: auto;
  }
}

.text {
  color: black;
  font-size: 2rem;
  text-decoration: none;
  animation: mover 10s ease-in-out 0s infinite;
}
@keyframes text {
  40% {
    color: rgb(15, 170, 232);
  }
  40% {
    color: rgb(148, 11, 227);
  }
  20% {
    color: rgb(239, 11, 102);
  }
}

.mapa {
  display: flex;
  justify-content: center; /*centro horizontal*/
  align-items: center; /* Alinea todo al centro */
  /*
  display: flex;
  justify-content: center;
  align-items: center;*/
  margin: 1rem;
}

footer {
  display: flex;
  justify-content: space-evenly; /*centro horizontal*/
  align-items: center; /* Alinea todo al centro */
  /*
  display: flex;
  justify-content: space-evenly;
  align-items: center;*/
  font-size: 1rem;
  font-family: "Lato", sans-serif;
  background-image: linear-gradient(-225deg, #69EACB 0%, #EACCF8 48%, #6654F1 100%);
}
@media (max-width: 768px) {
  footer {
    text-align: center;
    font-size: 0.5rem;
    color: rgb(236, 99, 99);
  }
}
footer .lato {
  font-family: "Lato", sans-serif;
}

/*# sourceMappingURL=estilos.css.map */