body{margin: 0;padding: 0;}
#loading{
  height:100vh;
  width:100%;
  background: #ff2200;
}
#loading img{
  height:100vh;
  width:100%;
  background: #ff2200;
}
#primera{background:white;height:100vh;position: relative;
  width:100%;text-align: center;}
  #primera h1{color: #ff2200;text-transform: uppercase;font-size: 80px;position: absolute;left: 0;right: 0;bottom: 40%;}
  #primera img{margin-top: 30px;}
  #inicio{height:100vh;position: relative;
  width:100%;
  background: url('fondo1.jpg');background-position: center;}
  header{background: #9ca8bbba !important;;padding-top: 20px;padding-bottom: 20px;z-index: 999999 !important;}
  .contacto{color: white;border-radius: 20px;padding: 10px; text-align: center;}
  .atv{position: absolute;left: 0;bottom:50px;}

  .atv {
    /* ... Tus estilos actuales ... */
    opacity: 1; /* Asegura que esté visible al inicio */
    transition: opacity 0.3s ease-out; /* Hace que el cambio de opacidad sea suave */
}
  #inicio .c2{    height: 78vh;}
  body {
  cursor: default;
}



.navbar {
  display: flex;
  align-items: center;       /* centra verticalmente */
  justify-content: space-between; /* separa logo, menú y botón */
  padding: 20px 50px;
}

.navbar ul {
  display: flex;
  gap: 30px; /* espacio entre los ítems del menú */
  list-style: none;
  margin: 0;
  padding: 0;
}

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

.btn-contacto {
  padding: 10px 20px;
 color: white !important;
  text-transform: uppercase;
}
 .slider-container {
  position: relative;
  overflow: hidden;
  padding: 60px 0;
  background: white;
}

.slider .slide {
  padding: 0px;
}

.slider img {
  width: 100%;
  height: auto;
  display: block;
}

.arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  z-index: 10;
  white-space: nowrap;
}

.arrow.prev { left: -120px; }
.arrow.next { right: -120px; }
.barrio-titulo {
    font-size: 110px;
    font-weight: 900;
    color: #ff2200;
    letter-spacing: 2px;
    /* margin: 60px 0 40px; */
    text-transform: uppercase;
    margin-left: -50px !important;
    font-size: 24vw !important;
    letter-spacing: 0px !important;
}
.barrio {

    padding: 0px 40px;
    padding-top: 15px;
    padding-bottom: 100px;
}
.barrio-boton {
    margin-top: 20px;}
#primera h1 {
  color: #ff2200;
  text-transform: uppercase;
  font-size: 80px;
  position: absolute;
  left: 0;
  right: 0;
  top: 45%;                /* Centra verticalmente */
  transform: translateY(-50%); /* Ajusta el centro exacto */
  line-height: 97px;
  text-align: center;      /* Centra horizontalmente el texto */
}
.asombro {
    background: #fff;
    color: #ff2200;
    text-align: center;
    padding: 0;
    font-size: 48px;
    font-weight: 900;
    line-height: 1.1;
    text-transform: uppercase;
    position: relative;
}
.asombro span {
  display: inline-block;
  white-space: nowrap;
  font-size: 80px;

  animation: moveText 20s linear infinite;
      font-family: 'DIN';
      font-weight: 500;
      letter-spacing: 0px;
}

.asombro {
  width: 100%;
  overflow: hidden;
  position: relative;
  background: white;
}

.asombro .marquee {
  display: flex;
  white-space: nowrap;
  animation: marquee 10s linear infinite;
}

.asombro .marquee span {
  display: inline-block;
  padding-right: 50px; /* espacio entre repeticiones */
}
@keyframes marquee {
  0% { transform: translateX(0%); }
  100% { transform: translateX(-50%); } /* mueve la mitad del ancho, el duplicado completa el loop */
}

.asombro .marquee {
    display: flex
;
    white-space: nowrap;
    animation: marquee 10s 
linear infinite;
    height: 130px;
    padding-top: 35px;
}
    /* Fuente base */


/* Botón para abrir el modal */
.open-modal-btn {
  background: #6f8197;
  color: #fff;
  padding: 10px 20px;
  border: none;
  font-weight: 500;
  cursor: pointer;
  border-radius: 4px;
}

/* Modal base */
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  justify-content: center;
  align-items: center;
}

.modal.active {
  display: flex;
  animation: fadeIn 0.4s ease;
}

/* Contenido del modal */
.modal-content {
  display: flex;
  width: 80%;
  max-width: 1000px;
  background: #6f8197;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
}

/* Imagen izquierda */
.modal-image {
  flex: 1;
  background: url('modal.jpg') center/cover no-repeat;
}

/* Formulario */
.modal-form {
  flex: 1;
  padding: 60px 50px;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.modal-form h2 {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 40px;
  line-height: 1.3;
  letter-spacing: 0.5px;
}

form {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

label {
  font-size: 14px;
  font-weight: 400;
  color: white;
}

input {
  background: transparent;
  border: none;
  border-bottom: 1px solid white;
  color: white;
  padding: 6px 0;
  font-size: 16px;
  outline: none;
}

input::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

/* Flecha del botón */
.arrow-btn {
  align-self: flex-end;
  background: none;
  border: none;
  color: white;
  font-size: 24px;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.arrow-btn:hover {
  transform: translateX(4px);
}

/* Botón de cierre */
.close-modal {
  position: absolute;
  top: 15px;
  right: 25px;
  font-size: 28px;
  color: white;
  cursor: pointer;
  font-weight: 300;
}

/* Animación */
@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

/* Responsive */
@media (max-width: 768px) {
  .modal-content {
    flex-direction: column;
  }
  .modal-image {
    height: 200px;
  }
}
.proyecto h2{    z-index: 999999;}


.proyecto {

    padding: 0px 0px;
    padding-top: 80px;
}

  /* Posicionamiento relativo de la sección */
  
/* 1. Estilos base del contenedor de la imagen */
.grid-item {
    /* Mantenemos el contenido que hace zoom dentro de la caja */
    overflow: hidden;

}

/* 2. Estilos base de la imagen */
.grid-item img {
    width: 100%;
    height: 100%; /* Asegura que la imagen ocupe todo el item */
    object-fit: cover; /* Ajusta la imagen sin distorsionarla */
        opacity: 0;
    /* Configura una transición suave para el efecto de zoom */
    transition: transform 0.4s ease-in-out; 
}

/* 3. Estilo que se aplica al hacer hover */
.grid-item:hover img {
    /* Aplica un zoom del 10% a la imagen */
    opacity: 1;
    
    /* Opcional: Podrías añadir un filtro para un efecto más visual */
    /* filter: brightness(1.1); */
}



style>
  body {
    margin: 0;
    overflow-x: hidden;
  }

  .hero-slider {
    width: 100%;
    height: 100vh;
    position: relative;
  }

  .hero-slide {
    position: relative;
    height: 100vh;
    overflow: hidden;
  }

  .hero-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .hero-slide h1 {
    position: absolute;
    right: 50px;
    bottom: 50px;
    font-size: 85px;
    line-height: 1.1;
    color: white;
    text-align: right;
    margin: 0;
  }

  /* Opcional: estilo de flechas */
  .slick-prev:before, .slick-next:before {
    color: white;
    font-size: 30px;
  }

  /* Eliminar margen entre slides */
  .slick-slide {
    margin: 0;
  }
  /* Botones personalizados */
 

.slick-initialized .slick-slide {
    display: block;
}
.prev-btn {
  left: 25px !important;
}
.prev-btn2, .next-btn2 {
    position: absolute !important;
    top: 50% !important;
    width: 40px !important;
    transform: translateY(-50%) !important;
    cursor: pointer;
    z-index: 999999999999 !important;
    transition: opacity 0.3s !important;
   
    display: block !important;
    height: auto !important;
    filter: brightness(100%);
    opacity: 1 !important;
}

  .prev-btn2 {
    left: 25px !important;
  }

  .next-btn2 {
     right: 25px !important;
  }

  .prev-btn2:hover, .next-btn:hover {
    opacity: 0.7;
  }

  .efectosobre{margin-top: 100vh;}
  #primera{     position: fixed;
        top: 0;
        left: 0;
        z-index: -1;}
        #primera h1{font-size: 95px;}

  #mainHeader{
    padding-top: 20px; padding-bottom: 20px;padding-left: 50px;padding-right:50px;
  }

  /* nav oculto por defecto */
  nav, #cnt {

    opacity: 0;
  }

  nav.active {
    transform: translateX(0);
    opacity: 1;
  }

  #cnt.active {
    transform: translateX(0);
    opacity: 1;
  }

  /* --- Menú hamburguesa --- */
  .hamburguesa {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 30px;
  height: 22px;
  cursor: pointer;
  position: relative;
  z-index: 1000;
}

.hamburguesa span {
  background: white;
  height: 3px;
  border-radius: 2px;
  width: 100%;
  transition: all 0.3s ease;
  transform-origin: center;
}

/* Animación al abrir (cruz completa) */
.hamburguesa.active span:nth-child(1) {
  transform: rotate(45deg);
  position: absolute;
  top: 50%;
  left: 0;
  translate: 0 -50%;
}

.hamburguesa.active span:nth-child(2) {
  opacity: 0;
}

.hamburguesa.active span:nth-child(3) {
  transform: rotate(-45deg);
  position: absolute;
  top: 50%;
  left: 0;
  translate: 0 -50%;
}



    .capitulo{font-size: 80px;position: absolute;margin-left: 50px;}
    .liv{font-size: 80px;position: absolute;margin-left: -250px;z-index: 99999;margin-top:-5px;width: 200%;}

     .grid-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s ease-in-out 0s; /* sin delay al entrar */
}

.grid-item:hover img {
  opacity: 1;
  transition: opacity 0.4s ease-in-out 0s; /* entra rápido */
}

/* Cuando el hover termina (se sale), se aplica un delay antes de desaparecer */
.grid-item img {
  transition: opacity 0.4s ease-in-out 1s; /* 2s de delay para desaparecer */
}
.grid-item{padding: 0;}
.hamburguesa.active span:nth-child(3) {
    transform: rotate(-45deg) translateY(-1px) translateX(0px);
}
.fixed {
    position: fixed !important;
    z-index: 999999999999 !important;
}
  .navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  background: rgba(0, 0, 0, 0.8);
  transition: transform 0.4s ease, opacity 0.4s ease;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 50px;
}

/* Oculto al hacer scroll hacia abajo */
.navbar.hide {
  transform: translateY(-100%);
  opacity: 0;
}

/* Visible al scrollear hacia arriba */
.navbar.show {
  transform: translateY(0);
  opacity: 1;
}

  .navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 50px;
    position: relative;
  }

  .navbar ul {
    display: flex;
    gap: 30px;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .navbar a {
    text-decoration: none;
    color: white;
  }

  .btn-contacto {
    padding: 10px 20px;
    color: white !important;
    text-transform: uppercase;
    margin-right: 15px; /* acerca el botón a la hamburguesa */
  }

  .acciones {
    display: flex;
    align-items: center;
    gap: 10px; /* separa el botón y la hamburguesa */
  }

  .hamburguesa {
    width: 25px;
    height: 18px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
  }

  .hamburguesa span {
    background: white;
    height: 3px;
    border-radius: 2px;
    width: 100%;
  }

  /* CENTRAR menú entre logo y acciones */
  .navbar nav {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }

    .barrio-titulo {
   
    margin-left: 0 !important;
  
}