/* Hero Agenda V3: foto de quirófano como fondo integrado, con el borde izquierdo
   disuelto en blanco y desenfocado para sostener la lectura del texto. */
.scheduler-hero{
  position:relative!important;
  height:660px!important;
  overflow:hidden!important;
  background:#fff!important;
}

.scheduler-hero-media{
  position:absolute!important;
  z-index:0!important;
  inset:0!important;
  display:block!important;
  overflow:hidden!important;
  background:#fff!important;
}

/* Encuadre horizontal ocupando la franja derecha; el borde izquierdo se disuelve. */
.scheduler-hero-photo{
  position:absolute!important;
  top:0!important;
  right:0!important;
  bottom:0!important;
  left:auto!important;
  z-index:1!important;
  width:72%!important;
  height:100%!important;
  max-width:none!important;
  object-fit:cover!important;
  object-position:54% 32%!important;
  opacity:1!important;
  filter:none!important;
  -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 12%,rgba(0,0,0,.75) 26%,#000 40%);
  mask-image:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 12%,rgba(0,0,0,.75) 26%,#000 40%);
}

/* Desenfoque sobre la banda de transición: la foto se funde como profundidad de campo. */
.scheduler-hero-media::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  backdrop-filter:blur(11px) saturate(.94);
  -webkit-backdrop-filter:blur(11px) saturate(.94);
  -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 40%,rgba(0,0,0,.55) 52%,rgba(0,0,0,0) 66%);
  mask-image:linear-gradient(90deg,#000 0%,#000 40%,rgba(0,0,0,.55) 52%,rgba(0,0,0,0) 66%);
}

/* Velo blanco suave: garantiza contraste del texto y funde el pie hacia la tarjeta. */
.scheduler-hero-media::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(255,255,255,.92) 0%,rgba(255,255,255,.8) 30%,rgba(255,255,255,.34) 46%,rgba(255,255,255,0) 62%),
    linear-gradient(0deg,rgba(255,255,255,.92) 0%,rgba(255,255,255,.28) 12%,rgba(255,255,255,0) 26%);
}

.scheduler-hero-overlay{display:none!important}

.scheduler-hero-content{
  position:relative!important;
  z-index:4!important;
  width:min(100% - 64px,1370px)!important;
  height:100%!important;
  margin:auto!important;
  padding-top:0!important;
  display:flex!important;
  align-items:center!important;
}

.scheduler-hero-copy{
  width:min(47%,610px)!important;
  padding:0 0 42px!important;
}

.hero-kicker{
  max-width:520px;
  margin:0 0 18px;
  color:#bd9550;
  font-size:18px;
  font-weight:800;
  line-height:1.28;
  letter-spacing:.075em;
  text-transform:uppercase;
}

.hero-accent{
  display:block!important;
  width:82px!important;
  height:3px!important;
  margin:0 0 22px!important;
  background:#bd9550!important;
  box-shadow:none!important;
}

.scheduler-hero-copy h1{
  max-width:650px!important;
  margin:0!important;
  font-family:var(--body)!important;
  font-size:clamp(50px,4.35vw,68px)!important;
  font-weight:800!important;
  line-height:.98!important;
  letter-spacing:-.035em!important;
  color:#0b4b58!important;
  text-shadow:none!important;
}

.scheduler-hero-copy h1 .hero-title-main,
.scheduler-hero-copy h1 .hero-title-gold{display:block}
.scheduler-hero-copy h1 .hero-title-main{color:#0b4b58!important}
.scheduler-hero-copy h1 .hero-title-gold{color:#c49a54!important}

.hero-subtitle{
  margin:20px 0 0;
  color:#0b4b58;
  font-size:25px;
  font-weight:700;
  line-height:1.22;
  letter-spacing:.015em;
}

.form-section{margin-top:-48px!important}

@media(max-width:1100px) and (min-width:761px){
  .scheduler-hero{height:600px!important}
  .scheduler-hero-content{width:min(100% - 44px,1040px)!important}
  .scheduler-hero-copy{width:51%!important;padding-bottom:38px!important}
  .hero-kicker{font-size:15px;max-width:420px}
  .scheduler-hero-copy h1{font-size:50px!important}
  .hero-subtitle{font-size:21px}
  .scheduler-hero-photo{width:76%!important;object-position:55% 50%!important}
  .form-section{margin-top:-42px!important}
}

/* Móvil: encuadre vertical de fondo a pantalla completa. El rostro queda arriba,
   así que el texto baja y el velo blanco sube desde el pie. */
@media(max-width:760px){
  .scheduler-hero{
    position:relative!important;
    height:auto!important;
    min-height:640px!important;
    display:block!important;
    overflow:hidden!important;
  }
  .scheduler-hero-media{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    aspect-ratio:auto!important;
    display:block!important;
  }
  .scheduler-hero-photo{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    object-position:50% 12%!important;
    -webkit-mask-image:none!important;
    mask-image:none!important;
  }
  .scheduler-hero-media::before{
    backdrop-filter:blur(10px) saturate(.94);
    -webkit-backdrop-filter:blur(10px) saturate(.94);
    -webkit-mask-image:linear-gradient(0deg,#000 0%,#000 34%,rgba(0,0,0,.5) 46%,rgba(0,0,0,0) 58%);
    mask-image:linear-gradient(0deg,#000 0%,#000 34%,rgba(0,0,0,.5) 46%,rgba(0,0,0,0) 58%);
  }
  .scheduler-hero-media::after{
    background:linear-gradient(0deg,rgba(255,255,255,.97) 0%,rgba(255,255,255,.96) 34%,rgba(255,255,255,.86) 46%,rgba(255,255,255,.52) 56%,rgba(255,255,255,.14) 66%,rgba(255,255,255,0) 78%);
  }
  .scheduler-hero-content{
    position:relative!important;
    z-index:4!important;
    width:100%!important;
    min-height:640px!important;
    height:auto!important;
    margin:0!important;
    padding:26px 26px 62px!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:flex-end!important;
    align-items:stretch!important;
  }
  .scheduler-hero-copy{
    width:100%!important;
    max-width:none!important;
    padding:0!important;
  }
  .hero-kicker{
    max-width:360px;
    margin-bottom:14px;
    font-size:14px;
    line-height:1.25;
  }
  .hero-accent{
    width:58px!important;
    margin-bottom:16px!important;
  }
  .scheduler-hero-copy h1{
    font-size:clamp(40px,10.8vw,50px)!important;
    line-height:.98!important;
  }
  .hero-subtitle{
    margin-top:17px;
    font-size:21px;
    line-height:1.2;
  }
  .form-section{margin-top:-30px!important}
}

@media(max-width:390px){
  .scheduler-hero{min-height:600px!important}
  .scheduler-hero-content{min-height:600px!important;padding:24px 22px 56px!important}
  .hero-kicker{font-size:12px}
  .scheduler-hero-copy h1{font-size:39px!important}
  .hero-subtitle{font-size:19px}
  .scheduler-hero-photo{object-position:50% 10%!important}
}