/* Aura Essenza — cabecera compartida (portada, /catalogo, fichas, blog).
   Tokens con alcance local para que funcione también en páginas con su propio CSS. */
.nav, .nav-mobile-menu {
  --bg: #0B0B0C; --gold: #C9A55C; --gold-2: #E6CB8B; --cream: #F3ECDD; --cream-2: #CFC6B4; --cream-3: #8C8474;
  --panel: rgba(8, 8, 10, 0.72); --line: rgba(243, 236, 221, 0.16); --hair: rgba(243, 236, 221, 0.12);
  --sans: 'Inter', 'Jost', system-ui, -apple-system, sans-serif; --serif: 'Cormorant Garamond', Georgia, serif;
  --track-wide: .32em; --ease-out: cubic-bezier(.16, 1, .3, 1); --gutter: clamp(1.25rem, 5vw, 5.5rem);
  font-family: var(--sans); box-sizing: border-box;
}
.nav *, .nav-mobile-menu * { box-sizing: border-box; }
.nav a, .nav-mobile-menu a { text-decoration: none; }
.nav button { font-family: inherit; }

.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: grid; grid-template-columns: auto 1fr auto; align-items: center; column-gap: 1.2rem; padding: 1.1rem var(--gutter); transition: background .5s var(--ease-out), padding .5s var(--ease-out), border-color .5s var(--ease-out); }
.nav.is-scrolled { background: rgba(8,8,10,.78); backdrop-filter: blur(16px) saturate(130%); -webkit-backdrop-filter: blur(16px) saturate(130%); border-bottom: 1px solid var(--hair); padding-block: 1rem; }
.nav-brand { grid-column: 2; justify-self: center; font-family: var(--sans); font-weight: 400; font-size: clamp(.9rem, 1.4vw, 1.05rem); letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--cream); white-space: nowrap; }
.nav-links { grid-column: 3; display: none; gap: 1.7rem; justify-self: center; }
.nav-links a { font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--cream-2); position: relative; transition: color .3s; }
.nav-links a::after { content: ""; position: absolute; left: 0; bottom: -5px; width: 0; height: 1px; background: var(--gold); transition: width .4s var(--ease-out); }
.nav-links a:hover { color: var(--cream); }
.nav-links a:hover::after { width: 100%; }
.nav-cta { grid-column: 5; justify-self: end; display: none; font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; padding: .7rem 1.4rem; border: 1px solid var(--line); color: var(--cream); transition: all .4s var(--ease-out); }
.nav-cta:hover { border-color: var(--gold); color: var(--gold); }
.nav-hamburger { display: grid; place-items: center; width: 40px; height: 40px; background: none; border: 0; gap: 4px; flex-direction: column; padding: 0; cursor: pointer; grid-column: 1; justify-self: start; }
.nav-search-toggle { grid-column: 3; justify-self: end; width: 40px; height: 40px; display: grid; place-items: center; background: none; border: 1px solid var(--line); color: var(--cream); font-size: 1.05rem; cursor: pointer; transition: border-color .3s, color .3s; }
.nav-search-toggle:hover, .nav-search-toggle[aria-expanded="true"] { border-color: var(--gold); color: var(--gold); }
.nav-hamburger span { width: 24px; height: 2px; background: var(--cream); transition: all .3s var(--ease-out); display: block; }
.nav-hamburger.is-open span:nth-child(1) { transform: rotate(45deg) translate(10px, 10px); }
.nav-hamburger.is-open span:nth-child(2) { opacity: 0; }
.nav-hamburger.is-open span:nth-child(3) { transform: rotate(-45deg) translate(7px, -7px); }
.nav-mobile-menu { position: fixed; top: 60px; left: 0; right: 0; z-index: 99; background: rgba(8,8,10,.97); backdrop-filter: blur(16px); border-bottom: 1px solid var(--hair); max-height: 0; overflow: hidden; transition: max-height .4s var(--ease-out); }
.nav-mobile-menu.is-open { max-height: 300px; }
.nav-mobile-menu a { display: block; padding: 1.2rem var(--gutter); color: var(--cream-2); font-size: .88rem; letter-spacing: .14em; text-transform: uppercase; border-bottom: 1px solid var(--hair); transition: color .3s; }
.nav-mobile-menu a:hover { color: var(--gold); }
/* buscador único de cabecera */
.nav-search { position: relative; display: none; align-items: center; gap: .6rem; width: min(100%, 300px); padding: .45rem .5rem .45rem .9rem; background: var(--panel); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--line); transition: border-color .4s var(--ease-out), width .4s var(--ease-out); }
.nav-search:focus-within { border-color: var(--gold); }
.nav-search-ic { color: var(--gold); font-size: 1rem; line-height: 1; }
.nav-search input { flex: 1; min-width: 0; background: none; border: 0; outline: none; font-size: .88rem; font-weight: 300; color: var(--cream); padding: .3rem 0; }
.nav-search input::placeholder { color: var(--cream-3); }
.nav-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.nav-search-clear { width: 26px; height: 26px; border: 1px solid var(--line); color: var(--cream-2); font-size: .62rem; background: none; cursor: pointer; flex-shrink: 0; }
.nav-search-clear:hover { color: var(--gold); border-color: var(--gold); }
.nav-suggest { position: absolute; top: calc(100% + 8px); left: 0; right: 0; min-width: 340px; background: rgba(10,10,12,.96); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid var(--line); box-shadow: 0 24px 48px rgba(0,0,0,.45); z-index: 120; max-height: min(70vh, 520px); overflow: auto; }
.nav-suggest[hidden] { display: none; }
.suggest-item { display: grid; grid-template-columns: 1fr auto; column-gap: 1rem; align-items: center; padding: .8rem 1rem; border-bottom: 1px solid var(--hair); color: var(--cream); text-decoration: none; transition: background .25s; }
.suggest-item:hover, .suggest-item.is-active { background: rgba(201,165,92,.08); }
.suggest-brand { font-size: .6rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
.suggest-name { font-family: var(--serif); font-size: 1.05rem; line-height: 1.2; }
.suggest-fam { font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--cream-3); margin-top: .15rem; }
.suggest-price { font-size: .9rem; color: var(--cream-2); font-weight: 300; }
.suggest-all { display: block; padding: .85rem 1rem; font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); background: none; border: 0; width: 100%; text-align: left; cursor: pointer; }
.suggest-all:hover { background: rgba(201,165,92,.08); }
.suggest-empty { padding: 1rem; font-size: .85rem; color: var(--cream-3); font-weight: 300; }
.nav.is-search-open .nav-search { display: flex; position: absolute; top: 100%; left: 0; right: 0; width: auto; margin: 0; padding: .7rem var(--gutter); border-left: 0; border-right: 0; background: rgba(8,8,10,.96); }
.nav.is-search-open .nav-suggest { top: 100%; left: 0; right: 0; min-width: 0; }
@media (min-width: 960px) {
  .nav { grid-template-columns: auto 1fr auto auto; column-gap: 1.2rem; }
  .nav-brand { grid-column: 1; justify-self: start; }
  .nav-links { grid-column: 2; display: flex; gap: 1.1rem; }
  .nav-search { display: flex; grid-column: 3; width: 170px; }
  .nav-search:focus-within { width: 260px; }
  .nav-cta { grid-column: 4; display: flex; }
  .nav-cart span { display: none; }
  .nav-cart { padding: .6rem .8rem; }
  .nav-hamburger, .nav-mobile-menu, .nav-search-toggle { display: none !important; }
}
@media (min-width: 1200px) { .nav { column-gap: 1.6rem; } .nav-links { gap: 1.7rem; } .nav-search { width: 240px; } .nav-search:focus-within { width: 320px; } .nav-cart span { display: inline; } .nav-cart { padding: .7rem 1.4rem; } }
@media (min-width: 1440px) { .nav { column-gap: 2.4rem; } .nav-links { gap: 2.2rem; } .nav-search { width: 300px; } .nav-search:focus-within { width: 380px; } }
.nav-cart { position: relative; align-items: center; gap: .55rem; }
.nav-cart-ic { width: 18px; height: 18px; color: var(--cream); flex-shrink: 0; }
.nav-cart:hover .nav-cart-ic { color: var(--gold); }
.nav-cart-count:not([hidden]) { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 50%; background: var(--gold); color: var(--bg); font-size: .62rem; font-weight: 600; letter-spacing: 0; }
.nav-mobile-menu .nav-cart-count { margin-left: .6rem; }

/* ---- menú desplegable "Catálogo" ---- */
.nav-links a[data-mega] { padding-bottom: 2px; }
.mega { position: absolute; top: 100%; left: 0; right: 0; background: rgba(10,10,12,.96); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); box-shadow: 0 30px 60px rgba(0,0,0,.45); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .35s var(--ease-out), transform .35s var(--ease-out), visibility 0s linear .35s; z-index: 110; }
.nav.is-mega-open .mega { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.mega-inner { max-width: 1320px; margin: 0 auto; padding: 2.2rem var(--gutter) 2.4rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) 1.2fr; gap: 2.5rem; }
.mega-col h4 { font-family: var(--sans); font-weight: 400; font-size: .62rem; letter-spacing: .26em; text-transform: uppercase; color: var(--cream-3); margin: 0 0 1rem; }
.mega-col a { display: block; color: var(--cream-2); font-size: .92rem; font-weight: 300; padding: .32rem 0; transition: color .25s, padding-left .3s var(--ease-out); }
.mega-col a:hover { color: var(--gold); padding-left: .35rem; }
.mega-col a.mega-all { margin-top: .6rem; font-size: .64rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
.mega-col.mega-brands a { font-size: .86rem; padding: .22rem 0; }
.mega-feature { border-left: 1px solid var(--hair); padding-left: 2.5rem; display: flex; flex-direction: column; justify-content: center; gap: .6rem; }
.mega-feature .mega-kicker { font-size: .62rem; letter-spacing: .26em; text-transform: uppercase; color: var(--gold); }
.mega-feature .mega-title { font-family: var(--serif); font-size: 1.7rem; line-height: 1.1; color: var(--cream); }
.mega-feature .mega-title em { font-style: italic; color: var(--gold); }
.mega-feature p { color: var(--cream-2); font-size: .9rem; font-weight: 300; margin: 0; line-height: 1.55; }
.mega-feature .mega-cta { display: inline-block; margin-top: .4rem; padding: .75rem 1.5rem; background: var(--gold); color: var(--bg); font-size: .64rem; letter-spacing: .2em; text-transform: uppercase; align-self: flex-start; transition: background .3s; }
.mega-feature .mega-cta:hover { background: var(--gold-2); }
@media (max-width: 959px) { .mega { display: none; } }

/* ---- acordeón "Catálogo" en el menú móvil ---- */
.nav-mobile-menu .mm-toggle { display: flex; justify-content: space-between; align-items: center; width: 100%; background: none; border: 0; border-bottom: 1px solid var(--hair); color: var(--cream-2); font-size: .88rem; letter-spacing: .14em; text-transform: uppercase; padding: 1.2rem var(--gutter); cursor: pointer; text-align: left; }
.nav-mobile-menu .mm-toggle::after { content: "+"; color: var(--gold); font-size: 1rem; }
.nav-mobile-menu .mm-toggle[aria-expanded="true"]::after { content: "−"; }
.nav-mobile-menu .mm-panel { display: none; padding: .4rem var(--gutter) 1rem; border-bottom: 1px solid var(--hair); grid-template-columns: 1fr 1fr; gap: 0 1.2rem; }
.nav-mobile-menu .mm-panel.is-open { display: grid; }
.nav-mobile-menu .mm-panel h5 { grid-column: 1 / -1; font-size: .6rem; letter-spacing: .24em; text-transform: uppercase; color: var(--cream-3); margin: .9rem 0 .3rem; font-weight: 400; }
.nav-mobile-menu .mm-panel a { display: block; padding: .45rem 0; border: 0; font-size: .82rem; letter-spacing: .04em; text-transform: none; color: var(--cream-2); }
.nav-mobile-menu.is-open { max-height: min(88vh, 900px); overflow: auto; }

/* ---- cabecera sólida (páginas sin hero: /catalogo, fichas, blog) ---- */
.nav.is-solid { position: sticky; background: rgba(8,8,10,.88); backdrop-filter: blur(16px) saturate(130%); -webkit-backdrop-filter: blur(16px) saturate(130%); border-bottom: 1px solid var(--hair); padding-block: 1rem; }
.nav.is-solid .mega { top: 100%; }

/* ---- sugerencias con la caja vacía ---- */
.suggest-label { padding: .9rem 1rem .3rem; font-size: .6rem; letter-spacing: .24em; text-transform: uppercase; color: var(--cream-3); margin: 0; }
.suggest-chips { display: flex; flex-wrap: wrap; gap: .45rem; padding: .3rem 1rem 1rem; }
.suggest-chip { padding: .45rem .9rem; border: 1px solid var(--line); background: none; color: var(--cream-2); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; transition: all .3s var(--ease-out); }
.suggest-chip:hover { border-color: var(--gold); color: var(--gold); }