/* ============================================================
   NAVBAR / MENU COMPARTIDO - fuente unica: src/components/Navbar.astro
   Cargado por Layout.astro (todas las paginas Astro) y por /producto/ (PHP).
   Mantener sincronizado con Navbar.astro (markup) y public/js/navbar.js (JS).
   ============================================================ */

:root {
  --ease-soft: cubic-bezier(.22, .61, .36, 1);
  --nav-h-total: calc(var(--nav-h) + 1px);
  --ease-expo: cubic-bezier(.16, 1, .3, 1);
  --gold-300: #ffe866;
  --navy-900: #021326;
  --shadow-float: 0 1px 2px rgba(2, 19, 38, .30), 0 8px 24px -6px rgba(2, 19, 38, .34);
  --shadow-lift: 0 2px 4px rgba(2, 19, 38, .26), 0 20px 48px -12px rgba(2, 19, 38, .45);
  --glass-blur: blur(26px) saturate(200%);
}

/* la herencia tipografica igual a las paginas Astro (body Roboto) */
.site-nav { font-family: 'Roboto', 'Inter', system-ui, sans-serif; }

/* utilidades del markup (equivalente Tailwind, scoped al nav; van ANTES del componente) */
.site-nav .hidden { display: none; }
.site-nav .inline-flex { display: inline-flex; }
.site-nav .items-center { align-items: center; }
.site-nav .whitespace-nowrap { white-space: nowrap; }
.site-nav .font-medium { font-weight: 500; }
.site-nav .text-\[15px\] { font-size: 15px; }
.site-nav .text-secondary { color: var(--secondary); }
.site-nav .ml-auto { margin-left: auto; }
.site-nav .ml-2 { margin-left: .5rem; }
.site-nav .gap-0\.5 { gap: .125rem; }
@media (min-width: 640px) { .site-nav .sm\:inline { display: inline; } }
@media (min-width: 1280px) { .site-nav .xl\:flex { display: flex; } }

/* ============ componente nav ============ */
/* —— NAVBAR: pill glass blanco, fijo arriba (siempre) —— */
    .site-nav {
      position: fixed; top: 0; left: 0; right: 0; z-index: 100;
      color: var(--primary);
      padding-inline: 1rem;
      pointer-events: none;
      background: transparent;
      border-bottom: 0;
      box-shadow: none;
      transition: padding-inline .35s var(--ease-soft);
    }
    @media (min-width: 640px) { .site-nav { padding-inline: 1.5rem; } }
    @media (min-width: 1024px) { .site-nav { padding-inline: 2rem; } }
    .site-nav__track {
      position: relative;
      isolation: isolate;
      pointer-events: auto;
      max-width: min(80rem, 100%);
      margin-inline: auto;
      display: flex; align-items: center; gap: 1rem;
      min-height: 3.75rem;
      padding: .5rem .7rem .5rem .9rem;
      border-radius: 999px;
      background: linear-gradient(180deg, rgba(255,255,255,.74) 0%, rgba(255,255,255,.58) 100%);
      -webkit-backdrop-filter: blur(40px) saturate(220%) brightness(1.06);
      backdrop-filter: blur(40px) saturate(220%) brightness(1.06);
      border: 1px solid rgba(255,255,255,.95);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.95),
        inset 0 -1px 0 rgba(255,255,255,.45),
        0 1px 3px rgba(1,8,22,.08),
        0 22px 50px -20px rgba(1,8,22,.38);
    }
    /* aura: desenfoque de vidrio alrededor de la pill (bordes difuminados) */
    .site-nav__track::before {
      content: '';
      position: absolute;
      inset: -24px;
      border-radius: 999px;
      background: rgba(255,255,255,.14);
      -webkit-backdrop-filter: blur(24px) saturate(170%);
      backdrop-filter: blur(24px) saturate(170%);
      filter: blur(14px);
      z-index: -1;
      pointer-events: none;
    }

    /* la pill se ve igual siempre: sin estado distinto al scrollear */
    @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
      .site-nav__track { background: rgba(255,255,255,.90); }
    }

    /* —— NAV: marca + acciones moviles —— */
    .nav-brand { display: inline-flex; align-items: center; gap: .625rem; flex-shrink: 0; min-width: 0; }
    .nav-brand__img { height: 2.25rem; width: auto; border-radius: 999px; }
    .nav-brand__name {
      font-family: 'Inter Tight', 'Inter', system-ui, sans-serif;
      font-size: 1.125rem; font-weight: 800; letter-spacing: -.025em;
      color: var(--primary); white-space: nowrap;
    }
    .nav-brand__name .text-secondary { color: #7a5f00; }
    .nav-mobile { display: flex; align-items: center; gap: .5rem; margin-left: auto; }
    @media (min-width: 1280px) { .nav-mobile { display: none !important; } }
    .nav-quick, .nav-burger {
      flex: none; width: 2.75rem; height: 2.75rem; border-radius: 999px;
      display: grid; place-items: center;
      background: rgba(0,51,102,.05);
      border: 1px solid rgba(0,51,102,.14);
      color: var(--primary);
      font-size: 1rem; text-decoration: none;
      transition: background .2s ease, border-color .2s ease, color .2s ease, transform .18s ease;
    }
    .nav-quick:hover, .nav-burger:hover { background: rgba(0,51,102,.10); border-color: rgba(0,51,102,.24); }
    .nav-quick:active, .nav-burger:active { transform: scale(.94); }
    .nav-quick--wa:hover { background: rgba(37,211,102,.14); border-color: rgba(37,211,102,.45); color: #128c4a; }
    .nav-burger { position: relative; overflow: hidden; cursor: pointer; }
    .nav-burger i { position: absolute; transition: opacity .25s ease, transform .32s var(--ease-soft); }
    .nav-burger .nav-burger__close { opacity: 0; transform: rotate(-90deg) scale(.4); }
    .site-nav.is-open .nav-burger .nav-burger__open { opacity: 0; transform: rotate(90deg) scale(.4); }
    .site-nav.is-open .nav-burger .nav-burger__close { opacity: 1; transform: none; }

    /* —— NAV: scrim + panel de menu movil (glass blanco) —— */
    .nav-scrim {
      position: fixed; inset: 0; z-index: -1; pointer-events: none;
      background: rgba(3,12,24,.55);
      -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
      opacity: 0; transition: opacity .35s var(--ease-soft);
    }
    .site-nav.is-open .nav-scrim { opacity: 1; pointer-events: auto; }

    .site-nav__panel {
      position: fixed; left: 0; right: 0;
      top: var(--nav-h-total); bottom: 0;
      max-width: none; margin: 0;
      display: flex; flex-direction: column;
      z-index: 1;
      padding: .8rem .8rem calc(1.5rem + env(safe-area-inset-bottom));
      overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
      border-radius: 1.75rem 1.75rem 0 0;
      background: linear-gradient(180deg, rgba(255,255,255,.86) 0%, rgba(255,255,255,.74) 100%);
      -webkit-backdrop-filter: blur(44px) saturate(220%);
      backdrop-filter: blur(44px) saturate(220%);
      border: 1px solid rgba(255,255,255,.98); border-bottom: 0;
      box-shadow:
        inset 0 1px 0 #fff,
        0 30px 70px -20px rgba(2,19,38,.45);
      visibility: hidden; opacity: 0; pointer-events: none;
      transform: translate3d(0, -14px, 0) scale(.99);
      transform-origin: top center;
      transition: opacity .26s ease, transform .38s var(--ease-soft), visibility 0s linear .38s;
    }
    .site-nav.is-open .site-nav__panel {
      visibility: visible; opacity: 1; pointer-events: auto;
      transform: translate3d(0, 0, 0) scale(1);
      transition: opacity .3s ease, transform .45s var(--ease-soft), visibility 0s;
    }
    @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
      .site-nav__panel { background: rgba(255,255,255,.95); }
    }

    .mm-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
    .mm-link, .mm-cta {
      display: flex; align-items: center; gap: .8rem;
      min-height: 52px; padding: .55rem .75rem;
      border-radius: 1rem; border: 1px solid rgba(0,51,102,.10);
      background: rgba(0,51,102,.04);
      color: rgba(0,51,102,.88);
      font-family: 'Inter Tight', 'Inter', system-ui, sans-serif;
      font-weight: 600; font-size: .98rem; line-height: 1.25;
      text-decoration: none;
      transition: background .2s ease, border-color .2s ease, color .2s ease, transform .18s ease;
    }
    .mm-link:hover { background: rgba(0,51,102,.09); border-color: rgba(0,51,102,.2); color: var(--primary); }
    .mm-link:active, .mm-cta:active { transform: scale(.985); }
    .mm-link.is-active {
      background: rgba(0,51,102,.10);
      border-color: rgba(0,51,102,.26);
      color: var(--primary);
    }
    .mm-link--gold { color: #6b5600; border-color: rgba(201,162,39,.4); background: rgba(201,162,39,.1); }
    .mm-link__ico {
      flex: none; width: 2.3rem; height: 2.3rem; border-radius: .85rem;
      display: grid; place-items: center; font-size: .92rem;
      color: var(--primary);
      background: rgba(0,51,102,.07);
      border: 1px solid rgba(0,51,102,.13);
      transition: background .2s ease, color .2s ease;
    }
    .mm-link.is-active .mm-link__ico { background: var(--primary); color: #fff; border-color: transparent; }
    .mm-link--gold .mm-link__ico { color: #6b5600; background: rgba(201,162,39,.16); border-color: rgba(201,162,39,.4); }
    .mm-link__label { min-width: 0; }
    .mm-link__arrow { margin-left: auto; font-size: .74rem; opacity: .4; }
    .mm-cta {
      margin-top: .5rem;
      background: linear-gradient(135deg, var(--secondary), #f5d900);
      border-color: transparent; color: var(--primary); font-weight: 700;
      box-shadow: 0 14px 28px -16px rgba(245,217,0,.8);
    }
    .mm-cta:hover { background: linear-gradient(135deg, #ffe866, #ffdf00); border-color: transparent; color: var(--primary); }
    .mm-cta .mm-link__ico { background: rgba(4,16,31,.14); color: var(--primary); border-color: transparent; }
    .mm-cta .mm-link__arrow { opacity: .7; }
    .site-nav.is-open .mm-item {
      animation: mmIn .5s var(--ease-soft) both;
      animation-delay: calc(var(--i, 0) * 45ms + 90ms);
    }
    @keyframes mmIn {
      from { opacity: 0; transform: translate3d(0, 16px, 0); }
      to   { opacity: 1; transform: none; }
    }

    body.menu-open { overflow: hidden; }
    body.menu-open .whatsapp-float { opacity: 0; pointer-events: none; transform: translateY(150%); }

    @media (min-width: 1280px) {
      .site-nav__panel, .nav-scrim { display: none !important; }
    }
    @media (prefers-reduced-motion: reduce) {
      .site-nav__panel, .nav-scrim, .nav-burger i, .mm-link, .mm-cta { transition-duration: .01ms !important; }
      .site-nav.is-open .mm-item { animation: none !important; }
    }
    .site-nav .nav-link {
      min-height: 44px;
      display: inline-flex;
      align-items: center;
      position: relative;
      border-radius: 999px;
      padding: .5rem .8rem;
      color: rgba(0,51,102,.78);
      transition: color .2s, background-color .2s;
    }
    .site-nav .nav-link:hover { background: rgba(0,51,102,.07); color: var(--primary); }
    .site-nav .nav-link.is-active { background: rgba(0,51,102,.1); color: var(--primary); }
    .site-nav .nav-link.is-active:not(.nav-llantas)::after {
      content: ''; position: absolute; left: 50%; bottom: 3px;
      width: 16px; height: 2px; margin-left: -8px; border-radius: 2px;
      background: #b98900;
    }

/* ============ botones pill (Citas / CTAs del nav) ============ */
.pill-btn {
      display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
      height: 3.5rem; padding: 0 1.9rem; border-radius: 999px;
      font-family: 'Inter Tight', 'Inter', system-ui, sans-serif;
      font-weight: 700; font-size: 1.05rem; letter-spacing: -.01em;
      white-space: nowrap; cursor: pointer;
      transition: transform .3s var(--ease-expo), box-shadow .3s var(--ease-expo),
                  background-color .2s, color .2s, border-color .2s, filter .2s;
    }
    .pill-btn:hover { transform: translateY(-2px); }
    .pill-btn:active { transform: translateY(0) scale(.98); transition-duration: 90ms; }
    .pill-btn--gold { background: linear-gradient(135deg, var(--gold-300), var(--secondary)); color: var(--navy-900); box-shadow: 0 8px 24px -6px rgba(255, 215, 0, .45); }
    .pill-btn--gold:hover { box-shadow: 0 16px 40px -10px rgba(255, 215, 0, .55); }
    .pill-btn--solid { background: linear-gradient(135deg, #00427a, var(--primary)); color: #fff; box-shadow: var(--shadow-float); }
    .pill-btn--solid:hover { box-shadow: var(--shadow-lift); }
    .pill-btn--glass { background: rgba(255, 255, 255, .12); color: #fff; border: 1px solid rgba(255, 255, 255, .32); box-shadow: inset 0 1px 0 rgba(255,255,255,.28); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
    .pill-btn--glass:hover { background: rgba(255, 255, 255, .20); border-color: rgba(255, 255, 255, .48); }
    .pill-btn--sm { height: 2.75rem; padding: 0 1.15rem; font-size: .9rem; }

/* ============ ajustes por pagina (antes en home.css) ============ */
.is-home .site-nav {
  position: fixed; top: 0; left: 0; right: 0;
  padding: 1rem 1rem 0;
  background: transparent;
  border-bottom: 0;
  box-shadow: none;
}
@media (min-width: 1024px) { .is-home .site-nav { padding: 1.75rem 2rem 0; } }

/* pill glass blanco siempre: sin estado contraido (Layout.astro) */
  
.site-nav [data-header-brand] { min-height: 44px; min-width: 44px; }

  /* ---------- menu: item destacado "Encuentra tu llanta" ---------- */
  .site-nav .nav-link.nav-llantas{padding-inline:.75rem;border-radius:999px;color:#6b5600;font-weight:700;background:rgba(201,162,39,.13);box-shadow:inset 0 0 0 1px rgba(201,162,39,.40)}
  .site-nav .nav-llantas::after{display:none}
  .site-nav .nav-link.nav-llantas:hover{background:rgba(201,162,39,.22);color:#554500}
  .site-nav__panel .nav-llantas-m{color:var(--secondary);font-weight:700;background:rgba(255,215,0,.10);box-shadow:inset 0 0 0 1px rgba(255,215,0,.28)}

  /* ---------- paginas internas: pill glass blanco flotado (Layout.astro) ---------- */
  body:not(.is-home) .site-nav{ padding: 1rem 1rem 0; background: transparent; border-bottom: 0; box-shadow: none; }
  @media (min-width: 1024px) { body:not(.is-home) .site-nav { padding: 1.75rem 2rem 0; } }