/* ===========================================================
   NECORA PRO – SHOP ULTRA EXPERIENCE (v29 GLASS SYSTEM FULL)
   ===========================================================
   ✨ Basado en v28 FINAL PRO UX (sin recortes)
   ✨ Actualizado a Glass System v17 (Cian #00C2B2 / VerdeAzul #018E85)
   ✨ Dark mode neutro elegante (consistente con product / cart)
   ✨ Mantiene toda la estructura original y efectos glass
=========================================================== */

/* === GLOBAL RESET === */
:root {
  /* Gamma tokens */
  --necora-accent: #00C2B2;          /* brand-cyan */
  --necora-accent-alt: #018E85;      /* brand-gold/alt */
  --necora-text: #111;
  --necora-glass-bg: rgba(255,255,255,0.65);
  --necora-shadow-soft: 0 60px 120px rgba(0,0,0,0.12); /* glow */
  --necora-blur: 22px; /* blur */
  --necora-radius-lg: 1.5rem; /* radius */

  /* Backward-compat aliases */
  --color-primary: var(--necora-accent);
  --color-secondary: var(--necora-accent-alt);
  --glow: var(--necora-shadow-soft);
  --blur: var(--necora-blur);
  --radius: var(--necora-radius-lg);
}
html { scroll-behavior: smooth; overflow-x:hidden; }
body { overflow-x:hidden; }
.necora-shop-wrapper { animation: fadeIn 1s ease forwards; overflow:visible!important; }
@keyframes fadeIn { from{opacity:0;transform:translateY(20px);} to{opacity:1;transform:translateY(0);} }

/* ===========================================================
   HERO PRINCIPAL GLASS 3D
=========================================================== */
.necora-shop-hero {
  position: relative;
  text-align: center;
  border-radius: var(--radius);
  padding: 6rem 2rem 4rem;
  background: linear-gradient(145deg,rgba(255,255,255,0.65),rgba(255,255,255,0.35));
  backdrop-filter: blur(var(--necora-blur)) saturate(1.5);
  box-shadow: var(--necora-shadow-soft);
  overflow: hidden;
  isolation: isolate;
}
.necora-shop-hero::before {
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(circle at 70% 10%, var(--necora-accent) 0%, transparent 70%);
  opacity:.2;
  z-index:-1;
}
#heroParticles {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  pointer-events:none;
  z-index:0;
}
.necora-shop-hero-inner { position:relative; z-index:2; }

.necora-shop-title {
  font-size: clamp(2.4rem,3vw,3.6rem);
  font-weight: 800;
  background: linear-gradient(90deg,var(--necora-accent),var(--necora-accent-alt));
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  letter-spacing: -0.02em;
  margin-bottom: .3rem;
}
.necora-shop-subtitle {
  font-size: 1.1rem;
  opacity: .85;
  color: var(--necora-text,#111);
  margin-bottom: 2rem;
}
.necora-hero-actions {
  display:flex;justify-content:center;gap:1rem;margin-bottom:2.2rem;
}
.necora-hero-actions a {
  padding: 1rem 2.2rem;
  border-radius: 50px;
  font-weight: 700;
  font-size: 1rem;
  transition: all .25s ease;
}
.btn-primary {
  background: linear-gradient(135deg,var(--necora-accent),var(--necora-accent-alt));
  color:#fff;
  box-shadow:0 10px 30px var(--necora-shadow-soft);
}
.btn-primary:hover { transform: translateY(-3px) scale(1.02); filter: brightness(1.15); }
.btn-outline {
  border:2px solid var(--necora-accent);
  color:var(--necora-accent);
}
.btn-outline:hover {background:var(--necora-accent);color:#fff;transform:translateY(-3px);}

/* === TRUST META ROW (Hero UX) === */
.hero-meta-trust {
  margin-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .8rem 1.2rem;
  font-size: .9rem;
  color: var(--color-text,#111);
  font-weight: 500;
}
.hero-meta-trust span {
  background: rgba(255,255,255,0.4);
  border: 1px solid rgba(0,0,0,0.05);
  backdrop-filter: blur(12px) saturate(1.4);
  padding: .5rem 1.1rem;
  border-radius: 1rem;
  box-shadow: 0 10px 40px rgba(0,0,0,0.05);
}
[data-theme="dark"] .hero-meta-trust span {
  background: rgba(25,25,35,0.6);
  color: #fff;
}

/* === FILTROS === */
.necora-shop-filters {
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:.8rem;
  position:relative;
  z-index:5;
  margin-top:2rem;
}
.necora-filter-btn {
  display:flex;align-items:center;gap:.4rem;
  padding:.75rem 1.3rem;
  border-radius:.9rem;
  font-weight:600;
  color:var(--necora-text);
  background:rgba(255,255,255,0.25);
  border:1px solid rgba(255,255,255,0.3);
  backdrop-filter:blur(10px);
  box-shadow:0 0 20px rgba(0,0,0,0.05);
  cursor:pointer;
  transition:all .25s ease;
}
.necora-filter-btn:hover,
.necora-filter-btn.is-active {
  background:linear-gradient(135deg,var(--necora-accent),var(--necora-accent-alt));
  color:#fff;
  box-shadow:0 8px 24px var(--necora-shadow-soft);
  transform:translateY(-2px);
}

/* ===========================================================
   COLECCIONES VISUALES (categorías destacadas)
=========================================================== */
.shop-collections {
  max-width: 1200px;
  margin: 5rem auto;
  text-align: center;
}
.collections-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}
.collection-card {
  position: relative;
  border-radius: 1.5rem;
  overflow: hidden;
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(0,0,0,0.05);
  backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: 0 25px 80px rgba(0,0,0,0.08);
  transition: all .45s cubic-bezier(.19,1,.22,1);
}
.collection-card img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(.19,1,.22,1);
}
.collection-card:hover img { transform: scale(1.07); }
.collection-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 45px 140px var(--glow);
}
.collection-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 60%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.5rem;
  color: #fff;
}
.collection-overlay h3 {
  font-size: 1.2rem;
  font-weight: 700;
  margin: 0;
}
.collection-overlay p {
  font-size: .95rem;
  opacity: .8;
  margin-top: .3rem;
}
[data-theme="dark"] .collection-card {
  background: rgba(25,25,35,0.7);
  border-color: rgba(255,255,255,0.08);
}
[data-theme="dark"] .collection-overlay {
  background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, transparent 60%);
}

/* ===========================================================
   FEATURED PRODUCTS – Cards Tilt
=========================================================== */
.necora-featured-products {
  margin:5rem auto;
  text-align:center;
}
.section-title {
  font-size:clamp(1.9rem,2vw,2.4rem);
  font-weight:800;
  margin-bottom:2rem;
  color:var(--necora-text);
}
.featured-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:2rem;
  max-width:1200px;
  margin:0 auto;
}
.featured-card {
  position:relative;
  border-radius:1.4rem;
  overflow:hidden;
  background:rgba(255,255,255,0.6);
  border:1px solid rgba(255,255,255,0.4);
  backdrop-filter:blur(20px);
  box-shadow:0 25px 70px rgba(0,0,0,0.1);
  transition: transform .4s ease, box-shadow .4s ease;
  contain:content; will-change:transform;
}
.featured-card:hover {
  transform: perspective(600px) rotateY(6deg) translateY(-5px);
  box-shadow:0 50px 140px var(--glow);
}
.featured-card img { width:100%; height:230px; object-fit:cover; }
.featured-info { padding:1rem 1.4rem; text-align:left; }
.featured-info h3 { font-weight:700; font-size:1.1rem; margin:.3rem 0; }
.featured-info .price { color:var(--necora-accent); font-weight:700; }

/* ===========================================================
   BENEFICIOS – Glass
=========================================================== */
.shop-benefits {
  display:flex;
  justify-content:space-around;
  flex-wrap:wrap;
  gap:2rem;
  margin:6rem 0 4rem;
}
.shop-benefits .benefit {
  flex:1 1 280px;
  background:rgba(255,255,255,0.45);
  border:1px solid rgba(0,0,0,0.05);
  border-radius:1rem;
  padding:2rem 1.5rem;
  text-align:center;
  backdrop-filter:blur(15px);
  transition:all .35s ease;
  box-shadow:0 10px 40px rgba(0,0,0,0.06);
}
.shop-benefits .benefit:hover {
  transform:translateY(-5px);
  box-shadow:0 25px 60px rgba(0,0,0,0.1);
}
.shop-benefits i {
  font-size:2.2rem;
  color:var(--necora-accent);
  margin-bottom:.7rem;
}

/* ===========================================================
   PRODUCT GRID – Horizontal Glass Split
=========================================================== */
ul.products {
  display:flex; flex-direction:column; align-items:center;
  list-style:none; gap:3rem; padding:0; margin:4rem auto 6rem;
}
ul.products li.product.necora-product-card {
  display:flex !important; flex-direction:row !important;
  align-items:center; justify-content:space-between;
  width:100%; max-width:1100px; min-height:400px;
  background:linear-gradient(135deg,rgba(255,255,255,0.75),rgba(255,255,255,0.6));
  border-radius:1.8rem; border:1px solid rgba(0,0,0,0.05);
  backdrop-filter:blur(20px);
  box-shadow:0 40px 120px rgba(0,0,0,0.12);
  overflow:hidden; transition:all .45s ease;
  contain:content; will-change:transform;
}
ul.products li.product.necora-product-card:hover {
  transform:translateY(-8px);
  box-shadow:0 50px 140px var(--glow);
}
.necora-card-media {
  flex:0 0 55%;
  position:relative;
  height:100%;
  overflow:hidden;
}
.necora-card-img {
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.2s cubic-bezier(.19,1,.22,1);
}
.necora-product-card:hover .necora-card-img { transform:scale(1.08); }
.necora-card-body {
  flex:1; padding:3rem 4rem; display:flex; flex-direction:column;
  justify-content:center; gap:1.2rem;
}
.necora-card-title a {
  font-size:1.8rem; font-weight:800;
  color:var(--necora-text,#111);
  text-decoration:none;
}
.necora-card-title a:hover { color:var(--necora-accent); }
.necora-card-price { font-size:1.4rem; font-weight:700; color:var(--necora-accent); }
.necora-card-actions { display:flex; gap:1rem; }
.necora-add-btn {
  background:linear-gradient(135deg,var(--necora-accent),var(--necora-accent-alt));
  color:#fff; font-weight:700;
  border:none; border-radius:1rem;
  padding:.9rem 1.8rem;
  transition:all .25s ease;
  box-shadow:0 20px 60px var(--necora-shadow-soft);
}
.necora-add-btn:hover { transform:translateY(-3px) scale(1.05); filter:brightness(1.15); }
.necora-view-btn {
  background:rgba(0,0,0,0.05);
  color:var(--color-text);
  border-radius:1rem;
  padding:.9rem 1.6rem;
  font-weight:600;
  text-decoration:none;
  transition:all .25s ease;
}
.necora-view-btn:hover { background:rgba(0,0,0,0.1); }
ul.products li.product.necora-product-card:nth-child(even){ flex-direction:row-reverse !important; }

/* ===========================================================
   TOP VENDIDOS – Carrusel Scroll
=========================================================== */
.necora-top-products {
  margin:6rem auto;
  text-align:center;
  overflow:hidden;
}
.top-grid {
  display:flex;
  gap:1.5rem;
  overflow-x:auto;
  scroll-behavior:smooth;
  padding:1rem 1rem 2rem;
}
.top-card {
  flex:0 0 280px;
  border-radius:1rem;
  overflow:hidden;
  background:rgba(255,255,255,0.65);
  border:1px solid rgba(0,0,0,0.05);
  backdrop-filter:blur(12px);
  transition:transform .4s ease, box-shadow .4s ease;
  contain:content; will-change:transform;
}
.top-card:hover { transform:translateY(-6px); box-shadow:0 50px 140px var(--glow); }
.top-card img { width:100%; height:200px; object-fit:cover; }
.top-info { padding:1rem; text-align:left; }
.top-info h3 { font-size:1.05rem; font-weight:700; margin:.2rem 0; }
.top-info .price { font-weight:700; color:var(--necora-accent); }

/* ===========================================================
   CTA FINAL – Glass Gradient
=========================================================== */
.shop-cta {
  max-width: 1100px;
  margin: 6rem auto 4rem;
  text-align: center;
  padding: 0 1rem;
}
.cta-inner {
  border-radius: 2rem;
  background: linear-gradient(145deg, rgba(255,255,255,0.6), rgba(255,255,255,0.25));
  border: 1px solid rgba(0,0,0,0.05);
  box-shadow: 0 60px 180px rgba(0,0,0,0.12);
  backdrop-filter: blur(24px) saturate(1.4);
  padding: 3rem 2rem;
}
.cta-inner h2 {
  font-size: clamp(1.8rem, 2vw, 2.4rem);
  font-weight: 800;
  margin-bottom: 1rem;
  color: var(--necora-text,#111);
}
.cta-inner p {
  max-width: 48ch;
  margin: 0 auto 1.8rem;
  opacity: .8;
  line-height: 1.6;
}
[data-theme="dark"] .cta-inner {
  background: rgba(25,25,35,0.8);
  border-color: rgba(255,255,255,0.08);
  box-shadow: 0 60px 200px rgba(0,0,0,0.8);
  color: #fff;
}

/* ===========================================================
   BADGES
=========================================================== */
.necora-badge {
  position:absolute; top:1rem; left:1rem;
  background:linear-gradient(135deg,var(--color-primary),var(--color-secondary));
  color:#fff; font-weight:700;
  border-radius:.8rem;
  padding:.45rem .8rem;
  font-size:.85rem;
  box-shadow:0 10px 25px var(--glow);
}

/* ===========================================================
   DARK MODE
=========================================================== */
[data-theme="dark"] {
  --glass-bg: rgba(18,18,24,0.9);
  --glass-border: rgba(255,255,255,0.05);
}
[data-theme="dark"] .necora-shop-hero,
[data-theme="dark"] .featured-card,
[data-theme="dark"] .top-card,
[data-theme="dark"] ul.products li.product.necora-product-card,
[data-theme="dark"] .shop-benefits .benefit {
  background: rgba(25,25,35,0.85);
  color:#f1f1f1;
  border-color:rgba(255,255,255,0.08);
}
[data-theme="dark"] .necora-card-title a {color:#fafafa;}
[data-theme="dark"] .necora-add-btn {
  background:linear-gradient(145deg,var(--necora-accent),var(--necora-accent-alt));
  box-shadow:0 0 22px var(--necora-shadow-soft);
}
[data-theme="dark"] .necora-view-btn {background:rgba(255,255,255,0.08);color:#fff;}
[data-theme="dark"] .necora-filter-btn {background:rgba(255,255,255,0.08);}
[data-theme="dark"] .necora-filter-btn:hover,
[data-theme="dark"] .necora-filter-btn.is-active {
  background:linear-gradient(135deg,var(--necora-accent),var(--necora-accent-alt));
  color:#fff;
}

/* ===========================================================
   RESPONSIVE
=========================================================== */
@media (max-width:992px){
  .shop-benefits{flex-direction:column;gap:1.5rem;}
  .featured-grid{grid-template-columns:1fr 1fr;}
  ul.products li.product.necora-product-card{
    flex-direction:column !important;
    max-width:95%; min-height:auto;
  }
  .necora-card-media{max-width:100%;aspect-ratio:16/9;}
  .necora-card-body{text-align:center;padding:2rem;}
}
@media (max-width:600px){
  .featured-grid{grid-template-columns:1fr;}
  .top-grid{gap:1rem;}
  .necora-hero-actions{flex-direction:column;}
}
@media (min-width:1600px){
  .necora-shop-hero {padding:8rem 3rem 5rem;}
  .featured-grid, .collections-grid {gap:2.5rem;}
}