/* FIX v2.3 (build v2.5) — Menu z-index, tablas cards mobile, logo XL */

/* ============================================
   LOGO MUCHO MÁS GRANDE (como sitio antiguo)
   ============================================ */
.site-header__logo img {
  height: 88px !important;
  width: 88px !important;
  max-width: 88px !important;
}
@media (min-width: 1200px) {
  .site-header__logo img {
    height: 100px !important;
    width: 100px !important;
    max-width: 100px !important;
  }
}
@media (max-width: 720px) {
  .site-header__logo img {
    height: 56px !important;
    width: 56px !important;
    max-width: 56px !important;
  }
}
.site-header {
  padding: 8px 0 !important;
  overflow: visible !important;
}
.site-header__inner { overflow: visible !important; }

/* ============================================
   MENU MÓVIL POR ENCIMA DE TODO
   ============================================ */
@media (max-width: 968px) {
  /* Cuando el menú está abierto, freeze body y el menú tiene z-index MAX */
  body.menu-open {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
    height: 100% !important;
  }
  body.menu-open .main-nav {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: #fff !important;
    z-index: 999999 !important;
    padding: 80px 24px 40px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    display: block !important;
  }
  body.menu-open .mobile-toggle {
    position: fixed !important;
    top: 20px !important;
    right: 16px !important;
    z-index: 1000000 !important;
    font-size: 32px !important;
    background: transparent !important;
    color: var(--gf-fg) !important;
    border: 0 !important;
    padding: 8px 14px !important;
    line-height: 1 !important;
  }
  body.menu-open .mobile-toggle::before {
    content: "✕" !important;
  }
  body.menu-open .mobile-toggle svg { display: none !important; }

  /* También el logo por debajo del menú */
  body.menu-open .site-header__logo {
    z-index: 1 !important;
  }
  /* Header cuando menu abierto */
  body.menu-open .site-header {
    z-index: 999998 !important;
  }
}

/* ============================================
   TABLAS → CARDS EN MÓVIL (responsive completo)
   ============================================ */
@media (max-width: 900px) {
  /* Ocultar tabla tradicional y mostrar cards */
  .spec-table {
    display: block;
    min-width: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  .spec-table thead {
    display: none !important; /* Ocultar cabecera en móvil */
  }
  .spec-table tbody {
    display: block !important;
  }
  .spec-table tbody tr {
    display: block !important;
    background: #fff !important;
    border: 1px solid var(--gf-border) !important;
    border-radius: 12px !important;
    margin-bottom: 12px !important;
    padding: 16px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  }
  .spec-table tbody tr:nth-child(even) td { background: transparent !important; }
  .spec-table tbody tr:hover td { background: transparent !important; }
  .spec-table tbody td {
    display: flex !important;
    justify-content: space-between !important;
    align-items: baseline !important;
    padding: 8px 0 !important;
    border-top: 0 !important;
    border-bottom: 1px solid var(--gf-divider) !important;
    font-family: var(--gf-font-body) !important;
    font-size: 14px !important;
    white-space: normal !important;
  }
  .spec-table tbody td:last-child { border-bottom: 0 !important; }
  /* Añadir el label desde data-attribute */
  .spec-table tbody td::before {
    content: attr(data-label);
    font-family: var(--gf-font-display);
    font-size: 11px;
    font-weight: 700;
    color: var(--gf-fg-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    flex-shrink: 0;
    margin-right: 12px;
  }
  /* Primera celda (el diámetro) destacada */
  .spec-table tbody td:first-child {
    background: var(--gf-green-50) !important;
    margin: -16px -16px 12px -16px !important;
    padding: 14px 16px !important;
    border-radius: 10px 10px 0 0 !important;
    border-bottom: 2px solid var(--gf-primary) !important;
    font-family: var(--gf-font-display) !important;
    font-weight: 800 !important;
  }
  .spec-table tbody td:first-child::before {
    color: var(--gf-primary) !important;
  }
  .spec-table tbody td strong {
    color: var(--gf-primary) !important;
    font-size: 18px !important;
  }

  /* Quitar indicador de "desliza para ver más" (ya no se necesita) */
  .section .container:has(> .spec-table)::after,
  .section .container:has(table)::after {
    display: none !important;
  }
}

/* ============================================
   Ajuste de header cuando NO hay menú abierto
   ============================================ */
.site-header {
  z-index: 900 !important;
}
.hero, .page-head {
  position: relative !important;
  z-index: 1 !important;
}