/* ==========================================================================
   Native — hoja de estilos principal
   ========================================================================== */

:root {
  --native-fondo: #ffffff;
  --native-fondo-alt: rgb(240, 240, 240);
  --native-texto: #323236;
  --native-borde: rgba(0, 0, 0, 0.08);
  --native-transicion: 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --------------------------------------------------------------------------
   Base — quita el rebote elástico del final y el borde blanco que asomaba
   -------------------------------------------------------------------------- */

html {
  /* Sin rebote al llegar arriba o abajo del todo */
  overscroll-behavior-y: none;
  scroll-behavior: smooth;
  /* Si el navegador aún sobre-desplaza, detrás no hay blanco sino el color del footer */
  background-color: var(--native-fondo-alt);
}

body {
  overscroll-behavior-y: none;
  /* El fondo del html (color del footer) queda visible si el navegador
     aún permite sobre-desplazar; el body sólo pinta la zona de contenido. */
  background-color: var(--native-fondo);
  color: var(--native-texto);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

a {
  text-decoration: none;
}

/* Los atributos width/height del HTML reservan el espacio y evitan que el
   layout salte al cargar; height:auto mantiene la proporción al escalar. */
img {
  max-width: 100%;
  height: auto;
}

.txt-justify {
  text-align: justify;
}

.sin-estilo {
  list-style: none;
}

.list-margin {
  margin-right: 0;
}

/* Oculta el texto mientras se aplica el idioma guardado, para que no parpadee */
html.i18n-cargando body {
  opacity: 0;
}

body {
  transition: opacity 0.2s ease;
}

/* --------------------------------------------------------------------------
   Navegador
   -------------------------------------------------------------------------- */

.navbar {
  background-color: #fff;
  height: 80px;
  margin: 20px;
  border-radius: 16px;
  padding: .5rem;
  transition: transform var(--native-transicion), box-shadow var(--native-transicion);
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);
}

.navbar-toggler {
  border: none;
  font-size: 1.25rem;
}

.navbar-toggler:focus,
.btn-close:focus {
  box-shadow: none;
  outline: none;
}

.navbar-nav .nav-item .nav-link {
  color: var(--native-texto);
  font-weight: 600;
  position: relative;
}

.navbar-nav .nav-item .nav-link:hover,
.nav-link.active {
  color: #000;
}

@media (min-width: 991px) {
  .nav-link::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background-color: #000;
    visibility: hidden;
    transition: 0.3s ease-in-out;
  }

  .nav-link:hover::before,
  .nav-link.active::before {
    width: 100%;
    visibility: visible;
  }
}

/* Se oculta hacia arriba incluyendo su margen, para que no asome el borde */
.navbar.oculto {
  transform: translateY(calc(-100% - 24px));
}

.logo {
  width: 100px;
  transition: transform var(--native-transicion);
}

@media screen and (min-width: 991px) {
  .logo {
    width: 10%;
    margin-bottom: 15px;
    padding-top: 20px;
  }

  .logo.oculto {
    transform: scale(0.5);
  }
}

/* El menú lateral en móvil entra suave */
.offcanvas {
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.dropdown-menu {
  border: 1px solid var(--native-borde);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.dropdown-item {
  transition: background-color 0.2s ease, padding-left 0.2s ease;
}

.dropdown-item:hover {
  padding-left: 1.5rem;
}

#languageSelector {
  cursor: pointer;
  border-color: var(--native-borde);
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

/* Versión reducida a 2560px: el original de 6459px pesaba 2.4 MB y es lo
   primero que carga la página. El velo oscuro de encima disimula la
   compresión. El archivo original sigue en la carpeta, sin tocar. */
.hero-section {
  background: url(../img/Casa-Tzintzun/4-DSC07588-hero.webp) no-repeat center;
  background-color: #2a2a28; /* color de base mientras la foto carga */
  background-size: cover;
  width: 100%;
  color: white;
  margin-bottom: 9rem;
  position: relative;
  z-index: 0;
}

.hero-section::before {
  background-color: rgba(0, 0, 0, 0.6);
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.hero-section .container {
  height: 100vh;
  z-index: 1;
  position: relative;
}

.hero-section h1 {
  font-size: 3rem;
}

.hero-section h2 {
  font-size: 1.2rem;
}

/* El título del hero entra al cargar la página */
.hero-section h1,
.hero-section h2 {
  animation: heroEntra 1s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.hero-section h2 {
  animation-delay: 0.15s;
}

@keyframes heroEntra {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   Main
   -------------------------------------------------------------------------- */

@media screen and (min-width: 991px) {
  .imagen__inicio {
    max-width: 60%;
  }
}

.row h1 {
  text-align: center;
  text-justify: inter-word;
}

.margen {
  margin-top: 10rem;
}

/* --------------------------------------------------------------------------
   Proyectos
   -------------------------------------------------------------------------- */

/* Los cinco desarrollos ocupan exactamente el mismo espacio: misma anchura
   de columna y la misma proporción de imagen. Antes cuatro iban a un cuarto
   del ancho y el quinto al ancho completo, y se veía cuatro veces mayor. */
.proyectos-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem 1.5rem;
}

@media (min-width: 576px) {
  .proyectos-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* En escritorio: seis columnas, cada tarjeta ocupa dos (tres por fila).
   La cuarta arranca en la columna 2, así las dos últimas quedan centradas
   bajo las tres de arriba, sin que ninguna cambie de tamaño. */
@media (min-width: 992px) {
  .proyectos-grid {
    grid-template-columns: repeat(6, 1fr);
  }

  .proyecto-1 {
    grid-column: span 2;
  }

  .proyecto-1:nth-child(4) {
    grid-column: 2 / span 2;
  }
}

.proyecto-1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

/* Recorta el zoom dentro del marco de la tarjeta */
.proyecto-1 a {
  display: block;
  width: 100%;
  overflow: hidden;
}

.proyecto-1 img {
  width: 100%;
  aspect-ratio: 4 / 3;
  height: auto;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1),
              filter 0.6s ease;
}

.proyecto-1:hover img {
  transform: scale(1.05);
  filter: brightness(1.03);
}

.proyecto-1 p {
  transition: transform 0.35s ease, letter-spacing 0.35s ease;
  margin-top: 0.75rem;
}

.proyecto-1:hover p {
  letter-spacing: 0.04em;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

/* Sin margen: el footer arranca pegado a la sección anterior, para que
   no quede una franja blanca antes del cierre de la página. */
.footer {
  margin-top: 0;
  padding-top: 1.5rem;
  background-color: var(--native-fondo-alt);
  font-weight: bold;
  position: relative;
  z-index: 1;
}

.footer__info {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.5rem;
  padding: 1rem;
  font-size: 0.9rem;
  color: #555;
}

.footer__info a,
.footer__info span {
  display: block;
  font-size: 0.9rem;
  color: black;
}

.footer__info a:hover {
  opacity: 0.65;
  transition: opacity 0.2s ease;
}

.footer__brand {
  font-weight: bold;
  font-size: 1rem;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
}

.footer__copyright {
  margin-top: 1rem;
  font-size: 0.8rem;
  color: #888;
}

@media screen and (min-width: 768px) {
  .footer__info {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }

  .footer__info a,
  .footer__info span {
    display: inline-block;
    margin: 0 0.5rem;
  }

  .footer__copyright {
    margin-top: 0;
  }
}

.footer__social {
  text-align: center;
  margin-bottom: 1rem;
}

.footer__social a {
  margin: 0 1rem;
  color: #333;
  font-size: 1.2rem;
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   Animaciones de entrada
   -------------------------------------------------------------------------- */

.fade-in-section {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.9s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: var(--delay, 0ms);
  will-change: opacity, transform;
}

.fade-in-section.is-visible {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* Las tarjetas de proyecto aparecen una tras otra */
.proyecto-1 {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.8s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: var(--delay, 0ms);
}

.fade-in-section.is-visible .proyecto-1 {
  opacity: 1;
  transform: none;
}

/* Respeta a quien pide menos movimiento en su sistema */
@media (prefers-reduced-motion: reduce) {
  .fade-in-section,
  .fade-in-section.is-visible,
  .proyecto-1,
  .fade-in-section.is-visible .proyecto-1 {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .hero-section h1,
  .hero-section h2 {
    animation: none;
  }

  .proyecto-1:hover img,
  .grid img:hover {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   Call to action
   -------------------------------------------------------------------------- */

.cto {
  background: url(../img/cto.webp);
  background-size: cover;
  background-position: center;
  width: 100%;
  color: white;
  /* Sin margen inferior: enlaza directo con el footer */
  margin: 9rem 0 0;
  position: relative;
  z-index: 0;
  background-attachment: scroll;
}

@media (min-width: 768px) {
  .cto {
    background-attachment: fixed;
  }
}

.cto::before {
  background-color: rgba(0, 0, 0, 0.6);
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.cto .container {
  height: 100vh;
  z-index: 1;
  position: relative;
}

.cto .btn {
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.cto .btn:hover {
  transform: translateY(4px);
}

/* --------------------------------------------------------------------------
   Botón de WhatsApp
   -------------------------------------------------------------------------- */

.whatsapp-float {
  position: fixed;
  bottom: 100px;
  right: 20px;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #25d366;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.whatsapp-float:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

.whatsapp-float img {
  width: 35px;
  height: 35px;
}

@media (max-width: 768px) {
  .whatsapp-float {
    width: 50px;
    height: 50px;
    bottom: 15px;
    right: 15px;
  }

  .whatsapp-float img {
    width: 28px;
    height: 28px;
  }
}

/* --------------------------------------------------------------------------
   Galería de proyectos
   -------------------------------------------------------------------------- */

.grid {
  margin: 0 auto;
}

.grid > div {
  overflow: hidden;
}

.grid img {
  width: 100%;
  height: auto;
  display: block;
  cursor: pointer;
  transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
              box-shadow 0.45s ease;
}

.grid img:hover,
.grid img:focus-visible {
  transform: scale(1.03);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
  outline: none;
}

.modal-content {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.9);
  border: none;
}

#imgModal img {
  max-width: 100%;
  max-height: 90vh;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  opacity: 0;
  transform: scale(0.97);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

#imgModal.show img {
  opacity: 1;
  transform: scale(1);
}

/* --------------------------------------------------------------------------
   Sin esquinas redondeadas en el contenido
   -------------------------------------------------------------------------- */

.container,
.row,
section,
main > div,
.proyecto-1 img,
.grid img {
  border-radius: 0 !important;
}