/* ═══════════════════════════════════════════════════════
   HYC Shop — Header C3D (from Carrusel 3D.html design)
   Scoped under .c3d-hdr to avoid conflicts
   ═══════════════════════════════════════════════════════ */

@property --c3hbd { syntax:'<angle>'; inherits:false; initial-value:0deg }

/* ── Root variables ── */
.c3d-hdr {
  --c3h-bg: #070a0f;
  --c3h-ink: #eef3f6;
  --c3h-muted: rgba(238,243,246,0.58);
  --c3h-faint: rgba(238,243,246,0.34);
  --c3h-accent: #7c5cff;
  --c3h-line: rgba(255,255,255,0.10);
  --c3h-glass: rgba(255,255,255,0.045);
  --c3h-neoncy: #26e0ff;
  --c3h-neonpk: #7c5cff;
  position: relative;
  z-index: 200;
  font-family: 'Rajdhani', var(--font-display, sans-serif);
}

/* ── Top frame ── */
.c3d-hdr .c3h-topframe {
  position: relative;
  height: 64px;
}

/* ── Animated neon glow behind the ribbon ── */
.c3d-hdr .c3h-headglow {
  position: absolute;
  inset: -5px;
  z-index: 0;
  pointer-events: none;
  clip-path: polygon(0 50%, 20px 0, calc(100% - 20px) 0, 100% 50%, calc(100% - 20px) 100%, 20px 100%);
  background: conic-gradient(from var(--c3hbd),
    transparent 0 26deg, var(--c3h-neoncy) 56deg, transparent 92deg,
    transparent 206deg, var(--c3h-neonpk) 236deg, transparent 272deg,
    transparent 360deg);
  filter: blur(17px);
  opacity: .6;
  animation: c3h-bdspin 7s linear infinite;
}
@keyframes c3h-bdspin { to { --c3hbd: 360deg } }

/* ── Ribbon (clipped hexagonal bar) ── */
.c3d-hdr .c3h-ribbon {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  clip-path: polygon(0 50%, 20px 0, calc(100% - 20px) 0, 100% 50%, calc(100% - 20px) 100%, 20px 100%);
  background:
    conic-gradient(from var(--c3hbd),
      rgba(38,224,255,0) 0 26deg, var(--c3h-neoncy) 56deg, rgba(38,224,255,0) 92deg,
      transparent 206deg, var(--c3h-neonpk) 236deg, rgba(255,92,138,0) 272deg, transparent 360deg),
    linear-gradient(#243154,#243154);
  animation: c3h-bdspin 7s linear infinite;
}

/* ── Glass interior ── */
.c3d-hdr .c3h-glass {
  position: absolute;
  inset: 1.7px;
  overflow: hidden;
  clip-path: polygon(0 50%, 19px 0, calc(100% - 19px) 0, 100% 50%, calc(100% - 19px) 100%, 19px 100%);
  background: linear-gradient(180deg, #0c1322 0%, #0a0f1c 60%, #090d18 100%);
}
.c3d-hdr .c3h-glass::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 200% at 50% -70%, rgba(38,224,255,.12), transparent 60%),
    radial-gradient(60% 130% at 10% 50%, rgba(38,224,255,.08), transparent 70%),
    radial-gradient(60% 130% at 90% 50%, rgba(255,92,138,.09), transparent 70%);
}

/* ── Sweep shimmer ── */
.c3d-hdr .c3h-sweep {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 150px;
  background: linear-gradient(90deg, transparent, rgba(38,224,255,.22), rgba(255,92,138,.16), transparent);
  mix-blend-mode: screen;
  filter: blur(3px);
  animation: c3h-hsweep 6s ease-in-out infinite;
}
@keyframes c3h-hsweep {
  0%   { transform: translateX(-220px) }
  55%, 100% { transform: translateX(1620px) }
}

/* ── Nav row ── */
.c3d-hdr .c3h-navrow {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 22px;
  z-index: 3;
}
.c3d-hdr .c3h-links {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

/* ── Nav links ── */
.c3d-hdr .c3h-navlink {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(220,232,255,.72);
  text-decoration: none;
  padding: 9px 12px;
  border-radius: 9px;
  cursor: pointer;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: color .2s, background .2s, border-color .2s;
}
.c3d-hdr .c3h-navlink:hover { color: #fff; text-shadow: 0 0 12px rgba(38,224,255,.6); }
.c3d-hdr .c3h-navlink .c3h-car {
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  opacity: .75;
  transition: transform .25s;
}
.c3d-hdr .c3h-navlink.active {
  color: #bff4ff;
  border-color: rgba(38,224,255,.5);
  background: rgba(38,224,255,.07);
  box-shadow: 0 0 18px -4px rgba(38,224,255,.6), inset 0 0 12px -6px rgba(38,224,255,.7);
  text-shadow: 0 0 12px rgba(38,224,255,.7);
}
.c3d-hdr .c3h-navlink.cyan { color: var(--c3h-neoncy); text-shadow: 0 0 14px rgba(38,224,255,.5); }
.c3d-hdr .c3h-has-menu.open .c3h-navlink .c3h-car,
.c3d-hdr .c3h-has-menu.open .c3h-toolbtn .c3h-car { transform: rotate(180deg); }

/* ── Emblem/lens slot ── */
.c3d-hdr .c3h-emblem-slot {
  position: relative;
  width: 120px;
  height: 100%;
  flex: 0 0 auto;
}
.c3d-hdr .c3h-emblem {
  position: absolute;
  left: 50%; top: 50%;
  width: 134px; height: 134px;
  transform: translate(-50%,-50%);
  z-index: 60;
  cursor: pointer;
  text-decoration: none;
  display: block;
}
.c3d-hdr .c3h-emblem > * { pointer-events: none; }

/* Halo */
.c3d-hdr .c3h-halo {
  position: absolute; inset: -12px; border-radius: 50%;
  background: radial-gradient(circle, rgba(38,224,255,.42), transparent 64%);
  filter: blur(9px);
  animation: c3h-pulsehalo 2.6s ease-in-out infinite;
}
/* Outer spinning ring */
.c3d-hdr .c3h-r1 {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 16%, var(--c3h-neoncy) 30%, transparent 46%, transparent 66%, var(--c3h-neonpk) 80%, transparent 96%);
  -webkit-mask: radial-gradient(circle, transparent 62%, #000 63%);
          mask: radial-gradient(circle, transparent 62%, #000 63%);
  animation: c3h-spin360 5.5s linear infinite;
  filter: drop-shadow(0 0 7px rgba(38,224,255,.6));
}
/* Inner dashed ring */
.c3d-hdr .c3h-r2 {
  position: absolute; inset: 11px; border-radius: 50%;
  border: 1.5px dashed rgba(190,235,255,.4);
  animation: c3h-spin360rev 9s linear infinite;
}
/* Iris */
.c3d-hdr .c3h-iris {
  position: absolute; inset: 21%; border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle at 38% 32%, #1a3550, #060d18 76%);
  border: 1px solid rgba(38,224,255,.5);
  box-shadow: inset 0 0 20px -4px rgba(38,224,255,.55), inset 0 0 0 5px rgba(7,13,22,.55);
}
.c3d-hdr .c3h-seg { position: absolute; inset: 0; transform-origin: 50% 50%; }
.c3d-hdr .c3h-seg:nth-child(1) { transform: rotate(0deg); }
.c3d-hdr .c3h-seg:nth-child(2) { transform: rotate(60deg); }
.c3d-hdr .c3h-seg:nth-child(3) { transform: rotate(120deg); }
.c3d-hdr .c3h-seg:nth-child(4) { transform: rotate(180deg); }
.c3d-hdr .c3h-seg:nth-child(5) { transform: rotate(240deg); }
.c3d-hdr .c3h-seg:nth-child(6) { transform: rotate(300deg); }
.c3d-hdr .c3h-blade {
  position: absolute; inset: 0;
  clip-path: polygon(50% 11%, 19% 0, 81% 0);
  background: linear-gradient(180deg, #2b425e 0%, #14263b 58%, #0a1626 100%);
}
.c3d-hdr .c3h-seg:nth-child(even) .c3h-blade { filter: brightness(1.16); }
/* Logo in lens */
.c3d-hdr .c3h-lens-logo {
  position: absolute; inset: 14%; z-index: 3;
  filter: drop-shadow(0 0 7px rgba(38,224,255,.85)) drop-shadow(0 1px 2px rgba(0,0,0,.7));
}
.c3d-hdr .c3h-lens-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
/* Glint */
.c3d-hdr .c3h-glint {
  position: absolute; top: 11%; left: 19%; width: 30%; height: 20%;
  border-radius: 50%; z-index: 4; pointer-events: none;
  background: radial-gradient(circle, rgba(255,255,255,.45), transparent 70%);
  filter: blur(2px);
}

/* Shutter animation */
.c3d-hdr .c3h-emblem.play .c3h-blade { animation: c3h-shutter 3.2s cubic-bezier(.65,0,.35,1) .45s both; }
.c3d-hdr .c3h-emblem.play .c3h-lens-logo { animation: c3h-logoReveal 3.2s ease .45s both; }

@keyframes c3h-shutter {
  0%   { clip-path: polygon(50% 16%, 19% 0, 81% 0) }
  30%  { clip-path: polygon(50% 50%, 19% 0, 81% 0) }
  50%  { clip-path: polygon(50% 50%, 19% 0, 81% 0) }
  100% { clip-path: polygon(50% 11%, 19% 0, 81% 0) }
}
@keyframes c3h-logoReveal {
  0%,50% { opacity: 0; transform: scale(.32) }
  68%    { opacity: 1; transform: scale(1.12) }
  100%   { opacity: 1; transform: scale(1) }
}
@keyframes c3h-spin360    { to { transform: rotate(360deg) } }
@keyframes c3h-spin360rev { to { transform: rotate(-360deg) } }
@keyframes c3h-pulsehalo  { 0%,100%{opacity:.5} 50%{opacity:.95} }

/* ── Search bar ── */
.c3d-hdr .c3h-search {
  flex: 1 1 auto;
  min-width: 120px;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 42px;
  padding: 0 16px;
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  transition: border-color .2s, box-shadow .2s;
}
.c3d-hdr .c3h-search:focus-within {
  border-color: rgba(38,224,255,.55);
  box-shadow: 0 0 0 3px rgba(38,224,255,.12), 0 0 22px -6px rgba(38,224,255,.6);
}
.c3d-hdr .c3h-search > svg { width: 18px; height: 18px; stroke: rgba(220,232,255,.6); stroke-width: 2; fill: none; flex: 0 0 auto; }
.c3d-hdr .c3h-search input { flex: 1; background: none; border: none; outline: none; color: var(--c3h-ink); font-family: 'Manrope', var(--font-body, sans-serif); font-size: 15px; min-width: 0; }
.c3d-hdr .c3h-search input::placeholder { color: rgba(220,232,255,.4); }

/* ── Tool buttons ── */
.c3d-hdr .c3h-toolbtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 42px;
  padding: 0 12px;
  border-radius: 999px;
  cursor: pointer;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(232,240,255,.92);
  font-family: 'Rajdhani', var(--font-display, sans-serif);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .03em;
  white-space: nowrap;
  transition: border-color .2s, background .2s;
}
.c3d-hdr .c3h-toolbtn:hover { border-color: rgba(38,224,255,.4); background: rgba(255,255,255,.07); }
.c3d-hdr .c3h-toolbtn .c3h-cursym { color: var(--c3h-neoncy); font-weight: 700; }
.c3d-hdr .c3h-toolbtn .c3h-car { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid rgba(220,232,255,.6); transition: transform .25s; }

/* ── Icon buttons ── */
.c3d-hdr .c3h-iconbtn {
  position: relative;
  width: 44px; height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  color: #dce8ff;
  text-decoration: none;
  transition: border-color .2s, background .2s;
}
.c3d-hdr .c3h-iconbtn:hover { border-color: rgba(38,224,255,.4); background: rgba(255,255,255,.07); }
.c3d-hdr .c3h-iconbtn svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 1.8; fill: none; }
.c3d-hdr .c3h-iconbtn .c3h-count {
  position: absolute;
  top: -3px; right: -3px;
  min-width: 18px; height: 18px;
  padding: 0 4px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: var(--c3h-neonpk);
  color: #fff;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 11px;
  box-shadow: 0 0 12px -2px var(--c3h-neonpk);
}

/* ── Ingresar CTA button ── */
.c3d-hdr .c3h-ingresar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 18px;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  font-family: 'Rajdhani', var(--font-display, sans-serif);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #04141b;
  text-decoration: none;
  white-space: nowrap;
  background: linear-gradient(100deg, var(--c3h-neoncy), #7fe9ff 38%, #ffd0e0 68%, var(--c3h-neonpk));
  box-shadow: 0 0 24px -6px rgba(38,224,255,.7), 0 8px 20px -10px rgba(255,92,138,.8);
  transition: filter .2s;
}
.c3d-hdr .c3h-ingresar:hover { filter: brightness(1.08); }
.c3d-hdr .c3h-ingresar svg { width: 17px; height: 17px; stroke: #04141b; stroke-width: 2.2; fill: none; }

/* ── Dropdown menus ── */
.c3d-hdr .c3h-has-menu { position: relative; }
.c3d-hdr .c3h-menu {
  position: absolute;
  top: calc(100% + 12px);
  min-width: 210px;
  padding: 8px;
  border-radius: 14px;
  z-index: 80;
  background: rgba(10,15,26,.97);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(38,224,255,.22);
  box-shadow: 0 26px 60px -24px #000, 0 0 24px -10px rgba(38,224,255,.5);
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity .2s, transform .2s;
}
.c3d-hdr .c3h-has-menu.open > .c3h-menu { opacity: 1; transform: none; pointer-events: auto; }
.c3d-hdr .c3h-menu.left { left: 0; }
.c3d-hdr .c3h-menu.right { right: 0; }
.c3d-hdr .c3h-menu .c3h-mi {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 12px;
  border-radius: 9px;
  cursor: pointer;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .02em;
  color: rgba(232,240,255,.85);
  text-decoration: none;
  transition: background .15s, color .15s;
}
.c3d-hdr .c3h-menu .c3h-mi:hover { background: rgba(38,224,255,.10); color: #fff; }
.c3d-hdr .c3h-menu .c3h-mi small { color: var(--c3h-faint); font-family: 'Manrope', sans-serif; font-weight: 500; font-size: 12px; }
.c3d-hdr .c3h-menu.mega { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; min-width: 430px; }
.c3d-hdr .c3h-menu .c3h-mh {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c3h-neoncy);
  padding: 8px 12px 5px;
  grid-column: 1 / -1;
}
.c3d-hdr .c3h-menu.mega .c3h-mi { font-size: 13px; }
.c3d-hdr .c3h-menu .c3h-see-all {
  grid-column: 1 / -1;
  color: var(--c3h-neoncy);
  font-size: 12px;
  letter-spacing: .06em;
}

/* Cart menu */
.c3d-hdr .c3h-cart-menu { min-width: 308px; }
.c3d-hdr .c3h-cart-go {
  display: block;
  width: 100%;
  margin-top: 8px;
  height: 40px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #04141b;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(100deg, var(--c3h-neoncy), var(--c3h-neonpk));
  transition: filter .15s;
}
.c3d-hdr .c3h-cart-go:hover { filter: brightness(1.08); }

/* ── Subbar / announcement strip ── */
.c3d-hdr .c3h-subbar {
  position: relative;
  margin-top: 9px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 22px;
  border-radius: 10px;
  background: linear-gradient(180deg, #0a0f1c, #080c16);
  border: 1px solid rgba(255,255,255,.07);
  overflow: hidden;
  font-family: 'Manrope', var(--font-body, sans-serif);
}
.c3d-hdr .c3h-subbar::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 1.5px;
  background: linear-gradient(90deg, transparent, var(--c3h-neoncy), var(--c3h-neonpk), transparent);
  background-size: 50% 100%;
  animation: c3h-slideline 3.4s linear infinite;
  opacity: .85;
}
@keyframes c3h-slideline { 0%{background-position:-100% 0} 100%{background-position:200% 0} }
.c3d-hdr .c3h-badges { display: flex; align-items: center; gap: 26px; }
.c3d-hdr .c3h-badge2 {
  display: flex; align-items: center; gap: 9px;
  font-size: 13.5px; font-weight: 600; color: rgba(222,232,255,.78);
}
.c3d-hdr .c3h-badge2 svg { width: 16px; height: 16px; fill: none; stroke-width: 1.8; }
.c3d-hdr .c3h-offer {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 700; color: #ffd9e6; white-space: nowrap;
}
.c3d-hdr .c3h-offer .c3h-od {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--c3h-neonpk);
  box-shadow: 0 0 10px var(--c3h-neonpk);
  animation: c3h-pulse 1.3s ease-in-out infinite;
}
.c3d-hdr .c3h-offer b { color: var(--c3h-neoncy); }
@keyframes c3h-pulse { 0%,100%{opacity:.5} 50%{opacity:1} }

/* ── Responsive: hide on mobile (uses existing mob-bar) ── */
@media (max-width: 820px) {
  .c3d-hdr { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .c3d-hdr .c3h-headglow,
  .c3d-hdr .c3h-ribbon,
  .c3d-hdr .c3h-r1,
  .c3d-hdr .c3h-r2,
  .c3d-hdr .c3h-sweep { animation: none; }
  .c3d-hdr .c3h-emblem.play .c3h-blade,
  .c3d-hdr .c3h-emblem.play .c3h-lens-logo { animation: none; }
}

/* ── Desktop: hide old navbar, only C3D header shows ── */
@media (min-width: 821px) {
  .navbar { display: none !important; }
}

/* ── Make topframe tall enough for the 134px emblem ── */
.c3d-hdr .c3h-topframe {
  height: 80px;
}

/* ── Emblem overflows the topframe intentionally ── */
.c3d-hdr .c3h-emblem-slot {
  overflow: visible;
}
.c3d-hdr .c3h-topframe {
  overflow: visible;
}
.c3d-hdr .c3h-ribbon,
.c3d-hdr .c3h-headglow {
  clip-path: polygon(0 50%, 20px 0, calc(100% - 20px) 0, 100% 50%, calc(100% - 20px) 100%, 20px 100%);
  overflow: visible;
}