/* === Hero con Video de Fondo - Module CSS === */

.custom-hero-video-wrapper {
  position: relative; /* Contenedor principal relativo para posicionar elementos internos */
  overflow: hidden; /* Evita que el video se salga */

  /* --- Control de Padding Dinámico --- */
  /* Paddings por defecto (ajusta estos si quieres un valor diferente cuando los campos estén vacíos) */
  padding-top: 120px;
  padding-bottom: 90px;
  padding-left: 20px; /* Padding horizontal fijo */
  padding-right: 20px; /* Padding horizontal fijo */
  
  

  /* Anular padding vertical con valores de campos si existen */
  {% if module.padding_top_px is number %}
  padding-top: px; /* Añade unidad 'px' */
  {% endif %}
  {% if module.padding_bottom_px is number %}
  padding-bottom: px; /* Añade unidad 'px' */
  {% endif %}
  /* --- Fin Control Padding --- */
  
  /* NOTA: Se eliminó la lógica y el campo min-height: ...vh; */

  display: flex; /* Usamos flexbox para centrar el contenido */
  justify-content: center; /* Centrar horizontalmente */
  align-items: center; /* Centrar verticalmente */
  width: 100%; /* Asegura que ocupe todo el ancho */
  box-sizing: border-box; /* Incluye padding en el ancho/alto total */

  /* Fallback background en caso de que el video falle o en móvil */
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  {% if module.fallback_image.src %}
  background-image: url('');
  {% endif %}
}

.custom-hero-video-element {
  position: absolute; /* Posicionamiento absoluto para el fondo */
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%); /* Centrado exacto */
  min-width: 100%;
  min-height: 100%;
  width: auto; /* Ajuste automático para cubrir */
  height: auto; /* Ajuste automático para cubrir */
  z-index: 1; /* Capa base */
  object-fit: cover; /* Asegura que el video cubra sin distorsionarse */
  /*filter: saturate(75%); /* <-- Añade esta línea aquí */
}

/* Overlay (capa de color semitransparente) */
.custom-hero-video-wrapper::after {
  content: ''; /* Necesario para pseudo-elementos */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2; /* Encima del video */

  /* Aplicar color y opacidad del campo de color */
  {% if module.overlay_color.color %}
  background-color: hsla(, );
  {% else %}
  /*background-color: rgba(0, 86, 135, 0.5); /* Un negro semitransparente por defecto si no se elige color */
  background-color: rgba(0, 79, 124, 0.5); /* Un negro semitransparente por defecto si no se elige color */
  {% endif %}
}

.custom-hero-video-content {
  position: relative; /* Posición relativa para que se muestre */
  z-index: 3; /* Encima del video y del overlay */
  text-align: center; /* Centrar texto (puedes ajustarlo) */
  color: #ffffff; /* Color de texto por defecto (blanco) */
  
  max-width: min(92vw, 1200px);
  margin-inline: auto;
}


/* Estilos básicos para el contenido (ajusta según tu tema) */
.custom-hero-video-content h1{
  font-family: helvetica;
  font-weight: 800;
  line-height: 1.1;
  font-size: clamp(36px, 6vw, 80px);
}
.custom-hero-video-content h2{
  font-family: helvetica;
  font-weight: 700;
  line-height: 1.15;
  font-size: clamp(28px, 4.5vw, 48px);
}
.custom-hero-video-content p{
  font-size: clamp(16px, 1.6vw, 20px);
  color: #ffffff; /* Asegura que los párrafos sean blancos */
  line-height: 1.6;
}


/* Consideraciones para Móviles (opcional pero recomendado) */
@media (max-width: 767px) {
  .custom-hero-video-element {
    /* Oculta el elemento de video en pantallas pequeñas */
    /* display: none; */ /* COMENTADO O ELIMINADO */
  }
  .custom-hero-video-wrapper {
    /* Ajustar padding específico para móvil si es necesario */
     padding-top: 50px; /* Ejemplo: Menos padding vertical en móvil */
     padding-bottom: 40px;
     padding-left: 15px; /* Ejemplo: Menos padding horizontal en móvil */
     padding-right: 15px; 
     
     /* Anular padding móvil con valores de campos si se crearan campos específicos para móvil */
     /* {% if module.padding_top_px_mobile is number %} padding-top: px; {% endif %} */
     /* {% if module.padding_bottom_px_mobile is number %} padding-bottom: px; {% endif %} */
     
     /* Puedes mantener una altura mínima fija en móvil si quieres, independiente del padding */
     min-height: 350px; 
  }
   
    .custom-hero-video-content h1{      
      line-height: 1.25;
      
    }
    .custom-hero-video-content p {
     /*  font-size: 16px; /* Ejemplo de ajuste de tamaño de fuente */
   }
}


/* === Estilos para el Botón del Hero (Enlace Estilizado) === */
/* Asegúrate de añadir la clase 'hero-button-link' a tu enlace en el Rich Text */
.custom-hero-video-content .hero-button-link {
    display: inline-block; 
    font-family: helvetica;
    background-color: #999999; /* Ajustado por el usuario */
    color: #FFFFFF; 
    padding: 20px 30px;  /* Ajustado por el usuario */
    margin-top: 30px; /* Ajustado por el usuario */
    border-radius: 35px; /* Ajustado por el usuario */
    text-decoration: none !important; 
    border: none; 
    cursor: pointer;
    transition: background-color 0.3s ease; 
}

/* Estilo al pasar el ratón (opcional, descomentado por el usuario) */
/*
.custom-hero-video-content .hero-button-link:hover {
    background-color: #E65C00; 
    color: #FFFFFF !important; 
    text-decoration: none !important; 
}
*/


/* Para lo del Boton dentro del hero */
.hero-btn-wrap {
  display: flex;
  justify-content: center;   /* centrado */
  margin-top: 30px;          /* margen superior fijo */
}

#hero-cta{
  display: inline-block;
  margin-top: 15px;
  padding: 22px 25px;
  border-radius: 36px;
  background: #ff6a00;      /* aprox. naranja HubSpot */
  color: #fff !important;
  font-weight: 500;
  font-family: arial;
  font-size: 17px;
  letter-spacing: 0.1px;
  text-decoration: none !important;
  line-height: 1;
  border: 0;
  box-shadow: 0 2px 0 rgba(0,0,0,.08);
  transition: filter .2s ease, transform .2s ease;
}

/*
#hero-cta:hover{
  filter: brightness(1.08);
  transform: translateY(-1px);
}
*/

/* No sobreescribas .hs-button para mantener el “naranja” del tema */

/* Empuja el ancla hacia abajo sin mover el layout */
/*
[id="contact-form"]::before{
  content: "";
  display: block;
  height: 260px;     
  margin-top: -260px;
}

:target{ scroll-margin-top: 0 !important; }
*/


/* puedes volver a un valor pequeño aquí */
html{ scroll-behavior:smooth; }

/*
#contact-form{ scroll-margin-top: 0; }  /* o elimínalo si lo tenías muy alto/negativo */
*/