/* ════════════════════════════════════════════════════════
   GIRAUD STAYS — Menú lateral (popup Astra)
   v1.6.4 — reemplaza por completo el bloque que vivía en
   Apariencia → Personalizar → CSS adicional. Todos los
   selectores van prefijados por #ast-mobile-popup (id) para
   ganar tanto al CSS inline dinámico de Astra como, si
   todavía no se ha borrado, al bloque antiguo del Customizer.
   Frontera 921/922px porque ese es el breakpoint real de
   Astra (astra_get_tablet_breakpoint()), no 768.
   ════════════════════════════════════════════════════════ */

@keyframes giraud-panel-in {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}

/* ════════════════ MÓVIL / TABLET (≤921px) ════════════════ */
@media (max-width: 921px) {

  #ast-mobile-popup .ast-mobile-popup-inner {
    position: fixed !important;
    inset: 0 !important;
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    background: #1A1A18 !important;
    z-index: 999999 !important;
    display: flex !important;
    flex-direction: column !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
  }

  #ast-mobile-popup .ast-mobile-popup-overlay {
    background: rgba(14,11,8,.5) !important;
  }

  /* Barra de administración de WordPress: no tapar el panel */
  body.admin-bar #ast-mobile-popup .ast-mobile-popup-inner { top: 46px !important; }
  @media (min-width: 783px) {
    body.admin-bar #ast-mobile-popup .ast-mobile-popup-inner { top: 32px !important; }
  }

  #ast-mobile-popup .ast-mobile-popup-header {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    padding: max(16px, env(safe-area-inset-top)) 24px 8px !important;
    flex-shrink: 0 !important;
    border-bottom: none !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 2 !important;
    background: #1A1A18 !important;
  }

  #ast-mobile-popup #menu-toggle-close,
  #ast-mobile-popup .menu-toggle-close {
    background: transparent !important;
    border: 1.5px solid rgba(250,247,242,.25) !important;
    border-radius: 50% !important;
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    color: #FAF7F2 !important;
    padding: 0 !important;
  }
  #ast-mobile-popup #menu-toggle-close svg,
  #ast-mobile-popup .menu-toggle-close svg {
    width: 16px !important;
    height: 16px !important;
  }

  #ast-mobile-popup .ast-mobile-popup-content {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    justify-content: safe center !important;
    padding: 8px 26px calc(40px + env(safe-area-inset-bottom)) !important;
    box-sizing: border-box !important;
  }
  #ast-mobile-popup .ast-mobile-popup-content > * {
    padding: 0 !important;
    width: 100% !important;
  }

  #ast-mobile-popup .ast-desktop-popup-content { display: none !important; }

  /* — matar el fondo dorado que Astra pinta en ul / a / sub-menu — */
  #ast-mobile-popup .ast-builder-menu-mobile .main-header-menu,
  #ast-mobile-popup .ast-builder-menu-mobile .main-header-menu .menu-link,
  #ast-mobile-popup .ast-builder-menu-mobile .main-header-menu .sub-menu,
  #ast-mobile-popup #ast-hf-mobile-menu .menu-item:hover > .menu-link,
  #ast-mobile-popup #ast-hf-mobile-menu .current-menu-item > .menu-link,
  #ast-mobile-popup .main-navigation,
  #ast-mobile-popup .main-header-bar-navigation {
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
  }

  #ast-hf-mobile-menu {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* — alineación a la izquierda, gana a .content-align-center de Astra — */
  #ast-mobile-popup .main-header-menu,
  #ast-mobile-popup #ast-hf-mobile-menu .menu-link {
    text-align: left !important;
  }
  #ast-mobile-popup .ast-builder-layout-element {
    justify-content: flex-start !important;
  }

  #ast-mobile-popup #ast-hf-mobile-menu .menu-item .menu-link {
    border: 0 !important;
  }

  #ast-hf-mobile-menu > .menu-item > .menu-link {
    font-family: Georgia, serif !important;
    font-size: clamp(24px, 7.2vw, 32px) !important;
    font-weight: 400 !important;
    color: #FAF7F2 !important;
    text-decoration: none !important;
    padding: 9px 0 5px !important;
    display: block !important;
    letter-spacing: -.02em !important;
    line-height: 1.14 !important;
  }
  #ast-hf-mobile-menu > .menu-item > .menu-link:hover,
  #ast-hf-mobile-menu > .menu-item.current-menu-item > .menu-link { color: #D4AE7A !important; }

  /* — submenú en línea: matar width:100%, padding-left:30px y line-height:3 de Astra — */
  #ast-mobile-popup #ast-hf-mobile-menu .sub-menu {
    position: static !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0 14px !important;
    padding: 0 0 8px !important;
    margin: 0 !important;
    list-style: none !important;
    border: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    width: 100% !important;
    line-height: normal !important;
  }
  #ast-mobile-popup #ast-hf-mobile-menu .sub-menu > .menu-item {
    width: auto !important;
    flex: 0 0 auto !important;
  }
  #ast-mobile-popup #ast-hf-mobile-menu .sub-menu .menu-link {
    width: auto !important;
    display: inline-block !important;
    padding: 2px 0 !important;
    line-height: 1.5 !important;
    font-size: 13px !important;
    color: rgba(250,247,242,.55) !important;
    text-decoration: none !important;
  }

  #ast-hf-mobile-menu .ast-menu-toggle,
  #ast-hf-mobile-menu .dropdown-menu-toggle,
  #ast-hf-mobile-menu .ast-icon.icon-arrow,
  #ast-hf-mobile-menu .sub-menu .ast-icon { display: none !important; }

  #ast-hf-mobile-menu li.menu-item-gtranslate {
    margin-top: 36px !important;
    padding-top: 20px !important;
    border-top: 1px solid rgba(250,247,242,.12) !important;
    list-style: none !important;
    background: transparent !important;
    /* NO position, NO display override — GTranslate maneja sus propios internos */
  }
}

/* ── Tablet: 600–921px, el panel se convierte en hoja lateral derecha ── */
@media (min-width: 600px) and (max-width: 921px) {
  #ast-mobile-popup .ast-mobile-popup-inner {
    left: auto !important;
    right: 0 !important;
    width: min(400px, 92vw) !important;
    box-shadow: -20px 0 70px rgba(0,0,0,.45) !important;
  }
}

/* ════════════════ ESCRITORIO (≥922px) ════════════════ */
@media (min-width: 922px) {

  #ast-mobile-popup .ast-mobile-popup-inner {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    bottom: 0 !important;
    width: 340px !important;
    max-width: 90vw !important;
    height: 100vh !important;
    background: #FDFCF8 !important;
    z-index: 999999 !important;
    display: flex !important;
    flex-direction: column !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: -20px 0 70px rgba(26,24,20,.20), -1px 0 0 rgba(26,24,20,.06) !important;
    animation: giraud-panel-in .32s cubic-bezier(.22,.61,.36,1) both !important;
    overflow-y: auto !important;
    transform: none !important;
  }

  #ast-mobile-popup .ast-mobile-popup-header {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    padding: 20px 24px 8px !important;
    flex-shrink: 0 !important;
    border-bottom: none !important;
    background: transparent !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 2 !important;
    background: #FDFCF8 !important;
  }

  #ast-mobile-popup #menu-toggle-close,
  #ast-mobile-popup .menu-toggle-close {
    background: transparent !important;
    border: 1.5px solid rgba(26,24,20,.18) !important;
    border-radius: 50% !important;
    width: 36px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    color: #1A1A18 !important;
    padding: 0 !important;
    opacity: .75 !important;
    transition: opacity .2s, border-color .2s, color .2s !important;
  }
  #ast-mobile-popup #menu-toggle-close:hover,
  #ast-mobile-popup .menu-toggle-close:hover {
    opacity: 1 !important;
    border-color: #B5956A !important;
    color: #B5956A !important;
  }
  #ast-mobile-popup #menu-toggle-close svg,
  #ast-mobile-popup .menu-toggle-close svg {
    width: 16px !important;
    height: 16px !important;
  }

  #ast-mobile-popup .ast-desktop-popup-content {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: flex-end !important;
    padding: 32px 48px 56px !important;
    box-sizing: border-box !important;
  }

  #ast-mobile-popup .ast-mobile-popup-content { display: none !important; }

  #ast-desktop-site-navigation {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
  }
  #ast-desktop-site-navigation .main-navigation {
    background: transparent !important;
    width: 100% !important;
  }

  #ast-desktop-toggle-menu {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: right !important;
    width: 100% !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    gap: 0 !important;
  }

  #ast-desktop-toggle-menu > .menu-item {
    width: 100% !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
  }

  #ast-desktop-toggle-menu > .menu-item > .menu-link {
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 28px !important;
    font-weight: 400 !important;
    color: #1A1A18 !important;
    letter-spacing: -.018em !important;
    text-decoration: none !important;
    padding: 7px 0 4px !important;
    display: block !important;
    text-align: right !important;
    line-height: 1.12 !important;
    transition: color .18s ease !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
  }
  #ast-desktop-toggle-menu > .menu-item > .menu-link:hover { color: #B5956A !important; }

  #ast-desktop-toggle-menu > .menu-item > .menu-link .ast-header-navigation-arrow,
  #ast-desktop-toggle-menu > .menu-item > .menu-link .dropdown-menu-toggle { display: none !important; }

  #ast-desktop-toggle-menu .sub-menu {
    position: static !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
    gap: 0 12px !important;
    padding: 0 0 6px !important;
    margin: 0 !important;
    list-style: none !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    transform: none !important;
  }
  #ast-desktop-toggle-menu .sub-menu .menu-item {
    background: transparent !important;
    border: none !important;
  }
  #ast-desktop-toggle-menu .sub-menu .menu-link {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-size: 13px !important;
    color: #9A9590 !important;
    text-decoration: none !important;
    padding: 2px 0 !important;
    display: inline-block !important;
    background: transparent !important;
    border: none !important;
    transition: color .18s !important;
    cursor: pointer !important;
  }
  #ast-desktop-toggle-menu .sub-menu .menu-link:hover { color: #B5956A !important; }

  #ast-desktop-toggle-menu .sub-menu .ast-icon.icon-arrow,
  #ast-desktop-toggle-menu .ast-menu-toggle { display: none !important; }

  /* ── GTranslate: solo posición y separador, SIN tocar position ni display internos ── */
  #ast-desktop-toggle-menu li.menu-item-gtranslate {
    width: 100% !important;
    margin-top: 32px !important;
    padding-top: 20px !important;
    border-top: 1px solid rgba(181,149,106,.22) !important;
    list-style: none !important;
    text-align: center !important;
  }

  #ast-mobile-popup .ast-mobile-popup-inner::before {
    content: "" !important;
    position: fixed !important;
    inset: 0 !important;
    right: 340px !important;
    background: rgba(14,11,8,.35) !important;
    pointer-events: none !important;
    z-index: -1 !important;
  }
}