/*@import url("https://fonts.googleapis.com/css2?family=Mulish:wght@500;600&family=Satisfy&display=swap");*/

@import url("https://fonts.googleapis.com/css2?family=Raleway:wght@400;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,600;1,600&display=swap");

:root {
  /*--header-height: 3.5rem;*/
  --header-height: 5.4rem;
  --hue: 255;
  --first-color: #d0b5a2;
  --first-color-alt: hsl(var(--hue), 82%, 56%);
  --first-color-light: hsl(var(--hue), 40%, 80%);
  --title-color: hsl(var(--hue), 24%, 16%);
  --text-color: hsl(var(--hue), 8%, 45%);
  --text-color-light: hsl(var(--hue), 8%, 60%);
  --white-color: hsl(0, 0%, 100%);
  --body-color: hsl(0, 0%, 100%);
  --container-color: hsl(0, 0%, 100%);
  --shadow-color: hsla(var(--hue), 90%, 30%, 0.1);

  /*=======Font and typography
  font-family: 'Mulish', sans-serif;
font-family: 'Satisfy', cursive;
  ======*/

  --body-font: "Raleway", sans-serif;
  --number-font: "Montserrat", sans-serif;
  --biggest-font-size: 2rem;
  --h1-font-size: 1.5rem;
  --h2-font-size: 1.25rem;
  --h3-font-size: 1rem;
  --normal-font-size: 0.938rem;
  --small-font-size: 0.813rem;
  --smaller-font-size: 0.75rem;

  /*=====Font Weight ======*/

  --font-regular: 400;
  --font-medium: 500;
  --font-semi-bold: 600;

  /*=====Margenes ======*/

  --mb-0-5: 0.5rem;
  --mb-0-75: 0.75rem;
  --mb-1: 1rem;
  --mb-1-5: 1.5rem;
  --mb-2: 2rem;
  --mb-2-5: 2.5rem;

  /*====Z index ===*/

  --z-tooltip: 10;
  --z-fixed: 100;
  --z-modal: 1000;
}

@media screen and (min-width: 968px) {
  :root {
    --biggest-font-size: 3.5rem;
    --h1-font-size: 2.25rem;
    --h2-font-size: 1.5rem;
    --h3-font-size: 1.25rem;
    --normal-font-size: 1rem;
    --small-font-size: 0.875rem;
    --smaller-font-size: 0.813rem;
  }
}

/*===============BASE ===================*/

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

html {
  scroll-behavior: smooth;
}

body,
input,
textarea,
button {
  font-family: var(--body-font);
  font-size: var(--normal-font-size);
}

body {
  margin: var(--header-height) 0 0 0;
  background-color: var(--body-color);
  color: var(--text-color);
}

input,
button,
textarea {
  cursor: pointer;
  border: none;
  outline: none;
}

h1,
h2,
h3,
h4 {
  color: var(--title-color);
  font-weight: var(--font-semi-bold);
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
}

img {
  /*display: block;*/
  max-width: 100%;
  height: auto;
}

/*======REUSABLE CSS CLASES ========*/

.section {
  padding: 5.5rem 0 1rem;
}

.section__title,
.section__title-center {
  font-size: var(--h2-font-size);
  margin-bottom: var(--mb-2);
  line-height: 140%;
}

.section__title-center {
  color: #fff;
  text-align: center;
}

.container {
  max-width: 968px;
  margin-left: var(--mb-1-5);
  margin-right: var(--mb-1-5);
}

.grid {
  display: grid;
}

.main {
  overflow: hidden; /*For animation scrollReveal*/
}

/*=========HEADER & NAV=============*/
/*
.header {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  background-color: transparent;
  z-index: var(--z-fixed);
  transition: background-color 0.4s, box-shadow 0.4s;
}

.nav {
  position: relative;
  height: var(--header-height);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav__logo {
  margin-top: 40px;
  max-width: 130px;
  transition: color 0.4s;
}

.nav__toggle,
.nav__close {
  display: inline-flex;
  font-size: 1.25rem;
  cursor: pointer;
}

.nav__toggle {
  color: var(--first-color);
  transition: color 0.4s;
}

.nav__close {
  color: var(--title-color);
}
*/
/*Navegacion para dispositivos móviles */
/*
@media screen and (max-width: 1150px) {
  .nav__menu {
    position: fixed;
    top: -100%;
    left: 0;
    background-color: var(--body-color);
    width: 100%;
    box-shadow: 0 12px 24px var(--shadow-color);
    padding-block: 5rem 4rem;
    transition: top 0.4s;
  }
}

.nav__list {
  display: flex;
  flex-direction: column;
  row-gap: 2.5rem;
  text-align: center;
}

.nav__link {
  color: var(--title-color);
  font-weight: var(--font-semi-bold);
  transition: color 0.4s;
}

.nav__link:hover {
  color: var(--first-color);
}

.nav__close {
  position: absolute;
  top: 1.15rem;
  right: 1.5rem;
  color: var(--first-color);
}
*/
/*Show Menu*/
/*.show-menu {
  top: 0;
}*/

/*=======NAVBAR 2 =========*/

.header {
  width: 100%;
  background-color: var(--body-color);
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-fixed);
}

.nav {
  height: var(--header-height);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav__logo,
.nav__toggle,
.nav__close {
  color: var(--title-color);
}

.nav__logo {
  padding-top: 5px;
  max-width: 125px;
  display: flex;
  align-items: center;
  column-gap: 0.5rem;
  transition: 0.3s;
}

.nav__logo:hover {
  color: var(--first-color);
}

.nav__toggle {
  font-size: 1.25rem;
  cursor: pointer;
  color: var(--first-color);
  transition: color 0.4s;
}

@media screen and (max-width: 1150px) {
  .nav__menu {
    position: fixed;
    background-color: var(--container-color);
    width: 80%;
    height: 100%;
    top: 0;
    right: -100%;
    box-shadow: -2px 0 4px hsla(var(--hue), 24%, 15%, 0.1);
    padding: 4rem 0 0 3rem;
    border-radius: 1rem 0 0 1rem;
    transition: 0.3s;
    z-index: var(--z-fixed);
  }
}

.nav__close {
  font-size: 1.5rem;
  position: absolute;
  top: 1rem;
  right: 1.25rem;
  cursor: pointer;
}

.nav__list {
  display: flex;
  flex-direction: column;
  row-gap: 1.5rem;
  align-items: center; /* Para centrar verticalmente en dispositivos móviles */
}

/* Estilo base para los enlaces */
.nav__link {
  color: var(--title-color);
  font-weight: var(--font-medium);
  position: relative;
  text-align: center; /* Para centrar horizontalmente */
  transition: color 0.5s;
}

/* Línea debajo del enlace al pasar el ratón */
.nav__link::after {
  content: "";
  position: absolute;
  bottom: -6px; /* Ajusta este valor para cambiar la distancia desde abajo */
  left: 50%;
  transform: translateX(-50%); /* Para centrar horizontalmente */
  width: 0; /* Inicialmente sin longitud */
  height: 2px;
  background-color: var(--first-color);
  transition: width 0.3s ease-in-out; /* Ajusta la duración y función de la transición */
}

/* Estilo para el enlace activo y al pasar el ratón */
.nav__link:hover,
.nav__link.active {
  color: var(--first-color);
}

/* Línea debajo del enlace al pasar el ratón */
.nav__link:hover::after,
.nav__link.active::after {
  width: 50%; /* Longitud completa al pasar el ratón o cuando está activo */
}

.show-menu {
  right: 0;
}

@media screen and (max-width: 767px) {
  .nav__list {
    flex-direction: column;
    align-items: flex-start;
  }
}

/*=======NUEVOS ESTILOS SUBMENU==============*/

.sub-menu {
  display: none; /* Oculta el submenú por defecto */
  position: absolute; /* Posición absoluta para superponerlo */
  background-color: var(--first-color); /* Fondo blanco */
  padding: 10px; /* Espaciado interno */
  border-radius: 5px; /* Bordes redondeados */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Sombra */
  color: #000;
  z-index: 999;
}

.nav__item:hover .sub-menu {
  display: block; /* Muestra el submenú cuando se pasa el cursor sobre el elemento del menú */
}

.sub-menu li {
  margin-bottom: 5px; /* Espaciado entre elementos del submenú */
}

.sub-menu a {
  color: #000; /* Color del texto */
  text-decoration: none; /* Sin subrayado */
  display: block; /* Hace que los elementos ocupen todo el ancho disponible */
  padding: 5px; /* Espaciado interno */
}

.sub-menu a:hover {
  background-color: #967d6d; /* Cambia el color de fondo al pasar el cursor */
  color: #fff;
}

/*=============== BUTTON ===============*/
.button-container {
  display: flex;
  /* justify-content: center;*/
}

.button {
  padding: 1em 2em;
  border: none;
  border-radius: 5px;
  font-weight: bold;
  letter-spacing: 4px;
  text-transform: uppercase;
  cursor: pointer;
  color: #d0b5a2;
  transition: all 1000ms;
  font-size: 15px;
  position: relative;
  overflow: hidden;
  outline: 2px solid #d0b5a2;
  background-color: transparent;
}

.button:hover {
  color: #fff;
  transform: scale(1.1);
  outline: 2px solid #d0b5a2;
  box-shadow: 4px 5px 17px -4px #d0b5a2;
}

.button::before {
  content: "";
  position: absolute;
  left: -50px;
  top: 0;
  width: 0;
  height: 100%;
  background-color: #d0b5a2;
  transform: skewX(45deg);
  z-index: -1;
  transition: width 1000ms;
}

.button:hover::before {
  width: 250%;
}

/*=============== HOME ===============*/
/*
.home {
  /*padding: 3.5rem 0 2rem;
}*/

.home__container {
  position: relative;
  row-gap: 2rem;
}

.home__img {
  width: 250px;
  justify-self: center;
}

.home__title {
  font-size: var(--biggest-font-size);
  line-height: 140%;
  margin-bottom: var(--mb-1);
}

.home__description {
  margin-bottom: var(--mb-2-5);
}

.home__social {
  position: absolute;
  top: 2rem;
  right: -1rem;
  display: grid;
  justify-items: center;
  row-gap: 3.5rem;
}

.home__social-follow {
  font-weight: var(--font-medium);
  font-size: var(--smaller-font-size);
  color: var(--first-color);
  position: relative;
  transform: rotate(90deg);
}

.home__social-follow::after {
  content: "";
  position: absolute;
  width: 1rem;
  height: 2px;
  background-color: var(--first-color);
  right: -45%;
  top: 50%;
}

.home__social-links {
  display: inline-flex;
  flex-direction: column;
  row-gap: 0.25rem;
}

.home__social-link {
  font-size: 1.3rem;
  color: var(--first-color);
  transition: 0.3s;
}

.home__social-link:hover {
  transform: translateX(0.25rem);
}

/*=============== BUTTON HOME  ===============*/

.button-home {
  display: inline-block;
  background-color: var(--first-color);
  color: #fff;
  padding: 1rem 1.75rem;
  border-radius: 0.5rem;
  font-weight: var(--font-medium);
  transition: 0.3s;
}

.button-home:hover {
  background-color: #ddbbbb;
}

.button__icon {
  transition: 0.3s;
}

.button-home:hover .button__icon {
  transform: translateX(0.25rem);
}

.button--flex {
  display: inline-flex;
  align-items: center;
  column-gap: 0.5rem;
}

.button--link {
  background-color: var(--first-color);
  color: #fff;
  font-weight: var(--font-medium);
}

.button--link:hover .button__icon {
  transform: translateX(0.25rem);
}

/*=============== ABOUT ===============*/

.about__container {
  row-gap: 2rem;
}

.about__img {
  width: 280px;
  justify-self: center;
}

.about__title {
  margin-bottom: var(--mb-1);
}

.about__description {
  margin-bottom: var(--mb-2);
}

.about__details {
  display: grid;
  row-gap: 1rem;
  margin-bottom: var(--mb-2-5);
}

.about__details-description {
  display: inline-flex;
  column-gap: 0.5rem;
  font-size: var(--small-font-size);
}

.about__details-icon {
  font-size: 1rem;
  color: var(--first-color);
  margin-top: 0.15rem;
}

/*=============== STEPS===============*/

.steps__bg {
  background-color: var(--first-color);
  padding: 3rem 2rem 2rem;
  border-radius: 1rem;
}

.steps__container {
  gap: 2rem;
  padding-top: 1rem;
}

.steps__title {
  color: #fff;
}

.steps__card {
  background-color: var(--container-color);
  padding: 2.5rem 3rem 2rem 1.5rem;
  border-radius: 1rem;
}

.steps__card-number {
  display: inline-block;
  background-color: var(--first-color);
  color: #fff;
  padding: 0.5rem 0.75rem;
  border-radius: 0.25rem;
  font-size: var(--h2-font-size);
  margin-bottom: var(--mb-1-5);
  transition: 0.3s;
}

.steps__card-title {
  font-size: var(--h3-font-size);
  margin-bottom: var(--mb-0-5);
}

.steps__card-description {
  font-size: var(--small-font-size);
}

.steps__card:hover .steps__card-number {
  transform: translateY(-0.25rem);
}

/*=============== PRODUCTS ===============*/

.product__description {
  text-align: center;
}

.product__container {
  padding: 3rem 0;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.5rem 3rem;
}

.product__card {
  display: grid;
  position: relative;
}

.product__img {
  position: relative;
  width: 120px;
  justify-self: center;
  margin-bottom: var(--mb-0-75);
  transition: 0.3s;
}

.product__title,
.product__price {
  font-size: var(--small-font-size);
  font-weight: var(--font-semi-bold);
  color: var(--title-color);
}

.product__title {
  margin-bottom: 0.25rem;
}

.product__button {
  position: absolute;
  right: 0;
  bottom: 0;
  background-color: var(--first-color);
  color: #fff;
  padding: 0.25rem;
  border-radius: 0.35rem;
  font-size: 1.15rem;
}

.product__button:hover {
  background-color: var(--first-color-alt);
}

.product__circle {
  width: 90px;
  height: 90px;
  background-color: var(--first-color);
  border-radius: 50%;
  position: absolute;
  top: 18%;
  left: 5%;
}

.product__card:hover .product__img {
  transform: translateY(-0.5rem);
}

/*======QUESTIONS ===*/

.questions {
  background-color: var(--first-color);
}

.questions__container {
  gap: 1.5rem;
  padding: 1.5rem 0;
}

.questions__group {
  display: grid;
  row-gap: 1.5rem;
}

.questions__item {
  background-color: var(--container-color);
  border-radius: 0.25rem;
}

.questions__item-title {
  font-size: var(--small-font-size);
  font-weight: var(--font-medium);
}

.question__icon {
  font-size: 1.25rem;
  color: var(--title-color);
}

.questions__description {
  font-size: var(--smaller-font-size);
  padding: 0 1.25rem 1.25rem 2.5rem;
}

.questions__header {
  display: flex;
  align-items: center;
  column-gap: 0.5rem;
  padding: 0.75rem 0.5rem;
  cursor: pointer;
}

.questions__content {
  overflow: hidden;
  height: 0;
}

.questions__item,
.questions__header,
.questions__item-title,
.questions__icon,
.questions__description,
.questions__content {
  transition: 0.3s;
}

.questions__item:hover {
  box-shadow: 0 2px 8px hsla(var(--hue), 4%, 15%, 0.15);
}

.accordion-open .questions__header,
.accordion-open .questions__content {
  background-color: #fff;
}

.accordion-open .questions__item-title,
.accordion-open .questions__description,
.accordion-open .question__icon {
  color: #333;
}

.accordion-open .questions__icon {
  transform: rotate(45deg);
}
/*===============CONTACT===============*/

.logo-contact {
  max-width: 100px;
  border-radius: 50%;
  margin-bottom: 5px;
}

.box-icon-contact {
  margin-bottom: 10px;
}

.gracias {
  margin-bottom: 10px;
}

.icon-contact {
  font-size: 20px;
}

.contact__container {
  row-gap: 3.5rem;
}

.contact__data {
  display: grid;
  row-gap: 2rem;
}

.contact__subtitle {
  font-size: var(--normal-font-size);
  font-weight: var(--font-medium);
  color: var(--text-color);
  color: var(--text-color);
  margin-bottom: var(--mb-0-5);
  text-align: justify;
}

.contact__description {
  display: inline-flex;
  align-items: center;
  column-gap: 0.5rem;
  color: var(--title-color);
  font-weight: var(--font-medium);
}

.contact__icon {
  font-size: 1.25rem;
}

.contact__inputs {
  display: grid;
  row-gap: 2rem;
  margin-bottom: var(--mb-2-5);
}

.contact__content {
  position: relative;
  height: 3rem;
  border-bottom: 1px solid var(--text-color-light);
}

.contact__input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 1rem 1rem 1rem 0;
  background: none;
  color: var(--text-color);
  border: none;
  outline: none;
  z-index: 1;
  font-size: var(--small-font-size);
}

.contact__label {
  position: absolute;
  top: 0.75rem;
  width: 100%;
  font-size: var(--small-font-size);
  color: var(--text-color-light);
  transition: 0.3s;
}

.contact__area {
  height: 7rem;
}

.contact__area textarea {
  resize: none;
}

.contact__input:focus + .contact__label,
.contact__input:not(:placeholder-shown) + .contact__label {
  top: -0.75rem;
  font-size: var(--smaller-font-size);
  z-index: 10;
}

/*=============== FOOTER 2 ===============*/

.footer__container {
  row-gap: 3rem;
}

.footer__logo {
  display: inline-flex;
  align-items: center;
  column-gap: 0.5rem;
  color: var(--title-color);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: -1px;
  margin-bottom: var(--mb-2-5);
  transition: 0.3s;
}

.footer__logo-icon {
  font-size: 1.15rem;
  color: var(--first-color);
}

.footer__logo:hover {
  color: var(--first-color);
}

.footer__title {
  font-size: var(--h3-font-size);
  margin-bottom: var(--mb-1-5);
}

.footer__subscribe {
  border-color: var(--first-color);
  padding: 0.75rem;
  display: flex;
  justify-content: space-between;
  border-radius: 0.5rem;
}

.footer__input {
  width: 70%;
  padding: 0.5rem;
  background: none;
  color: var(--text-color);
  border: none;
  outline: none;
}

.footer__button {
  padding: 1rem;
}

.footer__data {
  display: grid;
  row-gap: 0.75rem;
}

.footer__data a {
  color: var(--text-color);
  font-size: var(--small-font-size);
  text-decoration: none;
  cursor: pointer;
}

.footer__information {
  font-size: var(--small-font-size);
}

.footer__social {
  display: inline-flex;
  column-gap: 0.75rem;
}

.footer__social-link {
  font-size: 1rem;
  color: var(--text-color);
  transition: 0.3s;
}

.footer__social-link:hover {
  transform: translateY(-0.25rem);
}

.footer__cards {
  display: inline-flex;
  align-items: center;
  column-gap: 0.5rem;
}

.footer__card {
  width: 35px;
}

.footer__copy {
  text-align: center;
  font-size: var(--smaller-font-size);
  color: var(--text-color-light);
  margin: 5rem 0 1rem;
}

.footer__copy a{
  font-weight: bold;
  color: #000;
}

/*=============== FOOTER ===============

.footer {
  background-color: var(--first-color);
}

.footer__container {
  padding-block: 4rem 2rem;
  text-align: center;
  row-gap: 5rem;
}

.footer__content {
  row-gap: 2rem;
}

.footer__content a,
.footer__copy {
  color: var(--white-color);
  transition: 0.5s;
}

.footer__conten a:hover {
  transform: scale(1.1);
}

.footer__logo {
  font-size: var(--h1-font-size);
  font-weight: var(--font-semi-bold);
  justify-self: center;
  transition: 0.5s;
}

.footer__links,
.footer__social {
  display: flex;
  justify-content: center;
}

.footer__links {
  flex-wrap: wrap;
  gap: 2rem;
}

.footer__link {
  font-weight: var(--font-semi-bold);
  transition: 0.5s;
}

.footer__logo:hover,
.footer__link:hover {
  transform: scale(1.1);
}

.footer__social {
  column-gap: 1rem;
}

.footer__social-link {
  font-size: 1.5rem;
  transition: transform 0.4s;
}

.footer__social-link:hover {
  transform: translateY(-0.25rem);
}

.footer__copy {
  font-size: var(--small-font-size);
  font-weight: var(--font-medium);
}

*/

/*=============== SCROLL BAR ===============*/
::-webkit-scrollbar {
  width: 0.6rem;
  background-color: hsl(var(--hue), 20%, 85%);
}

::-webkit-scrollbar-thumb {
  background-color: hsl(var(--hue), 20%, 65%);
}

::-webkit-scrollbar-thumb:hover {
  background-color: hsl(var(--hue), 20%, 55%);
}
/*=============== SCROLL UP ===============*/

.scrollup {
  position: fixed;
  right: 1rem;
  bottom: -50%;
  background-color: var(--first-color);
  box-shadow: 0 12px 24px var(--shadow-color);
  display: inline-flex;
  padding: 6px;
  font-size: 1.25rem;
  color: var(--title-color);
  z-index: var(--z-tooltip);
  transition: bottom 0.4s, transform 0.4s, background-color 0.4s;
}

.scrollup__icon {
  font-size: 1rem;
  color: #fff;
}

.scrollup:hover {
  transform: translateY(-0.5rem);
}

/* Show Scroll Up */

.show-scroll {
  bottom: 3rem;
}

/*=============SCROLL BAR ==========*/

::-webkit-scrollbar {
  width: 0.6rem;
  background: hsl(var(--hue), 4%, 53%);
}

::-webkit-scrollbar-thumb {
  background: hsl(var(--hue), 4%, 29%);
  border-radius: 0.5rem;
}

/*=============== BREAKPOINTS ===============*/
/* For small devices 

@media screen and (max-width: 320px) {
  .container {
    margin-inline: 1rem;
  }

  .services__modal {
    padding-inline: 0.5rem;
  }

  .about__skills-content {
    grid-template-columns: repeat(4, max-content);
  }
}

*/

/* For medium devices 

@media screen and (min-width: 576px) {
  .services__container {
    grid-template-columns: 320px;
    justify-content: center;
  }

  .services__modal-content {
    width: 400px;
  }

  .work_-container {
    grid-template-columns: 350px;
    justify-content: center;
  }

  .about__container {
    grid-template-columns: 400px;
    justify-content: center;
  }
}

@media screen and (min-width: 768px) {
  .services__container {
    grid-template-columns: repeat(2, 320px);
  }

  .work__container {
    grid-template-columns: repeat(3, 350px);
  }

  .testimonial__container {
    max-width: 700px;
    margin-inline: auto;
  }

  .testimonial__description {
    width: 470px;
    margin-inline: auto;
  }

  .contact__page {
    grid-template-columns: 670px;
    justify-content: center;
  }

  .contact__group {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 1rem;
  }

  .contact__area {
    height: 18rem;
  }

  .contact__message {
    bottom: 5rem;
  }

  .contact__send {
    justify-self: center;
    margin-top: 1.5rem;
  }
}*/

/* For large devices 

@media screen and (min-width: 1150px) {
  .container {
    margin-inline: auto;
  }

  .section {
    padding-block: 7rem 2rem;
  }

  .section__title {
    margin-bottom: 3.5rem;
  }

  .nav {
    height: calc(var(--header-height) + 2rem);
    column-gap: 3rem;
    padding: 20px 20px;
  }

  .nav__toggle,
  .nav__close {
    display: none;
  }

  .nav__menu {
    margin-left: auto;
  }

  .nav__list {
    flex-direction: row;
    align-items: center;
    column-gap: 3rem;
  }

  .change-theme {
    color: var(--title-color);
  }

  .perfil {
    width: 500px;
    height: 500px;
    border-width: 15px;
  }

  .perfil__content {
    width: 360px;
    height: 360px;
    border-width: 20px;
  }

  .perfil__img {
    width: 300px;
  }

  .home__rectangle {
    width: 30vw;
    height: 100%;
  }

  .home__container {
    position: relative;
    grid-template-columns: 500px 300px;
    align-items: center;
    column-gap: 4rem;
    padding-block: 3.5rem 8rem;
  }

  .home__content {
    row-gap: 4rem;
  }

  .home__data {
    row-gap: 1rem;
    text-align: initial;
  }

  .home__social {
    flex-direction: column;
    row-gap: 1.5rem;
    position: absolute;
    top: -4rem;
    bottom: 0;
    right: 0;
  }

  .home__social-link {
    color: var(--first-color);
  }

  .home__button {
    justify-self: flex-start;
  }

  .services__container {
    grid-template-columns: repeat(3, 345px);
  }

  .services__card {
    padding-block: 4.5rem;
  }

  .services__modal-content {
    max-height: 480px;
    padding: 5.5rem 2rem;
  }

  .services__modal-close {
    font-size: 2rem;
  }

  .work_-container {
    grid-template-columns: repeat(3, 350px);
    row-gap: 4rem;
  }

  .testimonial__card {
    padding-block: 3rem 3.5rem;
  }

  .testimonial__border {
    width: 120px;
    height: 120px;
    margin-bottom: 1.5rem;
  }

  .contact__container {
    grid-template-columns: repeat(1, max-content);
    justify-content: center;
    align-items: center;
    column-gap: 25rem;
    padding-block: 1rem 5rem;
  }

  .contact__container .section__title {
    text-align: initial;
    margin: 0;
  }

  .footer__container {
    row-gap: 6rem;
    padding-block: 3.5rem;
  }

  .footer__content {
    grid-template-columns: 1fr 2fr 1fr;
    align-items: center;
  }

  .footer__logo {
    font-size: var(--h2-font-size);
  }

  .footer__links {
    column-gap: 3rem;
  }

  .footer__social {
    column-gap: 1.5rem;
  }

  .scrollup {
    right: 3rem;
  }

  .about__container {
    grid-template-columns: 500px 440px;
    column-gap: 8rem;
    padding-top: 2rem;
  }

  .about__data {
    row-gap: 3.5rem;
  }

  .about__info {
    text-align: initial;
  }

  .about__button {
    justify-self: flex-start;
  }

  .about__skills-title {
    text-align: initial;
  }

  .about__skills-content {
    grid-template-columns: repeat(7, max-content);
    justify-content: initial;
  }

  .about__skills-img {
    width: 70px;
  }
}

@media screen and (min-width: 1500px) {
  .home__rectangle {
    width: 33vw;
  }
}*/

/* For 2K resolutions (2048 x 1152, 2048 x 1536) 

@media screen and (min-width: 2048px) {
  .home__rectangle {
    width: 40vw;
  }
}
*/

/*=========BREAKPOINTS=========*/

@media screen and (max-width: 320px) {
  .container {
    margin-left: var(--mb-1);
    margin-right: var(--mb-1);
  }

  .home__img {
    width: 180px;
  }

  .home__title {
    font-size: var(--h1-font-size);
  }

  .steps__bg {
    padding: 2rem 1rem;
  }

  .steps__card {
    padding: 1.5rem;
  }

  .product__container {
    grid-template-columns: 0.6fr;
  }
}

/*For medium devices*/
@media screen and (min-width: 576px) {
  .steps__container {
    grid-template-columns: repeat(2, 1fr);
  }

  .product__description {
    padding: 0 4rem;
  }

  .product__container {
    grid-template-columns: repeat(2, 170px);
    justify-content: center;
    column-gap: 5rem;
  }

  .footer__subscribe {
    width: 400px;
  }
}

@media screen and (min-width: 767px) {
  body {
    margin: 0;
  }

  .nav {
    height: calc(var(--header-height) +1.5rem);
    column-gap: 3rem;
  }
  .nav__toggle,
  .nav__close {
    display: none;
  }

  .nav__list {
    flex-direction: row;
    column-gap: 3rem;
  }

  .nav__menu {
    margin-left: auto;
  }

  .home__container,
  .about__container,
  .questions__container,
  .contact__container,
  .footer__container {
    grid-template-columns: repeat(2, 1fr);
  }

  .home {
    padding: 10rem 0 5rem;
  }

  .home__container {
    align-items: center;
  }

  .home__img {
    width: 280px;
    order: 1;
  }

  .home__social {
    top: 30%;
  }

  .questions__container {
    align-items: flex;
  }

  .footer__container {
    column-gap: 3rem;
  }

  .footer__subscribe {
    width: initial;
  }
}

/*For large devices */

@media screen and (min-width: 992px) {
  .container {
    margin-left: auto;
    margin-right: auto;
  }

  .section {
    padding: 3rem 0 1rem;
  }

  .section__title,
  .section__title-center {
    font-size: var(--h1-font-size);
  }

  .home {
    /*padding: 13rem 0 5rem;*/
    padding: 6rem 0 5rem;
  }

  .home__img {
    width: 500px;
  }

  .home__description {
    padding-right: 7rem;
  }

  .about__img {
    width: 380px;
  }

  .steps__container {
    grid-template-columns: repeat(4, 1fr);
  }

  .container-steps {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin: auto;
    max-width: 1215px;
  }

  .steps__bg {
    padding: 3.5rem 2.5rem;
  }

  .steps__card-title {
    font-size: var(--normal-font-size);
  }

  .product__description {
    padding: 0 16rem;
  }

  .product__container {
    padding: 4rem 0;
    grid-template-columns: repeat(3, 185px);
    gap: 4rem 6rem;
  }

  .product__img {
    width: 160px;
  }

  .product__circle {
    width: 110px;
    height: 110px;
  }

  .product__title,
  .product__price {
    font-size: var(--normal-font-size);
  }

  .questions__container {
    padding: 1rem 0 4rem;
  }

  .questions__title {
    text-align: initial;
  }

  .questions__group {
    row-gap: 2rem;
  }

  .questions__header {
    padding: 1rem;
  }

  .questions__description {
    padding: 0 3.5rem 2.25rem 2.75rem;
  }

  .footer__logo {
    max-width: 180px;
  }

  .footer__container {
    grid-template-columns: 1fr 0.5fr 0.5fr 0.5fr;
  }
  .footer__copy {
    margin: 7rem 0 2rem;
  }
}

@media screen and (min-width: 1200px) {
  .home__social {
    right: -3rem;
    row-gap: 4.5rem;
  }

  .home__social-follow {
    /*font-size: var(--small-font-size);*/
    font-size: 1em;
  }

  .home__social-follow::after {
    width: 1.5rem;
    right: -60%;
  }

  .home__social-link {
    font-size: 1.15rem;
  }

  .about__container {
    column-gap: 7rem;
  }

  .scrollup {
    right: 3rem;
  }
}

/*================LINES===============*/

.lines {
  background-color: #fff;
  position: relative;
}

.lines__bg {
  background-color: #fff;
  border-radius: var(--primary-color);
}

.lines__container {
  padding-top: 2rem;
}

.lines .section__title,
.lines__description {
  color: var(--first-color);
}

.lines__content {
  display: grid;
  row-gap: 4rem;
  position: relative;
}

.lines__card {
  width: 250px;
  z-index: 10;
}

.lines__circle {
  width: 210px;
  height: 210px;
  background-color: hsl(0deg 0% 91.49%);
  border-radius: 50%;
  box-shadow: 0 8px 32px hsla(12, 32%, 8%, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-bottom: 1.5rem;
}

.lines__img {
  width: 120px;
  filter: drop-shadow(0 4px 16px hsl(12, 32%, 16%));
  transition: transform 0.3s;
}

.lines__img:hover {
  transform: translateY(-0.35rem);
}

.lines__subcircle {
  width: 50px;
  height: 50px;
  background-color: var(--second-color);
  position: absolute;
  top: -0.75rem;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: var(--h1--font-size);
  font-weight: var(--font-semi-bold);
  color: var(--first-color);
  outline: 2px solid var(--first-color);
  z-index: -1;
}

.lines__card-move,
.lines__card-move .lines__circle {
  margin-left: auto;
}

.lines__card-move .lines__description {
  text-align: right;
}

.lines__border {
  position: absolute;
  left: 3rem;
  right: 0;
  top: 7.5rem;
  margin: 0 auto;
}

.lines__bg-img {
  position: absolute;
  top: 14rem;
  left: 0;
  width: 100%;
  height: 70%;
  object-fit: cover;
  object-position: -132px;
  opacity: 0.15;
}

@media screen and (max-width: 300px) {
  .lines__content {
    grid-template-columns: 1fr;
  }

  .lines__content {
    row-gap: 3rem;
  }

  .lines__card {
    width: initial;
  }

  .lines__border {
    left: 0;
    top: 5.5rem;
  }
}

@media screen and (min-width: 400px) {
  .lines__content {
    grid-template-columns: 325px;
    justify-content: center;
  }
}

/*For medium devices
        @media screen and (min-width: 576px){
          {
        
          }
        }*/

/*For larger devices */

@media screen and (min-width: 1023px) {
  .lines__content {
    grid-template-columns: repeat(3, max-content);
    column-gap: 6.5rem;
    padding-top: 3rem;
  }

  .lines__card {
    width: 272px;
  }

  .lines__card-move {
    display: flex;
    flex-direction: column;
    margin-top: 7rem;
  }

  .lines__card-move .lines__circle {
    margin-left: initial;
  }

  .lines__card-move .lines__description {
    order: -1;
    text-align: initial;
    margin-bottom: 3rem;
  }

  .lines__circle {
    width: 350px;
    height: 350px;
  }

  .lines__img {
    width: 210px;
  }

  .lines__subcircle {
    width: 85px;
    height: 85px;
    top: -1.25rem;
    outline: 3px solid var(--first-color);
  }

  .lines__border {
    transform: rotate(85deg);
    width: 200px;
    left: 0;
    top: 2rem;
  }

  .lines__bg-img {
    top: 0;
    height: 100%;
    object-position: initial;
  }
}

.swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Esto asegurará que la imagen se ajuste a las dimensiones de la diapositiva manteniendo su relación de aspecto */
}

/*===========MODAL==========*/

.btn-steps-modal {
  padding-top: 10px;
}

.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  animation: fadeInModal 0.6s ease-out;
}

.modal__overlay {
  background-color: rgba(0, 0, 0, 0.7);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.modal--show {
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}

.modal__container {
  background-color: var(--first-color);
  border-radius: 6px;
  padding: 3em 2.5em;
  text-align: center;
  z-index: 999;
}

.modal__title {
  font-size: 2.5rem;
  color: #fff;
}

.modal__paragraph {
  color: #fff;
  margin-bottom: 10px;
}

.modal__img {
  width: 90%;
  max-width: 300px;
}

.modal__close {
  position: absolute;
  top: 10px;
  right: 10px;
  text-decoration: none;
  color: #fff;
  background-color: var(--first-color);
  padding: 1em 2em;
  border-radius: 6px;
  font-weight: 300;
  cursor: pointer;
  transition: background-color 0.3s;
}

.modal__close:hover {
  background-color: var(--second-color);
  color: #fff;
}

@keyframes fadeInModal {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/*===========NOSOTROS==========*/

/* Estilos para la sección de presentación */
.presentacion {
  margin-top: 100px;
  text-align: center;
  background-color: var(--first-color);
  background-color: var(--first-color);
  color: #fff;
  font-size: var(--h2-font-size);
  margin-bottom: var(--mb-2);
  line-height: 140%;
  padding: 50px 0;
}

.nosotros {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: 10px;
}

/* Estilos para la sección de nosotros */
.box-nosotros {
  margin: 0 auto; /* Centrar el contenido */
  width: 90%; /* Ancho máximo */
  max-width: 600px; /* Ancho máximo */
  padding: 20px;
  background-color: #f5f5f5;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.box-nosotros h1 {
  text-align: center;
  font-size: 24px;
  margin-bottom: 20px;
}

.box-nosotros h4 {
  text-align: center;
  font-size: 20px;
  margin-bottom: 20px;
  font-style: bold;
}

.box-nosotros h2 {
  text-align: center;
  font-size: 30px;
  margin-bottom: 20px;
}

.box-nosotros h3 {
  font-size: 18px;
  margin-bottom: 20px;
}

.box-nosotros p {
  text-align: justify;
  line-height: 1.5;
  letter-spacing: 2px;
  margin-bottom: 15px;
}
.box-nosotros img {
  max-width: 100%; /* Imágenes responsivas */
  height: auto;
  display: block;
  margin: 0 auto 20px;
}

.icons-nosotros {
  margin-top: 15px;
  display: grid; /* Establece el display como grid */
  grid-template-columns: repeat(
    3,
    1fr
  ); /* Define tres columnas con el mismo ancho */
  justify-content: center; /* Centra el contenido horizontalmente */
  text-align: center; /* Alinea el texto centrado */
}

.icons-nosotros img {
  max-width: 150px;
}

@media screen and (max-width: 768px) {
  .icons-nosotros img {
    max-width: 100%; /* Establecer el ancho máximo al 100% para que las imágenes sean responsive */
    height: auto; /* Permitir que la altura se ajuste automáticamente para mantener la relación de aspecto */
    object-fit: cover; /* Ajustar la imagen dentro del contenedor sin distorsionar su relación de aspecto */
  }
}

@media screen and (max-width: 480px) {
  .icons-nosotros img {
    max-width: 80%; /* Reducir el ancho máximo de las imágenes al 80% en dispositivos con pantallas aún más pequeñas */
  }
}

/*================ HABILIDADES ====================*/

.habilidades-title {
  text-align: center;
  background-color: var(--first-color);
  background-color: var(--first-color);
  color: #fff;
  font-size: var(--h2-font-size);
  margin-bottom: var(--mb-2);
  line-height: 140%;
  padding: 50px 0;
}

.habilidades {
  display: flex;
  justify-content: center;
  padding: 20px;
}

@media screen and (max-width: 768px) {
  .remodelaciones p {
    padding: 10px; /* Agregar padding de 20px */
  }
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Tres columnas con el mismo ancho */
  gap: 25px; /* Espacio entre las cajas */
}

.box-habilidades {
  display: flex;
  align-items: center;
  background-color: #f5f5f5;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin: 10px;
}

.box-habilidades img {
  max-width: 100px;
}

.box-habilidades p {
  margin: 0;
  padding: 20px;
  text-align: justify; /* Alinea el texto justificado */
  text-align-last: left; /* Alinea la última línea a la izquierda */
}

/* Estilos responsivos */
@media screen and (max-width: 768px) {
  .grid-container {
    grid-template-columns: repeat(
      2,
      1fr
    ); /* Dos columnas en dispositivos medianos */
  }
}

@media screen and (max-width: 480px) {
  .grid-container {
    grid-template-columns: repeat(
      1,
      1fr
    ); /* Una columna en dispositivos pequeños */
  }
}

.slogan {
  display: flex;
  justify-content: center;
  text-align: center;
  margin-bottom: 20px;
}

/*=============PROYECTOS==========*/

.proyectos {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: 10px;
}

/* Estilos para la sección de nosotros */
.box-proyectos {
  margin: 0 auto; /* Centrar el contenido */
  width: 90%; /* Ancho máximo */
  max-width: 600px; /* Ancho máximo */
  padding: 20px;
  background-color: #f5f5f5;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  gap: 20px;
}

.box-proyectos h1 {
  letter-spacing: 3px;
  font-size: 30px;
  text-align: center;
  margin-bottom: 20px;
}

.box-proyectos h2 {
  letter-spacing: 3px;
  font-size: 25px;
  margin-bottom: 20px;
}

.box-proyectos h3 {
  letter-spacing: 1px;
  font-size: 22px;
  margin-bottom: 20px;
}

.box-proyectos b {
  display: flex;
  justify-content: left;
  font-size: 13px;
  text-align: center;
  align-items: center;
  margin-bottom: 10px;
}

.box-proyectos p {
  margin-bottom: 20px;
  text-align: justify;
}

.img-proyecto {
  justify-content: center;
  text-align: center;
  max-width: 450px; /* Tamaño máximo para las imágenes en pantallas grandes */
  height: auto; /* Mantener la proporción de aspecto */
}

.icon_map {
  margin-left: 5px;
  font-size: 12px;
  color: #fff;
}

/* Aplicar estilos específicos para pantallas más pequeñas */
@media (max-width: 768px) {
  .img-proyecto,
  .swiper-slide img,
  iframe {
    max-width: 100%; /* Reducir el tamaño de las imágenes para tablet */
  }
}

/* Aplicar estilos específicos para dispositivos móviles */
@media (max-width: 576px) {
  .img-proyecto,
  .swiper-slide img,
  iframe {
    max-width: 100%; /* Reducir aún más el tamaño de las imágenes para dispositivos móviles */
  }
}

.styled-list {
  list-style-type: none; /* Eliminar viñetas predeterminadas */
  padding-left: 30px; /* Eliminar el relleno predeterminado */
}

.styled-list li {
  padding-left: 1.2em; /* Espacio para el punto */
  text-indent: -1.2em; /* Mover el texto hacia la izquierda para compensar el espacio del punto */
  position: relative;
  margin-bottom: 10px;
}

.styled-list li::before {
  content: "•"; /* Punto al inicio */
  position: absolute;
  left: 0;
}

/*============LISTADO DE PROYECTOS DESTACADOS ===============*/

.general-proyectos {
  display: flex;
  justify-content: space-between;
  background-color: var(--first-color);
  border-radius: 50px;
  padding: 20px;
  margin-bottom: 20px;
  width: 496px; /*prueba*/
  height: 175px; /*prueba*/
}

.proyectos-square {
  position: relative;
}

.proyectos-square h3 {
  letter-spacing: 2px;
  position: relative; /* Asegura que el contenedor h3 sea relativo */
  color: var(--white-color);
  font-size: 1em;
}

.proyectos-square h3::before {
  content: "•"; /* Punto al inicio */
  display: inline-block; /* Permite que el punto esté al lado del texto */
  margin-right: 5px; /* Espacio entre el punto y el texto */
  font-size: 1em;
  vertical-align: middle;
}
.proyectos-square b {
  color: #000;
  letter-spacing: 1.5px;
  left: 0;
  margin-left: 12px;
}

.proyectos-square p {
  text-align: justify;
  color: #000;
  font-size: 14px;
  margin-left: 10px;
}

.img-square {
  max-width: 70px;
}

/* Media queries para dispositivos móviles */
@media screen and (max-width: 767px) {
  .general-proyectos {
    width: 400px; /*prueba*/
    height: 113px; /*prueba*/
  }

  .proyectos-square {
    margin-bottom: 20px; /* Mantener espacio entre los elementos */
  }
}

/*======================FRAMES LIBRO INTERACTIVO====================*/

.frames {
  /*margin: 10px;*/
  display: flex;
  flex-wrap: wrap;
  /*justify-content: space-between;*/
  justify-content: center;
}

.box-frames {
  text-align: center;
  justify-content: center;
  align-items: center;
  padding: 40px;
}

.box-frames h1 {
  margin: 5px;
  font-size: 30px;
  color: var(--first-color);
}

.box-frames a {
  margin-top: 10px;
}

/*=======NOTIFICACION=========*/

.notification {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #d0b5a2;
  padding: 10px 20px;
  border-radius: 5px;
  color: #fff;
  font-size: 18px;
  z-index: 1000;
}

/*===========POLITICA DE PRIVACIDAD=========*/

.politica {
  margin: 30px;
}

.politica h1,
h2 {
  margin-top: 15px;
}

.politica p {
  margin: 10px;
  text-align: justify;
}

/*========TIMELINE=========*/

.timeline {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
}

.timeline-header {
  text-align: center;
  margin-bottom: 40px;
}

.timeline-item {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
}

.timeline-icon {
  width: 50px;
  height: 50px;
  background-color: #f4c3c3;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  color: #fff;
  margin-right: 20px;
}

.timeline-content {
  flex: 1;
  padding: 20px;
  background-color: #f8f8f8;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.timeline-content h4 {
  margin-top: 0;
}

.timeline-content p {
  margin-bottom: 0;
}

/*===CARRUSEL===*/

.company-logos {
  overflow: hidden;
  padding: 20px 0;
}

.logo-carousel {
  display: flex;
  animation: scroll 20s linear infinite; /* Ajusta el tiempo de desplazamiento según sea necesario */
  width: max-content;
  margin: 0 auto; /* Centra el carrusel horizontalmente */
}

.logo {
  width: 200px;
  margin-right: 20px; /* Espacio entre logos */
}

.logo img {
  width: 100%;
  height: auto;
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-200px * 8)); /* Ajusta el número de imágenes */
  }
}

/*=====PROYECTOS SLIDER=======*/

.contain {
  max-width: 1220px;
  margin-inline: 1.5rem;
}

.gridd {
  display: grid;
  gap: 1.5rem;
}

.sections {
  padding-block: 5rem 1rem;
}

/*=====project========*/

.project__swiper {
  margin: initial;
}

.project__container {
  padding-top: 2rem;
  row-gap: 2.5rem;
}

.project__data {
  text-align: center;
}

.project__title {
  font-size: var(--biggest-font-size);
  margin-bottom: 1rem;
}

.project__images {
  display: grid;
}

.project__article,
.project__img {
  width: 220px;
  transition: scale 0.4s;
}

.project__article {
  scale: 0.8;
}

/*Swiper class */

.swiper-slide-active,
.swiper-slide-duplicate-active {
  scale: 1;
}

@media screen and (min-width: 1220px) {
  .contain {
    margin-inline: auto;
  }

  .project__container {
    grid-template-columns: 435px 745px;
    align-items: center;
    padding-block: 7rem 2rem;
  }

  .project__data {
    text-align: initial;
  }

  .project__description {
    margin-bottom: 4rem;
  }

  .project__article,
  .project__img {
    width: 290px;
  }
}

/*=========== BREAKPOINTS ===============*/
/*For small devices*/

@media screen and (max-width: 320px) {
  .contain {
    margin-inline: 1rem;
  }
}

/*For medium devices*/

@media screen and (min-width: 576px) {
  .project__container {
    grid-template-columns: 420px;
    justify-content: center;
  }
}

@media screen and (min-width: 768px) {
  .project__container {
    grid-template-columns: 580px;
  }
}

/*For large devices*/

@media screen and (min-width: 1150px) {
  .project__data {
    width: initial;
  }
}

@media screen and (min-width: 1220px) {
  .contain {
    margin-inline: auto;
  }

  .project__container {
    grid-template-columns: 435px 745px;
    align-items: center;
    padding-block: 7rem 2rem;
  }

  .project__data {
    text-align: initial;
  }

  .project__description {
    margin-bottom: 4rem;
  }

  .project__article,
  .project__img {
    width: 290px;
  }
}

/*====PESTAÑA DE REMODELACIONES====*/

/*.remodeling {
  background-image: url(../img/fondos/moon-fondo.jpg);
  background-size: 200px;
  background-repeat: no-repeat;
}*/

.remodeling {
  background-image: url("../img/fondos/moon-fondo.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%; /* Ocupa todo el ancho disponible */
  height: 50px; /* Fija la altura en 300px */
}

/*PESTAÑA MOON */

.moon {
  margin-top: 0px;
}

.moon h2 {
  font-size: 25px;
  letter-spacing: 3px;
  padding-bottom: 10px;
}

.box-moon {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 20px;
}

.moon-img {
  width: 227px;
  height: 128px;
  object-fit: cover;
  cursor: pointer;
  transition: transform 0.3s, filter 0.3s;
}

.moon-img:hover {
  transform: scale(1.05);
  filter: brightness(1.2);
}

.expanded {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  cursor: pointer;
}

/* Estilos para el overlay */
#overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 999;
  display: none;
  transition: opacity 0.3s ease; /* Transición suave de opacidad */
  text-align: center;
  align-items: center;
}

/* Estilos para el contenedor de la imagen expandida */
#expanded-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
  display: none;
  opacity: 0; /* Inicialmente invisible */
  transition: opacity 0.3s ease, transform 0.3s ease; /* Transición suave de opacidad y transformación */
  max-width: 90%; /* Ajustamos el ancho máximo del contenedor */
  max-height: 90%; /* Ajustamos la altura máxima del contenedor */
}

#expanded-image {
  max-width: 100%; /* Ajustamos el ancho máximo de la imagen */
  max-height: 100%; /* Ajustamos la altura máxima de la imagen */
  margin: auto;
}

/* Estilos para el botón de cerrar */
#close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 30px;
  color: #fff;
  cursor: pointer;
}

@media screen and (max-width: 1024px) {
  .box-moon {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media screen and (max-width: 768px) {
  .box-moon {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 480px) {
  .box-moon {
    grid-template-columns: repeat(1, 1fr);
  }
}

/*==================CONTADOR========================*/

.contador {
  /*margin: 30px;*/
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-top: 20px;
  margin-bottom: 20px;
}

.contador div {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 10px;
}

.contador span {
  color: var(--first-color);
}

.number {
  font-size: 80px;
  color: var(--first-color);
  font-weight: bold;
  margin-bottom: 5px;
  font-family: var(--number-font);
}

.texto {
  font-size: 19px;
  text-align: center;
  font-weight: bold;
  letter-spacing: 1px;
}

.icon-contador {
  color: var(--first-color);
  font-size: 90px;
}

/* Media query para dispositivos de hasta 768px de ancho */
@media screen and (max-width: 768px) {
  .number {
    font-size: 8vw;
  }

  .texto {
    font-size: 0.8em;
  }

  .icon-contador {
    font-size: 15vw;
  }
}

/* Media query para dispositivos de hasta 576px de ancho */
@media screen and (max-width: 576px) {
  .number {
    font-size: 10vw;
  }

  .texto {
    font-size: 0.7em;
  }

  .icon-contador {
    font-size: 20vw;
  }

  .contador {
    margin-top: 0 !important;
  }
}
/*===========PESTAÑA REMODELACIONES===============*/

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

.box-remodelaciones {
  margin-bottom: 20px;
  padding: 10px;
}

.box-remodelaciones img {
  width: 350px;
}

.circles-remodelaciones {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  background-color: #dfcdc2;
  padding: 20px;
  border-radius: 50px;
  width: 507px;
  height: 125px;
}

.subcircle h3 {
  letter-spacing: 4px;
  color: #fff;
  margin-bottom: 5px;
  font-size: 15px;
  margin-left: 33px;
}

.subcircle h4 {
  letter-spacing: 2px;
  margin-bottom: 5px;
  font-size: 13px;
  margin-left: 33px;
}

.subcircle p {
  letter-spacing: 1px;
  color: #000;
  font-size: 12px;
  margin-left: 33px;
}

.subcircle img {
  width: 70px;
}


.subcircle a img{
  transition: 0.5s;
  cursor: pointer;
}

.subcircle a img:hover{
  transform: scale(1.1);
}

.image-remodelaciones {
  margin-top: -4px;
  display: flex;
  justify-content: center;
  background-color: var(--first-color);
  padding: 20px;
  border-radius: 50px;
  align-items: center;
}

.image-remodelaciones h2 {
  color: #fff;
  text-align: center;
  margin: auto;
}

/* Media query para dispositivos de hasta 768px de ancho */
@media screen and (max-width: 768px) {
  .remodelaciones {
    flex-direction: column;
  }

  .circles-remodelaciones {
    width: 350px;
    height: 153px;
  }

  .subcircle h3 {
    font-size: 0.8em; /* Ajusta el tamaño de fuente para dispositivos móviles */
    margin-bottom: 3px;
  }

  .subcircle h4 {
    font-size: 0.7em; /* Ajusta el tamaño de fuente para dispositivos móviles */
    margin-bottom: 0px;
    margin-top: 0px;
  }

  .subcircle p {
    font-size: 0.7em; /* Ajusta el tamaño de fuente para dispositivos móviles */
    margin-bottom: 0;
    margin-top: 0;
  }

  .subcircle a {
    margin-top: 0px;
    margin-bottom: 0px;
  }
}

.navigation-btn {
  position: absolute;
  top: calc(50% - 30px); /* La mitad de la altura de la flecha */
  font-size: 36px;
  color: white;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.2));
  border: none;
  padding: 10px 20px;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.3s;
  z-index: 9999; /* Asegura que las flechas estén por encima de la imagen */
}

.navigation-btn:hover {
  background: linear-gradient(to right, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.3));
}

#prev-btn {
  left: 20px;
}

#next-btn {
  right: 20px;
}