/* Owl kit demo styles (mínimos, no intrusivos) */
body{font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; margin:0; padding:2rem; background:#f7f7f9;}
h1,h2,h3{margin:.5rem 0 1rem}
.container{max-width:1100px;margin:0 auto}
.grid{display:grid;gap:1rem}
.card{border:1px solid #e5e7eb;border-radius:12px;overflow:hidden;background:#fff}
.card-body{padding:1rem}
.js-owl .item img{display:block;width:100%;height:auto}
.hero-wrapper{position:relative}
.hero-caption{position:absolute;left:0;right:0;bottom:10%;text-align:center;padding:1rem 1.25rem;font-weight:600;text-shadow:0 2px 8px rgba(0,0,0,.35);color:#fff}
.owl-nav button{border:none;background:transparent;font-size:2rem}
.owl-dots .owl-dot span{width:10px;height:10px}
.demo-note{font-size:.9rem;color:#555;margin:.25rem 0 1rem}

/* Asegura que la caption se posicione dentro del slider */
.hero-slider { position: relative; }

/* Caption centrada abajo */
.hero-caption {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}

/* Botón translúcido */
.hero-btn {
  display: inline-block;
  background: rgba(255, 255, 255, 0.267);
  color: #000;
  padding: 10px 25px;
  border-radius: 20px;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 600;
  backdrop-filter: blur(5px);
  transition: all 0.3s ease;
}
.hero-btn:hover { background: rgba(255,255,255,0.85); }

/* Ocultar flechas siempre */
.owl-nav { display: none !important; }

/* Puntitos dentro del slider (solo desktop) */
.owl-dots {
  position: absolute;
  bottom: 15px;
  left: 50%;
  transform: translateX(-50%);
}

/* ALTURAS — unificadas */
.hero-slider .owl-stage-outer,
.hero-slider .owl-item img {
  height: 600px;        /* altura en escritorio */
  object-fit: cover;
}

/* MÓVIL: sin puntitos y MÁS ALTO (ajusta a tu gusto) */
@media (max-width: 767px) {
  .owl-dots { display: none !important; }
  .hero-slider .owl-stage-outer,
  .hero-slider .owl-item img {
    height: 700px;      /* ← súbelo si lo quieres aún más alto (ej. 560px) */
    object-fit: cover;
  }
}

/* Asegura que la caption quede por encima de la imagen y dots */
.hero-caption { z-index: 2; }

/* MÓVIL: botón anclado abajo y centrado */
@media (max-width: 767px) {
  .hero-caption{
    position: absolute;
    bottom: max(12px, env(safe-area-inset-bottom)); /* respeta notch */
    left: 0;
    right: 0;
    transform: none;           /* quita el translateX */
    display: flex;
    justify-content: center;
    padding: 0 16px;           /* respiración lateral */
    text-align: center;
  }

  .hero-btn{
    width: 100%;
    max-width: 520px;          /* evita que se haga “gigante” */
    padding: 14px 18px;        /* toque más cómodo */
    border-radius: 16px;
  }
}