/* =========================================================
   NAV / HEADER CONSOLIDADO
   - Iconos WebP → blancos
   - Buscador + "tacha" dorada
   - Drawer con flechas fijas y scroll central
   - Responsive y micro-interacciones
   ========================================================= */

/* ---------- Variables y base ---------- */
.rd-nav{
  --gold: var(--brand, #D4AF37);
  --gold2: var(--brand2, #B9931A);
  --ink:#f1f1f1; --ink-d:#111;
  --glass: rgba(18,18,18,.55);
  --glass-brd: rgba(255,255,255,.10);
  --blur: 16px; --shadow: 0 12px 34px rgba(0,0,0,.28);
  --gap: 1rem;
  position: sticky; top:0; z-index: 1000;
}
.rd-nav a{ color: inherit !important; text-decoration: none; }

/* Barra vidrio — GRID centrado */
.rd-nav__pill{
  display: grid;
  grid-template-columns:
    auto                           /* logo */
    minmax(260px, 1fr)             /* buscador */
    repeat(5, max-content)         /* Inicio, Productos, Acceder, Regístrate, Carrito */
    auto;                          /* hamburguesa */
  align-items: center;
  justify-items: center;
  gap: var(--gap);

  background: var(--glass);
  backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur));
  border: 1px solid var(--glass-brd);
  border-radius: 999px;

  padding: .8rem 1.25rem;
  width: min(1240px, 92%);
  margin: .6rem auto 0;

  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.06);
  color: var(--ink);
}
.rd-nav__divider{
  --band: 1.7vh;
  position: relative; height: var(--band); width: 100%; background: transparent;
}
.rd-nav__divider::before{
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
}

/* Logo */
.rd-brand{ display:inline-flex; align-items:center; justify-self:center; }
.rd-brand__img{ display:block; height:46px; width:auto; object-fit:contain; }
@media (max-width: 980px){
  .rd-brand__img{ height:38px; }
}

/* ---------- Buscador ---------- */
.rd-searchbox{
  --size: 50px;
  position: relative; color:#fff; display:inline-flex; align-items:center; height:var(--size);
  width:100%; justify-self: stretch;
}
.rd-searchbox__input{
  padding-left: calc(var(--size) + 10px);
  width: 100%; height: var(--size);
  font-size: 16px; color:#fff; outline: none; cursor: text;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border-radius: 9999px;
  border: 1px solid rgba(212,175,55,.78);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: inset 1.5px 3px 6px rgba(0,0,0,.35), inset -1px -2px 4px rgba(255,255,255,.06);
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease, background-image .2s ease;
}
.rd-searchbox__input::placeholder{ color: rgba(255,255,255,.85); }
.rd-searchbox__input:hover{
  border-color: rgba(212,175,55,1);
  background-image:
    linear-gradient(120deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.7), rgba(255,255,255,0) 70%),
    linear-gradient(180deg, rgba(212,175,55,.18), rgba(212,175,55,.26));
  background-repeat: no-repeat, no-repeat;
  background-size: 110px 100%, 100% 100%;
  background-position: -140px 0, 0 0;
  animation: rdInputShine 1.4s ease-out 1;
  box-shadow: inset 1.5px 3px 6px rgba(0,0,0,.35), inset -1px -2px 4px rgba(255,255,255,.06), 0 8px 20px rgba(212,175,55,.12);
}
@keyframes rdInputShine{ 0%{background-position:-140px 0,0 0;} 60%,100%{background-position:110% 0,0 0;} }
.rd-searchbox__input:focus{
  background-image: none;
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.04));
  border-color: rgba(212,175,55,1);
  box-shadow: inset 1.5px 3px 6px rgba(0,0,0,.35), inset -1px -2px 4px rgba(255,255,255,.08), 0 8px 20px rgba(212,175,55,.10);
}
.rd-searchbox__icon{
  position:absolute; top:0; left:0; width:var(--size); height:var(--size);
  padding:12px; display:inline-grid; place-items:center; color:#fff;
  background: transparent; border: 2px solid rgba(212,175,55,.65);
  border-radius:9999px; cursor:pointer; overflow:hidden;
  transition: transform .18s, border-color .18s, box-shadow .18s, background .18s;
}
.rd-searchbox__icon svg{ width:100%; height:100%; }
.rd-searchbox__icon::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image: linear-gradient(120deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.7), rgba(255,255,255,0) 70%);
  width:110px; left:-140px; opacity:.55; transform:skewX(-12deg); border-radius:inherit;
}
@keyframes rdBtnShine{ 0%{left:-140px;} 60%,100%{left:110%;} }
.rd-searchbox__icon:hover{
  transform: translateY(-1px);
  background: rgba(212,175,55,.18);
  border-color: rgba(212,175,55,.9);
  box-shadow: 0 12px 26px rgba(212,175,55,.22), inset 0 0 0 1px rgba(212,175,55,.18);
}
.rd-searchbox__icon:hover::before{ animation: rdBtnShine 1.4s ease-out 1; }

/* Buscador en drawer */
.rd-searchbox--drawer{ width: 100%; margin: 6px 0 -10px; flex-shrink: 0; }
.rd-searchbox--drawer .rd-searchbox__input{ width: 100%; }

/* "Tacha" (clear) dorada + cursor mano — desktop */
.rd-searchbox__input::-webkit-search-cancel-button{
  -webkit-appearance:none; appearance:none;
  width:22px; height:22px; cursor:pointer; margin-right:10px; border-radius:50%;
  background-repeat:no-repeat; background-position:center; background-size:22px 22px;
  background-image:url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'>\
  <path fill='%23D4AF37' d='M6.22 6.22a1.25 1.25 0 0 1 1.77 0L12 10.23l4.01-4.01a1.25 1.25 0 1 1 1.77 1.77L13.77 12l4.01 4.01a1.25 1.25 0 1 1-1.77 1.77L12 13.77l-4.01 4.01a1.25 1.25 0 1 1-1.77-1.77L10.23 12 6.22 7.99a1.25 1.25 0 0 1 0-1.77z'/>\
  </svg>");
  transition: transform .15s ease, filter .15s ease, opacity .15s ease;
  opacity:.95;
}
.rd-searchbox__input::-webkit-search-cancel-button:hover{
  transform:scale(1.06);
  filter:drop-shadow(0 0 6px rgba(212,175,55,.35));
  opacity:1;
}
/* En drawer aplica igual */
.rd-searchbox--drawer .rd-searchbox__input::-webkit-search-cancel-button{
  -webkit-appearance:none; appearance:none;
  width:22px; height:22px; cursor:pointer; margin-right:10px; border-radius:50%;
  background-repeat:no-repeat; background-position:center; background-size:22px 22px;
  background-image:url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'>\
  <path fill='%23D4AF37' d='M6.22 6.22a1.25 1.25 0 0 1 1.77 0L12 10.23l4.01-4.01a1.25 1.25 0 1 1 1.77 1.77L13.77 12l4.01 4.01a1.25 1.25 0 1 1-1.77 1.77L12 13.77l-4.01 4.01a1.25 1.25 0 1 1-1.77-1.77L10.23 12 6.22 7.99a1.25 1.25 0 0 1 0-1.77z'/>\
  </svg>");
  transition: transform .15s ease, filter .15s ease, opacity .15s ease;
  opacity:.95;
}
.rd-searchbox--drawer .rd-searchbox__input::-webkit-search-cancel-button:hover{
  transform:scale(1.06);
  filter:drop-shadow(0 0 6px rgba(212,175,55,.35));
  opacity:1;
}

/* ---------- Links / Botones ---------- */
.rd-links{ display: contents; }
.rd-link-btn{
  --btn-gold: var(--gold); --btn-gold2: var(--gold2);
  --btn-text:#f6f6f6; --btn-text-dark:#111;
  --btn-bg: transparent; --btn-brd: rgba(212,175,55,.65);
  --btn-hover-bg: rgba(212,175,55,.18); --btn-hover-brd: rgba(212,175,55,.9);
  position: relative; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:.68rem 1.05rem; border-radius:9999px; font-weight:800; font-size:15px; line-height:1;
  color:var(--btn-text); background:var(--btn-bg); border:2px solid var(--btn-brd);
  box-shadow:0 10px 20px rgba(0,0,0,.20); cursor:pointer; user-select:none; overflow:hidden;
  transition: transform .22s, border-color .22s, background .22s, box-shadow .22s, color .22s;
  justify-self: center;
}
.rd-link-btn__icon{
  width:22px; height:22px; flex:0 0 22px; transition: transform .22s; fill: currentColor;
  display:block; object-fit:contain; filter: invert(1) brightness(2); /* WebP negros → blancos */
}
.rd-icon{ filter: invert(1) brightness(2); }
.rd-link-btn::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(120deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.7),rgba(255,255,255,0) 70%);
  width:110px; left:-140px; opacity:.55; transform:skewX(-12deg); border-radius:9999px;
}
.rd-link-btn:hover{
  transform: translateY(-1px);
  background: var(--btn-hover-bg);
  border-color: var(--btn-hover-brd);
  box-shadow: 0 16px 30px rgba(0,0,0,.30), 0 0 0 1px rgba(212,175,55,.18) inset;
  color:#fff;
}
.rd-link-btn:hover .rd-link-btn__icon{ transform: translateX(3px); }
.rd-link-btn:hover::before{ animation: rdBtnShine 1.4s ease-out 1; }
.rd-link-btn.is-active{
  color: var(--ink-d);
  border-color: rgba(0,0,0,.3);
  background: linear-gradient(180deg, var(--btn-gold), var(--gold2));
  box-shadow: 0 16px 32px rgba(212,175,55,.35), inset 0 -2px 0 rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.55);
}
/* Icon-only (Carrito) */
.rd-link-btn--icon{ width:48px; height:48px; padding:0; border-radius:12px; }
.rd-link-btn--icon .rd-link-btn__icon{ width:24px; height:24px; }
.rd-cart-badge{
  position:absolute; top:-4px; right:-4px; min-width:18px; height:18px; padding:0 5px; display:none;
  border-radius:9999px; background: linear-gradient(180deg, var(--gold), var(--gold2));
  color:#111; font-weight:900; font-size:12px; line-height:18px; box-shadow:0 2px 8px rgba(0,0,0,.35);
}

/* ---------- Hamburguesa ---------- */
.rd-i{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2; }
.rd-toggle{
  position: relative; overflow: hidden;
  display:inline-flex; align-items:center; justify-content:center;
  width:48px; height:48px; border-radius:12px;
  border:1px solid rgba(212,175,55,.55);
  background: linear-gradient(180deg, rgba(212,175,55,.16), rgba(212,175,55,.24));
  color:#fff; cursor:pointer; transition: transform .18s, border-color .18s, box-shadow .18s, background .18s;
  justify-self: center;
}
.rd-toggle::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image: linear-gradient(120deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.7), rgba(255,255,255,0) 70%);
  width:110px; left:-140px; opacity:.55; transform:skewX(-12deg); border-radius:inherit;
}
.rd-toggle:hover{
  transform: translateY(-1px);
  background: rgba(212,175,55,.18);
  border-color: rgba(212,175,55,.9);
  box-shadow: 0 12px 26px rgba(212,175,55,.22), inset 0 0 0 1px rgba(212,175,55,.18);
}
.rd-toggle:hover::before{ animation: rdBtnShine 1.4s ease-out 1; }

/* ---------- Drawer ---------- */
.rd-drawer{
  position: fixed; inset: 0 0 0 auto; z-index: 300; color:#f1f1f1;
  width: clamp(260px, 25vw, 360px); max-width:90%;
  background: rgba(15,15,15,.75); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-left: 1px solid rgba(255,255,255,.12);
  transform: translateX(100%);
  transition: transform .28s cubic-bezier(.2,.8,.2,1);
  overflow: hidden;               /* clave: no scroll global del drawer */
  overscroll-behavior: contain;
}
.rd-drawer.is-open{ transform: translateX(0); }
.rd-backdrop{
  position: fixed; inset:0; z-index: 250;
  background: rgba(0,0,0,.45); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
}
.rd-drawer__inner{ padding:16px; display:flex; flex-direction:column; gap:16px; height:100%; overflow:hidden; }

/* Cabecera del drawer */
.rd-drawer__head{
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px;
}
.rd-drawer__logo{ height:52px; width:auto; display:block; margin: 0 auto; object-fit:contain; }
.rd-drawer__close{
  position: relative; overflow:hidden; display:inline-grid; place-items:center;
  width:48px; height:48px; border-radius:12px; cursor:pointer;
  border:1px solid rgba(212,175,55,.45);
  background: linear-gradient(180deg, rgba(212,175,55,.16), rgba(212,175,55,.24));
  color:#fff; transition: transform .18s, border-color .18s, box-shadow .18s, background .18s;
}
.rd-drawer__close svg{ width:100%; height:100%; }
.rd-drawer__close::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image: linear-gradient(120deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.7), rgba(255,255,255,0) 70%);
  width:110px; left:-140px; opacity:.55; transform:skewX(-12deg); border-radius:inherit;
}
.rd-drawer__close:hover{
  transform: translateY(-1px);
  background: rgba(212,175,55,.18);
  border-color: rgba(212,175,55,.9);
  box-shadow: 0 12px 26px rgba(212,175,55,.22), inset 0 0 0 1px rgba(212,175,55,.18);
}
.rd-drawer__close:hover::before{ animation: rdBtnShine 1.4s ease-out 1; }

/* Links del drawer (compactos) */
.rd-drawer__links{ display:flex; flex-direction:column; gap:6px; margin:0; padding:0; }
.rd-drawer__links .rd-link-btn{ padding:.58rem .88rem; border-radius:12px; font-weight:800; display:flex; align-items:center; gap:10px; }

/* ---------- SCROLLER: flechas fijas + contenido scroll ---------- */
.rd-drawer__scroller{
  display:grid;
  grid-template-rows: 32px minmax(0, 1fr) 32px; /* flecha arriba | contenido | flecha abajo */
  gap: 8px; flex: 1 1 auto; min-height: 0;
}
/* Drawer: la zona scrolleable NO hereda el estilo global */
.rd-drawer__scroll{
  overflow: auto;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
  min-height: 0;
  -webkit-overflow-scrolling: touch;

  /* Oculta/neutraliza barras dentro del drawer */
  scrollbar-width: none;                 /* Firefox: oculta */
  scrollbar-color: auto;                 /* por si acaso, resetea colores */
}

/* WebKit: sin barra en el drawer */
.rd-drawer__scroll::-webkit-scrollbar{
  width: 0 !important;
  height: 0 !important;
}
.rd-drawer__scroll::-webkit-scrollbar-track,
.rd-drawer__scroll::-webkit-scrollbar-thumb{
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

.rd-drawer__scroll.is-auto{ scroll-behavior: auto; } /* desactiva smooth en autoscroll */

/* Flechas (usa <img class="rd-edge__img"> para WebP) */
.rd-edge{
  width:100%; height:32px; border-radius:10px;
  opacity:0; pointer-events:none; transition: opacity .15s ease, transform .15s ease, box-shadow .15s ease, background .15s ease;
  background: transparent; display:flex; align-items:center; justify-content:center;
  touch-action:none; user-select:none; cursor: default;
}
.rd-edge__img{ width:106px; height:16px; filter: invert(1) brightness(2); pointer-events:none; }
.rd-edge--top{    background: linear-gradient(to bottom, rgba(0,0,0,.45), rgba(0,0,0,0)); }
.rd-edge--bottom{ background: linear-gradient(to top,    rgba(0,0,0,.45), rgba(0,0,0,0)); }
.rd-edge.is-visible{ opacity:1; pointer-events:auto; cursor: pointer; }
.rd-edge.is-visible:hover{
  background: rgba(212,175,55,.14);
  box-shadow: 0 6px 18px rgba(0,0,0,.28), inset 0 0 0 1px rgba(212,175,55,.35);
  transform: translateZ(0) scale(1.02);
}

/* ---------- Responsive ---------- */
@media (max-width: 980px){
  .rd-links{ display:none; }
  .rd-nav__pill{
    grid-template-columns: auto 1fr auto; /* logo | buscador | hamburguesa */
    padding: .7rem 1rem; width: min(100%, 96%);
  }
  .rd-searchbox{ width:100%; justify-self: stretch; }
  .rd-toggle{ margin-left: 0; justify-self: end; }
}
@media (prefers-reduced-motion: reduce){
  .rd-link-btn, .rd-drawer, .rd-searchbox__input, .rd-searchbox__icon, .rd-toggle, .rd-drawer__close{
    transition: none !important;
  }
}
@media (max-width: 700px){
  .rd-nav__divider{ --band: 0; height: 1.2vh; background: transparent; }
  .rd-nav__divider::before{ display:none; }
}