/* 1. Eliminar padding y márgenes superiores de Solace para que el Hero 3 ocupe desde el pixel 0 superior */
body.sca-has-hero #solace_body,
body.sca-has-hero #page,
body.sca-has-hero .main-page,
body.sca-has-hero .main-page1,
body.sca-has-hero .wrapper,
body.sca-has-hero .site-content,
body.sca-has-hero #content,
body.sca-has-hero main,
body.sca-has-hero .entry-content,
body.sca-has-hero .page,
body.sca-has-hero article,
body.sca-has-hero section.container-page,
body.sca-has-hero .container-page .row1,
body.sca-has-hero .myrow,
body.sca-has-hero .content,
body.sca-has-hero .boxes-content,
body.sca-has-hero .the-content {
  padding-top: 0 !important;
  margin-top: 0 !important;
  border-top: 0 !important;
}

/* 2. Desencajonar EXCLUSIVAMENTE el contenedor del Hero 3 */
.elementor-element.elementor-element-bd61bfe,
.elementor-element.elementor-element-cc6c048,
.elementor-section:has(.sca-hero3-container),
.elementor-container:has(.sca-hero3-container),
.elementor-row:has(.sca-hero3-container),
.elementor-column:has(.sca-hero3-container),
.elementor-column-wrap:has(.sca-hero3-container),
.elementor-widget-wrap:has(.sca-hero3-container),
.elementor-element-populated:has(.sca-hero3-container),
.elementor-element:has(.sca-hero3-container),
.e-con:has(.sca-hero3-container),
.e-con-boxed:has(.sca-hero3-container),
.e-parent:has(.sca-hero3-container) {
  --container-max-width: 100vw !important;
  --container-max-width: 100dvw !important;
  max-width: 100vw !important;
  max-width: 100dvw !important;
  width: 100% !important;
  padding: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-top: 0 !important;
  border: 0 !important;
}

.elementor-element.elementor-element-bd61bfe > .e-con-inner,
.elementor-element.elementor-element-cc6c048 > .e-con-inner,
.e-con-boxed:has(.sca-hero3-container) > .e-con-inner,
.e-con-inner:has(.sca-hero3-container) {
  --container-max-width: 100vw !important;
  --container-max-width: 100dvw !important;
  max-width: 100vw !important;
  max-width: 100dvw !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

.elementor-element.elementor-element-8fac8aa,
.elementor-element-8fac8aa .elementor-widget-container,
.elementor-element-8fac8aa .elementor-shortcode,
.elementor-element.elementor-element-65cf3e2,
.elementor-element-65cf3e2 .elementor-widget-container,
.elementor-element-65cf3e2 .elementor-shortcode,
.elementor-widget-shortcode:has(.sca-hero3-container),
.elementor-widget:has(.sca-hero3-container),
.elementor-widget-container:has(.sca-hero3-container),
.elementor-shortcode:has(.sca-hero3-container) {
  width: 100% !important;
  max-width: 100vw !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

/* 3. Breakout a pantalla completa 100vw / 100dvw */
.sca-hero3-container {
  position: relative !important;
  display: block !important;
  width: 100vw !important;
  width: 100dvw !important;
  max-width: 100vw !important;
  max-width: 100dvw !important;
  left: 50% !important;
  right: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  height: 100vh !important;
  height: 100svh !important;
  background-color: var(--sca-bg, #121212) !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.sca-hero3 {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  color: var(--sca-text);
  isolation: isolate;
}

.sca-hero3__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
  /* Degradado suave a transparente en la parte inferior para fusionarse con el fondo de la página */
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 60%,
    rgba(0, 0, 0, 0.85) 74%,
    rgba(0, 0, 0, 0.45) 86%,
    rgba(0, 0, 0, 0.12) 95%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 60%,
    rgba(0, 0, 0, 0.85) 74%,
    rgba(0, 0, 0, 0.45) 86%,
    rgba(0, 0, 0, 0.12) 95%,
    transparent 100%
  );
}

.sca-hero3__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  pointer-events: none;
  z-index: 0;
}

.sca-hero3__overlay-base,
.sca-hero3__overlay-top,
.sca-hero3__overlay-tint,
.sca-hero3__overlay-bottom {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.sca-hero3__overlay-base {
  display: none;
  background: none;
}

.sca-hero3__overlay-top {
  inset-inline: 0;
  top: 0;
  height: 0;
  background: none;
  display: none;
}

.sca-hero3__overlay-tint {
  display: none;
  background: none;
  mix-blend-mode: multiply;
}

.sca-hero3__overlay-bottom {
  inset-inline: 0;
  bottom: 0;
  height: 0;
  display: none;
  background: none;
}

/* Fallback para navegadores antiguos que no soportan mask-image */
@supports not (mask-image: linear-gradient(to bottom, #000, transparent)) and not (-webkit-mask-image: linear-gradient(to bottom, #000, transparent)) {
  .sca-hero3__overlay-bottom {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 180px;
    background: linear-gradient(to top, var(--sca-bg, #121212) 0%, transparent 100%);
    pointer-events: none;
    z-index: 1;
    display: block;
  }
}

.sca-hero3__loader {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: rgba(255, 255, 255, 0.08);
  z-index: 10;
  pointer-events: none;
}

.sca-hero3__loader-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--sca-oro-deep), var(--sca-oro), var(--sca-oro-hover));
  box-shadow: 0 0 10px rgba(241, 196, 15, 0.6);
  transition: width 0.15s ease-out;
}

.sca-hero3__messages {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.sca-hero3__slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem 1.5rem;
  box-sizing: border-box;
  opacity: 0;
  visibility: hidden;
  transform: translateY(40px);
  filter: blur(3px);
  pointer-events: none;
  will-change: opacity, transform, filter;
}

.sca-hero3__slide.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  filter: blur(0);
}

.sca-hero3__slide .sca-hero3__content {
  position: relative;
  max-width: 58rem;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 3;
  pointer-events: auto;
}

.sca-hero3__slide .sca-hero__title {
  text-align: center;
  font-size: clamp(2.4rem, 6.5vw, 5.2rem);
  line-height: 1.02;
  letter-spacing: -0.01em;
  color: #fff;
  text-shadow: 0 4px 28px rgba(0, 0, 0, 0.8);
}

.sca-hero3__slide .sca-hero__kicker {
  text-align: center;
  margin-bottom: 0.85rem;
  color: var(--sca-oro);
  text-transform: uppercase;
  letter-spacing: 0.25em;
  font-weight: 700;
  font-size: 0.9rem;
}

.sca-hero3__slide .sca-hero__subtitle {
  text-align: center;
  max-width: 42rem;
  margin: 1.25rem auto 0;
  font-size: clamp(1rem, 2.2vw, 1.35rem);
  line-height: 1.65;
  color: rgba(255,255,255,0.9);
  text-shadow: 0 2px 10px rgba(0,0,0,0.6);
}

.sca-hero3__slide .sca-hero__ctas {
  justify-content: center;
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  pointer-events: auto;
}

.sca-hero3__scroll-hint {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  pointer-events: auto;
  background: transparent;
  border: none;
  cursor: pointer;
}

.sca-hero3__scroll-text {
  font-family: var(--sca-font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85);
  transition: color 0.3s;
}

.sca-hero3__scroll-hint svg {
  width: 1.75rem;
  height: 1.75rem;
  color: rgba(255,255,255,0.85);
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.85));
  animation: sca-scroll-hint 2s ease-in-out infinite;
  transition: color 0.3s;
}

.sca-hero3__scroll-hint:hover .sca-hero3__scroll-text,
.sca-hero3__scroll-hint:hover svg {
  color: var(--sca-oro);
}

@media (prefers-reduced-motion: reduce) {
  .sca-hero3__scroll-hint svg {
    animation: none;
  }
}

@media (max-width: 768px) {
  .sca-hero3__slide .sca-hero3__content {
    padding: 1rem 0.5rem;
  }

  .sca-hero3__slide .sca-hero__title {
    font-size: clamp(1.95rem, 8vw, 2.85rem);
  }

  .sca-hero3__slide .sca-hero__subtitle {
    font-size: 0.95rem;
    margin-top: 1rem;
  }

  .sca-hero3__scroll-hint {
    bottom: 1.25rem;
  }
}