.s9-hero{
  position: relative;
  width: 100%;
  height: calc(100vh - var(--nav-h));  
  min-height: 520px;
  overflow: hidden;
  display: grid;
  place-items: center;             
  color: #fff;
}

.s9-hero{
  position: relative;
  width: 100%;
  height: calc(100vh - var(--nav-h));  
  min-height: 520px;
  display: flex;
  align-items: center; 
  justify-content: center;        
  color: #fff;
  overflow: hidden;
}
.s9-hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
}
.s9-inner{
  width: min(1100px, 92vw);
  margin-left: clamp(18px, 6vw, 72px);
  align-self: center;
}
.s9-title{
  font-size: clamp(22px, 3.2vw, 34px);
  font-weight: 800;
  margin: 0 0 14px 0;
  text-shadow: 0 2px 10px rgba(0,0,0,.25);
}
.s9-copy{
  max-width: 560px;
  font-size: clamp(14px, 2vw, 18px);
  line-height: 1.65;
  margin: 0;
  text-shadow: 0 2px 10px rgba(0,0,0,.2);
}
@media (max-width: 680px){
  .s9-hero{ height: auto; min-height: 520px; padding: 42px 0; }
  .s9-inner{
    margin: 0 auto;
    width: 88vw;
    text-align: center;
  }
}

/* --- base: permitir alturas completas --- */
html, body { height: 100%; }

/* Si el navbar es FIXED/superpuesto, no hace falta restar su altura */
:root { --nav-h: 0px; }

/* Fallback para Safari/iOS antiguos (sin dvh) */
@supports not (height: 100dvh) {
  html { height: -webkit-fill-available; }
  body { min-height: -webkit-fill-available; }
  .s9-hero { height: -webkit-fill-available !important; }
}

/* Navegadores modernos: usar visual viewport */
@supports (height: 100dvh) {
  .s9-hero { height: 100dvh !important; }
}

/* Móvil: ocupar exactamente lo visible (evitar hueco); 
   seguimos respetando tu min-height y padding */
@media (max-width: 680px) {
  .s9-hero {
    height: 100svh !important;    /* fallback moderno */
    min-height: 520px;
    padding: 42px 0;
  }
  /* Si hay soporte de dvh, priorízalo sobre svh */
  @supports (height: 100dvh) {
    .s9-hero { height: 100dvh !important; }
  }

  /* Mantén centrado el contenido como ya tienes */
  .s9-inner {
    margin: 0 auto;
    width: 88vw;
    text-align: center;
  }
}