/* Reglas globales de soporte responsive - agregadas para mejorar adaptabilidad sin tocar los componentes */
html,body{box-sizing:border-box; margin:0; padding:0; background-color: #0a0a23}
*,*::before,*::after{box-sizing:inherit}

/* Espacio superior para navbar fijo + banner (ajustable via variables) */
.page-root { padding-top: calc(var(--nav-height, 64px) + var(--banner-height, 36px)); }

/* Imágenes y medios adaptativos */
img, picture, video, iframe {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Iframes de vídeos (mantener proporción) */
.responsive-iframe{
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
}
.responsive-iframe iframe{
  position: absolute;
  top:0;left:0;width:100%;height:100%;border:0;
}

/* Ajustes para modales y asistentes */
@media (max-width: 640px){
  .rounded-2xl{border-radius:12px}
  /* Forzar asistente a ocupar más ancho en pantallas pequeñas */
  .assistant-full-mobile{width: min(96vw, 420px) !important}
  .fade-carousel-bg{background-attachment: scroll !important}
}

/* Ajustes para botones flotantes y elementos con width fixed */
button.w-14{width:48px !important;height:48px !important}

/* Tarjetas y contenedores que usan max widths */
.container, .responsive-app{padding-left:1rem;padding-right:1rem}

/* Evitar overflow horizontal accidental */
body{overflow-x:hidden}

/* Asegurar que los contenedores de página estén por encima de overlays y fondos */
.responsive-app .container, .responsive-app > .container { position: relative; z-index: 2; }

/* Compensar la barra fija y el banner superior: añadir margen superior a títulos principales */
.responsive-app .text-center > h1,
.responsive-app header .text-center > h1,
.responsive-app .hero-title,
.responsive-app h1.page-title {
  margin-top: 1.6rem; /* espacio adicional para no quedar oculto bajo el navbar */
}

/* Si el título sigue parcialmente oculto en pantallas pequeñas, aumentar el margen */
@media (max-width: 640px){
  .responsive-app .text-center > h1,
  .responsive-app header .text-center > h1,
  .responsive-app h1.page-title {
    margin-top: 2.2rem;
  }
  .page-root { padding-top: calc(var(--nav-height, 56px) + var(--banner-height, 44px)); }
}

/* Media tweaks para pantallas muy pequeñas */
@media (max-width: 420px){
  .text-6xl{font-size:2rem !important}
  .text-4xl{font-size:1.4rem !important}
  .grid-cols-3{grid-template-columns: 1fr !important}
  .md\\:col-span-7, .md\\:col-span-5{grid-column: auto !important}
  .max-w-4xl{max-width:100%}
}

/* Helpers: cuando quieras forzar imágenes a contener y no recortar */
.img-contain{object-fit:contain}

/* Small utility to ensure fixed-size images in headers scale down */
.header-img{max-width:220px;height:auto}

/* Discord widget container adjustments */
.discord-widget{min-height:420px}
.discord-widget iframe{width:100%;height:100%;border:0}

@media (max-width: 640px){
  .discord-widget{min-height:320px}
  .discord-widget iframe{min-height:240px}
}

/* Floating shop categories button (move above assistant) */
.shop-categories-fab{position:fixed; bottom:110px; right:24px; z-index:1300}
@media (max-width:640px){
  .shop-categories-fab{bottom:88px}
}

/* Slider click animation */
.slide-anim-target{will-change:transform}
.slide-animate{animation: sliderClick 280ms ease forwards}
@keyframes sliderClick{
  0%{transform:scale(1)}
  50%{transform:scale(0.985) translateY(-3px)}
  100%{transform:scale(1) translateY(0)}
}

/* Assistant highlight for scroll-to results */
.assist-highlight{outline:4px solid rgba(0,234,255,0.9); box-shadow:0 8px 30px rgba(0,234,255,0.12); transition: box-shadow 300ms ease, outline 300ms ease}

/* End of responsive.css */