/* =========================
   HERO LOGO (pantalla completa inicial)
========================= */
.hero-logo {
  position: relative;
  height: 100vh;
  background: var(--crema);
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  z-index: 2;
}

.hero-logo-inner {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Logo ocupa toda la pantalla al inicio */
.logo-giant img {
  width: 82vw;
  height: auto;
  max-height: 100vh;
  display: block;
  will-change: transform, opacity;
  transform-origin: left top;
  transform: translateY(-30%);
  z-index: 1;
}

/* =========================
   HERO BLOCK (contenido normal)
========================= */
.hero-block {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: var(--space-2);
  background: var(--crema);
  text-align: center;
  opacity: 0; 
  transform: translateX(100px);
  will-change: transform, opacity;
  z-index: 2;
  transform-origin: center center;
}

  .hero-block .hero-image,
  .hero-media{
    border-radius:var(--radius-sm);
    margin-top: 90px;
  }

/* Media containers (imagen o vídeo) */
.hero-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
}

.hero-media img,
.hero-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius:var(--radius-sm);
  margint-top: var(--space-3);
}

/* Control de visibilidad */
.hero-media.mobile-only { display: none; }
.hero-media.desktop-only { display: block; }

@media (max-width: 768px) {
  .hero-media.mobile-only { display: block; }
  .hero-media.desktop-only { display: none; }
}

.hero-block h1 {
  font-size: clamp(2rem, 8vw, 6rem);
  margin-bottom: var(--space-2);
}

/* =========================
   HERO TITLE GIANT 
========================= */
.hero-title-giant {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 100%;
  padding: 0 2vw;
  pointer-events: none;
  opacity: 0;
  z-index: 5;
  text-wrap: none;
}
.hero-title-giant h1 {
  font-size: clamp(2rem, 8vw, 10rem) !important;
  margin: 0; 
  line-height: 1;
  text-align: left;
  color: inherit;
}
/* =========================
   EXCEPCIÓN HERO TITLE GIANT
========================= */
.hero-title-giant,
.hero-title-giant h1 {
  text-wrap: normal !important;
  white-space: normal !important;
  word-break: normal;
}

/* =========================
   HERO INFO (debajo del hero)
========================= */
.hero-info {
  padding: 0;
}
.hero-info-inner {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  padding: var(--space-2);
}
.hero-caption {
  flex: 0 1 50%;
  max-width: 50%;
  text-align: right;
}
.hero-info .hero-caption .btn {
  margin-top: var(--space-1);
}

/* =========================
   HERO MOBILE
========================= */
@media (max-width: 768px) {

    .hero-block .hero-image,
  .hero-media{
    margin-top: 75px;
  }


  .hero-logo {
    height: 95dvh; 
    justify-content: center;
    align-items: flex-start;
  }
.logo-giant {
    position: relative;
    height: 100%; 
  }

  .logo-giant img {
    position: absolute;
    top: clamp(10%, 25%, 20vh);
    left: 50%;
    transform: translateX(-50%);
    width: 80vw;
    height: auto;
    max-height: 80vh; 
  }
  .hero-block .hero-image,
  .hero-media.mobile-only {
    height: 95dvh;
  }

  .hero-media.mobile-only img,
  .hero-media.mobile-only video {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center;
  }

  .hero-title-giant {
    font-size: clamp(2rem, 12vw, 4rem);
    padding: 0 4vw;
  }

 .hero-info {
    width: 100%;
    margin: var(--space-3) 0 !important;
    padding: 0;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
  }

  .hero-info-inner {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0;
    text-align: left;
  }

  .hero-caption {
    flex-basis: 100%;
    max-width: 100%;
    text-align: left;
    margin-top: var(--space-6) !important;
  }

  .hero-info .hero-caption p {
    margin-bottom: var(--space-1);
  }
}

/* =========================
   Flecha scroll abajo
========================= */
.scroll-down {
  position: absolute;
  bottom: 15%;
  left: 50%;
  transform: translateX(-50%);
  color: var(--negro);
  z-index: 10;
  cursor: pointer;
  animation: bounce 1.5s infinite;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.scroll-down:hover { color: var(--naranja); }

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); }
  40% { transform: translateX(-50%) translateY(-10px); }
  60% { transform: translateX(-50%) translateY(-5px); }
}

@media (max-width: 768px) {
  .scroll-down svg { width: 24px; height: 24px; }
}