/* Pego tu CSS aquí por si quieres probar rápido */
    /* ====== MENÚ ====== */





img.responsive {
  max-height: 64cap;
  width: 100%;
  height: auto;
  border-radius: 1rem;
  display: block;
  object-fit: cover;
}

/* Ajuste especial solo para celulares */
@media (max-width: 768px) {
  img.responsive {
   max-height: 323px;
  }
}


/* === Botón Agendar === */
.btn-agendar {
background: #0034ff;
  color: #fff;
  padding: 8px 16px;
  border-radius: 10px;
  font-weight: 500;
  text-decoration: none;
  transition: 0.3s;
}

.btn-agendar:hover {
  background: darkblue;
  transform: scale(1.05);
}

    html {
  scroll-behavior: smooth; /* activa scroll suave */
}
/* ===== Ajustes solo para pantallas pequeñas ===== */
@media (max-width: 768px) {
  /* Ajuste de altura del encabezado */
  header .relative.w-full.h-80 {
    height: 25rem; /* un poco más alto para dar aire */
  }

  /* Contenedor de imagen + texto */
  header .absolute.bottom-8.left-8.flex.items-center.space-x-6 {
    position: absolute;
   bottom: 1rem;               /* baja un poco más el bloque */
    left: 0;                      /* alinea al borde izquierdo */
    width: 100%;                  /* ocupa todo el ancho del encabezado */
    flex-direction: column;       /* pone foto y texto en columna */
    align-items: center;          /* centra elementos horizontalmente */
    justify-content: center;      /* centra contenido */
    text-align: center;           /* centra texto */
    transform: none;              /* elimina desplazamiento que causaba estrechez */
    padding: 0 1rem;              /* margen lateral interno */
  }

  /* Imagen de perfil */
  header .absolute.bottom-8.left-8.flex.items-center.space-x-6 img {
    width: 120px;
    height: 120px;
    border-width: 4px;
    margin-bottom: 0.8rem;
    object-fit: cover;           /* mantiene la forma sin deformarse */
  }

  /* Texto principal */
  header .absolute.bottom-8.left-8.flex.items-center.space-x-6 h1 {
    font-size: 1.6rem;
    line-height: 1.2;
    max-width: 90%;              /* evita que el texto se salga del ancho */
  }

  /* Subtítulo */
  header .absolute.bottom-8.left-8.flex.items-center.space-x-6 p {
    font-size: 1rem;
    color: #f0f0f0;
    max-width: 85%;
  }
}