/* =========================================================
   HERO (desktop por defecto)
   - La imagen usa image-set para servir WEBP y caer a PNG.
   - El foco (background-position) queda centrado en desktop.
   ========================================================= */
.hero {
  position: relative;
  background:
    -webkit-image-set(
      url('../img/hero-doctora2.webp') type("image/webp") 1x,
      url('../img/hero-doctora2.png') type("image/png") 1x
    )
    center top / cover no-repeat;

  background:
    image-set(
      url('../img/hero-doctora2.webp') type("image/webp") 1x,
      url('../img/hero-doctora2.png') type("image/png") 1x
    )
    center top / cover no-repeat;

  color: white;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  padding: 50vh 0 0;
  min-height: 75vh;
  display: flex;
  align-items: center;
  z-index: 1;
}

/* =========================================
   OVERLAY / DECORATIVOS / ANIMACIONES
   ========================================= */
.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.hero .container {
  position: relative;
  z-index: 3;
}

.hero form .form-control,
.btn-search {
  background-color: white;
  color: #014f86;
}

.hero-image-wrapper {
  position: relative;
  animation: float 6s ease-in-out infinite;
  display: block;
}

.hero-image-wrapper::before {
  content: "";
  position: absolute;
  top: -40px;
  left: -60px;
  width: 140%;
  height: 120%;
  background: radial-gradient(circle at 40% 50%, #00c3ff33 0%, transparent 70%);
  z-index: 0;
  border-radius: 50%;
}

.hero-image-wrapper img {
  position: relative;
  z-index: 1;
  border-radius: 1rem;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.especialistas .card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.especialistas .card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

/* =========================================================
   VARIABLES GLOBALES (AJUSTES RÁPIDOS)
   - --hero-shift-mobile: mueven la imagen en MÓVIL (horizontal)
       positivo = a la DERECHA | negativo = a la IZQUIERDA
   - --hero-y-desktop:   mueve el foco en DESKTOP (vertical)
       0% = arriba | 50% = centro | 100% = abajo
   ========================================================= */
:root {
  --hero-shift-mobile: 25%; /* móvil: prueba 12%, 18%, 25%, -10%, etc. */
  --hero-y-desktop: 52%;    /* desktop: sube para ver más abajo (manos) */
}

/* =========================================================
   MÓVILES (≤768px)
   - Ajusta padding y mueve el foco HORIZONTAL con la variable
     --hero-shift-mobile.
   ========================================================= */
@media (max-width: 768px) {
  .hero {
    /* Baja el bloque de texto en móvil */
    padding-top: clamp(80px, 20vh, 260px) !important;
    padding-bottom: 4vh;
    text-align: center;
    flex-direction: column;
    min-height: 78vh;

    /* Mueve el foco de la imagen SOLO en móvil:
       - 50% es centrado
       - calc(50% + 25%) = 75% (más a la derecha)
       - Usa valores negativos para mover a la izquierda */
    background-position: calc(50% + var(--hero-shift-mobile)) top !important;

    /* Si quieres un cambio directo sin variable:
       background-position: 70% top;  (0% izq, 50% centro, 100% der) */
  }

  .hero form { flex-direction: column; }
  .hero .form-control { width: 100%; }
  .hero-image-wrapper { margin-top: 2rem; }

  .especialistas .card {
    transform: none !important;
    box-shadow: 0 5px 10px rgba(0,0,0,0.05);
  }
}

/* Teléfonos muy pequeños (opcional)
   - Empuja un poco más a la derecha si lo necesitas. */
@media (max-width: 480px) {
  :root { --hero-shift-mobile: 42%; } /* sube/baja este % a gusto */
}

/* =========================================================
   DESKTOP / PC (≥992px)
   - Ajusta el foco VERTICAL con --hero-y-desktop para mostrar
     más parte inferior (manos) sin tocar la imagen.
   ========================================================= */
@media (min-width: 992px) {
  .hero{
    /* 50% = centro; valores mayores bajan el foco (se ve más abajo) */
    background-position: 50% var(--hero-y-desktop) !important;

    /* (Opcional) Si quieres más altura de hero en desktop:*/
       min-height: 90vh;
    
  }
}

/* Monitores muy anchos (opcional) – afina todavía más */
@media (min-width: 1400px){
  .hero{
    --hero-y-desktop: 52%; /* muévelo un poco más abajo en pantallas grandes */
  }
}