/* RESET BÁSICO */
*{
  box-sizing:border-box;
}

body{
  margin:0;
  font-family:'Montserrat', sans-serif;
  color:#111;
  background:#fff;
}

/* CONTENIDO GENERAL */
.contenido{
  max-width:900px;
  margin:0 auto;
  padding:40px 20px;
}

.contenido h1{
  font-size:36px;
  margin-bottom:10px;
}

.contenido p{
  font-size:18px;
  line-height:1.6;
}


/* HERO PARA PÁGINAS INTERNAS (PARA EL MENÚ) */
.hero-interno{
  height:120px;
  background:#111;
  position:relative;
  z-index:0;
}

.hero-interno .overlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.45);
  pointer-events:none;
}

/* HERO CARRUSEL */
.hero-carrusel {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  margin-top: -64px; /* altura del menú */
}

/* SLIDES */
.slides {
  position: absolute;
  width: 100%;
  height: 100%;
}

.slide {
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transform: scale(1.1);
  opacity: 0;
  transition: opacity 1.5s ease, transform 8s ease;
}

/* Slide activo */
.slide.active {
  opacity: 1;
  transform: scale(1);
}

/* TEXTO */
.hero-text {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: white;
  padding: 20px;
  backdrop-filter: blur(2px);
}

.hero-text h1 {
  font-size: clamp(2.2rem, 6vw, 4rem);
  letter-spacing: 3px;
  animation: fadeUp 1.2s ease forwards;
}

.hero-text p {
  margin-top: 10px;
  font-size: 1.1rem;
  opacity: 0;
  animation: fadeUp 1.5s ease forwards;
  animation-delay: .3s;
}

/* Overlay */
.hero-carrusel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,.4),
    rgba(0,0,0,.6)
  );
  z-index: 1;
}

/* ANIMACIONES */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.hero-carrusel{
  position: relative;
  z-index: 1;
}
.menu{
  z-index: 1000;
}
body.home .hero-carrusel{
  margin-top: -64px;
}
@media (max-width: 768px){
  body:not(.home) .hero-carrusel{
    margin-top: -165px;
  }
body:not(.home) .hero-carrusel{
  margin-top: -165px;
}
:root{
  --header-height: 165px;
}

body:not(.home) .hero-carrusel{
  margin-top: calc(-1 * var(--header-height, 165px));
}
}
#header{
  position: fixed;
  z-index: 9999;
}
/* iOS – esconder scroll indicators */
*::-webkit-scrollbar {
  display: none;
}
html, body {
  overflow-x: hidden;
}