/* ===== Responsive + menú móvil — Pedro Roa ===== */
/* Cargar DESPUÉS de css/styles.css */

html { -webkit-text-size-adjust: 100%; scroll-padding-top: 5rem; }
html, body { max-width: 100%; overflow-x: hidden; }
img, video { max-width: 100%; height: auto; }

/* Títulos: nunca desbordar la pantalla */
h1, h2, h3, h4 { overflow-wrap: break-word; }

/* Escala tipográfica fluida */
@media (max-width: 1279px) {
  .text-headline-xl { font-size: clamp(1.875rem, 6vw, 3rem) !important; line-height: 1.12 !important; }
  .text-headline-lg { font-size: clamp(1.5rem, 4.5vw, 2.25rem) !important; line-height: 1.2 !important; }
}
@media (max-width: 639px) {
  .text-headline-md { font-size: 1.5rem !important; line-height: 1.75rem !important; }
  .text-body-lg     { font-size: 1rem !important;   line-height: 1.6rem !important; }
}

/* Celulares: menos margen lateral y botones que no se salen */
@media (max-width: 479px) {
  .px-gutter-lg { padding-left: 1rem !important; padding-right: 1rem !important; }
  a[class*="px-space-xl"] { padding-left: 1rem !important; padding-right: 1rem !important; }
  a.inline-flex { max-width: 100%; text-align: center; }
}

/* ===== Menú desplegable móvil ===== */
#mobile-menu {
  max-height: calc(100vh - 5rem);
  max-height: calc(100dvh - 5rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}
#mobile-menu:not(.hidden) { display: flex; }
#mobile-menu a { min-height: 44px; }
@media (min-width: 1024px) {
  #mobile-menu { display: none !important; }
}
#mobile-menu-btn { transition: background-color .2s, color .2s; }
#mobile-menu-btn:focus-visible,
#mobile-menu a:focus-visible { outline: 2px solid #ddb7ff; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ===== Botones flotantes: WhatsApp + volver arriba ===== */
.fab-stack {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
}
.fab-wa {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .45);
  transition: transform .2s ease, background-color .2s ease;
}
.fab-wa svg { width: 1.9rem; height: 1.9rem; fill: currentColor; }
.fab-wa::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 50%;
  background: #25D366;
  opacity: .45;
  animation: fab-pulse 2.6s ease-out infinite;
}
.fab-wa:hover { transform: scale(1.08); background: #1ebe5b; }
@keyframes fab-pulse {
  0%   { transform: scale(1);   opacity: .45; }
  70%  { transform: scale(1.6); opacity: 0; }
  100% { transform: scale(1.6); opacity: 0; }
}

.fab-top {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(42, 41, 47, .92);
  color: #ddb7ff;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .4);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s, background-color .2s;
}
.fab-top svg { width: 1.4rem; height: 1.4rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.fab-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.fab-top:hover { background: rgba(53, 52, 58, .98); }
.fab-wa:focus-visible, .fab-top:focus-visible { outline: 2px solid #ddb7ff; outline-offset: 3px; }