/* ═══════════════════════════════════════════════════
   GLOBAL RESPONSIVE FIXES — precioalquiler.com
   Cargado en TODAS las páginas
   ═══════════════════════════════════════════════════ */

/* Safety net: prevenir scroll horizontal */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

* {
  max-width: 100%;
  box-sizing: border-box;
}

img, svg, video, iframe, canvas {
  max-width: 100%;
  height: auto;
}

/* ═══════════════════════════════════════════════════
   HAMBURGER MENU (móvil)
   ═══════════════════════════════════════════════════ */

/* Botón hamburger: oculto por defecto en desktop */
.nav-hamburger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  width: 44px;
  height: 44px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
}

.nav-hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--ink, #111);
  transition: transform 0.2s, opacity 0.2s;
}

/* Estado abierto */
.nav-hamburger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.nav-hamburger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.nav-hamburger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* MOBILE BREAKPOINT — 768px hacia abajo */
@media (max-width: 768px) {

  /* Hamburger SIEMPRE por encima del menú abierto, posición fija */
  .nav-hamburger {
    display: flex !important;
    position: relative !important;
    z-index: 1100 !important;
  }

  /* Cuando hamburger activo, lo coloreamos para que destaque como "X" */
  .nav-hamburger[aria-expanded="true"] {
    background: var(--paper2, #f5f0e8) !important;
    border-radius: 50% !important;
  }

  /* Header con z-index alto para no quedarse detrás del menú */
  nav, .site-nav, header {
    position: relative !important;
    z-index: 900 !important;
    background: var(--paper, #fff) !important;
  }

  /* Menú móvil: posicionado debajo del header dinámicamente */
  .nav-links {
    display: none !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    padding-top: 80px !important;
    background: var(--paper, #fff) !important;
    flex-direction: column !important;
    gap: 8px !important;
    z-index: 1050 !important;
    overflow-y: auto !important;
    box-shadow: none !important;
  }

  .nav-links.mobile-open {
    display: flex !important;
  }

  /* Botón X dentro del overlay del menú móvil (siempre visible en scroll) */
  .menu-close-btn {
    position: fixed !important;
    top: 16px !important;
    right: 16px !important;
    width: 48px !important;
    height: 48px !important;
    background: var(--accent, #d63a1f) !important;
    border: none !important;
    border-radius: 50% !important;
    font-size: 24px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    color: white !important;
    cursor: pointer !important;
    z-index: 1100 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
  }

  .menu-close-btn:active {
    transform: scale(0.95) !important;
  }

  /* Body sin scroll cuando menú abierto */
  body.menu-open {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
  }

  /* Dentro del menú móvil, items en bloque */
  .nav-links a,
  .nav-links .nav-dropdown {
    width: 100%;
    padding: 8px 0;
  }

  /* Dropdown se comporta diferente en móvil — siempre visible cuando expandido */
  .nav-drop-menu {
    position: static !important;
    box-shadow: none !important;
    min-width: auto !important;
    width: 100% !important;
    padding-left: 16px !important;
  }

  /* CTA naranja siempre visible en mobile (fuera del menú colapsable) */
  .nav-cta,
  .cta-nav {
    font-size: 13px;
    padding: 8px 14px;
  }

  /* Nav inner: layout móvil — logo izquierda, hamburger derecha, CTA puede colapsar */
  .nav-inner {
    padding: 12px 16px;
    gap: 8px;
  }

  /* Ticker: reducir tamaño en móvil */
  .ticker-item {
    font-size: 11px !important;
    padding: 0 16px !important;
  }
  .ticker-wrap {
    height: 32px !important;
  }

  /* Prevenir overflow en grids generales */
  .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Tablas con scroll interno en lugar de página */
  table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  /* ─── Aplanar dropdown en móvil ────────────────────── */
  /* Trigger pasa a ser label de grupo (no clicable) */
  .nav-drop-trigger {
    pointer-events: none !important;
    cursor: default !important;
    text-transform: uppercase !important;
    font-size: 12px !important;
    letter-spacing: 0.5px !important;
    color: var(--ink2, #888) !important;
    margin-top: 8px !important;
    padding: 4px 0 !important;
  }

  /* Quitar la flechita del dropdown en móvil (cubre dos posibles patrones) */
  .nav-drop-trigger::after,
  .nav-drop-trigger > span:last-child {
    display: none !important;
  }

  /* El menú dropdown SIEMPRE visible en móvil, sin position absolute */
  .nav-drop-menu {
    display: block !important;
    position: static !important;
    box-shadow: none !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    min-width: auto !important;
    width: 100% !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  .nav-drop-menu a {
    display: block !important;
    padding: 12px 16px !important;
    border-radius: 8px !important;
    font-size: 16px !important;
    color: var(--ink, #111) !important;
    text-decoration: none !important;
  }

  .nav-drop-menu a:hover,
  .nav-drop-menu a:active {
    background: var(--paper2, #f5f0e8) !important;
  }
}

/* MOBILE PEQUEÑO — 480px y menos */
@media (max-width: 480px) {
  .nav-cta,
  .cta-nav {
    font-size: 12px;
    padding: 6px 10px;
  }
  .nav-inner {
    padding: 10px 12px;
  }
}